{
  "name": "InlineDateField",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/InlineDateField.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "inline-date-field",
  "elName": "InlineDateField",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#inline-date-field",
  "hasLiveDemo": false,
  "description": "Inline edit-in-place date field. Click the resting label to swap to a\nnative `<input type=\"date\">`; Enter / blur commits, Escape cancels. The\nresting display defaults to a smart relative label\n(`\"Today\"` / `\"in 3d\"` / `\"3d late\"`) with tone-driven colour, but\nconsumers can override via `format`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "InlineDateField",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "InlineDateFieldProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "InlineDateFieldTone",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { InlineDateField } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "number | string | null",
      "doc": "Current date as either a millisecond epoch, ISO string, or `null` when no date is set. The kit normalises both formats internally."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(next: number | null) => void",
      "doc": "Fires when the user picks a new date (commits on Enter or blur). Receives the millisecond epoch, OR `null` when the date is cleared."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "ReactNode",
      "doc": "Placeholder shown when no date is set. Default `\"Set a date\"`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable editing. Display still renders."
    },
    {
      "name": "clearable",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the inline `×` clear button (for required-date fields)."
    },
    {
      "name": "format",
      "optional": true,
      "type": "(date: Date) => { label: ReactNode",
      "doc": "Override the resting display formatter. Receives the parsed `Date` (always non-null when called) and the consumer-side state — return `{ label, tone }`. The default produces a smart relative label (`\"Today\"`, `\"in 3d\"`, `\"3d late\"`) with `tone` switching to `\"warning\"` for today / `\"error\"` for overdue. Pass to override format (`\"Aug 14\"` instead of `\"in 3d\"`) or to suppress tone variation."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "InlineDateFieldTone }",
      "doc": ""
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the outer wrapper."
    },
    {
      "name": "style",
      "optional": true,
      "type": "CSSProperties",
      "doc": "Inline style on the outer wrapper."
    },
    {
      "name": "id",
      "optional": true,
      "type": "string",
      "doc": "Optional `id` on the underlying `<input>` (for label association)."
    },
    {
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
      "doc": "Accessible label when no `<label>` is paired."
    }
  ],
  "classesUsed": [
    "inline-date-field",
    "inline-date-field-clear",
    "inline-date-field-display",
    "inline-date-field-input",
    "inline-date-field-label",
    "inline-date-field-placeholder"
  ],
  "examples": {
    "react": "const [due, setDue] = useState<number | null>(issue.due_at);",
    "html": "<div class=\"inline-date-field\">\n  <button type=\"button\" class=\"inline-date-field-display\">\n    <span class=\"inline-date-field-placeholder\">Set a date</span>\n  </button>\n</div>",
    "css": ".inline-date-field {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n  width: 100%;\n  font: inherit;\n}\n\n.inline-date-field-clear {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  padding: 4px 6px;\n  border-radius: var(--r-sm);\n  cursor: pointer;\n  color: var(--fg-faint);\n  font: 500 14px/1 var(--f-body);\n  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);\n  flex-shrink: 0;\n}\n\n.inline-date-field-display {\n  flex: 1;\n  min-width: 0;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  padding: 4px 8px;\n  border-radius: var(--r-sm);\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n  color: var(--fg);\n  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);\n}\n\n.inline-date-field-input {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  font: inherit;\n  color: var(--fg);\n  background: var(--bg-paper);\n  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);\n}\n\n.inline-date-field-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.inline-date-field-placeholder { color: var(--fg-faint); }"
  }
}