@thangnqdev/ui 0.1.0

package/dist/data-display/index.cjs

@@ -0,0 +1,1023 @@
+'use strict';
+
+var React11 = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React11__default = /*#__PURE__*/_interopDefault(React11);
+
+// src/data-display/Card.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var cardVariants = classVarianceAuthority.cva(
+  "relative overflow-hidden rounded-[var(--ui-radius-xl)] transition-all duration-200 border",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--ui-bg-surface)] backdrop-blur-xl border-[var(--ui-border-default)] shadow-[var(--ui-shadow-md)] text-[var(--ui-text-primary)]",
+        bordered: "bg-transparent border-[var(--ui-border-strong)] text-[var(--ui-text-primary)]",
+        elevated: "bg-[var(--ui-bg-surface)] backdrop-blur-2xl border-[var(--ui-border-default)] shadow-[var(--ui-shadow-xl)] hover:shadow-2xl text-[var(--ui-text-primary)]",
+        interactive: "bg-[var(--ui-bg-surface)] backdrop-blur-xl border-[var(--ui-border-default)] shadow-[var(--ui-shadow-md)] hover:border-[var(--ui-primary)] cursor-pointer hover:-translate-y-1 hover:shadow-[0_12px_32px_rgba(99,102,241,0.15)] text-[var(--ui-text-primary)] active:translate-y-0",
+        glow: "bg-[var(--ui-bg-surface)] backdrop-blur-xl border-indigo-500/30 shadow-[0_0_30px_rgba(99,102,241,0.12)] text-[var(--ui-text-primary)]"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-4 sm:p-5",
+        md: "p-6 sm:p-7",
+        lg: "p-8 sm:p-10"
+      },
+      specular: {
+        true: "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent before:pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      padding: "md",
+      specular: true
+    }
+  }
+);
+var Card = React11.forwardRef(
+  ({ className, variant, padding, specular = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(cardVariants({ variant, padding, specular }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 mb-5", className), ...props, children });
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className), ...props, children });
+  }
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-xs sm:text-sm text-[var(--ui-text-muted)] font-normal leading-relaxed", className), ...props, children });
+  }
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("pt-0", className), ...props, children });
+  }
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center pt-4 mt-5 border-t border-[var(--ui-border-subtle)]", className), ...props, children });
+  }
+);
+CardFooter.displayName = "CardFooter";
+var Table = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full caption-bottom text-sm text-left", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("bg-[var(--ui-bg-secondary)] border-b border-[var(--ui-border-default)]", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: cn("bg-[var(--ui-bg-secondary)] font-medium border-t border-[var(--ui-border-default)]", className), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--ui-border-subtle)] transition-colors hover:bg-[var(--ui-bg-tertiary)]/50 data-[state=selected]:bg-[var(--ui-bg-tertiary)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-11 px-4 text-left align-middle font-semibold text-xs text-[var(--ui-text-muted)] uppercase tracking-wider",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: cn("p-4 align-middle text-sm text-[var(--ui-text-primary)]", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: cn("mt-4 text-xs text-[var(--ui-text-muted)]", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+var avatarVariants = classVarianceAuthority.cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--ui-bg-tertiary)] select-none border border-[var(--ui-border-subtle)]",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-[10px]",
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm font-semibold",
+        lg: "h-12 w-12 text-base font-semibold",
+        xl: "h-16 w-16 text-lg font-bold"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var statusVariants = classVarianceAuthority.cva(
+  "absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--ui-bg-surface)]",
+  {
+    variants: {
+      status: {
+        online: "bg-[var(--ui-success)]",
+        offline: "bg-[var(--ui-text-muted)]",
+        busy: "bg-[var(--ui-error)]",
+        away: "bg-[var(--ui-warning)]"
+      },
+      size: {
+        xs: "h-1.5 w-1.5",
+        sm: "h-2 w-2",
+        md: "h-2.5 w-2.5",
+        lg: "h-3 w-3",
+        xl: "h-4 w-4"
+      }
+    },
+    defaultVariants: {
+      status: "online",
+      size: "md"
+    }
+  }
+);
+var Avatar = React11.forwardRef(
+  ({ className, size = "md", src, alt, name, status, children, ...props }, ref) => {
+    const [hasError, setHasError] = React11.useState(false);
+    const getInitials = (n) => {
+      if (!n) return "";
+      const parts = n.trim().split(" ");
+      if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    };
+    const initials = name ? getInitials(name) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(avatarVariants({ size }), className), ...props, children: [
+      src && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src,
+          alt: alt || name || "Avatar",
+          onError: () => setHasError(true),
+          className: "h-full w-full object-cover"
+        }
+      ) : initials ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-[var(--ui-text-secondary)]", children: initials }) : children || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-[var(--ui-text-muted)]", children: "?" }),
+      status && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-label": `Status: ${status}`,
+          className: cn(statusVariants({ status, size }))
+        }
+      )
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = React11.forwardRef(
+  ({ className, max = 4, spacing = "tight", children, ...props }, ref) => {
+    const childArray = React11__default.default.Children.toArray(children);
+    const visibleChildren = childArray.slice(0, max);
+    const remainingCount = childArray.length - max;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "flex items-center",
+          spacing === "tight" ? "-space-x-3" : "-space-x-1.5",
+          className
+        ),
+        ...props,
+        children: [
+          visibleChildren.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ring-2 ring-[var(--ui-bg-surface)] rounded-full", children: child }, i)),
+          remainingCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-default)] ring-2 ring-[var(--ui-bg-surface)] text-xs font-bold text-[var(--ui-text-secondary)] select-none", children: [
+            "+",
+            remainingCount
+          ] })
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var AccordionContext = React11.createContext(null);
+function useAccordion() {
+  const context = React11.useContext(AccordionContext);
+  if (!context) throw new Error("AccordionItem components must be used within <Accordion />");
+  return context;
+}
+var Accordion = React11.forwardRef(
+  ({
+    className,
+    type = "single",
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = React11.useState(() => {
+      if (Array.isArray(defaultValue)) return defaultValue;
+      if (typeof defaultValue === "string") return [defaultValue];
+      return [];
+    });
+    const openItems = controlledValue !== void 0 ? Array.isArray(controlledValue) ? controlledValue : [controlledValue] : internalOpen;
+    const toggleItem = (id) => {
+      let next;
+      if (type === "single") {
+        next = openItems.includes(id) ? [] : [id];
+      } else {
+        next = openItems.includes(id) ? openItems.filter((i) => i !== id) : [...openItems, id];
+      }
+      setInternalOpen(next);
+      onValueChange?.(type === "single" ? next[0] || "" : next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { openItems, toggleItem }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("divide-y divide-[var(--ui-border-subtle)] border-y border-[var(--ui-border-subtle)]", className), ...props, children }) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItemContext = React11.createContext(null);
+var AccordionItem = React11.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: { id: value }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full", className), ...props, children }) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { openItems, toggleItem } = useAccordion();
+    const item = React11.useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": isOpen,
+        onClick: () => item && toggleItem(item.id),
+        className: cn(
+          "flex w-full items-center justify-between py-4 text-sm font-semibold text-[var(--ui-text-primary)] transition-all hover:text-[var(--ui-primary)] text-left",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 text-[var(--ui-text-muted)] transition-transform duration-200",
+                isOpen && "rotate-180 text-[var(--ui-primary)]"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { openItems } = useAccordion();
+    const item = React11.useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("pb-4 pt-0 text-sm text-[var(--ui-text-secondary)] animate-in fade-in duration-200", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AccordionContent.displayName = "AccordionContent";
+var chipVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1.5 rounded-full font-medium transition-colors select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] border border-[var(--ui-border-default)]",
+        primary: "bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] border border-[var(--ui-primary)]/30",
+        secondary: "bg-[var(--ui-secondary)]/15 text-[var(--ui-secondary)] border border-[var(--ui-secondary)]/30",
+        success: "bg-[var(--ui-success-subtle)] text-[var(--ui-success)] border border-[var(--ui-success)]/30",
+        warning: "bg-[var(--ui-warning-subtle)] text-[var(--ui-warning)] border border-[var(--ui-warning)]/30",
+        error: "bg-[var(--ui-error-subtle)] text-[var(--ui-error)] border border-[var(--ui-error)]/30"
+      },
+      size: {
+        sm: "h-6 px-2.5 text-xs",
+        md: "h-7 px-3 text-xs",
+        lg: "h-8 px-3.5 text-sm"
+      },
+      clickable: {
+        true: "cursor-pointer hover:opacity-80 active:scale-95",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      clickable: false
+    }
+  }
+);
+var Chip = React11.forwardRef(
+  ({ className, variant, size, clickable, onRemove, icon, children, onClick, ...props }, ref) => {
+    const isClickable = Boolean(clickable || onClick);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        onClick,
+        className: cn(chipVariants({ variant, size, clickable: isClickable }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              "aria-label": "Remove chip",
+              className: "p-0.5 rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors -mr-1",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var StatCard = React11.forwardRef(
+  ({ className, label, value, change, trend, trendLabel, icon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { ref, className: cn("p-6", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-[var(--ui-text-muted)]", children: label }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-secondary)] text-[var(--ui-text-secondary)]", children: icon })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl sm:text-3xl font-extrabold tracking-tight text-[var(--ui-text-primary)]", children: value }),
+        change !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "inline-flex items-center gap-0.5 text-xs font-bold px-1.5 py-0.5 rounded-full",
+              trend === "up" && "text-[var(--ui-success)] bg-[var(--ui-success-subtle)]",
+              trend === "down" && "text-[var(--ui-error)] bg-[var(--ui-error-subtle)]",
+              trend === "neutral" && "text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]"
+            ),
+            children: [
+              trend === "up" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { className: "w-3.5 h-3.5" }),
+              trend === "down" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownRight, { className: "w-3.5 h-3.5" }),
+              trend === "neutral" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: change })
+            ]
+          }
+        )
+      ] }),
+      trendLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-[var(--ui-text-muted)]", children: trendLabel })
+    ] });
+  }
+);
+StatCard.displayName = "StatCard";
+var Timeline = React11.forwardRef(
+  ({ className, items, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("relative pl-6 space-y-6", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[11px] top-2 bottom-2 w-0.5 bg-[var(--ui-border-subtle)]" }),
+      items.map((item) => {
+        const isCompleted = item.status === "completed";
+        const isActive = item.status === "active";
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-start gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute -left-6 flex items-center justify-center w-6 h-6 rounded-full ring-4 ring-[var(--ui-bg-surface)] text-xs font-bold transition-all",
+                isCompleted && "bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]",
+                isActive && "bg-[var(--ui-bg-surface)] border-2 border-[var(--ui-primary)] text-[var(--ui-primary)]",
+                (!item.status || item.status === "pending") && "bg-[var(--ui-bg-tertiary)] border border-[var(--ui-border-default)] text-[var(--ui-text-muted)]"
+              ),
+              children: item.icon || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-current" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1 pt-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-[var(--ui-text-primary)]", children: item.title }),
+              item.timestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--ui-text-muted)] font-mono", children: item.timestamp })
+            ] }),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-secondary)] leading-relaxed", children: item.description })
+          ] })
+        ] }, item.id);
+      })
+    ] });
+  }
+);
+Timeline.displayName = "Timeline";
+var buttonVariants = classVarianceAuthority.cva(
+  "relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20",
+        secondary: "bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm",
+        outline: "border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm",
+        ghost: "bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70",
+        danger: "bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15",
+        link: "bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal",
+        glass: "bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1",
+        sm: "h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5",
+        md: "h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold",
+        lg: "h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold",
+        xl: "h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
+var Button = React11.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    fullWidth,
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText || children })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: leftIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: rightIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function DataTablePro({
+  data,
+  columns,
+  keyExtractor,
+  searchable = true,
+  searchPlaceholder = "Search all records...",
+  selectable = true,
+  onSelectionChange,
+  pageSize: initialPageSize = 10,
+  pageSizeOptions = [5, 10, 25, 50],
+  title,
+  description,
+  actions,
+  className
+}) {
+  const [search, setSearch] = React11.useState("");
+  const [sortKey, setSortKey] = React11.useState(null);
+  const [sortDirection, setSortDirection] = React11.useState("asc");
+  const [currentPage, setCurrentPage] = React11.useState(1);
+  const [pageSize, setPageSize] = React11.useState(initialPageSize);
+  const [selectedKeys, setSelectedKeys] = React11.useState([]);
+  const filteredData = React11.useMemo(() => {
+    if (!search.trim()) return data;
+    const q = search.toLowerCase();
+    return data.filter((row) => {
+      return Object.values(row).some((val) => {
+        if (val === null || val === void 0) return false;
+        return String(val).toLowerCase().includes(q);
+      });
+    });
+  }, [data, search]);
+  const sortedData = React11.useMemo(() => {
+    if (!sortKey) return filteredData;
+    const col = columns.find((c) => c.key === sortKey);
+    return [...filteredData].sort((a, b) => {
+      const valA = col?.accessor ? col.accessor(a) : a[sortKey];
+      const valB = col?.accessor ? col.accessor(b) : b[sortKey];
+      if (valA === valB) return 0;
+      if (valA === null || valA === void 0) return 1;
+      if (valB === null || valB === void 0) return -1;
+      const comp = valA < valB ? -1 : 1;
+      return sortDirection === "asc" ? comp : -comp;
+    });
+  }, [filteredData, sortKey, sortDirection, columns]);
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const paginatedData = React11.useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, pageSize]);
+  const handleSort = (key) => {
+    if (sortKey === key) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else {
+        setSortKey(null);
+        setSortDirection("asc");
+      }
+    } else {
+      setSortKey(key);
+      setSortDirection("asc");
+    }
+  };
+  const toggleSelectAll = () => {
+    if (selectedKeys.length === paginatedData.length) {
+      setSelectedKeys([]);
+      onSelectionChange?.([]);
+    } else {
+      const allKeys = paginatedData.map(keyExtractor);
+      setSelectedKeys(allKeys);
+      onSelectionChange?.(allKeys);
+    }
+  };
+  const toggleSelectRow = (key) => {
+    const next = selectedKeys.includes(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
+    setSelectedKeys(next);
+    onSelectionChange?.(next);
+  };
+  const exportCSV = () => {
+    const headers = columns.map((c) => typeof c.header === "string" ? c.header : c.key);
+    const rows = sortedData.map(
+      (row) => columns.map((c) => {
+        const val = c.accessor ? c.accessor(row) : row[c.key];
+        return `"${String(val ?? "").replace(/"/g, '""')}"`;
+      }).join(",")
+    );
+    const csvContent = "data:text/csv;charset=utf-8," + [headers.join(","), ...rows].join("\n");
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", `export_${Date.now()}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const isAllSelected = paginatedData.length > 0 && selectedKeys.length === paginatedData.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
+      (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+        searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full sm:w-64", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: searchPlaceholder,
+              value: search,
+              onChange: (e) => {
+                setSearch(e.target.value);
+                setCurrentPage(1);
+              },
+              className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/40 text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all shadow-inner"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xs", variant: "outline", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-3 h-3" }), onClick: exportCSV, children: "Export CSV" }),
+        actions
+      ] })
+    ] }),
+    selectedKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 rounded-xl bg-[var(--ui-primary)]/15 border border-[var(--ui-primary)]/30 flex items-center justify-between animate-in fade-in duration-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Selected ",
+        selectedKeys.length,
+        " of ",
+        sortedData.length,
+        " records"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "xs",
+          variant: "ghost",
+          className: "text-xs text-rose-500 hover:text-rose-600 hover:bg-rose-500/10",
+          onClick: () => {
+            setSelectedKeys([]);
+            onSelectionChange?.([]);
+          },
+          children: "Clear Selection"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-x-auto rounded-2xl border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isAllSelected,
+            onChange: toggleSelectAll,
+            className: "rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
+          }
+        ) }),
+        columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableHead,
+          {
+            style: { width: col.width },
+            onClick: () => col.sortable !== false && handleSort(col.key),
+            className: cn(
+              col.sortable !== false && "cursor-pointer select-none hover:text-[var(--ui-text-primary)] transition-colors"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.header }),
+              col.sortable !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-text-muted)]", children: sortKey === col.key ? sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3 opacity-40" }) })
+            ] })
+          },
+          col.key
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length + (selectable ? 1 : 0), className: "h-32 text-center text-xs text-[var(--ui-text-muted)]", children: "No matching records found." }) }) : paginatedData.map((row, rowIdx) => {
+        const key = keyExtractor(row);
+        const isSelected = selectedKeys.includes(key);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TableRow,
+          {
+            "data-state": isSelected ? "selected" : void 0,
+            className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
+            children: [
+              selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: isSelected,
+                  onChange: () => toggleSelectRow(key),
+                  className: "rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
+                }
+              ) }),
+              columns.map((col) => {
+                const cellContent = col.render ? col.render(row, rowIdx) : col.accessor ? col.accessor(row) : row[col.key];
+                return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: cellContent }, col.key);
+              })
+            ]
+          },
+          key
+        );
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-1 text-xs text-[var(--ui-text-muted)] font-mono", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => {
+              setPageSize(Number(e.target.value));
+              setCurrentPage(1);
+            },
+            className: "px-2 py-1 rounded-lg bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] text-[var(--ui-text-primary)] font-mono text-xs focus:outline-none",
+            children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--ui-text-muted)]", children: [
+          "Showing ",
+          Math.min((currentPage - 1) * pageSize + 1, sortedData.length),
+          "\u2013",
+          Math.min(currentPage * pageSize, sortedData.length),
+          " of ",
+          sortedData.length
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "outline",
+            disabled: currentPage === 1,
+            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 font-bold text-[var(--ui-text-primary)]", children: [
+          currentPage,
+          " / ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "outline",
+            disabled: currentPage === totalPages,
+            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function TreeNode({ item, level, selectedId, onSelect }) {
+  const [isExpanded, setIsExpanded] = React11.useState(Boolean(item.defaultExpanded));
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const isSelected = selectedId === item.id;
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (hasChildren) {
+      setIsExpanded(!isExpanded);
+    }
+    onSelect?.(item);
+  };
+  const getIcon = () => {
+    if (item.icon) return item.icon;
+    if (hasChildren) {
+      return isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "w-4 h-4 text-amber-500 shrink-0" });
+    }
+    if (item.label.endsWith(".tsx") || item.label.endsWith(".ts") || item.label.endsWith(".js")) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { className: "w-4 h-4 text-blue-500 shrink-0" });
+    }
+    if (item.label.endsWith(".png") || item.label.endsWith(".jpg") || item.label.endsWith(".svg")) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "select-none text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onClick: handleClick,
+        style: { paddingLeft: `${level * 16 + 8}px` },
+        className: cn(
+          "flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group",
+          isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4" }),
+            getIcon(),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+          ] }),
+          item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "px-1.5 py-0.5 rounded-md text-[10px] font-mono",
+                isSelected ? "bg-white/20 text-white" : "bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]"
+              ),
+              children: item.badge
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]",
+          style: { left: `${level * 16 + 15}px` }
+        }
+      ),
+      item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        TreeNode,
+        {
+          item: child,
+          level: level + 1,
+          selectedId,
+          onSelect
+        },
+        child.id
+      ))
+    ] })
+  ] });
+}
+var TreeView = React11.forwardRef(
+  ({ data, selectedId, onSelect, className }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden",
+          className
+        ),
+        children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          TreeNode,
+          {
+            item,
+            level: 0,
+            selectedId,
+            onSelect
+          },
+          item.id
+        ))
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+var Carousel = React11.forwardRef(
+  ({
+    autoplay = false,
+    autoplayInterval = 4e3,
+    loop = true,
+    showArrows = true,
+    showDots = true,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = React11.useState(0);
+    const totalSlides = React11__default.default.Children.count(children);
+    const timerRef = React11.useRef(null);
+    const nextSlide = () => {
+      setCurrentIndex((prev) => {
+        if (prev === totalSlides - 1) {
+          return loop ? 0 : prev;
+        }
+        return prev + 1;
+      });
+    };
+    const prevSlide = () => {
+      setCurrentIndex((prev) => {
+        if (prev === 0) {
+          return loop ? totalSlides - 1 : prev;
+        }
+        return prev - 1;
+      });
+    };
+    React11.useEffect(() => {
+      if (autoplay && totalSlides > 1) {
+        timerRef.current = setInterval(nextSlide, autoplayInterval);
+        return () => clearInterval(timerRef.current);
+      }
+    }, [autoplay, autoplayInterval, totalSlides, currentIndex]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        onMouseEnter: () => autoplay && clearInterval(timerRef.current),
+        onMouseLeave: () => {
+          if (autoplay && totalSlides > 1) {
+            timerRef.current = setInterval(nextSlide, autoplayInterval);
+          }
+        },
+        className: cn("relative w-full overflow-hidden rounded-3xl group", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex transition-transform duration-500 ease-out",
+              style: { transform: `translateX(-${currentIndex * 100}%)` },
+              children: React11__default.default.Children.map(children, (child, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0", children: child }, idx))
+            }
+          ),
+          showArrows && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: prevSlide,
+              disabled: !loop && currentIndex === 0,
+              className: "absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-[var(--ui-bg-surface)]/80 hover:bg-[var(--ui-bg-surface)] backdrop-blur-xl border border-[var(--ui-border-default)] shadow-lg flex items-center justify-center text-[var(--ui-text-primary)] opacity-0 group-hover:opacity-100 transition-all disabled:opacity-0 cursor-pointer",
+              "aria-label": "Previous Slide",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-5 h-5" })
+            }
+          ),
+          showArrows && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: nextSlide,
+              disabled: !loop && currentIndex === totalSlides - 1,
+              className: "absolute right-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-[var(--ui-bg-surface)]/80 hover:bg-[var(--ui-bg-surface)] backdrop-blur-xl border border-[var(--ui-border-default)] shadow-lg flex items-center justify-center text-[var(--ui-text-primary)] opacity-0 group-hover:opacity-100 transition-all disabled:opacity-0 cursor-pointer",
+              "aria-label": "Next Slide",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-5 h-5" })
+            }
+          ),
+          showDots && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 inset-x-0 flex items-center justify-center gap-1.5 pointer-events-auto", children: Array.from({ length: totalSlides }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setCurrentIndex(idx),
+              className: cn(
+                "h-2 rounded-full transition-all cursor-pointer shadow-xs",
+                currentIndex === idx ? "w-6 bg-[var(--ui-primary)]" : "w-2 bg-white/40 dark:bg-white/30 hover:bg-white/60"
+              ),
+              "aria-label": `Go to slide ${idx + 1}`
+            },
+            idx
+          )) })
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Carousel = Carousel;
+exports.Chip = Chip;
+exports.DataTablePro = DataTablePro;
+exports.StatCard = StatCard;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.Timeline = Timeline;
+exports.TreeView = TreeView;
+exports.avatarVariants = avatarVariants;
+exports.cardVariants = cardVariants;
+exports.chipVariants = chipVariants;
+exports.statusVariants = statusVariants;
+exports.useAccordion = useAccordion;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map