bestax-mcp 0.0.0

package/data/components/DateTimeInput.json

@@ -0,0 +1,952 @@
+{
+  "name": "DateTimeInput",
+  "kind": "component",
+  "category": "form",
+  "slug": "form/datetime/datetimeinput",
+  "docsUrl": "https://bestax.io/docs/api/form/datetime/datetimeinput",
+  "examples": [
+    {
+      "title": "Basic DateTimeInput",
+      "code": "<DateTimeInput label=\"Appointment\" placeholder=\"YYYY-MM-DD HH:MM\" />"
+    },
+    {
+      "title": "Basic DateTimeInput",
+      "code": "<DateTimeInput\n  label=\"Appointment\"\n  placeholder=\"YYYY-MM-DD HH:MM\"\n  openOnFocus={false}\n/>"
+    },
+    {
+      "title": "Controlled",
+      "code": "function example() {\n  const [v, setV] = useState(new Date());\n  return (\n    <Block>\n      <DateTimeInput label=\"Meeting\" value={v} onChange={setV} />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Controlled",
+      "code": "function example() {\n  const [v, setV] = useState(new Date());\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Meeting\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "12-hour Format",
+      "code": "<DateTimeInput\n  label=\"12-hour\"\n  hourFormat=\"12\"\n  defaultValue={new Date()}\n  mobileNative={false}\n/>"
+    },
+    {
+      "title": "12-hour Format",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"12-hour entry\"\n      hourFormat=\"12\"\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "With Seconds",
+      "code": "<DateTimeInput\n  label=\"With seconds\"\n  enableSeconds\n  defaultValue={new Date()}\n  mobileNative={false}\n/>"
+    },
+    {
+      "title": "With Seconds",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"With a seconds segment\"\n      enableSeconds\n      defaultValue={new Date(2024, 5, 7, 13, 45, 30)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "12-hour with Seconds",
+      "code": "<DateTimeInput\n  label=\"12-hour with seconds\"\n  hourFormat=\"12\"\n  enableSeconds\n  defaultValue={new Date()}\n  mobileNative={false}\n/>"
+    },
+    {
+      "title": "12-hour with Seconds",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"12-hour with seconds and AM/PM\"\n      hourFormat=\"12\"\n      enableSeconds\n      defaultValue={new Date(2024, 5, 7, 13, 45, 30)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Formats",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput\n    label=\"YYYY-MM-DD HH:mm (default)\"\n    defaultValue={new Date(2026, 4, 30, 13, 45)}\n    mobileNative={false}\n  />\n  <DateTimeInput\n    label=\"MM/DD/YYYY hh:mm A\"\n    format=\"MM/DD/YYYY hh:mm A\"\n    defaultValue={new Date(2026, 4, 30, 13, 45)}\n    mobileNative={false}\n  />\n  <DateTimeInput\n    label=\"DD.MM.YYYY HH:mm\"\n    format=\"DD.MM.YYYY HH:mm\"\n    defaultValue={new Date(2026, 4, 30, 13, 45)}\n    mobileNative={false}\n  />\n  <DateTimeInput\n    label=\"Intl — display only\"\n    format={{ dateStyle: 'medium', timeStyle: 'short' }}\n    editable={false}\n    defaultValue={new Date(2026, 4, 30, 13, 45)}\n    mobileNative={false}\n  />\n</Block>"
+    },
+    {
+      "title": "Formats",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"DD.MM.YYYY HH:mm with dot separators\"\n      format=\"DD.MM.YYYY HH:mm\"\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Launcher Icon",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput label=\"Default (left icon + right launcher)\" />\n  <DateTimeInput\n    label=\"Custom launcher glyph\"\n    triggerIconName=\"calendar-check\"\n  />\n  <DateTimeInput label=\"No launcher\" triggerIcon={false} />\n  <DateTimeInput label=\"Left icon hidden\" iconLeftName=\"\" />\n</Block>"
+    },
+    {
+      "title": "Launcher Icon",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput\n    label=\"Default (left icon + right launcher)\"\n    openOnFocus={false}\n  />\n  <DateTimeInput\n    label=\"Custom launcher glyph\"\n    triggerIconName=\"calendar-check\"\n    openOnFocus={false}\n  />\n  <DateTimeInput\n    label=\"No launcher (popover via ↓ only)\"\n    triggerIcon={false}\n    openOnFocus={false}\n  />\n  <DateTimeInput label=\"Left icon hidden\" iconLeftName=\"\" openOnFocus={false} />\n</Block>"
+    },
+    {
+      "title": "Min and Max",
+      "code": "function example() {\n  const today = new Date();\n  const min = new Date(today);\n  min.setHours(9, 0, 0, 0);\n  const max = new Date(today);\n  max.setHours(17, 0, 0, 0);\n  return <DateTimeInput label=\"Office hours today\" min={min} max={max} />;\n}"
+    },
+    {
+      "title": "Min and Max",
+      "code": "function example() {\n  const now = new Date();\n  const min = new Date(now);\n  min.setHours(9, 0, 0, 0);\n  const max = new Date(now);\n  max.setHours(17, 0, 0, 0);\n  const noon = new Date(now);\n  noon.setHours(12, 0, 0, 0);\n  return (\n    <DateTimeInput\n      label=\"Office hours today only — typed entry too\"\n      min={min}\n      max={max}\n      defaultValue={noon}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Disabled Dates",
+      "code": "<DateTimeInput\n  label=\"No weekend appointments\"\n  shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}\n  mobileNative={false}\n/>"
+    },
+    {
+      "title": "Disabled Dates",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"Weekends rejected while typing\"\n      shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Unselectable Times",
+      "code": "<DateTimeInput\n  label=\"Lunch hour blocked\"\n  unselectableTimes={d => d.getHours() === 12}\n  defaultValue={new Date()}\n  mobileNative={false}\n/>"
+    },
+    {
+      "title": "Unselectable Times",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"Lunch hour rejected while typing\"\n      unselectableTimes={d => d.getHours() === 12}\n      defaultValue={new Date(2024, 5, 7, 11, 30)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Inline",
+      "code": "<DateTimeInput label=\"Inline\" inline defaultValue={new Date()} />"
+    },
+    {
+      "title": "First Day of Week",
+      "code": "<DateTimeInput\n  label=\"Monday-first\"\n  firstDayOfWeek={1}\n  defaultValue={new Date()}\n  mobileNative={false}\n/>"
+    },
+    {
+      "title": "First Day of Week",
+      "code": "<DateTimeInput\n  label=\"Monday-first\"\n  firstDayOfWeek={1}\n  defaultValue={new Date()}\n  mobileNative={false}\n  openOnFocus={false}\n/>"
+    },
+    {
+      "title": "Mobile Native",
+      "code": "<DateTimeInput label=\"Native datetime-local\" mobileNative={true} />"
+    },
+    {
+      "title": "Locale",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput\n    label=\"ja-JP\"\n    locale=\"ja-JP\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n  <DateTimeInput\n    label=\"fr-FR\"\n    locale=\"fr-FR\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n</Block>"
+    },
+    {
+      "title": "Locale",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput\n    label=\"ja-JP\"\n    locale=\"ja-JP\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n  <DateTimeInput\n    label=\"fr-FR\"\n    locale=\"fr-FR\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n</Block>"
+    },
+    {
+      "title": "Sizes",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput label=\"Small\" controlSize=\"small\" size=\"small\" />\n  <DateTimeInput label=\"Default\" />\n  <DateTimeInput label=\"Medium\" controlSize=\"medium\" size=\"medium\" />\n  <DateTimeInput label=\"Large\" controlSize=\"large\" size=\"large\" />\n</Block>"
+    },
+    {
+      "title": "Sizes",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput\n    label=\"Small\"\n    controlSize=\"small\"\n    size=\"small\"\n    openOnFocus={false}\n  />\n  <DateTimeInput label=\"Default\" openOnFocus={false} />\n  <DateTimeInput\n    label=\"Medium\"\n    controlSize=\"medium\"\n    size=\"medium\"\n    openOnFocus={false}\n  />\n  <DateTimeInput\n    label=\"Large\"\n    controlSize=\"large\"\n    size=\"large\"\n    openOnFocus={false}\n  />\n</Block>"
+    },
+    {
+      "title": "Colors",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput label=\"Primary\" color=\"primary\" />\n  <DateTimeInput label=\"Info\" color=\"info\" />\n  <DateTimeInput label=\"Success\" color=\"success\" />\n  <DateTimeInput label=\"Warning\" color=\"warning\" />\n  <DateTimeInput label=\"Danger\" color=\"danger\" />\n</Block>"
+    },
+    {
+      "title": "Colors",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput label=\"Primary\" color=\"primary\" openOnFocus={false} />\n  <DateTimeInput label=\"Info\" color=\"info\" openOnFocus={false} />\n  <DateTimeInput label=\"Success\" color=\"success\" openOnFocus={false} />\n  <DateTimeInput label=\"Warning\" color=\"warning\" openOnFocus={false} />\n  <DateTimeInput label=\"Danger\" color=\"danger\" openOnFocus={false} />\n</Block>"
+    },
+    {
+      "title": "States",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateTimeInput label=\"Disabled\" disabled />\n  <DateTimeInput label=\"Read only\" readOnly defaultValue={new Date()} />\n  <DateTimeInput label=\"Loading\" isLoading />\n</Block>"
+    },
+    {
+      "title": "Context-Aware Rendering",
+      "code": "<DateTimeInput label=\"When\" placeholder=\"YYYY-MM-DD HH:MM\" />"
+    },
+    {
+      "title": "Context-Aware Rendering",
+      "code": "function example() {\n  return (\n    <Field horizontal label=\"When\">\n      <Field.Body>\n        <Field>\n          <DateTimeInput placeholder=\"YYYY-MM-DD HH:MM\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+    },
+    {
+      "title": "Context-Aware Rendering",
+      "code": "function example() {\n  return (\n    <Field horizontal label=\"When\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"calendar-alt\">\n            <DateTimeInput placeholder=\"YYYY-MM-DD HH:MM\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+    },
+    {
+      "title": "Manual Keyboard Entry",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"Type across date and time\"\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Manual Keyboard Entry",
+      "code": "function example() {\n  const [v, setV] = useState(() => new Date(2024, 5, 7, 13, 45));\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Manual Keyboard Entry",
+      "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"Free-form (Intl format)\"\n      format={{ dateStyle: 'medium', timeStyle: 'short' }}\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      openOnFocus={false}\n    />\n  );\n}"
+    },
+    {
+      "title": "Picker vs Input Modes",
+      "code": "<DateTimeInput label=\"Picker only\" editable={false} defaultValue={new Date()} />"
+    },
+    {
+      "title": "Picker vs Input Modes",
+      "code": "<DateTimeInput label=\"Input only\" popover={false} defaultValue={new Date()} />"
+    }
+  ],
+  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name.\n- Calendar uses `role=\"grid\"`; cells expose `aria-selected`, `aria-disabled`, and `aria-current=\"date\"`.\n- Each time wheel uses `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`.\n- The footer's confirm button exposes an accessible label (`Done`); the Reset button reverts your edits to the value the popover opened with.\n- Tab order naturally walks from calendar → time wheels → footer (Reset / ✓).",
+  "related": ["DateInput", "Input", "TimeInput"],
+  "storybook": "https://bestax.io/storybook/?path=/story/form-datetimeinput",
+  "summary": "The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.",
+  "import": "import { DateTimeInput } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/form/DateTimeInput.tsx",
+  "rootClass": "input",
+  "parts": [
+    {
+      "path": "DateTimeInput",
+      "summary": "The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.",
+      "component": null,
+      "props": [
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "labelSize",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size for the label.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "labelProps",
+          "type": "React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }",
+          "default": null,
+          "description": "Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "horizontal",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render the field with horizontal layout.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "iconLeft",
+          "type": "IconProps",
+          "default": null,
+          "description": "Icon props for the left icon.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "iconRight",
+          "type": "IconProps",
+          "default": null,
+          "description": "Icon props for the right icon.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "iconRightName",
+          "type": "string",
+          "default": null,
+          "description": "Shortcut for the right icon name.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "iconLeftSize",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Shortcut for left icon size.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "iconRightSize",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Shortcut for right icon size.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "hasIconsLeft",
+          "type": "boolean",
+          "default": "false",
+          "description": "Force the left icon container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "hasIconsRight",
+          "type": "boolean",
+          "default": "false",
+          "description": "Force the right icon container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "default": "false",
+          "description": "Show a loading indicator on the control.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Expand the control to fill its container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "controlSize",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the wrapping Control.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "message",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Help/validation text below the input.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "messageColor",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Message color.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the Field wrapper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "controlClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the Control wrapper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "Date | null",
+          "default": null,
+          "description": "Controlled selected date-time.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "Date | null",
+          "default": null,
+          "description": "Initial value for uncontrolled usage.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "onChange",
+          "type": "(d: Date | null) => void",
+          "default": null,
+          "description": "Fired when either the date or time portion changes.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "onOpen",
+          "type": "() => void",
+          "default": null,
+          "description": "Fired when the popover opens.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "default": null,
+          "description": "Fired when the popover closes.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "min",
+          "type": "Date",
+          "default": null,
+          "description": "Lower bound for the combined date-time.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "max",
+          "type": "Date",
+          "default": null,
+          "description": "Upper bound for the combined date-time.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Disable the input.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "default": "false",
+          "description": "Read-only input.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "Placeholder text.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "format",
+          "type": "Intl.DateTimeFormatOptions | string",
+          "default": "'YYYY-MM-DD HH:mm'",
+          "description": "Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD HH:mm'`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "parse",
+          "type": "(s: string) => Date | null",
+          "default": null,
+          "description": "Custom parser.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": null,
+          "description": "BCP-47 locale tag.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "inline",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render the panel inline (no popover).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "mobileNative",
+          "type": "boolean | 'auto'",
+          "default": "'auto'",
+          "description": "Use `<input type=\"datetime-local\">` on coarse-pointer devices.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "default": "true",
+          "description": "Allow segmented keyboard typing (type the date-time directly across all segments). `false` makes the field picker-only.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "popover",
+          "type": "boolean",
+          "default": "true",
+          "description": "Whether the calendar + time popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "openOnFocus",
+          "type": "boolean",
+          "default": "true",
+          "description": "Open the popover on focus. Default `true`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "default": "false",
+          "description": "Off by default — users typically tweak both halves before committing.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "position",
+          "type": "'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'auto'",
+          "default": "'bottom-left'",
+          "description": "Popover anchor position.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "appendToBody",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render the popover into `document.body` via portal.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Bulma color modifier.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size variant.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Rounded input corners.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "shouldDisableDate",
+          "type": "(d: Date) => boolean",
+          "default": null,
+          "description": "Disable specific dates. Blocked dates are also rejected during manual typing (the predicate receives the full candidate date-time — prefer day-based checks).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "unselectableDates",
+          "type": "Date[]",
+          "default": null,
+          "description": "Convenience array of disabled dates, matched by calendar day; also rejected by manual typing.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "firstDayOfWeek",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+          "default": "0",
+          "description": "Day the calendar week starts on.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "dayNames",
+          "type": "string[]",
+          "default": null,
+          "description": "Override the 7 day-name labels.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "monthNames",
+          "type": "string[]",
+          "default": null,
+          "description": "Override the 12 month-name labels.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "nearbyMonthDays",
+          "type": "boolean",
+          "default": "true",
+          "description": "Show dimmed dates from adjacent months.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "hourFormat",
+          "type": "'12' | '24'",
+          "default": "'24'",
+          "description": "Time format.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "enableSeconds",
+          "type": "boolean",
+          "default": "false",
+          "description": "Show seconds column. Note: iOS Safari's native datetime-local picker UI does not include a seconds wheel; pass `mobileNative={false}` if you need one on iOS.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "incrementHours",
+          "type": "number",
+          "default": "1",
+          "description": "Hour step.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "incrementMinutes",
+          "type": "number",
+          "default": "1",
+          "description": "Step between minute-wheel values (`1` = every minute, iOS-style).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "incrementSeconds",
+          "type": "number",
+          "default": "1",
+          "description": "Step between second-wheel values (only with `enableSeconds`).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "unselectableTimes",
+          "type": "(d: Date) => boolean",
+          "default": null,
+          "description": "Block specific times. Blocked times are also rejected during manual typing.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "iconLeftName",
+          "type": "string",
+          "default": "'calendar-alt'",
+          "description": "Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "triggerIcon",
+          "type": "boolean",
+          "default": "true",
+          "description": "Show a clickable launcher button on the right that toggles the popover. Default `true`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "triggerIconName",
+          "type": "string",
+          "default": "'chevron-down'",
+          "description": "Glyph for the right launcher button.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "audioTick",
+          "type": "boolean",
+          "default": "false",
+          "description": "Play a short audible tick on each time-wheel crossing. Default `false`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "haptics",
+          "type": "boolean",
+          "default": "false",
+          "description": "Auto-route tactile feedback per wheel tick (vibrate on Android, audio thunk on iOS). Default `false`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "labels",
+          "type": "PickerLabels",
+          "default": null,
+          "description": "Optional translatable string overrides.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLInputElement>",
+          "default": null,
+          "description": "Forwarded to the underlying element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "Form field name.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "default": null,
+          "description": "Optional id of the form the input belongs to.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marks the field as required for native HTML form validation.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <input> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-input-h",
+      "sass": "$input-h",
+      "default": "var(--bulma-scheme-h)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-s",
+      "sass": "$input-s",
+      "default": "var(--bulma-scheme-s)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-l",
+      "sass": "$input-l",
+      "default": "var(--bulma-scheme-main-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-border-style",
+      "sass": "$input-border-style",
+      "default": "solid",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-border-width",
+      "sass": "$input-border-width",
+      "default": "var(--bulma-control-border-width)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-border-l",
+      "sass": "$input-border-l",
+      "default": "var(--bulma-border-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-border-l-delta",
+      "sass": "$input-border-l-delta",
+      "default": "0%",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-border-color",
+      "sass": "$input-border-color",
+      "default": "hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)))",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-hover-border-l-delta",
+      "sass": "$input-hover-border-l-delta",
+      "default": "var(--bulma-hover-border-l-delta)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-active-border-l-delta",
+      "sass": "$input-active-border-l-delta",
+      "default": "var(--bulma-active-border-l-delta)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-focus-h",
+      "sass": "$input-focus-h",
+      "default": "var(--bulma-focus-h)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-focus-s",
+      "sass": "$input-focus-s",
+      "default": "var(--bulma-focus-s)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-focus-l",
+      "sass": "$input-focus-l",
+      "default": "var(--bulma-focus-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-focus-shadow-size",
+      "sass": "$input-focus-shadow-size",
+      "default": "var(--bulma-focus-shadow-size)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-focus-shadow-alpha",
+      "sass": "$input-focus-shadow-alpha",
+      "default": "var(--bulma-focus-shadow-alpha)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-color-l",
+      "sass": "$input-color-l",
+      "default": "var(--bulma-text-strong-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-background-l",
+      "sass": "$input-background-l",
+      "default": "var(--bulma-scheme-main-l)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-background-l-delta",
+      "sass": "$input-background-l-delta",
+      "default": "0%",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-height",
+      "sass": "$input-height",
+      "default": "var(--bulma-control-height)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-shadow",
+      "sass": "$input-shadow",
+      "default": "inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-placeholder-color",
+      "sass": "$input-placeholder-color",
+      "default": "hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.3)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-disabled-color",
+      "sass": "$input-disabled-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-disabled-background-color",
+      "sass": "$input-disabled-background-color",
+      "default": "var(--bulma-background)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-disabled-border-color",
+      "sass": "$input-disabled-border-color",
+      "default": "var(--bulma-background)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-disabled-placeholder-color",
+      "sass": "$input-disabled-placeholder-color",
+      "default": "hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-weak-l), 0.3)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-arrow",
+      "sass": "$input-arrow",
+      "default": "var(--bulma-link)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-icon-color",
+      "sass": "$input-icon-color",
+      "default": "var(--bulma-text-light)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-icon-hover-color",
+      "sass": "$input-icon-hover-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-icon-focus-color",
+      "sass": "$input-icon-focus-color",
+      "default": "var(--bulma-link)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-input-radius",
+      "sass": "$input-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "component"
+    }
+  ]
+}