@moontra/moonui 2.2.0 → 2.2.1

package/dist/index.mjs

@@ -1,10 +1,12 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+'use client';
+
 import * as t from 'react';
 import t__default, { useState, useCallback, useEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronUp, ChevronRight, Circle, Upload, Bold, Italic, Underline, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code, Link, Image, Palette, Undo, Redo, Edit, Eye, Copy, Download, RefreshCw, Columns, ArrowDown, ArrowUp, ArrowUpDown, ChevronsLeft, ChevronLeft, ChevronsRight, Calendar as Calendar$1, Clock, CheckCircle, Star, GitFork, ExternalLink, Video, Music, FileText, File } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, CreditCard, Minus, Search, ChevronUp, ChevronRight, Circle, Upload, Phone, Bold, Italic, Underline, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code, Link, Image, Palette, Undo, Redo, Edit, Eye, Copy, Download, RefreshCw, Columns, ArrowDown, ArrowUp, ArrowUpDown, ChevronsLeft, ChevronLeft, ChevronsRight, Calendar as Calendar$1, Clock, CheckCircle, Star, GitFork, ExternalLink, Crown, Lock, Zap, Video, Music, FileText, File } from 'lucide-react';
 export { Palette, Pipette } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -25,8 +27,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
-/** @license MoonUI v1.0.0 - MIT License - https://moonui.dev */
-
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -109,7 +109,17 @@ var alertVariants = cva(
   }
 );
 var Alert = t.forwardRef(
-  ({ className, variant = "default", size, radius, hideIcon = false, closable = false, onClose, children, ...props }, ref) => {
+  ({
+    className,
+    variant = "default",
+    size,
+    radius,
+    hideIcon = false,
+    closable = false,
+    onClose,
+    children,
+    ...props
+  }, ref) => {
     const Icon2 = t.useMemo(() => {
       switch (variant) {
         case "success":
@@ -129,7 +139,16 @@ var Alert = t.forwardRef(
       {
         ref,
         role: "alert",
-        className: cn("moonui-theme", alertVariants({ variant, size, radius, withClose: closable }), className),
+        className: cn(
+          "moonui-theme",
+          alertVariants({
+            variant,
+            size,
+            radius,
+            withClose: closable
+          }),
+          className
+        ),
         ...props,
         children: [
           !hideIcon && /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5" }),
@@ -153,7 +172,11 @@ var AlertTitle = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "h5",
   {
     ref,
-    className: cn("moonui-theme", "font-semibold leading-tight tracking-tight mb-1", className),
+    className: cn(
+      "moonui-theme",
+      "font-semibold leading-tight tracking-tight mb-1",
+      className
+    ),
     ...props
   }
 ));
@@ -162,7 +185,11 @@ var AlertDescription = t.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "div",
   {
     ref,
-    className: cn("moonui-theme", "text-sm leading-5 text-muted-foreground", className),
+    className: cn(
+      "moonui-theme",
+      "text-sm leading-5 text-muted-foreground",
+      className
+    ),
     ...props
   }
 ));
@@ -311,7 +338,7 @@ var AvatarGroup = t.forwardRef(
 AvatarGroup.displayName = "AvatarGroup";
 var badgeVariants = cva(
   [
-    "inline-flex items-center gap-1.5",
+    "inline-flex items-center justify-center gap-1.5",
     "font-medium transition-colors duration-200",
     "border focus:outline-none",
     "focus-visible:ring-2 focus-visible:ring-offset-1"
@@ -320,23 +347,23 @@ var badgeVariants = cva(
     variants: {
       variant: {
         primary: [
-          "border-transparent bg-primary text-primary-foreground",
-          "hover:bg-primary-hover dark:hover:bg-primary/90",
-          "focus-visible:ring-primary/30 dark:focus-visible:ring-primary/40",
-          "dark:bg-primary/90 dark:text-white dark:shadow-inner dark:shadow-primary/10"
+          "border-transparent bg-gray-900 text-white",
+          "hover:bg-gray-800 dark:hover:bg-gray-700",
+          "focus-visible:ring-gray-500/30 dark:focus-visible:ring-gray-400/40",
+          "dark:bg-gray-700 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10"
         ],
         secondary: [
           "border-transparent bg-secondary text-secondary-foreground",
-          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
+          "hover:bg-gray-200 dark:hover:bg-gray-600",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:bg-gray-800 dark:text-gray-100 dark:shadow-inner dark:shadow-gray-950/10"
+          "dark:bg-gray-700/50 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10"
         ],
         outline: [
-          "border-gray-200 dark:border-gray-700",
+          "border-gray-200 dark:border-gray-600",
           "bg-transparent text-foreground",
-          "hover:border-gray-300 dark:hover:border-gray-600",
+          "hover:border-gray-300 dark:hover:border-gray-500",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:bg-transparent dark:backdrop-blur-sm"
+          "dark:text-gray-100 dark:bg-transparent dark:backdrop-blur-sm"
         ],
         destructive: [
           "border-transparent bg-error text-white",
@@ -357,11 +384,11 @@ var badgeVariants = cva(
           "dark:bg-warning/90 dark:text-gray-900 dark:shadow-inner dark:shadow-warning/10"
         ],
         ghost: [
-          "border-transparent bg-transparent text-foreground",
-          "hover:bg-gray-100 dark:hover:bg-gray-800/80",
+          "border border-gray-200 bg-gray-50/50 text-gray-700",
+          "hover:bg-gray-100 dark:hover:bg-gray-800/60",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:backdrop-blur-sm",
-          "transition-colors duration-200"
+          "dark:border-gray-700 dark:bg-gray-800/30 dark:text-gray-300",
+          "transition-all duration-200"
         ],
         pro: [
           "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
@@ -440,9 +467,9 @@ function Badge({
             "aria-hidden": "true"
           }
         ),
-        autoLeftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: autoLeftIcon }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: autoChildren }),
-        rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: rightIcon }),
+        autoLeftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: autoLeftIcon }),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: autoChildren }),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: rightIcon }),
         removable && onRemove && /* @__PURE__ */ jsx(
           "button",
           {
@@ -653,11 +680,11 @@ var buttonVariants = cva(
           "transition-all duration-200"
         ],
         secondary: [
-          "bg-muted text-muted-foreground",
-          "dark:bg-muted dark:text-muted-foreground",
-          "hover:bg-muted/80 dark:hover:bg-muted/80",
-          "active:bg-muted/70 dark:active:bg-muted/70",
-          "border border-input dark:border-input",
+          "bg-gray-100 text-gray-900",
+          "dark:bg-gray-800 dark:text-gray-100",
+          "hover:bg-gray-200 dark:hover:bg-gray-700",
+          "active:bg-gray-300 dark:active:bg-gray-600",
+          "border border-gray-200 dark:border-gray-700",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "shadow-sm hover:shadow-md"
         ],
@@ -671,10 +698,10 @@ var buttonVariants = cva(
           "transition-all duration-200"
         ],
         ghost: [
-          "text-foreground",
-          "dark:text-foreground",
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
-          "active:bg-accent/80 dark:active:bg-accent/80",
+          "text-gray-700",
+          "dark:text-gray-300",
+          "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+          "active:bg-gray-200 dark:active:bg-gray-700",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200"
         ],
@@ -704,19 +731,21 @@ var buttonVariants = cva(
           "transition-colors duration-200"
         ],
         gradient: [
-          "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
-          "hover:from-blue-700 hover:to-purple-700",
-          "active:from-blue-800 active:to-purple-800",
-          "shadow-lg shadow-purple-500/25",
+          "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
+          "hover:from-purple-600 hover:to-pink-600",
+          "active:from-purple-700 active:to-pink-700",
+          "shadow-xl shadow-purple-500/40",
+          "hover:shadow-2xl hover:shadow-purple-500/50",
           "focus-visible:ring-purple-500/50",
           "transition-all duration-300"
         ],
         glow: [
-          "bg-primary text-primary-foreground",
-          "shadow-lg shadow-primary/50",
-          "hover:shadow-xl hover:shadow-primary/60",
-          "active:shadow-md active:shadow-primary/40",
-          "focus-visible:ring-primary/50",
+          "bg-blue-500 text-white",
+          "shadow-[0_0_30px_rgba(59,130,246,0.5)]",
+          "hover:shadow-[0_0_40px_rgba(59,130,246,0.7)]",
+          "active:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
+          "hover:bg-blue-600",
+          "focus-visible:ring-blue-500/50",
           "transition-all duration-300"
         ],
         soft: [
@@ -740,29 +769,31 @@ var buttonVariants = cva(
           "transition-all duration-200"
         ],
         neon: [
-          "bg-transparent text-primary",
-          "border-2 border-primary",
-          "hover:bg-primary hover:text-primary-foreground",
-          "hover:shadow-[0_0_20px_rgba(var(--primary),0.5)]",
-          "active:shadow-[0_0_10px_rgba(var(--primary),0.3)]",
-          "focus-visible:ring-primary/50",
+          "bg-transparent text-green-400",
+          "border-2 border-green-400",
+          "hover:bg-green-400 hover:text-gray-900",
+          "hover:shadow-[0_0_30px_rgba(74,222,128,0.6)]",
+          "active:shadow-[0_0_15px_rgba(74,222,128,0.4)]",
+          "focus-visible:ring-green-400/50",
           "transition-all duration-300"
         ]
       },
       size: {
-        xs: "h-7 px-2.5 text-xs rounded-md",
-        sm: "h-8 px-3 text-sm rounded-md",
-        md: "h-10 px-4 text-base rounded-lg",
-        lg: "h-12 px-6 text-lg rounded-lg",
-        xl: "h-14 px-8 text-xl rounded-xl",
-        icon: "h-10 w-10 p-2 rounded-lg",
-        "icon-sm": "h-8 w-8 p-1.5 rounded-md",
-        "icon-lg": "h-12 w-12 p-3 rounded-xl"
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+        xl: "h-14 px-8 text-xl",
+        icon: "h-10 w-10 p-2",
+        "icon-sm": "h-8 w-8 p-1.5",
+        "icon-lg": "h-12 w-12 p-3"
       },
       rounded: {
-        default: "",
+        default: "rounded-xl",
         full: "rounded-full",
-        none: "rounded-none"
+        none: "rounded-none",
+        sm: "rounded-lg",
+        lg: "rounded-2xl"
       },
       fullWidth: {
         true: "w-full"
@@ -942,32 +973,6 @@ var tapAnimations = {
     transition: { duration: 0.1 }
   }
 };
-var pageTransitions = {
-  fadeIn: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-    transition: { duration: 0.3 }
-  },
-  slideUp: {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: -20 },
-    transition: springAnimations.smooth
-  },
-  slideRight: {
-    initial: { opacity: 0, x: -20 },
-    animate: { opacity: 1, x: 0 },
-    exit: { opacity: 0, x: 20 },
-    transition: springAnimations.smooth
-  },
-  scale: {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 1.05 },
-    transition: springAnimations.smooth
-  }
-};
 var skeletonAnimation = {
   initial: { opacity: 0.5 },
   animate: {
@@ -1082,6 +1087,183 @@ var CardFooter = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 CardFooter.displayName = "CardFooter";
+var getCardType = (number) => {
+  const patterns = {
+    visa: /^4/,
+    mastercard: /^5[1-5]/,
+    amex: /^3[47]/,
+    discover: /^6(?:011|5)/,
+    diners: /^3(?:0[0-5]|[68])/,
+    jcb: /^35/
+  };
+  for (const [type, pattern] of Object.entries(patterns)) {
+    if (pattern.test(number))
+      return type;
+  }
+  return "unknown";
+};
+var formatCardNumber = (value, cardType) => {
+  const cleaned = value.replace(/\s+/g, "");
+  const groups = cardType === "amex" ? [4, 6, 5] : [4, 4, 4, 4];
+  let formatted = "";
+  let position = 0;
+  for (const group of groups) {
+    if (position >= cleaned.length)
+      break;
+    if (formatted)
+      formatted += " ";
+    formatted += cleaned.slice(position, position + group);
+    position += group;
+  }
+  return formatted;
+};
+var CardNumberInput = t.forwardRef(
+  ({ className, value = "", onChange, showIcon = true, size, ...props }, ref) => {
+    const [cardType, setCardType] = t.useState("unknown");
+    const handleChange = (e) => {
+      const rawValue = e.target.value.replace(/\D/g, "");
+      const detectedType = getCardType(rawValue);
+      setCardType(detectedType);
+      const maxLength = detectedType === "amex" ? 15 : 16;
+      const truncated = rawValue.slice(0, maxLength);
+      const formatted = formatCardNumber(truncated, detectedType);
+      onChange?.(truncated, detectedType);
+      e.target.value = formatted;
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "cc-number",
+          placeholder: "1234 5678 9012 3456",
+          value: formatCardNumber(value, cardType),
+          onChange: handleChange,
+          className: cn(showIcon && "pl-10", className),
+          ...props
+        }
+      ),
+      showIcon && /* @__PURE__ */ jsx(CreditCard, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" })
+    ] });
+  }
+);
+CardNumberInput.displayName = "CardNumberInput";
+var CardExpiryInput = t.forwardRef(
+  ({ className, value = "", onChange, size, ...props }, ref) => {
+    const handleChange = (e) => {
+      let rawValue = e.target.value.replace(/\D/g, "");
+      if (rawValue.length >= 2) {
+        const month = parseInt(rawValue.slice(0, 2));
+        if (month > 12) {
+          rawValue = "12" + rawValue.slice(2);
+        } else if (month === 0) {
+          rawValue = "01" + rawValue.slice(2);
+        }
+      }
+      rawValue = rawValue.slice(0, 4);
+      let formatted = rawValue;
+      if (rawValue.length >= 2) {
+        formatted = rawValue.slice(0, 2) + "/" + rawValue.slice(2);
+      }
+      onChange?.(rawValue);
+      e.target.value = formatted;
+    };
+    const formattedValue = value.length >= 2 ? value.slice(0, 2) + "/" + value.slice(2) : value;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "cc-exp",
+        placeholder: "MM/YY",
+        value: formattedValue,
+        onChange: handleChange,
+        className,
+        ...props
+      }
+    );
+  }
+);
+CardExpiryInput.displayName = "CardExpiryInput";
+var CardCVCInput = t.forwardRef(
+  ({ className, value = "", onChange, cardType = "unknown", size, ...props }, ref) => {
+    const maxLength = cardType === "amex" ? 4 : 3;
+    const handleChange = (e) => {
+      const rawValue = e.target.value.replace(/\D/g, "").slice(0, maxLength);
+      onChange?.(rawValue);
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "cc-csc",
+        placeholder: cardType === "amex" ? "1234" : "123",
+        value,
+        onChange: handleChange,
+        maxLength,
+        className,
+        ...props
+      }
+    );
+  }
+);
+CardCVCInput.displayName = "CardCVCInput";
+var CardZipInput = t.forwardRef(
+  ({ className, value = "", onChange, format: format4 = "US", size, ...props }, ref) => {
+    const handleChange = (e) => {
+      let rawValue = e.target.value;
+      switch (format4) {
+        case "US":
+          rawValue = rawValue.replace(/\D/g, "").slice(0, 5);
+          break;
+        case "CA":
+          rawValue = rawValue.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6);
+          if (rawValue.length >= 3) {
+            rawValue = rawValue.slice(0, 3) + " " + rawValue.slice(3);
+          }
+          break;
+        case "UK":
+          rawValue = rawValue.toUpperCase().replace(/[^A-Z0-9\s]/g, "").slice(0, 8);
+          break;
+        default:
+          rawValue = rawValue.slice(0, 10);
+      }
+      onChange?.(rawValue.replace(/\s/g, ""));
+      e.target.value = rawValue;
+    };
+    const getPlaceholder = () => {
+      switch (format4) {
+        case "US":
+          return "12345";
+        case "CA":
+          return "K1A 0B1";
+        case "UK":
+          return "SW1A 1AA";
+        default:
+          return "Postal Code";
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "text",
+        autoComplete: "postal-code",
+        placeholder: getPlaceholder(),
+        value,
+        onChange: handleChange,
+        className,
+        ...props
+      }
+    );
+  }
+);
+CardZipInput.displayName = "CardZipInput";
 var checkboxVariants = cva(
   "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
   {
@@ -1232,7 +1414,7 @@ var CheckboxWithLabel = t.forwardRef(({
 });
 CheckboxWithLabel.displayName = "CheckboxWithLabel";
 
-// node_modules/@radix-ui/primitive/dist/index.mjs
+// ../../node_modules/@radix-ui/primitive/dist/index.mjs
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler?.(event);
@@ -3049,85 +3231,6 @@ function D(_) {
 function W(_, C, h) {
   return _ = h && h.length > 0 ? `${_ + " " + h.join(" ")}` : _, G(_, C, D(_), D(C), 0, 0, {});
 }
-var NODES2 = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-];
-var Primitive2 = NODES2.reduce((primitive, node) => {
-  const Slot = createSlot(`Primitive.${node}`);
-  const Node = t.forwardRef((props, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot : node;
-    if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
-  });
-  Node.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node };
-}, {});
-var useLayoutEffect22 = globalThis?.document ? t.useLayoutEffect : () => {
-};
-
-// ../../node_modules/@radix-ui/react-id/dist/index.mjs
-var useReactId2 = t[" useId ".trim().toString()] || (() => void 0);
-var count2 = 0;
-function useId3(deterministicId) {
-  const [id, setId] = t.useState(useReactId2());
-  useLayoutEffect22(() => {
-    if (!deterministicId)
-      setId((reactId) => reactId ?? String(count2++));
-  }, [deterministicId]);
-  return deterministicId || (id ? `radix-${id}` : "");
-}
-function setRef2(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs2(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef2(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef2(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-
-// ../../node_modules/cmdk/dist/index.mjs
 var N = '[cmdk-group=""]';
 var Y2 = '[cmdk-group-items=""]';
 var be = '[cmdk-group-heading=""]';
@@ -3145,7 +3248,7 @@ var me = t.forwardRef((r, o) => {
   let n = L(() => {
     var e, a;
     return { search: "", value: (a = (e = r.value) != null ? e : r.defaultValue) != null ? a : "", selectedItemId: void 0, filtered: { count: 0, items: /* @__PURE__ */ new Map(), groups: /* @__PURE__ */ new Set() } };
-  }), u2 = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p2 = pe(r), { label: b, children: m2, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = false, vimBindings: j = true, ...O } = r, $2 = useId3(), q = useId3(), _ = useId3(), I = t.useRef(null), v = ke();
+  }), u2 = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p2 = pe(r), { label: b, children: m2, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = false, vimBindings: j = true, ...O } = r, $2 = useId2(), q = useId2(), _ = useId2(), I = t.useRef(null), v = ke();
   k2(() => {
     if (R !== void 0) {
       let e = R.trim();
@@ -3260,7 +3363,7 @@ var me = t.forwardRef((r, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X7(e) {
+  function X8(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -3275,12 +3378,12 @@ var me = t.forwardRef((r, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X7(V().length - 1), ie = (e) => {
+  let oe = () => X8(V().length - 1), ie = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X7(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X8(0) : e.altKey ? re(-1) : Q(-1);
   };
-  return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
+  return t.createElement(Primitive.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
     (s = O.onKeyDown) == null || s.call(O, e);
     let a = e.nativeEvent.isComposing || e.keyCode === 229;
@@ -3305,7 +3408,7 @@ var me = t.forwardRef((r, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X7(0);
+          e.preventDefault(), X8(0);
           break;
         }
         case "End": {
@@ -3325,7 +3428,7 @@ var me = t.forwardRef((r, o) => {
 });
 var he = t.forwardRef((r, o) => {
   var _, I;
-  let n = useId3(), u2 = t.useRef(null), c = t.useContext(fe), d = K2(), f = pe(r), p2 = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
+  let n = useId2(), u2 = t.useRef(null), c = t.useContext(fe), d = K2(), f = pe(r), p2 = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
   k2(() => {
     if (!p2)
       return d.item(n, c == null ? void 0 : c.id);
@@ -3346,23 +3449,23 @@ var he = t.forwardRef((r, o) => {
   if (!x)
     return null;
   let { disabled: A, value: ge, onSelect: j, forceMount: O, keywords: $2, ...q } = r;
-  return t.createElement(Primitive2.div, { ref: composeRefs2(u2, o), ...q, id: n, "cmdk-item": "", role: "option", "aria-disabled": !!A, "aria-selected": !!R, "data-disabled": !!A, "data-selected": !!R, onPointerMove: A || d.getDisablePointerSelection() ? void 0 : S, onClick: A ? void 0 : C }, r.children);
+  return t.createElement(Primitive.div, { ref: composeRefs(u2, o), ...q, id: n, "cmdk-item": "", role: "option", "aria-disabled": !!A, "aria-selected": !!R, "data-disabled": !!A, "data-selected": !!R, onPointerMove: A || d.getDisablePointerSelection() ? void 0 : S, onClick: A ? void 0 : C }, r.children);
 });
 var Ee = t.forwardRef((r, o) => {
-  let { heading: n, children: u2, forceMount: c, ...d } = r, f = useId3(), p2 = t.useRef(null), b = t.useRef(null), m2 = useId3(), R = K2(), x = P((S) => c || R.filter() === false ? true : S.search ? S.filtered.groups.has(f) : true);
+  let { heading: n, children: u2, forceMount: c, ...d } = r, f = useId2(), p2 = t.useRef(null), b = t.useRef(null), m2 = useId2(), R = K2(), x = P((S) => c || R.filter() === false ? true : S.search ? S.filtered.groups.has(f) : true);
   k2(() => R.group(f), []), ve(f, p2, [r.value, r.heading, b]);
   let C = t.useMemo(() => ({ id: f, forceMount: c }), [c]);
-  return t.createElement(Primitive2.div, { ref: composeRefs2(p2, o), ...d, "cmdk-group": "", role: "presentation", hidden: x ? void 0 : true }, n && t.createElement("div", { ref: b, "cmdk-group-heading": "", "aria-hidden": true, id: m2 }, n), B2(r, (S) => t.createElement("div", { "cmdk-group-items": "", role: "group", "aria-labelledby": n ? m2 : void 0 }, t.createElement(fe.Provider, { value: C }, S))));
+  return t.createElement(Primitive.div, { ref: composeRefs(p2, o), ...d, "cmdk-group": "", role: "presentation", hidden: x ? void 0 : true }, n && t.createElement("div", { ref: b, "cmdk-group-heading": "", "aria-hidden": true, id: m2 }, n), B2(r, (S) => t.createElement("div", { "cmdk-group-items": "", role: "group", "aria-labelledby": n ? m2 : void 0 }, t.createElement(fe.Provider, { value: C }, S))));
 });
 var ye = t.forwardRef((r, o) => {
   let { alwaysRender: n, ...u2 } = r, c = t.useRef(null), d = P((f) => !f.search);
-  return !n && !d ? null : t.createElement(Primitive2.div, { ref: composeRefs2(c, o), ...u2, "cmdk-separator": "", role: "separator" });
+  return !n && !d ? null : t.createElement(Primitive.div, { ref: composeRefs(c, o), ...u2, "cmdk-separator": "", role: "separator" });
 });
 var Se = t.forwardRef((r, o) => {
   let { onValueChange: n, ...u2 } = r, c = r.value != null, d = ee(), f = P((m2) => m2.search), p2 = P((m2) => m2.selectedItemId), b = K2();
   return t.useEffect(() => {
     r.value != null && d.setState("search", r.value);
-  }, [r.value]), t.createElement(Primitive2.input, { ref: o, ...u2, "cmdk-input": "", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-expanded": true, "aria-controls": b.listId, "aria-labelledby": b.labelId, "aria-activedescendant": p2, id: b.inputId, type: "text", value: c ? r.value : f, onChange: (m2) => {
+  }, [r.value]), t.createElement(Primitive.input, { ref: o, ...u2, "cmdk-input": "", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-expanded": true, "aria-controls": b.listId, "aria-labelledby": b.labelId, "aria-activedescendant": p2, id: b.inputId, type: "text", value: c ? r.value : f, onChange: (m2) => {
     c || d.setState("search", m2.target.value), n == null || n(m2.target.value);
   } });
 });
@@ -3380,16 +3483,16 @@ var Ce = t.forwardRef((r, o) => {
         cancelAnimationFrame(x), C.unobserve(m2);
       };
     }
-  }, []), t.createElement(Primitive2.div, { ref: composeRefs2(d, o), ...c, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b.listId }, B2(r, (m2) => t.createElement("div", { ref: composeRefs2(f, b.listInnerRef), "cmdk-list-sizer": "" }, m2)));
+  }, []), t.createElement(Primitive.div, { ref: composeRefs(d, o), ...c, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b.listId }, B2(r, (m2) => t.createElement("div", { ref: composeRefs(f, b.listInnerRef), "cmdk-list-sizer": "" }, m2)));
 });
 var xe = t.forwardRef((r, o) => {
   let { open: n, onOpenChange: u2, overlayClassName: c, contentClassName: d, container: f, ...p2 } = r;
   return t.createElement(DialogPrimitive.Root, { open: n, onOpenChange: u2 }, t.createElement(DialogPrimitive.Portal, { container: f }, t.createElement(DialogPrimitive.Overlay, { "cmdk-overlay": "", className: c }), t.createElement(DialogPrimitive.Content, { "aria-label": r.label, "cmdk-dialog": "", className: d }, t.createElement(me, { ref: o, ...p2 }))));
 });
-var Ie = t.forwardRef((r, o) => P((u2) => u2.filtered.count === 0) ? t.createElement(Primitive2.div, { ref: o, ...r, "cmdk-empty": "", role: "presentation" }) : null);
+var Ie = t.forwardRef((r, o) => P((u2) => u2.filtered.count === 0) ? t.createElement(Primitive.div, { ref: o, ...r, "cmdk-empty": "", role: "presentation" }) : null);
 var Pe = t.forwardRef((r, o) => {
   let { progress: n, children: u2, label: c = "Loading...", ...d } = r;
-  return t.createElement(Primitive2.div, { ref: o, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c }, B2(r, (f) => t.createElement("div", { "aria-hidden": true }, f)));
+  return t.createElement(Primitive.div, { ref: o, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c }, B2(r, (f) => t.createElement("div", { "aria-hidden": true }, f)));
 });
 var _e = Object.assign(me, { List: Ce, Item: he, Input: Se, Group: Ee, Separator: ye, Dialog: xe, Empty: Ie, Loading: Pe });
 function we(r, o) {
@@ -4542,16 +4645,16 @@ var extent = (columnId, _leafRows, childRows) => {
   return [min2, max2];
 };
 var mean = (columnId, leafRows) => {
-  let count4 = 0;
+  let count3 = 0;
   let sum2 = 0;
   leafRows.forEach((row) => {
     let value = row.getValue(columnId);
     if (value != null && (value = +value) >= value) {
-      ++count4, sum2 += value;
+      ++count3, sum2 += value;
     }
   });
-  if (count4)
-    return sum2 / count4;
+  if (count3)
+    return sum2 / count3;
   return;
 };
 var median = (columnId, leafRows) => {
@@ -4575,7 +4678,7 @@ var unique = (columnId, leafRows) => {
 var uniqueCount = (columnId, leafRows) => {
   return new Set(leafRows.map((d) => d.getValue(columnId))).size;
 };
-var count3 = (_columnId, leafRows) => {
+var count2 = (_columnId, leafRows) => {
   return leafRows.length;
 };
 var aggregationFns = {
@@ -4587,7 +4690,7 @@ var aggregationFns = {
   median,
   unique,
   uniqueCount,
-  count: count3
+  count: count2
 };
 var ColumnGrouping = {
   getDefaultColumnDef: () => {
@@ -7118,10 +7221,14 @@ var SelectScrollDownButton = t.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = t.forwardRef(({ className, children, position = "item-aligned", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = t.forwardRef(({ className, children, position = "popper", side = "bottom", sideOffset = 4, align = "start", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
+    side,
+    sideOffset,
+    align,
+    avoidCollisions: false,
     className: cn(
       [
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
@@ -7700,49 +7807,47 @@ function DataTable({
       title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
       description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
-        enableFiltering && /* @__PURE__ */ jsx(Fragment, { children: customFilter || /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              placeholder: filterPlaceholder,
-              value: filterColumn ? table.getColumn(filterColumn)?.getFilterValue() ?? "" : globalFilter,
-              onChange: (event) => {
-                const value = event.target.value;
-                if (filterColumn) {
-                  table.getColumn(filterColumn)?.setFilterValue(value);
-                } else {
-                  setGlobalFilter(value);
-                }
-              },
-              className: "pl-8"
-            }
-          ),
-          (filterColumn && table.getColumn(filterColumn)?.getFilterValue() || !filterColumn && globalFilter) && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              className: "absolute right-0 top-0 h-full px-2",
-              onClick: () => {
-                if (filterColumn) {
-                  table.getColumn(filterColumn)?.setFilterValue("");
-                } else {
-                  setGlobalFilter("");
-                }
-              },
-              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-            }
-          )
-        ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-sm", children: enableFiltering && /* @__PURE__ */ jsx(Fragment, { children: customFilter || /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: filterPlaceholder,
+            value: filterColumn ? table.getColumn(filterColumn)?.getFilterValue() ?? "" : globalFilter,
+            onChange: (event) => {
+              const value = event.target.value;
+              if (filterColumn) {
+                table.getColumn(filterColumn)?.setFilterValue(value);
+              } else {
+                setGlobalFilter(value);
+              }
+            },
+            className: "pl-8"
+          }
+        ),
+        (filterColumn && table.getColumn(filterColumn)?.getFilterValue() || !filterColumn && globalFilter) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "absolute right-0 top-0 h-full px-2",
+            onClick: () => {
+              if (filterColumn) {
+                table.getColumn(filterColumn)?.setFilterValue("");
+              } else {
+                setGlobalFilter("");
+              }
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         enableRowSelection && selectedRows.length > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "whitespace-nowrap", children: [
           selectedRows.length,
           " selected"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        ] }),
         toolbarActions,
         enableExport && onExport && /* @__PURE__ */ jsxs(
           Button,
@@ -8061,7 +8166,7 @@ function Calendar({
   };
   const days = getDaysInMonth();
   return /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", "p-0", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border/50 dark:border-gray-700/50", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -8139,6 +8244,11 @@ function Calendar({
   ] });
 }
 Calendar.displayName = "Calendar";
+var pageTransitions2 = {
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -20 }
+};
 var datePickerVariants = cva(
   "w-full justify-start text-left font-normal",
   {
@@ -8197,9 +8307,10 @@ function DatePicker({
     setInternalDate(value);
   }, [value]);
   const handleSelect = (date) => {
-    setInternalDate(date);
-    onChange?.(date);
-    if (date) {
+    const singleDate = Array.isArray(date) ? date[0] : date && typeof date === "object" && "from" in date ? date.from : date;
+    setInternalDate(singleDate);
+    onChange?.(singleDate);
+    if (singleDate) {
       setOpen(false);
     }
   };
@@ -8301,13 +8412,13 @@ function DatePicker({
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
-        className: "w-[360px] p-0 shadow-xl rounded-2xl border-0 bg-background/95 backdrop-blur-sm",
+        className: "w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]",
         align: "start",
         sideOffset: 12,
         children: /* @__PURE__ */ jsxs(
           motion.div,
           {
-            ...pageTransitions.fadeIn,
+            ...pageTransitions2,
             className: "rounded-2xl bg-background overflow-hidden",
             children: [
               /* @__PURE__ */ jsx(
@@ -8392,7 +8503,7 @@ function DateRangePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 shadow-xl rounded-2xl border-0 bg-background/95 backdrop-blur-sm", align: "start", sideOffset: 12, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]", align: "start", sideOffset: 12, children: /* @__PURE__ */ jsx(
       Calendar,
       {
         mode: "range",
@@ -8550,7 +8661,7 @@ function MonthPicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background z-[1000]", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -9329,59 +9440,193 @@ function GitHubStarButton({
     }
   );
 }
-function MoonLogo({
+function LockedComponent({
+  children,
+  componentName,
   className,
-  variant = "default",
-  showText = true,
-  ...props
+  showPreview = true,
+  previewDuration = 2e3
 }) {
-  const logoId = t.useId();
-  const gradientId = `moon-gradient-${logoId}`;
-  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", "flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        width: "32",
-        height: "32",
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "flex-shrink-0",
-        ...props,
-        children: [
-          variant === "gradient" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3B82F6" }),
-            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#8B5CF6" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#EC4899" })
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "16",
-              cy: "16",
-              r: "14",
-              fill: variant === "gradient" ? `url(#${gradientId})` : "currentColor",
-              className: variant === "default" ? "fill-primary" : ""
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "22",
-              cy: "10",
-              r: "10",
-              fill: "white",
-              className: "dark:fill-background"
-            }
-          )
-        ]
-      }
-    ),
-    showText && /* @__PURE__ */ jsxs("span", { className: "text-xl font-bold", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Moon" }),
-      /* @__PURE__ */ jsx("span", { className: "text-primary", children: "UI" })
-    ] })
-  ] });
+  const [isPreviewActive, setIsPreviewActive] = useState(false);
+  const [previewTimeout, setPreviewTimeout] = useState(null);
+  const handleMouseEnter = () => {
+    if (!showPreview)
+      return;
+    setIsPreviewActive(true);
+    if (previewTimeout) {
+      clearTimeout(previewTimeout);
+    }
+    const timeout = setTimeout(() => {
+      setIsPreviewActive(false);
+    }, previewDuration);
+    setPreviewTimeout(timeout);
+  };
+  const handleMouseLeave = () => {
+    if (previewTimeout) {
+      clearTimeout(previewTimeout);
+      setPreviewTimeout(null);
+    }
+    setIsPreviewActive(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative group cursor-pointer transition-all duration-300",
+        className
+      ),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "transition-all duration-300",
+              !isPreviewActive && "blur-sm grayscale-[0.3] opacity-60"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-purple-500/10",
+              "border-2 border-dashed border-amber-400/30 rounded-lg",
+              "flex items-center justify-center",
+              "transition-all duration-300",
+              isPreviewActive ? "opacity-0" : "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-3 p-6", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
+                Badge,
+                {
+                  variant: "secondary",
+                  className: "bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 px-3 py-1",
+                  children: [
+                    /* @__PURE__ */ jsx(Crown, { className: "w-3 h-3 mr-1" }),
+                    "PRO ONLY"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "p-3 rounded-full bg-amber-100 dark:bg-amber-900/30", children: /* @__PURE__ */ jsx(Lock, { className: "w-6 h-6 text-amber-600 dark:text-amber-400" }) }) }),
+              /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 dark:text-gray-100", children: componentName }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 max-w-xs", children: "This premium component is available with Pro subscription" }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  className: "bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border-0",
+                  onClick: () => {
+                    if (typeof window !== "undefined") {
+                      window.location.href = "/pricing";
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Zap, { className: "w-4 h-4 mr-2" }),
+                    "Upgrade to Pro"
+                  ]
+                }
+              )
+            ] })
+          }
+        ),
+        showPreview && !isPreviewActive && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx("div", { className: "bg-black/80 text-white text-xs px-2 py-1 rounded", children: "Hover to preview" }) })
+      ]
+    }
+  );
+}
+function ProComponentWrapper({
+  children,
+  componentId,
+  componentName,
+  className,
+  fallback
+}) {
+  {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+}
+function ProBadge({ className }) {
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: "secondary",
+      className: cn(
+        "bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 text-xs",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Crown, { className: "w-3 h-3 mr-1" }),
+        "PRO"
+      ]
+    }
+  );
+}
+function FreeBadge({ className }) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: "outline",
+      className: cn("border-green-500 text-green-600 dark:text-green-400 text-xs", className),
+      children: "FREE"
+    }
+  );
+}
+function MoonLogo({
+  className,
+  variant = "default",
+  showText = true,
+  ...props
+}) {
+  const logoId = t.useId();
+  const gradientId = `moon-gradient-${logoId}`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", "flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "flex-shrink-0",
+        ...props,
+        children: [
+          variant === "gradient" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3B82F6" }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#8B5CF6" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#EC4899" })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "16",
+              cy: "16",
+              r: "14",
+              fill: variant === "gradient" ? `url(#${gradientId})` : "currentColor",
+              className: variant === "default" ? "fill-primary" : ""
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "22",
+              cy: "10",
+              r: "10",
+              fill: "white",
+              className: "dark:fill-background"
+            }
+          )
+        ]
+      }
+    ),
+    showText && /* @__PURE__ */ jsxs("span", { className: "text-xl font-bold", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Moon" }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: "UI" })
+    ] })
+  ] });
 }
 function MoonLogoIcon({
   className,
@@ -9500,6 +9745,141 @@ var PaginationEllipsis = ({
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
+var countryCodes = [
+  { code: "+1", country: "US", flag: "\u{1F1FA}\u{1F1F8}", name: "United States" },
+  { code: "+44", country: "GB", flag: "\u{1F1EC}\u{1F1E7}", name: "United Kingdom" },
+  { code: "+49", country: "DE", flag: "\u{1F1E9}\u{1F1EA}", name: "Germany" },
+  { code: "+33", country: "FR", flag: "\u{1F1EB}\u{1F1F7}", name: "France" },
+  { code: "+39", country: "IT", flag: "\u{1F1EE}\u{1F1F9}", name: "Italy" },
+  { code: "+34", country: "ES", flag: "\u{1F1EA}\u{1F1F8}", name: "Spain" },
+  { code: "+31", country: "NL", flag: "\u{1F1F3}\u{1F1F1}", name: "Netherlands" },
+  { code: "+46", country: "SE", flag: "\u{1F1F8}\u{1F1EA}", name: "Sweden" },
+  { code: "+47", country: "NO", flag: "\u{1F1F3}\u{1F1F4}", name: "Norway" },
+  { code: "+45", country: "DK", flag: "\u{1F1E9}\u{1F1F0}", name: "Denmark" },
+  { code: "+358", country: "FI", flag: "\u{1F1EB}\u{1F1EE}", name: "Finland" },
+  { code: "+48", country: "PL", flag: "\u{1F1F5}\u{1F1F1}", name: "Poland" },
+  { code: "+90", country: "TR", flag: "\u{1F1F9}\u{1F1F7}", name: "Turkey" },
+  { code: "+86", country: "CN", flag: "\u{1F1E8}\u{1F1F3}", name: "China" },
+  { code: "+81", country: "JP", flag: "\u{1F1EF}\u{1F1F5}", name: "Japan" },
+  { code: "+82", country: "KR", flag: "\u{1F1F0}\u{1F1F7}", name: "South Korea" },
+  { code: "+91", country: "IN", flag: "\u{1F1EE}\u{1F1F3}", name: "India" },
+  { code: "+61", country: "AU", flag: "\u{1F1E6}\u{1F1FA}", name: "Australia" },
+  { code: "+64", country: "NZ", flag: "\u{1F1F3}\u{1F1FF}", name: "New Zealand" },
+  { code: "+27", country: "ZA", flag: "\u{1F1FF}\u{1F1E6}", name: "South Africa" },
+  { code: "+55", country: "BR", flag: "\u{1F1E7}\u{1F1F7}", name: "Brazil" },
+  { code: "+52", country: "MX", flag: "\u{1F1F2}\u{1F1FD}", name: "Mexico" },
+  { code: "+54", country: "AR", flag: "\u{1F1E6}\u{1F1F7}", name: "Argentina" },
+  { code: "+20", country: "EG", flag: "\u{1F1EA}\u{1F1EC}", name: "Egypt" },
+  { code: "+966", country: "SA", flag: "\u{1F1F8}\u{1F1E6}", name: "Saudi Arabia" },
+  { code: "+971", country: "AE", flag: "\u{1F1E6}\u{1F1EA}", name: "UAE" }
+];
+var formatPhoneNumber = (value, countryCode) => {
+  const cleaned = value.replace(/\D/g, "");
+  switch (countryCode) {
+    case "+1":
+      if (cleaned.length <= 3)
+        return cleaned;
+      if (cleaned.length <= 6)
+        return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
+    case "+44":
+      if (cleaned.length <= 4)
+        return cleaned;
+      if (cleaned.length <= 7)
+        return `${cleaned.slice(0, 4)} ${cleaned.slice(4)}`;
+      return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 7)} ${cleaned.slice(7, 11)}`;
+    case "+90":
+      if (cleaned.length <= 3)
+        return cleaned;
+      if (cleaned.length <= 6)
+        return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+      if (cleaned.length <= 9)
+        return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6)}`;
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6, 8)} ${cleaned.slice(8, 10)}`;
+    default:
+      let formatted = "";
+      for (let i = 0; i < cleaned.length; i++) {
+        if (i > 0 && i % 3 === 0)
+          formatted += " ";
+        formatted += cleaned[i];
+      }
+      return formatted;
+  }
+};
+var getMaxLength = (countryCode) => {
+  switch (countryCode) {
+    case "+1":
+      return 10;
+    case "+44":
+      return 11;
+    case "+90":
+      return 10;
+    default:
+      return 15;
+  }
+};
+var PhoneInput = t.forwardRef(
+  ({
+    className,
+    value = "",
+    onChange,
+    defaultCountry = "+1",
+    showIcon = true,
+    showCountrySelect = true,
+    countries = countryCodes,
+    size,
+    ...props
+  }, ref) => {
+    const [countryCode, setCountryCode] = t.useState(defaultCountry);
+    const [phoneNumber, setPhoneNumber] = t.useState(value);
+    const selectedCountry = countries.find((c) => c.code === countryCode) || countries[0];
+    const handlePhoneChange = (e) => {
+      const rawValue = e.target.value.replace(/\D/g, "");
+      const maxLength = getMaxLength(countryCode);
+      const truncated = rawValue.slice(0, maxLength);
+      const formatted = formatPhoneNumber(truncated, countryCode);
+      setPhoneNumber(truncated);
+      onChange?.(truncated, countryCode);
+      e.target.value = formatted;
+    };
+    const handleCountryChange = (newCountryCode) => {
+      setCountryCode(newCountryCode);
+      onChange?.(phoneNumber, newCountryCode);
+    };
+    const formattedValue = formatPhoneNumber(phoneNumber, countryCode);
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative flex gap-2", className), children: [
+      showCountrySelect && /* @__PURE__ */ jsxs(Select, { value: countryCode, onValueChange: handleCountryChange, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[120px]", children: /* @__PURE__ */ jsx(SelectValue, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { children: selectedCountry.flag }),
+          /* @__PURE__ */ jsx("span", { children: selectedCountry.code })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: countries.map((country) => /* @__PURE__ */ jsx(SelectItem, { value: country.code, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { children: country.flag }),
+          /* @__PURE__ */ jsx("span", { children: country.code }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: country.name })
+        ] }) }, country.code)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            type: "tel",
+            inputMode: "numeric",
+            autoComplete: "tel",
+            placeholder: countryCode === "+1" ? "(555) 123-4567" : "123 456 789",
+            value: formattedValue,
+            onChange: handlePhoneChange,
+            className: cn(showIcon && "pl-10", className),
+            ...props
+          }
+        ),
+        showIcon && /* @__PURE__ */ jsx(Phone, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" })
+      ] })
+    ] });
+  }
+);
+PhoneInput.displayName = "PhoneInput";
 var radioGroupItemVariants = cva(
   "aspect-square border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   {
@@ -9689,6 +10069,767 @@ function RichTextEditor({
     )
   ] });
 }
+function useCallbackRef(callback) {
+  const callbackRef = t.useRef(callback);
+  t.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return t.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+var DirectionContext = t.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = t.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+
+// ../../node_modules/@radix-ui/number/dist/index.mjs
+function clamp(value, [min2, max2]) {
+  return Math.min(max2, Math.max(min2, value));
+}
+function useStateMachine2(initialState, machine) {
+  return t.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var SCROLL_AREA_NAME = "ScrollArea";
+var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
+var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
+var ScrollArea = t.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeScrollArea,
+      type = "hover",
+      dir,
+      scrollHideDelay = 600,
+      ...scrollAreaProps
+    } = props;
+    const [scrollArea, setScrollArea] = t.useState(null);
+    const [viewport, setViewport] = t.useState(null);
+    const [content, setContent] = t.useState(null);
+    const [scrollbarX, setScrollbarX] = t.useState(null);
+    const [scrollbarY, setScrollbarY] = t.useState(null);
+    const [cornerWidth, setCornerWidth] = t.useState(0);
+    const [cornerHeight, setCornerHeight] = t.useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = t.useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = t.useState(false);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
+    const direction = useDirection(dir);
+    return /* @__PURE__ */ jsx(
+      ScrollAreaProvider,
+      {
+        scope: __scopeScrollArea,
+        type,
+        dir: direction,
+        scrollHideDelay,
+        scrollArea,
+        viewport,
+        onViewportChange: setViewport,
+        content,
+        onContentChange: setContent,
+        scrollbarX,
+        onScrollbarXChange: setScrollbarX,
+        scrollbarXEnabled,
+        onScrollbarXEnabledChange: setScrollbarXEnabled,
+        scrollbarY,
+        onScrollbarYChange: setScrollbarY,
+        scrollbarYEnabled,
+        onScrollbarYEnabledChange: setScrollbarYEnabled,
+        onCornerWidthChange: setCornerWidth,
+        onCornerHeightChange: setCornerHeight,
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            dir: direction,
+            ...scrollAreaProps,
+            ref: composedRefs,
+            style: {
+              position: "relative",
+              // Pass corner sizes as CSS vars to reduce re-renders of context consumers
+              ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
+              ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
+              ...props.style
+            }
+          }
+        )
+      }
+    );
+  }
+);
+ScrollArea.displayName = SCROLL_AREA_NAME;
+var VIEWPORT_NAME = "ScrollAreaViewport";
+var ScrollAreaViewport = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
+    const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
+    const ref = t.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
+          },
+          nonce
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          "data-radix-scroll-area-viewport": "",
+          ...viewportProps,
+          ref: composedRefs,
+          style: {
+            /**
+             * We don't support `visible` because the intention is to have at least one scrollbar
+             * if this component is used and `visible` will behave like `auto` in that case
+             * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#description
+             *
+             * We don't handle `auto` because the intention is for the native implementation
+             * to be hidden if using this component. We just want to ensure the node is scrollable
+             * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
+             * the browser from having to work out whether to render native scrollbars or not,
+             * we tell it to with the intention of hiding them in CSS.
+             */
+            overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
+            overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
+            ...props.style
+          },
+          children: /* @__PURE__ */ jsx("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
+        }
+      )
+    ] });
+  }
+);
+ScrollAreaViewport.displayName = VIEWPORT_NAME;
+var SCROLLBAR_NAME = "ScrollAreaScrollbar";
+var ScrollAreaScrollbar = t.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+    const isHorizontal = props.orientation === "horizontal";
+    t.useEffect(() => {
+      isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+      return () => {
+        isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+      };
+    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
+    return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
+  }
+);
+ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
+var ScrollAreaScrollbarHover = t.forwardRef((props, forwardedRef) => {
+  const { forceMount, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [visible, setVisible] = t.useState(false);
+  t.useEffect(() => {
+    const scrollArea = context.scrollArea;
+    let hideTimer = 0;
+    if (scrollArea) {
+      const handlePointerEnter = () => {
+        window.clearTimeout(hideTimer);
+        setVisible(true);
+      };
+      const handlePointerLeave = () => {
+        hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
+      };
+      scrollArea.addEventListener("pointerenter", handlePointerEnter);
+      scrollArea.addEventListener("pointerleave", handlePointerLeave);
+      return () => {
+        window.clearTimeout(hideTimer);
+        scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+        scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+      };
+    }
+  }, [context.scrollArea, context.scrollHideDelay]);
+  return /* @__PURE__ */ jsx(Presence, { present: forceMount || visible, children: /* @__PURE__ */ jsx(
+    ScrollAreaScrollbarAuto,
+    {
+      "data-state": visible ? "visible" : "hidden",
+      ...scrollbarProps,
+      ref: forwardedRef
+    }
+  ) });
+});
+var ScrollAreaScrollbarScroll = t.forwardRef((props, forwardedRef) => {
+  const { forceMount, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const isHorizontal = props.orientation === "horizontal";
+  const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
+  const [state, send] = useStateMachine2("hidden", {
+    hidden: {
+      SCROLL: "scrolling"
+    },
+    scrolling: {
+      SCROLL_END: "idle",
+      POINTER_ENTER: "interacting"
+    },
+    interacting: {
+      SCROLL: "interacting",
+      POINTER_LEAVE: "idle"
+    },
+    idle: {
+      HIDE: "hidden",
+      SCROLL: "scrolling",
+      POINTER_ENTER: "interacting"
+    }
+  });
+  t.useEffect(() => {
+    if (state === "idle") {
+      const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
+      return () => window.clearTimeout(hideTimer);
+    }
+  }, [state, context.scrollHideDelay, send]);
+  t.useEffect(() => {
+    const viewport = context.viewport;
+    const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
+    if (viewport) {
+      let prevScrollPos = viewport[scrollDirection];
+      const handleScroll = () => {
+        const scrollPos = viewport[scrollDirection];
+        const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+        if (hasScrollInDirectionChanged) {
+          send("SCROLL");
+          debounceScrollEnd();
+        }
+        prevScrollPos = scrollPos;
+      };
+      viewport.addEventListener("scroll", handleScroll);
+      return () => viewport.removeEventListener("scroll", handleScroll);
+    }
+  }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
+  return /* @__PURE__ */ jsx(Presence, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ jsx(
+    ScrollAreaScrollbarVisible,
+    {
+      "data-state": state === "hidden" ? "hidden" : "visible",
+      ...scrollbarProps,
+      ref: forwardedRef,
+      onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
+      onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
+    }
+  ) });
+});
+var ScrollAreaScrollbarAuto = t.forwardRef((props, forwardedRef) => {
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const { forceMount, ...scrollbarProps } = props;
+  const [visible, setVisible] = t.useState(false);
+  const isHorizontal = props.orientation === "horizontal";
+  const handleResize = useDebounceCallback(() => {
+    if (context.viewport) {
+      const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+      const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+      setVisible(isHorizontal ? isOverflowX : isOverflowY);
+    }
+  }, 10);
+  useResizeObserver(context.viewport, handleResize);
+  useResizeObserver(context.content, handleResize);
+  return /* @__PURE__ */ jsx(Presence, { present: forceMount || visible, children: /* @__PURE__ */ jsx(
+    ScrollAreaScrollbarVisible,
+    {
+      "data-state": visible ? "visible" : "hidden",
+      ...scrollbarProps,
+      ref: forwardedRef
+    }
+  ) });
+});
+var ScrollAreaScrollbarVisible = t.forwardRef((props, forwardedRef) => {
+  const { orientation = "vertical", ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const thumbRef = t.useRef(null);
+  const pointerOffsetRef = t.useRef(0);
+  const [sizes, setSizes] = t.useState({
+    content: 0,
+    viewport: 0,
+    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
+  });
+  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
+  const commonProps = {
+    ...scrollbarProps,
+    sizes,
+    onSizesChange: setSizes,
+    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
+    onThumbChange: (thumb) => thumbRef.current = thumb,
+    onThumbPointerUp: () => pointerOffsetRef.current = 0,
+    onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
+  };
+  function getScrollPosition(pointerPos, dir) {
+    return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
+  }
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(
+      ScrollAreaScrollbarX,
+      {
+        ...commonProps,
+        ref: forwardedRef,
+        onThumbPositionChange: () => {
+          if (context.viewport && thumbRef.current) {
+            const scrollPos = context.viewport.scrollLeft;
+            const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
+            thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
+          }
+        },
+        onWheelScroll: (scrollPos) => {
+          if (context.viewport)
+            context.viewport.scrollLeft = scrollPos;
+        },
+        onDragScroll: (pointerPos) => {
+          if (context.viewport) {
+            context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
+          }
+        }
+      }
+    );
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx(
+      ScrollAreaScrollbarY,
+      {
+        ...commonProps,
+        ref: forwardedRef,
+        onThumbPositionChange: () => {
+          if (context.viewport && thumbRef.current) {
+            const scrollPos = context.viewport.scrollTop;
+            const offset = getThumbOffsetFromScroll(scrollPos, sizes);
+            thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
+          }
+        },
+        onWheelScroll: (scrollPos) => {
+          if (context.viewport)
+            context.viewport.scrollTop = scrollPos;
+        },
+        onDragScroll: (pointerPos) => {
+          if (context.viewport)
+            context.viewport.scrollTop = getScrollPosition(pointerPos);
+        }
+      }
+    );
+  }
+  return null;
+});
+var ScrollAreaScrollbarX = t.forwardRef((props, forwardedRef) => {
+  const { sizes, onSizesChange, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [computedStyle, setComputedStyle] = t.useState();
+  const ref = t.useRef(null);
+  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
+  t.useEffect(() => {
+    if (ref.current)
+      setComputedStyle(getComputedStyle(ref.current));
+  }, [ref]);
+  return /* @__PURE__ */ jsx(
+    ScrollAreaScrollbarImpl,
+    {
+      "data-orientation": "horizontal",
+      ...scrollbarProps,
+      ref: composeRefs2,
+      sizes,
+      style: {
+        bottom: 0,
+        left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
+        right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
+        ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
+        ...props.style
+      },
+      onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
+      onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
+      onWheelScroll: (event, maxScrollPos) => {
+        if (context.viewport) {
+          const scrollPos = context.viewport.scrollLeft + event.deltaX;
+          props.onWheelScroll(scrollPos);
+          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+            event.preventDefault();
+          }
+        }
+      },
+      onResize: () => {
+        if (ref.current && context.viewport && computedStyle) {
+          onSizesChange({
+            content: context.viewport.scrollWidth,
+            viewport: context.viewport.offsetWidth,
+            scrollbar: {
+              size: ref.current.clientWidth,
+              paddingStart: toInt(computedStyle.paddingLeft),
+              paddingEnd: toInt(computedStyle.paddingRight)
+            }
+          });
+        }
+      }
+    }
+  );
+});
+var ScrollAreaScrollbarY = t.forwardRef((props, forwardedRef) => {
+  const { sizes, onSizesChange, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [computedStyle, setComputedStyle] = t.useState();
+  const ref = t.useRef(null);
+  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+  t.useEffect(() => {
+    if (ref.current)
+      setComputedStyle(getComputedStyle(ref.current));
+  }, [ref]);
+  return /* @__PURE__ */ jsx(
+    ScrollAreaScrollbarImpl,
+    {
+      "data-orientation": "vertical",
+      ...scrollbarProps,
+      ref: composeRefs2,
+      sizes,
+      style: {
+        top: 0,
+        right: context.dir === "ltr" ? 0 : void 0,
+        left: context.dir === "rtl" ? 0 : void 0,
+        bottom: "var(--radix-scroll-area-corner-height)",
+        ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
+        ...props.style
+      },
+      onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
+      onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
+      onWheelScroll: (event, maxScrollPos) => {
+        if (context.viewport) {
+          const scrollPos = context.viewport.scrollTop + event.deltaY;
+          props.onWheelScroll(scrollPos);
+          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+            event.preventDefault();
+          }
+        }
+      },
+      onResize: () => {
+        if (ref.current && context.viewport && computedStyle) {
+          onSizesChange({
+            content: context.viewport.scrollHeight,
+            viewport: context.viewport.offsetHeight,
+            scrollbar: {
+              size: ref.current.clientHeight,
+              paddingStart: toInt(computedStyle.paddingTop),
+              paddingEnd: toInt(computedStyle.paddingBottom)
+            }
+          });
+        }
+      }
+    }
+  );
+});
+var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
+var ScrollAreaScrollbarImpl = t.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeScrollArea,
+    sizes,
+    hasThumb,
+    onThumbChange,
+    onThumbPointerUp,
+    onThumbPointerDown,
+    onThumbPositionChange,
+    onDragScroll,
+    onWheelScroll,
+    onResize,
+    ...scrollbarProps
+  } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
+  const [scrollbar, setScrollbar] = t.useState(null);
+  const composeRefs2 = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
+  const rectRef = t.useRef(null);
+  const prevWebkitUserSelectRef = t.useRef("");
+  const viewport = context.viewport;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const handleWheelScroll = useCallbackRef(onWheelScroll);
+  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
+  const handleResize = useDebounceCallback(onResize, 10);
+  function handleDragScroll(event) {
+    if (rectRef.current) {
+      const x = event.clientX - rectRef.current.left;
+      const y = event.clientY - rectRef.current.top;
+      onDragScroll({ x, y });
+    }
+  }
+  t.useEffect(() => {
+    const handleWheel = (event) => {
+      const element = event.target;
+      const isScrollbarWheel = scrollbar?.contains(element);
+      if (isScrollbarWheel)
+        handleWheelScroll(event, maxScrollPos);
+    };
+    document.addEventListener("wheel", handleWheel, { passive: false });
+    return () => document.removeEventListener("wheel", handleWheel, { passive: false });
+  }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
+  t.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
+  useResizeObserver(scrollbar, handleResize);
+  useResizeObserver(context.content, handleResize);
+  return /* @__PURE__ */ jsx(
+    ScrollbarProvider,
+    {
+      scope: __scopeScrollArea,
+      scrollbar,
+      hasThumb,
+      onThumbChange: useCallbackRef(onThumbChange),
+      onThumbPointerUp: useCallbackRef(onThumbPointerUp),
+      onThumbPositionChange: handleThumbPositionChange,
+      onThumbPointerDown: useCallbackRef(onThumbPointerDown),
+      children: /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          ...scrollbarProps,
+          ref: composeRefs2,
+          style: { position: "absolute", ...scrollbarProps.style },
+          onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+            const mainPointer = 0;
+            if (event.button === mainPointer) {
+              const element = event.target;
+              element.setPointerCapture(event.pointerId);
+              rectRef.current = scrollbar.getBoundingClientRect();
+              prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
+              document.body.style.webkitUserSelect = "none";
+              if (context.viewport)
+                context.viewport.style.scrollBehavior = "auto";
+              handleDragScroll(event);
+            }
+          }),
+          onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
+          onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+            const element = event.target;
+            if (element.hasPointerCapture(event.pointerId)) {
+              element.releasePointerCapture(event.pointerId);
+            }
+            document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
+            if (context.viewport)
+              context.viewport.style.scrollBehavior = "";
+            rectRef.current = null;
+          })
+        }
+      )
+    }
+  );
+});
+var THUMB_NAME = "ScrollAreaThumb";
+var ScrollAreaThumb = t.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...thumbProps } = props;
+    const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
+  }
+);
+var ScrollAreaThumbImpl = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeScrollArea, style, ...thumbProps } = props;
+    const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
+    const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
+    const { onThumbPositionChange } = scrollbarContext;
+    const composedRef = useComposedRefs(
+      forwardedRef,
+      (node) => scrollbarContext.onThumbChange(node)
+    );
+    const removeUnlinkedScrollListenerRef = t.useRef(void 0);
+    const debounceScrollEnd = useDebounceCallback(() => {
+      if (removeUnlinkedScrollListenerRef.current) {
+        removeUnlinkedScrollListenerRef.current();
+        removeUnlinkedScrollListenerRef.current = void 0;
+      }
+    }, 100);
+    t.useEffect(() => {
+      const viewport = scrollAreaContext.viewport;
+      if (viewport) {
+        const handleScroll = () => {
+          debounceScrollEnd();
+          if (!removeUnlinkedScrollListenerRef.current) {
+            const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+            removeUnlinkedScrollListenerRef.current = listener;
+            onThumbPositionChange();
+          }
+        };
+        onThumbPositionChange();
+        viewport.addEventListener("scroll", handleScroll);
+        return () => viewport.removeEventListener("scroll", handleScroll);
+      }
+    }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
+        ...thumbProps,
+        ref: composedRef,
+        style: {
+          width: "var(--radix-scroll-area-thumb-width)",
+          height: "var(--radix-scroll-area-thumb-height)",
+          ...style
+        },
+        onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
+          const thumb = event.target;
+          const thumbRect = thumb.getBoundingClientRect();
+          const x = event.clientX - thumbRect.left;
+          const y = event.clientY - thumbRect.top;
+          scrollbarContext.onThumbPointerDown({ x, y });
+        }),
+        onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+      }
+    );
+  }
+);
+ScrollAreaThumb.displayName = THUMB_NAME;
+var CORNER_NAME = "ScrollAreaCorner";
+var ScrollAreaCorner = t.forwardRef(
+  (props, forwardedRef) => {
+    const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
+    const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+    const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
+    return hasCorner ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
+  }
+);
+ScrollAreaCorner.displayName = CORNER_NAME;
+var ScrollAreaCornerImpl = t.forwardRef((props, forwardedRef) => {
+  const { __scopeScrollArea, ...cornerProps } = props;
+  const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
+  const [width, setWidth] = t.useState(0);
+  const [height, setHeight] = t.useState(0);
+  const hasSize = Boolean(width && height);
+  useResizeObserver(context.scrollbarX, () => {
+    const height2 = context.scrollbarX?.offsetHeight || 0;
+    context.onCornerHeightChange(height2);
+    setHeight(height2);
+  });
+  useResizeObserver(context.scrollbarY, () => {
+    const width2 = context.scrollbarY?.offsetWidth || 0;
+    context.onCornerWidthChange(width2);
+    setWidth(width2);
+  });
+  return hasSize ? /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      ...cornerProps,
+      ref: forwardedRef,
+      style: {
+        width,
+        height,
+        position: "absolute",
+        right: context.dir === "ltr" ? 0 : void 0,
+        left: context.dir === "rtl" ? 0 : void 0,
+        bottom: 0,
+        ...props.style
+      }
+    }
+  ) : null;
+});
+function toInt(value) {
+  return value ? parseInt(value, 10) : 0;
+}
+function getThumbRatio(viewportSize, contentSize) {
+  const ratio = viewportSize / contentSize;
+  return isNaN(ratio) ? 0 : ratio;
+}
+function getThumbSize(sizes) {
+  const ratio = getThumbRatio(sizes.viewport, sizes.content);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+  return Math.max(thumbSize, 18);
+}
+function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
+  const thumbSizePx = getThumbSize(sizes);
+  const thumbCenter = thumbSizePx / 2;
+  const offset = pointerOffset || thumbCenter;
+  const thumbOffsetFromEnd = thumbSizePx - offset;
+  const minPointerPos = sizes.scrollbar.paddingStart + offset;
+  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
+  return interpolate(pointerPos);
+}
+function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
+  const thumbSizePx = getThumbSize(sizes);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const maxThumbPos = scrollbar - thumbSizePx;
+  const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange);
+  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+  return interpolate(scrollWithoutMomentum);
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1])
+      return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+var addUnlinkedScrollListener = (node, handler = () => {
+}) => {
+  let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
+  let rAF = 0;
+  (function loop() {
+    const position = { left: node.scrollLeft, top: node.scrollTop };
+    const isHorizontalScroll = prevPosition.left !== position.left;
+    const isVerticalScroll = prevPosition.top !== position.top;
+    if (isHorizontalScroll || isVerticalScroll)
+      handler();
+    prevPosition = position;
+    rAF = window.requestAnimationFrame(loop);
+  })();
+  return () => window.cancelAnimationFrame(rAF);
+};
+function useDebounceCallback(callback, delay) {
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = t.useRef(0);
+  t.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return t.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
+function useResizeObserver(element, onResize) {
+  const handleResize = useCallbackRef(onResize);
+  useLayoutEffect2(() => {
+    let rAF = 0;
+    if (element) {
+      const resizeObserver = new ResizeObserver(() => {
+        cancelAnimationFrame(rAF);
+        rAF = window.requestAnimationFrame(handleResize);
+      });
+      resizeObserver.observe(element);
+      return () => {
+        window.cancelAnimationFrame(rAF);
+        resizeObserver.unobserve(element);
+      };
+    }
+  }, [element, handleResize]);
+}
+var Root12 = ScrollArea;
+var Viewport2 = ScrollAreaViewport;
+var Corner = ScrollAreaCorner;
+var ScrollArea2 = t.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Root12,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Viewport2, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(Corner, {})
+    ]
+  }
+));
+ScrollArea2.displayName = Root12.displayName;
+var ScrollBar = t.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaScrollbar.displayName;
 var separatorVariants = cva(
   "shrink-0 bg-border",
   {
@@ -9799,7 +10940,7 @@ var Separator3 = t.forwardRef(
     {
       ref,
       decorative,
-      orientation,
+      orientation: orientation || void 0,
       className: cn(
         separatorVariants({ orientation, variant, size }),
         className
@@ -9809,91 +10950,17 @@ var Separator3 = t.forwardRef(
   )
 );
 Separator3.displayName = SeparatorPrimitive.Root.displayName;
-
-// ../../node_modules/@radix-ui/primitive/dist/index.mjs
-function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-}
-var useInsertionEffect2 = t[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
-function useControllableState2({
-  prop,
-  defaultProp,
-  onChange = () => {
-  },
-  caller
-}) {
-  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState2({
-    defaultProp,
-    onChange
-  });
-  const isControlled = prop !== void 0;
-  const value = isControlled ? prop : uncontrolledProp;
-  {
-    const isControlledRef = t.useRef(prop !== void 0);
-    t.useEffect(() => {
-      const wasControlled = isControlledRef.current;
-      if (wasControlled !== isControlled) {
-        const from = wasControlled ? "controlled" : "uncontrolled";
-        const to = isControlled ? "controlled" : "uncontrolled";
-        console.warn(
-          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
-        );
-      }
-      isControlledRef.current = isControlled;
-    }, [isControlled, caller]);
-  }
-  const setValue = t.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const value2 = isFunction3(nextValue) ? nextValue(prop) : nextValue;
-        if (value2 !== prop) {
-          onChangeRef.current?.(value2);
-        }
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, onChangeRef]
-  );
-  return [value, setValue];
-}
-function useUncontrolledState2({
-  defaultProp,
-  onChange
-}) {
-  const [value, setValue] = t.useState(defaultProp);
-  const prevValueRef = t.useRef(value);
-  const onChangeRef = t.useRef(onChange);
-  useInsertionEffect2(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-  t.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      onChangeRef.current?.(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef]);
-  return [value, setValue, onChangeRef];
-}
-function isFunction3(value) {
-  return typeof value === "function";
-}
 var NAME = "Toggle";
 var Toggle = t.forwardRef((props, forwardedRef) => {
   const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
-  const [pressed, setPressed] = useControllableState2({
+  const [pressed, setPressed] = useControllableState({
     prop: pressedProp,
     onChange: onPressedChange,
     defaultProp: defaultPressed ?? false,
     caller: NAME
   });
   return /* @__PURE__ */ jsx(
-    Primitive2.button,
+    Primitive.button,
     {
       type: "button",
       "aria-pressed": pressed,
@@ -9901,7 +10968,7 @@ var Toggle = t.forwardRef((props, forwardedRef) => {
       "data-disabled": props.disabled ? "" : void 0,
       ...buttonProps,
       ref: forwardedRef,
-      onClick: composeEventHandlers2(props.onClick, () => {
+      onClick: composeEventHandlers(props.onClick, () => {
         if (!props.disabled) {
           setPressed(!pressed);
         }
@@ -9910,7 +10977,7 @@ var Toggle = t.forwardRef((props, forwardedRef) => {
   );
 });
 Toggle.displayName = NAME;
-var Root13 = Toggle;
+var Root14 = Toggle;
 var toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
@@ -9932,14 +10999,14 @@ var toggleVariants = cva(
   }
 );
 var Toggle2 = t.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  Root13,
+  Root14,
   {
     ref,
     className: cn("moonui-theme", toggleVariants({ variant, size, className })),
     ...props
   }
 ));
-Toggle2.displayName = Root13.displayName;
+Toggle2.displayName = Root14.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var tooltipVariants = cva(
   "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -10587,7 +11654,7 @@ var SimpleEditor = t__default.forwardRef(
 );
 SimpleEditor.displayName = "SimpleEditor";
 var CharacterCount = ({ content }) => {
-  const [count4, setCount] = useState(0);
+  const [count3, setCount] = useState(0);
   useEffect(() => {
     const getPlainText = (html) => {
       const div = document.createElement("div");
@@ -10597,7 +11664,7 @@ var CharacterCount = ({ content }) => {
     setCount(getPlainText(content).length);
   }, [content]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    count4,
+    count3,
     " characters"
   ] });
 };
@@ -10698,6 +11765,112 @@ var Switch = t.forwardRef(({ className, size = "md", variant = "primary", loadin
   description && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: description })
 ] }));
 Switch.displayName = SwitchPrimitives.Root.displayName;
+var TagsInput = t.forwardRef(
+  ({
+    value = [],
+    onChange,
+    maxTags,
+    variant = "primary",
+    allowDuplicates = false,
+    delimiter = ",",
+    placeholder = "Add tag and press Enter",
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = t.useState("");
+    const [error, setError] = t.useState("");
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === delimiter) {
+        e.preventDefault();
+        addTag();
+      } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+        removeTag(value.length - 1);
+      }
+    };
+    const addTag = () => {
+      const tag = inputValue.trim();
+      if (!tag)
+        return;
+      if (!allowDuplicates && value.includes(tag)) {
+        setError("This tag already exists");
+        setTimeout(() => setError(""), 2e3);
+        return;
+      }
+      if (maxTags && value.length >= maxTags) {
+        setError(`Maximum ${maxTags} tags allowed`);
+        setTimeout(() => setError(""), 2e3);
+        return;
+      }
+      onChange([...value, tag]);
+      setInputValue("");
+      setError("");
+    };
+    const removeTag = (index) => {
+      if (disabled)
+        return;
+      onChange(value.filter((_, i) => i !== index));
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-h-[2.5rem] w-full flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
+            "dark:bg-zinc-950/50 dark:border-zinc-800",
+            "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            disabled && "cursor-not-allowed opacity-50",
+            className
+          ),
+          children: [
+            value.map((tag, index) => /* @__PURE__ */ jsxs(
+              Badge,
+              {
+                variant,
+                className: "gap-1 pr-1.5",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: tag }),
+                  !disabled && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => removeTag(index),
+                      className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground transition-colors" })
+                    }
+                  )
+                ]
+              },
+              index
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type: "text",
+                value: inputValue,
+                onChange: (e) => setInputValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                onBlur: addTag,
+                disabled,
+                placeholder: value.length === 0 ? placeholder : "",
+                className: cn(
+                  "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                  "dark:placeholder:text-zinc-500",
+                  "min-w-[120px]",
+                  disabled && "cursor-not-allowed"
+                ),
+                ...props
+              }
+            )
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: error })
+    ] });
+  }
+);
+TagsInput.displayName = "TagsInput";
 var Textarea = t.forwardRef(
   ({
     className,
@@ -10872,6 +12045,8 @@ var reducer = (state, action) => {
         ...state,
         toasts: state.toasts.filter((t2) => t2.id !== action.toastId)
       };
+    default:
+      return state;
   }
 };
 var listeners = [];
@@ -10968,6 +12143,6 @@ function Toaster() {
      *)
 */
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel, Collapsible2 as Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DateRangePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogForm, DialogHeader, DialogTitle, DialogTrigger, DraggableList, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, GestureDrawer, GitHubStarButton, GitHubStars, GradientPicker, Input, Label, MonthPicker, MoonLogo, MoonLogoAnimated, MoonLogoIcon, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverFooter, PopoverHeader, PopoverSeparator, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, RadioItemWithLabel, RadioLabel, RichTextEditor, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SimpleColorPicker, SimpleEditor, SimpleTooltip, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, SwipeableCard, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle2 as Toggle, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, aspectRatioVariants, badgeVariants, buttonVariants, cn, collapsibleContentVariants, collapsibleTriggerVariants, createFilterableColumn, createSortableHeader, popoverContentVariants, progressVariants, separatorVariants, skeletonVariants, toast, toggleVariants, tooltipVariants, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardCVCInput, CardContent, CardDescription, CardExpiryInput, CardFooter, CardHeader, CardNumberInput, CardTitle, CardZipInput, Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel, Collapsible2 as Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DateRangePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogForm, DialogHeader, DialogTitle, DialogTrigger, DraggableList, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FreeBadge, GestureDrawer, GitHubStarButton, GitHubStars, GradientPicker, Input, Label, LockedComponent, MonthPicker, MoonLogo, MoonLogoAnimated, MoonLogoIcon, Accordion as MoonUIAccordion, AccordionContent as MoonUIAccordionContent, AccordionItem as MoonUIAccordionItem, AccordionTrigger as MoonUIAccordionTrigger, Alert as MoonUIAlert, AlertDescription as MoonUIAlertDescription, AlertTitle as MoonUIAlertTitle, AspectRatio as MoonUIAspectRatio, Avatar as MoonUIAvatar, AvatarFallback as MoonUIAvatarFallback, AvatarGroup as MoonUIAvatarGroup, AvatarImage as MoonUIAvatarImage, Badge as MoonUIBadge, Breadcrumb as MoonUIBreadcrumb, BreadcrumbEllipsis as MoonUIBreadcrumbEllipsis, BreadcrumbItem as MoonUIBreadcrumbItem, BreadcrumbLink as MoonUIBreadcrumbLink, BreadcrumbList as MoonUIBreadcrumbList, BreadcrumbPage as MoonUIBreadcrumbPage, BreadcrumbSeparator as MoonUIBreadcrumbSeparator, Button as MoonUIButton, Card as MoonUICard, CardCVCInput as MoonUICardCVCInput, CardContent as MoonUICardContent, CardDescription as MoonUICardDescription, CardExpiryInput as MoonUICardExpiryInput, CardFooter as MoonUICardFooter, CardHeader as MoonUICardHeader, CardNumberInput as MoonUICardNumberInput, CardTitle as MoonUICardTitle, CardZipInput as MoonUICardZipInput, Checkbox as MoonUICheckbox, CheckboxGroup as MoonUICheckboxGroup, CheckboxLabel as MoonUICheckboxLabel, CheckboxWithLabel as MoonUICheckboxWithLabel, Collapsible2 as MoonUICollapsible, CollapsibleContent2 as MoonUICollapsibleContent, CollapsibleTrigger2 as MoonUICollapsibleTrigger, ColorPicker as MoonUIColorPicker, Command as MoonUICommand, CommandDialog as MoonUICommandDialog, CommandEmpty as MoonUICommandEmpty, CommandGroup as MoonUICommandGroup, CommandInput as MoonUICommandInput, CommandItem as MoonUICommandItem, CommandList as MoonUICommandList, CommandSeparator as MoonUICommandSeparator, CommandShortcut as MoonUICommandShortcut, DataTable as MoonUIDataTable, DatePicker as MoonUIDatePicker, DateRangePicker as MoonUIDateRangePicker, DateTimePicker as MoonUIDateTimePicker, Dialog as MoonUIDialog, DialogClose as MoonUIDialogClose, DialogContent as MoonUIDialogContent, DialogDescription as MoonUIDialogDescription, DialogFooter as MoonUIDialogFooter, DialogHeader as MoonUIDialogHeader, DialogTitle as MoonUIDialogTitle, DialogTrigger as MoonUIDialogTrigger, DraggableList as MoonUIDraggableList, DropdownMenu as MoonUIDropdownMenu, DropdownMenuCheckboxItem as MoonUIDropdownMenuCheckboxItem, DropdownMenuContent as MoonUIDropdownMenuContent, DropdownMenuGroup as MoonUIDropdownMenuGroup, DropdownMenuItem as MoonUIDropdownMenuItem, DropdownMenuLabel as MoonUIDropdownMenuLabel, DropdownMenuPortal as MoonUIDropdownMenuPortal, DropdownMenuRadioGroup as MoonUIDropdownMenuRadioGroup, DropdownMenuRadioItem as MoonUIDropdownMenuRadioItem, DropdownMenuSeparator as MoonUIDropdownMenuSeparator, DropdownMenuShortcut as MoonUIDropdownMenuShortcut, DropdownMenuSub as MoonUIDropdownMenuSub, DropdownMenuSubContent as MoonUIDropdownMenuSubContent, DropdownMenuSubTrigger as MoonUIDropdownMenuSubTrigger, DropdownMenuTrigger as MoonUIDropdownMenuTrigger, FileUpload as MoonUIFileUpload, FreeBadge as MoonUIFreeBadge, GestureDrawer as MoonUIGestureDrawer, GitHubStars as MoonUIGitHubStars, GradientPicker as MoonUIGradientPicker, Input as MoonUIInput, Label as MoonUILabel, LockedComponent as MoonUILockedComponent, MonthPicker as MoonUIMonthPicker, MoonLogo as MoonUIMoonLogo, Pagination as MoonUIPagination, PaginationContent as MoonUIPaginationContent, PaginationEllipsis as MoonUIPaginationEllipsis, PaginationItem as MoonUIPaginationItem, PaginationLink as MoonUIPaginationLink, PaginationNext as MoonUIPaginationNext, PaginationPrevious as MoonUIPaginationPrevious, PhoneInput as MoonUIPhoneInput, Popover as MoonUIPopover, PopoverContent as MoonUIPopoverContent, PopoverTrigger as MoonUIPopoverTrigger, ProBadge as MoonUIProBadge, ProComponentWrapper as MoonUIProComponentWrapper, Progress as MoonUIProgress, RadioGroup2 as MoonUIRadioGroup, RadioGroupItem as MoonUIRadioGroupItem, RadioItemWithLabel as MoonUIRadioItemWithLabel, RadioLabel as MoonUIRadioLabel, RichTextEditor as MoonUIRichTextEditor, ScrollArea2 as MoonUIScrollArea, ScrollBar as MoonUIScrollBar, Select as MoonUISelect, SelectContent as MoonUISelectContent, SelectGroup as MoonUISelectGroup, SelectItem as MoonUISelectItem, SelectLabel as MoonUISelectLabel, SelectScrollDownButton as MoonUISelectScrollDownButton, SelectScrollUpButton as MoonUISelectScrollUpButton, SelectSeparator as MoonUISelectSeparator, SelectTrigger as MoonUISelectTrigger, SelectValue as MoonUISelectValue, Separator3 as MoonUISeparator, SimpleColorPicker as MoonUISimpleColorPicker, SimpleEditor as MoonUISimpleEditor, Skeleton as MoonUISkeleton, SkeletonAvatar as MoonUISkeletonAvatar, SkeletonCard as MoonUISkeletonCard, SkeletonText as MoonUISkeletonText, Slider as MoonUISlider, SwipeableCard as MoonUISwipeableCard, Switch as MoonUISwitch, Table as MoonUITable, TableBody as MoonUITableBody, TableCaption as MoonUITableCaption, TableCell as MoonUITableCell, TableFooter as MoonUITableFooter, TableHead as MoonUITableHead, TableHeader as MoonUITableHeader, TableRow as MoonUITableRow, Tabs as MoonUITabs, TabsContent as MoonUITabsContent, TabsList as MoonUITabsList, TabsTrigger as MoonUITabsTrigger, TagsInput as MoonUITagsInput, Textarea as MoonUITextarea, Toast as MoonUIToast, ToastAction as MoonUIToastAction, ToastClose as MoonUIToastClose, ToastDescription as MoonUIToastDescription, ToastProvider as MoonUIToastProvider, ToastTitle as MoonUIToastTitle, ToastViewport as MoonUIToastViewport, Toaster as MoonUIToaster, Toggle2 as MoonUIToggle, Tooltip as MoonUITooltip, TooltipContent as MoonUITooltipContent, TooltipProvider as MoonUITooltipProvider, TooltipTrigger as MoonUITooltipTrigger, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneInput, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverFooter, PopoverHeader, PopoverSeparator, PopoverTrigger, ProBadge, ProComponentWrapper, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, RadioItemWithLabel, RadioLabel, RichTextEditor, ScrollArea2 as ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SimpleColorPicker, SimpleEditor, SimpleTooltip, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, SwipeableCard, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle2 as Toggle, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, aspectRatioVariants, badgeVariants, buttonVariants, cn, collapsibleContentVariants, collapsibleTriggerVariants, createFilterableColumn, createSortableHeader, badgeVariants as moonUIBadgeVariants, buttonVariants as moonUIButtonVariants, skeletonVariants as moonUISkeletonVariants, toggleVariants as moonUIToggleVariants, popoverContentVariants, progressVariants, separatorVariants, skeletonVariants, toast, toggleVariants, tooltipVariants, useToast };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map