@techsio/ui-kit 0.43.0 → 0.44.0

package/dist/molecules/cascade-select.js

@@ -0,0 +1,508 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, createElement, useContext, useEffect, useId, useMemo, useState } from "react";
+import { collection as cascade_select_collection, connect, machine } from "@zag-js/cascade-select";
+import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+const toControlSize = (size)=>"xs" === size ? "sm" : size;
+const controlGlyphClass = {
+    sm: "text-icon-control-sm",
+    md: "text-icon-control-md",
+    lg: "text-icon-control-lg"
+};
+const cascadeSelectVariants = tv({
+    slots: {
+        root: "relative flex w-full flex-col gap-cascade-select",
+        control: "relative flex w-full items-center justify-between",
+        positioner: "isolate",
+        trigger: [
+            "form-control-base group w-full",
+            "flex items-center justify-between gap-0",
+            "border-cascade-select-trigger-border",
+            "text-left font-normal",
+            "hover:border-cascade-select-trigger-border-hover",
+            "hover:bg-cascade-select-trigger-bg-hover",
+            "focus:border-cascade-select-trigger-border-focus",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-cascade-select-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-disabled:cursor-not-allowed",
+            "data-disabled:border-cascade-select-border-disabled",
+            "data-disabled:bg-cascade-select-bg-disabled",
+            "data-disabled:text-cascade-select-fg-disabled",
+            "data-[validation=error]:border-(length:--border-width-validation)",
+            "data-[validation=error]:border-cascade-select-border-error data-[validation=error]:outline-cascade-select-border-error",
+            "data-[validation=error]:outline-(style:--default-ring-style) data-[validation=error]:outline-(length:--default-ring-width)",
+            "data-[validation=error]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=success]:border-(length:--border-width-validation)",
+            "data-[validation=success]:border-cascade-select-border-success data-[validation=success]:outline-cascade-select-border-success",
+            "data-[validation=success]:outline-(style:--default-ring-style) data-[validation=success]:outline-(length:--default-ring-width)",
+            "data-[validation=success]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=warning]:border-(length:--border-width-validation)",
+            "data-[validation=warning]:border-cascade-select-border-warning data-[validation=warning]:outline-cascade-select-border-warning",
+            "data-[validation=warning]:outline-(style:--default-ring-style) data-[validation=warning]:outline-(length:--default-ring-width)",
+            "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        clearTrigger: "-translate-y-1/2 absolute top-1/2 right-cascade-select-right data-readonly:hidden",
+        content: [
+            "popup-surface-base flex w-max min-w-(--reference-width) max-w-(--available-width) overflow-x-auto",
+            "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",
+            "transition-discrete",
+            "starting:scale-98 starting:opacity-0",
+            "data-[state=open]:starting:scale-98 data-[state=open]:starting:opacity-0",
+            "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+            "data-[state=closed]:scale-98 data-[state=closed]:opacity-0"
+        ],
+        list: "min-w-cascade-select-column grow basis-0",
+        item: [
+            "popup-item-base",
+            "hover:bg-popup-item-bg-hover",
+            "data-highlighted:bg-popup-item-bg-hover",
+            "data-[state=checked]:bg-popup-item-bg-selected",
+            "data-[state=checked]:text-popup-item-fg-selected",
+            "data-disabled:cursor-not-allowed data-disabled:text-popup-item-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        itemText: "min-w-0 flex-grow truncate",
+        branchIndicator: [
+            "last:-me-(--size-popup-indicator) flex size-(--size-popup-indicator) shrink-0 items-center justify-center",
+            "rtl:rotate-180"
+        ],
+        itemIndicator: [
+            "last:-me-(--size-popup-indicator) flex size-(--size-popup-indicator) shrink-0 items-center justify-center",
+            "text-popup-item-fg-selected"
+        ],
+        valueText: [
+            "min-w-0 flex-grow truncate font-normal",
+            "data-placeholder:text-cascade-select-placeholder"
+        ],
+        indicator: [
+            "shrink-0 text-cascade-select-trigger-fg-base group-hover:text-cascade-select-trigger-fg-hover",
+            "data-[state=open]:rotate-180",
+            "motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none"
+        ]
+    },
+    variants: {
+        size: {
+            xs: {
+                trigger: "p-cascade-select-trigger-sm text-cascade-select-trigger-xs",
+                content: "popup-size-xs text-cascade-select-item-xs",
+                valueText: "text-cascade-select-value-xs"
+            },
+            sm: {
+                trigger: "h-form-control-sm rounded-cascade-select-sm p-cascade-select-trigger-sm text-cascade-select-trigger-sm",
+                content: "popup-size-sm text-cascade-select-item-sm",
+                valueText: "text-cascade-select-value-sm"
+            },
+            md: {
+                trigger: "h-form-control-md rounded-cascade-select-md p-cascade-select-trigger-md text-cascade-select-trigger-md",
+                content: "popup-size-md text-cascade-select-item-md",
+                valueText: "text-cascade-select-value-md"
+            },
+            lg: {
+                trigger: "p-cascade-select-trigger-md text-cascade-select-trigger-lg",
+                content: "popup-size-lg text-cascade-select-item-lg",
+                valueText: "text-cascade-select-value-lg"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const pathsMatch = (api, selectedItems)=>selectedItems.length === api.value.length && selectedItems.every((items, pathIndex)=>items.length === api.value[pathIndex]?.length && items.every((item, itemIndex)=>api.collection.getNodeValue(item) === api.value[pathIndex]?.[itemIndex]));
+const resolveSelectedItems = (api)=>{
+    if (pathsMatch(api, api.selectedItems)) return api.selectedItems;
+    return api.value.map((valuePath)=>{
+        const indexPath = api.collection.getIndexPath(valuePath);
+        return indexPath.map((_, index)=>api.collection.at(indexPath.slice(0, index + 1))).filter((item)=>void 0 !== item);
+    });
+};
+const formatSelectedItems = (api, selectedItems)=>{
+    const stringify = (item)=>api.collection.stringifyNode(item) ?? api.collection.getNodeValue(item);
+    if (api.multiple) return selectedItems.map((path)=>path.at(-1)).filter((item)=>void 0 !== item).map(stringify).join(", ");
+    return selectedItems.map((path)=>path.map(stringify).join(" / ")).join(", ");
+};
+const CascadeSelectContext = /*#__PURE__*/ createContext(null);
+const CascadeSelectItemContext = /*#__PURE__*/ createContext(null);
+function useCascadeSelectContext() {
+    const context = useContext(CascadeSelectContext);
+    if (!context) throw new Error("CascadeSelect parts must be used within CascadeSelect");
+    return context;
+}
+function useCascadeSelectItemContext() {
+    const context = useContext(CascadeSelectItemContext);
+    if (!context) throw new Error("CascadeSelect item parts must be used within CascadeSelect.Item");
+    return context;
+}
+function CascadeSelect({ children, className, id: providedId, items, ref, required = false, size = "md", validateStatus = "default", ...machineProps }) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const [statusTextIds, setStatusTextIds] = useState([]);
+    const collection = useMemo(()=>cascade_select_collection({
+            rootNode: {
+                children: items,
+                label: "",
+                value: "__cascade-select-root__"
+            },
+            isNodeDisabled: (item)=>item.disabled ?? false,
+            nodeToChildren: (item)=>item.children ?? [],
+            nodeToString: (item)=>item.label,
+            nodeToValue: (item)=>item.value
+        }), [
+        items
+    ]);
+    const service = useMachine(machine, {
+        ...machineProps,
+        collection,
+        id,
+        invalid: "error" === validateStatus,
+        positioning: {
+            fitViewport: true,
+            placement: "bottom-start",
+            ...machineProps.positioning
+        },
+        required
+    });
+    const api = connect(service, normalizeProps);
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(CascadeSelectContext.Provider, {
+        value: {
+            api,
+            formatValue: machineProps.formatValue,
+            required,
+            size,
+            statusTextIds,
+            setStatusTextIds,
+            validateStatus
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            ...api.getRootProps(),
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx("input", {
+                    ...api.getHiddenInputProps()
+                }),
+                children
+            ]
+        })
+    });
+}
+CascadeSelect.Label = function({ children, ...props }) {
+    const { api, required } = useCascadeSelectContext();
+    return /*#__PURE__*/ jsx(Label, {
+        ...mergeProps(api.getLabelProps(), props),
+        disabled: api.disabled,
+        required: required,
+        children: children
+    });
+};
+CascadeSelect.Control = function({ className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getControlProps(), props),
+        className: styles.control({
+            className
+        }),
+        ref: ref
+    });
+};
+CascadeSelect.Trigger = function({ className, ref, ...props }) {
+    const { api, size, statusTextIds, validateStatus } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const triggerProps = mergeProps(api.getTriggerProps(), props);
+    const ariaDescribedBy = [
+        triggerProps["aria-describedby"],
+        ...statusTextIds
+    ].filter(Boolean).join(" ") || void 0;
+    return /*#__PURE__*/ jsx(Button, {
+        ...triggerProps,
+        "aria-describedby": ariaDescribedBy,
+        className: styles.trigger({
+            className
+        }),
+        "data-validation": "default" === validateStatus ? void 0 : validateStatus,
+        ref: ref,
+        size: "current",
+        theme: "unstyled"
+    });
+};
+CascadeSelect.ValueText = function({ children, className, placeholder = "Select an option", ref, ...props }) {
+    const { api, formatValue, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const selectedItems = resolveSelectedItems(api);
+    const valueText = selectedItems === api.selectedItems ? api.valueAsString : formatValue?.(selectedItems) ?? formatSelectedItems(api, selectedItems);
+    const hasValue = api.hasSelectedItems;
+    let content = hasValue ? valueText : placeholder;
+    if (hasValue && "function" == typeof children) content = children(selectedItems);
+    else if (hasValue && void 0 !== children && "function" != typeof children) content = children;
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getValueTextProps(), props),
+        className: styles.valueText({
+            className
+        }),
+        "data-placeholder": hasValue ? void 0 : "",
+        ref: ref,
+        children: content
+    });
+};
+CascadeSelect.Indicator = function({ children, className, iconSize = "current", ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getIndicatorProps(), props),
+        className: styles.indicator({
+            className: `${controlGlyphClass[toControlSize(size)]} ${className ?? ""}`
+        }),
+        ref: ref,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-cascade-select-indicator",
+            size: iconSize
+        })
+    });
+};
+CascadeSelect.ClearTrigger = function({ "aria-label": ariaLabel = "Clear selection", className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        ...mergeProps(api.getClearTriggerProps(), props),
+        "aria-label": ariaLabel,
+        className: styles.clearTrigger({
+            className
+        }),
+        icon: "token-icon-cascade-select-clear",
+        ref: ref,
+        size: toControlSize(size),
+        tone: "neutral"
+    });
+};
+CascadeSelect.Positioner = function({ className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx("div", {
+            ...mergeProps(api.getPositionerProps(), props),
+            className: styles.positioner({
+                className
+            }),
+            ref: ref
+        })
+    });
+};
+CascadeSelect.Content = function({ className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getContentProps(), props),
+        className: styles.content({
+            className
+        }),
+        ref: ref
+    });
+};
+CascadeSelect.List = function({ className, indexPath, item, ref, value, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const itemProps = {
+        indexPath,
+        item,
+        value
+    };
+    return /*#__PURE__*/ jsx("ul", {
+        ...mergeProps(api.getListProps(itemProps), props),
+        className: styles.list({
+            className
+        }),
+        ref: ref
+    });
+};
+CascadeSelect.Item = function({ children, className, indexPath, item, ref, value, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    const itemProps = {
+        indexPath,
+        item,
+        value
+    };
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsx(CascadeSelectItemContext.Provider, {
+        value: {
+            itemProps,
+            itemState
+        },
+        children: /*#__PURE__*/ jsx("li", {
+            ...mergeProps(api.getItemProps(itemProps), props),
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            children: children
+        })
+    });
+};
+CascadeSelect.ItemText = function({ children, className, ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const { itemProps } = useCascadeSelectItemContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getItemTextProps(itemProps), props),
+        className: styles.itemText({
+            className
+        }),
+        ref: ref,
+        children: children ?? itemProps.item.label
+    });
+};
+CascadeSelect.BranchIndicator = function({ children, className, iconSize = "current", ref, ...props }) {
+    const { size } = useCascadeSelectContext();
+    const { itemState } = useCascadeSelectItemContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    if (!itemState.hasChildren) return null;
+    return /*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
+        className: styles.branchIndicator({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-cascade-select-branch",
+            size: iconSize
+        })
+    });
+};
+CascadeSelect.ItemIndicator = function({ children, className, iconSize = "current", ref, ...props }) {
+    const { api, size } = useCascadeSelectContext();
+    const { itemProps } = useCascadeSelectItemContext();
+    const styles = cascadeSelectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(api.getItemIndicatorProps(itemProps), props),
+        className: styles.itemIndicator({
+            className
+        }),
+        ref: ref,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-cascade-select-check",
+            size: iconSize
+        })
+    });
+};
+function CascadeSelectTreeNode({ indexPath, node, value }) {
+    const { api } = useCascadeSelectContext();
+    const nodeProps = {
+        indexPath,
+        item: node,
+        value
+    };
+    const nodeState = api.getItemState(nodeProps);
+    const children = api.collection.getNodeChildren(node);
+    const highlightedChild = nodeState.highlightedChild;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CascadeSelect.List, {
+                ...nodeProps,
+                children: children.map((item, index)=>{
+                    const itemValue = api.collection.getNodeValue(item);
+                    const itemProps = {
+                        indexPath: [
+                            ...indexPath,
+                            index
+                        ],
+                        item,
+                        value: [
+                            ...value,
+                            itemValue
+                        ]
+                    };
+                    return /*#__PURE__*/ createElement(CascadeSelect.Item, {
+                        ...itemProps,
+                        key: itemValue,
+                        children: [
+                            /*#__PURE__*/ jsx(CascadeSelect.ItemText, {}, "text"),
+                            /*#__PURE__*/ jsx(CascadeSelect.ItemIndicator, {}, "item-indicator"),
+                            /*#__PURE__*/ jsx(CascadeSelect.BranchIndicator, {}, "branch-indicator")
+                        ]
+                    });
+                })
+            }),
+            highlightedChild && api.collection.isBranchNode(highlightedChild) && /*#__PURE__*/ jsx(CascadeSelectTreeNode, {
+                indexPath: [
+                    ...indexPath,
+                    nodeState.highlightedIndex
+                ],
+                node: highlightedChild,
+                value: [
+                    ...value,
+                    api.collection.getNodeValue(highlightedChild)
+                ]
+            })
+        ]
+    });
+}
+CascadeSelect.Node = function({ indexPath = [], node, value = [] }) {
+    const { api } = useCascadeSelectContext();
+    return /*#__PURE__*/ jsx(CascadeSelectTreeNode, {
+        indexPath: indexPath,
+        node: node ?? api.collection.rootNode,
+        value: value
+    });
+};
+CascadeSelect.StatusText = function({ id: providedId, size: sizeProp, status: statusProp, ...props }) {
+    const { setStatusTextIds, size, validateStatus } = useCascadeSelectContext();
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const effectiveSize = sizeProp ?? size;
+    useEffect(()=>{
+        setStatusTextIds((ids)=>[
+                ...ids,
+                id
+            ]);
+        return ()=>setStatusTextIds((ids)=>ids.filter((statusId)=>statusId !== id));
+    }, [
+        id,
+        setStatusTextIds
+    ]);
+    return /*#__PURE__*/ jsx(StatusText, {
+        ...props,
+        id: id,
+        size: "xs" === effectiveSize ? "sm" : effectiveSize,
+        status: statusProp ?? validateStatus
+    });
+};
+CascadeSelect.displayName = "CascadeSelect";
+export { CascadeSelect, cascadeSelectVariants, useCascadeSelectContext };

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

