@mdigital_ui/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,976 @@
+export { Transfer } from './chunk-EYTOKUBM.js';
+export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
+export { table_default as Table } from './chunk-L3SP7GHC.js';
+export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
+export { toggle_default as Toggle } from './chunk-DPOSWW22.js';
+export { tooltip_default as Tooltip } from './chunk-D3JWPGCA.js';
+export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
+export { tree_select_default as TreeSelect } from './chunk-JZCHZ4B3.js';
+export { tree_default as Tree } from './chunk-SAVE5ACL.js';
+export { radio_default as Radio } from './chunk-KTBPIEP2.js';
+export { ribbon_default as Ribbon } from './chunk-C7SXY3ZV.js';
+export { select_default as Select } from './chunk-CLLQDCDR.js';
+export { slider_default as Slider } from './chunk-NNSS366W.js';
+export { stepper_default as Stepper } from './chunk-MLDX3Z67.js';
+export { switch_default as Switch } from './chunk-AOITJRSV.js';
+export { skeleton_default as Skeleton } from './chunk-75XESYGN.js';
+export { multi_select_default as MultiSelect } from './chunk-W7BQYIXF.js';
+export { notification_default as Notification } from './chunk-YZVSDRJD.js';
+export { pagination_default as Pagination } from './chunk-FGWSUPVW.js';
+export { progress_default as Progress } from './chunk-RQBXZKTH.js';
+export { rating_default as Rating } from './chunk-FYHQDFKE.js';
+export { radio_group_default as RadioGroup } from './chunk-DOKTHDG3.js';
+export { empty_default as Empty } from './chunk-ROR4E6IE.js';
+export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
+export { image_default as Image } from './chunk-XMAH5PDW.js';
+export { input_otp_default as InputOTP } from './chunk-R225A5II.js';
+export { input_group_default as InputGroup } from './chunk-KBCBVH7B.js';
+export { input_password_default as InputPassword } from './chunk-E2CYDDYC.js';
+export { input_default as Input } from './chunk-2JGAYDZR.js';
+export { kbd_default as Kbd } from './chunk-OQANRZPV.js';
+export { checkbox_default as Checkbox } from './chunk-H2HIBD5Y.js';
+export { checkbox_group_default as CheckboxGroup } from './chunk-RPAQAZTI.js';
+export { collapse_default as Collapse } from './chunk-SOV4PE3P.js';
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-4P5EMRFI.js';
+export { modal_default as Modal } from './chunk-5VCGW53O.js';
+export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-7AEGBABZ.js';
+export { descriptions_default as Descriptions } from './chunk-S5XJXU52.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-AWPKZYHT.js';
+import { dropdown_default } from './chunk-KNQ7UQ2W.js';
+export { dropdown_default as Dropdown } from './chunk-KNQ7UQ2W.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-3PFA3YG6.js';
+export { badge_default as Badge } from './chunk-FTJOSVTY.js';
+export { accordion_default as Accordion } from './chunk-CWHFK7ZC.js';
+export { button_default as Button } from './chunk-LBJG2UWT.js';
+export { spinner_default as Spinner } from './chunk-J3G5WWGR.js';
+import { textColorVariants } from './chunk-5UEWVFF6.js';
+export { buttonColors, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createLinkColorVariants, createOutlineColorVariants, createSoftColorVariants, createSolidColorVariants, extendedComponentSizeVariants, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, iconColorClasses, textColorVariants } from './chunk-5UEWVFF6.js';
+export { card_default as Card } from './chunk-XOBGEMQY.js';
+export { carousel_default as Carousel } from './chunk-4OMLQCUV.js';
+export { cascader_default as Cascader } from './chunk-SERJ3TZE.js';
+export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-BP434VYV.js';
+import { cn, iconSizes, getValidationStatus, statusMessageVariants } from './chunk-YNNAOXU5.js';
+export { cn, getValidationStatus, iconSizes } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import { ChevronRight, MoreHorizontal, MoreVertical, Check, Copy, Image, Upload as Upload$1, File, X, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
+import React5, { useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var BreadcrumbContext = React5.createContext({});
+var breadcrumbVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Breadcrumb = React5.memo(
+  ({
+    children,
+    items,
+    color = "default",
+    size = "md",
+    separator,
+    className
+  }) => {
+    const content = items?.length ? /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.ellipsis ? /* @__PURE__ */ jsx(
+          BreadcrumbEllipsis,
+          {
+            orientation: item.ellipsisOrientation || "horizontal",
+            items: item.ellipsisItems || [],
+            size
+          }
+        ) : isLast ? /* @__PURE__ */ jsx(
+          BreadcrumbPage,
+          {
+            leftIcon: item.leftIcon,
+            rightIcon: item.rightIcon,
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          BreadcrumbLink,
+          {
+            href: item.href || "",
+            onClick: item.onClick,
+            leftIcon: item.leftIcon,
+            rightIcon: item.rightIcon,
+            children: item.label
+          }
+        ) }),
+        !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, { size, children: separator })
+      ] }, index);
+    }) }) : children;
+    return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: { color, size }, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": "breadcrumb",
+        className: cn(
+          breadcrumbVariants({ size }),
+          textColorVariants({ color }),
+          className
+        ),
+        children: content
+      }
+    ) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React5.memo(
+  ({ children, className }) => {
+    return /* @__PURE__ */ jsx("ol", { className: cn("flex items-center gap-1.5", className), children });
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React5.memo(
+  ({ children, className }) => {
+    return /* @__PURE__ */ jsx("li", { className: cn("inline-flex items-center gap-1.5", className), children });
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React5.memo(
+  ({ children, href, onClick, leftIcon, rightIcon, className }) => {
+    const handleClick = (e) => {
+      if (onClick) {
+        e.preventDefault();
+        onClick();
+      }
+    };
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+      children,
+      rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          onClick: handleClick,
+          className: cn(
+            "inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer",
+            className
+          ),
+          children: content
+        }
+      );
+    }
+    if (onClick) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClick,
+          className: cn(
+            "inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer",
+            className
+          ),
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-1.5", className), children: content });
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React5.memo(
+  ({ children, leftIcon, rightIcon, className }) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "aria-current": "page",
+        className: cn(
+          "inline-flex items-center gap-1.5 font-medium",
+          className
+        ),
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = React5.memo(
+  ({ children, className, size = "md" }) => {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-text-muted", className), children: children ?? /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes[size] }) });
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = React5.memo(
+  ({ orientation = "horizontal", items, children, className, size = "md" }) => {
+    const Icon = orientation === "horizontal" ? MoreHorizontal : MoreVertical;
+    const ellipsisButton = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn(
+          "flex items-center justify-center",
+          items || children ? "cursor-pointer" : "",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: iconSizes[size] }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+        ]
+      }
+    );
+    if (items || children) {
+      const dropdownItems = (items || []).map((item) => ({
+        label: item.label || "",
+        value: item.label || "",
+        onClick: item.onClick || (() => {
+          if (item.href) {
+            window.location.href = item.href;
+          }
+        })
+      }));
+      return /* @__PURE__ */ jsx(dropdown_default, { items: dropdownItems, children: ellipsisButton });
+    }
+    return ellipsisButton;
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+var breadcrumbs_default = Breadcrumb;
+var buttonGroupVariants = cva("inline-flex", {
+  variants: {
+    vertical: {
+      true: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:border-b-0 [&>*:not(:last-child)]:rounded-b-none",
+      false: "flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none"
+    },
+    spacing: {
+      true: "gap-2",
+      false: "gap-0"
+    },
+    fullWidth: {
+      true: "w-full [&>*]:flex-1",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    vertical: false,
+    fullWidth: false
+  }
+});
+var ButtonGroup = React5.memo(
+  ({
+    vertical = false,
+    spacing = false,
+    fullWidth = false,
+    className,
+    children,
+    ref,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          buttonGroupVariants({ vertical, spacing, fullWidth }),
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var button_group_default = ButtonGroup;
+var clipboardVariants = cva(
+  "inline-flex items-center justify-between gap-2 rounded-md font-medium transition-all cursor-pointer border",
+  {
+    variants: {
+      size: {
+        xs: "px-2 py-1 text-xs",
+        sm: "px-3 py-1.5 text-xs",
+        md: "px-4 py-2 text-sm",
+        lg: "px-5 py-2.5 text-lg"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var colorStyles = {
+  default: {
+    default: "bg-background border-border text-text-primary hover:bg-surface",
+    solid: "bg-surface border-border text-text-primary hover:bg-surface/80",
+    soft: "bg-surface/50 border-border text-text-primary hover:bg-surface"
+  },
+  primary: {
+    default: "bg-background border-primary text-primary hover:bg-primary/10",
+    solid: "bg-primary border-primary text-background hover:bg-primary/90",
+    soft: "bg-primary/10 border-primary/30 text-primary hover:bg-primary/20"
+  },
+  secondary: {
+    default: "bg-background border-secondary text-secondary hover:bg-secondary/10",
+    solid: "bg-secondary border-secondary text-background hover:bg-secondary/90",
+    soft: "bg-secondary/10 border-secondary/30 text-secondary hover:bg-secondary/20"
+  },
+  accent: {
+    default: "bg-background border-accent text-accent hover:bg-accent/10",
+    solid: "bg-accent border-accent text-background hover:bg-accent/90",
+    soft: "bg-accent/10 border-accent/30 text-accent hover:bg-accent/20"
+  },
+  success: {
+    default: "bg-background border-success text-success hover:bg-success/10",
+    solid: "bg-success border-success text-background hover:bg-success/90",
+    soft: "bg-success/10 border-success/30 text-success hover:bg-success/20"
+  },
+  error: {
+    default: "bg-background border-error text-error hover:bg-error/10",
+    solid: "bg-error border-error text-background hover:bg-error/90",
+    soft: "bg-error/10 border-error/30 text-error hover:bg-error/20"
+  },
+  warning: {
+    default: "bg-background border-warning text-warning hover:bg-warning/10",
+    solid: "bg-warning border-warning text-background hover:bg-warning/90",
+    soft: "bg-warning/10 border-warning/30 text-warning hover:bg-warning/20"
+  },
+  info: {
+    default: "bg-background border-info text-info hover:bg-info/10",
+    solid: "bg-info border-info text-background hover:bg-info/90",
+    soft: "bg-info/10 border-info/30 text-info hover:bg-info/20"
+  }
+};
+var Clipboard = React5.memo(
+  ({
+    value,
+    color = "default",
+    size = "md",
+    variant = "default",
+    showValue = true,
+    successDuration = 2e3,
+    onCopy,
+    className
+  }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => {
+          setCopied(false);
+        }, successDuration);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: handleCopy,
+        className: cn(
+          clipboardVariants({ size }),
+          colorStyles[color][variant],
+          className
+        ),
+        children: [
+          showValue && /* @__PURE__ */ jsx("span", { className: "font-mono truncate", children: value }),
+          copied ? /* @__PURE__ */ jsx(Check, { className: cn(iconSizes[size], "flex-shrink-0") }) : /* @__PURE__ */ jsx(Copy, { className: cn(iconSizes[size], "flex-shrink-0") })
+        ]
+      }
+    );
+  }
+);
+Clipboard.displayName = "Clipboard";
+var clipboard_default = Clipboard;
+var gridVariants = cva("w-full grid", {
+  variants: {
+    gap: {
+      xs: "gap-2",
+      sm: "gap-4",
+      md: "gap-6",
+      lg: "gap-8"
+    },
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 md:grid-cols-2",
+      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+      5: "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
+      6: "grid-cols-1 md:grid-cols-3 lg:grid-cols-6"
+    }
+  },
+  defaultVariants: {
+    gap: "md",
+    columns: 3
+  }
+});
+var Grid = React5.memo(
+  ({ children, columns = 3, gap = "md", className }) => {
+    return /* @__PURE__ */ jsx("div", { className: cn(gridVariants({ gap, columns }), className), children });
+  }
+);
+Grid.displayName = "Grid";
+var grid_default = Grid;
+var uploadButtonVariants = cva(
+  "inline-flex cursor-pointer outline-none border items-center justify-center gap-2 font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+  {
+    variants: {
+      color: {
+        primary: "border-primary text-white bg-primary hover:bg-primary/90",
+        secondary: "border-secondary text-white bg-secondary hover:bg-secondary/90",
+        success: "border-success text-white bg-success hover:bg-success/90",
+        error: "border-error text-white bg-error hover:bg-error/90",
+        accent: "border-accent text-white bg-accent hover:bg-accent/90",
+        warning: "border-warning text-white bg-warning hover:bg-warning/90",
+        info: "border-info text-white bg-info hover:bg-info/90"
+      },
+      size: {
+        xs: "h-[var(--button-height-xs)] px-[var(--button-padding-x-xs)] text-xs",
+        sm: "h-[var(--button-height-sm)] px-[var(--button-padding-x-sm)] text-sm",
+        md: "h-[var(--button-height-md)] px-[var(--button-padding-x-md)] text-base",
+        lg: "h-[var(--button-height-lg)] px-[var(--button-padding-x-lg)] text-lg"
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  }
+);
+var uploadDropzoneVariants = cva(
+  "relative border-2 border-dashed rounded-lg transition-all duration-200 cursor-pointer",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary hover:bg-primary/5",
+        dragActive: "border-primary bg-primary/10",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "p-2",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var uploadDraggerVariants = cva(
+  "relative border-2 border-dashed rounded-lg transition-all duration-200 cursor-pointer flex flex-col items-center justify-center gap-2",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary hover:bg-primary/5",
+        dragActive: "border-primary bg-primary/10 scale-[1.02]",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "min-h-[100px] p-3",
+        sm: "min-h-[120px] p-4",
+        md: "min-h-[160px] p-6",
+        lg: "min-h-[200px] p-8"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var uploadAvatarVariants = cva(
+  "relative overflow-hidden rounded-full border-2 border-dashed cursor-pointer transition-all duration-200 flex items-center justify-center",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary",
+        dragActive: "border-primary bg-primary/10",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "w-12 h-12",
+        sm: "w-16 h-16",
+        md: "w-24 h-24",
+        lg: "w-32 h-32"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var uploadPictureVariants = cva(
+  "relative overflow-hidden rounded-md border-2 border-dashed cursor-pointer transition-all duration-200 flex items-center justify-center",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary",
+        dragActive: "border-primary bg-primary/10",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "w-16 h-16",
+        sm: "w-24 h-24",
+        md: "w-32 h-32",
+        lg: "w-40 h-40"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+var isImageFile = (file) => {
+  const type = file.type || "";
+  return type.startsWith("image/");
+};
+var generateUID = () => {
+  return `upload-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+};
+var Upload = React5.memo(
+  ({
+    variant = "button",
+    size = "md",
+    color = "primary",
+    label,
+    helperText,
+    error,
+    warning,
+    info,
+    success,
+    accept,
+    multiple = false,
+    maxSize,
+    maxCount,
+    fileList,
+    defaultFileList = [],
+    showUploadList = true,
+    listType = "text",
+    disabled = false,
+    buttonText = "Upload File",
+    dragText = "Click or drag file to this area to upload",
+    dragHint = "Support for a single or bulk upload",
+    onChange,
+    onRemove,
+    beforeUpload,
+    customRequest,
+    onError,
+    className,
+    ref,
+    ...props
+  }) => {
+    const [internalFileList, setInternalFileList] = React5.useState(defaultFileList);
+    const [dragActive, setDragActive] = React5.useState(false);
+    const inputRef = React5.useRef(null);
+    const currentFileList = fileList !== void 0 ? fileList : internalFileList;
+    const { status, message: helperMessage } = getValidationStatus({
+      error,
+      warning,
+      info,
+      success,
+      helperText
+    });
+    const validateFile = React5.useCallback(
+      (file) => {
+        if (maxSize && file.size > maxSize) {
+          return `File size exceeds ${formatFileSize(maxSize)}`;
+        }
+        if (maxCount && currentFileList.length >= maxCount) {
+          return `Maximum ${maxCount} file${maxCount > 1 ? "s" : ""} allowed`;
+        }
+        return null;
+      },
+      [maxSize, maxCount, currentFileList.length]
+    );
+    const handleFiles = React5.useCallback(
+      async (files) => {
+        if (!files || files.length === 0) return;
+        const newFiles = [];
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i];
+          if (!file) continue;
+          const validationError = validateFile(file);
+          if (validationError) {
+            onError?.(validationError, file);
+            continue;
+          }
+          if (beforeUpload) {
+            const shouldUpload = await beforeUpload(file);
+            if (!shouldUpload) continue;
+          }
+          const uploadFile = {
+            uid: generateUID(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            status: "uploading",
+            percent: 0
+          };
+          newFiles.push(uploadFile);
+          if (customRequest) {
+            customRequest({
+              file,
+              onProgress: (percent) => {
+                setInternalFileList(
+                  (prev) => prev.map(
+                    (f) => f.uid === uploadFile.uid ? { ...f, percent } : f
+                  )
+                );
+              },
+              onSuccess: (response) => {
+                setInternalFileList(
+                  (prev) => prev.map(
+                    (f) => f.uid === uploadFile.uid ? {
+                      ...f,
+                      status: "done",
+                      percent: 100,
+                      response
+                    } : f
+                  )
+                );
+              },
+              onError: (err) => {
+                setInternalFileList(
+                  (prev) => prev.map(
+                    (f) => f.uid === uploadFile.uid ? { ...f, status: "error", error: err } : f
+                  )
+                );
+              }
+            });
+          } else {
+            if (file && isImageFile(file)) {
+              uploadFile.thumbUrl = URL.createObjectURL(file);
+            }
+            uploadFile.status = "done";
+            uploadFile.percent = 100;
+          }
+        }
+        const updatedList = multiple ? [...currentFileList, ...newFiles] : newFiles;
+        if (fileList === void 0) {
+          setInternalFileList(updatedList);
+        }
+        onChange?.(updatedList);
+      },
+      [
+        validateFile,
+        beforeUpload,
+        customRequest,
+        onError,
+        multiple,
+        currentFileList,
+        fileList,
+        onChange
+      ]
+    );
+    const handleInputChange = React5.useCallback(
+      (e) => {
+        handleFiles(e.target.files);
+        e.target.value = "";
+      },
+      [handleFiles]
+    );
+    const handleRemove = React5.useCallback(
+      (file) => {
+        const updatedList = currentFileList.filter((f) => f.uid !== file.uid);
+        if (fileList === void 0) {
+          setInternalFileList(updatedList);
+        }
+        onRemove?.(file);
+        onChange?.(updatedList);
+      },
+      [currentFileList, fileList, onRemove, onChange]
+    );
+    const handleClick = React5.useCallback(() => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    }, [disabled]);
+    const handleDragEnter = React5.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(true);
+    }, []);
+    const handleDragLeave = React5.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+    }, []);
+    const handleDragOver = React5.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const handleDrop = React5.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (!disabled) {
+          handleFiles(e.dataTransfer.files);
+        }
+      },
+      [disabled, handleFiles]
+    );
+    const renderFileList = () => {
+      if (!showUploadList || currentFileList.length === 0) return null;
+      if (listType === "picture-card") {
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: currentFileList.map((file) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative w-24 h-24 rounded-md border border-border overflow-hidden group",
+            children: [
+              file.thumbUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: file.thumbUrl,
+                  alt: file.name,
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-surface", children: /* @__PURE__ */ jsx(File, { className: "w-8 h-8 text-text-muted" }) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleRemove(file),
+                  className: "text-white hover:text-error transition-colors",
+                  children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+                }
+              ) }),
+              file.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 text-white animate-spin" }) })
+            ]
+          },
+          file.uid
+        )) });
+      }
+      return /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1", children: currentFileList.map((file) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between p-2 rounded-md bg-surface hover:bg-surface/80 transition-colors",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+              listType === "picture" && file.thumbUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: file.thumbUrl,
+                  alt: file.name,
+                  className: "w-8 h-8 rounded object-cover"
+                }
+              ) : /* @__PURE__ */ jsx(
+                File,
+                {
+                  className: cn("text-text-muted shrink-0", iconSizes[size])
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-text-primary truncate", children: file.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-muted", children: [
+                  formatFileSize(file.size),
+                  file.status === "uploading" && file.percent !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+                    " - ",
+                    file.percent,
+                    "%"
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              file.status === "uploading" && /* @__PURE__ */ jsx(
+                Loader2,
+                {
+                  className: cn("text-primary animate-spin", iconSizes[size])
+                }
+              ),
+              file.status === "done" && /* @__PURE__ */ jsx(
+                CheckCircle,
+                {
+                  className: cn("text-success", iconSizes[size])
+                }
+              ),
+              file.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: cn("text-error", iconSizes[size]) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleRemove(file),
+                  className: "text-text-muted hover:text-error transition-colors",
+                  children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+                }
+              )
+            ] })
+          ]
+        },
+        file.uid
+      )) });
+    };
+    const currentFile = currentFileList[0];
+    const renderUploadArea = () => {
+      const dragStatus = dragActive ? "dragActive" : disabled ? "disabled" : status === "error" ? "error" : "default";
+      switch (variant) {
+        case "button":
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleClick,
+              disabled,
+              className: cn(uploadButtonVariants({ color, size }), className),
+              children: [
+                /* @__PURE__ */ jsx(Upload$1, { className: iconSizes[size] }),
+                buttonText
+              ]
+            }
+          );
+        case "dropzone":
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: handleClick,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              className: cn(
+                uploadDropzoneVariants({ status: dragStatus, size }),
+                className
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Upload$1,
+                  {
+                    className: cn("text-text-muted", iconSizes[size])
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-text-primary font-medium", children: dragText }),
+                  dragHint && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-muted mt-0.5", children: dragHint })
+                ] })
+              ] })
+            }
+          );
+        case "dragger":
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onClick: handleClick,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              className: cn(
+                uploadDraggerVariants({ status: dragStatus, size }),
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Upload$1, { className: "w-10 h-10 text-primary" }),
+                /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-text-primary", children: dragText }),
+                dragHint && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-muted", children: dragHint })
+              ]
+            }
+          );
+        case "avatar":
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: handleClick,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              className: cn(
+                uploadAvatarVariants({ status: dragStatus, size }),
+                className
+              ),
+              children: currentFile?.thumbUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: currentFile.thumbUrl,
+                  alt: "avatar",
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx(Image, { className: "w-8 h-8 text-text-muted" })
+            }
+          );
+        case "picture":
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: handleClick,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              className: cn(
+                uploadPictureVariants({ status: dragStatus, size }),
+                className
+              ),
+              children: currentFile?.thumbUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: currentFile.thumbUrl,
+                  alt: "preview",
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx(Image, { className: "w-8 h-8 text-text-muted" })
+            }
+          );
+        default:
+          return null;
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: handleInputChange,
+              disabled,
+              className: "hidden",
+              ...props
+            }
+          ),
+          label && /* @__PURE__ */ jsx("label", { className: "block mb-1", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-muted", children: label }) }),
+          renderUploadArea(),
+          renderFileList(),
+          helperMessage && /* @__PURE__ */ jsx("p", { className: cn(statusMessageVariants({ status }), "mt-1"), children: helperMessage })
+        ]
+      }
+    );
+  }
+);
+Upload.displayName = "Upload";
+var upload_default = Upload;
+
+export { breadcrumbs_default as Breadcrumbs, button_group_default as ButtonGroup, clipboard_default as Clipboard, grid_default as Grid, upload_default as Upload };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map