@techsio/ui-kit 0.42.0 → 0.44.0

package/dist/src/molecules/file-upload.d.ts

@@ -0,0 +1,84 @@
+/**
+ * FileUpload — @techsio/ui-kit molecule.
+ *
+ * @component FileUpload
+ * @componentVersion v1.0.0
+ * @skill file-upload-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the file-upload-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import { type Api as FileUploadApi, type ItemType as FileUploadItemType, type Props as FileUploadMachineProps } from "@zag-js/file-upload";
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { type IconType } from "../atoms/icon.js";
+import { Label } from "../atoms/label.js";
+type FileUploadRootDomProps = Omit<ComponentPropsWithoutRef<"div">, keyof FileUploadMachineProps>;
+export type FileUploadProps = FileUploadRootDomProps & Omit<FileUploadMachineProps, "id"> & {
+    id?: string;
+    ref?: Ref<HTMLDivElement>;
+};
+export declare function FileUpload({ accept, acceptedFiles, allowDrop, capture, children, className, defaultAcceptedFiles, dir, directory, disabled, getRootNode, id, ids, invalid, locale, maxFileSize, maxFiles, minFileSize, name, onFileAccept, onFileChange, onFileReject, preventDocumentDrop, readOnly, ref, required, transformFiles, translations, validate, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FileUpload {
+    var Context: ({ children, }: FileUploadContextProps) => ReactNode;
+    var Label: ({ children, className, ref, ...props }: FileUploadLabelProps) => import("react/jsx-runtime").JSX.Element;
+    var Dropzone: ({ children, className, disableClick, onClick, onKeyDown, ref, ...props }: FileUploadDropzoneProps) => import("react/jsx-runtime").JSX.Element;
+    var HiddenInput: ({ ref, ...props }: FileUploadHiddenInputProps) => import("react/jsx-runtime").JSX.Element;
+    var Trigger: ({ children, className, disabled, icon, onClick, ref, ...props }: FileUploadTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemGroup: ({ children, className, ref, type, ...props }: FileUploadItemGroupProps) => import("react/jsx-runtime").JSX.Element;
+    var Item: ({ children, className, file, ref, ...props }: FileUploadItemProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemPreview: ({ children, className, ref, ...props }: FileUploadItemPreviewProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemPreviewImage: ({ className, ref, ...props }: FileUploadItemPreviewImageProps) => import("react/jsx-runtime").JSX.Element | null;
+    var ItemName: ({ children, className, ref, ...props }: FileUploadItemNameProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemSizeText: ({ children, className, ref, ...props }: FileUploadItemSizeTextProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemDeleteTrigger: ({ className, disabled, icon, onClick, ref, ...props }: FileUploadItemDeleteTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var ClearTrigger: ({ "aria-label": ariaLabel, className, disabled, icon, onClick, ref, ...props }: FileUploadClearTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var Root: typeof FileUpload;
+    var displayName: string;
+}
+export type FileUploadContextProps = {
+    children: (api: FileUploadApi) => ReactNode;
+};
+export type FileUploadLabelProps = Omit<ComponentPropsWithoutRef<typeof Label>, "disabled" | "htmlFor" | "required" | "size"> & {
+    ref?: Ref<HTMLLabelElement>;
+};
+export type FileUploadDropzoneProps = ComponentPropsWithoutRef<"div"> & {
+    disableClick?: boolean;
+    ref?: Ref<HTMLDivElement>;
+};
+type MachineOwnedInputProps = "accept" | "aria-hidden" | "autoFocus" | "capture" | "defaultValue" | "disabled" | "files" | "id" | "multiple" | "name" | "required" | "style" | "tabIndex" | "type" | "value" | "webkitdirectory";
+export type FileUploadHiddenInputProps = Omit<ComponentPropsWithoutRef<"input">, MachineOwnedInputProps> & {
+    ref?: Ref<HTMLInputElement>;
+};
+export type FileUploadTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "type"> & {
+    icon?: IconType;
+    ref?: Ref<HTMLButtonElement>;
+};
+export type FileUploadItemGroupProps = ComponentPropsWithoutRef<"ul"> & {
+    ref?: Ref<HTMLUListElement>;
+    type?: FileUploadItemType;
+};
+export type FileUploadItemProps = ComponentPropsWithoutRef<"li"> & {
+    file: File;
+    ref?: Ref<HTMLLIElement>;
+};
+export type FileUploadItemPreviewProps = ComponentPropsWithoutRef<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export type FileUploadItemPreviewImageProps = Omit<ComponentPropsWithoutRef<"img">, "alt" | "src"> & {
+    ref?: Ref<HTMLImageElement>;
+};
+export type FileUploadItemNameProps = ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+export type FileUploadItemSizeTextProps = ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+type FileUploadActionIconProps = Omit<ComponentPropsWithoutRef<"button">, "children" | "type"> & {
+    icon?: IconType;
+    ref?: Ref<HTMLButtonElement>;
+};
+export type FileUploadItemDeleteTriggerProps = FileUploadActionIconProps;
+export type FileUploadClearTriggerProps = FileUploadActionIconProps;
+export {};
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/src/molecules/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/molecules/file-upload.tsx"],"names":[],"mappings":"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"}

package/dist/src/types/zag.d.ts

@@ -1,9 +1,11 @@
 export type * as Accordion from "@zag-js/accordion";
 export type * as Carousel from "@zag-js/carousel";
+export type * as CascadeSelect from "@zag-js/cascade-select";
 export type * as Checkbox from "@zag-js/checkbox";
 export type * as Combobox from "@zag-js/combobox";
 export type * as Dialog from "@zag-js/dialog";
 export type * as Drawer from "@zag-js/drawer";
+export type * as FileUpload from "@zag-js/file-upload";
 export type * as Menu from "@zag-js/menu";
 export type * as NumberInput from "@zag-js/number-input";
 export type * as Pagination from "@zag-js/pagination";

package/dist/src/types/zag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zag.d.ts","sourceRoot":"","sources":["../../../src/types/zag.ts"],"names":[],"mappings":"AAAA,YAAY,KAAK,SAAS,MAAM,mBAAmB,CAAA;AACnD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,UAAU,MAAM,oBAAoB,CAAA;AACrD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,QAAQ,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"zag.d.ts","sourceRoot":"","sources":["../../../src/types/zag.ts"],"names":[],"mappings":"AAAA,YAAY,KAAK,SAAS,MAAM,mBAAmB,CAAA;AACnD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,aAAa,MAAM,wBAAwB,CAAA;AAC5D,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,UAAU,MAAM,oBAAoB,CAAA;AACrD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,QAAQ,MAAM,mBAAmB,CAAA"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAsLtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA+LtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

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/file-upload.stories.d.ts

@@ -0,0 +1,105 @@
+import type { StoryObj } from "@storybook/react";
+import { FileUpload } from "../../src/molecules/file-upload.js";
+declare const meta: {
+    title: string;
+    component: typeof FileUpload;
+    tags: string[];
+    parameters: {
+        layout: string;
+        controls: {
+            include: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        accept: {
+            control: "object";
+            description: string;
+        };
+        allowDrop: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        invalid: {
+            control: "boolean";
+            description: string;
+        };
+        maxFileSize: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+        maxFiles: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+        minFileSize: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+        readOnly: {
+            control: "boolean";
+            description: string;
+        };
+        required: {
+            control: "boolean";
+            description: string;
+        };
+    };
+    args: {
+        accept: {
+            "image/*": string[];
+        };
+        allowDrop: true;
+        disabled: false;
+        invalid: false;
+        maxFileSize: number;
+        maxFiles: number;
+        minFileSize: number;
+        onFileAccept: import("storybook/test").Mock<(...args: any[]) => any>;
+        onFileChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        onFileReject: import("storybook/test").Mock<(...args: any[]) => any>;
+        readOnly: false;
+        required: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const States: Story;
+export declare const Basic: Story;
+export declare const AcceptedFiles: Story;
+export declare const Multiple: Story;
+export declare const Dropzone: Story;
+export declare const DropzoneStates: Story;
+export declare const ConditionalDropzone: Story;
+export declare const CustomPreview: Story;
+export declare const RejectedFiles: Story;
+export declare const Directory: Story;
+export declare const MediaCapture: Story;
+export declare const ProgrammaticOpen: Story;
+export declare const InputLike: Story;
+export declare const Clearable: Story;
+export declare const Clipboard: Story;
+export declare const Controlled: Story;
+export declare const Form: Story;
+//# sourceMappingURL=file-upload.stories.d.ts.map

package/dist/stories/molecules/file-upload.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/file-upload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAgBtD,OAAO,EACL,UAAU,EAEX,MAAM,iCAAiC,CAAA;AAExC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EyB,CAAA;AAEnC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAuPlC,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAqDpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0D5B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA+BjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyCvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAyBD,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAA"}

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

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -100,10 +100,12 @@
     "@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/dialog": "1.43.3",
     "@zag-js/drawer": "1.43.3",
+    "@zag-js/file-upload": "1.43.3",
     "@zag-js/i18n-utils": "1.43.3",
     "@zag-js/menu": "1.43.3",
     "@zag-js/number-input": "1.43.3",

package/src/tokens/components/components.css

@@ -19,11 +19,13 @@
 @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/_dialog.css";
 @import "./molecules/_drawer.css";
+@import "./molecules/_file-upload.css";
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
 @import "./molecules/_radio-card.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;
+}