@@ -0,0 +1,231 @@
+/**
+ * CascadeSelect — @techsio/ui-kit molecule.
+ *
+ * @component CascadeSelect
+ * @componentVersion v1.0.1
+ * @skill cascade-select-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the cascade-select-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import { type Api as ZagCascadeSelectApi, type ItemProps as ZagCascadeSelectItemProps, type Props as ZagCascadeSelectProps } from "@zag-js/cascade-select";
+import { type PropTypes } from "@zag-js/react";
+import { type ComponentPropsWithoutRef, type Dispatch, type ReactNode, type Ref, type SetStateAction } from "react";
+import type { VariantProps } from "tailwind-variants";
+import { type ActionIconProps } from "../atoms/action-icon.js";
+import { type IconProps } from "../atoms/icon.js";
+import { Label } from "../atoms/label.js";
+import { type StatusTextProps } from "../atoms/status-text.js";
+export type CascadeSelectSize = "xs" | "sm" | "md" | "lg";
+export type CascadeSelectValidateStatus = "default" | "error" | "success" | "warning";
+export type CascadeSelectItem = {
+    label: string;
+    value: string;
+    children?: CascadeSelectItem[];
+    disabled?: boolean;
+};
+export declare const cascadeSelectVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        sm: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    positioner: string;
+    trigger: string[];
+    clearTrigger: string;
+    content: string[];
+    list: string;
+    item: string[];
+    itemText: string;
+    branchIndicator: string[];
+    itemIndicator: string[];
+    valueText: string[];
+    indicator: string[];
+}, undefined, {
+    size: {
+        xs: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        sm: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    positioner: string;
+    trigger: string[];
+    clearTrigger: string;
+    content: string[];
+    list: string;
+    item: string[];
+    itemText: string;
+    branchIndicator: string[];
+    itemIndicator: string[];
+    valueText: string[];
+    indicator: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        sm: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+            valueText: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    positioner: string;
+    trigger: string[];
+    clearTrigger: string;
+    content: string[];
+    list: string;
+    item: string[];
+    itemText: string;
+    branchIndicator: string[];
+    itemIndicator: string[];
+    valueText: string[];
+    indicator: string[];
+}, undefined, unknown, unknown, undefined>>;
+type CascadeSelectApi = ZagCascadeSelectApi<PropTypes, CascadeSelectItem>;
+type CascadeSelectContextValue = {
+    api: CascadeSelectApi;
+    formatValue?: (selectedItems: CascadeSelectItem[][]) => string;
+    required: boolean;
+    size: CascadeSelectSize;
+    statusTextIds: string[];
+    setStatusTextIds: Dispatch<SetStateAction<string[]>>;
+    validateStatus: CascadeSelectValidateStatus;
+};
+export declare function useCascadeSelectContext(): CascadeSelectContextValue;
+export type CascadeSelectProps = VariantProps<typeof cascadeSelectVariants> & Omit<ZagCascadeSelectProps<CascadeSelectItem>, "collection" | "id" | "invalid"> & {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    items: CascadeSelectItem[];
+    ref?: Ref<HTMLDivElement>;
+    validateStatus?: CascadeSelectValidateStatus;
+};
+export declare function CascadeSelect({ children, className, id: providedId, items, ref, required, size, validateStatus, ...machineProps }: CascadeSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CascadeSelect {
+    var Label: ({ children, ...props }: CascadeSelectLabelProps) => import("react/jsx-runtime").JSX.Element;
+    var Control: ({ className, ref, ...props }: CascadeSelectControlProps) => import("react/jsx-runtime").JSX.Element;
+    var Trigger: ({ className, ref, ...props }: CascadeSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var ValueText: ({ children, className, placeholder, ref, ...props }: CascadeSelectValueTextProps) => import("react/jsx-runtime").JSX.Element;
+    var Indicator: ({ children, className, iconSize, ref, ...props }: CascadeSelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    var ClearTrigger: ({ "aria-label": ariaLabel, className, ref, ...props }: CascadeSelectClearTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var Positioner: ({ className, ref, ...props }: CascadeSelectPositionerProps) => import("react/jsx-runtime").JSX.Element;
+    var Content: ({ className, ref, ...props }: CascadeSelectContentProps) => import("react/jsx-runtime").JSX.Element;
+    var List: ({ className, indexPath, item, ref, value, ...props }: CascadeSelectListProps) => import("react/jsx-runtime").JSX.Element;
+    var Item: ({ children, className, indexPath, item, ref, value, ...props }: CascadeSelectItemProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemText: ({ children, className, ref, ...props }: CascadeSelectItemTextProps) => import("react/jsx-runtime").JSX.Element;
+    var BranchIndicator: ({ children, className, iconSize, ref, ...props }: CascadeSelectBranchIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+    var ItemIndicator: ({ children, className, iconSize, ref, ...props }: CascadeSelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    var Node: ({ indexPath, node, value, }: CascadeSelectNodeProps) => import("react/jsx-runtime").JSX.Element;
+    var StatusText: ({ id: providedId, size: sizeProp, status: statusProp, ...props }: CascadeSelectStatusTextProps) => import("react/jsx-runtime").JSX.Element;
+    var displayName: string;
+}
+type CascadeSelectLabelProps = Omit<ComponentPropsWithoutRef<typeof Label>, "disabled" | "required">;
+type CascadeSelectControlProps = ComponentPropsWithoutRef<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type CascadeSelectTriggerProps = ComponentPropsWithoutRef<"button"> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+type CascadeSelectValueTextProps = Omit<ComponentPropsWithoutRef<"span">, "children"> & {
+    children?: ReactNode | ((selectedItems: CascadeSelectItem[][]) => ReactNode);
+    placeholder?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+};
+type CascadeSelectIndicatorProps = ComponentPropsWithoutRef<"span"> & {
+    iconSize?: IconProps["size"];
+    ref?: Ref<HTMLSpanElement>;
+};
+type CascadeSelectClearTriggerProps = Omit<ActionIconProps, "icon" | "size" | "tone"> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+type CascadeSelectPositionerProps = ComponentPropsWithoutRef<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type CascadeSelectContentProps = ComponentPropsWithoutRef<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type CascadeSelectNodePartProps = ZagCascadeSelectItemProps<CascadeSelectItem>;
+type CascadeSelectListProps = Omit<ComponentPropsWithoutRef<"ul">, keyof CascadeSelectNodePartProps> & CascadeSelectNodePartProps & {
+    ref?: Ref<HTMLUListElement>;
+};
+type CascadeSelectItemProps = Omit<ComponentPropsWithoutRef<"li">, keyof CascadeSelectNodePartProps> & CascadeSelectNodePartProps & {
+    ref?: Ref<HTMLLIElement>;
+};
+type CascadeSelectItemTextProps = ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+type CascadeSelectBranchIndicatorProps = ComponentPropsWithoutRef<"span"> & {
+    iconSize?: IconProps["size"];
+    ref?: Ref<HTMLSpanElement>;
+};
+type CascadeSelectItemIndicatorProps = ComponentPropsWithoutRef<"span"> & {
+    iconSize?: IconProps["size"];
+    ref?: Ref<HTMLSpanElement>;
+};
+type CascadeSelectNodeProps = {
+    indexPath?: number[];
+    node?: CascadeSelectItem;
+    value?: string[];
+};
+type CascadeSelectStatusTextProps = Omit<StatusTextProps, "size" | "status"> & {
+    size?: CascadeSelectSize;
+    status?: CascadeSelectValidateStatus;
+};
+export {};
+//# sourceMappingURL=cascade-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cascade-select.d.ts","sourceRoot":"","sources":["../../../src/molecules/cascade-select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAIL,KAAK,GAAG,IAAI,mBAAmB,EAC/B,KAAK,SAAS,IAAI,yBAAyB,EAE3C,KAAK,KAAK,IAAI,qBAAqB,EAEpC,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEvE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAGvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzD,MAAM,MAAM,2BAA2B,GACnC,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAWD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAuGhC,CAAA;AAEF,KAAK,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;AAmDzE,KAAK,yBAAyB,GAAG;IAC/B,GAAG,EAAE,gBAAgB,CAAA;IACrB,WAAW,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,EAAE,KAAK,MAAM,CAAA;IAC9D,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,iBAAiB,CAAA;IACvB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IACpD,cAAc,EAAE,2BAA2B,CAAA;CAC5C,CAAA;AAcD,wBAAgB,uBAAuB,8BAQtC;AAcD,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GACzE,IAAI,CACF,qBAAqB,CAAC,iBAAiB,CAAC,EACxC,YAAY,GAAG,IAAI,GAAG,SAAS,CAChC,GAAG;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,iBAAiB,EAAE,CAAA;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,cAAc,CAAC,EAAE,2BAA2B,CAAA;CAC7C,CAAA;AAEH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,IAAW,EACX,cAA0B,EAC1B,GAAG,YAAY,EAChB,EAAE,kBAAkB,2CA2DpB;yBArEe,aAAa;wCA+E1B,uBAAuB;gDAsBvB,yBAAyB;gDAqBzB,yBAAyB;yEAuCzB,2BAA2B;sEA8C3B,2BAA2B;8EA+B3B,8BAA8B;mDAyB9B,4BAA4B;gDAuB5B,yBAAyB;qEA8BzB,sBAAsB;+EA8BtB,sBAAsB;2DA4BtB,0BAA0B;4EA2B1B,iCAAiC;0EAkCjC,+BAA+B;4CA4E/B,sBAAsB;uFAsBtB,4BAA4B;;;AA9c/B,KAAK,uBAAuB,GAAG,IAAI,CACjC,wBAAwB,CAAC,OAAO,KAAK,CAAC,EACtC,UAAU,GAAG,UAAU,CACxB,CAAA;AAmBD,KAAK,yBAAyB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,CAAA;AAmBD,KAAK,yBAAyB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACpE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,CAAA;AA8BD,KAAK,2BAA2B,GAAG,IAAI,CACrC,wBAAwB,CAAC,MAAM,CAAC,EAChC,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,aAAa,EAAE,iBAAiB,EAAE,EAAE,KAAK,SAAS,CAAC,CAAA;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AA2CD,KAAK,2BAA2B,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AA2BD,KAAK,8BAA8B,GAAG,IAAI,CACxC,eAAe,EACf,MAAM,GAAG,MAAM,GAAG,MAAM,CACzB,GAAG;IACF,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,CAAA;AAwBD,KAAK,4BAA4B,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACpE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,CAAA;AAqBD,KAAK,yBAAyB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,CAAA;AAmBD,KAAK,0BAA0B,GAAG,yBAAyB,CAAC,iBAAiB,CAAC,CAAA;AAE9E,KAAK,sBAAsB,GAAG,IAAI,CAChC,wBAAwB,CAAC,IAAI,CAAC,EAC9B,MAAM,0BAA0B,CACjC,GACC,0BAA0B,GAAG;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B,CAAA;AAuBH,KAAK,sBAAsB,GAAG,IAAI,CAChC,wBAAwB,CAAC,IAAI,CAAC,EAC9B,MAAM,0BAA0B,CACjC,GACC,0BAA0B,GAAG;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;CACzB,CAAA;AA6BH,KAAK,0BAA0B,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACnE,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AAuBD,KAAK,iCAAiC,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AA+BD,KAAK,+BAA+B,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AA0ED,KAAK,sBAAsB,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAkBD,KAAK,4BAA4B,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC7E,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,MAAM,CAAC,EAAE,2BAA2B,CAAA;CACrC,CAAA"}

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

@@ -1,5 +1,6 @@
 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";

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,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"}
+{"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;AAyLtD,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/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.43.0",
+  "version": "0.44.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -100,6 +100,7 @@
     "@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",

package/src/tokens/components/components.css

@@ -19,6 +19,7 @@
 @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";

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;
+}