@thangnqdev/ui 0.1.0

package/dist/chunk-NFVONJUK.js

@@ -0,0 +1,882 @@
+import { chipVariants, Chip } from './chunk-X76KBH4Y.js';
+import { Button } from './chunk-66VWUJEI.js';
+import { __export, cn } from './chunk-4S6L5V7X.js';
+import React9, { forwardRef, useState, createContext, useContext, useMemo, useRef, useEffect } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDown, ArrowUpRight, ArrowDownRight, Minus, Search, Download, ChevronUp, ChevronsUpDown, ChevronLeft, ChevronRight, FolderOpen, Folder, FileCode, Image, FileText } from 'lucide-react';
+
+// src/data-display/index.ts
+var data_display_exports = {};
+__export(data_display_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Carousel: () => Carousel,
+  Chip: () => Chip,
+  DataTablePro: () => DataTablePro,
+  StatCard: () => StatCard,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Timeline: () => Timeline,
+  TreeView: () => TreeView,
+  avatarVariants: () => avatarVariants,
+  cardVariants: () => cardVariants,
+  chipVariants: () => chipVariants,
+  statusVariants: () => statusVariants,
+  useAccordion: () => useAccordion
+});
+var cardVariants = 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 = forwardRef(
+  ({ className, variant, padding, specular = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(cardVariants({ variant, padding, specular }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 mb-5", className), ...props, children });
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ 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 = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ 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 = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("pt-0", className), ...props, children });
+  }
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ 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 = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm text-left", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-[var(--ui-bg-secondary)] border-b border-[var(--ui-border-default)]", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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 = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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 = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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 = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", { ref, className: cn("p-4 align-middle text-sm text-[var(--ui-text-primary)]", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-xs text-[var(--ui-text-muted)]", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+var avatarVariants = 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 = 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 = forwardRef(
+  ({ className, size = "md", src, alt, name, status, children, ...props }, ref) => {
+    const [hasError, setHasError] = 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__ */ jsxs("div", { ref, className: cn(avatarVariants({ size }), className), ...props, children: [
+      src && !hasError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || name || "Avatar",
+          onError: () => setHasError(true),
+          className: "h-full w-full object-cover"
+        }
+      ) : initials ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--ui-text-secondary)]", children: initials }) : children || /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--ui-text-muted)]", children: "?" }),
+      status && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-label": `Status: ${status}`,
+          className: cn(statusVariants({ status, size }))
+        }
+      )
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = forwardRef(
+  ({ className, max = 4, spacing = "tight", children, ...props }, ref) => {
+    const childArray = React9.Children.toArray(children);
+    const visibleChildren = childArray.slice(0, max);
+    const remainingCount = childArray.length - max;
+    return /* @__PURE__ */ 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__ */ jsx("div", { className: "ring-2 ring-[var(--ui-bg-surface)] rounded-full", children: child }, i)),
+          remainingCount > 0 && /* @__PURE__ */ 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 = createContext(null);
+function useAccordion() {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error("AccordionItem components must be used within <Accordion />");
+  return context;
+}
+var Accordion = forwardRef(
+  ({
+    className,
+    type = "single",
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = 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__ */ jsx(AccordionContext.Provider, { value: { openItems, toggleItem }, children: /* @__PURE__ */ 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 = createContext(null);
+var AccordionItem = forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { id: value }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children }) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { openItems, toggleItem } = useAccordion();
+    const item = useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+    return /* @__PURE__ */ 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__ */ jsx(
+            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 = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { openItems } = useAccordion();
+    const item = useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+    if (!isOpen) return null;
+    return /* @__PURE__ */ 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 StatCard = forwardRef(
+  ({ className, label, value, change, trend, trendLabel, icon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-6", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-[var(--ui-text-muted)]", children: label }),
+        icon && /* @__PURE__ */ jsx("div", { className: "p-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-secondary)] text-[var(--ui-text-secondary)]", children: icon })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl sm:text-3xl font-extrabold tracking-tight text-[var(--ui-text-primary)]", children: value }),
+        change !== void 0 && /* @__PURE__ */ 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__ */ jsx(ArrowUpRight, { className: "w-3.5 h-3.5" }),
+              trend === "down" && /* @__PURE__ */ jsx(ArrowDownRight, { className: "w-3.5 h-3.5" }),
+              trend === "neutral" && /* @__PURE__ */ jsx(Minus, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsx("span", { children: change })
+            ]
+          }
+        )
+      ] }),
+      trendLabel && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-[var(--ui-text-muted)]", children: trendLabel })
+    ] });
+  }
+);
+StatCard.displayName = "StatCard";
+var Timeline = forwardRef(
+  ({ className, items, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative pl-6 space-y-6", className), ...props, children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex items-start gap-4", children: [
+          /* @__PURE__ */ 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__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-current" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1 pt-0.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-[var(--ui-text-primary)]", children: item.title }),
+              item.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ui-text-muted)] font-mono", children: item.timestamp })
+            ] }),
+            item.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ui-text-secondary)] leading-relaxed", children: item.description })
+          ] })
+        ] }, item.id);
+      })
+    ] });
+  }
+);
+Timeline.displayName = "Timeline";
+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] = useState("");
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDirection, setSortDirection] = useState("asc");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const filteredData = 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 = 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 = 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__ */ jsxs("div", { className: cn("w-full space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
+      (title || description) && /* @__PURE__ */ jsxs("div", { children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+        searchable && /* @__PURE__ */ jsxs("div", { className: "relative w-full sm:w-64", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
+          /* @__PURE__ */ 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__ */ jsx(Button, { size: "xs", variant: "outline", leftIcon: /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }), onClick: exportCSV, children: "Export CSV" }),
+        actions
+      ] })
+    ] }),
+    selectedKeys.length > 0 && /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: /* @__PURE__ */ jsxs("span", { children: [
+        "Selected ",
+        selectedKeys.length,
+        " of ",
+        sortedData.length,
+        " records"
+      ] }) }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { children: col.header }),
+              col.sortable !== false && /* @__PURE__ */ jsx("span", { className: "text-[var(--ui-text-muted)]", children: sortKey === col.key ? sortDirection === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-3 h-3 opacity-40" }) })
+            ] })
+          },
+          col.key
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ 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__ */ jsxs(
+          TableRow,
+          {
+            "data-state": isSelected ? "selected" : void 0,
+            className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
+            children: [
+              selectable && /* @__PURE__ */ jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ 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__ */ jsx(TableCell, { children: cellContent }, col.key);
+              })
+            ]
+          },
+          key
+        );
+      }) })
+    ] }) }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: "Rows per page:" }),
+        /* @__PURE__ */ 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__ */ jsx("option", { value: opt, children: opt }, opt))
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "outline",
+            disabled: currentPage === 1,
+            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "px-2 font-bold text-[var(--ui-text-primary)]", children: [
+          currentPage,
+          " / ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "outline",
+            disabled: currentPage === totalPages,
+            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function TreeNode({ item, level, selectedId, onSelect }) {
+  const [isExpanded, setIsExpanded] = 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__ */ jsx(FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
+    }
+    return /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "select-none text-xs", children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+            hasChildren ? /* @__PURE__ */ jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsx("span", { className: "w-4" }),
+            getIcon(),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+          ] }),
+          item.badge !== void 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
+      /* @__PURE__ */ 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__ */ jsx(
+        TreeNode,
+        {
+          item: child,
+          level: level + 1,
+          selectedId,
+          onSelect
+        },
+        child.id
+      ))
+    ] })
+  ] });
+}
+var TreeView = forwardRef(
+  ({ data, selectedId, onSelect, className }, ref) => {
+    return /* @__PURE__ */ 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__ */ jsx(
+          TreeNode,
+          {
+            item,
+            level: 0,
+            selectedId,
+            onSelect
+          },
+          item.id
+        ))
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+var Carousel = forwardRef(
+  ({
+    autoplay = false,
+    autoplayInterval = 4e3,
+    loop = true,
+    showArrows = true,
+    showDots = true,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const totalSlides = React9.Children.count(children);
+    const timerRef = 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;
+      });
+    };
+    useEffect(() => {
+      if (autoplay && totalSlides > 1) {
+        timerRef.current = setInterval(nextSlide, autoplayInterval);
+        return () => clearInterval(timerRef.current);
+      }
+    }, [autoplay, autoplayInterval, totalSlides, currentIndex]);
+    return /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              className: "flex transition-transform duration-500 ease-out",
+              style: { transform: `translateX(-${currentIndex * 100}%)` },
+              children: React9.Children.map(children, (child, idx) => /* @__PURE__ */ jsx("div", { className: "w-full flex-shrink-0", children: child }, idx))
+            }
+          ),
+          showArrows && totalSlides > 1 && /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
+            }
+          ),
+          showArrows && totalSlides > 1 && /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "w-5 h-5" })
+            }
+          ),
+          showDots && totalSlides > 1 && /* @__PURE__ */ 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__ */ 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";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, DataTablePro, StatCard, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Timeline, TreeView, avatarVariants, cardVariants, data_display_exports, statusVariants, useAccordion };
+//# sourceMappingURL=chunk-NFVONJUK.js.map
+//# sourceMappingURL=chunk-NFVONJUK.js.map