@techsio/ui-kit 0.43.0 → 0.44.1

package/dist/internal/date-picker-coordinator.js

@@ -0,0 +1,166 @@
+import { Time, toCalendarDateTime } from "@internationalized/date";
+function createDatePickerCoordinatorState() {
+    return {
+        draft: null
+    };
+}
+function datePickerCoordinatorReducer(state, action) {
+    if ("open" === action.type || "resync" === action.type) return {
+        draft: {
+            baseline: action.value,
+            candidate: action.value
+        }
+    };
+    if ("edit" === action.type && state.draft) return {
+        draft: {
+            ...state.draft,
+            candidate: action.value,
+            timeParts: null === action.value ? void 0 : state.draft.timeParts
+        }
+    };
+    if ("edit-time" === action.type && state.draft?.candidate) {
+        const index = action.index ?? 0;
+        const hourCycle = action.hourCycle ?? 24;
+        const timeParts = {
+            ...getDatePickerDraftTimeParts(state, hourCycle, index),
+            [action.part]: action.value
+        };
+        const requiredParts = getRequiredTimeParts(action.granularity, hourCycle);
+        const isComplete = requiredParts.every((part)=>"number" == typeof timeParts[part]);
+        let candidate = state.draft.candidate;
+        const endpoint = getCandidateAt(candidate, index);
+        if (isComplete && endpoint) {
+            const time = {
+                hour: 12 === hourCycle ? (timeParts.hour ?? 12) % 12 + (timeParts.dayPeriod ?? 0) : timeParts.hour ?? 0,
+                minute: timeParts.minute ?? 0,
+                second: timeParts.second ?? 0
+            };
+            const timedEndpoint = isTimedDateValue(endpoint) ? endpoint.set(time) : toCalendarDateTime(endpoint, new Time(time.hour, time.minute, time.second));
+            candidate = setCandidateAt(candidate, index, timedEndpoint);
+        }
+        return {
+            draft: {
+                ...state.draft,
+                candidate,
+                timeGranularity: action.granularity,
+                timeHourCycle: hourCycle,
+                timeParts: {
+                    ...state.draft.timeParts,
+                    [index]: timeParts
+                }
+            }
+        };
+    }
+    if ("discard" === action.type) return createDatePickerCoordinatorState();
+    return state;
+}
+function getCandidateAt(candidate, index) {
+    if (isCandidateArray(candidate)) return candidate[index];
+    return 0 === index ? candidate : void 0;
+}
+function setCandidateAt(candidate, index, value) {
+    if (!isCandidateArray(candidate)) return 0 === index ? value : candidate;
+    const nextCandidate = [
+        ...candidate
+    ];
+    nextCandidate[index] = value;
+    return nextCandidate;
+}
+function candidateValues(candidate) {
+    if (isCandidateArray(candidate)) return candidate;
+    return candidate ? [
+        candidate
+    ] : [];
+}
+function isCandidateArray(candidate) {
+    return Array.isArray(candidate);
+}
+function dateValuesEqual(left, right) {
+    const leftValues = candidateValues(left);
+    const rightValues = candidateValues(right);
+    return leftValues.length === rightValues.length && leftValues.every((value, index)=>value.toString() === rightValues[index]?.toString());
+}
+function isDatePickerDraftDirty(state) {
+    if (!state.draft) return false;
+    return !dateValuesEqual(state.draft.baseline, state.draft.candidate) || areDraftTimePartsDirty(state.draft);
+}
+function canConfirmDatePickerDraft(state, isTimeUnavailable) {
+    if (!isDatePickerDraftDirty(state)) return false;
+    const candidate = state.draft?.candidate;
+    if (null === candidate) return true;
+    const values = candidateValues(candidate);
+    if (isCandidateArray(candidate) && 2 !== values.length) return false;
+    const [startValue, endValue] = values;
+    if (startValue && endValue && startValue.compare(endValue) > 0) return false;
+    const timedValues = values.filter(isTimedDateValue);
+    if (timedValues.length !== values.length) return false;
+    const firstTimedValue = timedValues[0];
+    const secondTimedValue = timedValues[1];
+    if (firstTimedValue && secondTimedValue && "timeZone" in firstTimedValue !== "timeZone" in secondTimedValue) return false;
+    return timedValues.every((value, index)=>{
+        if (index > 1) return false;
+        const candidateIndex = 0 === index ? 0 : 1;
+        if (state.draft?.timeGranularity && !getRequiredTimeParts(state.draft.timeGranularity, state.draft.timeHourCycle).every((part)=>"number" == typeof getDatePickerDraftTimeParts(state, state.draft?.timeHourCycle, candidateIndex)[part])) return false;
+        return !(isTimeUnavailable?.(value, candidateIndex) ?? false);
+    });
+}
+function isTimedDateValue(value) {
+    return null != value && "hour" in value;
+}
+function getDatePickerDraftTimeParts(state, hourCycle = 24, index = 0) {
+    const candidate = getCandidateAt(state.draft?.candidate, index);
+    const candidateParts = isTimedDateValue(candidate) ? {
+        dayPeriod: 12 === hourCycle ? candidate.hour >= 12 ? 12 : 0 : void 0,
+        hour: 12 === hourCycle ? candidate.hour % 12 || 12 : candidate.hour,
+        minute: candidate.minute,
+        second: candidate.second
+    } : {};
+    return {
+        ...candidateParts,
+        ...state.draft?.timeParts?.[index]
+    };
+}
+function getRequiredTimeParts(granularity, hourCycle = 24) {
+    const hourParts = 12 === hourCycle ? [
+        "hour",
+        "dayPeriod"
+    ] : [
+        "hour"
+    ];
+    if ("hour" === granularity) return hourParts;
+    if ("minute" === granularity) return [
+        ...hourParts,
+        "minute"
+    ];
+    return [
+        ...hourParts,
+        "minute",
+        "second"
+    ];
+}
+function areDraftTimePartsDirty(draft) {
+    if (!draft.timeParts) return false;
+    const indices = [
+        0,
+        1
+    ];
+    const parts = [
+        "hour",
+        "minute",
+        "second",
+        "dayPeriod"
+    ];
+    return indices.some((index)=>{
+        const timeParts = draft.timeParts?.[index];
+        if (!timeParts) return false;
+        const baseline = getCandidateAt(draft.baseline, index);
+        const baselineParts = isTimedDateValue(baseline) ? {
+            dayPeriod: 12 === draft.timeHourCycle ? baseline.hour >= 12 ? 12 : 0 : void 0,
+            hour: 12 === draft.timeHourCycle ? baseline.hour % 12 || 12 : baseline.hour,
+            minute: baseline.minute,
+            second: baseline.second
+        } : {};
+        return parts.some((part)=>Object.hasOwn(timeParts, part) && baselineParts[part] !== timeParts[part]);
+    });
+}
+export { canConfirmDatePickerDraft, createDatePickerCoordinatorState, datePickerCoordinatorReducer, getDatePickerDraftTimeParts, isDatePickerDraftDirty, isTimedDateValue };

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