@kjaniec-dev/ui 0.4.1 → 0.6.0

package/dist/index.cjs

@@ -654,7 +654,7 @@ var AccordionContent = React17__namespace.forwardRef(
         ref,
         className: cn("grid transition-[grid-template-rows] duration-200 ease-out", isOpen ? "[grid-template-rows:1fr]" : "[grid-template-rows:0fr]"),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-[1.2rem] pb-[1.1rem] text-[0.85rem] text-muted-foreground", className), children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-[1.2rem] pt-3 pb-4 text-[0.85rem] text-muted-foreground", className), children }) })
       }
     );
   }
@@ -1101,6 +1101,166 @@ 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";
+var FormField = React17__namespace.forwardRef(
+  ({ className, label, hint, error, required, children, ...props }, ref) => {
+    const id = React17__namespace.useId();
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const child = React17__namespace.Children.only(children);
+    const clonedChild = React17__namespace.cloneElement(child, {
+      id: child.props.id ?? id,
+      "aria-describedby": cn(
+        hint && hintId,
+        error && errorId,
+        child.props["aria-describedby"]
+      ) || void 0,
+      "aria-invalid": error ? "true" : void 0,
+      required: child.props.required ?? required
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1.5 w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, required, children: label }),
+      clonedChild,
+      hint && !error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: hintId, children: hint }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(Hint, { id: errorId, error: true, children: error })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+var ErrorState = React17__namespace.forwardRef(
+  ({ className, title = "Wyst\u0105pi\u0142 b\u0142\u0105d", message, onRetry, retryLabel = "Spr\xF3buj ponownie", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center text-center p-8 border border-danger/25 rounded-kj-lg bg-danger-surface/20 min-h-[300px]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-danger-surface border border-danger/30 text-danger mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", stroke: "currentColor", strokeWidth: 2.5, viewBox: "0 0 24 24", className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground mb-1", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm mb-6 leading-relaxed", children: message }),
+        onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "danger", onClick: onRetry, children: retryLabel })
+      ]
+    }
+  )
+);
+ErrorState.displayName = "ErrorState";
+var Skeleton = React17__namespace.forwardRef(
+  ({ className, variant = "rectangular", width, height, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "animate-pulse bg-muted/40",
+        variant === "text" && "h-3 w-4/5 rounded-sm my-1.5",
+        variant === "circular" && "rounded-full",
+        variant === "rectangular" && "rounded-kj-md",
+        className
+      ),
+      style: {
+        width,
+        height,
+        ...style
+      },
+      ...props
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+var DashboardShell = React17__namespace.forwardRef(
+  ({ className, sidebar, topbar, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "min-h-screen bg-canvas text-foreground flex flex-col md:flex-row",
+        className
+      ),
+      ...props,
+      children: [
+        sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "w-full md:w-64 border-r border-border bg-surface shrink-0 z-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 h-auto md:h-screen flex flex-col", children: sidebar }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+          topbar && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 h-14 border-b border-border bg-surface flex items-center px-6 z-10 shrink-0", children: topbar }),
+          /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-6 md:p-8 max-w-7xl w-full mx-auto", children })
+        ] })
+      ]
+    }
+  )
+);
+DashboardShell.displayName = "DashboardShell";
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -1121,15 +1281,21 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.DashboardShell = DashboardShell;
+exports.DataTable = DataTable;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
 exports.DropdownMenuItem = DropdownMenuItem;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EmptyState = EmptyState;
+exports.ErrorState = ErrorState;
 exports.Field = Field;
+exports.FormField = FormField;
 exports.Hint = Hint;
 exports.Input = Input;
 exports.Label = Label;
+exports.MetricCard = MetricCard;
 exports.Modal = Modal;
 exports.ModalActions = ModalActions;
 exports.ModalDescription = ModalDescription;
@@ -1140,6 +1306,7 @@ exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Segmented = Segmented;
 exports.Select = Select;
+exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Stat = Stat;