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

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

@@ -0,0 +1,248 @@
+"use client";
+var R = Object.defineProperty, D = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var q = Object.getOwnPropertySymbols;
+var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
+var I = (t, i, a) => i in t ? R(t, i, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[i] = a, g = (t, i) => {
+  for (var a in i || (i = {}))
+    G.call(i, a) && I(t, a, i[a]);
+  if (q)
+    for (var a of q(i))
+      H.call(i, a) && I(t, a, i[a]);
+  return t;
+}, h = (t, i) => D(t, E(i));
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as J } from "react";
+import { Check as z } from "lucide-react";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+import { getRadiusClass as b } from "../../tokens/radius.js";
+import { getAnimationClass as B } from "../../tokens/animations.js";
+import { Button as u } from "../../primitives/Button/Button.js";
+import K from "../../primitives/Separator/Separator.js";
+function Z({
+  steps: t,
+  currentStep: i,
+  defaultCurrentStep: a = 0,
+  onStepChange: o,
+  onComplete: $,
+  allowNavigation: m = !0,
+  showStepNumbers: N = !0,
+  orientation: F = "horizontal",
+  className: y = ""
+}) {
+  const [L, x] = J(a), f = i !== void 0, d = f ? i : L, k = (e) => e < d ? "completed" : e === d ? "active" : "pending", j = () => {
+    if (d < t.length - 1) {
+      const e = d + 1;
+      f || x(e), o == null || o(e);
+    } else
+      $ == null || $();
+  }, S = () => {
+    if (d > 0) {
+      const e = d - 1;
+      f || x(e), o == null || o(e);
+    }
+  }, p = (e) => {
+    m && (t[e].disabled || (f || x(e), o == null || o(e)));
+  }, w = t[d], A = d === 0, P = d === t.length - 1;
+  return F === "vertical" ? /* @__PURE__ */ n("div", { className: `flex ${l("base", "gap")} ${y}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-col", children: t.map((e, s) => {
+      const c = e.status || k(s), v = s === d;
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          className: `flex items-start ${l("md", "gap")}`,
+          children: [
+            /* @__PURE__ */ n("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ r(
+                "button",
+                h(g({
+                  type: "button",
+                  onClick: () => p(s),
+                  disabled: !m || e.disabled,
+                  "aria-label": e.title ? `Step ${s + 1}: ${e.title}` : `Step ${s + 1}`
+                }, c === "pending" ? { "data-marker": "pending" } : {}), {
+                  className: `
+                      flex
+                      items-center
+                      justify-center
+                      w-10
+                      h-10
+                      ${b("full")}
+                      border-2
+                      ${B("base")}
+                      ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                      ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                    `,
+                  children: c === "completed" ? /* @__PURE__ */ r(z, { className: "h-5 w-5" }) : N ? s + 1 : null
+                })
+              ),
+              s < t.length - 1 && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: `
+                        w-0.5
+                        h-12
+                        ${l("sm", "mt")}
+                        ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
+                      `
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n("div", { className: `flex-1 ${l("xl", "pb")}`, children: [
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => p(s),
+                  disabled: !m || e.disabled,
+                  className: `
+                      text-left
+                      ${v ? "font-semibold" : "font-medium"}
+                      ${c === "active" ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                      ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                    `,
+                  children: e.title
+                }
+              ),
+              e.description && /* @__PURE__ */ r(
+                "p",
+                {
+                  className: `text-sm text-fg-tertiary ${l("xs", "mt")}`,
+                  children: e.description
+                }
+              )
+            ] })
+          ]
+        },
+        e.id
+      );
+    }) }),
+    /* @__PURE__ */ n("div", { className: "flex-1", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: `
+            ${l("lg", "p")}
+            border
+            border-line-default
+            ${b("lg")}
+            bg-surface-base
+          `,
+          children: w.content
+        }
+      ),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: `flex justify-between ${l("base", "mt")} ${l("base", "gap")}`,
+          children: [
+            /* @__PURE__ */ r(
+              u,
+              {
+                variant: "outline",
+                onClick: S,
+                disabled: A,
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ r(u, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
+          ]
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ n("div", { className: `${l("lg", "space-y")} ${y}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center", children: t.map((e, s) => {
+      const c = e.status || k(s), v = s === d;
+      return /* @__PURE__ */ n("div", { className: "flex items-center flex-1", children: [
+        /* @__PURE__ */ n("div", { className: "flex flex-col items-center flex-1", children: [
+          /* @__PURE__ */ r(
+            "button",
+            h(g({
+              type: "button",
+              onClick: () => p(s),
+              disabled: !m || e.disabled,
+              "aria-label": e.title ? `Step ${s + 1}: ${e.title}` : `Step ${s + 1}`
+            }, c === "pending" ? { "data-marker": "pending" } : {}), {
+              className: `
+                    flex
+                    items-center
+                    justify-center
+                    w-10
+                    h-10
+                    ${b("full")}
+                    border-2
+                    ${B("base")}
+                    ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                    ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                  `,
+              children: c === "completed" ? /* @__PURE__ */ r(z, { className: "h-5 w-5" }) : N ? s + 1 : null
+            })
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: `${l("sm", "mt")} text-center ${l("sm", "px")}`,
+              children: [
+                /* @__PURE__ */ r(
+                  "p",
+                  {
+                    className: `
+                      text-sm
+                      font-medium
+                      ${v ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                    `,
+                    children: e.title
+                  }
+                ),
+                e.description && /* @__PURE__ */ r(
+                  "p",
+                  {
+                    className: `text-xs text-fg-tertiary ${l("xs", "mt")}`,
+                    children: e.description
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        s < t.length - 1 && /* @__PURE__ */ r("div", { className: `flex-1 ${l("base", "mx")}`, children: /* @__PURE__ */ r(
+          K,
+          {
+            className: `
+                      ${c === "completed" ? "border-success" : "border-line-emphasis"}
+                    `
+          }
+        ) })
+      ] }, e.id);
+    }) }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: `
+        ${l("lg", "p")}
+        border
+        border-line-default
+        ${b("lg")}
+        bg-surface-base
+      `,
+        children: w.content
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: `flex justify-between ${l("base", "gap")}`, children: [
+      /* @__PURE__ */ r(
+        u,
+        {
+          variant: "outline",
+          onClick: S,
+          disabled: A,
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ r(u, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
+    ] })
+  ] });
+}
+export {
+  Z as default
+};
+//# sourceMappingURL=Stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../../../src/ui/components/Stepper/Stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport Button from \"../../primitives/Button/Button\";\nimport Separator from \"../../primitives/Separator/Separator\";\n\nexport type StepperStatus = \"pending\" | \"active\" | \"completed\" | \"error\";\n\nexport interface StepperStep {\n  id: string;\n  title: string;\n  description?: string;\n  content: ReactNode;\n  status?: StepperStatus;\n  disabled?: boolean;\n}\n\nexport interface StepperProps {\n  steps: StepperStep[];\n  currentStep?: number;\n  defaultCurrentStep?: number;\n  onStepChange?: (stepIndex: number) => void;\n  onComplete?: () => void;\n  allowNavigation?: boolean;\n  showStepNumbers?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string;\n}\n\n/**\n * Stepper Component\n *\n * A multi-step wizard component for guided workflows.\n * Supports validation, navigation, and completion callbacks.\n * Follows Atomic Design principles as an Organism component.\n *\n * @example\n * ```tsx\n * <Stepper\n *   steps={[\n *     { id: '1', title: 'Step 1', content: <div>Content 1</div> },\n *     { id: '2', title: 'Step 2', content: <div>Content 2</div> },\n *   ]}\n *   onComplete={() => console.log('Completed!')}\n * />\n * ```\n */\nexport default function Stepper({\n  steps,\n  currentStep: controlledCurrentStep,\n  defaultCurrentStep = 0,\n  onStepChange,\n  onComplete,\n  allowNavigation = true,\n  showStepNumbers = true,\n  orientation = \"horizontal\",\n  className = \"\",\n}: StepperProps) {\n  const [internalCurrentStep, setInternalCurrentStep] =\n    useState(defaultCurrentStep);\n\n  const isControlled = controlledCurrentStep !== undefined;\n  const currentStepIndex = isControlled\n    ? controlledCurrentStep\n    : internalCurrentStep;\n\n  const getStepStatus = (index: number): StepperStatus => {\n    if (index < currentStepIndex) return \"completed\";\n    if (index === currentStepIndex) return \"active\";\n    return \"pending\";\n  };\n\n  const handleNext = () => {\n    if (currentStepIndex < steps.length - 1) {\n      const nextStep = currentStepIndex + 1;\n      if (!isControlled) {\n        setInternalCurrentStep(nextStep);\n      }\n      onStepChange?.(nextStep);\n    } else {\n      onComplete?.();\n    }\n  };\n\n  const handlePrevious = () => {\n    if (currentStepIndex > 0) {\n      const prevStep = currentStepIndex - 1;\n      if (!isControlled) {\n        setInternalCurrentStep(prevStep);\n      }\n      onStepChange?.(prevStep);\n    }\n  };\n\n  const handleStepClick = (index: number) => {\n    if (!allowNavigation) return;\n    if (steps[index].disabled) return;\n\n    if (!isControlled) {\n      setInternalCurrentStep(index);\n    }\n    onStepChange?.(index);\n  };\n\n  const currentStep = steps[currentStepIndex];\n  const isFirstStep = currentStepIndex === 0;\n  const isLastStep = currentStepIndex === steps.length - 1;\n\n  if (orientation === \"vertical\") {\n    return (\n      <div className={`flex ${getSpacingClass(\"base\", \"gap\")} ${className}`}>\n        {/* Steps List */}\n        <div className=\"flex flex-col\">\n          {steps.map((step, index) => {\n            const status = step.status || getStepStatus(index);\n            const isActive = index === currentStepIndex;\n\n            return (\n              <div\n                key={step.id}\n                className={`flex items-start ${getSpacingClass(\"md\", \"gap\")}`}\n              >\n                {/* Step Indicator */}\n                <div className=\"flex flex-col items-center\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleStepClick(index)}\n                    disabled={!allowNavigation || step.disabled}\n                    aria-label={\n                      step.title\n                        ? `Step ${index + 1}: ${step.title}`\n                        : `Step ${index + 1}`\n                    }\n                    // data-marker=\"pending\" — see .claude/rules/colors.md\n                    // \"fg-quaternary: AA-by-construction exception\". Anchors\n                    // the directed a11y suppression to the pending-marker\n                    // ROLE, not to style classes; survives a future restyle\n                    // of the bubble.\n                    {...(status === \"pending\"\n                      ? { \"data-marker\": \"pending\" }\n                      : {})}\n                    className={`\n                      flex\n                      items-center\n                      justify-center\n                      w-10\n                      h-10\n                      ${getRadiusClass(\"full\")}\n                      border-2\n                      ${getAnimationClass(\"base\")}\n                      ${\n                        status === \"completed\"\n                          ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n                          : status === \"active\"\n                            ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n                            : status === \"error\"\n                              ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n                              : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n                      }\n                      ${!allowNavigation || step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                    `}\n                  >\n                    {status === \"completed\" ? (\n                      <Check className=\"h-5 w-5\" />\n                    ) : showStepNumbers ? (\n                      index + 1\n                    ) : null}\n                  </button>\n                  {index < steps.length - 1 && (\n                    <div\n                      className={`\n                        w-0.5\n                        h-12\n                        ${getSpacingClass(\"sm\", \"mt\")}\n                        ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n                      `}\n                    />\n                  )}\n                </div>\n\n                {/* Step Content */}\n                <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n                  <button\n                    type=\"button\"\n                    onClick={() => handleStepClick(index)}\n                    disabled={!allowNavigation || step.disabled}\n                    className={`\n                      text-left\n                      ${isActive ? \"font-semibold\" : \"font-medium\"}\n                      ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n                      ${!allowNavigation || step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                    `}\n                  >\n                    {step.title}\n                  </button>\n                  {step.description && (\n                    <p\n                      className={`text-sm text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n                    >\n                      {step.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Step Content */}\n        <div className=\"flex-1\">\n          <div\n            className={`\n            ${getSpacingClass(\"lg\", \"p\")}\n            border\n            border-line-default\n            ${getRadiusClass(\"lg\")}\n            bg-surface-base\n          `}\n          >\n            {currentStep.content}\n          </div>\n\n          {/* Navigation */}\n          <div\n            className={`flex justify-between ${getSpacingClass(\"base\", \"mt\")} ${getSpacingClass(\"base\", \"gap\")}`}\n          >\n            <Button\n              variant=\"outline\"\n              onClick={handlePrevious}\n              disabled={isFirstStep}\n            >\n              Previous\n            </Button>\n            <Button variant=\"primary\" onClick={handleNext}>\n              {isLastStep ? \"Complete\" : \"Next\"}\n            </Button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Horizontal orientation\n  return (\n    <div className={`${getSpacingClass(\"lg\", \"space-y\")} ${className}`}>\n      {/* Steps List */}\n      <div className=\"flex items-center\">\n        {steps.map((step, index) => {\n          const status = step.status || getStepStatus(index);\n          const isActive = index === currentStepIndex;\n\n          return (\n            <div key={step.id} className=\"flex items-center flex-1\">\n              <div className=\"flex flex-col items-center flex-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => handleStepClick(index)}\n                  disabled={!allowNavigation || step.disabled}\n                  aria-label={\n                    step.title\n                      ? `Step ${index + 1}: ${step.title}`\n                      : `Step ${index + 1}`\n                  }\n                  // data-marker=\"pending\" — see .claude/rules/colors.md\n                  // \"fg-quaternary: AA-by-construction exception\".\n                  {...(status === \"pending\"\n                    ? { \"data-marker\": \"pending\" }\n                    : {})}\n                  className={`\n                    flex\n                    items-center\n                    justify-center\n                    w-10\n                    h-10\n                    ${getRadiusClass(\"full\")}\n                    border-2\n                    ${getAnimationClass(\"base\")}\n                    ${\n                      status === \"completed\"\n                        ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n                        : status === \"active\"\n                          ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n                          : status === \"error\"\n                            ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n                            : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n                    }\n                    ${!allowNavigation || step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                  `}\n                >\n                  {status === \"completed\" ? (\n                    <Check className=\"h-5 w-5\" />\n                  ) : showStepNumbers ? (\n                    index + 1\n                  ) : null}\n                </button>\n                <div\n                  className={`${getSpacingClass(\"sm\", \"mt\")} text-center ${getSpacingClass(\"sm\", \"px\")}`}\n                >\n                  <p\n                    className={`\n                      text-sm\n                      font-medium\n                      ${isActive ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n                    `}\n                  >\n                    {step.title}\n                  </p>\n                  {step.description && (\n                    <p\n                      className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n                    >\n                      {step.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n              {index < steps.length - 1 && (\n                <div className={`flex-1 ${getSpacingClass(\"base\", \"mx\")}`}>\n                  <Separator\n                    className={`\n                      ${status === \"completed\" ? \"border-success\" : \"border-line-emphasis\"}\n                    `}\n                  />\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Step Content */}\n      <div\n        className={`\n        ${getSpacingClass(\"lg\", \"p\")}\n        border\n        border-line-default\n        ${getRadiusClass(\"lg\")}\n        bg-surface-base\n      `}\n      >\n        {currentStep.content}\n      </div>\n\n      {/* Navigation */}\n      <div className={`flex justify-between ${getSpacingClass(\"base\", \"gap\")}`}>\n        <Button\n          variant=\"outline\"\n          onClick={handlePrevious}\n          disabled={isFirstStep}\n        >\n          Previous\n        </Button>\n        <Button variant=\"primary\" onClick={handleNext}>\n          {isLastStep ? \"Complete\" : \"Next\"}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":["Stepper","steps","controlledCurrentStep","defaultCurrentStep","onStepChange","onComplete","allowNavigation","showStepNumbers","orientation","className","internalCurrentStep","setInternalCurrentStep","useState","isControlled","currentStepIndex","getStepStatus","index","handleNext","nextStep","handlePrevious","prevStep","handleStepClick","currentStep","isFirstStep","isLastStep","jsxs","getSpacingClass","jsx","step","status","isActive","__spreadProps","__spreadValues","getRadiusClass","getAnimationClass","Check","Button","Separator"],"mappings":"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"}

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

@@ -0,0 +1,162 @@
+"use client";
+var q = Object.defineProperty, G = Object.defineProperties;
+var J = Object.getOwnPropertyDescriptors;
+var u = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
+var g = (e, a, o) => a in e ? q(e, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[a] = o, f = (e, a) => {
+  for (var o in a || (a = {}))
+    p.call(a, o) && g(e, o, a[o]);
+  if (u)
+    for (var o of u(a))
+      S.call(a, o) && g(e, o, a[o]);
+  return e;
+}, h = (e, a) => G(e, J(a));
+var v = (e, a) => {
+  var o = {};
+  for (var t in e)
+    p.call(e, t) && a.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && u)
+    for (var t of u(e))
+      a.indexOf(t) < 0 && S.call(e, t) && (o[t] = e[t]);
+  return o;
+};
+import { jsx as s, jsxs as C, Fragment as K } from "react/jsx-runtime";
+import { TableProvider as w } from "./TableProvider.js";
+import y from "./TableHeader.js";
+import Q from "./TableHeaderRow.js";
+import U from "./TableHeaderCell.js";
+import P from "./TableBody.js";
+import X from "./TableRow.js";
+import Y from "./TableCell.js";
+import z from "./TableFilters.js";
+import R from "./TablePagination.js";
+import Z from "./TableEmptyState.js";
+import _ from "./TableActions.js";
+import { getRadiusClass as T } from "../../tokens/radius.js";
+function n(e) {
+  const c = e, {
+    className: a = "",
+    "aria-label": o,
+    "aria-labelledby": t
+  } = c, d = v(c, [
+    "className",
+    "aria-label",
+    "aria-labelledby"
+  ]), m = "children" in e && e.children !== void 0, i = m ? d : ee(
+    d
+  );
+  return m ? /* @__PURE__ */ s(
+    "div",
+    {
+      className: `bg-surface-base shadow ${T("lg")} overflow-hidden ${a}`,
+      children: /* @__PURE__ */ s(w, h(f({}, i), { children: e.children }))
+    }
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      className: `bg-surface-base shadow ${T("lg")} overflow-hidden ${a}`,
+      children: /* @__PURE__ */ C(w, h(f({}, i), { children: [
+        i.filters && i.filters.length > 0 && /* @__PURE__ */ s(z, {}),
+        /* @__PURE__ */ s("div", { className: "overflow-x-auto", children: /* @__PURE__ */ C(
+          "table",
+          {
+            className: "min-w-full divide-y divide-line-default",
+            role: "table",
+            "aria-label": o,
+            "aria-labelledby": t,
+            "aria-rowcount": i.total || i.data.length,
+            "aria-colcount": i.columns.length + (i.selectable ? 1 : 0) + (i.actions ? 1 : 0),
+            children: [
+              /* @__PURE__ */ s(y, {}),
+              /* @__PURE__ */ s(P, {})
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ s(R, {})
+      ] }))
+    }
+  );
+}
+function ee(e) {
+  const {
+    columns: a,
+    data: o,
+    loading: t,
+    onSort: d,
+    sortColumn: m,
+    sortDirection: i,
+    emptyMessage: c,
+    emptyStateTitle: F,
+    emptyStateMessage: H,
+    emptyStateIllustration: N,
+    emptyStateAction: x,
+    pagination: l,
+    filters: r,
+    selectable: M,
+    selectedRows: V,
+    onSelectionChange: $,
+    rowId: A,
+    actions: B,
+    onRowClick: O,
+    paginationMode: j,
+    defaultPageSize: E,
+    resizable: I,
+    columnWidths: L,
+    onColumnResize: k,
+    virtualScrolling: D,
+    virtualScrollingOptions: W
+  } = e;
+  let b = j || "auto";
+  return b === "auto" && (b = l && l.total !== void 0 ? "server" : "client"), {
+    columns: a,
+    data: o,
+    loading: t,
+    paginationMode: b,
+    page: l == null ? void 0 : l.page,
+    pageSize: l == null ? void 0 : l.pageSize,
+    total: l == null ? void 0 : l.total,
+    onPageChange: l == null ? void 0 : l.onPageChange,
+    onPageSizeChange: l == null ? void 0 : l.onPageSizeChange,
+    defaultPageSize: E || (l == null ? void 0 : l.pageSize) || 10,
+    pageSizeOptions: l == null ? void 0 : l.pageSizeOptions,
+    sortColumn: m,
+    sortDirection: i,
+    onSort: d,
+    filters: r == null ? void 0 : r.config,
+    filterValues: r == null ? void 0 : r.initialValues,
+    onFilter: r == null ? void 0 : r.onFilter,
+    initialFilterValues: r == null ? void 0 : r.initialValues,
+    selectable: M,
+    selectedRows: V,
+    onSelectionChange: $,
+    rowId: A,
+    actions: B,
+    onRowClick: O,
+    emptyMessage: c,
+    emptyStateTitle: F,
+    emptyStateMessage: H,
+    emptyStateIllustration: N,
+    emptyStateAction: x,
+    resizable: I,
+    columnWidths: L,
+    onColumnResize: k,
+    virtualScrolling: D,
+    virtualScrollingOptions: W,
+    children: /* @__PURE__ */ s(K, {})
+    // Placeholder, will be overridden by default structure
+  };
+}
+n.Header = y;
+n.HeaderRow = Q;
+n.HeaderCell = U;
+n.Body = P;
+n.Row = X;
+n.Cell = Y;
+n.Filters = z;
+n.Pagination = R;
+n.EmptyState = Z;
+n.Actions = _;
+export {
+  n as default
+};
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../../../src/ui/components/Table/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { TableProvider, type TableProviderProps } from \"./TableProvider\";\nimport type { FilterConfig, FilterValue } from \"./TableFilters/TableFilters\";\nimport type { TableAction } from \"./TableActions/TableActions\";\nimport type { TableColumn } from \"./TableTypes\";\nimport TableHeader from \"./TableHeader\";\nimport TableHeaderRow from \"./TableHeaderRow\";\nimport TableHeaderCell from \"./TableHeaderCell\";\nimport TableBody from \"./TableBody\";\nimport TableRow from \"./TableRow\";\nimport TableCell from \"./TableCell\";\nimport TableFilters from \"./TableFilters\";\nimport TablePagination from \"./TablePagination\";\nimport TableEmptyState from \"./TableEmptyState\";\nimport TableActions from \"./TableActions\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type { TableColumn } from \"./TableTypes\";\n\n// API Simplificada Props (backward compatible)\ninterface SimplifiedTableProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"onSort\" | \"children\"> {\n  columns: TableColumn<T>[];\n  data: T[];\n  loading?: boolean;\n  onSort?: (columnKey: string, direction: \"asc\" | \"desc\") => void;\n  sortColumn?: string;\n  sortDirection?: \"asc\" | \"desc\";\n  emptyMessage?: string;\n  emptyStateTitle?: string;\n  emptyStateMessage?: string;\n  emptyStateIllustration?: ReactNode;\n  emptyStateAction?: ReactNode;\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  // Selection\n  selectable?: boolean;\n  selectedRows?: string[];\n  onSelectionChange?: (selected: string[]) => void;\n  rowId?: (row: T) => string;\n\n  // Actions\n  actions?: (row: T) => TableAction<T>[];\n\n  // Row click callback\n  onRowClick?: (row: T) => void;\n\n  // Pagination mode\n  paginationMode?: \"client\" | \"server\" | \"auto\";\n  defaultPageSize?: number;\n\n  // Column resizing\n  resizable?: boolean;\n  columnWidths?: Record<string, number>;\n  onColumnResize?: (columnKey: string, width: number) => void;\n\n  // Virtual scrolling\n  virtualScrolling?: boolean;\n  virtualScrollingOptions?: {\n    itemHeight?: number;\n    containerHeight?: number;\n    overscan?: number;\n  };\n\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n\n  children?: never; // Simplified API doesn't accept children\n}\n\n// API Declarativa Props (compound components)\ninterface DeclarativeTableProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<TableProviderProps<T>, \"children\"> {\n  children: ReactNode; // Declarative API requires children\n}\n\ntype TableProps<T extends Record<string, unknown> = Record<string, unknown>> =\n  | SimplifiedTableProps<T>\n  | DeclarativeTableProps<T>;\n\n/**\n * Table Component\n *\n * A comprehensive table component with sorting, pagination, filters, selection, and actions.\n * Supports both simplified API (props-based) and declarative API (compound components).\n *\n * @example\n * ```tsx\n * // Simplified API\n * <Table\n *   columns={columns}\n *   data={data}\n *   pagination={{ page, pageSize, total, onPageChange }}\n * />\n *\n * // Declarative API\n * <Table columns={columns} data={data}>\n *   <Table.Filters />\n *   <Table.Header />\n *   <Table.Body />\n *   <Table.Pagination />\n * </Table>\n * ```\n */\nfunction TableComponent<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(props: TableProps<T>) {\n  const {\n    className = \"\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props as SimplifiedTableProps<T> & DeclarativeTableProps<T>;\n  const hasChildren = \"children\" in props && props.children !== undefined;\n\n  // Convert simplified API props to provider props.\n  // The two double-casts below are safe: `restProps` originates from the\n  // same TableProps<T> union and convertSimplifiedToProviderProps' return\n  // mirrors TableProviderProps's shape — but TS cannot prove either via\n  // structural narrowing, so we assert the contract explicitly.\n  const providerProps: TableProviderProps<T> = hasChildren\n    ? (restProps as unknown as TableProviderProps<T>)\n    : (convertSimplifiedToProviderProps(\n        restProps as SimplifiedTableProps<T>,\n      ) as unknown as TableProviderProps<T>);\n\n  // If children are provided, use declarative API\n  if (hasChildren) {\n    return (\n      <div\n        className={`bg-surface-base shadow ${getRadiusClass(\"lg\")} overflow-hidden ${className}`}\n      >\n        <TableProvider {...providerProps}>{props.children}</TableProvider>\n      </div>\n    );\n  }\n\n  // Otherwise, use simplified API with default structure\n  return (\n    <div\n      className={`bg-surface-base shadow ${getRadiusClass(\"lg\")} overflow-hidden ${className}`}\n    >\n      <TableProvider {...providerProps}>\n        {providerProps.filters && providerProps.filters.length > 0 && (\n          <TableFilters />\n        )}\n        <div className=\"overflow-x-auto\">\n          <table\n            className=\"min-w-full divide-y divide-line-default\"\n            role=\"table\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-rowcount={providerProps.total || providerProps.data.length}\n            aria-colcount={\n              providerProps.columns.length +\n              (providerProps.selectable ? 1 : 0) +\n              (providerProps.actions ? 1 : 0)\n            }\n          >\n            <TableHeader />\n            <TableBody />\n          </table>\n        </div>\n        {/* Show pagination - TablePagination component will decide if it should render based on totalPages */}\n        <TablePagination />\n      </TableProvider>\n    </div>\n  );\n}\n\n// Helper to convert simplified API props to provider props\nfunction convertSimplifiedToProviderProps<T extends Record<string, unknown>>(\n  props: SimplifiedTableProps<T>,\n): TableProviderProps<T> {\n  const {\n    columns,\n    data,\n    loading,\n    onSort,\n    sortColumn,\n    sortDirection,\n    emptyMessage,\n    emptyStateTitle,\n    emptyStateMessage,\n    emptyStateIllustration,\n    emptyStateAction,\n    pagination,\n    filters,\n    selectable,\n    selectedRows,\n    onSelectionChange,\n    rowId,\n    actions,\n    onRowClick,\n    paginationMode,\n    defaultPageSize,\n    resizable,\n    columnWidths,\n    onColumnResize,\n    virtualScrolling,\n    virtualScrollingOptions,\n  } = props;\n\n  // Determine pagination mode\n  let mode: \"client\" | \"server\" | \"auto\" = paginationMode || \"auto\";\n  if (mode === \"auto\") {\n    // pagination.onPageChange is required by the type, so its presence\n    // is implied by `pagination` itself.\n    mode = pagination && pagination.total !== undefined ? \"server\" : \"client\";\n  }\n\n  return {\n    columns,\n    data,\n    loading,\n    paginationMode: mode,\n    page: pagination?.page,\n    pageSize: pagination?.pageSize,\n    total: pagination?.total,\n    onPageChange: pagination?.onPageChange,\n    onPageSizeChange: pagination?.onPageSizeChange,\n    defaultPageSize: defaultPageSize || pagination?.pageSize || 10,\n    pageSizeOptions: pagination?.pageSizeOptions,\n    sortColumn,\n    sortDirection,\n    onSort,\n    filters: filters?.config,\n    filterValues: filters?.initialValues,\n    onFilter: filters?.onFilter,\n    initialFilterValues: filters?.initialValues,\n    selectable,\n    selectedRows,\n    onSelectionChange,\n    rowId,\n    actions,\n    onRowClick,\n    emptyMessage,\n    emptyStateTitle,\n    emptyStateMessage,\n    emptyStateIllustration,\n    emptyStateAction,\n    resizable,\n    columnWidths,\n    onColumnResize,\n    virtualScrolling,\n    virtualScrollingOptions,\n    children: <></>, // Placeholder, will be overridden by default structure\n  };\n}\n\n// Compound Components\nTableComponent.Header = TableHeader;\nTableComponent.HeaderRow = TableHeaderRow;\nTableComponent.HeaderCell = TableHeaderCell;\nTableComponent.Body = TableBody;\nTableComponent.Row = TableRow;\nTableComponent.Cell = TableCell;\nTableComponent.Filters = TableFilters;\nTableComponent.Pagination = TablePagination;\nTableComponent.EmptyState = TableEmptyState;\nTableComponent.Actions = TableActions;\n\nexport default TableComponent;\n"],"names":["TableComponent","props","_a","className","ariaLabel","ariaLabelledBy","restProps","__objRest","hasChildren","providerProps","convertSimplifiedToProviderProps","jsx","getRadiusClass","TableProvider","__spreadProps","__spreadValues","jsxs","TableFilters","TableHeader","TableBody","TablePagination","columns","data","loading","onSort","sortColumn","sortDirection","emptyMessage","emptyStateTitle","emptyStateMessage","emptyStateIllustration","emptyStateAction","pagination","filters","selectable","selectedRows","onSelectionChange","rowId","actions","onRowClick","paginationMode","defaultPageSize","resizable","columnWidths","onColumnResize","virtualScrolling","virtualScrollingOptions","mode","Fragment","TableHeaderRow","TableHeaderCell","TableRow","TableCell","TableEmptyState","TableActions"],"mappings":"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"}

package/dist/granular/ui/components/Table/TableActions/TableActions.js

@@ -0,0 +1,67 @@
+"use client";
+var h = Object.defineProperty, u = Object.defineProperties;
+var w = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var n = (e, r, i) => r in e ? h(e, r, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[r] = i, d = (e, r) => {
+  for (var i in r || (r = {}))
+    m.call(r, i) && n(e, i, r[i]);
+  if (l)
+    for (var i of l(r))
+      c.call(r, i) && n(e, i, r[i]);
+  return e;
+}, p = (e, r) => u(e, w(r));
+var f = (e, r) => {
+  var i = {};
+  for (var a in e)
+    m.call(e, a) && r.indexOf(a) < 0 && (i[a] = e[a]);
+  if (e != null && l)
+    for (var a of l(e))
+      r.indexOf(a) < 0 && c.call(e, a) && (i[a] = e[a]);
+  return i;
+};
+import { jsx as t } from "react/jsx-runtime";
+import v from "../../Dropdown/Dropdown.js";
+import { MoreVertical as x } from "lucide-react";
+import { getSpacingClass as C } from "../../../tokens/spacing.js";
+import { Button as N } from "../../../primitives/Button/Button.js";
+function I(k) {
+  var s = k, {
+    actions: e,
+    row: r,
+    align: i = "right",
+    className: a = ""
+  } = s, b = f(s, [
+    "actions",
+    "row",
+    "align",
+    "className"
+  ]);
+  const g = e.map((o) => ({
+    label: o.label,
+    onClick: () => o.onClick(r),
+    variant: o.variant,
+    disabled: o.disabled
+  }));
+  return /* @__PURE__ */ t("div", p(d({ className: `inline-flex ${a}` }, b), { children: /* @__PURE__ */ t(
+    v,
+    {
+      trigger: /* @__PURE__ */ t(
+        N,
+        {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Row actions",
+          className: `h-8 w-8 ${C("none", "p")}`,
+          children: /* @__PURE__ */ t(x, { className: "h-4 w-4" })
+        }
+      ),
+      items: g,
+      align: i
+    }
+  ) }));
+}
+export {
+  I as default
+};
+//# sourceMappingURL=TableActions.js.map

package/dist/granular/ui/components/Table/TableActions/TableActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableActions.js","sources":["../../../../../../src/ui/components/Table/TableActions/TableActions.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport Dropdown from \"../../../components/Dropdown/Dropdown\";\nimport { Button } from \"../../../primitives\";\nimport { MoreVertical } from \"lucide-react\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\n\nexport interface TableAction<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> {\n  label: string;\n  onClick: (row: T) => void;\n  variant?: \"default\" | \"danger\";\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface TableActionsProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> extends HTMLAttributes<HTMLDivElement> {\n  actions: TableAction<T>[];\n  row: T;\n  align?: \"left\" | \"right\";\n}\n\n/**\n * TableActions Component\n *\n * Dropdown menu for row actions in tables.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <TableActions\n *   row={rowData}\n *   actions={[\n *     { label: 'Edit', onClick: (row) => handleEdit(row) },\n *     { label: 'Delete', onClick: (row) => handleDelete(row), variant: 'danger' },\n *   ]}\n * />\n * ```\n */\nexport default function TableActions<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>({\n  actions,\n  row,\n  align = \"right\",\n  className = \"\",\n  ...props\n}: TableActionsProps<T>) {\n  const dropdownItems = actions.map((action) => ({\n    label: action.label,\n    onClick: () => action.onClick(row),\n    variant: action.variant,\n    disabled: action.disabled,\n  }));\n\n  return (\n    <div className={`inline-flex ${className}`} {...props}>\n      <Dropdown\n        trigger={\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            aria-label=\"Row actions\"\n            className={`h-8 w-8 ${getSpacingClass(\"none\", \"p\")}`}\n          >\n            <MoreVertical className=\"h-4 w-4\" />\n          </Button>\n        }\n        items={dropdownItems}\n        align={align}\n      />\n    </div>\n  );\n}\n"],"names":["TableActions","_a","_b","actions","row","align","className","props","__objRest","dropdownItems","action","__spreadProps","__spreadValues","jsx","Dropdown","Button","getSpacingClass","MoreVertical"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAwBA,EAEtBC,GAMuB;AANvB,MAAAC,IAAAD,GACA;AAAA,aAAAE;AAAA,IACA,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,MAJZJ,GAKGK,IAAAC,EALHN,GAKG;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMO,IAAgBN,EAAQ,IAAI,CAACO,OAAY;AAAA,IAC7C,OAAOA,EAAO;AAAA,IACd,SAAS,MAAMA,EAAO,QAAQN,CAAG;AAAA,IACjC,SAASM,EAAO;AAAA,IAChB,UAAUA,EAAO;AAAA,EAAA,EACjB;AAEF,2BACG,OAAAC,EAAAC,EAAA,EAAI,WAAW,eAAeN,CAAS,MAAQC,IAA/C,EACC,UAAA,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SACE,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW,WAAWC,EAAgB,QAAQ,GAAG,CAAC;AAAA,UAElD,UAAA,gBAAAH,EAACI,GAAA,EAAa,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGtC,OAAOR;AAAA,MACP,OAAAJ;AAAA,IAAA;AAAA,EAAA,IAEJ;AAEJ;"}

package/dist/granular/ui/components/Table/TableActions.js

@@ -0,0 +1,44 @@
+"use client";
+var p = Object.defineProperty;
+var e = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var c = (t, o, n) => o in t ? p(t, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[o] = n, f = (t, o) => {
+  for (var n in o || (o = {}))
+    u.call(o, n) && c(t, n, o[n]);
+  if (e)
+    for (var n of e(o))
+      a.call(o, n) && c(t, n, o[n]);
+  return t;
+};
+var m = (t, o) => {
+  var n = {};
+  for (var r in t)
+    u.call(t, r) && o.indexOf(r) < 0 && (n[r] = t[r]);
+  if (t != null && e)
+    for (var r of e(t))
+      o.indexOf(r) < 0 && a.call(t, r) && (n[r] = t[r]);
+  return n;
+};
+import { jsx as b } from "react/jsx-runtime";
+import { useTableContext as x } from "./TableContext.js";
+import A from "./TableActions/TableActions.js";
+function C(T) {
+  var i = T, { row: t, align: o = "right", className: n = "" } = i, r = m(i, ["row", "align", "className"]);
+  const { actions: s } = x();
+  if (!s)
+    return null;
+  const l = s(t);
+  return l.length === 0 ? null : /* @__PURE__ */ b(
+    A,
+    f({
+      row: t,
+      actions: l,
+      align: o,
+      className: n
+    }, r)
+  );
+}
+export {
+  C as default
+};
+//# sourceMappingURL=TableActions.js.map

package/dist/granular/ui/components/Table/TableActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableActions.js","sources":["../../../../../src/ui/components/Table/TableActions.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport TableActionsComponent from \"./TableActions/TableActions\";\n\nexport interface TableActionsProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> extends HTMLAttributes<HTMLDivElement> {\n  row: T;\n  align?: \"left\" | \"right\";\n}\n\n/**\n * TableActions Component\n *\n * Renders action dropdown menu for a table row.\n * Uses actions configuration from Table context.\n * Must be used within a Table component.\n */\nexport default function TableActions<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>({ row, align = \"right\", className = \"\", ...props }: TableActionsProps<T>) {\n  const { actions } = useTableContext<T>();\n\n  if (!actions) {\n    return null;\n  }\n\n  const rowActions = actions(row);\n\n  if (rowActions.length === 0) {\n    return null;\n  }\n\n  return (\n    <TableActionsComponent\n      row={row}\n      actions={rowActions}\n      align={align}\n      className={className}\n      {...props}\n    />\n  );\n}\n"],"names":["TableActions","_a","_b","row","align","className","props","__objRest","actions","useTableContext","rowActions","jsx","TableActionsComponent","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAwBA,EAEtBC,GAA0E;AAA1E,MAAAC,IAAAD,GAAE,OAAAE,GAAK,OAAAC,IAAQ,SAAS,WAAAC,IAAY,OAApCH,GAA2CI,IAAAC,EAA3CL,GAA2C,CAAzC,OAAK,SAAiB;AACxB,QAAM,EAAE,SAAAM,EAAA,IAAYC,EAAA;AAEpB,MAAI,CAACD;AACH,WAAO;AAGT,QAAME,IAAaF,EAAQL,CAAG;AAE9B,SAAIO,EAAW,WAAW,IACjB,OAIP,gBAAAC;AAAA,IAACC;AAAAA,IAAAC,EAAA;AAAA,MACC,KAAAV;AAAA,MACA,SAASO;AAAA,MACT,OAAAN;AAAA,MACA,WAAAC;AAAA,OACIC;AAAA,EAAA;AAGV;"}