@techsio/ui-kit 0.44.0 → 0.45.0

package/dist/stories/molecules/date-picker.stories.d.ts

@@ -0,0 +1,141 @@
+import type { StoryObj } from "@storybook/react";
+import { type DatePickerGranularity, type DatePickerDayRootProps, type DatePickerOpenChangeDetails, type DatePickerSelectionMode, type DatePickerSize } from "../../src/molecules/date-picker.js";
+type DatePickerPlaygroundArgs = {
+    defaultOpen: boolean;
+    disabled: boolean;
+    flip: boolean;
+    granularity: DatePickerGranularity;
+    hideTimeZone: boolean;
+    hourCycle: 12 | 24;
+    initialValue: "empty" | "preset";
+    invalid: boolean;
+    locale: string;
+    numOfMonths: "auto" | 1 | 2;
+    onOpenChange?: (details: DatePickerOpenChangeDetails) => void;
+    onValueChange?: (details: {
+        value: unknown;
+        valueAsString: unknown;
+    }) => void;
+    offset: number;
+    placement: NonNullable<DatePickerDayRootProps["placement"]>;
+    readOnly: boolean;
+    required: boolean;
+    selectionMode: DatePickerSelectionMode;
+    shouldForceLeadingZeros: boolean;
+    size: DatePickerSize;
+    slide: boolean;
+    startOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    useDateBounds: boolean;
+    useUnavailableDate: boolean;
+    useUnavailableTime: boolean;
+    valueKind: "floating" | "zoned";
+};
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<DatePickerDayRootProps>;
+    subcomponents: {
+        Label: ({ children, className, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerLabelProps) => import("react/jsx-runtime").JSX.Element;
+        Control: ({ children, className, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerControlProps) => import("react/jsx-runtime").JSX.Element;
+        Segments: ({ className, endLabel, ref, separator, startLabel, ...props }: import("../../src/molecules/date-picker.js").DatePickerSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+        IndicatorGroup: ({ className, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerIndicatorGroupProps) => import("react/jsx-runtime").JSX.Element;
+        Trigger: ({ children, className, icon, iconSize, ref, size, theme, type, ...props }: import("../../src/molecules/date-picker.js").DatePickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+        ClearTrigger: ({ children, className, icon, iconSize, onClick, ref, size, theme, type, ...props }: import("../../src/molecules/date-picker.js").DatePickerClearTriggerProps) => import("react/jsx-runtime").JSX.Element;
+        Positioner: ({ children, className, forceMount, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerPositionerProps) => import("react/jsx-runtime").JSX.Element | null;
+        Content: ({ className, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerContentProps) => import("react/jsx-runtime").JSX.Element;
+        Calendar: ({ className, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerCalendarProps) => import("react/jsx-runtime").JSX.Element;
+        TimeControl: ({ className, endLabel, ref, startLabel, ...props }: import("../../src/molecules/date-picker.js").DatePickerTimeControlProps) => import("react/jsx-runtime").JSX.Element | null;
+        Footer: ({ className, ref, ...props }: import("../../src/molecules/date-picker.js").DatePickerFooterProps) => import("react/jsx-runtime").JSX.Element;
+        CancelTrigger: ({ children, className, onClick, ref, size: sizeProp, theme, type, variant, ...props }: import("../../src/molecules/date-picker.js").DatePickerCancelTriggerProps) => import("react/jsx-runtime").JSX.Element;
+        ConfirmTrigger: ({ children, className, disabled, onClick, ref, size: sizeProp, theme, type, variant, ...props }: import("../../src/molecules/date-picker.js").DatePickerConfirmTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        controls: {
+            include: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        children: {
+            control: false;
+            table: {
+                disable: true;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        locale: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+        };
+        readOnly: {
+            control: "boolean";
+        };
+        invalid: {
+            control: "boolean";
+        };
+        required: {
+            control: "boolean";
+        };
+        onOpenChange: {
+            control: false;
+        };
+        onValueChange: {
+            control: false;
+        };
+    };
+    args: {
+        children: null;
+        disabled: false;
+        invalid: false;
+        locale: string;
+        onOpenChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        onValueChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        readOnly: false;
+        required: false;
+        size: "md";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: StoryObj<DatePickerPlaygroundArgs>;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const DateOnlyCalendar: Story;
+export declare const DateRangeCalendar: Story;
+export declare const ControlledDateRange: Story;
+export declare const RejectingControlledDateRange: Story;
+export declare const RangeFormSerialization: Story;
+export declare const LocalizedUnavailableRange: Story;
+export declare const TransactionalTimeGranularities: Story;
+export declare const InitiallyOpenTimedDraft: Story;
+export declare const InitiallyOpenDateTimeRange: Story;
+export declare const ZonedDateTimeRange: Story;
+export declare const ControlledTimedResync: Story;
+export declare const ControlledParentBehaviors: Story;
+export declare const ClearAndFormSerialization: Story;
+export declare const LocalesAndLongLabels: Story;
+export declare const TypedDateTimeValues: Story;
+//# sourceMappingURL=date-picker.stories.d.ts.map

package/dist/stories/molecules/date-picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/date-picker.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAEN,KAAK,qBAAqB,EAE1B,KAAK,sBAAsB,EAC3B,KAAK,2BAA2B,EAEhC,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EAInB,MAAM,iCAAiC,CAAA;AAkHxC,KAAK,wBAAwB,GAAG;IAC/B,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,OAAO,CAAA;IACb,WAAW,EAAE,qBAAqB,CAAA;IAClC,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAA;IAClB,YAAY,EAAE,OAAO,GAAG,QAAQ,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAA;IAC7D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACzB,KAAK,EAAE,OAAO,CAAA;QACd,aAAa,EAAE,OAAO,CAAA;KACtB,KAAK,IAAI,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAA;IAC3D,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,uBAAuB,CAAA;IACtC,uBAAuB,EAAE,OAAO,CAAA;IAChC,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACtC,aAAa,EAAE,OAAO,CAAA;IACtB,kBAAkB,EAAE,OAAO,CAAA;IAC3B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,SAAS,EAAE,UAAU,GAAG,OAAO,CAAA;CAC/B,CAAA;AA0MD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEgC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,wBAAwB,CA8MzD,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA8BnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAuBpB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2B/B,CAAA;AAuBD,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAA;AA+BD,eAAO,MAAM,4BAA4B,EAAE,KAI1C,CAAA;AAgCD,eAAO,MAAM,sBAAsB,EAAE,KAIpC,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KA6BvC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KA0B5C,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAuBrC,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KA6BxC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAkBhC,CAAA;AAkCD,eAAO,MAAM,qBAAqB,EAAE,KAInC,CAAA;AAwCD,eAAO,MAAM,yBAAyB,EAAE,KAevC,CAAA;AA6BD,eAAO,MAAM,yBAAyB,EAAE,KAGvC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KA2BlC,CAAA;AAMD,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA"}

package/dist/stories/molecules/tour.stories.d.ts

@@ -0,0 +1,58 @@
+import type { StoryObj } from "@storybook/react";
+import { Tour, type TourStep } from "../../src/molecules/tour.js";
+declare const meta: {
+    title: string;
+    component: typeof Tour;
+    tags: string[];
+    parameters: {
+        layout: string;
+        controls: {
+            include: string[];
+        };
+    };
+    argTypes: {
+        closeOnEscape: {
+            control: "boolean";
+        };
+        closeOnInteractOutside: {
+            control: "boolean";
+        };
+        preventInteraction: {
+            control: "boolean";
+        };
+        keyboardNavigation: {
+            control: "boolean";
+        };
+        dir: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        steps: never[];
+        children: null;
+        closeOnEscape: true;
+        closeOnInteractOutside: true;
+        preventInteraction: false;
+        keyboardNavigation: true;
+        dir: "ltr";
+        onStatusChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        onStepChange: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+    render: (args: Omit<import("@zag-js/tour").Props, "id" | "steps" | "stepId"> & {
+        children: import("react").ReactNode;
+        id?: string;
+        steps: TourStep[];
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const LateTarget: Story;
+export declare const InteractiveWait: Story;
+export declare const FloatingPlacements: Story;
+export declare const CustomControls: Story;
+export declare const LongContent: Story;
+export declare const UnmountDuringWait: Story;
+export declare const ScrollTarget: Story;
+//# sourceMappingURL=tour.stories.d.ts.map

package/dist/stories/molecules/tour.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/tour.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EACL,IAAI,EAEJ,KAAK,QAAQ,EACd,MAAM,0BAA0B,CAAA;AA0FjC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCmB,CAAA;AAE7B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAA;AA0DnC,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AA4ED,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAA;AAkBD,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAgGD,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAA;AAgCD,eAAO,MAAM,iBAAiB,EAAE,KAG/B,CAAA;AA4BD,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAA"}

package/dist/test/date-picker.behavior.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=date-picker.behavior.spec.d.ts.map

package/dist/test/date-picker.behavior.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.behavior.spec.d.ts","sourceRoot":"","sources":["../../test/date-picker.behavior.spec.ts"],"names":[],"mappings":""}

package/dist/test/tour.playwright.config.d.ts

@@ -0,0 +1,4 @@
+/** Focused behavior checks against an already running Storybook. */
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;
+//# sourceMappingURL=tour.playwright.config.d.ts.map

package/dist/test/tour.playwright.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.playwright.config.d.ts","sourceRoot":"","sources":["../../test/tour.playwright.config.ts"],"names":[],"mappings":"AAEA,oEAAoE;;AACpE,wBAeE"}

package/dist/test/tour.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tour.spec.d.ts.map

package/dist/test/tour.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.spec.d.ts","sourceRoot":"","sources":["../../test/tour.spec.ts"],"names":[],"mappings":""}

package/dist/test/tour.typecheck.d.ts

@@ -0,0 +1,11 @@
+import { type TourApi, type TourStep } from "../src/molecules/tour.js";
+export declare const tourSteps: TourStep[];
+export declare const tourContract: import("react/jsx-runtime").JSX.Element;
+export declare const triggerRefContract: import("react/jsx-runtime").JSX.Element;
+export declare const actionRefContract: import("react/jsx-runtime").JSX.Element;
+export declare const invalidActionContract: import("react/jsx-runtime").JSX.Element;
+export declare const invalidControlledContract: import("react/jsx-runtime").JSX.Element;
+export declare const invalidTimeoutContract: import("react/jsx-runtime").JSX.Element;
+export type InvalidDismissContract = TourApi["dismiss"];
+export type InvalidSkipContract = TourApi["skip"];
+//# sourceMappingURL=tour.typecheck.d.ts.map

package/dist/test/tour.typecheck.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.typecheck.d.ts","sourceRoot":"","sources":["../../test/tour.typecheck.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEzE,eAAO,MAAM,SAAS,EAAE,QAAQ,EAO/B,CAAA;AAED,eAAO,MAAM,YAAY,yCAiBxB,CAAA;AAGD,eAAO,MAAM,kBAAkB,yCAE9B,CAAA;AACD,eAAO,MAAM,iBAAiB,yCAI7B,CAAA;AAED,eAAO,MAAM,qBAAqB,yCAGjC,CAAA;AAED,eAAO,MAAM,yBAAyB,yCAKrC,CAAA;AAED,eAAO,MAAM,sBAAsB,yCAKlC,CAAA;AAGD,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAGvD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -70,6 +70,7 @@
     "storybook": "storybook dev",
     "figma:connect:parse": "figma connect parse --config figma.config.json",
     "figma:connect:publish": "figma connect publish --config figma.config.json",
+    "test": "vitest run --config vitest.config.ts",
     "test-storybook": "test-storybook",
     "storybook:a11y": "bash scripts/storybook-a11y.sh",
     "test:components": "node scripts/run-component-tests.mjs",
@@ -82,7 +83,8 @@
     "validate:tokens": "bun scripts/validate-token-usage.js && bun scripts/validate-token-definitions.js",
     "validate:token-usage": "bun scripts/validate-token-usage.js",
     "validate:token-definitions": "bun scripts/validate-token-definitions.js",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.tests.json"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -93,6 +95,7 @@
     "@iconify-json/mdi-light": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@iconify/tailwind4": "^1.1.0",
+    "@internationalized/date": "^3.12.2",
     "@tanstack/charts": "^0.6.5",
     "@tanstack/charts-scales": "^0.6.5",
     "@tanstack/react-charts": "^0.6.5",
@@ -103,6 +106,8 @@
     "@zag-js/cascade-select": "1.43.3",
     "@zag-js/checkbox": "1.43.3",
     "@zag-js/combobox": "1.43.3",
+    "@zag-js/date-input": "1.43.3",
+    "@zag-js/date-picker": "1.43.3",
     "@zag-js/dialog": "1.43.3",
     "@zag-js/drawer": "1.43.3",
     "@zag-js/file-upload": "1.43.3",
@@ -122,6 +127,7 @@
     "@zag-js/tabs": "1.43.3",
     "@zag-js/toast": "1.43.3",
     "@zag-js/tooltip": "1.43.3",
+    "@zag-js/tour": "1.43.3",
     "@zag-js/tree-view": "1.43.3",
     "better-themes": "^1.1.0",
     "d3-scale": "^4.0.2",
@@ -166,7 +172,9 @@
     "storybook-addon-rslib": "^3.4.2",
     "storybook-react-rsbuild": "^3.4.2",
     "tailwindcss": "^4.1.17",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "catalog:vite5-testing",
+    "vitest": "catalog:vite5-testing"
   },
   "peerDependencies": {
     "@types/react": ">=19.2.0",

package/src/tokens/components/components.css

@@ -23,6 +23,7 @@
 @import "./molecules/_chart.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
+@import "./molecules/_date-picker.css";
 @import "./molecules/_dialog.css";
 @import "./molecules/_drawer.css";
 @import "./molecules/_file-upload.css";
@@ -39,6 +40,7 @@
 @import "./molecules/_steps.css";
 @import "./molecules/_switch.css";
 @import "./molecules/_toast.css";
+@import "./molecules/_tour.css";
 @import "./molecules/_tree-view.css";
 
 @import "./organisms/_table.css";

package/src/tokens/components/molecules/_date-picker.css

@@ -0,0 +1,225 @@
+/*
+ * DatePicker — compact segmented field and calendar surface.
+ *
+ * The reference layer binds the component to shared form-control and semantic
+ * foundations. The derived layer is the only DatePicker palette consumed by
+ * the component source.
+ */
+@theme static {
+  /* Reference layer */
+  --color-date-picker-surface: var(--color-fill-overlay);
+  --color-date-picker-fill: var(--color-form-control-bg);
+  --color-date-picker-fill-hover: var(--color-form-control-bg-hover);
+  --color-date-picker-fill-active: var(--color-form-control-bg-focus);
+  --color-date-picker-accent: var(--color-bg-primary-base);
+  --color-date-picker-accent-hover: var(--color-bg-primary-hover);
+  --color-date-picker-accent-foreground: var(--color-fg-light);
+  --color-date-picker-text: var(--color-fg-primary);
+  --color-date-picker-text-muted: var(--color-fg-secondary);
+  --color-date-picker-placeholder: var(--color-form-control-fg-placeholder);
+  --color-date-picker-disabled: var(--color-form-control-fg-disabled);
+  --color-date-picker-border: var(--color-form-control-border);
+  --color-date-picker-border-hover: var(--color-form-control-border-hover);
+  --color-date-picker-focus: var(--color-form-control-border-focus);
+  --color-date-picker-ring: var(--color-form-control-ring);
+  --color-date-picker-error: var(--color-danger);
+  --color-date-picker-error-hover: var(--color-border-danger-hover);
+  --color-date-picker-error-focus: var(--color-border-danger-focus);
+  --color-date-picker-range: color-mix(
+    in oklab,
+    var(--color-date-picker-accent) 20%,
+    transparent
+  );
+  --color-date-picker-transparent: var(--color-bg-transparent);
+
+  /* Derived color layer */
+  --color-date-picker-label-fg: var(--color-date-picker-text);
+  --color-date-picker-control-bg: var(--color-date-picker-fill);
+  --color-date-picker-control-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-control-bg-focus: var(--color-date-picker-fill-active);
+  --color-date-picker-control-bg-readonly: var(--color-date-picker-fill);
+  --color-date-picker-control-bg-disabled: var(
+    --color-form-control-bg-disabled
+  );
+  --color-date-picker-control-fg: var(--color-date-picker-text);
+  --color-date-picker-control-fg-disabled: var(--color-date-picker-disabled);
+  --color-date-picker-control-border: var(--color-date-picker-border);
+  --color-date-picker-control-border-hover: var(
+    --color-date-picker-border-hover
+  );
+  --color-date-picker-control-border-focus: var(--color-date-picker-focus);
+  --color-date-picker-control-border-error: var(--color-date-picker-error);
+  --color-date-picker-control-border-error-hover: var(
+    --color-date-picker-error-hover
+  );
+  --color-date-picker-control-border-error-focus: var(
+    --color-date-picker-error-focus
+  );
+  --color-date-picker-control-border-disabled: var(
+    --color-form-control-border-disabled
+  );
+  --color-date-picker-control-ring: var(--color-date-picker-ring);
+  --color-date-picker-segment-bg-focus: var(--color-date-picker-fill-hover);
+  --color-date-picker-segment-fg-placeholder: var(
+    --color-date-picker-placeholder
+  );
+  --color-date-picker-range-separator-fg: var(--color-date-picker-text-muted);
+  --color-date-picker-trigger-bg: var(--color-date-picker-fill);
+  --color-date-picker-trigger-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-trigger-bg-active: var(--color-date-picker-fill-active);
+  --color-date-picker-trigger-fg: var(--color-date-picker-text);
+  --color-date-picker-trigger-fg-disabled: var(--color-date-picker-disabled);
+  --color-date-picker-trigger-ring: var(--color-date-picker-ring);
+  --color-date-picker-content-bg: var(--color-date-picker-surface);
+  --color-date-picker-content-fg: var(--color-date-picker-text);
+  --color-date-picker-content-border: var(--color-date-picker-border);
+  --color-date-picker-navigation-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-navigation-fg: var(--color-date-picker-text);
+  --color-date-picker-navigation-fg-disabled: var(--color-date-picker-disabled);
+  --color-date-picker-navigation-ring: var(--color-date-picker-ring);
+  --color-date-picker-weekday-fg: var(--color-date-picker-text);
+  --color-date-picker-day-bg: var(--color-date-picker-transparent);
+  --color-date-picker-day-bg-hover: var(--color-date-picker-fill-hover);
+  --color-date-picker-day-bg-range: var(--color-date-picker-range);
+  --color-date-picker-day-bg-range-hover: color-mix(
+    in oklab,
+    var(--color-date-picker-accent) 28%,
+    transparent
+  );
+  --color-date-picker-day-bg-selected: var(--color-date-picker-accent);
+  --color-date-picker-day-bg-selected-hover: var(
+    --color-date-picker-accent-hover
+  );
+  --color-date-picker-day-fg: var(--color-date-picker-text);
+  --color-date-picker-day-fg-selected: var(
+    --color-date-picker-accent-foreground
+  );
+  --color-date-picker-day-fg-unavailable: var(--color-date-picker-disabled);
+  --color-date-picker-day-border: var(--color-date-picker-transparent);
+  --color-date-picker-day-today-border: var(--color-date-picker-accent);
+  --color-date-picker-day-ring: var(--color-date-picker-ring);
+  --color-date-picker-time-bg: var(--color-date-picker-fill);
+  --color-date-picker-time-fg: var(--color-date-picker-text);
+  --color-date-picker-time-label-fg: var(--color-date-picker-text);
+  --color-date-picker-time-border: var(--color-date-picker-border);
+  --color-date-picker-time-ring: var(--color-date-picker-ring);
+  --color-date-picker-footer-border: var(--color-date-picker-border);
+  --color-date-picker-month-divider-border: var(--color-date-picker-border);
+
+  /* Geometry and density */
+  --border-width-date-picker-control: var(--border-width-form-control);
+  --border-width-date-picker-content: var(--border-sm);
+  --border-width-date-picker-day: var(--border-sm);
+  --border-width-date-picker-time: var(--border-width-form-control);
+  --radius-date-picker-control-sm: var(--radius-form-control-sm);
+  --radius-date-picker-control-md: var(--radius-form-control-md);
+  --radius-date-picker-control-lg: var(--radius-form-control-lg);
+  --radius-date-picker-content: var(--radius-popover);
+  --radius-date-picker-day: var(--radius-button-sm);
+  --radius-date-picker-time: var(--radius-form-control-sm);
+  --shadow-date-picker-content: var(--shadow-popover);
+
+  --gap-date-picker-root: var(--spacing-form-field-gap);
+  --gap-date-picker-control: var(--spacing-100);
+  --gap-date-picker-indicator: var(--spacing-50);
+  --gap-date-picker-calendar: var(--spacing-100);
+  --gap-date-picker-time: var(--spacing-100);
+  --gap-date-picker-footer: var(--spacing-100);
+  --spacing-date-picker-enter-offset: var(--spacing-50);
+  --padding-date-picker-segments-sm: var(--spacing-100);
+  --padding-date-picker-segments-md: var(--spacing-150);
+  --padding-date-picker-segments-lg: var(--spacing-200);
+  --padding-date-picker-segment: var(--spacing-50);
+  --padding-date-picker-range-separator: var(--spacing-100);
+  --padding-date-picker-content: var(--dimension-16);
+  --padding-date-picker-content-timed: var(--dimension-10);
+  --padding-date-picker-calendar-cell: var(--spacing-100);
+  --padding-date-picker-time-input: var(--spacing-50);
+  --padding-date-picker-time: var(--dimension-10);
+  --padding-date-picker-footer: var(--dimension-10);
+
+  --height-date-picker-control-sm: var(--height-form-control-sm);
+  --height-date-picker-control-md: var(--height-form-control-md);
+  --height-date-picker-control-lg: var(--height-form-control-lg);
+  --size-date-picker-navigation: var(--size-icon-control-md);
+  --size-date-picker-day-sm: var(--dimension-28);
+  --size-date-picker-day-md: var(--dimension-32);
+  --size-date-picker-day-lg: var(--dimension-36);
+  --size-date-picker-day-timed: var(--dimension-28);
+  --height-date-picker-day-sm: var(--size-date-picker-day-sm);
+  --height-date-picker-day-md: var(--size-date-picker-day-md);
+  --height-date-picker-day-lg: var(--size-date-picker-day-lg);
+  --height-date-picker-day-timed: var(--size-date-picker-day-timed);
+  --width-date-picker-content: calc(var(--dimension-40) * 7);
+  --width-date-picker-content-range: calc(
+    var(--width-date-picker-content) *
+    2 +
+    var(--gap-date-picker-calendar) +
+    var(--padding-date-picker-content) *
+    2
+  );
+  --container-date-picker-viewport: calc(100vw - var(--spacing-250) * 2);
+  --size-date-picker-segment: var(--dimension-24);
+  --height-date-picker-time-field: var(--height-form-control-sm);
+  --width-date-picker-time-field: var(--dimension-40);
+
+  --text-date-picker-sm: var(--text-sm);
+  --text-date-picker-md: var(--text-md);
+  --text-date-picker-lg: var(--text-lg);
+  --text-date-picker-content-sm: var(--text-xs);
+  --text-date-picker-content-md: var(--text-sm);
+  --text-date-picker-content-lg: var(--text-sm);
+  --text-date-picker-weekday: var(--text-xs);
+  --text-date-picker-time-label: var(--text-xs);
+  --font-weight-date-picker-view: var(--font-weight-medium);
+  --font-weight-date-picker-weekday: var(--font-weight-medium);
+  --opacity-date-picker-outside: var(--opacity-disabled);
+  --opacity-date-picker-disabled: var(--opacity-disabled);
+}
+
+@utility date-picker-scrollbar-hidden {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility date-picker-segment-size {
+  min-width: var(--size-date-picker-segment);
+  min-height: var(--size-date-picker-segment);
+}
+
+@utility token-icon-date-picker-calendar {
+  @apply icon-[mdi--calendar-blank-outline];
+}
+
+@utility token-icon-date-picker-clear {
+  @apply token-icon-close;
+}
+
+@utility token-icon-date-picker-previous {
+  @apply token-icon-chevron-left;
+}
+
+@utility token-icon-date-picker-next {
+  @apply token-icon-chevron-right;
+}
+
+@utility token-icon-date-picker-previous-year {
+  @apply icon-[mdi--chevron-double-left];
+}
+
+@utility token-icon-date-picker-next-year {
+  @apply icon-[mdi--chevron-double-right];
+}
+
+@utility token-date-picker-time-input {
+  appearance: textfield;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+}

package/src/tokens/components/molecules/_tour.css

@@ -0,0 +1,121 @@
+/* Code-owned until the explicitly deferred component-to-figma handoff. */
+@theme static {
+  /* Reference layer */
+  --color-tour-surface: var(--color-fill-surface);
+  --color-tour-text: var(--color-fg-primary);
+  --color-tour-outline: var(--color-border-primary);
+  --color-tour-scrim: var(--color-bg-scrim);
+
+  /* Derived layer */
+  --color-tour-bg: var(--color-tour-surface);
+  --color-tour-fg: var(--color-tour-text);
+  --color-tour-description-fg: var(--color-tour-text);
+  --color-tour-progress-fg: var(--color-tour-text);
+  --color-tour-border: var(--color-tour-outline);
+  --color-tour-backdrop-bg: var(--color-tour-scrim);
+  --color-tour-arrow-bg: var(--color-tour-surface);
+  --color-tour-spotlight-border: var(--color-tour-text);
+  --border-width-tour: var(--border-width-sm);
+  --radius-tour: var(--radius-sm);
+  --shadow-tour: var(--shadow-primary);
+  --padding-tour: var(--dimension-20);
+  --padding-tour-actions: var(--dimension-6);
+  --spacing-tour-content: var(--dimension-10);
+  --spacing-tour-actions: var(--dimension-6);
+  --spacing-tour-close: var(--dimension-10);
+  --spacing-tour-title: var(--dimension-30);
+  --spacing-tour-arrow: var(--dimension-10);
+  --spacing-tour-viewport: var(--dimension-16);
+  --container-tour: var(--container-sm);
+  --text-tour-title-size: var(--text-lg);
+  --text-tour-body-size: var(--text-base);
+  --text-tour-progress-size: var(--text-base);
+  --font-weight-tour-title: var(--font-weight-semibold);
+
+  /* Runtime layer, not a Figma variable. */
+  --z-tour: 80;
+}
+
+@utility tour-layer {
+  /* Zag 1.43.3 derives the positioner's inline z-index from Content.
+   * Keep explicit backdrop/spotlight/content offsets for the ui-kit stack. */
+  z-index: calc(var(--z-tour) + var(--tour-layer, 2)) !important;
+}
+
+@utility tour-border {
+  border: var(--border-width-tour) solid var(--color-tour-border);
+}
+
+@utility tour-spotlight-border {
+  border: var(--border-width-tour) solid var(--color-tour-spotlight-border);
+}
+
+@utility tour-content {
+  width: var(--container-tour);
+  max-width: calc(100vw - var(--spacing-tour-viewport) * 2);
+  max-height: calc(100svh - var(--spacing-tour-viewport) * 2);
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+@utility tour-positioner {
+  &[data-type="dialog"] {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &[data-type="floating"] {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-tour-viewport);
+    pointer-events: none;
+
+    &[data-placement^="top"],
+    &[data-placement="left-start"],
+    &[data-placement="right-start"] {
+      align-items: flex-start;
+    }
+
+    &[data-placement^="bottom"],
+    &[data-placement="left-end"],
+    &[data-placement="right-end"] {
+      align-items: flex-end;
+    }
+
+    &[data-placement="top-start"],
+    &[data-placement="bottom-start"] {
+      justify-content: flex-start;
+    }
+
+    &[data-placement="top-end"],
+    &[data-placement="bottom-end"] {
+      justify-content: flex-end;
+    }
+
+    &[data-placement^="left"] {
+      justify-content: left;
+    }
+
+    &[data-placement^="right"] {
+      justify-content: right;
+    }
+  }
+
+  & > [data-scope="tour"][data-part="content"] {
+    pointer-events: auto;
+  }
+}
+
+@utility tour-arrow {
+  --arrow-size: var(--spacing-tour-arrow);
+  --arrow-background: var(--color-tour-arrow-bg);
+  z-index: calc(var(--z-tour) + 3);
+}