@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/index.js

@@ -1,75 +1,3035 @@
-export { upload_default as Upload } from './chunk-3BZE6BBJ.js';
-export { timeline_default as Timeline } from './chunk-LOYLJRCF.js';
-export { ToastProvider, useToast } from './chunk-OLTQAMV2.js';
-export { toggle_default as Toggle } from './chunk-6YOOKE6C.js';
-export { tooltip_default as Tooltip, TooltipProvider } from './chunk-HCOTO5WX.js';
-export { Transfer } from './chunk-GJPZOMFE.js';
-export { tree_select_default as TreeSelect } from './chunk-ON2CMF6J.js';
-export { tree_default as Tree } from './chunk-3BIV3QE2.js';
-export { stepper_default as Stepper } from './chunk-FZSCLZF6.js';
-export { switch_default as Switch } from './chunk-6LYRMQOI.js';
-export { EditableCell, table_default as Table, TableActions, TableCell, TableHeaderCell, TableRow, TableSkeleton } from './chunk-TLNHWOQQ.js';
-export { toggle_group_default as ToggleGroup } from './chunk-ERRZ2CSG.js';
-export { tabs_default as Tabs } from './chunk-6G3BMY4N.js';
-export { tag_default as Tag } from './chunk-ZIYA7TGX.js';
-export { textarea_default as Textarea } from './chunk-6JGNJI5T.js';
-export { ThemeProvider, themeScript, useTheme } from './chunk-5PUATOLR.js';
-export { progress_default as Progress } from './chunk-2TLOWZE4.js';
-export { radio_default as Radio } from './chunk-R3TLU26W.js';
-export { radio_group_default as RadioGroup } from './chunk-SGRACNBP.js';
-export { rating_default as Rating } from './chunk-7UCNBMCV.js';
-export { scroll_area_default as ScrollArea } from './chunk-YJOLLSHH.js';
-export { select_default as Select } from './chunk-GVVP5TZM.js';
-export { skeleton_default as Skeleton } from './chunk-YS5AIY4A.js';
-export { slider_default as Slider } from './chunk-ZJNGZCRB.js';
-export { menubar_default as Menubar } from './chunk-DUIL5BYS.js';
-export { multi_select_default as MultiSelect } from './chunk-H6G4BUPA.js';
-import './chunk-WRSG7WU5.js';
-export { NavigationMenu } from './chunk-D4SUSZDN.js';
-export { notification_default as Notification } from './chunk-X3YNHX77.js';
-export { number_input_default as NumberInput } from './chunk-JWTWPZ32.js';
-export { pagination_default as Pagination } from './chunk-HUXODBIO.js';
-export { grid_default as Grid } from './chunk-4FFVNUTK.js';
-export { image_default as Image } from './chunk-HECAAILV.js';
-export { input_group_default as InputGroup, InputGroupAddon, InputGroupInput } from './chunk-ROA7BYGB.js';
-export { input_otp_default as InputOTP } from './chunk-KJTMZJ7V.js';
-export { input_password_default as InputPassword } from './chunk-6BAP6QUT.js';
-export { input_default as Input } from './chunk-KH577UDI.js';
-export { kbd_default as Kbd } from './chunk-CN74CNAN.js';
-export { link_default as Link } from './chunk-ONGJXAYQ.js';
-export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-OQFYIKWR.js';
-export { descriptions_default as Descriptions } from './chunk-BVO2BNFG.js';
-export { divider_default as Divider } from './chunk-VOODO2ZE.js';
-export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-674JC24S.js';
-export { empty_default as Empty } from './chunk-2WZVD7P3.js';
-export { fetching_overlay_default as FetchingOverlay } from './chunk-EHWXPH76.js';
-export { float_input_default as FloatInput } from './chunk-GOLARX5K.js';
-export { carousel_default as Carousel } from './chunk-N2WHJ3FI.js';
-export { cascader_default as Cascader } from './chunk-L5UYN5LX.js';
-export { checkbox_default as Checkbox } from './chunk-I32ZQUYY.js';
-export { checkbox_group_default as CheckboxGroup } from './chunk-2PNLIQYM.js';
-export { clipboard_default as Clipboard } from './chunk-3PWILVOE.js';
-export { collapse_default as Collapse } from './chunk-BPRCBPVJ.js';
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-G6NVGBYZ.js';
-export { modal_default as Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, Modal as ModalRoot, ModalTitle, ModalTrigger } from './chunk-YXLIGJTN.js';
-export { context_menu_default as ContextMenu, ContextMenuContent } from './chunk-O3V3BTIJ.js';
-export { accordion_default as Accordion } from './chunk-EZGK67T6.js';
-export { Avatar, AvatarGroup } from './chunk-LX4FDH4J.js';
-export { badge_default as Badge } from './chunk-POLVJ36Y.js';
-export { breadcrumbs_default as Breadcrumbs } from './chunk-64NHVOZS.js';
-export { dropdown_default as Dropdown } from './chunk-UTWQ2FZK.js';
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-C5IGZLIT.js';
-export { button_default as Button } from './chunk-RFHTC6AH.js';
-export { spinner_default as Spinner } from './chunk-Y4XAXZHB.js';
-export { RippleContainer, useRipple } from './chunk-OFUPJH35.js';
-export { button_group_default as ButtonGroup } from './chunk-6HGUDHHE.js';
-export { card_default as Card } from './chunk-764UKE6X.js';
-export { bgSkeletonColorClasses, buttonColors, checkboxBorderColorClasses, checkedColorClasses, componentColors, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createKbdColorVariants, createKbdOutlineColorVariants, createKbdSoftColorVariants, createKbdSolidColorVariants, createLinkColorVariants, createNotificationColorVariants, createNotificationOutlineColorVariants, createNotificationSoftColorVariants, createNotificationSolidColorVariants, createOutlineColorVariants, createPopoverColorVariants, createPopoverDefaultColorVariants, createPopoverSoftColorVariants, createPopoverSolidColorVariants, createSoftColorVariants, createSolidColorVariants, createTooltipSoftColorVariants, focusRingColorClasses, radioCheckedColorClasses, switchTrackColorClasses, textColorClasses, textColorVariants, tooltipSolidColorClasses } from './chunk-POXI7JJ4.js';
-export { cn, getValidationStatus, iconSizes, statusMessageVariants } from './chunk-NGYLRX6F.js';
-import { useState, useEffect, useRef, useCallback } from 'react';
+export { upload_default as Upload } from './chunk-CUXQZRDI.js';
+export { ToastProvider, useToast } from './chunk-BGMYX7L5.js';
+export { toggle_default as Toggle } from './chunk-I7HJBHQU.js';
+export { timeline_default as Timeline } from './chunk-JIXINKUJ.js';
+export { tooltip_default as Tooltip, TooltipProvider } from './chunk-253JZOYG.js';
+export { Transfer } from './chunk-3XOHSE3X.js';
+export { tree_select_default as TreeSelect } from './chunk-TBKPQOXF.js';
+export { tree_default as Tree } from './chunk-LXHFGQOI.js';
+export { stepper_default as Stepper } from './chunk-3D77IPKB.js';
+export { switch_default as Switch } from './chunk-5MBKTMDW.js';
+export { EditableCell, table_default as Table, TableActions, TableCell, TableHeaderCell, TableRow, TableSkeleton } from './chunk-4ZXHLPRS.js';
+export { toggle_group_default as ToggleGroup } from './chunk-XAM5EKOS.js';
+export { tabs_default as Tabs } from './chunk-I5AD247M.js';
+export { tag_default as Tag } from './chunk-NMP4HY6M.js';
+export { textarea_default as Textarea } from './chunk-7RT65ZGV.js';
+export { ThemeProvider, themeScript, useTheme } from './chunk-XCK62GVU.js';
+export { progress_default as Progress } from './chunk-NTCAZ2LF.js';
+export { radio_default as Radio } from './chunk-UFC3RGIN.js';
+export { radio_group_default as RadioGroup } from './chunk-STAYOHDI.js';
+export { rating_default as Rating } from './chunk-TQEMGWZ2.js';
+export { scroll_area_default as ScrollArea } from './chunk-WQT24BGG.js';
+export { select_default as Select } from './chunk-HVHQA34X.js';
+export { skeleton_default as Skeleton } from './chunk-SFP77VS3.js';
+export { slider_default as Slider } from './chunk-HR5TGNOF.js';
+export { menubar_default as Menubar } from './chunk-BS4PZPY6.js';
+export { multi_select_default as MultiSelect } from './chunk-XOEEAMMY.js';
+import './chunk-HJITFPBT.js';
+export { NavigationMenu } from './chunk-S6HO7HUY.js';
+export { notification_default as Notification } from './chunk-U4JPTWK6.js';
+export { number_input_default as NumberInput } from './chunk-X7MF3TIF.js';
+export { pagination_default as Pagination } from './chunk-PB5VGXS5.js';
+export { grid_default as Grid } from './chunk-BNHRUHI4.js';
+export { image_default as Image } from './chunk-HRVOTFU4.js';
+export { input_group_default as InputGroup, InputGroupAddon, InputGroupInput } from './chunk-3YP7HY3Y.js';
+export { input_otp_default as InputOTP } from './chunk-ADZWWBAX.js';
+export { input_password_default as InputPassword } from './chunk-LJOQ2C5W.js';
+export { input_default as Input } from './chunk-W5VLFE4U.js';
+export { kbd_default as Kbd } from './chunk-5SEVPU6C.js';
+export { link_default as Link } from './chunk-XMBZBXXS.js';
+export { context_menu_default as ContextMenu, ContextMenuContent } from './chunk-Z3DIBMBQ.js';
+export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-BKLJDEUX.js';
+export { descriptions_default as Descriptions } from './chunk-PRDJLQLB.js';
+export { divider_default as Divider } from './chunk-JFTSWOGE.js';
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-DDZCRCTQ.js';
+export { fetching_overlay_default as FetchingOverlay } from './chunk-XBXPY7U3.js';
+export { float_input_default as FloatInput } from './chunk-TDNPACQD.js';
+export { card_default as Card } from './chunk-OGB5QPNZ.js';
+export { carousel_default as Carousel } from './chunk-QEAALOJC.js';
+export { cascader_default as Cascader } from './chunk-LWYZCSX4.js';
+export { checkbox_default as Checkbox } from './chunk-A4MYCEGM.js';
+export { checkbox_group_default as CheckboxGroup } from './chunk-ON76IMMI.js';
+export { collapse_default as Collapse } from './chunk-OJAHIPPP.js';
+export { useControllable } from './chunk-PQOIW5CM.js';
+export { clipboard_default as Clipboard } from './chunk-J2WIZULN.js';
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-WG5AYAC6.js';
+export { modal_default as Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, Modal as ModalRoot, ModalTitle, ModalTrigger } from './chunk-AFW2ORFT.js';
+export { accordion_default as Accordion } from './chunk-4HKPDSA6.js';
+export { alert_default as Alert } from './chunk-C65SCJD6.js';
+export { Avatar, AvatarGroup } from './chunk-HSMO2BR4.js';
+export { badge_default as Badge } from './chunk-C32HL4XU.js';
+export { breadcrumbs_default as Breadcrumbs } from './chunk-FU5Q4WVX.js';
+export { dropdown_default as Dropdown } from './chunk-GOBUFGGJ.js';
+export { useMenuNavigation } from './chunk-NZHKNUGE.js';
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-ROQGBDET.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-ROQGBDET.js';
+export { button_default as Button } from './chunk-SJLH5ZDW.js';
+export { spinner_default as Spinner } from './chunk-RRPMZYVN.js';
+export { RippleContainer, useRipple } from './chunk-4TEZWGX7.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+export { buttonColorVars, colorVars } from './chunk-G6QIIWKU.js';
+export { button_group_default as ButtonGroup } from './chunk-L5BU2QTI.js';
+import { cn, iconSizes, statusMessageVariants } from './chunk-RAS6HUEI.js';
+export { cn, getValidationStatus, iconSizes, statusMessageVariants } from './chunk-RAS6HUEI.js';
+import React4, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Loader2, X, ChevronDown, ChevronLeft, ChevronRight, ArrowUp, Plus, MoreVertical } from 'lucide-react';
+import { Group, Panel, Separator } from 'react-resizable-panels';
 
 // src/styles/themes/presets/index.ts
 var themePresets = ["corporate", "vibrant", "minimal"];
