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

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

@@ -0,0 +1,95 @@
+"use client";
+var b = Object.defineProperty, j = Object.defineProperties;
+var w = Object.getOwnPropertyDescriptors;
+var r = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, o = Object.prototype.propertyIsEnumerable;
+var c = (e, a, t) => a in e ? b(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, x = (e, a) => {
+  for (var t in a || (a = {}))
+    d.call(a, t) && c(e, t, a[t]);
+  if (r)
+    for (var t of r(a))
+      o.call(a, t) && c(e, t, a[t]);
+  return e;
+}, p = (e, a) => j(e, w(a));
+var g = (e, a) => {
+  var t = {};
+  for (var s in e)
+    d.call(e, s) && a.indexOf(s) < 0 && (t[s] = e[s]);
+  if (e != null && r)
+    for (var s of r(e))
+      a.indexOf(s) < 0 && o.call(e, s) && (t[s] = e[s]);
+  return t;
+};
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import y from "../Breadcrumb/Breadcrumb.js";
+import h from "../../primitives/Text/Text.js";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+import { cn as m } from "../../utils/cn.js";
+import { cva as $ } from "../../utils/cva.js";
+const H = $(
+  // Base classes
+  m("w-full", "flex", "flex-col", l("sm", "gap")),
+  {
+    variants: {
+      variant: {
+        default: m(l("base", "mb")),
+        compact: m(l("sm", "mb"))
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function z(V) {
+  var f = V, {
+    title: e,
+    description: a,
+    breadcrumb: t,
+    actions: s,
+    variant: v = "default",
+    className: u
+  } = f, N = g(f, [
+    "title",
+    "description",
+    "breadcrumb",
+    "actions",
+    "variant",
+    "className"
+  ]);
+  return /* @__PURE__ */ n("div", p(x({ className: m(H({ variant: v }), u) }, N), { children: [
+    t && t.length > 0 && /* @__PURE__ */ i(y, { items: t }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: `flex items-start justify-between ${l("base", "gap")}`,
+        children: [
+          /* @__PURE__ */ n("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ i(
+              h,
+              {
+                variant: "heading",
+                as: "h1",
+                className: `${l("sm", "mb")} text-2xl font-bold`,
+                children: e
+              }
+            ),
+            a && /* @__PURE__ */ i(h, { variant: "body", className: "text-fg-secondary", children: a })
+          ] }),
+          s && /* @__PURE__ */ i(
+            "div",
+            {
+              className: `flex items-center ${l("sm", "gap")} flex-shrink-0`,
+              children: s
+            }
+          )
+        ]
+      }
+    )
+  ] }));
+}
+export {
+  z as PageHeader,
+  z as default
+};
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../../../src/ui/components/PageHeader/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader Component\n *\n * Page header component with title, description, breadcrumb, and actions.\n *\n * @see EPIC-004: PageHeader Component (Molecule)\n */\n\nimport Breadcrumb from \"../Breadcrumb/Breadcrumb\";\nimport Text from \"../../primitives/Text/Text\";\nimport type { PageHeaderProps } from \"./types\";\nimport { cn, cva } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\n/**\n * PageHeader Variants using CVA\n * Type-safe variant system for PageHeader component\n */\nconst pageHeaderVariants = cva(\n  // Base classes\n  cn(\"w-full\", \"flex\", \"flex-col\", getSpacingClass(\"sm\", \"gap\")),\n  {\n    variants: {\n      variant: {\n        default: cn(getSpacingClass(\"base\", \"mb\")),\n        compact: cn(getSpacingClass(\"sm\", \"mb\")),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/**\n * PageHeader Component\n *\n * Page header with title, description, breadcrumb, and actions.\n *\n * @example\n * ```tsx\n * <PageHeader\n *   title=\"Page Title\"\n *   description=\"Page description\"\n *   breadcrumb={[\n *     { label: 'Home', href: '/' },\n *     { label: 'Page', href: '/page' },\n *   ]}\n *   actions={<Button>Action</Button>}\n * />\n * ```\n */\nexport function PageHeader({\n  title,\n  description,\n  breadcrumb,\n  actions,\n  variant = \"default\",\n  className,\n  ...props\n}: PageHeaderProps) {\n  return (\n    <div className={cn(pageHeaderVariants({ variant }), className)} {...props}>\n      {/* Breadcrumb */}\n      {breadcrumb && breadcrumb.length > 0 && <Breadcrumb items={breadcrumb} />}\n\n      {/* Title and Actions Row */}\n      <div\n        className={`flex items-start justify-between ${getSpacingClass(\"base\", \"gap\")}`}\n      >\n        {/* Title and Description */}\n        <div className=\"flex-1 min-w-0\">\n          <Text\n            variant=\"heading\"\n            as=\"h1\"\n            className={`${getSpacingClass(\"sm\", \"mb\")} text-2xl font-bold`}\n          >\n            {title}\n          </Text>\n          {description && (\n            <Text variant=\"body\" className=\"text-fg-secondary\">\n              {description}\n            </Text>\n          )}\n        </div>\n\n        {/* Actions */}\n        {actions && (\n          <div\n            className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")} flex-shrink-0`}\n          >\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default PageHeader;\n"],"names":["pageHeaderVariants","cva","cn","getSpacingClass","PageHeader","_a","_b","title","description","breadcrumb","actions","variant","className","props","__objRest","jsxs","__spreadProps","__spreadValues","jsx","Breadcrumb","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAqBC;AAAA;AAAA,EAEzBC,EAAG,UAAU,QAAQ,YAAYC,EAAgB,MAAM,KAAK,CAAC;AAAA,EAC7D;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAASD,EAAGC,EAAgB,QAAQ,IAAI,CAAC;AAAA,QACzC,SAASD,EAAGC,EAAgB,MAAM,IAAI,CAAC;AAAA,MAAA;AAAA,IACzC;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAoBO,SAASC,EAAWC,GAQP;AARO,MAAAC,IAAAD,GACzB;AAAA,WAAAE;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,MANyBN,GAOtBO,IAAAC,EAPsBR,GAOtB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,gBAAAS,EAAC,OAAAC,EAAAC,EAAA,EAAI,WAAWf,EAAGF,EAAmB,EAAE,SAAAW,EAAA,CAAS,GAAGC,CAAS,KAAOC,IAAnE,EAEE,UAAA;AAAA,IAAAJ,KAAcA,EAAW,SAAS,KAAK,gBAAAS,EAACC,GAAA,EAAW,OAAOV,GAAY;AAAA,IAGvE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,oCAAoCZ,EAAgB,QAAQ,KAAK,CAAC;AAAA,QAG7E,UAAA;AAAA,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,YAAA,gBAAAG;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,WAAW,GAAGjB,EAAgB,MAAM,IAAI,CAAC;AAAA,gBAExC,UAAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFC,KACC,gBAAAU,EAACE,GAAA,EAAK,SAAQ,QAAO,WAAU,qBAC5B,UAAAZ,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UAGCE,KACC,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,qBAAqBf,EAAgB,MAAM,KAAK,CAAC;AAAA,cAE3D,UAAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,IACF;AAEJ;"}

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

@@ -0,0 +1,156 @@
+"use client";
+var G = Object.defineProperty, M = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var a = (i, s, p) => s in i ? G(i, s, { enumerable: !0, configurable: !0, writable: !0, value: p }) : i[s] = p, y = (i, s) => {
+  for (var p in s || (s = {}))
+    v.call(s, p) && a(i, p, s[p]);
+  if (d)
+    for (var p of d(s))
+      b.call(s, p) && a(i, p, s[p]);
+  return i;
+}, N = (i, s) => M(i, T(s));
+var z = (i, s) => {
+  var p = {};
+  for (var e in i)
+    v.call(i, e) && s.indexOf(e) < 0 && (p[e] = i[e]);
+  if (i != null && d)
+    for (var e of d(i))
+      s.indexOf(e) < 0 && b.call(i, e) && (p[e] = i[e]);
+  return p;
+};
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+import { getSpacingClass as c } from "../../tokens/spacing.js";
+import { Button as h } from "../../primitives/Button/Button.js";
+import { getTypographySizeFromFontSize as q } from "../../tokens/typography.js";
+function Q(D) {
+  var t = D, {
+    currentPage: i,
+    totalPages: s,
+    onPageChange: p,
+    totalItems: e,
+    itemsPerPage: o,
+    showPageInfo: k = !0,
+    className: S = ""
+  } = t, j = z(t, [
+    "currentPage",
+    "totalPages",
+    "onPageChange",
+    "totalItems",
+    "itemsPerPage",
+    "showPageInfo",
+    "className"
+  ]);
+  const C = () => {
+    i > 1 && p(i - 1);
+  }, w = () => {
+    i < s && p(i + 1);
+  }, F = (l) => {
+    l >= 1 && l <= s && l !== i && p(l);
+  }, V = () => {
+    const l = [];
+    if (s <= 5)
+      for (let n = 1; n <= s; n++)
+        l.push(n);
+    else if (i <= 3) {
+      for (let n = 1; n <= 4; n++)
+        l.push(n);
+      l.push("ellipsis"), l.push(s);
+    } else if (i >= s - 2) {
+      l.push(1), l.push("ellipsis");
+      for (let n = s - 3; n <= s; n++)
+        l.push(n);
+    } else {
+      l.push(1), l.push("ellipsis");
+      for (let n = i - 1; n <= i + 1; n++)
+        l.push(n);
+      l.push("ellipsis"), l.push(s);
+    }
+    return l;
+  }, $ = e && o ? (i - 1) * o + 1 : void 0, A = e && o ? Math.min(i * o, e) : void 0, B = r(
+    "flex",
+    "items-center",
+    "justify-between",
+    c("base", "px"),
+    c("md", "py"),
+    S
+  );
+  return /* @__PURE__ */ f("nav", N(y({ className: B, "aria-label": "Pagination" }, j), { children: [
+    /* @__PURE__ */ f("div", { className: r("flex", "items-center", c("sm", "gap")), children: [
+      /* @__PURE__ */ m(
+        h,
+        {
+          variant: "secondary",
+          onClick: C,
+          disabled: i === 1,
+          size: "sm",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: r("flex", "items-center", c("xs", "gap")),
+          children: V().map((l, u) => {
+            if (l === "ellipsis")
+              return /* @__PURE__ */ m(
+                "span",
+                {
+                  className: r(
+                    c("sm", "px"),
+                    "text-fg-tertiary"
+                  ),
+                  children: "..."
+                },
+                `ellipsis-${u}`
+              );
+            const n = l, x = n === i;
+            return /* @__PURE__ */ m(
+              h,
+              {
+                variant: x ? "primary" : "ghost",
+                onClick: () => F(n),
+                size: "sm",
+                "aria-current": x ? "page" : void 0,
+                "aria-label": `Go to page ${n}`,
+                children: n
+              },
+              n
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ m(
+        h,
+        {
+          variant: "secondary",
+          onClick: w,
+          disabled: i === s,
+          size: "sm",
+          children: "Next"
+        }
+      )
+    ] }),
+    k && e && o && /* @__PURE__ */ f(
+      "div",
+      {
+        className: r(q("sm"), "text-fg-primary"),
+        children: [
+          "Showing ",
+          $,
+          " to ",
+          A,
+          " of ",
+          e,
+          " results"
+        ]
+      }
+    )
+  ] }));
+}
+export {
+  Q as default
+};
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../../src/ui/components/Pagination/Pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { Button } from \"../../primitives\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass, getTypographySizeFromFontSize } from \"../../tokens\";\n\ninterface Props extends HTMLAttributes<HTMLDivElement> {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  totalItems?: number;\n  itemsPerPage?: number;\n  showPageInfo?: boolean;\n}\n\n/**\n * Pagination Component\n *\n * A pagination component for navigating through pages of data.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n *   onPageChange={(page) => setPage(page)}\n *   totalItems={100}\n *   itemsPerPage={10}\n * />\n * ```\n */\nexport default function Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  totalItems,\n  itemsPerPage,\n  showPageInfo = true,\n  className = \"\",\n  ...props\n}: Props) {\n  const handlePrevious = () => {\n    if (currentPage > 1) {\n      onPageChange(currentPage - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (currentPage < totalPages) {\n      onPageChange(currentPage + 1);\n    }\n  };\n\n  const handlePageClick = (page: number) => {\n    if (page >= 1 && page <= totalPages && page !== currentPage) {\n      onPageChange(page);\n    }\n  };\n\n  const getPageNumbers = () => {\n    const pages: (number | string)[] = [];\n    const maxVisible = 5;\n\n    if (totalPages <= maxVisible) {\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      if (currentPage <= 3) {\n        for (let i = 1; i <= 4; i++) {\n          pages.push(i);\n        }\n        pages.push(\"ellipsis\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - 2) {\n        pages.push(1);\n        pages.push(\"ellipsis\");\n        for (let i = totalPages - 3; i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        pages.push(1);\n        pages.push(\"ellipsis\");\n        for (let i = currentPage - 1; i <= currentPage + 1; i++) {\n          pages.push(i);\n        }\n        pages.push(\"ellipsis\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const startItem =\n    totalItems && itemsPerPage\n      ? (currentPage - 1) * itemsPerPage + 1\n      : undefined;\n  const endItem =\n    totalItems && itemsPerPage\n      ? Math.min(currentPage * itemsPerPage, totalItems)\n      : undefined;\n\n  const classes = cn(\n    \"flex\",\n    \"items-center\",\n    \"justify-between\",\n    getSpacingClass(\"base\", \"px\"),\n    getSpacingClass(\"md\", \"py\"),\n    className,\n  );\n\n  return (\n    <nav className={classes} aria-label=\"Pagination\" {...props}>\n      <div className={cn(\"flex\", \"items-center\", getSpacingClass(\"sm\", \"gap\"))}>\n        <Button\n          variant=\"secondary\"\n          onClick={handlePrevious}\n          disabled={currentPage === 1}\n          size=\"sm\"\n        >\n          Previous\n        </Button>\n        <div\n          className={cn(\"flex\", \"items-center\", getSpacingClass(\"xs\", \"gap\"))}\n        >\n          {getPageNumbers().map((page, index) => {\n            if (page === \"ellipsis\") {\n              return (\n                <span\n                  key={`ellipsis-${index}`}\n                  className={cn(\n                    getSpacingClass(\"sm\", \"px\"),\n                    \"text-fg-tertiary\",\n                  )}\n                >\n                  ...\n                </span>\n              );\n            }\n\n            const pageNum = page as number;\n            const isActive = pageNum === currentPage;\n\n            return (\n              <Button\n                key={pageNum}\n                variant={isActive ? \"primary\" : \"ghost\"}\n                onClick={() => handlePageClick(pageNum)}\n                size=\"sm\"\n                aria-current={isActive ? \"page\" : undefined}\n                aria-label={`Go to page ${pageNum}`}\n              >\n                {pageNum}\n              </Button>\n            );\n          })}\n        </div>\n        <Button\n          variant=\"secondary\"\n          onClick={handleNext}\n          disabled={currentPage === totalPages}\n          size=\"sm\"\n        >\n          Next\n        </Button>\n      </div>\n      {showPageInfo && totalItems && itemsPerPage && (\n        <div\n          className={cn(getTypographySizeFromFontSize(\"sm\"), \"text-fg-primary\")}\n        >\n          Showing {startItem} to {endItem} of {totalItems} results\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"names":["Pagination","_a","_b","currentPage","totalPages","onPageChange","totalItems","itemsPerPage","showPageInfo","className","props","__objRest","handlePrevious","handleNext","handlePageClick","page","getPageNumbers","pages","i","startItem","endItem","classes","cn","getSpacingClass","__spreadProps","__spreadValues","jsxs","jsx","Button","index","pageNum","isActive","getTypographySizeFromFontSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAwBA,EAAWC,GASzB;AATyB,MAAAC,IAAAD,GACjC;AAAA,iBAAAE;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC,IAAY;AAAA,MAPqBP,GAQ9BQ,IAAAC,EAR8BT,GAQ9B;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMU,IAAiB,MAAM;AAC3B,IAAIT,IAAc,KAChBE,EAAaF,IAAc,CAAC;AAAA,EAEhC,GAEMU,IAAa,MAAM;AACvB,IAAIV,IAAcC,KAChBC,EAAaF,IAAc,CAAC;AAAA,EAEhC,GAEMW,IAAkB,CAACC,MAAiB;AACxC,IAAIA,KAAQ,KAAKA,KAAQX,KAAcW,MAASZ,KAC9CE,EAAaU,CAAI;AAAA,EAErB,GAEMC,IAAiB,MAAM;AAC3B,UAAMC,IAA6B,CAAA;AAGnC,QAAIb,KAAc;AAChB,eAASc,IAAI,GAAGA,KAAKd,GAAYc;AAC/B,QAAAD,EAAM,KAAKC,CAAC;AAAA,aAGVf,KAAe,GAAG;AACpB,eAASe,IAAI,GAAGA,KAAK,GAAGA;AACtB,QAAAD,EAAM,KAAKC,CAAC;AAEd,MAAAD,EAAM,KAAK,UAAU,GACrBA,EAAM,KAAKb,CAAU;AAAA,IACvB,WAAWD,KAAeC,IAAa,GAAG;AACxC,MAAAa,EAAM,KAAK,CAAC,GACZA,EAAM,KAAK,UAAU;AACrB,eAASC,IAAId,IAAa,GAAGc,KAAKd,GAAYc;AAC5C,QAAAD,EAAM,KAAKC,CAAC;AAAA,IAEhB,OAAO;AACL,MAAAD,EAAM,KAAK,CAAC,GACZA,EAAM,KAAK,UAAU;AACrB,eAASC,IAAIf,IAAc,GAAGe,KAAKf,IAAc,GAAGe;AAClD,QAAAD,EAAM,KAAKC,CAAC;AAEd,MAAAD,EAAM,KAAK,UAAU,GACrBA,EAAM,KAAKb,CAAU;AAAA,IACvB;AAGF,WAAOa;AAAA,EACT,GAEME,IACJb,KAAcC,KACTJ,IAAc,KAAKI,IAAe,IACnC,QACAa,IACJd,KAAcC,IACV,KAAK,IAAIJ,IAAcI,GAAcD,CAAU,IAC/C,QAEAe,IAAUC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACAC,EAAgB,QAAQ,IAAI;AAAA,IAC5BA,EAAgB,MAAM,IAAI;AAAA,IAC1Bd;AAAA,EAAA;AAGF,2BACG,OAAAe,EAAAC,EAAA,EAAI,WAAWJ,GAAS,cAAW,gBAAiBX,IAApD,EACC,UAAA;AAAA,IAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAWJ,EAAG,QAAQ,gBAAgBC,EAAgB,MAAM,KAAK,CAAC,GACrE,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAShB;AAAA,UACT,UAAUT,MAAgB;AAAA,UAC1B,MAAK;AAAA,UACN,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGD,gBAAAwB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWL,EAAG,QAAQ,gBAAgBC,EAAgB,MAAM,KAAK,CAAC;AAAA,UAEjE,UAAAP,EAAA,EAAiB,IAAI,CAACD,GAAMc,MAAU;AACrC,gBAAId,MAAS;AACX,qBACE,gBAAAY;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAWL;AAAA,oBACTC,EAAgB,MAAM,IAAI;AAAA,oBAC1B;AAAA,kBAAA;AAAA,kBAEH,UAAA;AAAA,gBAAA;AAAA,gBALM,YAAYM,CAAK;AAAA,cAAA;AAW5B,kBAAMC,IAAUf,GACVgB,IAAWD,MAAY3B;AAE7B,mBACE,gBAAAwB;AAAA,cAACC;AAAA,cAAA;AAAA,gBAEC,SAASG,IAAW,YAAY;AAAA,gBAChC,SAAS,MAAMjB,EAAgBgB,CAAO;AAAA,gBACtC,MAAK;AAAA,gBACL,gBAAcC,IAAW,SAAS;AAAA,gBAClC,cAAY,cAAcD,CAAO;AAAA,gBAEhC,UAAAA;AAAA,cAAA;AAAA,cAPIA;AAAA,YAAA;AAAA,UAUX,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAH;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAASf;AAAA,UACT,UAAUV,MAAgBC;AAAA,UAC1B,MAAK;AAAA,UACN,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GACF;AAAA,IACCI,KAAgBF,KAAcC,KAC7B,gBAAAmB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ,EAAGU,EAA8B,IAAI,GAAG,iBAAiB;AAAA,QACrE,UAAA;AAAA,UAAA;AAAA,UACUb;AAAA,UAAU;AAAA,UAAKC;AAAA,UAAQ;AAAA,UAAKd;AAAA,UAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAClD,IAEJ;AAEJ;"}

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

