@mdigital_ui/ui 0.4.0 → 0.4.2

package/dist/chunk-L5UYN5LX.js

@@ -0,0 +1,787 @@
+import { focusRingColorClasses, textColorClasses } from './chunk-POXI7JJ4.js';
+import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+import { Loader2, X, ChevronDown, Check, ChevronRight } from 'lucide-react';
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var cascaderTriggerVariants = cva(
+  "flex items-center justify-between gap-2 rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  {
+    variants: {
+      status: {
+        default: "bg-background border-border hover:border-primary/50",
+        error: "border-error",
+        warning: "border-warning",
+        info: "border-info",
+        success: "border-success"
+      },
+      size: {
+        xs: "h-(--select-height-xs) px-(--select-padding-x-xs) text-xs",
+        sm: "h-(--select-height-sm) px-(--select-padding-x-sm) text-sm",
+        md: "h-(--select-height-md) px-(--select-padding-x-md) text-base",
+        lg: "h-(--select-height-lg) px-(--select-padding-x-lg) text-lg"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md",
+      fullWidth: true
+    }
+  }
+);
+var cascaderMenuVariants = cva(
+  "overflow-auto rounded-md border bg-background w-[200px] max-h-[300px]",
+  {
+    variants: {
+      size: {
+        xs: "w-[160px]",
+        sm: "w-[180px]",
+        md: "w-[200px]",
+        lg: "w-[220px]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var cascaderItemVariants = cva(
+  "relative cursor-pointer select-none text-text-primary transition-colors flex items-center gap-2 w-full",
+  {
+    variants: {
+      size: {
+        xs: "px-2 py-1 text-xs min-h-[28px]",
+        sm: "px-2.5 py-1.5 text-sm min-h-[32px]",
+        md: "px-3 py-2 text-base min-h-[36px]",
+        lg: "px-3.5 py-2.5 text-lg min-h-[44px]"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "hover:bg-surface"
+      },
+      active: {
+        true: "bg-surface",
+        false: ""
+      },
+      selected: {
+        true: "font-medium",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      active: false,
+      selected: false
+    }
+  }
+);
+var tagSizeClasses = {
+  xs: "text-[10px] px-1 py-0",
+  sm: "text-xs px-1.5 py-0.5",
+  md: "text-sm px-2 py-0.5",
+  lg: "text-sm px-2.5 py-1"
+};
+var accentBgClasses = {
+  default: "bg-primary/10 text-primary",
+  primary: "bg-primary/10 text-primary",
+  secondary: "bg-secondary/10 text-secondary",
+  accent: "bg-accent/10 text-accent",
+  success: "bg-success/10 text-success",
+  error: "bg-error/10 text-error",
+  warning: "bg-warning/10 text-warning",
+  info: "bg-info/10 text-info"
+};
+var checkboxCheckedClasses = {
+  default: "bg-primary border-primary",
+  primary: "bg-primary border-primary",
+  secondary: "bg-secondary border-secondary",
+  accent: "bg-accent border-accent",
+  success: "bg-success border-success",
+  error: "bg-error border-error",
+  warning: "bg-warning border-warning",
+  info: "bg-info border-info"
+};
+var indeterminateBgClasses = {
+  default: "bg-primary",
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  accent: "bg-accent",
+  success: "bg-success",
+  error: "bg-error",
+  warning: "bg-warning",
+  info: "bg-info"
+};
+var Cascader = React.memo(
+  ({
+    options,
+    value,
+    defaultValue,
+    onChange,
+    onSelect,
+    placeholder = "Please select",
+    label,
+    helperText,
+    messagePosition = "bottom",
+    color = "default",
+    size = "md",
+    placement = "bottomLeft",
+    disabled = false,
+    loading = false,
+    error,
+    warning,
+    info,
+    success,
+    fullWidth = true,
+    expandTrigger = "hover",
+    multiple = false,
+    maxTagCount = 3,
+    clearable = true,
+    showPath = true,
+    pathSeparator = " / ",
+    changeOnSelect = false,
+    loadData,
+    displayRender,
+    tagRender,
+    emptyContent = "No options",
+    className,
+    classNames,
+    required,
+    ref,
+    onOpenChange
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(defaultValue || []);
+    const [activeMenus, setActiveMenus] = React.useState([
+      options
+    ]);
+    const [hoveredPath, setHoveredPath] = React.useState([]);
+    const [selectedPath, setSelectedPath] = React.useState([]);
+    const [focusedIndex, setFocusedIndex] = React.useState(null);
+    const containerRef = React.useRef(null);
+    const menuRefs = React.useRef([]);
+    const currentValue = value !== void 0 ? value : internalValue;
+    const normalizedValue = React.useMemo(() => {
+      if (multiple) {
+        return Array.isArray(currentValue[0]) ? currentValue : [];
+      }
+      return Array.isArray(currentValue) && currentValue.length > 0 && !Array.isArray(currentValue[0]) ? [currentValue] : [];
+    }, [currentValue, multiple]);
+    let status = "default";
+    if (error) status = "error";
+    else if (warning) status = "warning";
+    else if (success) status = "success";
+    else if (info) status = "info";
+    const helperMessage = error || warning || info || success || helperText;
+    const handleOpenChange = React.useCallback(
+      (open) => {
+        if (disabled || loading) return;
+        setIsOpen(open);
+        onOpenChange?.(open);
+        if (open) {
+          setActiveMenus([options]);
+          setHoveredPath([]);
+          setFocusedIndex(null);
+          if (normalizedValue.length > 0 && !multiple) {
+            setSelectedPath(normalizedValue[0] || []);
+            expandToPath(normalizedValue[0] || []);
+          } else {
+            setSelectedPath([]);
+          }
+        }
+      },
+      [disabled, loading, options, normalizedValue, multiple, onOpenChange]
+    );
+    const expandToPath = React.useCallback(
+      (path) => {
+        const menus = [options];
+        let currentOptions = options;
+        for (const val of path) {
+          const option = currentOptions.find((opt) => opt.value === val);
+          if (option?.children && option.children.length > 0) {
+            menus.push(option.children);
+            currentOptions = option.children;
+          }
+        }
+        setActiveMenus(menus);
+      },
+      [options]
+    );
+    const getSelectedOptions = React.useCallback(
+      (path) => {
+        const selected = [];
+        let currentOptions = options;
+        for (const val of path) {
+          const option = currentOptions.find((opt) => opt.value === val);
+          if (option) {
+            selected.push(option);
+            currentOptions = option.children || [];
+          }
+        }
+        return selected;
+      },
+      [options]
+    );
+    const isPathSelected = React.useCallback(
+      (path) => {
+        return normalizedValue.some(
+          (selectedPath2) => selectedPath2.length === path.length && selectedPath2.every((val, idx) => val === path[idx])
+        );
+      },
+      [normalizedValue]
+    );
+    const getAllLeafPaths = React.useCallback(
+      (option, currentPath) => {
+        const paths = [];
+        const fullPath = [...currentPath, option.value];
+        if (!option.children || option.children.length === 0) {
+          paths.push(fullPath);
+        } else {
+          option.children.forEach((child) => {
+            paths.push(...getAllLeafPaths(child, fullPath));
+          });
+        }
+        return paths;
+      },
+      []
+    );
+    const getNodeSelectionState = React.useCallback(
+      (option, currentPath) => {
+        if (!option.children || option.children.length === 0) {
+          const fullPath = [...currentPath, option.value];
+          return { checked: isPathSelected(fullPath), indeterminate: false };
+        }
+        const leafPaths = getAllLeafPaths(option, currentPath);
+        const selectedCount = leafPaths.filter(
+          (path) => isPathSelected(path)
+        ).length;
+        return {
+          checked: selectedCount === leafPaths.length && leafPaths.length > 0,
+          indeterminate: selectedCount > 0 && selectedCount < leafPaths.length
+        };
+      },
+      [isPathSelected, getAllLeafPaths]
+    );
+    const handleItemClick = React.useCallback(
+      async (option, level) => {
+        if (option.disabled) return;
+        const newPath = [...selectedPath.slice(0, level), option.value];
+        setSelectedPath(newPath);
+        if (loadData && !option.children && !option.isLeaf && !option.loading) {
+          const selectedOpts = getSelectedOptions(newPath);
+          await loadData(selectedOpts);
+          return;
+        }
+        const hasChildren = option.children && option.children.length > 0;
+        const isLeaf = !hasChildren;
+        if (hasChildren && !multiple) {
+          setActiveMenus((prev) => [
+            ...prev.slice(0, level + 1),
+            option.children
+          ]);
+          if (changeOnSelect) {
+            const selectedOpts = getSelectedOptions(newPath);
+            if (value === void 0) setInternalValue(newPath);
+            onChange?.(newPath, selectedOpts);
+          }
+        } else if (hasChildren && multiple) {
+          const leafPaths = getAllLeafPaths(
+            option,
+            selectedPath.slice(0, level)
+          );
+          const allSelected = leafPaths.every((path) => isPathSelected(path));
+          let newValue;
+          if (allSelected) {
+            newValue = normalizedValue.filter(
+              (sp) => !leafPaths.some(
+                (lp) => lp.length === sp.length && lp.every((v, i) => v === sp[i])
+              )
+            );
+          } else {
+            const pathsToAdd = leafPaths.filter(
+              (path) => !isPathSelected(path)
+            );
+            newValue = [...normalizedValue, ...pathsToAdd];
+          }
+          const newSelectedOptions = newValue.map(
+            (path) => getSelectedOptions(path)
+          );
+          if (value === void 0) setInternalValue(newValue);
+          onChange?.(newValue, newSelectedOptions);
+          setActiveMenus((prev) => [
+            ...prev.slice(0, level + 1),
+            option.children
+          ]);
+        } else if (isLeaf) {
+          if (multiple) {
+            let newValue;
+            if (isPathSelected(newPath)) {
+              newValue = normalizedValue.filter(
+                (path) => !(path.length === newPath.length && path.every((val, idx) => val === newPath[idx]))
+              );
+            } else {
+              newValue = [...normalizedValue, newPath];
+            }
+            const newSelectedOptions = newValue.map(
+              (path) => getSelectedOptions(path)
+            );
+            if (value === void 0) setInternalValue(newValue);
+            onChange?.(newValue, newSelectedOptions);
+          } else {
+            const selectedOpts = getSelectedOptions(newPath);
+            if (value === void 0) setInternalValue(newPath);
+            onChange?.(newPath, selectedOpts);
+            onSelect?.(newPath, selectedOpts);
+            handleOpenChange(false);
+          }
+        }
+      },
+      [
+        selectedPath,
+        value,
+        onChange,
+        onSelect,
+        getSelectedOptions,
+        multiple,
+        isPathSelected,
+        normalizedValue,
+        getAllLeafPaths,
+        changeOnSelect,
+        loadData,
+        handleOpenChange
+      ]
+    );
+    const handleItemHover = React.useCallback(
+      (option, level, index) => {
+        if (expandTrigger !== "hover" || option.disabled) return;
+        setHoveredPath((prev) => [...prev.slice(0, level), index]);
+        setSelectedPath((prev) => [...prev.slice(0, level), option.value]);
+        if (option.children && option.children.length > 0) {
+          setActiveMenus((prev) => [
+            ...prev.slice(0, level + 1),
+            option.children
+          ]);
+        } else {
+          setActiveMenus((prev) => prev.slice(0, level + 1));
+        }
+      },
+      [expandTrigger]
+    );
+    const handleClear = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        const emptyValue = multiple ? [] : [];
+        if (value === void 0) setInternalValue(emptyValue);
+        onChange?.(emptyValue, []);
+      },
+      [value, onChange, multiple]
+    );
+    const removeSelection = React.useCallback(
+      (pathToRemove, e) => {
+        e.stopPropagation();
+        if (!multiple) return;
+        const newValue = normalizedValue.filter(
+          (path) => !(path.length === pathToRemove.length && path.every((val, idx) => val === pathToRemove[idx]))
+        );
+        const newSelectedOptions = newValue.map(
+          (path) => getSelectedOptions(path)
+        );
+        if (value === void 0) setInternalValue(newValue);
+        onChange?.(newValue, newSelectedOptions);
+      },
+      [multiple, normalizedValue, value, onChange, getSelectedOptions]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (!isOpen) {
+          if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            handleOpenChange(true);
+          }
+          return;
+        }
+        switch (e.key) {
+          case "Escape":
+            e.preventDefault();
+            handleOpenChange(false);
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            if (focusedIndex === null) {
+              setFocusedIndex({ level: 0, index: 0 });
+            } else {
+              const currentMenu = activeMenus[focusedIndex.level];
+              if (currentMenu && focusedIndex.index < currentMenu.length - 1) {
+                setFocusedIndex({
+                  ...focusedIndex,
+                  index: focusedIndex.index + 1
+                });
+              }
+            }
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            if (focusedIndex && focusedIndex.index > 0) {
+              setFocusedIndex({
+                ...focusedIndex,
+                index: focusedIndex.index - 1
+              });
+            }
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            if (focusedIndex) {
+              const currentMenu = activeMenus[focusedIndex.level];
+              const option = currentMenu?.[focusedIndex.index];
+              if (option?.children && option.children.length > 0) {
+                setActiveMenus((prev) => [
+                  ...prev.slice(0, focusedIndex.level + 1),
+                  option.children
+                ]);
+                setFocusedIndex({ level: focusedIndex.level + 1, index: 0 });
+              }
+            }
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            if (focusedIndex && focusedIndex.level > 0) {
+              const parentLevel = focusedIndex.level - 1;
+              const parentIndex = hoveredPath[parentLevel] ?? 0;
+              setActiveMenus((prev) => prev.slice(0, focusedIndex.level));
+              setFocusedIndex({ level: parentLevel, index: parentIndex });
+            }
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (focusedIndex) {
+              const currentMenu = activeMenus[focusedIndex.level];
+              const option = currentMenu?.[focusedIndex.index];
+              if (option) {
+                handleItemClick(option, focusedIndex.level);
+              }
+            }
+            break;
+        }
+      },
+      [isOpen, focusedIndex, activeMenus, handleOpenChange, handleItemClick]
+    );
+    const displayValue = React.useMemo(() => {
+      if (normalizedValue.length === 0) return null;
+      if (displayRender) {
+        if (multiple) {
+          const allLabels = normalizedValue.map(
+            (path) => getSelectedOptions(path).map((opt) => opt.label)
+          );
+          const allOptions = normalizedValue.map(
+            (path) => getSelectedOptions(path)
+          );
+          return displayRender(allLabels, allOptions);
+        } else {
+          const selectedOpts = getSelectedOptions(normalizedValue[0] || []);
+          const labels = selectedOpts.map((opt) => opt.label);
+          return displayRender(labels, selectedOpts);
+        }
+      }
+      if (!multiple) {
+        const selectedOpts = getSelectedOptions(normalizedValue[0] || []);
+        const labels = selectedOpts.map((opt) => opt.label);
+        if (showPath) {
+          return labels.join(pathSeparator);
+        }
+        return labels[labels.length - 1] || null;
+      }
+      return null;
+    }, [
+      normalizedValue,
+      displayRender,
+      getSelectedOptions,
+      multiple,
+      showPath,
+      pathSeparator
+    ]);
+    const showClearButton = clearable && normalizedValue.length > 0 && normalizedValue[0]?.[0] && !disabled && !loading;
+    const renderCascaderMenus = () => {
+      return /* @__PURE__ */ jsx("div", { className: cn("flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none cascader_dropdown", classNames?.dropdown), "data-slot": "dropdown", children: activeMenus.map((menu, level) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            menuRefs.current[level] = el;
+          },
+          role: "listbox",
+          className: cn(cascaderMenuVariants({ size }), "border-border cascader_menu", classNames?.menu),
+          "data-slot": "menu",
+          children: menu.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-text-secondary text-sm", children: emptyContent }) : menu.map((option, index) => {
+            const isActive = selectedPath[level] === option.value || expandTrigger === "hover" && hoveredPath[level] === index;
+            const isFocused = focusedIndex?.level === level && focusedIndex?.index === index;
+            const currentPath = selectedPath.slice(0, level);
+            const fullPath = [...currentPath, option.value];
+            const selectionState = multiple ? getNodeSelectionState(option, currentPath) : null;
+            const isLeafSelected = !multiple && isPathSelected(fullPath) && (!option.children || option.children.length === 0);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "option",
+                "aria-selected": isLeafSelected || (selectionState?.checked ?? false),
+                "aria-disabled": option.disabled,
+                className: cn(
+                  cascaderItemVariants({
+                    size,
+                    disabled: !!option.disabled,
+                    active: isActive || isFocused,
+                    selected: isLeafSelected
+                  }),
+                  isLeafSelected && accentBgClasses[color],
+                  "cascader_option",
+                  classNames?.option
+                ),
+                onClick: () => handleItemClick(option, level),
+                onMouseEnter: () => handleItemHover(option, level, index),
+                "data-slot": "option",
+                children: [
+                  multiple && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "w-4 h-4 border rounded flex items-center justify-center shrink-0",
+                        selectionState?.checked ? checkboxCheckedClasses[color] : "border-border"
+                      ),
+                      children: [
+                        selectionState?.checked && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-background" }),
+                        selectionState?.indeterminate && !selectionState?.checked && /* @__PURE__ */ jsx("div", { className: cn("w-2 h-0.5", indeterminateBgClasses[color]) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "shrink-0 flex items-center",
+                        iconSizes[size]
+                      ),
+                      children: [
+                        option.loading && /* @__PURE__ */ jsx(
+                          Loader2,
+                          {
+                            className: cn("animate-spin", iconSizes[size])
+                          }
+                        ),
+                        !option.loading && option.children && option.children.length > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes[size] }),
+                        !option.loading && isLeafSelected && /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(iconSizes[size], textColorClasses[color])
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              },
+              option.value
+            );
+          })
+        },
+        level
+      )) });
+    };
+    const renderTriggerContent = () => {
+      if (multiple && normalizedValue.length > 0) {
+        const visibleTags = normalizedValue.slice(0, maxTagCount);
+        const remainingCount = normalizedValue.length - maxTagCount;
+        return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-wrap gap-1 items-center min-h-0 overflow-hidden", children: [
+          visibleTags.map((path, idx) => {
+            const selectedOpts = getSelectedOptions(path);
+            const label2 = showPath ? selectedOpts.map((o) => o.label).join(pathSeparator) : selectedOpts[selectedOpts.length - 1]?.label || "";
+            if (tagRender) {
+              return tagRender({
+                label: label2,
+                value: path,
+                closable: !disabled,
+                onClose: () => removeSelection(path, {
+                  stopPropagation: () => {
+                  }
+                })
+              });
+            }
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 rounded whitespace-nowrap",
+                  accentBgClasses[color],
+                  tagSizeClasses[size]
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate max-w-[150px]", children: label2 }),
+                  !disabled && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => removeSelection(path, e),
+                      className: "hover:text-error shrink-0",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                    }
+                  )
+                ]
+              },
+              idx
+            );
+          }),
+          remainingCount > 0 && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center bg-surface text-text-secondary rounded whitespace-nowrap",
+                tagSizeClasses[size]
+              ),
+              children: [
+                "+",
+                remainingCount
+              ]
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("truncate flex-1", !displayValue && "text-text-secondary"),
+          children: displayValue || placeholder
+        }
+      );
+    };
+    const popoverSide = placement.startsWith("top") ? "top" : "bottom";
+    const popoverAlign = placement.endsWith("Right") ? "end" : "start";
+    const triggerElement = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          cascaderTriggerVariants({ status, size, fullWidth }),
+          focusRingColorClasses[color],
+          disabled && "opacity-50 cursor-not-allowed",
+          loading && "opacity-50 pointer-events-none",
+          "cascader_trigger",
+          classNames?.trigger,
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled,
+        "aria-label": label || placeholder,
+        "data-slot": "trigger",
+        children: [
+          renderTriggerContent(),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-text-secondary shrink-0", children: [
+            loading && /* @__PURE__ */ jsx(
+              Loader2,
+              {
+                className: cn("animate-spin text-text-secondary", iconSizes[size])
+              }
+            ),
+            !loading && showClearButton && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "hover:text-text-primary",
+                "aria-label": "Clear selection",
+                children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+              }
+            ),
+            !loading && /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "transition-transform",
+                  iconSizes[size],
+                  isOpen && "rotate-180"
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    const cascaderElement = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative cascader_root", fullWidth ? "w-full" : "inline-block", classNames?.root),
+        "data-slot": "root",
+        children: /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
+          /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: triggerElement }),
+          /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+            PopoverPrimitive.Content,
+            {
+              side: popoverSide,
+              align: popoverAlign,
+              sideOffset: 4,
+              className: "z-50 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 duration-200",
+              children: renderCascaderMenus()
+            }
+          ) })
+        ] })
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col", fullWidth ? "w-full" : "inline-block"),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center mb-0.5", children: [
+            label && /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-text-secondary", children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
+            ] }),
+            helperMessage && messagePosition === "top" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-xs",
+                  status === "error" && "text-error",
+                  status === "warning" && "text-warning",
+                  status === "info" && "text-info",
+                  status === "success" && "text-success",
+                  status === "default" && "text-text-secondary"
+                ),
+                children: helperMessage
+              }
+            )
+          ] }),
+          cascaderElement,
+          helperMessage && messagePosition === "bottom" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs mt-0.5",
+                status === "error" && "text-error",
+                status === "warning" && "text-warning",
+                status === "info" && "text-info",
+                status === "success" && "text-success",
+                status === "default" && "text-text-secondary"
+              ),
+              children: helperMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Cascader.displayName = "Cascader";
+var cascader_default = Cascader;
+
+export { cascader_default };
+//# sourceMappingURL=chunk-L5UYN5LX.js.map
+//# sourceMappingURL=chunk-L5UYN5LX.js.map