@mdigital_ui/ui 0.1.0

package/dist/chunk-SERJ3TZE.js

@@ -0,0 +1,640 @@
+import { cn, iconSizes } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import { X, Loader2, ChevronDown, Check, ChevronRight } from 'lucide-react';
+import React from 'react';
+import { jsxs, jsx, Fragment } 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-background border-border hover:border-primary",
+        primary: "bg-background border-primary",
+        secondary: "bg-background border-secondary",
+        accent: "bg-background border-accent",
+        success: "bg-background border-success",
+        error: "bg-background border-error",
+        warning: "bg-background border-warning",
+        info: "bg-background border-info"
+      },
+      size: {
+        xs: "h-8 px-1.5 text-xs",
+        sm: "h-[var(--input-height-sm)] px-2.5 text-sm",
+        md: "h-[var(--input-height-md)] px-3 text-base",
+        lg: "h-[var(--input-height-lg)] px-3 text-lg"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      fullWidth: true
+    }
+  }
+);
+var cascaderMenuVariants = cva(
+  "overflow-auto rounded-md border bg-background w-[200px] max-h-[300px]",
+  {
+    variants: {
+      color: {
+        default: "border-border",
+        primary: "border-primary",
+        secondary: "border-secondary",
+        accent: "border-accent",
+        success: "border-success",
+        error: "border-error",
+        warning: "border-warning",
+        info: "border-info"
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+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-3 py-1.5 text-sm min-h-[32px]",
+        md: "px-4 py-2 text-base min-h-[40px]",
+        lg: "px-5 py-2.5 text-lg min-h-[48px]"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "hover:bg-surface"
+      },
+      active: {
+        true: "bg-surface",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      active: false
+    }
+  }
+);
+var Cascader = React.memo(
+  ({
+    options,
+    value,
+    defaultValue,
+    onChange,
+    placeholder = "Please select",
+    label,
+    helperText,
+    messagePosition = "bottom",
+    color = "default",
+    size = "md",
+    position = "left",
+    disabled = false,
+    loading = false,
+    error,
+    warning,
+    info,
+    success,
+    fullWidth = true,
+    hover = true,
+    multiple = false,
+    maxChipsVisible = 3,
+    displayRender,
+    className,
+    required
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(defaultValue || (multiple ? [] : []));
+    const [activeMenus, setActiveMenus] = React.useState([
+      options
+    ]);
+    const [hoveredPath, setHoveredPath] = React.useState([]);
+    const [selectedPath, setSelectedPath] = React.useState([]);
+    const [visibleChipsCount, setVisibleChipsCount] = React.useState(maxChipsVisible);
+    const containerRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    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 variant = color;
+    if (error) {
+      variant = "error";
+    } else if (warning) {
+      variant = "warning";
+    } else if (success) {
+      variant = "success";
+    } else if (info) {
+      variant = "info";
+    }
+    const handleToggle = React.useCallback(() => {
+      if (!disabled && !loading) {
+        setIsOpen((prev) => {
+          if (!prev && normalizedValue.length > 0 && !multiple) {
+            setSelectedPath(normalizedValue[0] || []);
+          } else if (!prev) {
+            setSelectedPath([]);
+          }
+          return !prev;
+        });
+      }
+    }, [disabled, loading, normalizedValue, multiple]);
+    const handleClose = React.useCallback(() => {
+      setIsOpen(false);
+      setActiveMenus([options]);
+      setHoveredPath([]);
+    }, [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(
+      (option, level) => {
+        if (option.disabled) return;
+        const newPath = [...selectedPath.slice(0, level), option.value];
+        setSelectedPath(newPath);
+        if (option.children && option.children.length > 0 && !multiple) {
+          setActiveMenus((prev) => [
+            ...prev.slice(0, level + 1),
+            option.children
+          ]);
+        } else if (option.children && option.children.length > 0 && multiple) {
+          const leafPaths = getAllLeafPaths(
+            option,
+            selectedPath.slice(0, level)
+          );
+          const allSelected = leafPaths.every((path) => isPathSelected(path));
+          let newValue;
+          if (allSelected) {
+            newValue = normalizedValue.filter(
+              (selectedPath2) => !leafPaths.some(
+                (leafPath) => leafPath.length === selectedPath2.length && leafPath.every((val, idx) => val === selectedPath2[idx])
+              )
+            );
+          } 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 (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 selectedOptions = getSelectedOptions(newPath);
+            if (value === void 0) setInternalValue(newPath);
+            onChange?.(newPath, selectedOptions);
+            handleClose();
+          }
+        }
+      },
+      [
+        selectedPath,
+        value,
+        onChange,
+        handleClose,
+        getSelectedOptions,
+        multiple,
+        isPathSelected,
+        normalizedValue,
+        getAllLeafPaths
+      ]
+    );
+    const handleItemHover = React.useCallback(
+      (option, level, index) => {
+        if (hover && !option.disabled) {
+          setHoveredPath((prev) => [...prev.slice(0, level), index]);
+          if (option.children && option.children.length > 0) {
+            setActiveMenus((prev) => [
+              ...prev.slice(0, level + 1),
+              option.children
+            ]);
+          } else {
+            setActiveMenus((prev) => prev.slice(0, level + 1));
+          }
+        }
+      },
+      [hover]
+    );
+    const handleClear = React.useCallback(() => {
+      const emptyValue = multiple ? [] : [];
+      if (value === void 0) setInternalValue(emptyValue);
+      onChange?.(emptyValue, multiple ? [] : []);
+    }, [value, onChange, multiple]);
+    const removeSelection = React.useCallback(
+      (pathToRemove) => {
+        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]
+    );
+    React.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          handleClose();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [isOpen, handleClose]);
+    React.useEffect(() => {
+      if (!multiple || normalizedValue.length === 0 || !triggerRef.current) {
+        setVisibleChipsCount(maxChipsVisible);
+        return;
+      }
+      const calculateVisibleChips = () => {
+        const container = triggerRef.current;
+        if (!container) return;
+        const hiddenChips = container.querySelectorAll("[data-hidden-chip]");
+        if (hiddenChips.length === 0) return;
+        const containerWidth = container.offsetWidth;
+        const padding = size === "xs" ? 8 : size === "sm" ? 12 : size === "md" ? 16 : 20;
+        const chevronWidth = 32;
+        const gap = 4;
+        const plusIndicatorWidth = 50;
+        const availableWidth = containerWidth - padding * 2 - chevronWidth;
+        let totalWidth = 0;
+        let visibleCount = 0;
+        for (let i = 0; i < hiddenChips.length; i++) {
+          const chipWidth = hiddenChips[i]?.getBoundingClientRect().width || 0;
+          const requiredSpace = totalWidth + chipWidth + (visibleCount > 0 ? gap : 0);
+          const needsPlusIndicator = i < hiddenChips.length - 1;
+          const spaceWithIndicator = requiredSpace + (needsPlusIndicator ? gap + plusIndicatorWidth : 0);
+          if (spaceWithIndicator <= availableWidth) {
+            totalWidth = requiredSpace;
+            visibleCount++;
+          } else {
+            break;
+          }
+        }
+        setVisibleChipsCount(Math.max(1, visibleCount));
+      };
+      const timeoutId = setTimeout(calculateVisibleChips, 0);
+      const resizeObserver = new ResizeObserver(() => {
+        calculateVisibleChips();
+      });
+      if (triggerRef.current) {
+        resizeObserver.observe(triggerRef.current);
+      }
+      return () => {
+        clearTimeout(timeoutId);
+        resizeObserver.disconnect();
+      };
+    }, [normalizedValue, size, maxChipsVisible, multiple]);
+    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)
+          );
+          return displayRender(allLabels);
+        } else {
+          const labels = getSelectedOptions(normalizedValue[0] || []).map(
+            (opt) => opt.label
+          );
+          return displayRender(labels);
+        }
+      }
+      if (!multiple) {
+        const labels = getSelectedOptions(normalizedValue[0] || []).map(
+          (opt) => opt.label
+        );
+        return labels.length > 0 ? labels.join(" / ") : null;
+      }
+      return null;
+    }, [normalizedValue, displayRender, getSelectedOptions, multiple]);
+    const showClear = normalizedValue.length > 0 && !!normalizedValue[0]?.[0] && !disabled && !loading;
+    let status = "default";
+    const helperMessage = error || warning || info || success || helperText;
+    if (error) {
+      status = "error";
+    } else if (warning) {
+      status = "warning";
+    } else if (success) {
+      status = "success";
+    } else if (info) {
+      status = "info";
+    }
+    const renderCascaderMenus = () => /* @__PURE__ */ jsx("div", { className: "flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none", children: activeMenus.map((menu, level) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(cascaderMenuVariants({ color })),
+        children: menu.map((option, index) => {
+          const isActive = selectedPath[level] === option.value || hover && hoveredPath[level] === index;
+          const currentPath = selectedPath.slice(0, level);
+          const selectionState = multiple ? getNodeSelectionState(option, currentPath) : { checked: false, indeterminate: false };
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cascaderItemVariants({
+                size,
+                disabled: !!option.disabled,
+                active: isActive
+              }),
+              onClick: () => handleItemClick(option, level),
+              onMouseEnter: () => handleItemHover(option, level, index),
+              children: [
+                multiple && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "w-4 h-4 border rounded flex items-center justify-center shrink-0",
+                      selectionState.checked ? "bg-primary border-primary" : "border-border"
+                    ),
+                    children: [
+                      selectionState.checked && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-background" }),
+                      selectionState.indeterminate && !selectionState.checked && /* @__PURE__ */ jsx("div", { className: "w-2 h-0.5 bg-primary" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconSizes[size]), children: option.children && option.children.length > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes[size] }) })
+              ]
+            },
+            option.value
+          );
+        })
+      },
+      level
+    )) });
+    const triggerButton = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleToggle,
+        className: cn(
+          cascaderTriggerVariants({ variant, size, fullWidth }),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-wrap gap-1 items-center min-h-0", children: multiple && normalizedValue.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            normalizedValue.slice(0, visibleChipsCount).map((path, idx) => {
+              const labels = getSelectedOptions(path).map((opt) => opt.label);
+              const lastLabel = labels[labels.length - 1];
+              return /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded text-sm whitespace-nowrap",
+                  children: [
+                    lastLabel,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          removeSelection(path);
+                        },
+                        className: "hover:text-error",
+                        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                      }
+                    )
+                  ]
+                },
+                idx
+              );
+            }),
+            normalizedValue.length > visibleChipsCount && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center px-2 py-0.5 bg-surface text-text-secondary rounded text-sm whitespace-nowrap", children: [
+              "+",
+              normalizedValue.length - visibleChipsCount
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute opacity-0 pointer-events-none whitespace-nowrap",
+                "aria-hidden": "true",
+                children: normalizedValue.map((path, idx) => {
+                  const labels = getSelectedOptions(path).map(
+                    (opt) => opt.label
+                  );
+                  const lastLabel = labels[labels.length - 1];
+                  return /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-hidden-chip": true,
+                      className: "inline-flex items-center gap-1 bg-surface text-text-primary px-2 py-0.5 rounded text-sm whitespace-nowrap",
+                      children: [
+                        lastLabel,
+                        /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                      ]
+                    },
+                    idx
+                  );
+                })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "truncate text-text-primary",
+                !displayValue && "text-text-muted"
+              ),
+              children: displayValue || placeholder
+            }
+          ) }),
+          /* @__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-muted", iconSizes[size])
+              }
+            ),
+            !loading && showClear && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  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__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative", fullWidth ? "w-full" : "inline-block"),
+        children: [
+          triggerButton,
+          isOpen && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute z-50 mt-1",
+                position === "left" ? "left-0" : "right-0"
+              ),
+              children: renderCascaderMenus()
+            }
+          )
+        ]
+      }
+    );
+    if (!label && !helperMessage) return cascaderElement;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "w-full flex flex-col relative",
+          !fullWidth && "inline-block"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center relative mb-0.5", children: [
+            label && /* @__PURE__ */ jsxs("p", { 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(
+              "p",
+              {
+                id: `cascader-helper-${status}`,
+                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(
+            "p",
+            {
+              id: `cascader-helper-${status}`,
+              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-SERJ3TZE.js.map
+//# sourceMappingURL=chunk-SERJ3TZE.js.map