@kjaniec-dev/ui 0.4.1 → 0.5.0

package/dist/index.cjs

@@ -1101,6 +1101,78 @@ var PageHeader = React17__namespace.forwardRef(
   ] }) })
 );
 PageHeader.displayName = "PageHeader";
+var EmptyState = React17__namespace.forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center text-center p-8 border border-dashed border-border rounded-kj-lg bg-muted/20 min-h-[300px]",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground mb-4 [&_svg]:h-6 [&_svg]:w-6", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground mb-1", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm mb-6 leading-relaxed", children: description }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: action })
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+var MetricCard = React17__namespace.forwardRef(
+  ({ className, title, value, trend, trendDirection = "neutral", description, icon, ...props }, ref) => {
+    const trendColor = {
+      up: "text-success bg-success-surface border-success/20",
+      down: "text-danger bg-danger-surface border-danger/20",
+      neutral: "text-muted-foreground bg-muted border-border/20"
+    }[trendDirection];
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { ref, className: cn("p-6", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono font-semibold uppercase tracking-[0.1em] text-muted-foreground", children: title }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground shrink-0 [&_svg]:h-4 [&_svg]:w-4", children: icon })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2.5 mb-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold tracking-tight text-foreground", children: value }),
+        trend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[0.75rem] font-bold px-2 py-0.5 rounded-full border", trendColor), children: trend })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: description })
+    ] });
+  }
+);
+MetricCard.displayName = "MetricCard";
+function DataTable({
+  className,
+  columns,
+  data,
+  loading = false,
+  error,
+  emptyTitle = "No data available",
+  emptyDescription = "There are no records to display at this time.",
+  emptyAction,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(TableWrap, { className: cn("relative overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col, idx) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: col.className, children: col.header }, idx)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: loading && data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "h-64 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading dataset..." })
+      ] }) }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "danger", title: "Error loading data", children: error }) }) }) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        EmptyState,
+        {
+          title: emptyTitle,
+          description: emptyDescription,
+          action: emptyAction,
+          className: "border-none bg-transparent rounded-none py-16"
+        }
+      ) }) }) : data.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: col.className, children: col.accessor(row) }, colIdx)) }, rowIdx)) })
+    ] }),
+    loading && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] grid place-items-center z-10 transition-opacity duration-150", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 36 }) })
+  ] });
+}
+DataTable.displayName = "DataTable";
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -1121,15 +1193,18 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.DataTable = DataTable;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
 exports.DropdownMenuItem = DropdownMenuItem;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EmptyState = EmptyState;
 exports.Field = Field;
 exports.Hint = Hint;
 exports.Input = Input;
 exports.Label = Label;
+exports.MetricCard = MetricCard;
 exports.Modal = Modal;
 exports.ModalActions = ModalActions;
 exports.ModalDescription = ModalDescription;