@fabio.caffarello/react-design-system 3.7.0 → 3.9.0

package/dist/granular/ui/components/CommandPalette/CommandPalette.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsx as n, jsxs as o, Fragment as V } from "react/jsx-runtime";
+import { useState as y, useRef as S, useCallback as O, useEffect as b } from "react";
+import { createPortal as U } from "react-dom";
+import { Search as Z, Command as _ } from "lucide-react";
+import { getSpacingClass as r } from "../../tokens/spacing.js";
+import { getRadiusClass as K } from "../../tokens/radius.js";
+import { getShadowClass as z } from "../../tokens/shadows.js";
+import { getZIndexClass as L } from "../../tokens/z-index.js";
+import { getAnimationClass as g } from "../../tokens/animations.js";
+import B from "../../primitives/Input/Input.js";
+function ne({
+  items: E,
+  open: v,
+  defaultOpen: j = !1,
+  onOpenChange: d,
+  trigger: $,
+  placeholder: P = "Type a command or search...",
+  emptyMessage: R = "No commands found",
+  className: A = ""
+}) {
+  const [q, F] = y(j), [m, w] = y(""), [l, f] = y(0), k = S(null), p = S(null), x = v !== void 0, h = x ? v : q, i = E.filter((e) => {
+    var a, D;
+    if (!m) return !0;
+    const t = m.toLowerCase(), s = e.label.toLowerCase().includes(t), I = (a = e.description) == null ? void 0 : a.toLowerCase().includes(t), u = (D = e.keywords) == null ? void 0 : D.some(
+      (T) => T.toLowerCase().includes(t)
+    );
+    return s || I || u;
+  }), N = i.reduce(
+    (e, t) => {
+      const s = t.group || "Other";
+      return e[s] || (e[s] = []), e[s].push(t), e;
+    },
+    {}
+  ), c = O(
+    (e) => {
+      x || F(e), d == null || d(e), e && (w(""), f(0), setTimeout(() => {
+        var t;
+        return (t = k.current) == null ? void 0 : t.focus();
+      }, 0));
+    },
+    [x, d]
+  ), C = (e) => {
+    e.action(), c(!1);
+  }, M = (e) => {
+    if (e.key === "Escape") {
+      c(!1);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault(), f((t) => Math.min(t + 1, i.length - 1));
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault(), f((t) => Math.max(t - 1, 0));
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault(), i[l] && C(i[l]);
+      return;
+    }
+  };
+  b(() => {
+    if (p.current && l >= 0) {
+      const e = p.current.querySelector(
+        `[data-index="${l}"]`
+      );
+      e && typeof e.scrollIntoView == "function" && e.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [l]), b(() => {
+    f(0);
+  }, [m]), b(() => {
+    const e = (t) => {
+      (t.metaKey || t.ctrlKey) && t.key === "k" && (t.preventDefault(), c(!h));
+    };
+    return document.addEventListener(
+      "keydown",
+      e
+    ), () => document.removeEventListener(
+      "keydown",
+      e
+    );
+  }, [h, c]);
+  const Q = h ? /* @__PURE__ */ n(
+    "div",
+    {
+      className: `
+        fixed
+        inset-0
+        ${L("modal-backdrop")}
+        bg-scrim
+        flex
+        items-start
+        justify-center
+        pt-[20vh]
+        ${g("base")}
+      `,
+      onClick: () => c(!1),
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: `
+          w-full
+          max-w-2xl
+          ${r("base", "mx")}
+          bg-surface-overlay
+          ${K("lg")}
+          ${z("xl")}
+          ${L("modal")}
+          ${g("base")}
+          ${A}
+        `,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ o(
+              "div",
+              {
+                className: `
+          flex
+          items-center
+          ${r("md", "gap")}
+          ${r("base", "p")}
+          border-b
+          border-line-default
+        `,
+                children: [
+                  /* @__PURE__ */ n(Z, { className: "h-5 w-5 text-fg-secondary" }),
+                  /* @__PURE__ */ n(
+                    B,
+                    {
+                      ref: k,
+                      value: m,
+                      onChange: (e) => w(e.target.value),
+                      onKeyDown: M,
+                      placeholder: P,
+                      className: "flex-1 border-0 focus:ring-0",
+                      autoFocus: !0
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: `
+            flex
+            items-center
+            ${r("xs", "gap")}
+            ${r("sm", "px")}
+            ${r("xs", "py")}
+            ${K("sm")}
+            bg-surface-muted
+            text-xs
+            text-fg-tertiary
+          `,
+                      children: [
+                        /* @__PURE__ */ n(_, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ n("span", { children: "K" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                ref: p,
+                className: `
+            max-h-96
+            overflow-y-auto
+            ${r("sm", "py")}
+          `,
+                children: Object.keys(N).length === 0 ? /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: `
+              ${r("lg", "p")}
+              text-center
+              text-sm
+              text-fg-secondary
+            `,
+                    children: R
+                  }
+                ) : Object.entries(N).map(([e, t]) => /* @__PURE__ */ o("div", { children: [
+                  e !== "Other" && /* @__PURE__ */ n(
+                    "div",
+                    {
+                      className: `
+                    ${r("sm", "px")}
+                    ${r("xs", "py")}
+                    text-xs
+                    font-semibold
+                    text-fg-tertiary
+                    uppercase
+                    tracking-wider
+                  `,
+                      children: e
+                    }
+                  ),
+                  t.map((s, I) => {
+                    const u = i.indexOf(s), a = u === l;
+                    return /* @__PURE__ */ o(
+                      "button",
+                      {
+                        type: "button",
+                        "data-index": u,
+                        onClick: () => C(s),
+                        className: `
+                        w-full
+                        flex
+                        items-center
+                        ${r("md", "gap")}
+                        ${r("base", "px")}
+                        ${r("md", "py")}
+                        text-left
+                        ${g("base")}
+                        ${a ? "bg-surface-brand-muted" : "hover:bg-surface-hover"}
+                      `,
+                        children: [
+                          s.icon && /* @__PURE__ */ n(
+                            "div",
+                            {
+                              className: `
+                          ${a ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                        `,
+                              children: s.icon
+                            }
+                          ),
+                          /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
+                            /* @__PURE__ */ n(
+                              "div",
+                              {
+                                className: `
+                          text-sm
+                          font-medium
+                          ${a ? "text-fg-brand-emphasis" : "text-fg-primary"}
+                        `,
+                                children: s.label
+                              }
+                            ),
+                            s.description && // fg-secondary on selected: brand-muted bg drops fg-tertiary below AA;
+                            // caption role preserved, intensity raised for contrast.
+                            /* @__PURE__ */ n(
+                              "div",
+                              {
+                                className: `text-xs ${a ? "text-fg-secondary" : "text-fg-tertiary"} ${r("0.5", "mt")}`,
+                                children: s.description
+                              }
+                            )
+                          ] })
+                        ]
+                      },
+                      s.id
+                    );
+                  })
+                ] }, e))
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ o(V, { children: [
+    $ ? /* @__PURE__ */ n("div", { onClick: () => c(!0), children: $ }) : null,
+    typeof window != "undefined" && U(Q, document.body)
+  ] });
+}
+export {
+  ne as default
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/granular/ui/components/CommandPalette/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../../../../src/ui/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Command } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport Input from \"../../primitives/Input/Input\";\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: React.ReactNode;\n  keywords?: string[];\n  group?: string;\n  action: () => void;\n}\n\nexport interface CommandPaletteProps {\n  items: CommandItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  trigger?: React.ReactNode;\n  placeholder?: string;\n  emptyMessage?: string;\n  className?: string;\n}\n\n/**\n * CommandPalette Component\n *\n * A command palette component for quick command search and execution.\n * Supports keyboard navigation, grouping, and filtering.\n * Follows Atomic Design principles as an Organism component.\n *\n * @example\n * ```tsx\n * <CommandPalette\n *   items={[\n *     { id: '1', label: 'New File', action: () => console.log('New File') },\n *     { id: '2', label: 'Save', action: () => console.log('Save') },\n *   ]}\n * />\n * ```\n */\nexport default function CommandPalette({\n  items,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  placeholder = \"Type a command or search...\",\n  emptyMessage = \"No commands found\",\n  className = \"\",\n}: CommandPaletteProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  // Filter items based on search query\n  const filteredItems = items.filter((item) => {\n    if (!searchQuery) return true;\n    const query = searchQuery.toLowerCase();\n    const matchesLabel = item.label.toLowerCase().includes(query);\n    const matchesDescription = item.description?.toLowerCase().includes(query);\n    const matchesKeywords = item.keywords?.some((keyword) =>\n      keyword.toLowerCase().includes(query),\n    );\n    return matchesLabel || matchesDescription || matchesKeywords;\n  });\n\n  // Group items\n  const groupedItems = filteredItems.reduce(\n    (acc, item) => {\n      const group = item.group || \"Other\";\n      if (!acc[group]) {\n        acc[group] = [];\n      }\n      acc[group].push(item);\n      return acc;\n    },\n    {} as Record<string, CommandItem[]>,\n  );\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(newOpen);\n      }\n      onOpenChange?.(newOpen);\n      if (newOpen) {\n        setSearchQuery(\"\");\n        setSelectedIndex(0);\n        setTimeout(() => inputRef.current?.focus(), 0);\n      }\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const handleSelect = (item: CommandItem) => {\n    item.action();\n    handleOpenChange(false);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Escape\") {\n      handleOpenChange(false);\n      return;\n    }\n\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setSelectedIndex((prev) => Math.min(prev + 1, filteredItems.length - 1));\n      return;\n    }\n\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setSelectedIndex((prev) => Math.max(prev - 1, 0));\n      return;\n    }\n\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (filteredItems[selectedIndex]) {\n        handleSelect(filteredItems[selectedIndex]);\n      }\n      return;\n    }\n  };\n\n  // Scroll selected item into view\n  useEffect(() => {\n    if (listRef.current && selectedIndex >= 0) {\n      const selectedElement = listRef.current.querySelector(\n        `[data-index=\"${selectedIndex}\"]`,\n      );\n      if (\n        selectedElement &&\n        typeof selectedElement.scrollIntoView === \"function\"\n      ) {\n        selectedElement.scrollIntoView({\n          block: \"nearest\",\n          behavior: \"smooth\",\n        });\n      }\n    }\n  }, [selectedIndex]);\n\n  // Reset selected index when search changes\n  useEffect(() => {\n    setSelectedIndex(0);\n  }, [searchQuery]);\n\n  // Keyboard shortcut (Cmd/Ctrl + K)\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        handleOpenChange(!isOpen);\n      }\n    };\n\n    document.addEventListener(\n      \"keydown\",\n      handleKeyDown as unknown as EventListener,\n    );\n    return () =>\n      document.removeEventListener(\n        \"keydown\",\n        handleKeyDown as unknown as EventListener,\n      );\n  }, [isOpen, handleOpenChange]);\n\n  const commandPaletteContent = isOpen ? (\n    <div\n      className={`\n        fixed\n        inset-0\n        ${getZIndexClass(\"modal-backdrop\")}\n        bg-scrim\n        flex\n        items-start\n        justify-center\n        pt-[20vh]\n        ${getAnimationClass(\"base\")}\n      `}\n      onClick={() => handleOpenChange(false)}\n    >\n      <div\n        className={`\n          w-full\n          max-w-2xl\n          ${getSpacingClass(\"base\", \"mx\")}\n          bg-surface-overlay\n          ${getRadiusClass(\"lg\")}\n          ${getShadowClass(\"xl\")}\n          ${getZIndexClass(\"modal\")}\n          ${getAnimationClass(\"base\")}\n          ${className}\n        `}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Search Input */}\n        <div\n          className={`\n          flex\n          items-center\n          ${getSpacingClass(\"md\", \"gap\")}\n          ${getSpacingClass(\"base\", \"p\")}\n          border-b\n          border-line-default\n        `}\n        >\n          <Search className=\"h-5 w-5 text-fg-secondary\" />\n          <Input\n            ref={inputRef}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            className=\"flex-1 border-0 focus:ring-0\"\n            autoFocus\n          />\n          <div\n            className={`\n            flex\n            items-center\n            ${getSpacingClass(\"xs\", \"gap\")}\n            ${getSpacingClass(\"sm\", \"px\")}\n            ${getSpacingClass(\"xs\", \"py\")}\n            ${getRadiusClass(\"sm\")}\n            bg-surface-muted\n            text-xs\n            text-fg-tertiary\n          `}\n          >\n            <Command className=\"h-3 w-3\" />\n            <span>K</span>\n          </div>\n        </div>\n\n        {/* Results */}\n        <div\n          ref={listRef}\n          className={`\n            max-h-96\n            overflow-y-auto\n            ${getSpacingClass(\"sm\", \"py\")}\n          `}\n        >\n          {Object.keys(groupedItems).length === 0 ? (\n            <div\n              className={`\n              ${getSpacingClass(\"lg\", \"p\")}\n              text-center\n              text-sm\n              text-fg-secondary\n            `}\n            >\n              {emptyMessage}\n            </div>\n          ) : (\n            Object.entries(groupedItems).map(([group, groupItems]) => (\n              <div key={group}>\n                {group !== \"Other\" && (\n                  <div\n                    className={`\n                    ${getSpacingClass(\"sm\", \"px\")}\n                    ${getSpacingClass(\"xs\", \"py\")}\n                    text-xs\n                    font-semibold\n                    text-fg-tertiary\n                    uppercase\n                    tracking-wider\n                  `}\n                  >\n                    {group}\n                  </div>\n                )}\n                {groupItems.map((item, _index) => {\n                  const globalIndex = filteredItems.indexOf(item);\n                  const isSelected = globalIndex === selectedIndex;\n\n                  return (\n                    <button\n                      key={item.id}\n                      type=\"button\"\n                      data-index={globalIndex}\n                      onClick={() => handleSelect(item)}\n                      className={`\n                        w-full\n                        flex\n                        items-center\n                        ${getSpacingClass(\"md\", \"gap\")}\n                        ${getSpacingClass(\"base\", \"px\")}\n                        ${getSpacingClass(\"md\", \"py\")}\n                        text-left\n                        ${getAnimationClass(\"base\")}\n                        ${isSelected ? \"bg-surface-brand-muted\" : \"hover:bg-surface-hover\"}\n                      `}\n                    >\n                      {item.icon && (\n                        <div\n                          className={`\n                          ${\n                            isSelected\n                              ? \"text-fg-brand-emphasis\"\n                              : \"text-fg-secondary\"\n                          }\n                        `}\n                        >\n                          {item.icon}\n                        </div>\n                      )}\n                      <div className=\"flex-1 min-w-0\">\n                        <div\n                          className={`\n                          text-sm\n                          font-medium\n                          ${isSelected ? \"text-fg-brand-emphasis\" : \"text-fg-primary\"}\n                        `}\n                        >\n                          {item.label}\n                        </div>\n                        {item.description && (\n                          // fg-secondary on selected: brand-muted bg drops fg-tertiary below AA;\n                          // caption role preserved, intensity raised for contrast.\n                          <div\n                            className={`text-xs ${isSelected ? \"text-fg-secondary\" : \"text-fg-tertiary\"} ${getSpacingClass(\"0.5\", \"mt\")}`}\n                          >\n                            {item.description}\n                          </div>\n                        )}\n                      </div>\n                    </button>\n                  );\n                })}\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  ) : null;\n\n  return (\n    <>\n      {trigger ? (\n        <div onClick={() => handleOpenChange(true)}>{trigger}</div>\n      ) : null}\n      {typeof window !== \"undefined\" &&\n        createPortal(commandPaletteContent, document.body)}\n    </>\n  );\n}\n"],"names":["CommandPalette","items","controlledOpen","defaultOpen","onOpenChange","trigger","placeholder","emptyMessage","className","internalOpen","setInternalOpen","useState","searchQuery","setSearchQuery","selectedIndex","setSelectedIndex","inputRef","useRef","listRef","isControlled","isOpen","filteredItems","item","query","matchesLabel","matchesDescription","_a","matchesKeywords","_b","keyword","groupedItems","acc","group","handleOpenChange","useCallback","newOpen","handleSelect","handleKeyDown","prev","useEffect","selectedElement","e","commandPaletteContent","jsx","getZIndexClass","getAnimationClass","jsxs","getSpacingClass","getRadiusClass","getShadowClass","Search","Input","Command","groupItems","_index","globalIndex","isSelected","Fragment","createPortal"],"mappings":"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"}

package/dist/granular/ui/components/DashboardLayout/DashboardLayout.js

@@ -0,0 +1,37 @@
+"use client";
+var t = Object.defineProperty, b = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var n = (d, e, a) => e in d ? t(d, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : d[e] = a, o = (d, e) => {
+  for (var a in e || (e = {}))
+    p.call(e, a) && n(d, a, e[a]);
+  if (s)
+    for (var a of s(e))
+      u.call(e, a) && n(d, a, e[a]);
+  return d;
+}, c = (d, e) => b(d, x(e));
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { Container as r } from "../../layouts/Container/Container.js";
+import g from "../SideNavbar/SideNavbar.js";
+function X({
+  sidebar: d,
+  children: e,
+  header: a,
+  footer: i,
+  defaultCollapsed: m = !1,
+  sidebarProps: h
+}) {
+  return /* @__PURE__ */ f("div", { className: "flex h-screen overflow-hidden", children: [
+    d && /* @__PURE__ */ l(g, c(o({ defaultCollapsed: m }, h), { children: d })),
+    /* @__PURE__ */ f("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      a && /* @__PURE__ */ l("header", { className: "border-b bg-surface-base", children: /* @__PURE__ */ l(r, { maxWidth: "full", paddingX: "base", paddingY: "sm", children: a }) }),
+      /* @__PURE__ */ l("main", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ l(r, { maxWidth: "xl", paddingX: "base", paddingY: "base", children: e }) }),
+      i && /* @__PURE__ */ l("footer", { className: "border-t bg-surface-base", children: /* @__PURE__ */ l(r, { maxWidth: "full", paddingX: "base", paddingY: "sm", children: i }) })
+    ] })
+  ] });
+}
+export {
+  X as DashboardLayout
+};
+//# sourceMappingURL=DashboardLayout.js.map

package/dist/granular/ui/components/DashboardLayout/DashboardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.js","sources":["../../../../../src/ui/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import React from \"react\";\nimport { SideNavbar } from \"../../components\";\nimport { Container } from \"../../layouts/Container/Container\";\n\nexport interface DashboardLayoutProps {\n  /**\n   * Sidebar content - use SideNavbar.Navbar and SideNavbar.Sidebar subcomponents\n   */\n  sidebar?: React.ReactNode;\n  /**\n   * Main content area\n   */\n  children: React.ReactNode;\n  /**\n   * Header content\n   */\n  header?: React.ReactNode;\n  /**\n   * Footer content\n   */\n  footer?: React.ReactNode;\n  /**\n   * Sidebar collapsed by default\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /**\n   * SideNavbar props\n   */\n  sidebarProps?: Omit<React.ComponentProps<typeof SideNavbar>, \"children\">;\n}\n\n/**\n * DashboardLayout - A complete dashboard page layout\n *\n * Combines SideNavbar, Container, and Stack to create a full dashboard structure.\n * This template provides a complete page layout with sensible defaults.\n *\n * @example\n * ```tsx\n * <DashboardLayout\n *   sidebar={\n *     <>\n *       <SideNavbar.Navbar>\n *         <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *       </SideNavbar.Navbar>\n *       <SideNavbar.Sidebar>\n *         <SideNavbar.Sidebar.Content>Content</SideNavbar.Sidebar.Content>\n *       </SideNavbar.Sidebar>\n *     </>\n *   }\n *   header={<Header />}\n * >\n *   <MainContent />\n * </DashboardLayout>\n * ```\n */\nexport function DashboardLayout({\n  sidebar,\n  children,\n  header,\n  footer,\n  defaultCollapsed = false,\n  sidebarProps,\n}: DashboardLayoutProps) {\n  return (\n    <div className=\"flex h-screen overflow-hidden\">\n      {/* Sidebar */}\n      {sidebar && (\n        <SideNavbar defaultCollapsed={defaultCollapsed} {...sidebarProps}>\n          {sidebar}\n        </SideNavbar>\n      )}\n\n      {/* Main Content Area */}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {/* Header */}\n        {header && (\n          <header className=\"border-b bg-surface-base\">\n            <Container maxWidth=\"full\" paddingX=\"base\" paddingY=\"sm\">\n              {header}\n            </Container>\n          </header>\n        )}\n\n        {/* Main Content */}\n        <main className=\"flex-1 overflow-y-auto\">\n          <Container maxWidth=\"xl\" paddingX=\"base\" paddingY=\"base\">\n            {children}\n          </Container>\n        </main>\n\n        {/* Footer */}\n        {footer && (\n          <footer className=\"border-t bg-surface-base\">\n            <Container maxWidth=\"full\" paddingX=\"base\" paddingY=\"sm\">\n              {footer}\n            </Container>\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DashboardLayout","sidebar","children","header","footer","defaultCollapsed","sidebarProps","jsxs","jsx","SideNavbar","__spreadProps","__spreadValues","Container"],"mappings":";;;;;;;;;;;;;;;;AAyDO,SAASA,EAAgB;AAAA,EAC9B,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,cAAAC;AACF,GAAyB;AACvB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,iCAEZ,UAAA;AAAA,IAAAN,KACC,gBAAAO,EAACC,GAAAC,EAAAC,EAAA,EAAW,kBAAAN,KAAwCC,IAAnD,EACE,UAAAL,IACH;AAAA,IAIF,gBAAAM,EAAC,OAAA,EAAI,WAAU,wCAEZ,UAAA;AAAA,MAAAJ,KACC,gBAAAK,EAAC,UAAA,EAAO,WAAU,4BAChB,UAAA,gBAAAA,EAACI,GAAA,EAAU,UAAS,QAAO,UAAS,QAAO,UAAS,MACjD,aACH,GACF;AAAA,MAIF,gBAAAJ,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA,gBAAAA,EAACI,GAAA,EAAU,UAAS,MAAK,UAAS,QAAO,UAAS,QAC/C,UAAAV,GACH,GACF;AAAA,MAGCE,KACC,gBAAAI,EAAC,UAAA,EAAO,WAAU,4BAChB,UAAA,gBAAAA,EAACI,GAAA,EAAU,UAAS,QAAO,UAAS,QAAO,UAAS,MACjD,aACH,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/granular/ui/components/DataGrid/DataGrid.js

@@ -0,0 +1,155 @@
+"use client";
+var A = Object.defineProperty, z = Object.defineProperties;
+var ee = Object.getOwnPropertyDescriptors;
+var $ = Object.getOwnPropertySymbols;
+var te = Object.prototype.hasOwnProperty, se = Object.prototype.propertyIsEnumerable;
+var U = (s, t, o) => t in s ? A(s, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : s[t] = o, g = (s, t) => {
+  for (var o in t || (t = {}))
+    te.call(t, o) && U(s, o, t[o]);
+  if ($)
+    for (var o of $(t))
+      se.call(t, o) && U(s, o, t[o]);
+  return s;
+}, h = (s, t) => z(s, ee(t));
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import { useState as oe, useMemo as re } from "react";
+import { Download as ne } from "lucide-react";
+import ae from "../Table/Table.js";
+import { Button as le } from "../../primitives/Button/Button.js";
+import { getSpacingClass as i } from "../../tokens/spacing.js";
+import { getRadiusClass as ce } from "../../tokens/radius.js";
+function $e({
+  columns: s,
+  data: t,
+  loading: o = !1,
+  onSort: y,
+  sortColumn: L,
+  sortDirection: N,
+  multiSort: ie = !1,
+  // Grouping props are @experimental — see DataGridGroup JSDoc. Accepted
+  // for forward-compatibility but not yet wired to rendering.
+  groups: me,
+  onGroupChange: pe,
+  groupable: de = !1,
+  resizable: R = !0,
+  reorderable: ue = !1,
+  onColumnReorder: fe,
+  columnWidths: k,
+  onColumnResize: d,
+  selectable: S = !1,
+  selectedRows: O,
+  onSelectionChange: _,
+  rowId: D,
+  exportable: j = !1,
+  onExport: v,
+  exportFormats: W = ["csv", "xlsx", "json"],
+  pagination: B,
+  filters: G,
+  actions: T,
+  toolbarActions: w,
+  virtualScrolling: E = !1,
+  virtualScrollingOptions: I,
+  emptyMessage: J,
+  emptyStateTitle: M,
+  emptyStateMessage: V,
+  emptyStateIllustration: q,
+  emptyStateAction: F,
+  className: H = ""
+}) {
+  const [u, K] = oe(k || {}), P = re(() => s.map((e) => h(g({}, e), {
+    width: u[e.key] || e.defaultWidth
+  })), [s, u]), Q = (e) => {
+    v ? v(e) : e === "csv" ? X(t, s) : e === "json" && Y(t);
+  }, X = (e, n) => {
+    const a = n.filter((r) => r.exportable !== !1).map((r) => r.label || r.key), m = e.map(
+      (r) => n.filter((b) => b.exportable !== !1).map((b) => {
+        const p = r[b.key];
+        return typeof p == "string" && p.includes(",") ? `"${p}"` : p;
+      })
+    ), l = [a.join(","), ...m.map((r) => r.join(","))].join(`
+`), Z = new Blob([l], { type: "text/csv" }), C = URL.createObjectURL(Z), f = document.createElement("a");
+    f.href = C, f.download = `export-${Date.now()}.csv`, f.click(), URL.revokeObjectURL(C);
+  }, Y = (e) => {
+    const n = JSON.stringify(e, null, 2), a = new Blob([n], { type: "application/json" }), m = URL.createObjectURL(a), l = document.createElement("a");
+    l.href = m, l.download = `export-${Date.now()}.json`, l.click(), URL.revokeObjectURL(m);
+  };
+  return /* @__PURE__ */ x("div", { className: `${i("base", "space-y")} ${H}`, children: [
+    (j || w) && /* @__PURE__ */ x(
+      "div",
+      {
+        className: `
+          flex
+          items-center
+          justify-between
+          ${i("base", "p")}
+          bg-surface-base
+          border
+          border-line-default
+          ${ce("lg")}
+        `,
+        children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: `flex items-center ${i("sm", "gap")}`
+            }
+          ),
+          /* @__PURE__ */ x("div", { className: `flex items-center ${i("sm", "gap")}`, children: [
+            w,
+            j && /* @__PURE__ */ c(
+              "div",
+              {
+                className: `flex items-center ${i("xs", "gap")}`,
+                children: W.map((e) => /* @__PURE__ */ c(
+                  le,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    leftIcon: /* @__PURE__ */ c(ne, { className: "h-4 w-4" }),
+                    onClick: () => Q(e),
+                    children: e.toUpperCase()
+                  },
+                  e
+                ))
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ c(
+      ae,
+      {
+        columns: P,
+        data: t,
+        loading: o,
+        onSort: y,
+        sortColumn: L,
+        sortDirection: N,
+        pagination: B,
+        filters: G,
+        selectable: S,
+        selectedRows: O,
+        onSelectionChange: _,
+        rowId: D,
+        actions: T,
+        resizable: R,
+        columnWidths: u,
+        onColumnResize: (e, n) => {
+          K((a) => h(g({}, a), { [e]: n })), d == null || d(e, n);
+        },
+        virtualScrolling: E,
+        virtualScrollingOptions: I,
+        emptyMessage: J,
+        emptyStateTitle: M,
+        emptyStateMessage: V,
+        emptyStateIllustration: q,
+        emptyStateAction: F
+      }
+    )
+  ] });
+}
+export {
+  $e as default
+};
+//# sourceMappingURL=DataGrid.js.map

package/dist/granular/ui/components/DataGrid/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sources":["../../../../../src/ui/components/DataGrid/DataGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useMemo, type ReactNode } from \"react\";\nimport { Download } from \"lucide-react\";\nimport Table, { type TableColumn } from \"../Table/Table\";\nimport Button from \"../../primitives/Button/Button\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport type { TableAction } from \"../Table/TableActions/TableActions\";\nimport type {\n  FilterConfig,\n  FilterValue,\n} from \"../Table/TableFilters/TableFilters\";\n\nexport type DataGridColumn<T = unknown> = TableColumn<T> & {\n  groupable?: boolean;\n  exportable?: boolean;\n  defaultWidth?: number;\n  minWidth?: number;\n  maxWidth?: number;\n};\n\n/**\n * @experimental Reserved for upcoming row-grouping support; not yet wired\n * to rendering. The shape is fixed for forward-compatibility, but passing\n * a `groups` array to `<DataGrid>` has no visual effect today. Tracked in\n * BACKLOG.md under \"DataGrid row grouping — props/types reserved\".\n */\nexport interface DataGridGroup {\n  column: string;\n  expanded?: boolean;\n}\n\nexport interface DataGridProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> {\n  columns: DataGridColumn<T>[];\n  data: T[];\n  loading?: boolean;\n\n  // Sorting\n  onSort?: (columnKey: string, direction: \"asc\" | \"desc\") => void;\n  sortColumn?: string;\n  sortDirection?: \"asc\" | \"desc\";\n  multiSort?: boolean;\n\n  // Grouping\n  /**\n   * @experimental Reserved for upcoming row-grouping support; not yet wired\n   * to rendering. Passing this has no visual effect today — the grid renders\n   * a flat table regardless. Tracked in BACKLOG.md under \"DataGrid row\n   * grouping — props/types reserved\".\n   */\n  groups?: DataGridGroup[];\n  /**\n   * @experimental Reserved for upcoming row-grouping support; not yet wired.\n   * The callback is never invoked today. Tracked in BACKLOG.md.\n   */\n  onGroupChange?: (groups: DataGridGroup[]) => void;\n  /**\n   * @experimental Reserved for upcoming row-grouping support; not yet wired.\n   * Passing `true` has no visual effect today — the grouping toolbar button\n   * was removed because it rendered but had no behaviour. Tracked in\n   * BACKLOG.md.\n   */\n  groupable?: boolean;\n\n  // Column Management\n  resizable?: boolean;\n  reorderable?: boolean;\n  onColumnReorder?: (columns: DataGridColumn<T>[]) => void;\n  columnWidths?: Record<string, number>;\n  onColumnResize?: (columnKey: string, width: number) => void;\n\n  // Selection\n  selectable?: boolean;\n  selectedRows?: string[];\n  onSelectionChange?: (selected: string[]) => void;\n  rowId?: (row: T) => string;\n\n  // Export\n  exportable?: boolean;\n  onExport?: (format: \"csv\" | \"xlsx\" | \"json\") => void;\n  exportFormats?: (\"csv\" | \"xlsx\" | \"json\")[];\n\n  // Pagination\n  pagination?: {\n    page: number;\n    pageSize: number;\n    total: number;\n    onPageChange: (page: number) => void;\n    onPageSizeChange: (size: number) => void;\n    pageSizeOptions?: number[];\n  };\n\n  // Filters\n  filters?: {\n    config: FilterConfig[];\n    onFilter: (filters: Record<string, FilterValue>) => void;\n    initialValues?: Record<string, FilterValue>;\n  };\n\n  // Actions\n  actions?: (row: T) => TableAction<T>[];\n  toolbarActions?: ReactNode;\n\n  // Virtual Scrolling\n  virtualScrolling?: boolean;\n  virtualScrollingOptions?: {\n    itemHeight?: number;\n    containerHeight?: number;\n    overscan?: number;\n  };\n\n  // Empty State\n  emptyMessage?: string;\n  emptyStateTitle?: string;\n  emptyStateMessage?: string;\n  emptyStateIllustration?: ReactNode;\n  emptyStateAction?: ReactNode;\n\n  className?: string;\n}\n\n/**\n * DataGrid Component\n *\n * An advanced data grid component with sorting, filtering, grouping, column management, and export.\n * Extends the Table component with additional enterprise features.\n * Follows Atomic Design principles as an Organism component.\n *\n * @example\n * ```tsx\n * <DataGrid\n *   columns={columns}\n *   data={data}\n *   groupable\n *   exportable\n *   onExport={(format) => console.log('Export as', format)}\n * />\n * ```\n */\nexport default function DataGrid<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>({\n  columns,\n  data,\n  loading = false,\n  onSort,\n  sortColumn,\n  sortDirection,\n  multiSort: _multiSort = false,\n  // Grouping props are @experimental — see DataGridGroup JSDoc. Accepted\n  // for forward-compatibility but not yet wired to rendering.\n  groups: _groups,\n  onGroupChange: _onGroupChange,\n  groupable: _groupable = false,\n  resizable = true,\n  reorderable: _reorderable = false,\n  onColumnReorder: _onColumnReorder,\n  columnWidths,\n  onColumnResize,\n  selectable = false,\n  selectedRows,\n  onSelectionChange,\n  rowId,\n  exportable = false,\n  onExport,\n  exportFormats = [\"csv\", \"xlsx\", \"json\"],\n  pagination,\n  filters,\n  actions,\n  toolbarActions,\n  virtualScrolling = false,\n  virtualScrollingOptions,\n  emptyMessage,\n  emptyStateTitle,\n  emptyStateMessage,\n  emptyStateIllustration,\n  emptyStateAction,\n  className = \"\",\n}: DataGridProps<T>) {\n  const [internalColumnWidths, setInternalColumnWidths] = useState<\n    Record<string, number>\n  >(columnWidths || {});\n\n  // Convert DataGrid columns to Table columns\n  const tableColumns: TableColumn<T>[] = useMemo(() => {\n    return columns.map((col) => ({\n      ...col,\n      width: internalColumnWidths[col.key as string] || col.defaultWidth,\n    }));\n  }, [columns, internalColumnWidths]);\n\n  const handleExport = (format: \"csv\" | \"xlsx\" | \"json\") => {\n    if (onExport) {\n      onExport(format);\n    } else {\n      // Default export implementation\n      if (format === \"csv\") {\n        exportToCSV(data, columns);\n      } else if (format === \"json\") {\n        exportToJSON(data);\n      }\n    }\n  };\n\n  const exportToCSV = (data: T[], cols: DataGridColumn<T>[]) => {\n    const headers = cols\n      .filter((c) => c.exportable !== false)\n      .map((c) => c.label || c.key);\n    const rows = data.map((row) =>\n      cols\n        .filter((c) => c.exportable !== false)\n        .map((c) => {\n          const value = row[c.key];\n          return typeof value === \"string\" && value.includes(\",\")\n            ? `\"${value}\"`\n            : value;\n        }),\n    );\n\n    const csv = [headers.join(\",\"), ...rows.map((r) => r.join(\",\"))].join(\"\\n\");\n    const blob = new Blob([csv], { type: \"text/csv\" });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.download = `export-${Date.now()}.csv`;\n    a.click();\n    URL.revokeObjectURL(url);\n  };\n\n  const exportToJSON = (data: T[]) => {\n    const json = JSON.stringify(data, null, 2);\n    const blob = new Blob([json], { type: \"application/json\" });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.download = `export-${Date.now()}.json`;\n    a.click();\n    URL.revokeObjectURL(url);\n  };\n\n  return (\n    <div className={`${getSpacingClass(\"base\", \"space-y\")} ${className}`}>\n      {/* Toolbar */}\n      {(exportable || toolbarActions) && (\n        <div\n          className={`\n          flex\n          items-center\n          justify-between\n          ${getSpacingClass(\"base\", \"p\")}\n          bg-surface-base\n          border\n          border-line-default\n          ${getRadiusClass(\"lg\")}\n        `}\n        >\n          {/* Left slot reserved for the grouping toolbar (currently\n              @experimental — see DataGridGroup JSDoc). The empty div\n              preserves the justify-between layout so toolbarActions and\n              the export controls stay anchored to the right. */}\n          <div\n            className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n          />\n\n          <div className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}>\n            {toolbarActions}\n            {exportable && (\n              <div\n                className={`flex items-center ${getSpacingClass(\"xs\", \"gap\")}`}\n              >\n                {exportFormats.map((format) => (\n                  <Button\n                    key={format}\n                    variant=\"outline\"\n                    size=\"sm\"\n                    leftIcon={<Download className=\"h-4 w-4\" />}\n                    onClick={() => handleExport(format)}\n                  >\n                    {format.toUpperCase()}\n                  </Button>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Table */}\n      <Table\n        columns={tableColumns}\n        data={data}\n        loading={loading}\n        onSort={onSort}\n        sortColumn={sortColumn}\n        sortDirection={sortDirection}\n        pagination={pagination}\n        filters={filters}\n        selectable={selectable}\n        selectedRows={selectedRows}\n        onSelectionChange={onSelectionChange}\n        rowId={rowId}\n        actions={actions}\n        resizable={resizable}\n        columnWidths={internalColumnWidths}\n        onColumnResize={(key, width) => {\n          setInternalColumnWidths((prev) => ({ ...prev, [key]: width }));\n          onColumnResize?.(key, width);\n        }}\n        virtualScrolling={virtualScrolling}\n        virtualScrollingOptions={virtualScrollingOptions}\n        emptyMessage={emptyMessage}\n        emptyStateTitle={emptyStateTitle}\n        emptyStateMessage={emptyStateMessage}\n        emptyStateIllustration={emptyStateIllustration}\n        emptyStateAction={emptyStateAction}\n      />\n    </div>\n  );\n}\n"],"names":["DataGrid","columns","data","loading","onSort","sortColumn","sortDirection","_multiSort","_groups","_onGroupChange","_groupable","resizable","_reorderable","_onColumnReorder","columnWidths","onColumnResize","selectable","selectedRows","onSelectionChange","rowId","exportable","onExport","exportFormats","pagination","filters","actions","toolbarActions","virtualScrolling","virtualScrollingOptions","emptyMessage","emptyStateTitle","emptyStateMessage","emptyStateIllustration","emptyStateAction","className","internalColumnWidths","setInternalColumnWidths","useState","tableColumns","useMemo","col","__spreadProps","__spreadValues","handleExport","format","exportToCSV","exportToJSON","cols","headers","c","rows","row","value","csv","blob","url","a","json","jsxs","getSpacingClass","getRadiusClass","jsx","Button","Download","Table","key","width","prev"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8IA,SAAwBA,GAEtB;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAWC,KAAa;AAAA;AAAA;AAAA,EAGxB,QAAQC;AAAA,EACR,eAAeC;AAAA,EACf,WAAWC,KAAa;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,aAAaC,KAAe;AAAA,EAC5B,iBAAiBC;AAAA,EACjB,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,eAAAC,IAAgB,CAAC,OAAO,QAAQ,MAAM;AAAA,EACtC,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,yBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAqB;AACnB,QAAM,CAACC,GAAsBC,CAAuB,IAAIC,GAEtDvB,KAAgB,CAAA,CAAE,GAGdwB,IAAiCC,GAAQ,MACtCtC,EAAQ,IAAI,CAACuC,MAASC,EAAAC,EAAA,IACxBF,IADwB;AAAA,IAE3B,OAAOL,EAAqBK,EAAI,GAAa,KAAKA,EAAI;AAAA,EAAA,EACtD,GACD,CAACvC,GAASkC,CAAoB,CAAC,GAE5BQ,IAAe,CAACC,MAAoC;AACxD,IAAIvB,IACFA,EAASuB,CAAM,IAGXA,MAAW,QACbC,EAAY3C,GAAMD,CAAO,IAChB2C,MAAW,UACpBE,EAAa5C,CAAI;AAAA,EAGvB,GAEM2C,IAAc,CAAC3C,GAAW6C,MAA8B;AAC5D,UAAMC,IAAUD,EACb,OAAO,CAACE,MAAMA,EAAE,eAAe,EAAK,EACpC,IAAI,CAACA,MAAMA,EAAE,SAASA,EAAE,GAAG,GACxBC,IAAOhD,EAAK;AAAA,MAAI,CAACiD,MACrBJ,EACG,OAAO,CAACE,MAAMA,EAAE,eAAe,EAAK,EACpC,IAAI,CAACA,MAAM;AACV,cAAMG,IAAQD,EAAIF,EAAE,GAAG;AACvB,eAAO,OAAOG,KAAU,YAAYA,EAAM,SAAS,GAAG,IAClD,IAAIA,CAAK,MACTA;AAAA,MACN,CAAC;AAAA,IAAA,GAGCC,IAAM,CAACL,EAAQ,KAAK,GAAG,GAAG,GAAGE,EAAK,IAAI,CAAC,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK;AAAA,CAAI,GACpEI,IAAO,IAAI,KAAK,CAACD,CAAG,GAAG,EAAE,MAAM,YAAY,GAC3CE,IAAM,IAAI,gBAAgBD,CAAI,GAC9BE,IAAI,SAAS,cAAc,GAAG;AACpC,IAAAA,EAAE,OAAOD,GACTC,EAAE,WAAW,UAAU,KAAK,IAAA,CAAK,QACjCA,EAAE,MAAA,GACF,IAAI,gBAAgBD,CAAG;AAAA,EACzB,GAEMT,IAAe,CAAC5C,MAAc;AAClC,UAAMuD,IAAO,KAAK,UAAUvD,GAAM,MAAM,CAAC,GACnCoD,IAAO,IAAI,KAAK,CAACG,CAAI,GAAG,EAAE,MAAM,oBAAoB,GACpDF,IAAM,IAAI,gBAAgBD,CAAI,GAC9BE,IAAI,SAAS,cAAc,GAAG;AACpC,IAAAA,EAAE,OAAOD,GACTC,EAAE,WAAW,UAAU,KAAK,IAAA,CAAK,SACjCA,EAAE,MAAA,GACF,IAAI,gBAAgBD,CAAG;AAAA,EACzB;AAEA,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAW,GAAGC,EAAgB,QAAQ,SAAS,CAAC,IAAIzB,CAAS,IAE9D,UAAA;AAAA,KAAAd,KAAcM,MACd,gBAAAgC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA;AAAA;AAAA;AAAA,YAITC,EAAgB,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,YAI5BC,GAAe,IAAI,CAAC;AAAA;AAAA,QAOtB,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,qBAAqBF,EAAgB,MAAM,KAAK,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAG9D,gBAAAD,EAAC,SAAI,WAAW,qBAAqBC,EAAgB,MAAM,KAAK,CAAC,IAC9D,UAAA;AAAA,YAAAjC;AAAA,YACAN,KACC,gBAAAyC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,qBAAqBF,EAAgB,MAAM,KAAK,CAAC;AAAA,gBAE3D,UAAArC,EAAc,IAAI,CAACsB,MAClB,gBAAAiB;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBAEC,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,UAAU,gBAAAD,EAACE,IAAA,EAAS,WAAU,UAAA,CAAU;AAAA,oBACxC,SAAS,MAAMpB,EAAaC,CAAM;AAAA,oBAEjC,YAAO,YAAA;AAAA,kBAAY;AAAA,kBANfA;AAAA,gBAAA,CAQR;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAKJ,gBAAAiB;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,SAAS1B;AAAA,QACT,MAAApC;AAAA,QACA,SAAAC;AAAA,QACA,QAAAC;AAAA,QACA,YAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAAiB;AAAA,QACA,SAAAC;AAAA,QACA,YAAAR;AAAA,QACA,cAAAC;AAAA,QACA,mBAAAC;AAAA,QACA,OAAAC;AAAA,QACA,SAAAM;AAAA,QACA,WAAAd;AAAA,QACA,cAAcwB;AAAA,QACd,gBAAgB,CAAC8B,GAAKC,MAAU;AAC9B,UAAA9B,EAAwB,CAAC+B,MAAU1B,EAAAC,EAAA,IAAKyB,IAAL,EAAW,CAACF,CAAG,GAAGC,EAAA,EAAQ,GAC7DnD,KAAA,QAAAA,EAAiBkD,GAAKC;AAAA,QACxB;AAAA,QACA,kBAAAvC;AAAA,QACA,yBAAAC;AAAA,QACA,cAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,mBAAAC;AAAA,QACA,wBAAAC;AAAA,QACA,kBAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/granular/ui/components/DataTablePattern/DataTablePattern.js

@@ -0,0 +1,113 @@
+"use client";
+var $ = Object.defineProperty, q = Object.defineProperties;
+var W = Object.getOwnPropertyDescriptors;
+var v = Object.getOwnPropertySymbols;
+var X = Object.prototype.hasOwnProperty, Y = Object.prototype.propertyIsEnumerable;
+var b = (r, t, a) => t in r ? $(r, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : r[t] = a, I = (r, t) => {
+  for (var a in t || (t = {}))
+    X.call(t, a) && b(r, a, t[a]);
+  if (v)
+    for (var a of v(t))
+      Y.call(t, a) && b(r, a, t[a]);
+  return r;
+}, N = (r, t) => q(r, W(t));
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import { useState as j, useMemo as p } from "react";
+import { Container as z } from "../../layouts/Container/Container.js";
+import { Stack as A } from "../../layouts/Stack/Stack.js";
+import { getSpacingClass as k } from "../../tokens/spacing.js";
+import B from "../SearchInput/SearchInput.js";
+import E from "../Table/Table.js";
+import F from "../Pagination/Pagination.js";
+function _({
+  columns: r,
+  data: t,
+  searchPlaceholder: a = "Search...",
+  enableSearch: u = !0,
+  itemsPerPage: i = 10,
+  enablePagination: d = !0,
+  actions: x,
+  onRowClick: S,
+  loading: w = !1,
+  emptyMessage: D = "No data available"
+}) {
+  const [l, L] = j(""), [f, y] = j(1), h = p(() => r.map((e) => {
+    if (e.accessor || e.header) {
+      const s = e.key || (typeof e.accessor == "string" ? e.accessor : String(e.accessor)), n = e.label || e.header || "";
+      return N(I({}, e), {
+        key: s,
+        label: n
+      });
+    }
+    return e;
+  }), [r]), o = p(() => {
+    if (!l.trim()) return t;
+    const e = l.toLowerCase();
+    return t.filter((s) => h.some((n) => {
+      const T = s[String(n.key)];
+      return String(T).toLowerCase().includes(e);
+    }));
+  }, [t, l, h]), m = p(() => {
+    if (!d) return o;
+    const e = (f - 1) * i, s = e + i;
+    return o.slice(e, s);
+  }, [o, f, i, d]), C = d ? Math.ceil(o.length / i) : 1, M = (e) => {
+    y(e);
+  }, Q = (e) => {
+    L(e), y(1);
+  };
+  return /* @__PURE__ */ c(z, { maxWidth: "full", paddingX: "base", paddingY: "base", children: /* @__PURE__ */ g(A, { spacing: "md", children: [
+    /* @__PURE__ */ g(
+      "div",
+      {
+        className: `flex items-center justify-between ${k("base", "gap")}`,
+        children: [
+          u && /* @__PURE__ */ c("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ c(
+            B,
+            {
+              placeholder: a,
+              value: l,
+              onSearch: Q
+            }
+          ) }),
+          x && /* @__PURE__ */ c("div", { className: `flex ${k("sm", "gap")}`, children: x })
+        ]
+      }
+    ),
+    /* @__PURE__ */ c(
+      E,
+      {
+        columns: h,
+        data: m,
+        loading: w,
+        emptyMessage: D,
+        onRowClick: S ? (e) => {
+          const s = o.findIndex((n) => n === e);
+          S(
+            e,
+            s >= 0 ? s : m.findIndex((n) => n === e)
+          );
+        } : void 0
+      }
+    ),
+    d && C > 1 && /* @__PURE__ */ c("div", { className: "flex justify-center", children: /* @__PURE__ */ c(
+      F,
+      {
+        currentPage: f,
+        totalPages: C,
+        onPageChange: M
+      }
+    ) }),
+    u && /* @__PURE__ */ g("div", { className: "text-sm text-fg-secondary text-center", children: [
+      "Showing ",
+      m.length,
+      " of ",
+      o.length,
+      " results"
+    ] })
+  ] }) });
+}
+export {
+  _ as DataTablePattern
+};
+//# sourceMappingURL=DataTablePattern.js.map