@pol-studios/ui 1.0.0

package/dist/data/index.js

@@ -0,0 +1,372 @@
+"use client";
+
+// src/data/DataTable.tsx
+import { useState, useRef, useEffect } from "react";
+import { Link } from "@tanstack/react-router";
+import { cn } from "@pol-studios/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataTableSkeleton({ variant = "rich" }) {
+  const rowHeight = variant === "compact" ? "h-11" : variant === "rich" ? "h-14" : "h-18";
+  const rows = variant === "compact" ? 8 : variant === "rich" ? 6 : 4;
+  return /* @__PURE__ */ jsx("div", { className: "space-y-0", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-4 px-4 py-3",
+        rowHeight,
+        "border-b border-white/5 last:border-b-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-lg bg-muted/20 animate-pulse" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted/20 rounded animate-pulse w-3/4" }),
+          variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted/10 rounded animate-pulse w-1/2" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-16 h-7 bg-muted/20 rounded-lg animate-pulse" })
+      ]
+    },
+    i
+  )) });
+}
+function DataTableEmpty({
+  message,
+  icon,
+  IconComponent
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full py-12 px-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-4 rounded-2xl bg-muted/10 mb-4", children: IconComponent && /* @__PURE__ */ jsx(IconComponent, { name: icon, size: "2.5rem", className: "text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground text-center max-w-xs", children: message })
+  ] });
+}
+function DataTableHeader({
+  title,
+  titleIcon,
+  itemCount,
+  actions,
+  IconComponent,
+  HeadingComponent
+}) {
+  const [showActions, setShowActions] = useState(false);
+  const TitleComponent = HeadingComponent || (({ children, className }) => /* @__PURE__ */ jsx("h4", { className, children }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full pb-4 border-b border-white/10", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 w-full", children: [
+      titleIcon && IconComponent && /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-muted/10", children: /* @__PURE__ */ jsx(IconComponent, { name: titleIcon, size: "1.25rem", className: "text-foreground" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+        /* @__PURE__ */ jsx(TitleComponent, { size: 4, className: "font-semibold", children: title }),
+        /* @__PURE__ */ jsx("span", { className: "px-2.5 py-0.5 ml-auto rounded-md bg-muted/20 text-muted-foreground text-xs font-medium", children: itemCount })
+      ] })
+    ] }),
+    actions && actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowActions(!showActions),
+          className: cn(
+            "p-2 rounded-lg",
+            "hover:bg-muted/20",
+            "active:scale-95",
+            "transition-all duration-200",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sapphire-500"
+          ),
+          "aria-label": "Actions",
+          children: IconComponent && /* @__PURE__ */ jsx(IconComponent, { name: "MoreVertical", size: "1rem", className: "text-muted-foreground" })
+        }
+      ),
+      showActions && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute right-0 top-full mt-2 z-10",
+            "min-w-[160px]",
+            "bg-background-50/95 backdrop-blur-xl backdrop-saturate-150",
+            "border border-white/10",
+            "rounded-xl shadow-2xl shadow-black/20",
+            "py-1"
+          ),
+          children: actions.map((action, i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                action.onClick();
+                setShowActions(false);
+              },
+              className: cn(
+                "w-full flex items-center gap-3 px-3 py-2",
+                "text-sm font-medium text-foreground",
+                "hover:bg-muted/20",
+                "transition-colors duration-150"
+              ),
+              children: [
+                action.icon && IconComponent && /* @__PURE__ */ jsx(IconComponent, { name: action.icon, size: "0.875rem" }),
+                action.label
+              ]
+            },
+            i
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function DataTableRow({
+  item,
+  maxCount,
+  variant,
+  showMiniChart,
+  onItemClick,
+  isFocused,
+  onFocus,
+  IconComponent
+}) {
+  const barWidthPercent = maxCount > 0 ? item.count / maxCount * 100 : 0;
+  const badgeColors = {
+    default: "bg-muted/20 text-foreground",
+    sapphire: "bg-sapphire-50/80 text-sapphire-700",
+    emerald: "bg-emerald-50/80 text-emerald-700",
+    coral: "bg-coral-50/80 text-coral-700",
+    amethyst: "bg-amethyst-50/80 text-amethyst-700",
+    lapis: "bg-lapis-50/80 text-lapis-700",
+    sky: "bg-sky-50/80 text-sky-700"
+  };
+  const rowHeightClass = variant === "compact" ? "min-h-11" : variant === "rich" ? "min-h-14" : "min-h-18";
+  const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && IconComponent && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center",
+          variant === "feature" ? "w-10 h-10" : "w-6 h-6",
+          "rounded-lg",
+          variant === "feature" && "bg-muted/10"
+        ),
+        children: /* @__PURE__ */ jsx(
+          IconComponent,
+          {
+            name: item.icon,
+            size: variant === "feature" ? "1.5rem" : "1rem",
+            className: item.iconColor || "text-muted-foreground"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "font-medium truncate",
+            variant === "compact" ? "text-sm" : "text-base"
+          ),
+          children: item.label || "(No label)"
+        }
+      ) }),
+      item.secondaryText && variant !== "compact" && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: item.secondaryText }),
+      item.tertiaryText && variant === "feature" && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5", children: item.tertiaryText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [
+      showMiniChart && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "w-20 h-2 bg-muted/20 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full bg-gradient-to-r from-sapphire-500 to-sapphire-600 transition-all duration-300",
+          style: { width: `${barWidthPercent}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "px-3 py-1 rounded-lg",
+            "text-xs font-semibold",
+            "min-w-[3.5rem] text-center",
+            "transition-transform duration-200",
+            "group-hover:scale-105",
+            badgeColors[item.badgeVariant || "default"]
+          ),
+          children: item.count
+        }
+      ),
+      (item.showChevron || item.href) && IconComponent && /* @__PURE__ */ jsx(
+        IconComponent,
+        {
+          name: "ChevronRight",
+          size: "1rem",
+          className: "text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity duration-200"
+        }
+      )
+    ] })
+  ] });
+  const baseClassName = cn(
+    "flex items-center gap-4 px-4 py-3",
+    rowHeightClass,
+    "border-b border-white/5 last:border-b-0",
+    "hover:bg-muted/20",
+    "active:scale-[0.98]",
+    "transition-all duration-200 ease-out",
+    "group",
+    isFocused && "ring-2 ring-sapphire-500 ring-inset"
+  );
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        ...item.href,
+        className: cn(baseClassName, "cursor-pointer focus-visible:outline-none"),
+        "aria-label": `${item.label}, ${item.count} items`,
+        onFocus,
+        tabIndex: 0,
+        children: rowContent
+      }
+    );
+  }
+  if (onItemClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onItemClick(item),
+        className: cn(baseClassName, "cursor-pointer w-full text-left focus-visible:outline-none"),
+        "aria-label": `${item.label}, ${item.count} items`,
+        onFocus,
+        tabIndex: 0,
+        children: rowContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: baseClassName,
+      "aria-label": `${item.label}, ${item.count} items`,
+      tabIndex: 0,
+      onFocus,
+      children: rowContent
+    }
+  );
+}
+function DataTable({
+  title,
+  titleIcon,
+  data = [],
+  emptyMessage = "No data available",
+  emptyIcon = "Inbox",
+  variant = "rich",
+  showMiniChart = true,
+  maxCount: providedMaxCount,
+  actions,
+  onItemClick,
+  className,
+  isLoading = false,
+  IconComponent,
+  HeadingComponent
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const scrollAreaRef = useRef(null);
+  const maxCount = providedMaxCount ?? (data.length > 0 ? Math.max(...data.map((d) => d.count)) : 1);
+  const isEmpty = !data || data.length === 0;
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (!scrollAreaRef.current) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => Math.min(prev + 1, data.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          if (focusedIndex >= 0 && focusedIndex < data.length) {
+            const item = data[focusedIndex];
+            if (onItemClick) {
+              onItemClick(item);
+            }
+          }
+          break;
+      }
+    };
+    const scrollArea = scrollAreaRef.current;
+    if (scrollArea) {
+      scrollArea.addEventListener("keydown", handleKeyDown);
+      return () => scrollArea.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [focusedIndex, data, onItemClick]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Solid background with soft shadow (no glassmorphism)
+        "bg-background",
+        "border border-white/10",
+        "rounded-2xl p-6",
+        "shadow-xl shadow-black/5",
+        "h-[50dvh] flex flex-col",
+        "transition-shadow duration-300",
+        "hover:shadow-2xl",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          DataTableHeader,
+          {
+            title,
+            titleIcon,
+            itemCount: data.length,
+            actions,
+            IconComponent,
+            HeadingComponent
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden mt-4", children: isLoading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollAreaRef,
+            className: cn(
+              "h-full overflow-y-auto",
+              "pr-2",
+              // Custom scrollbar
+              "[&::-webkit-scrollbar]:w-2",
+              "[&::-webkit-scrollbar-track]:bg-transparent",
+              "[&::-webkit-scrollbar-thumb]:bg-muted/20",
+              "[&::-webkit-scrollbar-thumb]:rounded-full",
+              "[&::-webkit-scrollbar-thumb:hover]:bg-muted/30"
+            ),
+            children: /* @__PURE__ */ jsx(DataTableSkeleton, { variant })
+          }
+        ) : isEmpty ? /* @__PURE__ */ jsx(DataTableEmpty, { message: emptyMessage, icon: emptyIcon, IconComponent }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollAreaRef,
+            className: cn(
+              "h-full overflow-y-auto",
+              "pr-2",
+              // Custom scrollbar
+              "[&::-webkit-scrollbar]:w-2",
+              "[&::-webkit-scrollbar-track]:bg-transparent",
+              "[&::-webkit-scrollbar-thumb]:bg-muted/20",
+              "[&::-webkit-scrollbar-thumb]:rounded-full",
+              "[&::-webkit-scrollbar-thumb:hover]:bg-muted/30"
+            ),
+            tabIndex: 0,
+            children: /* @__PURE__ */ jsx("div", { className: "space-y-0", children: data.map((item, index) => /* @__PURE__ */ jsx(
+              DataTableRow,
+              {
+                item,
+                maxCount,
+                variant,
+                showMiniChart,
+                onItemClick,
+                isFocused: focusedIndex === index,
+                onFocus: () => setFocusedIndex(index),
+                IconComponent
+              },
+              `${item.label}-${index}`
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  DataTable
+};