@@ -0,0 +1,171 @@
+"use client";
+import { jsxs as $, jsx as m } from "react/jsx-runtime";
+import { useState as k, useRef as S, useId as B, useCallback as x, useEffect as w } from "react";
+import { createPortal as F } from "react-dom";
+import { X as H } from "lucide-react";
+import { getSpacingClass as u } from "../../tokens/spacing.js";
+import { getRadiusClass as Z } from "../../tokens/radius.js";
+import { getShadowClass as q } from "../../tokens/shadows.js";
+import { getZIndexClass as D } from "../../tokens/z-index.js";
+import { getAnimationClass as G } from "../../tokens/animations.js";
+import { getTypographySize as J, getTypographyWeight as K } from "../../tokens/typography.js";
+import { useFocusRestore as Q } from "../../hooks/useFocusRestore.js";
+import { Button as U } from "../../primitives/Button/Button.js";
+function at({
+  trigger: W,
+  children: z,
+  open: E,
+  defaultOpen: I = !1,
+  onOpenChange: g,
+  placement: o = "bottom",
+  showCloseButton: v = !1,
+  title: f,
+  closeOnClickOutside: R = !0,
+  closeOnEscape: C = !0,
+  className: M = "",
+  triggerClassName: P = "",
+  contentClassName: j = ""
+}) {
+  const [T, X] = k(I), c = S(null), d = S(null), [L, Y] = k({ top: 0, left: 0 }), N = B(), b = E !== void 0, i = b ? E : T;
+  Q(i);
+  const a = x(() => {
+    if (!c.current || !d.current) return;
+    const t = c.current.getBoundingClientRect(), e = d.current.getBoundingClientRect(), n = window.scrollY, l = window.scrollX;
+    let r = 0, s = 0;
+    o.startsWith("top") ? (r = t.top + n - e.height - 8, o === "top-start" ? s = t.left + l : o === "top-end" ? s = t.right + l - e.width : s = t.left + l + (t.width - e.width) / 2) : o.startsWith("bottom") ? (r = t.bottom + n + 8, o === "bottom-start" ? s = t.left + l : o === "bottom-end" ? s = t.right + l - e.width : s = t.left + l + (t.width - e.width) / 2) : o.startsWith("left") ? (s = t.left + l - e.width - 8, o === "left-start" ? r = t.top + n : o === "left-end" ? r = t.bottom + n - e.height : r = t.top + n + (t.height - e.height) / 2) : o.startsWith("right") && (s = t.right + l + 8, o === "right-start" ? r = t.top + n : o === "right-end" ? r = t.bottom + n - e.height : r = t.top + n + (t.height - e.height) / 2);
+    const p = 8;
+    r = Math.max(
+      p,
+      Math.min(
+        r,
+        window.innerHeight + n - e.height - p
+      )
+    ), s = Math.max(
+      p,
+      Math.min(s, window.innerWidth + l - e.width - p)
+    ), Y({ top: r, left: s });
+  }, [o]);
+  w(() => {
+    if (i) {
+      a();
+      const t = () => a(), e = () => a();
+      return window.addEventListener("resize", t), window.addEventListener("scroll", e, !0), () => {
+        window.removeEventListener("resize", t), window.removeEventListener("scroll", e, !0);
+      };
+    }
+  }, [i, o, a]), w(() => {
+    i && d.current && setTimeout(a, 0);
+  }, [i, a]);
+  const y = x(
+    (t) => {
+      b || X(t), g == null || g(t);
+    },
+    [b, g]
+  ), h = x(() => {
+    y(!1);
+  }, [y]);
+  w(() => {
+    if (i && C) {
+      const t = (e) => {
+        e.key === "Escape" && h();
+      };
+      return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+    }
+  }, [i, C, h]), w(() => {
+    if (i && R) {
+      const t = (e) => {
+        d.current && c.current && !d.current.contains(e.target) && !c.current.contains(e.target) && h();
+      };
+      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+    }
+  }, [i, R, h]);
+  const A = i ? /* @__PURE__ */ $(
+    "div",
+    {
+      ref: d,
+      className: `
+        absolute
+        ${D("popover")}
+        bg-surface-overlay
+        ${Z("lg")}
+        ${q("lg")}
+        border
+        border-line-default
+        min-w-48
+        max-w-96
+        ${G("base")}
+        ${j}
+      `,
+      style: {
+        top: `${L.top}px`,
+        left: `${L.left}px`
+      },
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": f ? N : void 0,
+      children: [
+        (f || v) && /* @__PURE__ */ $(
+          "div",
+          {
+            className: `
+          flex
+          items-center
+          justify-between
+          ${u("base", "px")}
+          ${u("md", "py")}
+          border-b
+          border-line-default
+        `,
+            children: [
+              f && /* @__PURE__ */ m(
+                "h3",
+                {
+                  id: N,
+                  className: `${J("bodySmall")} ${K("h5")} text-fg-primary`,
+                  children: f
+                }
+              ),
+              v && /* @__PURE__ */ m(
+                U,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: h,
+                  className: `h-auto ${u("xs", "p")}`,
+                  "aria-label": "Close popover",
+                  children: /* @__PURE__ */ m(H, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: `
+        ${u("base", "p")}
+        ${f || v ? "" : u("md", "p")}
+      `,
+            children: z
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ $("div", { className: `inline-block ${M}`, children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        ref: c,
+        className: P,
+        onClick: () => y(!i),
+        children: W
+      }
+    ),
+    typeof window != "undefined" && F(A, document.body)
+  ] });
+}
+export {
+  at as default
+};
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../../src/ui/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } 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 {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { useFocusRestore } from \"../../hooks/useFocusRestore\";\nimport Button from \"../../primitives/Button/Button\";\n\nexport type PopoverPlacement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface PopoverProps {\n  trigger: ReactNode;\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  placement?: PopoverPlacement;\n  showCloseButton?: boolean;\n  title?: string;\n  closeOnClickOutside?: boolean;\n  closeOnEscape?: boolean;\n  className?: string;\n  triggerClassName?: string;\n  contentClassName?: string;\n}\n\n/**\n * Popover Component\n *\n * A popover component that displays content in a floating panel.\n * Supports positioning, portal rendering, and keyboard navigation.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <Popover\n *   trigger={<Button>Open Popover</Button>}\n *   title=\"Popover Title\"\n * >\n *   <p>Popover content goes here</p>\n * </Popover>\n * ```\n */\nexport default function Popover({\n  trigger,\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  placement = \"bottom\",\n  showCloseButton = false,\n  title,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  className = \"\",\n  triggerClassName = \"\",\n  contentClassName = \"\",\n}: PopoverProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const titleId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  // Non-modal focus contract: restore only. Popover is explicitly\n  // non-modal (aria-modal=\"false\" below), so per the WAI-ARIA disclosure\n  // pattern it does NOT trap focus and does NOT auto-focus on open.\n  // Users tab THROUGH the trigger / panel naturally. The single\n  // obligation it does carry: when the panel closes (Escape,\n  // click-outside, programmatic), focus should return to whatever had\n  // it before the panel opened — typically the trigger button — so the\n  // keyboard user is not stranded.\n  //\n  // Trigger-ref-free by design: `useFocusRestore` snapshots\n  // `document.activeElement` at open time, which captures the trigger\n  // wrapper or any other element that opened the popover. Avoids\n  // coupling restore to a specific `triggerRef`, leaves room for\n  // programmatic opens (notifications, kebab menus that reopen on\n  // focus event, etc.).\n  useFocusRestore(isOpen);\n\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current || !popoverRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const scrollY = window.scrollY;\n    const scrollX = window.scrollX;\n\n    let top = 0;\n    let left = 0;\n\n    // Calculate position based on placement\n    if (placement.startsWith(\"top\")) {\n      top = triggerRect.top + scrollY - popoverRect.height - 8;\n      if (placement === \"top-start\") left = triggerRect.left + scrollX;\n      else if (placement === \"top-end\")\n        left = triggerRect.right + scrollX - popoverRect.width;\n      else\n        left =\n          triggerRect.left +\n          scrollX +\n          (triggerRect.width - popoverRect.width) / 2;\n    } else if (placement.startsWith(\"bottom\")) {\n      top = triggerRect.bottom + scrollY + 8;\n      if (placement === \"bottom-start\") left = triggerRect.left + scrollX;\n      else if (placement === \"bottom-end\")\n        left = triggerRect.right + scrollX - popoverRect.width;\n      else\n        left =\n          triggerRect.left +\n          scrollX +\n          (triggerRect.width - popoverRect.width) / 2;\n    } else if (placement.startsWith(\"left\")) {\n      left = triggerRect.left + scrollX - popoverRect.width - 8;\n      if (placement === \"left-start\") top = triggerRect.top + scrollY;\n      else if (placement === \"left-end\")\n        top = triggerRect.bottom + scrollY - popoverRect.height;\n      else\n        top =\n          triggerRect.top +\n          scrollY +\n          (triggerRect.height - popoverRect.height) / 2;\n    } else if (placement.startsWith(\"right\")) {\n      left = triggerRect.right + scrollX + 8;\n      if (placement === \"right-start\") top = triggerRect.top + scrollY;\n      else if (placement === \"right-end\")\n        top = triggerRect.bottom + scrollY - popoverRect.height;\n      else\n        top =\n          triggerRect.top +\n          scrollY +\n          (triggerRect.height - popoverRect.height) / 2;\n    }\n\n    // Keep within viewport\n    const padding = 8;\n    top = Math.max(\n      padding,\n      Math.min(\n        top,\n        window.innerHeight + scrollY - popoverRect.height - padding,\n      ),\n    );\n    left = Math.max(\n      padding,\n      Math.min(left, window.innerWidth + scrollX - popoverRect.width - padding),\n    );\n\n    setPosition({ top, left });\n  }, [placement]);\n\n  useEffect(() => {\n    if (isOpen) {\n      updatePosition();\n      const handleResize = () => updatePosition();\n      const handleScroll = () => updatePosition();\n      window.addEventListener(\"resize\", handleResize);\n      window.addEventListener(\"scroll\", handleScroll, true);\n      return () => {\n        window.removeEventListener(\"resize\", handleResize);\n        window.removeEventListener(\"scroll\", handleScroll, true);\n      };\n    }\n  }, [isOpen, placement, updatePosition]);\n\n  useEffect(() => {\n    if (isOpen && popoverRef.current) {\n      // Small delay to ensure DOM is ready\n      setTimeout(updatePosition, 0);\n    }\n  }, [isOpen, updatePosition]);\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(newOpen);\n      }\n      onOpenChange?.(newOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const handleClose = useCallback(() => {\n    handleOpenChange(false);\n  }, [handleOpenChange]);\n\n  useEffect(() => {\n    if (isOpen && closeOnEscape) {\n      const handleEscape = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n          handleClose();\n        }\n      };\n      document.addEventListener(\"keydown\", handleEscape);\n      return () => document.removeEventListener(\"keydown\", handleEscape);\n    }\n  }, [isOpen, closeOnEscape, handleClose]);\n\n  useEffect(() => {\n    if (isOpen && closeOnClickOutside) {\n      const handleClickOutside = (e: MouseEvent) => {\n        if (\n          popoverRef.current &&\n          triggerRef.current &&\n          !popoverRef.current.contains(e.target as Node) &&\n          !triggerRef.current.contains(e.target as Node)\n        ) {\n          handleClose();\n        }\n      };\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen, closeOnClickOutside, handleClose]);\n\n  const popoverContent = isOpen ? (\n    <div\n      ref={popoverRef}\n      className={`\n        absolute\n        ${getZIndexClass(\"popover\")}\n        bg-surface-overlay\n        ${getRadiusClass(\"lg\")}\n        ${getShadowClass(\"lg\")}\n        border\n        border-line-default\n        min-w-48\n        max-w-96\n        ${getAnimationClass(\"base\")}\n        ${contentClassName}\n      `}\n      style={{\n        top: `${position.top}px`,\n        left: `${position.left}px`,\n      }}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={title ? titleId : undefined}\n    >\n      {(title || showCloseButton) && (\n        <div\n          className={`\n          flex\n          items-center\n          justify-between\n          ${getSpacingClass(\"base\", \"px\")}\n          ${getSpacingClass(\"md\", \"py\")}\n          border-b\n          border-line-default\n        `}\n        >\n          {title && (\n            <h3\n              id={titleId}\n              className={`${getTypographySize(\"bodySmall\")} ${getTypographyWeight(\"h5\")} text-fg-primary`}\n            >\n              {title}\n            </h3>\n          )}\n          {showCloseButton && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleClose}\n              className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n              aria-label=\"Close popover\"\n            >\n              <X className=\"h-4 w-4\" />\n            </Button>\n          )}\n        </div>\n      )}\n      <div\n        className={`\n        ${getSpacingClass(\"base\", \"p\")}\n        ${title || showCloseButton ? \"\" : getSpacingClass(\"md\", \"p\")}\n      `}\n      >\n        {children}\n      </div>\n    </div>\n  ) : null;\n\n  return (\n    <div className={`inline-block ${className}`}>\n      <div\n        ref={triggerRef}\n        className={triggerClassName}\n        onClick={() => handleOpenChange(!isOpen)}\n      >\n        {trigger}\n      </div>\n      {typeof window !== \"undefined\" &&\n        createPortal(popoverContent, document.body)}\n    </div>\n  );\n}\n"],"names":["Popover","trigger","children","controlledOpen","defaultOpen","onOpenChange","placement","showCloseButton","title","closeOnClickOutside","closeOnEscape","className","triggerClassName","contentClassName","internalOpen","setInternalOpen","useState","triggerRef","useRef","popoverRef","position","setPosition","titleId","useId","isControlled","isOpen","useFocusRestore","updatePosition","useCallback","triggerRect","popoverRect","scrollY","scrollX","top","left","padding","useEffect","handleResize","handleScroll","handleOpenChange","newOpen","handleClose","handleEscape","handleClickOutside","popoverContent","jsxs","getZIndexClass","getRadiusClass","getShadowClass","getAnimationClass","getSpacingClass","jsx","getTypographySize","getTypographyWeight","Button","X","createPortal"],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { Star as o } from "lucide-react";
+import { cn as c } from "../../utils/cn.js";
+import { getTypographySizeFromFontSize as T } from "../../tokens/typography.js";
+import { getSpacingClass as E } from "../../tokens/spacing.js";
+import { getAnimationClass as V } from "../../tokens/animations.js";
+function U({
+  value: N,
+  defaultValue: F = 0,
+  max: r = 5,
+  size: I = "md",
+  variant: a = "filled",
+  readOnly: e = !1,
+  allowHalf: h = !1,
+  showValue: M = !1,
+  onChange: f,
+  onHover: m,
+  className: $ = "",
+  icon: z,
+  emptyIcon: R
+}) {
+  const [j, A] = w(F), [u, b] = w(null), v = N !== void 0, n = u != null ? u : v ? N : j, D = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6"
+  }, C = (s) => {
+    e || (v || A(s), f == null || f(s));
+  }, L = (s) => {
+    e || (b(s), m == null || m(s));
+  }, y = () => {
+    e || b(null);
+  }, K = (s) => {
+    const t = s + 1, x = h && n >= t - 0.5 && n < t, d = n >= t, i = c(
+      D[I],
+      V("base"),
+      !e && "cursor-pointer",
+      d || x ? "text-fg-warning" : "text-fg-disabled"
+    ), k = z || /* @__PURE__ */ l(o, { className: i, fill: d ? "currentColor" : "none" }), S = R || /* @__PURE__ */ l(o, { className: i, fill: "none" });
+    return /* @__PURE__ */ l(
+      "span",
+      {
+        className: "relative inline-block",
+        onClick: () => C(t),
+        onMouseEnter: () => L(t),
+        onMouseLeave: y,
+        role: e ? void 0 : "button",
+        tabIndex: e ? void 0 : 0,
+        "aria-label": e ? void 0 : `Rate ${t} out of ${r}`,
+        onKeyDown: (p) => {
+          !e && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), C(t));
+        },
+        children: x ? /* @__PURE__ */ g("span", { className: "relative inline-block", children: [
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: { width: "50%" },
+              children: a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "currentColor" }) : k
+            }
+          ),
+          a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "none" }) : S
+        ] }) : d ? a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "currentColor" }) : k : a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "none" }) : S
+      },
+      s
+    );
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: c(
+        "inline-flex",
+        "items-center",
+        E("xs", "gap"),
+        $
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: c("flex", "items-center"),
+            role: e ? "img" : void 0,
+            "aria-label": e ? `Rating: ${n} out of ${r}` : void 0,
+            children: Array.from({ length: r }, (s, t) => K(t))
+          }
+        ),
+        M && /* @__PURE__ */ g(
+          "span",
+          {
+            className: c(
+              E("sm", "ml"),
+              T("sm"),
+              "text-fg-secondary"
+            ),
+            children: [
+              n.toFixed(h ? 1 : 0),
+              "/",
+              r
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  U as default
+};
+//# sourceMappingURL=Rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sources":["../../../../../src/ui/components/Rating/Rating.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Star } from \"lucide-react\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getAnimationClass,\n  getTypographySizeFromFontSize,\n} from \"../../tokens\";\n\nexport type RatingSize = \"sm\" | \"md\" | \"lg\";\nexport type RatingVariant = \"filled\" | \"outlined\";\n\nexport interface RatingProps {\n  value?: number;\n  defaultValue?: number;\n  max?: number;\n  size?: RatingSize;\n  variant?: RatingVariant;\n  readOnly?: boolean;\n  allowHalf?: boolean;\n  showValue?: boolean;\n  onChange?: (value: number) => void;\n  onHover?: (value: number) => void;\n  className?: string;\n  icon?: ReactNode;\n  emptyIcon?: ReactNode;\n}\n\n/**\n * Rating Component\n *\n * A rating component for displaying and selecting ratings.\n * Supports filled and outlined variants, half ratings, and read-only mode.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <Rating value={4} max={5} onChange={(value) => console.log(value)} />\n *\n * <Rating value={3.5} readOnly showValue />\n * ```\n */\nexport default function Rating({\n  value: controlledValue,\n  defaultValue = 0,\n  max = 5,\n  size = \"md\",\n  variant = \"filled\",\n  readOnly = false,\n  allowHalf = false,\n  showValue = false,\n  onChange,\n  onHover,\n  className = \"\",\n  icon,\n  emptyIcon,\n}: RatingProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n  const isControlled = controlledValue !== undefined;\n  const displayValue =\n    hoverValue ?? (isControlled ? controlledValue : internalValue);\n\n  const sizeConfig = {\n    sm: \"h-4 w-4\",\n    md: \"h-5 w-5\",\n    lg: \"h-6 w-6\",\n  };\n\n  const handleClick = (newValue: number) => {\n    if (readOnly) return;\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const handleMouseEnter = (newValue: number) => {\n    if (readOnly) return;\n    setHoverValue(newValue);\n    onHover?.(newValue);\n  };\n\n  const handleMouseLeave = () => {\n    if (readOnly) return;\n    setHoverValue(null);\n  };\n\n  const renderStar = (index: number) => {\n    const starValue = index + 1;\n    const isHalf =\n      allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue;\n    const isFilled = displayValue >= starValue;\n\n    const starClasses = cn(\n      sizeConfig[size],\n      getAnimationClass(\"base\"),\n      !readOnly && \"cursor-pointer\",\n      isFilled || isHalf ? \"text-fg-warning\" : \"text-fg-disabled\",\n    );\n\n    const CustomIcon = icon || (\n      <Star className={starClasses} fill={isFilled ? \"currentColor\" : \"none\"} />\n    );\n    const CustomEmptyIcon = emptyIcon || (\n      <Star className={starClasses} fill=\"none\" />\n    );\n\n    return (\n      <span\n        key={index}\n        className=\"relative inline-block\"\n        onClick={() => handleClick(starValue)}\n        onMouseEnter={() => handleMouseEnter(starValue)}\n        onMouseLeave={handleMouseLeave}\n        role={readOnly ? undefined : \"button\"}\n        tabIndex={readOnly ? undefined : 0}\n        aria-label={readOnly ? undefined : `Rate ${starValue} out of ${max}`}\n        onKeyDown={(e) => {\n          if (!readOnly && (e.key === \"Enter\" || e.key === \" \")) {\n            e.preventDefault();\n            handleClick(starValue);\n          }\n        }}\n      >\n        {isHalf ? (\n          <span className=\"relative inline-block\">\n            <span\n              className=\"absolute inset-0 overflow-hidden\"\n              style={{ width: \"50%\" }}\n            >\n              {variant === \"filled\" ? (\n                <Star className={starClasses} fill=\"currentColor\" />\n              ) : (\n                CustomIcon\n              )}\n            </span>\n            {variant === \"filled\" ? (\n              <Star className={starClasses} fill=\"none\" />\n            ) : (\n              CustomEmptyIcon\n            )}\n          </span>\n        ) : isFilled ? (\n          variant === \"filled\" ? (\n            <Star className={starClasses} fill=\"currentColor\" />\n          ) : (\n            CustomIcon\n          )\n        ) : variant === \"filled\" ? (\n          <Star className={starClasses} fill=\"none\" />\n        ) : (\n          CustomEmptyIcon\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex\",\n        \"items-center\",\n        getSpacingClass(\"xs\", \"gap\"),\n        className,\n      )}\n    >\n      <div\n        className={cn(\"flex\", \"items-center\")}\n        role={readOnly ? \"img\" : undefined}\n        aria-label={\n          readOnly ? `Rating: ${displayValue} out of ${max}` : undefined\n        }\n      >\n        {Array.from({ length: max }, (_, i) => renderStar(i))}\n      </div>\n      {showValue && (\n        <span\n          className={cn(\n            getSpacingClass(\"sm\", \"ml\"),\n            getTypographySizeFromFontSize(\"sm\"),\n            \"text-fg-secondary\",\n          )}\n        >\n          {displayValue.toFixed(allowHalf ? 1 : 0)}/{max}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Rating","controlledValue","defaultValue","max","size","variant","readOnly","allowHalf","showValue","onChange","onHover","className","icon","emptyIcon","internalValue","setInternalValue","useState","hoverValue","setHoverValue","isControlled","displayValue","sizeConfig","handleClick","newValue","handleMouseEnter","handleMouseLeave","renderStar","index","starValue","isHalf","isFilled","starClasses","cn","getAnimationClass","CustomIcon","jsx","Star","CustomEmptyIcon","e","jsxs","getSpacingClass","_","i","getTypographySizeFromFontSize"],"mappings":";;;;;;;;AA4CA,SAAwBA,EAAO;AAAA,EAC7B,OAAOC;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,WAAAC;AACF,GAAgB;AACd,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAASd,CAAY,GACzD,CAACe,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAelB,MAAoB,QACnCmB,IACJH,KAAA,OAAAA,IAAeE,IAAelB,IAAkBa,GAE5CO,IAAa;AAAA,IACjB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAC,IAAc,CAACC,MAAqB;AACxC,IAAIjB,MAECa,KACHJ,EAAiBQ,CAAQ,GAE3Bd,KAAA,QAAAA,EAAWc;AAAA,EACb,GAEMC,IAAmB,CAACD,MAAqB;AAC7C,IAAIjB,MACJY,EAAcK,CAAQ,GACtBb,KAAA,QAAAA,EAAUa;AAAA,EACZ,GAEME,IAAmB,MAAM;AAC7B,IAAInB,KACJY,EAAc,IAAI;AAAA,EACpB,GAEMQ,IAAa,CAACC,MAAkB;AACpC,UAAMC,IAAYD,IAAQ,GACpBE,IACJtB,KAAaa,KAAgBQ,IAAY,OAAOR,IAAeQ,GAC3DE,IAAWV,KAAgBQ,GAE3BG,IAAcC;AAAA,MAClBX,EAAWjB,CAAI;AAAA,MACf6B,EAAkB,MAAM;AAAA,MACxB,CAAC3B,KAAY;AAAA,MACbwB,KAAYD,IAAS,oBAAoB;AAAA,IAAA,GAGrCK,IAAatB,KACjB,gBAAAuB,EAACC,GAAA,EAAK,WAAWL,GAAa,MAAMD,IAAW,iBAAiB,OAAA,CAAQ,GAEpEO,IAAkBxB,KACtB,gBAAAsB,EAACC,KAAK,WAAWL,GAAa,MAAK,QAAO;AAG5C,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,SAAS,MAAMb,EAAYM,CAAS;AAAA,QACpC,cAAc,MAAMJ,EAAiBI,CAAS;AAAA,QAC9C,cAAcH;AAAA,QACd,MAAMnB,IAAW,SAAY;AAAA,QAC7B,UAAUA,IAAW,SAAY;AAAA,QACjC,cAAYA,IAAW,SAAY,QAAQsB,CAAS,WAAWzB,CAAG;AAAA,QAClE,WAAW,CAACmC,MAAM;AAChB,UAAI,CAAChC,MAAagC,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAC/CA,EAAE,eAAA,GACFhB,EAAYM,CAAS;AAAA,QAEzB;AAAA,QAEC,UAAAC,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,MAAA;AAAA,cAEf,UAAA9B,MAAY,WACX,gBAAA8B,EAACC,GAAA,EAAK,WAAWL,GAAa,MAAK,gBAAe,IAElDG;AAAA,YAAA;AAAA,UAAA;AAAA,UAGH7B,MAAY,WACX,gBAAA8B,EAACC,GAAA,EAAK,WAAWL,GAAa,MAAK,QAAO,IAE1CM;AAAA,QAAA,EAAA,CAEJ,IACEP,IACFzB,MAAY,6BACT+B,GAAA,EAAK,WAAWL,GAAa,MAAK,eAAA,CAAe,IAElDG,IAEA7B,MAAY,WACd,gBAAA8B,EAACC,GAAA,EAAK,WAAWL,GAAa,MAAK,QAAO,IAE1CM;AAAA,MAAA;AAAA,MA1CGV;AAAA,IAAA;AAAA,EA8CX;AAEA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWP;AAAA,QACT;AAAA,QACA;AAAA,QACAQ,EAAgB,MAAM,KAAK;AAAA,QAC3B7B;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAG,QAAQ,cAAc;AAAA,YACpC,MAAM1B,IAAW,QAAQ;AAAA,YACzB,cACEA,IAAW,WAAWc,CAAY,WAAWjB,CAAG,KAAK;AAAA,YAGtD,UAAA,MAAM,KAAK,EAAE,QAAQA,KAAO,CAACsC,GAAGC,MAAMhB,EAAWgB,CAAC,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAErDlC,KACC,gBAAA+B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWP;AAAA,cACTQ,EAAgB,MAAM,IAAI;AAAA,cAC1BG,EAA8B,IAAI;AAAA,cAClC;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAvB,EAAa,QAAQb,IAAY,IAAI,CAAC;AAAA,cAAE;AAAA,cAAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7C;AAAA,IAAA;AAAA,EAAA;AAIR;"}