Updates

Co-Authored-By: Claude Opus 5.5 <[email protected]>

components/form/Input/index.tsx

@@ -165,6 +165,12 @@ export default function Input<KeyType extends string>(
         numberText ? "text" : props.type,
     );
 
+    /** Date and time types open their native picker from anywhere in the field. */
+    const isPickerType =
+        PICKER_INPUT_TYPES.includes(String(props.type)) &&
+        !props.readOnly &&
+        !props.disabled;
+
     const DEFAULT_DEBOUNCE = 200;
     const finalDebounce = debounce || DEFAULT_DEBOUNCE;
     const finalLabel =
@@ -307,10 +313,19 @@ export default function Input<KeyType extends string>(
                 "hover:border-none hover:outline-none focus:border-none focus:outline-none",
                 "dark:bg-transparent dark:outline-none dark:border-none",
                 "p-0 grow",
+                isPickerType && "cursor-pointer",
                 "twui-input",
                 props.className,
             )}
             ref={inputRef}
+            onClick={(e) => {
+                if (isPickerType) {
+                    try {
+                        e.currentTarget.showPicker();
+                    } catch {}
+                }
+                props?.onClick?.(e);
+            }}
             onFocus={(e) => {
                 setFocus(true);
                 props?.onFocus?.(e);
@@ -528,6 +543,8 @@ export default function Input<KeyType extends string>(
     );
 }
 
+const PICKER_INPUT_TYPES = ["date", "datetime-local", "time", "month", "week"];
+
 const updateInput = ({
     newValue,
     inputRef,