+var sizeClasses = {
+  xs: { link: "text-xs py-0.5 pl-3", indicator: "w-0.5" },
+  sm: { link: "text-sm py-0.5 pl-3", indicator: "w-0.5" },
+  md: { link: "text-sm py-1 pl-4", indicator: "w-0.5" },
+  lg: { link: "text-base py-1 pl-5", indicator: "w-1" }
+};
+function flattenIds(list) {
+  return list.flatMap((item) => [item.id, ...item.children ? flattenIds(item.children) : []]);
+}
+function getScrollContainer(getContainer) {
+  if (getContainer) return getContainer();
+  return typeof window !== "undefined" ? window : null;
+}
+function getContainerRect(container) {
+  if (!container || container === window || container instanceof Window) return { top: 0 };
+  return container.getBoundingClientRect();
+}
+function scrollTo(container, top) {
+  container.scrollTo({ top, behavior: "smooth" });
+}
+var Anchor = React4.memo(
+  ({
+    items,
+    offset = 0,
+    targetOffset = 0,
+    size = "md",
+    affix = false,
+    affixTop = 0,
+    getContainer,
+    className,
+    classNames,
+    onChange
+  }) => {
+    const [activeId, setActiveId] = useState("");
+    const [indicatorTop, setIndicatorTop] = useState(0);
+    const [indicatorHeight, setIndicatorHeight] = useState(0);
+    const navRef = useRef(null);
+    const linkRefs = useRef(/* @__PURE__ */ new Map());
+    const isScrolling = useRef(false);
+    const allIds = flattenIds(items);
+    const updateActive = useCallback(() => {
+      if (isScrolling.current) return;
+      if (typeof window === "undefined") return;
+      const container = getScrollContainer(getContainer);
+      const containerTop = getContainerRect(container).top;
+      let current = "";
+      for (const id of allIds) {
+        const el = document.getElementById(id);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          const relativeTop = rect.top - containerTop;
+          if (relativeTop <= offset + 10) current = id;
+        }
+      }
+      if (current && current !== activeId) {
+        setActiveId(current);
+        onChange?.(current);
+      }
+    }, [allIds, offset, activeId, onChange, getContainer]);
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      const container = getScrollContainer(getContainer);
+      const target = container instanceof Window ? window : container;
+      target.addEventListener("scroll", updateActive, { passive: true });
+      updateActive();
+      return () => target.removeEventListener("scroll", updateActive);
+    }, [updateActive, getContainer]);
+    useEffect(() => {
+      if (!activeId || !navRef.current) return;
+      const linkEl = linkRefs.current.get(activeId);
+      if (linkEl) {
+        const navRect = navRef.current.getBoundingClientRect();
+        const linkRect = linkEl.getBoundingClientRect();
+        setIndicatorTop(linkRect.top - navRect.top);
+        setIndicatorHeight(linkRect.height);
+      }
+    }, [activeId]);
+    const handleClick = useCallback(
+      (e, id) => {
+        e.preventDefault();
+        const el = document.getElementById(id);
+        if (!el) return;
+        const container = getScrollContainer(getContainer);
+        isScrolling.current = true;
+        setActiveId(id);
+        onChange?.(id);
+        if (container instanceof Window) {
+          const y = el.getBoundingClientRect().top + window.scrollY - targetOffset;
+          scrollTo(container, y);
+        } else {
+          const y = el.offsetTop - targetOffset;
+          scrollTo(container, y);
+        }
+        setTimeout(() => {
+          isScrolling.current = false;
+        }, 800);
+      },
+      [targetOffset, onChange, getContainer]
+    );
+    const s = sizeClasses[size];
+    const depthPadding = { 0: "", 1: "pl-6", 2: "pl-10", 3: "pl-14" };
+    const renderLink = (item, depth = 0) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref: (el) => {
+            if (el) linkRefs.current.set(item.id, el);
+          },
+          href: `#${item.id}`,
+          onClick: (e) => handleClick(e, item.id),
+          "data-slot": "link",
+          className: cn(
+            "anchor_link",
+            "block text-text-secondary hover:text-text-primary transition-colors truncate",
+            s.link,
+            depth > 0 && (depthPadding[depth] || "pl-14"),
+            activeId === item.id && "text-primary font-medium",
+            activeId === item.id && classNames?.activeLink,
+            classNames?.link
+          ),
+          children: item.label
+        }
+      ),
+      item.children?.map((child) => renderLink(child, depth + 1))
+    ] }, item.id);
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref: navRef,
+        "data-slot": "root",
+        className: cn(
+          "anchor_root",
+          "relative",
+          affix && "sticky",
+          classNames?.root,
+          className
+        ),
+        style: affix ? { top: affixTop } : void 0,
+        "aria-label": "Table of contents",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "indicator",
+              className: cn(
+                "anchor_indicator",
+                "absolute left-0 rounded-full bg-primary transition-all duration-200",
+                s.indicator,
+                classNames?.indicator
+              ),
+              style: {
+                top: indicatorTop,
+                height: indicatorHeight,
+                opacity: activeId ? 1 : 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 bottom-0 w-px bg-border" }),
+          items.map((item) => renderLink(item))
+        ]
+      }
+    );
+  }
+);
+Anchor.displayName = "Anchor";
+var anchor_default = Anchor;
+var inputVariants = cva(
+  "w-full flex items-center rounded-md bg-background text-text-primary border outline-none transition-colors",
+  {
+    variants: {
+      status: {
+        default: "border-border focus-within:border-slot hover:border-slot-50",
+        primary: "border-slot",
+        secondary: "border-slot",
+        accent: "border-slot",
+        success: "border-slot",
+        error: "border-slot",
+        warning: "border-slot",
+        info: "border-slot"
+      },
+      size: {
+        xs: "h-(--input-height-xs) px-2 text-xs gap-1.5",
+        sm: "h-(--input-height-sm) px-2.5 text-sm gap-2",
+        md: "h-(--input-height-md) px-3 text-base gap-2",
+        lg: "h-(--input-height-lg) px-3.5 text-lg gap-2.5"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md",
+      fullWidth: true,
+      disabled: false
+    }
+  }
+);
+function normalizeOption(opt) {
+  return typeof opt === "string" ? { label: opt, value: opt } : opt;
+}
+var defaultFilter = (query, option) => option.label.toLowerCase().includes(query.toLowerCase());
+var Autocomplete = React4.memo(
+  ({
+    value,
+    defaultValue = "",
+    onChange,
+    onSelect,
+    options: rawOptions,
+    placeholder,
+    label,
+    helperText,
+    error,
+    size = "md",
+    status: statusProp,
+    disabled = false,
+    loading = false,
+    clearable = false,
+    filter = defaultFilter,
+    limit = 10,
+    emptyMessage = "No results",
+    fullWidth = true,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = React4.useState(defaultValue);
+    const [isOpen, setIsOpen] = React4.useState(false);
+    const [highlightIdx, setHighlightIdx] = React4.useState(-1);
+    const inputRef = React4.useRef(null);
+    const listRef = React4.useRef(null);
+    const labelId = React4.useId();
+    const selectingRef = React4.useRef(false);
+    const currentValue = value !== void 0 ? value : internalValue;
+    const status = error ? "error" : statusProp || "default";
+    const options = React4.useMemo(
+      () => rawOptions.map(normalizeOption),
+      [rawOptions]
+    );
+    const filtered = React4.useMemo(() => {
+      if (!currentValue) return options.slice(0, limit);
+      return options.filter((o) => filter(currentValue, o)).slice(0, limit);
+    }, [currentValue, options, filter, limit]);
+    React4.useEffect(() => {
+      setHighlightIdx(-1);
+    }, [filtered.length]);
+    const updateValue = (v) => {
+      if (value === void 0) setInternalValue(v);
+      onChange?.(v);
+    };
+    const open = () => {
+      if (!disabled) setIsOpen(true);
+    };
+    const close = () => {
+      setIsOpen(false);
+      setHighlightIdx(-1);
+    };
+    const handleInputChange = (e) => {
+      updateValue(e.target.value);
+      open();
+    };
+    const handleSelect = (option) => {
+      if (option.disabled) return;
+      updateValue(option.label);
+      onSelect?.(option);
+      close();
+      requestAnimationFrame(() => inputRef.current?.focus());
+    };
+    const handleClear = () => {
+      updateValue("");
+      inputRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isOpen) {
+          open();
+          return;
+        }
+        setHighlightIdx((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!isOpen) {
+          open();
+          return;
+        }
+        setHighlightIdx((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && highlightIdx >= 0 && isOpen) {
+        e.preventDefault();
+        handleSelect(filtered[highlightIdx]);
+      } else if (e.key === "Escape") {
+        close();
+      } else if (e.key === "Tab") {
+        close();
+      }
+    };
+    const handleFocus = () => {
+      open();
+    };
+    const handleBlur = () => {
+      setTimeout(() => {
+        if (!selectingRef.current) close();
+        selectingRef.current = false;
+      }, 150);
+    };
+    React4.useEffect(() => {
+      if (highlightIdx >= 0 && listRef.current) {
+        const el = listRef.current.children[highlightIdx];
+        el?.scrollIntoView?.({ block: "nearest" });
+      }
+    }, [highlightIdx]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "autocomplete_root",
+          "flex flex-col gap-1.5",
+          colorVars[status === "default" ? "primary" : status],
+          fullWidth ? "w-full" : "inline-flex",
+          classNames?.root,
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              id: labelId,
+              className: "text-sm font-medium text-text-primary",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(Popover, { open: isOpen && !disabled, onOpenChange: (v) => {
+            if (!v) close();
+          }, children: [
+            /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: inputVariants({ status, size, fullWidth, disabled }),
+                onClick: () => {
+                  if (!isOpen) open();
+                  inputRef.current?.focus();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      role: "combobox",
+                      "aria-expanded": isOpen,
+                      "aria-autocomplete": "list",
+                      "aria-labelledby": label ? labelId : void 0,
+                      className: "flex-1 min-w-0 bg-transparent outline-none placeholder:text-text-secondary/50",
+                      placeholder,
+                      value: currentValue,
+                      onChange: handleInputChange,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      onKeyDown: handleKeyDown,
+                      disabled
+                    }
+                  ),
+                  loading && /* @__PURE__ */ jsx(Loader2, { className: cn("animate-spin text-text-secondary", iconSizes[size]) }),
+                  clearable && currentValue && !disabled && !loading && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleClear();
+                      },
+                      className: "text-text-secondary hover:text-text-primary transition-colors cursor-pointer",
+                      tabIndex: -1,
+                      "aria-label": "Clear",
+                      children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+                    }
+                  ),
+                  !loading && !clearable && /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: cn(
+                        "text-text-secondary transition-transform duration-200",
+                        iconSizes[size],
+                        isOpen && "rotate-180"
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                className: cn(
+                  "autocomplete_dropdown",
+                  "p-1 w-[var(--radix-popover-trigger-width)] max-h-60 overflow-y-auto",
+                  classNames?.dropdown
+                ),
+                align: "start",
+                onOpenAutoFocus: (e) => e.preventDefault(),
+                onCloseAutoFocus: (e) => e.preventDefault(),
+                onInteractOutside: (e) => {
+                  const target = e.target;
+                  if (inputRef.current?.contains(target)) {
+                    e.preventDefault();
+                  }
+                },
+                children: /* @__PURE__ */ jsx("div", { ref: listRef, role: "listbox", children: filtered.length === 0 ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "autocomplete_empty",
+                      "px-3 py-2 text-sm text-text-secondary text-center",
+                      classNames?.empty
+                    ),
+                    children: emptyMessage
+                  }
+                ) : filtered.map((option, idx) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "option",
+                    "aria-selected": idx === highlightIdx,
+                    "aria-disabled": option.disabled,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      selectingRef.current = true;
+                    },
+                    onClick: () => handleSelect(option),
+                    onMouseEnter: () => setHighlightIdx(idx),
+                    className: cn(
+                      "autocomplete_option",
+                      "px-3 py-2 text-sm rounded-md cursor-pointer transition-colors",
+                      idx === highlightIdx && "bg-surface",
+                      option.disabled && "opacity-50 cursor-not-allowed",
+                      !option.disabled && "hover:bg-surface",
+                      classNames?.option
+                    ),
+                    children: option.label
+                  },
+                  option.value
+                )) })
+              }
+            )
+          ] }),
+          (error || helperText) && /* @__PURE__ */ jsx("p", { className: cn(
+            "text-xs",
+            error ? statusMessageVariants({ status: "error" }) : "text-text-secondary"
+          ), children: error || helperText })
+        ]
+      }
+    );
+  }
+);
+Autocomplete.displayName = "Autocomplete";
+var autocomplete_default = Autocomplete;
+var calendarVariants = cva("inline-flex flex-col select-none", {
+  variants: {
+    size: {
+      xs: "text-xs gap-1",
+      sm: "text-sm gap-1.5",
+      md: "text-sm gap-2",
+      lg: "text-base gap-2.5"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var cellVariants = cva(
+  "flex items-center justify-center rounded-md transition-colors cursor-pointer font-normal",
+  {
+    variants: {
+      size: {
+        xs: "w-7 h-7 text-xs",
+        sm: "w-8 h-8 text-sm",
+        md: "w-9 h-9 text-sm",
+        lg: "w-10 h-10 text-base"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var navBtnClass = "inline-flex items-center justify-center rounded-md w-7 h-7 hover:bg-surface transition-colors cursor-pointer text-text-secondary hover:text-text-primary";
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getMonthGrid(year, month, weekStartsOn, showOutside) {
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = getDaysInMonth(year, month);
+  const daysInPrevMonth = getDaysInMonth(year, month - 1);
+  const offset = (firstDay - weekStartsOn + 7) % 7;
+  const weeks = [];
+  let week = [];
+  for (let i = 0; i < offset; i++) {
+    const day = daysInPrevMonth - offset + 1 + i;
+    week.push({ date: new Date(year, month - 1, day), outside: true });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    week.push({ date: new Date(year, month, day), outside: false });
+    if (week.length === 7) {
+      weeks.push(week);
+      week = [];
+    }
+  }
+  if (week.length > 0) {
+    let nextDay = 1;
+    while (week.length < 7) {
+      week.push({ date: new Date(year, month + 1, nextDay++), outside: true });
+    }
+    weeks.push(week);
+  }
+  if (!showOutside) {
+    return weeks.map(
+      (w) => w.map((d) => d.outside ? { ...d, date: d.date } : d)
+    );
+  }
+  return weeks;
+}
+var DAY_NAMES_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var Calendar = React4.memo(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    month: controlledMonth,
+    defaultMonth,
+    onMonthChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    size = "md",
+    weekStartsOn = 0,
+    showOutsideDays = true,
+    className,
+    classNames
+  }) => {
+    const today = /* @__PURE__ */ new Date();
+    const [internalValue, setInternalValue] = React4.useState(
+      defaultValue ?? null
+    );
+    const [internalMonth, setInternalMonth] = React4.useState(
+      defaultMonth ?? defaultValue ?? today
+    );
+    const selected = value !== void 0 ? value : internalValue;
+    const currentMonth = controlledMonth ?? internalMonth;
+    const year = currentMonth.getFullYear();
+    const monthIdx = currentMonth.getMonth();
+    const weeks = React4.useMemo(
+      () => getMonthGrid(year, monthIdx, weekStartsOn, showOutsideDays),
+      [year, monthIdx, weekStartsOn, showOutsideDays]
+    );
+    const dayNames = React4.useMemo(() => {
+      const names = [];
+      for (let i = 0; i < 7; i++) {
+        names.push(DAY_NAMES_SHORT[(weekStartsOn + i) % 7]);
+      }
+      return names;
+    }, [weekStartsOn]);
+    const navigate = (offset) => {
+      const next = new Date(year, monthIdx + offset, 1);
+      if (controlledMonth === void 0) setInternalMonth(next);
+      onMonthChange?.(next);
+    };
+    const isDisabled = (date) => {
+      if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()))
+        return true;
+      if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()))
+        return true;
+      return disabledDates?.(date) ?? false;
+    };
+    const handleSelect = (date) => {
+      if (isDisabled(date)) return;
+      if (value === void 0) setInternalValue(date);
+      onChange?.(date);
+      if (date.getMonth() !== monthIdx) {
+        navigate(date.getMonth() - monthIdx);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "calendar_root",
+          calendarVariants({ size }),
+          classNames?.root,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "header",
+              className: cn(
+                "calendar_header",
+                "flex items-center justify-between px-1",
+                classNames?.header
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => navigate(-1),
+                    className: navBtnClass,
+                    "aria-label": "Previous month",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "font-semibold text-text-primary", children: [
+                  MONTH_NAMES[monthIdx],
+                  " ",
+                  year
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => navigate(1),
+                    className: navBtnClass,
+                    "aria-label": "Next month",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "grid",
+              className: cn("calendar_grid", "grid grid-cols-7", classNames?.grid),
+              role: "grid",
+              children: [
+                dayNames.map((name) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "columnheader",
+                    className: cn(
+                      "calendar_dayName",
+                      cellVariants({ size }),
+                      "font-medium text-text-secondary cursor-default",
+                      classNames?.dayName
+                    ),
+                    children: name
+                  },
+                  name
+                )),
+                weeks.map(
+                  (week, wi) => week.map(({ date, outside }) => {
+                    const disabled = isDisabled(date);
+                    const isToday = isSameDay(date, today);
+                    const isSelected = selected ? isSameDay(date, selected) : false;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "gridcell",
+                        disabled,
+                        onClick: () => handleSelect(date),
+                        "aria-selected": isSelected,
+                        "aria-current": isToday ? "date" : void 0,
+                        className: cn(
+                          "calendar_day",
+                          cellVariants({ size }),
+                          outside && "text-text-secondary/40",
+                          outside && !showOutsideDays && "invisible",
+                          disabled && "opacity-30 cursor-not-allowed",
+                          !disabled && !isSelected && "hover:bg-surface",
+                          isToday && !isSelected && "border border-primary text-primary",
+                          isSelected && "bg-primary text-primary-foreground",
+                          classNames?.day,
+                          isToday && classNames?.today,
+                          isSelected && classNames?.selected,
+                          outside && classNames?.outside,
+                          disabled && classNames?.disabled
+                        ),
+                        children: date.getDate()
+                      },
+                      `${wi}-${date.toISOString()}`
+                    );
+                  })
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Calendar.displayName = "Calendar";
+var calendar_default = Calendar;
+function hexToHsv(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + 6) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+  }
+  const s = max === 0 ? 0 : d / max;
+  return [h, s, max];
+}
+function hsvToHex(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function isValidHex(v) {
+  return /^#[0-9a-fA-F]{6}$/.test(v);
+}
+function normalizeHex(v) {
+  if (!v) return "#000000";
+  const clean = v.startsWith("#") ? v : `#${v}`;
+  return isValidHex(clean) ? clean.toLowerCase() : "#000000";
+}
+var sizeMap = {
+  xs: { area: "w-40 h-28", hue: "h-2", swatch: "w-4 h-4" },
+  sm: { area: "w-48 h-32", hue: "h-2.5", swatch: "w-5 h-5" },
+  md: { area: "w-56 h-36", hue: "h-3", swatch: "w-6 h-6" },
+  lg: { area: "w-64 h-44", hue: "h-3.5", swatch: "w-7 h-7" }
+};
+var inputVariants2 = cva(
+  "flex items-center rounded-md border border-border bg-background text-text-primary transition-colors focus-within:border-primary",
+  {
+    variants: {
+      size: {
+        xs: "h-7 px-2 text-xs gap-1.5",
+        sm: "h-8 px-2.5 text-sm gap-2",
+        md: "h-9 px-3 text-sm gap-2",
+        lg: "h-10 px-3.5 text-base gap-2.5"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function SaturationArea({
+  hue,
+  sat,
+  val,
+  onChangeSV,
+  areaClass,
+  disabled
+}) {
+  const ref = React4.useRef(null);
+  const update = React4.useCallback(
+    (clientX, clientY) => {
+      if (!ref.current || disabled) return;
+      const rect = ref.current.getBoundingClientRect();
+      const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const v = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
+      onChangeSV(s, v);
+    },
+    [onChangeSV, disabled]
+  );
+  const handlePointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    update(e.clientX, e.clientY);
+  };
+  const handlePointerMove = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      update(e.clientX, e.clientY);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("colorPicker_saturation", "relative rounded-md cursor-crosshair", areaClass),
+      style: { background: `hsl(${hue}, 100%, 50%)` },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md", style: { background: "linear-gradient(to right, white, transparent)" } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md", style: { background: "linear-gradient(to top, black, transparent)" } }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none",
+            style: { left: `${sat * 100}%`, top: `${(1 - val) * 100}%` }
+          }
+        )
+      ]
+    }
+  );
+}
+function HueSlider({
+  hue,
+  onChange,
+  hueClass,
+  disabled
+}) {
+  const ref = React4.useRef(null);
+  const update = React4.useCallback(
+    (clientX) => {
+      if (!ref.current || disabled) return;
+      const rect = ref.current.getBoundingClientRect();
+      const h = Math.max(0, Math.min(360, (clientX - rect.left) / rect.width * 360));
+      onChange(h);
+    },
+    [onChange, disabled]
+  );
+  const handlePointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    update(e.clientX);
+  };
+  const handlePointerMove = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) update(e.clientX);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("colorPicker_hue", "relative rounded-full cursor-pointer", hueClass),
+      style: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none",
+          style: { left: `${hue / 360 * 100}%` }
+        }
+      )
+    }
+  );
+}
+var ColorPicker = React4.memo(
+  ({
+    value,
+    defaultValue = "#3b82f6",
+    onChange,
+    swatches,
+    size = "md",
+    disabled = false,
+    label,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = React4.useState(normalizeHex(defaultValue));
+    const currentValue = value !== void 0 ? normalizeHex(value) : internalValue;
+    const [h, s, v] = React4.useMemo(() => hexToHsv(currentValue), [currentValue]);
+    const [hue, setHue] = React4.useState(h);
+    React4.useEffect(() => {
+      if (s > 0.01 || v > 0.01) setHue(h);
+    }, [h, s, v]);
+    const [inputText, setInputText] = React4.useState(currentValue);
+    React4.useEffect(() => setInputText(currentValue), [currentValue]);
+    const update = (hex) => {
+      const valid = normalizeHex(hex);
+      if (value === void 0) setInternalValue(valid);
+      onChange?.(valid);
+    };
+    const handleSVChange = (ns, nv) => {
+      update(hsvToHex(hue, ns, nv));
+    };
+    const handleHueChange = (nh) => {
+      setHue(nh);
+      update(hsvToHex(nh, s, v));
+    };
+    const handleInputBlur = () => {
+      if (isValidHex(inputText) || isValidHex(`#${inputText}`)) {
+        update(inputText.startsWith("#") ? inputText : `#${inputText}`);
+      } else {
+        setInputText(currentValue);
+      }
+    };
+    const sizes = sizeMap[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "colorPicker_root",
+          "inline-flex flex-col gap-2",
+          disabled && "opacity-50 pointer-events-none",
+          classNames?.root,
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsx(
+            SaturationArea,
+            {
+              hue,
+              sat: s,
+              val: v,
+              onChangeSV: handleSVChange,
+              areaClass: cn(sizes.area, classNames?.saturation),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HueSlider,
+            {
+              hue,
+              onChange: handleHueChange,
+              hueClass: cn(sizes.hue, classNames?.hueSlider),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "preview",
+                className: cn(
+                  "colorPicker_preview",
+                  "w-8 h-8 rounded-md border border-border shrink-0",
+                  classNames?.preview
+                ),
+                style: { backgroundColor: currentValue }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: inputText,
+                onChange: (e) => setInputText(e.target.value),
+                onBlur: handleInputBlur,
+                onKeyDown: (e) => e.key === "Enter" && handleInputBlur(),
+                className: cn(
+                  "colorPicker_input",
+                  "flex-1 min-w-0 bg-transparent border border-border rounded-md px-2 py-1 text-sm text-text-primary outline-none focus:border-primary font-mono",
+                  classNames?.input
+                ),
+                disabled
+              }
+            )
+          ] }),
+          swatches && swatches.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "swatches",
+              className: cn(
+                "colorPicker_swatches",
+                "flex flex-wrap gap-1",
+                classNames?.swatches
+              ),
+              children: swatches.map((swatch) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => update(swatch),
+                  className: cn(
+                    "colorPicker_swatch",
+                    sizes.swatch,
+                    "rounded-md border border-border cursor-pointer transition-transform hover:scale-110",
+                    currentValue === normalizeHex(swatch) && "ring-2 ring-primary ring-offset-1 ring-offset-background",
+                    classNames?.swatch
+                  ),
+                  style: { backgroundColor: swatch },
+                  "aria-label": `Select color ${swatch}`
+                },
+                swatch
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+var ColorInput = React4.memo(
+  ({
+    value,
+    defaultValue = "#3b82f6",
+    onChange,
+    swatches,
+    size = "md",
+    disabled = false,
+    label,
+    fullWidth = true,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = React4.useState(normalizeHex(defaultValue));
+    const currentValue = value !== void 0 ? normalizeHex(value) : internalValue;
+    const update = (hex) => {
+      const valid = normalizeHex(hex);
+      if (value === void 0) setInternalValue(valid);
+      onChange?.(valid);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "colorInput_root",
+          "flex flex-col gap-1.5",
+          fullWidth ? "w-full" : "inline-flex",
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn(inputVariants2({ size }), disabled && "opacity-50 cursor-not-allowed", fullWidth && "w-full"), children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-5 h-5 rounded border border-border shrink-0",
+                  style: { backgroundColor: currentValue }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-text-primary font-mono", children: currentValue })
+            ] }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(
+              ColorPicker,
+              {
+                value: currentValue,
+                onChange: update,
+                swatches,
+                size,
+                disabled,
+                classNames
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ColorInput.displayName = "ColorInput";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center shadow-lg transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:pointer-events-none cursor-pointer",
+  {
+    variants: {
+      size: {
+        xs: "w-8 h-8 text-sm",
+        sm: "w-10 h-10 text-base",
+        md: "w-12 h-12 text-lg",
+        lg: "w-14 h-14 text-xl"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-lg"
+      },
+      variant: {
+        default: "bg-background border border-border text-text-primary hover:bg-surface",
+        colored: "bg-slot text-slot-fg hover:bg-slot-90"
+      }
+    },
+    defaultVariants: { size: "md", shape: "circle", variant: "default" }
+  }
+);
+var FloatButton = React4.memo(
+  ({
+    icon,
+    label,
+    tooltip,
+    badge,
+    onClick,
+    href,
+    target,
+    color = "default",
+    size = "md",
+    shape = "circle",
+    disabled = false,
+    className,
+    classNames,
+    style
+  }) => {
+    const variant = color === "default" ? "default" : "colored";
+    const Component = href ? "a" : "button";
+    const content = /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ...href ? { href, target } : { type: "button", onClick, disabled },
+        "data-slot": "button",
+        title: tooltip,
+        className: cn(
+          "floatButton_button",
+          buttonVariants({ size, shape, variant }),
+          color !== "default" && colorVars[color],
+          "relative",
+          classNames?.button,
+          className
+        ),
+        style,
+        children: [
+          icon,
+          label && !icon && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: label }),
+          badge !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "badge",
+              className: cn(
+                "floatButton_badge",
+                "absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-error text-error-foreground text-[10px] font-medium flex items-center justify-center",
+                classNames?.badge
+              ),
+              children: badge
+            }
+          )
+        ]
+      }
+    );
+    return content;
+  }
+);
+FloatButton.displayName = "FloatButton";
+var FloatButtonGroup = React4.memo(
+  ({
+    children,
+    trigger = "click",
+    icon,
+    closeIcon,
+    open: controlledOpen,
+    onOpenChange,
+    shape = "circle",
+    color = "primary",
+    size = "md",
+    placement = "top",
+    className,
+    classNames,
+    style
+  }) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+    const setOpen = useCallback(
+      (v) => {
+        if (controlledOpen === void 0) setInternalOpen(v);
+        onOpenChange?.(v);
+      },
+      [controlledOpen, onOpenChange]
+    );
+    const placementClasses = {
+      top: "flex-col-reverse gap-3 bottom-0",
+      bottom: "flex-col gap-3 top-0",
+      left: "flex-row-reverse gap-3 right-0",
+      right: "flex-row gap-3 left-0"
+    };
+    const openIcon = icon ?? /* @__PURE__ */ jsx(Plus, { className: "w-5 h-5" });
+    const closedIcon = closeIcon ?? /* @__PURE__ */ jsx(X, { className: "w-5 h-5" });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "group",
+        className: cn("floatButton_group", "relative inline-flex", classNames?.group, className),
+        style,
+        onMouseEnter: trigger === "hover" ? () => setOpen(true) : void 0,
+        onMouseLeave: trigger === "hover" ? () => setOpen(false) : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            FloatButton,
+            {
+              icon: /* @__PURE__ */ jsx("span", { className: cn("transition-transform duration-200", isOpen && "rotate-45"), children: isOpen ? closedIcon : openIcon }),
+              color,
+              size,
+              shape,
+              onClick: trigger === "click" ? () => setOpen(!isOpen) : void 0
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx("div", { className: cn("absolute flex items-center", placementClasses[placement]), children: React4.Children.map(children, (child, idx) => {
+            if (!React4.isValidElement(child)) return child;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "animate-in fade-in zoom-in-75",
+                style: { animationDelay: `${idx * 50}ms`, animationFillMode: "both", animationDuration: "150ms" },
+                children: React4.cloneElement(child, {
+                  size: child.props.size || size,
+                  shape: child.props.shape || shape
+                })
+              },
+              idx
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+FloatButtonGroup.displayName = "FloatButtonGroup";
+var BackTop = React4.memo(
+  ({
+    visibilityHeight = 400,
+    onClick,
+    icon,
+    size = "md",
+    shape = "circle",
+    color = "default",
+    ...props
+  }) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      const handleScroll = () => setVisible(window.scrollY >= visibilityHeight);
+      handleScroll();
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [visibilityHeight]);
+    const handleClick = useCallback(() => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      onClick?.();
+    }, [onClick]);
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      FloatButton,
+      {
+        icon: icon ?? /* @__PURE__ */ jsx(ArrowUp, { className: "w-5 h-5" }),
+        tooltip: "Back to top",
+        onClick: handleClick,
+        size,
+        shape,
+        color,
+        ...props
+      }
+    );
+  }
+);
+BackTop.displayName = "BackTop";
+var textareaVariants = cva(
+  "w-full rounded-md border bg-background text-text-primary placeholder:text-text-secondary/50 outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default",
+  {
+    variants: {
+      size: {
+        xs: "px-(--input-padding-x-xs) py-1.5 text-xs",
+        sm: "px-(--input-padding-x-sm) py-2 text-sm",
+        md: "px-(--input-padding-x-md) py-2 text-sm",
+        lg: "px-(--input-padding-x-lg) py-2.5 text-base"
+      },
+      status: {
+        default: "border-border focus:border-primary",
+        error: "border-error focus:border-error"
+      }
+    },
+    defaultVariants: { size: "md", status: "default" }
+  }
+);
+function getCaretCoordinates(element, position) {
+  const div = document.createElement("div");
+  const style = getComputedStyle(element);
+  const props = [
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "letterSpacing",
+    "lineHeight",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "wordWrap",
+    "whiteSpace",
+    "overflowWrap"
+  ];
+  div.style.position = "absolute";
+  div.style.visibility = "hidden";
+  div.style.whiteSpace = "pre-wrap";
+  div.style.wordWrap = "break-word";
+  div.style.width = `${element.offsetWidth}px`;
+  for (const prop of props) div.style[prop] = style.getPropertyValue(prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`));
+  div.textContent = element.value.substring(0, position);
+  const span = document.createElement("span");
+  span.textContent = element.value.substring(position) || ".";
+  div.appendChild(span);
+  document.body.appendChild(div);
+  const top = span.offsetTop - element.scrollTop;
+  const left = span.offsetLeft - element.scrollLeft;
+  document.body.removeChild(div);
+  return { top, left };
+}
+var Mentions = React4.memo(
+  ({
+    value,
+    defaultValue = "",
+    onChange,
+    onSelect,
+    options = [],
+    triggers = ["@"],
+    loading = false,
+    size = "md",
+    disabled = false,
+    readOnly = false,
+    placeholder,
+    rows = 3,
+    label,
+    error,
+    helperText,
+    fullWidth = true,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = value !== void 0 ? value : internalValue;
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [query, setQuery] = useState("");
+    const [activeTrigger, setActiveTrigger] = useState("");
+    const [triggerStart, setTriggerStart] = useState(-1);
+    const [highlightedIdx, setHighlightedIdx] = useState(0);
+    const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });
+    const textareaRef = useRef(null);
+    const update = useCallback(
+      (v) => {
+        if (value === void 0) setInternalValue(v);
+        onChange?.(v);
+      },
+      [value, onChange]
+    );
+    const filteredOptions = useMemo(() => {
+      if (!query) return options;
+      const q = query.toLowerCase();
+      return options.filter(
+        (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)
+      );
+    }, [options, query]);
+    const insertMention = useCallback(
+      (option) => {
+        const before = currentValue.substring(0, triggerStart);
+        const after = currentValue.substring(textareaRef.current?.selectionStart ?? triggerStart);
+        const mention = `${activeTrigger}${option.value} `;
+        const next = before + mention + after;
+        update(next);
+        onSelect?.(option, activeTrigger);
+        setShowDropdown(false);
+        setQuery("");
+        requestAnimationFrame(() => {
+          if (textareaRef.current) {
+            const pos = before.length + mention.length;
+            textareaRef.current.selectionStart = pos;
+            textareaRef.current.selectionEnd = pos;
+            textareaRef.current.focus();
+          }
+        });
+      },
+      [currentValue, triggerStart, activeTrigger, update, onSelect]
+    );
+    const handleChange = (e) => {
+      const v = e.target.value;
+      update(v);
+      const cursor = e.target.selectionStart;
+      const textBefore = v.substring(0, cursor);
+      let found = false;
+      for (const trigger of triggers) {
+        const lastTrigger = textBefore.lastIndexOf(trigger);
+        if (lastTrigger >= 0) {
+          const between = textBefore.substring(lastTrigger + trigger.length);
+          const charBefore = lastTrigger > 0 ? textBefore[lastTrigger - 1] : " ";
+          if (/\s/.test(charBefore) || lastTrigger === 0) {
+            if (!/\s/.test(between)) {
+              setActiveTrigger(trigger);
+              setTriggerStart(lastTrigger);
+              setQuery(between);
+              setShowDropdown(true);
+              setHighlightedIdx(0);
+              found = true;
+              if (typeof window !== "undefined" && textareaRef.current) {
+                const coords = getCaretCoordinates(textareaRef.current, lastTrigger);
+                setDropdownPos({ top: coords.top + 24, left: coords.left });
+              }
+              break;
+            }
+          }
+        }
+      }
+      if (!found) setShowDropdown(false);
+    };
+    const handleKeyDown = (e) => {
+      if (!showDropdown || filteredOptions.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightedIdx((p) => Math.min(p + 1, filteredOptions.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightedIdx((p) => Math.max(p - 1, 0));
+      } else if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        if (filteredOptions[highlightedIdx]) insertMention(filteredOptions[highlightedIdx]);
+      } else if (e.key === "Escape") {
+        setShowDropdown(false);
+      }
+    };
+    useEffect(() => {
+      if (highlightedIdx >= filteredOptions.length) setHighlightedIdx(Math.max(0, filteredOptions.length - 1));
+    }, [filteredOptions.length, highlightedIdx]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "mentions_root",
+          "flex flex-col gap-1.5",
+          fullWidth ? "w-full" : "inline-flex",
+          classNames?.root,
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("label", { "data-slot": "label", className: "text-sm font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                value: currentValue,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                onBlur: () => setTimeout(() => setShowDropdown(false), 150),
+                placeholder,
+                rows,
+                disabled,
+                readOnly,
+                "data-slot": "textarea",
+                className: cn(
+                  "mentions_textarea",
+                  textareaVariants({ size, status: error ? "error" : "default" }),
+                  "resize-y",
+                  classNames?.textarea
+                )
+              }
+            ),
+            showDropdown && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "dropdown",
+                className: cn(
+                  "mentions_dropdown",
+                  "absolute z-[var(--z-popover)] rounded-md border border-border bg-background shadow-md max-h-[200px] overflow-auto min-w-[180px]",
+                  classNames?.dropdown
+                ),
+                style: { top: dropdownPos.top, left: Math.min(dropdownPos.left, 200) },
+                children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-text-secondary", children: "Loading..." }) : filteredOptions.map((option, idx) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      insertMention(option);
+                    },
+                    onMouseEnter: () => setHighlightedIdx(idx),
+                    "data-slot": "option",
+                    className: cn(
+                      "mentions_option",
+                      "flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors",
+                      idx === highlightedIdx ? "bg-surface text-text-primary" : "text-text-primary hover:bg-surface",
+                      classNames?.option
+                    ),
+                    children: [
+                      option.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5", children: option.icon }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsx("div", { className: "font-medium truncate", children: option.label }),
+                        option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary truncate", children: option.description })
+                      ] })
+                    ]
+                  },
+                  option.value
+                ))
+              }
+            )
+          ] }),
+          (error || helperText) && /* @__PURE__ */ jsx("p", { "data-slot": "message", className: cn("text-xs", error ? statusMessageVariants({ status: "error" }) : "text-text-secondary"), children: error || helperText })
+        ]
+      }
+    );
+  }
+);
+Mentions.displayName = "Mentions";
+var mentions_default = Mentions;
+var _createFn = null;
+async function loadQRLib() {
+  if (_createFn) return true;
+  try {
+    const mod = await import('qrcode');
+    _createFn = mod.create || mod.default?.create || null;
+    return !!_createFn;
+  } catch {
+    return false;
+  }
+}
+function createQRMatrixSync(text, errorLevel) {
+  if (!_createFn) return null;
+  try {
+    const result = _createFn(text, { errorCorrectionLevel: errorLevel });
+    return result.modules;
+  } catch {
+    return null;
+  }
+}
+function resolveColor(el, varName) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = getComputedStyle(el).getPropertyValue(varName).trim();
+    if (!raw) return null;
+    const probe = document.createElement("div");
+    probe.style.color = raw;
+    document.body.appendChild(probe);
+    const computed = getComputedStyle(probe).color;
+    document.body.removeChild(probe);
+    return computed || null;
+  } catch {
+    return null;
+  }
+}
+function useSlotColor(rootRef, explicitColor, slotVar, fallback) {
+  const [resolved, setResolved] = useState(explicitColor || fallback);
+  useEffect(() => {
+    if (explicitColor) {
+      setResolved(explicitColor);
+      return;
+    }
+    const update = () => {
+      const el = rootRef.current;
+      if (!el) return;
+      const computed = resolveColor(el, slotVar);
+      setResolved(computed || fallback);
+    };
+    update();
+    const raf = requestAnimationFrame(update);
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode"]
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [explicitColor, slotVar, fallback, rootRef]);
+  return resolved;
+}
+function isFinderModule(row, col, size) {
+  if (row < 7 && col < 7) return true;
+  if (row < 7 && col >= size - 7) return true;
+  if (row >= size - 7 && col < 7) return true;
+  return false;
+}
+function drawCanvasQR(canvas, matrix, pixelSize, color, bgColor, moduleStyle, finderStyle, iconArea) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const ratio = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  canvas.width = pixelSize * ratio;
+  canvas.height = pixelSize * ratio;
+  canvas.style.width = `${pixelSize}px`;
+  canvas.style.height = `${pixelSize}px`;
+  ctx.scale(ratio, ratio);
+  const moduleCount = matrix.size;
+  const cellSize = pixelSize / moduleCount;
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, pixelSize, pixelSize);
+  ctx.fillStyle = color;
+  for (let row = 0; row < moduleCount; row++) {
+    for (let col = 0; col < moduleCount; col++) {
+      if (!matrix.get(row, col)) continue;
+      const x = col * cellSize;
+      const y = row * cellSize;
+      if (iconArea && x + cellSize > iconArea.x && x < iconArea.x + iconArea.w && y + cellSize > iconArea.y && y < iconArea.y + iconArea.h) {
+        continue;
+      }
+      const isFinder = isFinderModule(row, col, moduleCount);
+      if (isFinder) {
+        drawFinderModule(ctx, x, y, cellSize, finderStyle);
+      } else {
+        drawDataModule(ctx, x, y, cellSize, moduleStyle);
+      }
+    }
+  }
+}
+function drawDataModule(ctx, x, y, size, style) {
+  const gap = size * 0.1;
+  switch (style) {
+    case "dots": {
+      const radius = (size - gap * 2) / 2;
+      ctx.beginPath();
+      ctx.arc(x + size / 2, y + size / 2, radius, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    }
+    case "rounded": {
+      const r = size * 0.3;
+      const s = size - gap;
+      const ox = x + gap / 2;
+      const oy = y + gap / 2;
+      ctx.beginPath();
+      ctx.moveTo(ox + r, oy);
+      ctx.arcTo(ox + s, oy, ox + s, oy + s, r);
+      ctx.arcTo(ox + s, oy + s, ox, oy + s, r);
+      ctx.arcTo(ox, oy + s, ox, oy, r);
+      ctx.arcTo(ox, oy, ox + s, oy, r);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+    case "squares":
+    default: {
+      ctx.fillRect(x + gap / 2, y + gap / 2, size - gap, size - gap);
+      break;
+    }
+  }
+}
+function drawFinderModule(ctx, x, y, size, style) {
+  switch (style) {
+    case "dot": {
+      const r = size / 2;
+      ctx.beginPath();
+      ctx.arc(x + r, y + r, r * 0.9, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    }
+    case "rounded": {
+      const radius = size * 0.3;
+      ctx.beginPath();
+      ctx.moveTo(x + radius, y);
+      ctx.arcTo(x + size, y, x + size, y + size, radius);
+      ctx.arcTo(x + size, y + size, x, y + size, radius);
+      ctx.arcTo(x, y + size, x, y, radius);
+      ctx.arcTo(x, y, x + size, y, radius);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+    case "square":
+    default:
+      ctx.fillRect(x, y, size, size);
+      break;
+  }
+}
+function buildSVGPaths(matrix, cellSize, moduleStyle, finderStyle, iconArea) {
+  const paths = [];
+  const moduleCount = matrix.size;
+  for (let row = 0; row < moduleCount; row++) {
+    for (let col = 0; col < moduleCount; col++) {
+      if (!matrix.get(row, col)) continue;
+      const x = col * cellSize;
+      const y = row * cellSize;
+      if (iconArea && x + cellSize > iconArea.x && x < iconArea.x + iconArea.w && y + cellSize > iconArea.y && y < iconArea.y + iconArea.h) {
+        continue;
+      }
+      const isFinder = isFinderModule(row, col, moduleCount);
+      const style = isFinder ? finderStyle : moduleStyle;
+      const gap = cellSize * 0.1;
+      if (style === "dots" || style === "dot") {
+        const r = (cellSize - (isFinder ? 0 : gap * 2)) / 2;
+        const cx = x + cellSize / 2;
+        const cy = y + cellSize / 2;
+        paths.push(`M${cx - r},${cy}a${r},${r} 0 1,0 ${r * 2},0a${r},${r} 0 1,0 ${-r * 2},0`);
+      } else if (style === "rounded") {
+        const r = cellSize * 0.3;
+        const s = cellSize - (isFinder ? 0 : gap);
+        const ox = x + (isFinder ? 0 : gap / 2);
+        const oy = y + (isFinder ? 0 : gap / 2);
+        paths.push(
+          `M${ox + r},${oy}H${ox + s - r}Q${ox + s},${oy} ${ox + s},${oy + r}V${oy + s - r}Q${ox + s},${oy + s} ${ox + s - r},${oy + s}H${ox + r}Q${ox},${oy + s} ${ox},${oy + s - r}V${oy + r}Q${ox},${oy} ${ox + r},${oy}Z`
+        );
+      } else {
+        const g = isFinder ? 0 : gap / 2;
+        paths.push(`M${x + g},${y + g}h${cellSize - g * 2}v${cellSize - g * 2}h${-(cellSize - g * 2)}Z`);
+      }
+    }
+  }
+  return paths.join("");
+}
+var QRCode = React4.memo(
+  ({
+    value,
+    size = 128,
+    color = "default",
+    fgColor,
+    bgColor: bgColorProp,
+    errorLevel = "M",
+    type = "canvas",
+    moduleStyle = "squares",
+    finderStyle = "square",
+    icon,
+    iconSize = 40,
+    iconBorderRadius = 4,
+    bordered = true,
+    status = "active",
+    onRefresh,
+    refreshText = "Refresh",
+    expiredText = "QR code expired",
+    className,
+    classNames
+  }) => {
+    const canvasRef = useRef(null);
+    const rootRef = useRef(null);
+    const [libLoaded, setLibLoaded] = useState(!!_createFn);
+    const resolvedFg = useSlotColor(rootRef, fgColor, "--_c", "#000000");
+    const resolvedBg = useSlotColor(rootRef, bgColorProp, "--color-background", "#ffffff");
+    useEffect(() => {
+      if (_createFn) {
+        setLibLoaded(true);
+        return;
+      }
+      loadQRLib().then((ok) => setLibLoaded(ok));
+    }, []);
+    const matrix = useMemo(() => {
+      if (!value || !libLoaded) return null;
+      return createQRMatrixSync(value, errorLevel);
+    }, [value, errorLevel, libLoaded]);
+    const iconArea = useMemo(() => {
+      if (!icon || !matrix) return void 0;
+      const moduleCount = matrix.size;
+      const cellSize = size / moduleCount;
+      const centerX = (size - iconSize) / 2;
+      const centerY = (size - iconSize) / 2;
+      const pad = cellSize * 2;
+      return { x: centerX - pad, y: centerY - pad, w: iconSize + pad * 2, h: iconSize + pad * 2 };
+    }, [icon, matrix, size, iconSize]);
+    const renderCanvas = useCallback(() => {
+      if (!canvasRef.current || !matrix || typeof window === "undefined") return;
+      drawCanvasQR(canvasRef.current, matrix, size, resolvedFg, resolvedBg, moduleStyle, finderStyle, iconArea);
+    }, [matrix, size, resolvedFg, resolvedBg, moduleStyle, finderStyle, iconArea]);
+    useEffect(() => {
+      if (type === "canvas") renderCanvas();
+    }, [type, renderCanvas]);
+    const svgContent = useMemo(() => {
+      if (type !== "svg" || !matrix) return null;
+      const cellSize = size / matrix.size;
+      const d = buildSVGPaths(matrix, cellSize, moduleStyle, finderStyle, iconArea);
+      return d;
+    }, [type, matrix, size, moduleStyle, finderStyle, iconArea]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        "data-slot": "root",
+        className: cn(
+          "qrCode_root",
+          "relative inline-flex flex-col items-center",
+          colorVars[color],
+          bordered && "p-3 rounded-lg border border-slot bg-background",
+          classNames?.root,
+          className
+        ),
+        children: [
+          type === "canvas" ? /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              "data-slot": "canvas",
+              className: cn("qrCode_canvas", classNames?.canvas),
+              style: { width: size, height: size }
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "data-slot": "svg",
+              width: size,
+              height: size,
+              viewBox: `0 0 ${size} ${size}`,
+              className: cn("qrCode_svg", classNames?.svg),
+              children: [
+                /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: resolvedBg }),
+                svgContent && /* @__PURE__ */ jsx("path", { d: svgContent, fill: resolvedFg })
+              ]
+            }
+          ),
+          icon && status === "active" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "icon",
+              className: cn("qrCode_icon", "absolute", classNames?.icon),
+              style: {
+                width: iconSize,
+                height: iconSize,
+                top: `calc(50% - ${iconSize / 2}px)`,
+                left: `calc(50% - ${iconSize / 2}px)`,
+                backgroundColor: resolvedBg,
+                borderRadius: iconBorderRadius,
+                padding: 3,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: icon,
+                  alt: "",
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "contain",
+                    borderRadius: Math.max(0, iconBorderRadius - 2)
+                  }
+                }
+              )
+            }
+          ),
+          status === "loading" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "overlay",
+              className: cn(
+                "qrCode_overlay",
+                "absolute inset-0 flex items-center justify-center bg-background/80 rounded-lg",
+                bordered && "m-3",
+                classNames?.overlay
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 border-2 border-slot border-t-transparent rounded-full animate-spin" })
+            }
+          ),
+          status === "expired" && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "overlay",
+              className: cn(
+                "qrCode_overlay",
+                "absolute inset-0 flex flex-col items-center justify-center bg-background/90 rounded-lg gap-2",
+                bordered && "m-3",
+                classNames?.overlay
+              ),
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: expiredText }),
+                onRefresh && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onRefresh,
+                    className: "text-sm text-slot hover:opacity-80 font-medium cursor-pointer",
+                    children: refreshText
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+QRCode.displayName = "QRCode";
+var qr_code_default = QRCode;
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      "data-slot": "resizable-group",
+      className: cn(
+        "resizable_group",
+        "flex h-full w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      "data-slot": "resizable-panel",
+      className: cn("resizable_panel", className),
+      ...props
+    }
+  );
+}
+function ResizableHandle({
+  withHandle = false,
+  className,
+  ...props
+}) {
+  const elRef = React4.useRef(null);
+  const [isVertical, setIsVertical] = React4.useState(false);
+  React4.useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const parent = el.parentElement;
+    if (!parent) return;
+    const dir = getComputedStyle(parent).flexDirection;
+    setIsVertical(dir === "column");
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      elementRef: elRef,
+      "data-slot": "resizable-handle",
+      className: cn(
+        "resizable_handle",
+        "group relative flex items-center justify-center",
+        "bg-border",
+        "focus-visible:outline-none",
+        isVertical ? "h-px" : "w-px",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: cn(
+        "z-10 flex items-center justify-center rounded-sm border border-border bg-background",
+        "opacity-0 transition-opacity group-hover:opacity-100",
+        isVertical ? "w-4 h-3" : "h-4 w-3"
+      ), children: /* @__PURE__ */ jsx(MoreVertical, { className: cn(
+        "w-2.5 h-2.5 text-text-secondary",
+        isVertical && "rotate-90"
+      ) }) })
+    }
+  );
+}
+var statusConfig = {
+  success: { color: "text-success", defaultTitle: "Successfully Done" },
+  error: { color: "text-error", defaultTitle: "Something Went Wrong" },
+  info: { color: "text-info", defaultTitle: "Information" },
+  warning: { color: "text-warning", defaultTitle: "Warning" },
+  "403": { color: "text-warning", defaultTitle: "403 \u2014 Access Denied" },
+  "404": { color: "text-info", defaultTitle: "404 \u2014 Page Not Found" },
+  "500": { color: "text-error", defaultTitle: "500 \u2014 Server Error" }
+};
+var sizeMap2 = {
+  xs: { icon: "w-10 h-10", title: "text-base font-semibold", subtitle: "text-xs", padding: "py-6 px-4", maxW: "max-w-xs" },
+  sm: { icon: "w-12 h-12", title: "text-lg font-semibold", subtitle: "text-sm", padding: "py-8 px-4", maxW: "max-w-sm" },
+  md: { icon: "w-16 h-16", title: "text-xl font-semibold", subtitle: "text-sm", padding: "py-12 px-6", maxW: "max-w-md" },
+  lg: { icon: "w-20 h-20", title: "text-2xl font-bold", subtitle: "text-base", padding: "py-16 px-8", maxW: "max-w-lg" }
+};
+function StatusIcon({ status, sizeClass }) {
+  const className = cn(sizeClass, statusConfig[status].color);
+  if (status === "success") {
+    return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4" })
+    ] });
+  }
+  if (status === "error" || status === "500") {
+    return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+      /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+    ] });
+  }
+  if (status === "warning" || status === "403") {
+    return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ] });
+  }
+  if (status === "404") {
+    return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+      /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+var Result = React4.memo(
+  ({
+    status = "info",
+    icon,
+    title,
+    subtitle,
+    extra,
+    children,
+    size = "md",
+    className,
+    classNames
+  }) => {
+    const config = statusConfig[status];
+    const s = sizeMap2[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "result_root",
+          "flex flex-col items-center text-center",
+          s.padding,
+          classNames?.root,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "icon", className: cn("result_icon", "mb-6", classNames?.icon), children: icon ?? /* @__PURE__ */ jsx(StatusIcon, { status, sizeClass: s.icon }) }),
+          /* @__PURE__ */ jsx("h3", { "data-slot": "title", className: cn("result_title", s.title, "text-text-primary mb-2", classNames?.title), children: title ?? config.defaultTitle }),
+          subtitle && /* @__PURE__ */ jsx("p", { "data-slot": "subtitle", className: cn("result_subtitle", s.subtitle, "text-text-secondary", s.maxW, "mb-6", classNames?.subtitle), children: subtitle }),
+          extra && /* @__PURE__ */ jsx("div", { "data-slot": "extra", className: cn("result_extra", "flex items-center gap-3 mb-6", classNames?.extra), children: extra }),
+          children && /* @__PURE__ */ jsx("div", { "data-slot": "content", className: cn("result_content", "w-full", s.maxW, classNames?.content), children })
+        ]
+      }
+    );
+  }
+);
+Result.displayName = "Result";
+var result_default = Result;
+var wrapperVariants = cva(
+  "flex flex-wrap items-center gap-1 rounded-md border bg-background text-text-primary transition-colors cursor-text",
+  {
+    variants: {
+      size: {
+        xs: "min-h-(--input-height-xs) px-(--input-padding-x-xs) py-0.5 text-xs",
+        sm: "min-h-(--input-height-sm) px-(--input-padding-x-sm) py-1 text-sm",
+        md: "min-h-(--input-height-md) px-(--input-padding-x-md) py-1 text-sm",
+        lg: "min-h-(--input-height-lg) px-(--input-padding-x-lg) py-1.5 text-base"
+      },
+      status: {
+        default: "border-border focus-within:border-primary",
+        error: "border-error focus-within:border-error"
+      }
+    },
+    defaultVariants: { size: "md", status: "default" }
+  }
+);
+var tagVariants = cva(
+  "inline-flex items-center gap-0.5 rounded-md font-medium transition-colors bg-slot-10 text-slot",
+  {
+    variants: {
+      size: {
+        xs: "h-4 px-1 text-[10px]",
+        sm: "h-5 px-1.5 text-xs",
+        md: "h-6 px-2 text-xs",
+        lg: "h-7 px-2.5 text-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var TagsInput = React4.memo(
+  ({
+    value,
+    defaultValue = [],
+    onChange,
+    suggestions,
+    placeholder = "Add tag...",
+    maxTags,
+    allowDuplicates = false,
+    separator = ",",
+    addOnBlur = true,
+    addOnPaste = true,
+    validate,
+    onTagAdd,
+    onTagRemove,
+    size = "md",
+    color = "primary",
+    disabled = false,
+    readOnly = false,
+    label,
+    error,
+    helperText,
+    clearable = false,
+    fullWidth = true,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const tags = value !== void 0 ? value : internalValue;
+    const [inputValue, setInputValue] = useState("");
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [highlightedIdx, setHighlightedIdx] = useState(-1);
+    const inputRef = useRef(null);
+    const separators = useMemo(
+      () => Array.isArray(separator) ? separator : [separator],
+      [separator]
+    );
+    const update = useCallback(
+      (next) => {
+        if (value === void 0) setInternalValue(next);
+        onChange?.(next);
+      },
+      [value, onChange]
+    );
+    const addTag = useCallback(
+      (raw) => {
+        const tag = raw.trim();
+        if (!tag) return false;
+        if (maxTags && tags.length >= maxTags) return false;
+        if (!allowDuplicates && tags.includes(tag)) return false;
+        if (validate && !validate(tag)) return false;
+        update([...tags, tag]);
+        onTagAdd?.(tag);
+        return true;
+      },
+      [tags, maxTags, allowDuplicates, validate, update, onTagAdd]
+    );
+    const removeTag = useCallback(
+      (idx) => {
+        const tag = tags[idx];
+        const next = tags.filter((_, i) => i !== idx);
+        update(next);
+        if (tag) onTagRemove?.(tag);
+      },
+      [tags, update, onTagRemove]
+    );
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || separators.includes(e.key)) {
+        e.preventDefault();
+        if (showSuggestions && highlightedIdx >= 0 && filteredSuggestions[highlightedIdx]) {
+          addTag(filteredSuggestions[highlightedIdx]);
+          setInputValue("");
+          setShowSuggestions(false);
+          setHighlightedIdx(-1);
+        } else if (addTag(inputValue)) {
+          setInputValue("");
+          setShowSuggestions(false);
+        }
+      } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+        removeTag(tags.length - 1);
+      } else if (e.key === "Escape") {
+        setShowSuggestions(false);
+      } else if (e.key === "ArrowDown" && showSuggestions) {
+        e.preventDefault();
+        setHighlightedIdx((p) => Math.min(p + 1, filteredSuggestions.length - 1));
+      } else if (e.key === "ArrowUp" && showSuggestions) {
+        e.preventDefault();
+        setHighlightedIdx((p) => Math.max(p - 1, 0));
+      }
+    };
+    const handlePaste = (e) => {
+      if (!addOnPaste) return;
+      e.preventDefault();
+      const text = e.clipboardData.getData("text");
+      const parts = text.split(new RegExp(`[${separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}]`));
+      let added = false;
+      for (const part of parts) {
+        if (addTag(part)) added = true;
+      }
+      if (added) setInputValue("");
+    };
+    const handleBlur = () => {
+      setShowSuggestions(false);
+      if (addOnBlur && inputValue.trim()) {
+        if (addTag(inputValue)) setInputValue("");
+      }
+    };
+    const filteredSuggestions = useMemo(() => {
+      if (!suggestions || !inputValue.trim()) return [];
+      const q = inputValue.toLowerCase();
+      return suggestions.filter(
+        (s) => s.toLowerCase().includes(q) && (allowDuplicates || !tags.includes(s))
+      );
+    }, [suggestions, inputValue, tags, allowDuplicates]);
+    const handleInputChange = (e) => {
+      setInputValue(e.target.value);
+      setShowSuggestions(!!e.target.value.trim() && !!suggestions?.length);
+      setHighlightedIdx(-1);
+    };
+    const atMax = !!maxTags && tags.length >= maxTags;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "tagsInput_root",
+          "flex flex-col gap-1.5",
+          fullWidth ? "w-full" : "inline-flex",
+          colorVars[color],
+          classNames?.root,
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("label", { "data-slot": "label", className: "text-sm font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "wrapper",
+                className: cn(
+                  "tagsInput_wrapper",
+                  wrapperVariants({ size, status: error ? "error" : "default" }),
+                  disabled && "opacity-50 cursor-not-allowed",
+                  classNames?.wrapper
+                ),
+                onClick: () => !disabled && !readOnly && inputRef.current?.focus(),
+                children: [
+                  tags.map((tag, idx) => /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-slot": "tag",
+                      className: cn("tagsInput_tag", tagVariants({ size }), classNames?.tag),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: cn("tagsInput_tagLabel truncate max-w-[150px]", classNames?.tagLabel), children: tag }),
+                        !readOnly && !disabled && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              removeTag(idx);
+                            },
+                            className: cn("tagsInput_tagClose shrink-0 hover:text-slot-80 cursor-pointer", classNames?.tagClose),
+                            "aria-label": `Remove ${tag}`,
+                            tabIndex: -1,
+                            children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                          }
+                        )
+                      ]
+                    },
+                    `${tag}-${idx}`
+                  )),
+                  !atMax && !readOnly && !disabled && /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      value: inputValue,
+                      onChange: handleInputChange,
+                      onKeyDown: handleKeyDown,
+                      onPaste: handlePaste,
+                      onBlur: handleBlur,
+                      onFocus: () => inputValue.trim() && suggestions?.length && setShowSuggestions(true),
+                      placeholder: tags.length === 0 ? placeholder : "",
+                      disabled,
+                      readOnly,
+                      "data-slot": "input",
+                      className: cn(
+                        "tagsInput_input",
+                        "flex-1 min-w-[60px] bg-transparent outline-none placeholder:text-text-secondary/50",
+                        classNames?.input
+                      )
+                    }
+                  ),
+                  clearable && tags.length > 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        update([]);
+                      },
+                      className: "shrink-0 text-text-secondary hover:text-text-primary",
+                      "aria-label": "Clear all tags",
+                      tabIndex: -1,
+                      children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+                    }
+                  )
+                ]
+              }
+            ),
+            showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute z-[var(--z-popover)] mt-1 w-full rounded-md border border-border bg-background shadow-md max-h-[200px] overflow-auto", children: filteredSuggestions.map((s, idx) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  addTag(s);
+                  setInputValue("");
+                  setShowSuggestions(false);
+                },
+                onMouseEnter: () => setHighlightedIdx(idx),
+                className: cn(
+                  "px-3 py-1.5 text-sm cursor-pointer transition-colors",
+                  idx === highlightedIdx ? "bg-surface text-text-primary" : "text-text-primary hover:bg-surface"
+                ),
+                children: s
+              },
+              s
+            )) })
+          ] }),
+          (error || helperText) && /* @__PURE__ */ jsx("p", { "data-slot": "message", className: cn("text-xs", error ? statusMessageVariants({ status: "error" }) : "text-text-secondary"), children: error || helperText })
+        ]
+      }
+    );
+  }
+);
+TagsInput.displayName = "TagsInput";
+var tags_input_default = TagsInput;
+function getTargetElement(target) {
+  if (typeof target === "function") return target();
+  return document.querySelector(target);
+}
+function getTargetBorderRadius(el) {
+  if (typeof window === "undefined") return "0px";
+  return getComputedStyle(el).borderRadius || "0px";
+}
+function computePopoverPosition(rect, placement, gap) {
+  const base = placement.split("-")[0];
+  const align = placement.split("-")[1];
+  let top = 0;
+  let left = 0;
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  if (base === "bottom") {
+    top = rect.bottom + gap;
+    left = align === "start" ? rect.left : align === "end" ? rect.right : cx;
+  } else if (base === "top") {
+    top = rect.top - gap;
+    left = align === "start" ? rect.left : align === "end" ? rect.right : cx;
+  } else if (base === "left") {
+    top = align === "start" ? rect.top : align === "end" ? rect.bottom : cy;
+    left = rect.left - gap;
+  } else {
+    top = align === "start" ? rect.top : align === "end" ? rect.bottom : cy;
+    left = rect.right + gap;
+  }
+  return { top, left };
+}
+function getPopoverStyle(rect, placement, gap) {
+  const base = placement.split("-")[0];
+  const align = placement.split("-")[1];
+  const pos = computePopoverPosition(rect, placement, gap);
+  const style = {
+    position: "fixed",
+    top: pos.top,
+    left: pos.left
+  };
+  if (base === "bottom") {
+    if (!align) style.transform = "translateX(-50%)";
+    else if (align === "end") style.transform = "translateX(-100%)";
+  } else if (base === "top") {
+    if (!align) style.transform = "translate(-50%, -100%)";
+    else if (align === "start") style.transform = "translateY(-100%)";
+    else style.transform = "translate(-100%, -100%)";
+  } else if (base === "left") {
+    if (!align) style.transform = "translate(-100%, -50%)";
+    else if (align === "start") style.transform = "translateX(-100%)";
+    else style.transform = "translate(-100%, -100%)";
+  } else {
+    if (!align) style.transform = "translateY(-50%)";
+    else if (align === "end") style.transform = "translateY(-100%)";
+  }
+  return style;
+}
+var sizeMap3 = {
+  xs: { padding: 4, gap: 8, popover: "p-3 max-w-[260px]", title: "text-sm font-semibold", desc: "text-xs", btn: "h-6 px-2.5 text-xs" },
+  sm: { padding: 6, gap: 10, popover: "p-3.5 max-w-[300px]", title: "text-sm font-semibold", desc: "text-sm", btn: "h-7 px-3 text-xs" },
+  md: { padding: 8, gap: 12, popover: "p-4 max-w-[340px]", title: "text-base font-semibold", desc: "text-sm", btn: "h-8 px-3 text-sm" },
+  lg: { padding: 10, gap: 14, popover: "p-5 max-w-[400px]", title: "text-lg font-semibold", desc: "text-base", btn: "h-9 px-4 text-sm" }
+};
+var EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
+var DURATION = "350ms";
+var Tour = React4.memo(
+  ({
+    steps,
+    open: controlledOpen,
+    onOpenChange,
+    current: controlledCurrent,
+    onCurrentChange,
+    color = "primary",
+    size = "md",
+    showProgress = true,
+    showSkip = true,
+    skipText = "Skip",
+    finishText = "Finish",
+    nextText = "Next",
+    prevText = "Back",
+    onFinish,
+    onSkip,
+    overlayClickable = false,
+    className,
+    classNames
+  }) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [internalCurrent, setInternalCurrent] = useState(0);
+    const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+    const current = controlledCurrent !== void 0 ? controlledCurrent : internalCurrent;
+    const [targetRect, setTargetRect] = useState(null);
+    const [targetRadius, setTargetRadius] = useState("0px");
+    const [entering, setEntering] = useState(false);
+    const [contentFading, setContentFading] = useState(false);
+    const popoverRef = useRef(null);
+    const setOpen = useCallback(
+      (v) => {
+        if (controlledOpen === void 0) setInternalOpen(v);
+        onOpenChange?.(v);
+      },
+      [controlledOpen, onOpenChange]
+    );
+    const setCurrent = useCallback(
+      (v) => {
+        setContentFading(true);
+        setTimeout(() => {
+          if (controlledCurrent === void 0) setInternalCurrent(v);
+          onCurrentChange?.(v);
+          setContentFading(false);
+        }, 150);
+      },
+      [controlledCurrent, onCurrentChange]
+    );
+    const step = steps[current];
+    const s = sizeMap3[size];
+    useEffect(() => {
+      if (isOpen) {
+        setEntering(true);
+        const t = setTimeout(() => setEntering(false), 400);
+        return () => clearTimeout(t);
+      }
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen || !step) {
+        setTargetRect(null);
+        return;
+      }
+      const el = getTargetElement(step.target);
+      if (!el) {
+        setTargetRect(null);
+        return;
+      }
+      const updateRect = () => {
+        setTargetRect(el.getBoundingClientRect());
+        setTargetRadius(getTargetBorderRadius(el));
+      };
+      updateRect();
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      const ro = new ResizeObserver(updateRect);
+      ro.observe(el);
+      window.addEventListener("scroll", updateRect, { passive: true });
+      window.addEventListener("resize", updateRect, { passive: true });
+      return () => {
+        ro.disconnect();
+        window.removeEventListener("scroll", updateRect);
+        window.removeEventListener("resize", updateRect);
+      };
+    }, [isOpen, current, step]);
+    const handleNext = () => {
+      step?.onNext?.();
+      if (current < steps.length - 1) setCurrent(current + 1);
+      else {
+        setOpen(false);
+        onFinish?.();
+      }
+    };
+    const handlePrev = () => {
+      step?.onPrev?.();
+      if (current > 0) setCurrent(current - 1);
+    };
+    const handleSkip = () => {
+      setOpen(false);
+      if (controlledCurrent === void 0) setInternalCurrent(0);
+      onSkip?.();
+    };
+    useEffect(() => {
+      if (!isOpen) return;
+      const handleEsc = (e) => {
+        if (e.key === "Escape") handleSkip();
+      };
+      document.addEventListener("keydown", handleEsc);
+      return () => document.removeEventListener("keydown", handleEsc);
+    }, [isOpen]);
+    if (!isOpen || !step) return null;
+    const placement = step.placement || "bottom";
+    const isLast = current === steps.length - 1;
+    const spotlightStyle = targetRect ? {
+      position: "fixed",
+      top: targetRect.top - s.padding,
+      left: targetRect.left - s.padding,
+      width: targetRect.width + s.padding * 2,
+      height: targetRect.height + s.padding * 2,
+      borderRadius: targetRadius,
+      boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.5)",
+      transition: entering ? "none" : `top ${DURATION} ${EASE}, left ${DURATION} ${EASE}, width ${DURATION} ${EASE}, height ${DURATION} ${EASE}, border-radius ${DURATION} ${EASE}`,
+      pointerEvents: "none",
+      opacity: entering ? 0 : 1,
+      animation: entering ? "none" : void 0
+    } : {
+      position: "fixed",
+      inset: 0,
+      background: "rgba(0,0,0,0.5)"
+    };
+    const popoverStyle = targetRect ? {
+      ...getPopoverStyle(targetRect, placement, s.gap),
+      transition: entering ? "none" : `top ${DURATION} ${EASE}, left ${DURATION} ${EASE}, bottom ${DURATION} ${EASE}, right ${DURATION} ${EASE}, opacity 150ms ease`,
+      opacity: contentFading ? 0 : 1
+    } : { position: "fixed", opacity: 0 };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn("tour_root", colorVars[color], classNames?.root, className),
+        style: { opacity: entering ? 0 : 1, transition: `opacity 300ms ${EASE}` },
+        ref: (el) => {
+          if (el && entering) requestAnimationFrame(() => setEntering(false));
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "overlay",
+              className: cn("tour_overlay", "z-[var(--z-overlay)]", classNames?.overlay),
+              onClick: overlayClickable ? handleSkip : void 0,
+              style: spotlightStyle
+            }
+          ),
+          targetRect && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "highlight",
+              className: "fixed z-[var(--z-overlay)] pointer-events-none",
+              style: {
+                top: targetRect.top - s.padding,
+                left: targetRect.left - s.padding,
+                width: targetRect.width + s.padding * 2,
+                height: targetRect.height + s.padding * 2,
+                borderRadius: targetRadius,
+                boxShadow: "0 0 0 2px var(--color-slot, #3b82f6), 0 0 12px 2px color-mix(in srgb, var(--color-slot, #3b82f6) 30%, transparent)",
+                transition: `top ${DURATION} ${EASE}, left ${DURATION} ${EASE}, width ${DURATION} ${EASE}, height ${DURATION} ${EASE}, border-radius ${DURATION} ${EASE}`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: popoverRef,
+              "data-slot": "popover",
+              className: cn(
+                "tour_popover",
+                "z-[calc(var(--z-overlay)+1)] rounded-lg border border-border bg-background shadow-lg",
+                s.popover,
+                classNames?.popover
+              ),
+              style: popoverStyle,
+              children: [
+                step.cover && /* @__PURE__ */ jsx("div", { "data-slot": "cover", className: cn("tour_cover", "mb-3 rounded-md overflow-hidden", classNames?.cover), children: step.cover }),
+                /* @__PURE__ */ jsx("div", { "data-slot": "title", className: cn("tour_title", s.title, "text-text-primary", classNames?.title), children: step.title }),
+                step.description && /* @__PURE__ */ jsx("div", { "data-slot": "description", className: cn("tour_description", s.desc, "text-text-secondary mt-1", classNames?.description), children: step.description }),
+                /* @__PURE__ */ jsxs("div", { "data-slot": "footer", className: cn("tour_footer", "flex items-center justify-between mt-3 gap-2", classNames?.footer), children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: showProgress && /* @__PURE__ */ jsxs("span", { "data-slot": "indicator", className: cn("tour_indicator", "text-xs text-text-secondary", classNames?.indicator), children: [
+                    current + 1,
+                    " / ",
+                    steps.length
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    showSkip && !isLast && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleSkip,
+                        className: cn("inline-flex items-center justify-center rounded-md text-text-secondary hover:text-text-primary transition-colors font-medium cursor-pointer", s.btn),
+                        children: skipText
+                      }
+                    ),
+                    current > 0 && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handlePrev,
+                        className: cn("inline-flex items-center justify-center rounded-md border border-border bg-background text-text-primary hover:bg-surface transition-colors font-medium cursor-pointer", s.btn),
+                        children: step.prevText || prevText
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleNext,
+                        className: cn("inline-flex items-center justify-center rounded-md bg-slot text-slot-fg hover:bg-slot-90 transition-colors font-medium cursor-pointer", s.btn),
+                        children: isLast ? finishText : step.nextText || nextText
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tour.displayName = "Tour";
+var tour_default = Tour;
+var levelElements = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var levelClasses = {
+  h1: "text-4xl font-bold tracking-tight",
+  h2: "text-3xl font-semibold tracking-tight",
+  h3: "text-2xl font-semibold",
+  h4: "text-xl font-semibold",
+  h5: "text-lg font-medium",
+  h6: "text-base font-medium"
+};
+var sizeClasses2 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl"
+};
+var weightClasses = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var textColorClasses = {
+  default: "text-text-primary",
+  primary: "text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-secondary/60",
+  accent: "text-accent",
+  success: "text-success",
+  error: "text-error",
+  warning: "text-warning",
+  info: "text-info",
+  inherit: ""
+};
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      className: "inline-flex items-center ml-1 text-text-secondary hover:text-text-primary transition-colors cursor-pointer",
+      "aria-label": "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+      ] })
+    }
+  );
+}
+function useTruncation(truncate, ref) {
+  const [expanded, setExpanded] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
+  useEffect(() => {
+    if (!truncate || expanded || !ref.current) return;
+    const el = ref.current;
+    setIsTruncated(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+  }, [truncate, expanded, ref]);
+  return { expanded, setExpanded, isTruncated };
+}
+var Title = React4.memo(
+  ({ level = "h1", color = "default", copyable = false, className, children, ...props }) => {
+    const Tag = levelElements[level];
+    const textContent = typeof children === "string" ? children : "";
+    return React4.createElement(
+      Tag,
+      {
+        "data-slot": "title",
+        className: cn("typography_title", levelClasses[level], textColorClasses[color] || "", className),
+        ...props
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        copyable && textContent && /* @__PURE__ */ jsx(CopyButton, { text: textContent })
+      ] })
+    );
+  }
+);
+Title.displayName = "Title";
+var Text = React4.memo(
+  ({
+    size = "md",
+    weight,
+    color = "default",
+    truncate,
+    copyable = false,
+    code = false,
+    mark = false,
+    del: deleted = false,
+    underline = false,
+    strong = false,
+    italic = false,
+    as: Component = "span",
+    className,
+    children,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const { expanded, setExpanded, isTruncated } = useTruncation(truncate, ref);
+    const textContent = typeof children === "string" ? children : "";
+    const truncateClass = !expanded && truncate ? typeof truncate === "number" ? `line-clamp-${truncate}` : "truncate" : "";
+    let content = children;
+    if (code) content = /* @__PURE__ */ jsx("code", { className: "px-1 py-0.5 rounded bg-surface text-sm font-mono", children: content });
+    if (mark) content = /* @__PURE__ */ jsx("mark", { className: "bg-warning/20 px-0.5 rounded-sm", children: content });
+    if (deleted) content = /* @__PURE__ */ jsx("del", { children: content });
+    if (underline) content = /* @__PURE__ */ jsx("u", { children: content });
+    if (strong) content = /* @__PURE__ */ jsx("strong", { children: content });
+    if (italic) content = /* @__PURE__ */ jsx("em", { children: content });
+    return React4.createElement(
+      Component,
+      {
+        ref,
+        "data-slot": "text",
+        className: cn(
+          "typography_text",
+          sizeClasses2[size],
+          weight && weightClasses[weight],
+          textColorClasses[color] || "",
+          truncateClass,
+          className
+        ),
+        ...props
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        content,
+        copyable && textContent && /* @__PURE__ */ jsx(CopyButton, { text: textContent }),
+        isTruncated && !expanded && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(true),
+            className: "text-primary hover:text-primary/80 ml-1 text-inherit cursor-pointer",
+            children: "more"
+          }
+        )
+      ] })
+    );
+  }
+);
+Text.displayName = "Text";
+var Paragraph = React4.memo(
+  ({
+    size = "md",
+    color = "default",
+    truncate,
+    copyable = false,
+    className,
+    children,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const { expanded, setExpanded, isTruncated } = useTruncation(truncate, ref);
+    const textContent = typeof children === "string" ? children : "";
+    const truncateClass = !expanded && truncate ? typeof truncate === "number" ? `line-clamp-${truncate}` : "truncate" : "";
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        ref,
+        "data-slot": "paragraph",
+        className: cn(
+          "typography_paragraph",
+          sizeClasses2[size],
+          textColorClasses[color] || "",
+          truncateClass,
+          "leading-relaxed",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          copyable && textContent && /* @__PURE__ */ jsx(CopyButton, { text: textContent }),
+          isTruncated && !expanded && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded(true),
+              className: "text-primary hover:text-primary/80 ml-1 text-inherit cursor-pointer",
+              children: "more"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Paragraph.displayName = "Paragraph";
+function generateWatermark({
+  text,
+  image,
+  width = 120,
+  height = 64,
+  rotate = -22,
+  gap = [100, 100],
+  offset = [0, 0],
+  fontSize = 14,
+  fontFamily = "sans-serif",
+  fontWeight = "normal",
+  fontColor = "rgba(0,0,0,0.15)",
+  opacity = 1
+}) {
+  return new Promise((resolve) => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const ratio = window.devicePixelRatio || 1;
+    const cellWidth = width + gap[0];
+    const cellHeight = height + gap[1];
+    canvas.width = cellWidth * ratio;
+    canvas.height = cellHeight * ratio;
+    ctx.scale(ratio, ratio);
+    ctx.globalAlpha = opacity;
+    ctx.translate(cellWidth / 2 + offset[0], cellHeight / 2 + offset[1]);
+    ctx.rotate(rotate * Math.PI / 180);
+    if (image) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        ctx.drawImage(img, -width / 2, -height / 2, width, height);
+        resolve(canvas.toDataURL());
+      };
+      img.onerror = () => resolve("");
+      img.src = image;
+    } else if (text) {
+      ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+      ctx.fillStyle = fontColor;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const lines = Array.isArray(text) ? text : [text];
+      const lineHeight = fontSize * 1.5;
+      const startY = -((lines.length - 1) * lineHeight) / 2;
+      lines.forEach((line, i) => {
+        ctx.fillText(line, 0, startY + i * lineHeight);
+      });
+      resolve(canvas.toDataURL());
+    } else {
+      resolve("");
+    }
+  });
+}
+var Watermark = React4.memo(
+  ({
+    children,
+    text,
+    image,
+    width = 120,
+    height = 64,
+    rotate = -22,
+    gap = [100, 100],
+    offset = [0, 0],
+    fontSize = 14,
+    fontFamily = "sans-serif",
+    fontWeight = "normal",
+    fontColor = "rgba(0,0,0,0.15)",
+    opacity = 1,
+    zIndex = 10,
+    className,
+    classNames
+  }) => {
+    const [bgImage, setBgImage] = useState("");
+    const containerRef = useRef(null);
+    const watermarkRef = useRef(null);
+    const observerRef = useRef(null);
+    const render = useCallback(async () => {
+      if (typeof window === "undefined") return;
+      const dataUrl = await generateWatermark({
+        text,
+        image,
+        width,
+        height,
+        rotate,
+        gap,
+        offset,
+        fontSize,
+        fontFamily,
+        fontWeight,
+        fontColor,
+        opacity
+      });
+      setBgImage(dataUrl);
+    }, [text, image, width, height, rotate, gap, offset, fontSize, fontFamily, fontWeight, fontColor, opacity]);
+    useEffect(() => {
+      render();
+    }, [render]);
+    useEffect(() => {
+      if (!watermarkRef.current || !containerRef.current) return;
+      observerRef.current = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          if (m.type === "childList") {
+            const removed = Array.from(m.removedNodes);
+            if (removed.includes(watermarkRef.current)) {
+              render();
+              return;
+            }
+          }
+          if (m.type === "attributes" && m.target === watermarkRef.current) {
+            render();
+            return;
+          }
+        }
+      });
+      observerRef.current.observe(containerRef.current, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+      return () => observerRef.current?.disconnect();
+    }, [render]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        "data-slot": "root",
+        className: cn("watermark_root", "relative", classNames?.root, className),
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "content", className: cn("watermark_content", "relative", classNames?.content), children }),
+          bgImage && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: watermarkRef,
+              "data-slot": "watermark",
+              className: cn("watermark_layer", "absolute inset-0 pointer-events-none", classNames?.watermark),
+              style: {
+                backgroundImage: `url(${bgImage})`,
+                backgroundRepeat: "repeat",
+                zIndex
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Watermark.displayName = "Watermark";
+var watermark_default = Watermark;
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -96,26 +3056,6 @@ function useThrottle(value, interval) {
   }, [value, interval]);
   return throttledValue;
 }
-function useControllable({
-  value,
-  defaultValue,
-  onChange
-}) {
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const currentValue = isControlled ? value : internalValue;
-  const setValue = useCallback(
-    (next) => {
-      const nextValue = typeof next === "function" ? next(currentValue) : next;
-      if (!isControlled) {
-        setInternalValue(nextValue);
-      }
-      onChange?.(nextValue);
-    },
-    [isControlled, currentValue, onChange]
-  );
-  return [currentValue, setValue];
-}
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
@@ -128,6 +3068,6 @@ function useMediaQuery(query) {
   return matches;
 }
 
-export { themePresets, useControllable, useDebounce, useMediaQuery, useThrottle };
+export { anchor_default as Anchor, autocomplete_default as Autocomplete, BackTop, calendar_default as Calendar, ColorInput, ColorPicker, FloatButton, FloatButtonGroup, mentions_default as Mentions, Paragraph, qr_code_default as QRCode, ResizableHandle, ResizablePanel, ResizablePanelGroup, result_default as Result, tags_input_default as TagsInput, Text, Title, tour_default as Tour, watermark_default as Watermark, themePresets, useDebounce, useMediaQuery, useThrottle };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map