@techsio/ui-kit 0.43.0 → 0.44.1

package/dist/stories/molecules/cascade-select.stories.d.ts

@@ -0,0 +1,254 @@
+import type { StoryObj } from "@storybook/react";
+import { CascadeSelect } from "../../src/molecules/cascade-select.js";
+declare const meta: {
+    title: string;
+    component: typeof CascadeSelect;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        validateStatus: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+        };
+        readOnly: {
+            control: "boolean";
+        };
+        required: {
+            control: "boolean";
+        };
+        multiple: {
+            control: "boolean";
+        };
+        highlightTrigger: {
+            control: "inline-radio";
+            options: string[];
+        };
+        closeOnSelect: {
+            control: "boolean";
+        };
+        allowParentSelection: {
+            control: "boolean";
+        };
+        loopFocus: {
+            control: "boolean";
+        };
+        dir: {
+            control: "inline-radio";
+            options: string[];
+        };
+        children: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        className: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        id: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        ref: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        items: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        value: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        defaultValue: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        open: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        defaultOpen: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        highlightedValue: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        defaultHighlightedValue: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        positioning: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        formatValue: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        name: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        form: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        ids: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        getRootNode: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        scrollToIndexFn: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        onFocusOutside: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        onInteractOutside: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        onPointerDownOutside: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        onValueChange: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        onOpenChange: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+        onHighlightChange: {
+            readonly control: false;
+            readonly table: {
+                readonly disable: true;
+            };
+        };
+    };
+    args: {
+        children: null;
+        items: {
+            label: string;
+            value: string;
+            children: ({
+                label: string;
+                value: string;
+                disabled?: undefined;
+            } | {
+                label: string;
+                value: string;
+                disabled: true;
+            })[];
+        }[];
+        size: "md";
+        validateStatus: "default";
+        disabled: false;
+        readOnly: false;
+        required: false;
+        multiple: false;
+        highlightTrigger: "click";
+        closeOnSelect: true;
+        allowParentSelection: false;
+        loopFocus: false;
+        dir: "ltr";
+        onValueChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        onOpenChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        onHighlightChange: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const OpenHierarchy: Story;
+export declare const NavigationModes: Story;
+export declare const MultipleSelection: Story;
+export declare const ParentSelection: Story;
+export declare const Controlled: Story;
+export declare const WithinForm: Story;
+export declare const AccessibleStatusText: Story;
+export declare const CustomValueFormatting: Story;
+//# sourceMappingURL=cascade-select.stories.d.ts.map

package/dist/stories/molecules/cascade-select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascade-select.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/cascade-select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EACL,aAAa,EAEd,MAAM,oCAAoC,CAAA;AAwK3C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KASxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAqCnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAwDpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAgBnC,CAAA"}

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":"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"}

package/dist/test/cascade-select.behavior.spec.d.ts

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

package/dist/test/cascade-select.behavior.spec.d.ts.map

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.43.0",
+  "version": "0.44.1",
   "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",
@@ -100,8 +103,11 @@
     "@tanstack/react-virtual": "^3.14.8",
     "@zag-js/accordion": "1.43.3",
     "@zag-js/carousel": "1.43.3",
+    "@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",
@@ -165,7 +171,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

@@ -19,9 +19,11 @@
 @import "./molecules/_accordion.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
+@import "./molecules/_cascade-select.css";
 @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";

package/src/tokens/components/molecules/_cascade-select.css

@@ -0,0 +1,66 @@
+/* CascadeSelect inherits Select controls and the shared popup contract. */
+@theme static {
+  /* === COLORS === */
+  --color-cascade-select-trigger-bg-hover: var(--color-select-trigger-bg-hover);
+  --color-cascade-select-trigger-fg-base: var(--color-select-trigger-fg-base);
+  --color-cascade-select-trigger-fg-hover: var(--color-select-trigger-fg-hover);
+  --color-cascade-select-trigger-border: var(--color-select-trigger-border);
+  --color-cascade-select-trigger-border-hover: var(
+    --color-select-trigger-border-hover
+  );
+  --color-cascade-select-trigger-border-focus: var(
+    --color-select-trigger-border-focus
+  );
+  --color-cascade-select-bg-disabled: var(--color-select-bg-disabled);
+  --color-cascade-select-fg-disabled: var(--color-select-fg-disabled);
+  --color-cascade-select-border-disabled: var(--color-select-border-disabled);
+  --color-cascade-select-border-error: var(--color-select-border-error);
+  --color-cascade-select-border-success: var(--color-select-border-success);
+  --color-cascade-select-border-warning: var(--color-select-border-warning);
+  --color-cascade-select-placeholder: var(--color-select-placeholder);
+  --color-cascade-select-ring: var(--color-select-ring);
+
+  /* === SPACING === */
+  --spacing-cascade-select: var(--spacing-select);
+  --spacing-cascade-select-right: var(--spacing-select-right);
+  --padding-cascade-select-trigger-sm: var(--padding-select-trigger-sm);
+  --padding-cascade-select-trigger-md: var(--padding-select-trigger-md);
+
+  /* === SIZING === */
+  --container-cascade-select-column: var(--container-3xs);
+
+  /* === TYPOGRAPHY === */
+  --text-cascade-select-trigger-xs: var(--text-select-trigger-xs);
+  --text-cascade-select-trigger-sm: var(--text-select-trigger-sm);
+  --text-cascade-select-trigger-md: var(--text-select-trigger-md);
+  --text-cascade-select-trigger-lg: var(--text-select-trigger-lg);
+  --text-cascade-select-value-xs: var(--text-select-value-xs);
+  --text-cascade-select-value-sm: var(--text-select-value-sm);
+  --text-cascade-select-value-md: var(--text-select-value-md);
+  --text-cascade-select-value-lg: var(--text-select-value-lg);
+  --text-cascade-select-item-xs: var(--text-select-item-xs);
+  --text-cascade-select-item-sm: var(--text-select-item-sm);
+  --text-cascade-select-item-md: var(--text-select-item-md);
+  --text-cascade-select-item-lg: var(--text-select-item-lg);
+
+  /* === RADIUS === */
+  --radius-cascade-select-sm: var(--radius-select-sm);
+  --radius-cascade-select-md: var(--radius-select-md);
+}
+
+/* === ICONS === */
+@utility token-icon-cascade-select-indicator {
+  @apply token-icon-select-indicator;
+}
+
+@utility token-icon-cascade-select-clear {
+  @apply token-icon-select-clear;
+}
+
+@utility token-icon-cascade-select-branch {
+  @apply token-icon-chevron-right;
+}
+
+@utility token-icon-cascade-select-check {
+  @apply token-icon-check;
+}