# DatePicker A form trigger that presents bounded month, day, and year wheels and commits one ISO calendar date on confirmation. Version: 0.2.0-preview.1 (preview) Content digest: 70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721 Contract kind: source-derived Source: packages/design-system/src/components/forms/DatePicker/DatePicker.tsx ## Guidance { "summary": "A form trigger that presents bounded month, day, and year wheels and commits one ISO calendar date on confirmation.", "guidance": [ { "heading": "Overview", "body": "A date field whose trigger opens a mobile bottom sheet of month/day/year scroll wheels. Dates\ncross the boundary as ISO `\"YYYY-MM-DD\"` strings." }, { "heading": "When to use", "body": "Reach for `DatePicker` when the user picks a single calendar date on mobile — a date of birth,\nan appointment day — and you want the native-feeling wheel sheet rather than a raw native\n``. Bound the range with `min`/`max` (default `1900-01-01` → today) and set\n`placeholderValue` so empty wheels open somewhere plausible (e.g. a likely birth year).\n\n- Wrap it in `Field` for a label and aria wiring. The Field's `error` turns this trigger red on\n its own; `invalid` is the escape hatch for a picker with no `Field` around it.\n- Need a plain, unstyled OS date box with no sheet (a desktop-style form)? A bare\n `Input`/native `type=\"date\"` is lighter — but on this mobile surface the wheel sheet is the\n house style.\n\nIn-app it powers the data-removal date-of-birth field (`DobField`)." } ], "usage": [], "examples": [], "source": "packages/design-system/src/components/forms/DatePicker/DatePicker.mdx", "status": "local-preview", "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification." } ## Contract and public API ```json { "props": [ { "name": "value", "type": "string", "declared_type": "string", "required": true, "description": "Selected date as an ISO string, or `''` when unset.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 22 } }, { "name": "onChange", "type": "((value: string) => void) | undefined", "declared_type": "(value: string) => void", "required": false, "description": "Called with the next ISO date when the user confirms a selection.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 24 } }, { "name": "min", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Earliest selectable date (ISO). Defaults to `1900-01-01`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 26 } }, { "name": "max", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Latest selectable date (ISO). Defaults to today.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 28 } }, { "name": "placeholderValue", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Date the wheels open to when `value` is empty (ISO). Defaults to `max`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 30 } }, { "name": "placeholder", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Trigger text shown when `value` is empty.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 32 }, "default": "DEFAULT_PLACEHOLDER", "default_kind": "source-expression" }, { "name": "icon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Trailing affordance in the trigger, usually a calendar `Icon`/`SFIcon`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 34 } }, { "name": "sheetTitle", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Title shown in the picker sheet. Falls back to `ariaLabel` or placeholder.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 36 } }, { "name": "confirmLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Text on the sheet's confirm button. Defaults to `Done`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 38 }, "default": "'Done'", "default_kind": "source-expression" }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Blocks the trigger from opening the sheet.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 40 }, "values": [ false, true ], "values_complete": true }, { "name": "required", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Announces the field as required to assistive tech. The trigger is a button, not a form control, so this cannot block a submit.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 42 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible name when no visible label is associated with the field.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 44 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback as the wheels cross a value. Defaults to `true` (`selection`).", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 46 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 47 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 48 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test id for the trigger; the sheet, each wheel, and the confirm button derive from it.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 50 } }, { "name": "id", "type": "string | undefined", "declared_type": "string", "required": false, "description": "DOM id the control renders, which the Field's label points at.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 22 } }, { "name": "invalid", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Paints the invalid treatment and announces the control as invalid. A Field supplies\nthis from its own `error`; set it directly only for a control with no Field around it.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 31 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaDescribedBy", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Ids of the helper or error copy describing the control, supplied by a parent Field.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 33 } }, { "name": "ariaLabelledBy", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Id of the visible label naming the control, supplied by a parent Field.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 35 } } ], "prop_shapes": {}, "api": { "method": "typescript-type-checker", "typescript_version": "5.9.3", "public_export": "DatePicker", "public_path": "DatePicker", "import_path": "@cloakedinc/design-system", "root_kind": "component", "entrypoints": [ { "name": "DatePicker", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 57 }, "props_type": "DatePickerProps", "props": [ { "name": "value", "type": "string", "declared_type": "string", "required": true, "description": "Selected date as an ISO string, or `''` when unset.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 22 } }, { "name": "onChange", "type": "((value: string) => void) | undefined", "declared_type": "(value: string) => void", "required": false, "description": "Called with the next ISO date when the user confirms a selection.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 24 } }, { "name": "min", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Earliest selectable date (ISO). Defaults to `1900-01-01`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 26 } }, { "name": "max", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Latest selectable date (ISO). Defaults to today.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 28 } }, { "name": "placeholderValue", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Date the wheels open to when `value` is empty (ISO). Defaults to `max`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 30 } }, { "name": "placeholder", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Trigger text shown when `value` is empty.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 32 }, "default": "DEFAULT_PLACEHOLDER", "default_kind": "source-expression" }, { "name": "icon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Trailing affordance in the trigger, usually a calendar `Icon`/`SFIcon`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 34 } }, { "name": "sheetTitle", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Title shown in the picker sheet. Falls back to `ariaLabel` or placeholder.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 36 } }, { "name": "confirmLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Text on the sheet's confirm button. Defaults to `Done`.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 38 }, "default": "'Done'", "default_kind": "source-expression" }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Blocks the trigger from opening the sheet.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 40 }, "values": [ false, true ], "values_complete": true }, { "name": "required", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Announces the field as required to assistive tech. The trigger is a button, not a form control, so this cannot block a submit.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 42 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible name when no visible label is associated with the field.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 44 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback as the wheels cross a value. Defaults to `true` (`selection`).", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 46 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 47 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 48 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test id for the trigger; the sheet, each wheel, and the confirm button derive from it.", "source": { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 50 } }, { "name": "id", "type": "string | undefined", "declared_type": "string", "required": false, "description": "DOM id the control renders, which the Field's label points at.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 22 } }, { "name": "invalid", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Paints the invalid treatment and announces the control as invalid. A Field supplies\nthis from its own `error`; set it directly only for a control with no Field around it.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 31 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaDescribedBy", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Ids of the helper or error copy describing the control, supplied by a parent Field.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 33 } }, { "name": "ariaLabelledBy", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Id of the visible label naming the control, supplied by a parent Field.", "source": { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 35 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" } ], "type_sources": [ { "path": "packages/design-system/src/components/forms/DatePicker/DatePicker.tsx", "line": 20, "name": "DatePickerProps", "code": "export interface DatePickerProps extends FieldControlProps {\n /** Selected date as an ISO string, or `''` when unset. */\n value: string;\n /** Called with the next ISO date when the user confirms a selection. */\n onChange?: (value: string) => void;\n /** Earliest selectable date (ISO). Defaults to `1900-01-01`. */\n min?: string;\n /** Latest selectable date (ISO). Defaults to today. */\n max?: string;\n /** Date the wheels open to when `value` is empty (ISO). Defaults to `max`. */\n placeholderValue?: string;\n /** Trigger text shown when `value` is empty. */\n placeholder?: string;\n /** Trailing affordance in the trigger, usually a calendar `Icon`/`SFIcon`. */\n icon?: React.ReactNode;\n /** Title shown in the picker sheet. Falls back to `ariaLabel` or placeholder. */\n sheetTitle?: string;\n /** Text on the sheet's confirm button. Defaults to `Done`. */\n confirmLabel?: string;\n /** Blocks the trigger from opening the sheet. */\n disabled?: boolean;\n /** Announces the field as required to assistive tech. The trigger is a button, not a form control, so this cannot block a submit. */\n required?: boolean;\n /** Accessible name when no visible label is associated with the field. */\n ariaLabel?: string;\n /** Haptic feedback as the wheels cross a value. Defaults to `true` (`selection`). */\n haptic?: HapticFeedback;\n className?: string;\n style?: React.CSSProperties;\n /** Test id for the trigger; the sheet, each wheel, and the confirm button derive from it. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/hooks/FieldContext.ts", "line": 20, "name": "FieldControlProps", "code": "export interface FieldControlProps {\n /** DOM id the control renders, which the Field's label points at. */\n id?: string;\n /** Blocks interaction and dims the control. */\n disabled?: boolean;\n /** Marks the control required for native form semantics. */\n required?: boolean;\n /**\n * Paints the invalid treatment and announces the control as invalid. A Field supplies\n * this from its own `error`; set it directly only for a control with no Field around it.\n */\n invalid?: boolean;\n /** Ids of the helper or error copy describing the control, supplied by a parent Field. */\n ariaDescribedBy?: string;\n /** Id of the visible label naming the control, supplied by a parent Field. */\n ariaLabelledBy?: string;\n}" }, { "path": "packages/design-system/src/tokens/CdsHaptic.ts", "line": 6, "name": "HapticFeedback", "code": "export type HapticFeedback = boolean | HapticType;" }, { "path": "packages/design-system/src/tokens/HapticType.ts", "line": 2, "name": "HapticType", "code": "export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';" } ], "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source." }, "spec": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "DatePicker", "status": "preview", "version": "2.0.0", "summary": "A form trigger that presents bounded month, day, and year wheels and commits one ISO calendar date on confirmation." }, "parts": [ { "id": "root", "label": "Root", "description": "Carries the caller's class around the trigger." }, { "id": "trigger", "label": "Trigger", "description": "Displays the placeholder or formatted date and opens the picker dialog." }, { "id": "trigger-icon", "label": "Trigger icon", "description": "Optional trailing calendar affordance that does not replace the accessible name." }, { "id": "sheet", "label": "Picker sheet", "description": "Modal surface containing the date wheels and confirm action." }, { "id": "wheel-group", "label": "Wheel group", "description": "Groups month, day, and year listboxes under the field name." }, { "id": "wheel-column", "label": "Wheel column", "description": "Scrollable, keyboard-operable listbox for one date part." }, { "id": "selection-band", "label": "Selection band", "description": "Visually marks the centered row shared by all wheel columns." }, { "id": "confirm-action", "label": "Confirm action", "description": "Commits the working date and closes the sheet." } ], "allowedDesignChoices": { "variants": { "wheel-sheet": { "label": "Wheel sheet", "description": "The trigger opens three bounded scroll wheels in a modal sheet." } }, "sizes": {} }, "variants": [ { "id": "wheel-sheet", "label": "Wheel sheet", "description": "Single approved date-picking flow with separate working and committed dates.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "trigger-min-height", "label": "Trigger minimum height", "kind": "exact", "token": "--cds-size-48", "value": 48, "unit": "px", "appliesTo": [ "trigger" ] }, { "id": "trigger-horizontal-padding", "label": "Trigger horizontal padding", "kind": "exact", "token": "--cds-space-16", "value": 16, "unit": "px", "appliesTo": [ "trigger" ] }, { "id": "wheel-row-height", "label": "Wheel row height", "kind": "exact", "token": "--cds-size-40", "value": 40, "unit": "px", "appliesTo": [ "wheel-column", "selection-band" ] } ], "layout": { "alignment": "Trigger text fills the available row while the optional icon remains trailing; wheel columns share one centered selection band.", "flow": "Trigger opens a modal, wheels edit a working date, and the full-width confirm action commits it.", "notes": [ "Clamp display and working dates to the inclusive minimum and maximum range.", "Keep the committed value unchanged until confirmation." ] }, "typographyAndColor": { "typography": [ { "label": "Trigger and wheel text", "description": "Use the body ramp for the selected date and wheel options.", "token": "--cds-type-body-size" } ], "colors": [ { "label": "Trigger and selection band", "description": "Use the semantic input container.", "token": "--cds-input-container" }, { "label": "Selected text", "description": "Use primary text emphasis for dates and active wheel rows.", "token": "--cds-text-primary" }, { "label": "Placeholder", "description": "Use secondary text emphasis while no date is committed.", "token": "--cds-text-secondary" }, { "label": "Validation", "description": "Use the solid danger role for invalid indication and copy.", "token": "--cds-status-danger-solid" } ] }, "states": [ { "id": "empty", "label": "Empty", "description": "Shows the placeholder and opens wheels at the clamped placeholder date." }, { "id": "selected", "label": "Selected", "description": "Shows the committed ISO date in human-readable display format." }, { "id": "open", "label": "Open", "description": "Exposes expanded state and presents the working date in the modal wheels." }, { "id": "invalid", "label": "Invalid", "description": "Shows the danger border and invalid semantics. The corrective message belongs to the enclosing Field." }, { "id": "disabled", "label": "Disabled", "description": "Blocks opening the sheet and dims the trigger." } ], "behavior": [ { "label": "ISO boundary", "description": "Accept and emit calendar dates as YYYY-MM-DD strings without time-zone conversion." }, { "label": "Bounded wheels", "description": "Trim month, day, and year options so no visible combination falls outside the range." }, { "label": "Confirmation", "description": "Commit the working date only when the confirm action is pressed; dismissal preserves the prior value." }, { "label": "Keyboard wheel input", "description": "Support ArrowUp, ArrowDown, Home, and End on each wheel column." } ], "accessibility": [ { "label": "Trigger name and state", "description": "Associate a visible Field label or accessible label and expose dialog popup, expanded, required, invalid, and described-by states." }, { "label": "Wheel names", "description": "Expose the date as a group containing independently named Month, Day, and Year listboxes." }, { "label": "Active options", "description": "Expose the centered wheel option through selected and active-descendant semantics." } ], "contentAdaptation": [ { "label": "Trigger truncation", "description": "Truncate a long localized display date on one line without displacing the icon." }, { "label": "Localized labels", "description": "Allow product surfaces to provide localized sheet and confirm labels while preserving the ISO data contract." } ], "motionHaptics": { "motion": [ { "label": "Sheet presentation", "description": "Delegate opening and dismissal motion to Modal and keep wheel snapping within each column." } ], "haptics": [ { "label": "Wheel feedback", "description": "Request the selection haptic once per user-driven wheel row crossed." } ] }, "platformDifferences": [ { "platforms": [ "web" ], "description": "The web implementation emulates a native wheel with scroll snapping and keyboard listboxes.", "rationale": "HTML has no interoperable month/day/year wheel control, so the webview preserves the native interaction contract with explicit semantics." } ] }, "platforms": { "implemented": [ "web" ], "native": "Imported design guidance only; no native implementation or parity verification in this preview.", "react": { "implementation": "local", "status": "preview", "parity": "web-reference" }, "vue": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "swift": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "kotlin": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" } }, "tokens": [ { "name": "--cds-size-48", "light": "48px", "dark": "48px" }, { "name": "--cds-space-16", "light": "16px", "dark": "16px" }, { "name": "--cds-size-40", "light": "40px", "dark": "40px" }, { "name": "--cds-type-body-size", "light": "1rem", "dark": "1rem" }, { "name": "--cds-input-container", "light": "#f3f1ed", "dark": "#232321" }, { "name": "--cds-text-primary", "light": "#141410", "dark": "#f3f1ed" }, { "name": "--cds-text-secondary", "light": "#646260", "dark": "#ffffff99" }, { "name": "--cds-status-danger-solid", "light": "#b83100", "dark": "#b83100" } ], "review": { "local_status": "not-reviewed", "source_approval": null, "imported_spec_status": "approved", "spec_origin": "imported-adapted", "local_spec_source_status": "approved", "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract." }, "missing_facts": [ { "code": "human-review-pending", "detail": "This local preview has no recorded human design or engineering sign-off." }, { "code": "platform-parity-unverified", "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified." }, { "code": "figma-mapping-unverified", "detail": "No current component-level Figma node and immutable revision have been verified for this contract." } ] } ``` ## Visual states - [Playground](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--playground&viewMode=story) | export: Playground | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [Selected](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--selected&viewMode=story) | export: Selected | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [With Field](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--with-field&viewMode=story) | export: WithField | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [Invalid In Field](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--invalid-in-field&viewMode=story) | export: InvalidInField | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [Disabled](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--disabled&viewMode=story) | export: Disabled | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [Narrow Range](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--narrow-range&viewMode=story) | export: NarrowRange | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [State Matrix](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--state-matrix&viewMode=story) | export: StateMatrix | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx - [Dark Theme](/storybook/iframe.html?id=cloaked-design-system-forms-datepicker--dark-theme&viewMode=story) | export: DarkTheme | source: packages/design-system/src/components/forms/DatePicker/DatePicker.stories.tsx Preview pending human sign-off. Source-derived APIs and successful checks do not certify accessibility, native parity or approval.