@psnext/design-system 2.3.0 → 2.4.0

package/dist/primitives/Sonner/index.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let lucide_react = require("lucide-react");
+const require_Icon = require("../../Icon.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 let sonner = require("sonner");
 //#region src/primitives/Sonner/Sonner.tsx
 /**
@@ -29,11 +30,26 @@ const Toaster = ({ theme = "system", position = "top-center", closeButton = true
 			cancelButton: "!min-h-6 !rounded-8 !bg-ghost-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt"
 		} },
 		icons: {
-			success: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleCheckIcon, { className: "size-4" }),
-			info: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.InfoIcon, { className: "size-4" }),
-			warning: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TriangleAlertIcon, { className: "size-4" }),
-			error: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.OctagonXIcon, { className: "size-4" }),
-			loading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2Icon, { className: "size-4 animate-spin" })
+			success: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CircleCheckIcon,
+				className: "size-4"
+			}),
+			info: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.InfoIcon,
+				className: "size-4"
+			}),
+			warning: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.TriangleAlertIcon,
+				className: "size-4"
+			}),
+			error: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.OctagonXIcon,
+				className: "size-4"
+			}),
+			loading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.Loader2Icon,
+				className: "size-4 animate-spin"
+			})
 		},
 		style: {
 			"--normal-bg": "var(--glass-none-bg)",

package/dist/primitives/Sonner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Sonner","CircleCheckIcon","InfoIcon","TriangleAlertIcon","OctagonXIcon","Loader2Icon"],"sources":["../../../src/primitives/Sonner/Sonner.tsx"],"sourcesContent":["import {\n  CircleCheckIcon,\n  InfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\";\n\n/**\n * Toaster wired to the design-system tokens.\n *\n * Theme is accepted as a prop (default \"system\") instead of being read from\n * `next-themes`, so the DS does not couple to any particular theme provider —\n * consuming apps pass their resolved theme explicitly.\n *\n * Per-severity colors are applied through `data-[type=…]` classes on the toast,\n * so `toast.error/success/warning/info(...)` adopt the tokenized palette and\n * react to light/dark + brand switching. Severity icons are provided here.\n */\nconst Toaster = ({\n  /** Resolved color scheme for the toasts; pass your app's theme explicitly. */\n  theme = \"system\",\n  /** Screen corner/edge where toasts are anchored. */\n  position = \"top-center\",\n  /** Whether each toast renders a dismiss (close) button. */\n  closeButton = true,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Sonner\n      theme={theme}\n      position={position}\n      closeButton={closeButton}\n      richColors\n      className=\"toaster group\"\n      // Figma Sonner card (node 139:11359): glass-none surface, primary border,\n      // rounded-10, p-4, shadow-sm; 14/20 medium title, muted description;\n      // actions are secondary-mini chips.\n      // Severity toasts follow the InfoBanner treatment (bg-X-bg / text-X-txt):\n      // the data-[type=…] variants out-specify the neutral base so richColors\n      // severities keep their tokenized palette.\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group/toast !rounded-10 !border-primary-border !bg-glass-none-bg !p-4 !shadow-sm !gap-3 !text-primary-txt data-[type=info]:!bg-info-bg data-[type=info]:!border-info-border data-[type=info]:!text-info-txt data-[type=success]:!bg-success-bg data-[type=success]:!border-success-border data-[type=success]:!text-success-txt data-[type=warning]:!bg-warning-bg data-[type=warning]:!border-warning-border data-[type=warning]:!text-warning-txt data-[type=error]:!bg-danger-bg data-[type=error]:!border-danger-border data-[type=error]:!text-danger-txt\",\n          title: \"!text-sm !leading-5 !font-medium !text-current\",\n          description:\n            \"!text-sm !leading-5 !font-normal !text-muted-txt group-data-[type=info]/toast:!text-info-txt group-data-[type=success]/toast:!text-success-txt group-data-[type=warning]/toast:!text-warning-txt group-data-[type=error]/toast:!text-danger-txt\",\n          actionButton:\n            \"!min-h-6 !rounded-8 !bg-secondary-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n          cancelButton:\n            \"!min-h-6 !rounded-8 !bg-ghost-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n        },\n      }}\n      icons={{\n        success: <CircleCheckIcon className=\"size-4\" />,\n        info: <InfoIcon className=\"size-4\" />,\n        warning: <TriangleAlertIcon className=\"size-4\" />,\n        error: <OctagonXIcon className=\"size-4\" />,\n        loading: <Loader2Icon className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--glass-none-bg)\",\n          \"--normal-text\": \"var(--primary-txt)\",\n          \"--normal-border\": \"var(--primary-border)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,WAAW,EAEf,QAAQ,UAER,WAAW,cAEX,cAAc,MACd,GAAG,YACe;CAClB,OACE,iBAAA,GAAA,kBAAA,KAACA,OAAAA,SAAD;EACS;EACG;EACG;EACb,YAAA;EACA,WAAU;EAOV,cAAc,EACZ,YAAY;GACV,OACE;GACF,OAAO;GACP,aACE;GACF,cACE;GACF,cACE;EACJ,EACF;EACA,OAAO;GACL,SAAS,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD,EAAiB,WAAU,SAAU,CAAA;GAC9C,MAAM,iBAAA,GAAA,kBAAA,KAACC,aAAAA,UAAD,EAAU,WAAU,SAAU,CAAA;GACpC,SAAS,iBAAA,GAAA,kBAAA,KAACC,aAAAA,mBAAD,EAAmB,WAAU,SAAU,CAAA;GAChD,OAAO,iBAAA,GAAA,kBAAA,KAACC,aAAAA,cAAD,EAAc,WAAU,SAAU,CAAA;GACzC,SAAS,iBAAA,GAAA,kBAAA,KAACC,aAAAA,aAAD,EAAa,WAAU,sBAAuB,CAAA;EACzD;EACA,OACE;GACE,eAAe;GACf,iBAAiB;GACjB,mBAAmB;EACrB;EAEF,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["Sonner","Icon","CircleCheckIcon","InfoIcon","TriangleAlertIcon","OctagonXIcon","Loader2Icon"],"sources":["../../../src/primitives/Sonner/Sonner.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\";\n\n/**\n * Toaster wired to the design-system tokens.\n *\n * Theme is accepted as a prop (default \"system\") instead of being read from\n * `next-themes`, so the DS does not couple to any particular theme provider —\n * consuming apps pass their resolved theme explicitly.\n *\n * Per-severity colors are applied through `data-[type=…]` classes on the toast,\n * so `toast.error/success/warning/info(...)` adopt the tokenized palette and\n * react to light/dark + brand switching. Severity icons are provided here.\n */\nconst Toaster = ({\n  /** Resolved color scheme for the toasts; pass your app's theme explicitly. */\n  theme = \"system\",\n  /** Screen corner/edge where toasts are anchored. */\n  position = \"top-center\",\n  /** Whether each toast renders a dismiss (close) button. */\n  closeButton = true,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Sonner\n      theme={theme}\n      position={position}\n      closeButton={closeButton}\n      richColors\n      className=\"toaster group\"\n      // Figma Sonner card (node 139:11359): glass-none surface, primary border,\n      // rounded-10, p-4, shadow-sm; 14/20 medium title, muted description;\n      // actions are secondary-mini chips.\n      // Severity toasts follow the InfoBanner treatment (bg-X-bg / text-X-txt):\n      // the data-[type=…] variants out-specify the neutral base so richColors\n      // severities keep their tokenized palette.\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group/toast !rounded-10 !border-primary-border !bg-glass-none-bg !p-4 !shadow-sm !gap-3 !text-primary-txt data-[type=info]:!bg-info-bg data-[type=info]:!border-info-border data-[type=info]:!text-info-txt data-[type=success]:!bg-success-bg data-[type=success]:!border-success-border data-[type=success]:!text-success-txt data-[type=warning]:!bg-warning-bg data-[type=warning]:!border-warning-border data-[type=warning]:!text-warning-txt data-[type=error]:!bg-danger-bg data-[type=error]:!border-danger-border data-[type=error]:!text-danger-txt\",\n          title: \"!text-sm !leading-5 !font-medium !text-current\",\n          description:\n            \"!text-sm !leading-5 !font-normal !text-muted-txt group-data-[type=info]/toast:!text-info-txt group-data-[type=success]/toast:!text-success-txt group-data-[type=warning]/toast:!text-warning-txt group-data-[type=error]/toast:!text-danger-txt\",\n          actionButton:\n            \"!min-h-6 !rounded-8 !bg-secondary-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n          cancelButton:\n            \"!min-h-6 !rounded-8 !bg-ghost-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n        },\n      }}\n      icons={{\n        success: <Icon as={CircleCheckIcon} className=\"size-4\" />,\n        info: <Icon as={InfoIcon} className=\"size-4\" />,\n        warning: <Icon as={TriangleAlertIcon} className=\"size-4\" />,\n        error: <Icon as={OctagonXIcon} className=\"size-4\" />,\n        loading: <Icon as={Loader2Icon} className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--glass-none-bg)\",\n          \"--normal-text\": \"var(--primary-txt)\",\n          \"--normal-border\": \"var(--primary-border)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,WAAW,EAEf,QAAQ,UAER,WAAW,cAEX,cAAc,MACd,GAAG,YACe;CAClB,OACE,iBAAA,GAAA,kBAAA,KAACA,OAAAA,SAAD;EACS;EACG;EACG;EACb,YAAA;EACA,WAAU;EAOV,cAAc,EACZ,YAAY;GACV,OACE;GACF,OAAO;GACP,aACE;GACF,cACE;GACF,cACE;EACJ,EACF;EACA,OAAO;GACL,SAAS,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;IAAM,IAAIC,aAAAA;IAAiB,WAAU;GAAU,CAAA;GACxD,MAAM,iBAAA,GAAA,kBAAA,KAACD,aAAAA,MAAD;IAAM,IAAIE,aAAAA;IAAU,WAAU;GAAU,CAAA;GAC9C,SAAS,iBAAA,GAAA,kBAAA,KAACF,aAAAA,MAAD;IAAM,IAAIG,aAAAA;IAAmB,WAAU;GAAU,CAAA;GAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACH,aAAAA,MAAD;IAAM,IAAII,aAAAA;IAAc,WAAU;GAAU,CAAA;GACnD,SAAS,iBAAA,GAAA,kBAAA,KAACJ,aAAAA,MAAD;IAAM,IAAIK,aAAAA;IAAa,WAAU;GAAuB,CAAA;EACnE;EACA,OACE;GACE,eAAe;GACf,iBAAiB;GACjB,mBAAmB;EACrB;EAEF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Sonner/index.js

@@ -1,5 +1,6 @@
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { t as Icon } from "../../Icon.js";
 import { jsx } from "react/jsx-runtime";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
 import { Toaster as Toaster$1 } from "sonner";
 //#region src/primitives/Sonner/Sonner.tsx
 /**
@@ -28,11 +29,26 @@ const Toaster = ({ theme = "system", position = "top-center", closeButton = true
 			cancelButton: "!min-h-6 !rounded-8 !bg-ghost-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt"
 		} },
 		icons: {
-			success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
-			info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
-			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
-			error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
-			loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+			success: /* @__PURE__ */ jsx(Icon, {
+				as: CircleCheckIcon,
+				className: "size-4"
+			}),
+			info: /* @__PURE__ */ jsx(Icon, {
+				as: InfoIcon,
+				className: "size-4"
+			}),
+			warning: /* @__PURE__ */ jsx(Icon, {
+				as: TriangleAlertIcon,
+				className: "size-4"
+			}),
+			error: /* @__PURE__ */ jsx(Icon, {
+				as: OctagonXIcon,
+				className: "size-4"
+			}),
+			loading: /* @__PURE__ */ jsx(Icon, {
+				as: Loader2Icon,
+				className: "size-4 animate-spin"
+			})
 		},
 		style: {
 			"--normal-bg": "var(--glass-none-bg)",

package/dist/primitives/Sonner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Sonner"],"sources":["../../../src/primitives/Sonner/Sonner.tsx"],"sourcesContent":["import {\n  CircleCheckIcon,\n  InfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\";\n\n/**\n * Toaster wired to the design-system tokens.\n *\n * Theme is accepted as a prop (default \"system\") instead of being read from\n * `next-themes`, so the DS does not couple to any particular theme provider —\n * consuming apps pass their resolved theme explicitly.\n *\n * Per-severity colors are applied through `data-[type=…]` classes on the toast,\n * so `toast.error/success/warning/info(...)` adopt the tokenized palette and\n * react to light/dark + brand switching. Severity icons are provided here.\n */\nconst Toaster = ({\n  /** Resolved color scheme for the toasts; pass your app's theme explicitly. */\n  theme = \"system\",\n  /** Screen corner/edge where toasts are anchored. */\n  position = \"top-center\",\n  /** Whether each toast renders a dismiss (close) button. */\n  closeButton = true,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Sonner\n      theme={theme}\n      position={position}\n      closeButton={closeButton}\n      richColors\n      className=\"toaster group\"\n      // Figma Sonner card (node 139:11359): glass-none surface, primary border,\n      // rounded-10, p-4, shadow-sm; 14/20 medium title, muted description;\n      // actions are secondary-mini chips.\n      // Severity toasts follow the InfoBanner treatment (bg-X-bg / text-X-txt):\n      // the data-[type=…] variants out-specify the neutral base so richColors\n      // severities keep their tokenized palette.\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group/toast !rounded-10 !border-primary-border !bg-glass-none-bg !p-4 !shadow-sm !gap-3 !text-primary-txt data-[type=info]:!bg-info-bg data-[type=info]:!border-info-border data-[type=info]:!text-info-txt data-[type=success]:!bg-success-bg data-[type=success]:!border-success-border data-[type=success]:!text-success-txt data-[type=warning]:!bg-warning-bg data-[type=warning]:!border-warning-border data-[type=warning]:!text-warning-txt data-[type=error]:!bg-danger-bg data-[type=error]:!border-danger-border data-[type=error]:!text-danger-txt\",\n          title: \"!text-sm !leading-5 !font-medium !text-current\",\n          description:\n            \"!text-sm !leading-5 !font-normal !text-muted-txt group-data-[type=info]/toast:!text-info-txt group-data-[type=success]/toast:!text-success-txt group-data-[type=warning]/toast:!text-warning-txt group-data-[type=error]/toast:!text-danger-txt\",\n          actionButton:\n            \"!min-h-6 !rounded-8 !bg-secondary-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n          cancelButton:\n            \"!min-h-6 !rounded-8 !bg-ghost-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n        },\n      }}\n      icons={{\n        success: <CircleCheckIcon className=\"size-4\" />,\n        info: <InfoIcon className=\"size-4\" />,\n        warning: <TriangleAlertIcon className=\"size-4\" />,\n        error: <OctagonXIcon className=\"size-4\" />,\n        loading: <Loader2Icon className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--glass-none-bg)\",\n          \"--normal-text\": \"var(--primary-txt)\",\n          \"--normal-border\": \"var(--primary-border)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,WAAW,EAEf,QAAQ,UAER,WAAW,cAEX,cAAc,MACd,GAAG,YACe;CAClB,OACE,oBAACA,WAAD;EACS;EACG;EACG;EACb,YAAA;EACA,WAAU;EAOV,cAAc,EACZ,YAAY;GACV,OACE;GACF,OAAO;GACP,aACE;GACF,cACE;GACF,cACE;EACJ,EACF;EACA,OAAO;GACL,SAAS,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;GAC9C,MAAM,oBAAC,UAAD,EAAU,WAAU,SAAU,CAAA;GACpC,SAAS,oBAAC,mBAAD,EAAmB,WAAU,SAAU,CAAA;GAChD,OAAO,oBAAC,cAAD,EAAc,WAAU,SAAU,CAAA;GACzC,SAAS,oBAAC,aAAD,EAAa,WAAU,sBAAuB,CAAA;EACzD;EACA,OACE;GACE,eAAe;GACf,iBAAiB;GACjB,mBAAmB;EACrB;EAEF,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["Sonner"],"sources":["../../../src/primitives/Sonner/Sonner.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\";\n\n/**\n * Toaster wired to the design-system tokens.\n *\n * Theme is accepted as a prop (default \"system\") instead of being read from\n * `next-themes`, so the DS does not couple to any particular theme provider —\n * consuming apps pass their resolved theme explicitly.\n *\n * Per-severity colors are applied through `data-[type=…]` classes on the toast,\n * so `toast.error/success/warning/info(...)` adopt the tokenized palette and\n * react to light/dark + brand switching. Severity icons are provided here.\n */\nconst Toaster = ({\n  /** Resolved color scheme for the toasts; pass your app's theme explicitly. */\n  theme = \"system\",\n  /** Screen corner/edge where toasts are anchored. */\n  position = \"top-center\",\n  /** Whether each toast renders a dismiss (close) button. */\n  closeButton = true,\n  ...props\n}: ToasterProps) => {\n  return (\n    <Sonner\n      theme={theme}\n      position={position}\n      closeButton={closeButton}\n      richColors\n      className=\"toaster group\"\n      // Figma Sonner card (node 139:11359): glass-none surface, primary border,\n      // rounded-10, p-4, shadow-sm; 14/20 medium title, muted description;\n      // actions are secondary-mini chips.\n      // Severity toasts follow the InfoBanner treatment (bg-X-bg / text-X-txt):\n      // the data-[type=…] variants out-specify the neutral base so richColors\n      // severities keep their tokenized palette.\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group/toast !rounded-10 !border-primary-border !bg-glass-none-bg !p-4 !shadow-sm !gap-3 !text-primary-txt data-[type=info]:!bg-info-bg data-[type=info]:!border-info-border data-[type=info]:!text-info-txt data-[type=success]:!bg-success-bg data-[type=success]:!border-success-border data-[type=success]:!text-success-txt data-[type=warning]:!bg-warning-bg data-[type=warning]:!border-warning-border data-[type=warning]:!text-warning-txt data-[type=error]:!bg-danger-bg data-[type=error]:!border-danger-border data-[type=error]:!text-danger-txt\",\n          title: \"!text-sm !leading-5 !font-medium !text-current\",\n          description:\n            \"!text-sm !leading-5 !font-normal !text-muted-txt group-data-[type=info]/toast:!text-info-txt group-data-[type=success]/toast:!text-success-txt group-data-[type=warning]/toast:!text-warning-txt group-data-[type=error]/toast:!text-danger-txt\",\n          actionButton:\n            \"!min-h-6 !rounded-8 !bg-secondary-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n          cancelButton:\n            \"!min-h-6 !rounded-8 !bg-ghost-bg !px-4 !py-0.75 !text-xs !leading-4 !text-primary-txt\",\n        },\n      }}\n      icons={{\n        success: <Icon as={CircleCheckIcon} className=\"size-4\" />,\n        info: <Icon as={InfoIcon} className=\"size-4\" />,\n        warning: <Icon as={TriangleAlertIcon} className=\"size-4\" />,\n        error: <Icon as={OctagonXIcon} className=\"size-4\" />,\n        loading: <Icon as={Loader2Icon} className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--glass-none-bg)\",\n          \"--normal-text\": \"var(--primary-txt)\",\n          \"--normal-border\": \"var(--primary-border)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAM,WAAW,EAEf,QAAQ,UAER,WAAW,cAEX,cAAc,MACd,GAAG,YACe;CAClB,OACE,oBAACA,WAAD;EACS;EACG;EACG;EACb,YAAA;EACA,WAAU;EAOV,cAAc,EACZ,YAAY;GACV,OACE;GACF,OAAO;GACP,aACE;GACF,cACE;GACF,cACE;EACJ,EACF;EACA,OAAO;GACL,SAAS,oBAAC,MAAD;IAAM,IAAI;IAAiB,WAAU;GAAU,CAAA;GACxD,MAAM,oBAAC,MAAD;IAAM,IAAI;IAAU,WAAU;GAAU,CAAA;GAC9C,SAAS,oBAAC,MAAD;IAAM,IAAI;IAAmB,WAAU;GAAU,CAAA;GAC1D,OAAO,oBAAC,MAAD;IAAM,IAAI;IAAc,WAAU;GAAU,CAAA;GACnD,SAAS,oBAAC,MAAD;IAAM,IAAI;IAAa,WAAU;GAAuB,CAAA;EACnE;EACA,OACE;GACE,eAAe;GACf,iBAAiB;GACjB,mBAAmB;EACrB;EAEF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Spinner/index.cjs

@@ -1,11 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let lucide_react = require("lucide-react");
+const require_Icon = require("../../Icon.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region src/primitives/Spinner/Spinner.tsx
 /** An animated loading indicator; size and colour are controlled via `className`. */
 function Spinner({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2Icon, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+		as: lucide_react.Loader2Icon,
 		role: "status",
 		"aria-label": "Loading",
 		"data-slot": "spinner",

package/dist/primitives/Spinner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Loader2Icon","cn"],"sources":["../../../src/primitives/Spinner/Spinner.tsx"],"sourcesContent":["import { Loader2Icon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** An animated loading indicator; size and colour are controlled via `className`. */\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Loader2Icon\n      role=\"status\"\n      aria-label=\"Loading\"\n      data-slot=\"spinner\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;;AAMA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,iBAAA,GAAA,kBAAA,KAACA,aAAAA,aAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["Icon","Loader2Icon","cn"],"sources":["../../../src/primitives/Spinner/Spinner.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { Loader2Icon, type LucideProps } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** An animated loading indicator; size and colour are controlled via `className`. */\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Icon\n      as={Loader2Icon}\n      role=\"status\"\n      aria-label=\"Loading\"\n      data-slot=\"spinner\"\n      className={cn(\"size-4 animate-spin\", className)}\n      // svg's legacy `color`/`size`/`fill` attrs collide with Icon's variant props at\n      // the type level only — runtime passthrough is unchanged.\n      {...(props as Omit<LucideProps, \"color\" | \"size\" | \"fill\">)}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;;;AAOA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,iBAAA,GAAA,kBAAA,KAACA,aAAAA,MAAD;EACE,IAAIC,aAAAA;EACJ,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;EAG9C,GAAK;CACN,CAAA;AAEL"}

package/dist/primitives/Spinner/index.js

@@ -1,10 +1,12 @@
 import { t as cn } from "../../cn.js";
-import { Loader2Icon } from "lucide-react";
+import { t as Icon } from "../../Icon.js";
 import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
 //#region src/primitives/Spinner/Spinner.tsx
 /** An animated loading indicator; size and colour are controlled via `className`. */
 function Spinner({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Loader2Icon, {
+	return /* @__PURE__ */ jsx(Icon, {
+		as: Loader2Icon,
 		role: "status",
 		"aria-label": "Loading",
 		"data-slot": "spinner",

package/dist/primitives/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Spinner/Spinner.tsx"],"sourcesContent":["import { Loader2Icon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** An animated loading indicator; size and colour are controlled via `className`. */\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Loader2Icon\n      role=\"status\"\n      aria-label=\"Loading\"\n      data-slot=\"spinner\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;AAMA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,oBAAC,aAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Spinner/Spinner.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { Loader2Icon, type LucideProps } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** An animated loading indicator; size and colour are controlled via `className`. */\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Icon\n      as={Loader2Icon}\n      role=\"status\"\n      aria-label=\"Loading\"\n      data-slot=\"spinner\"\n      className={cn(\"size-4 animate-spin\", className)}\n      // svg's legacy `color`/`size`/`fill` attrs collide with Icon's variant props at\n      // the type level only — runtime passthrough is unchanged.\n      {...(props as Omit<LucideProps, \"color\" | \"size\" | \"fill\">)}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;;AAOA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,oBAAC,MAAD;EACE,IAAI;EACJ,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAG9C,GAAK;CACN,CAAA;AAEL"}

package/dist/primitives/Switch/index.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 let react = require("react");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Switch/Switch.tsx
 /** A toggle control for switching a single setting on or off. */
 function Switch({ className, size = "default", ...props }) {

package/dist/primitives/Switch/index.js

@@ -1,7 +1,7 @@
 import { t as cn } from "../../cn.js";
 import { useId } from "react";
-import { Switch as Switch$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "radix-ui";
 //#region src/primitives/Switch/Switch.tsx
 /** A toggle control for switching a single setting on or off. */
 function Switch({ className, size = "default", ...props }) {

package/dist/primitives/Tabs/index.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
-let class_variance_authority = require("class-variance-authority");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Tabs/Tabs.tsx
 const TabsContext = react.createContext({
 	variant: "pill",

package/dist/primitives/Tabs/index.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { cva } from "class-variance-authority";
 import * as React from "react";
-import { Tabs as Tabs$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { Tabs as Tabs$1 } from "radix-ui";
 //#region src/primitives/Tabs/Tabs.tsx
 const TabsContext = React.createContext({
 	variant: "pill",

package/dist/primitives/Text/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Text/Text.tsx
-const textVariants = (0, require("class-variance-authority").cva)("", {
+const textVariants = (0, class_variance_authority.cva)("", {
 	variants: {
 		size: {
 			large: "text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]",

package/dist/primitives/Text/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Text/Text.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Text — the typography primitive. Renders any element via `as` and drives\n// size/line-height from the design-system BODY type scale (Inter): the Figma\n// \"paragraph large/regular/small/mini\" + caption steps (tokens in\n// styles/tokens/typography.css). Inline links compose as children.\nconst textVariants = cva(\"\", {\n  variants: {\n    // Body scale — font-size + line-height come straight from the type tokens.\n    size: {\n      large:\n        \"text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]\",\n      regular:\n        \"text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]\",\n      small:\n        \"text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]\",\n      mini: \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n      caption:\n        \"text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    variant: {\n      default: \"text-primary-txt\",\n      muted: \"text-muted-txt\",\n      primary: \"text-primary-txt\",\n      destructive: \"text-danger-txt\",\n      success: \"text-success-txt\",\n    },\n    font: {\n      body: \"font-sans\",\n      heading: \"font-heading\",\n      mono: \"font-mono\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n  },\n  defaultVariants: {\n    size: \"regular\",\n    weight: \"normal\",\n    variant: \"default\",\n    font: \"body\",\n  },\n});\n\ntype TextProps = Omit<React.ComponentProps<\"p\">, \"color\"> &\n  VariantProps<typeof textVariants> & {\n    /** Element/component to render. Defaults to `p`. */\n    as?: React.ElementType;\n    /** Body type-scale step (font-size + line-height). Defaults to `regular`. */\n    size?: VariantProps<typeof textVariants>[\"size\"];\n    /** Font weight. Defaults to `normal`. */\n    weight?: VariantProps<typeof textVariants>[\"weight\"];\n    /** Foreground colour token. Defaults to `default` (text-primary-txt). */\n    variant?: VariantProps<typeof textVariants>[\"variant\"];\n    /** Font family. Defaults to `body` (sans). */\n    font?: VariantProps<typeof textVariants>[\"font\"];\n    /** Horizontal text alignment. */\n    align?: VariantProps<typeof textVariants>[\"align\"];\n    /** Truncate to a single line with an ellipsis. */\n    truncate?: VariantProps<typeof textVariants>[\"truncate\"];\n  };\n\n/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */\nfunction Text({\n  as,\n  className,\n  size,\n  weight,\n  variant,\n  font,\n  align,\n  truncate,\n  ...props\n}: TextProps) {\n  const Comp = as ?? \"p\";\n  return (\n    <Comp\n      data-slot=\"text\"\n      className={cn(textVariants({ size, weight, variant, font, align, truncate }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Text, textVariants, type TextProps };\n"],"mappings":";;;;AASA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,IAAI;CAC3B,UAAU;EAER,MAAM;GACJ,OACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;EACJ;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;GACT,aAAa;GACb,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;GACT,MAAM;EACR;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAqBD,SAAS,KAAK,EACZ,IACA,WACA,MACA,QACA,SACA,MACA,OACA,UACA,GAAG,SACS;CAEZ,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,KAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAM;GAAQ;GAAS;GAAM;GAAO;EAAS,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Text/Text.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Text — the typography primitive. Renders any element via `as` and drives\n// size/line-height from the design-system BODY type scale (Inter): the Figma\n// \"paragraph large/regular/small/mini\" + caption steps (tokens in\n// styles/tokens/typography.css). Inline links compose as children.\nconst textVariants = cva(\"\", {\n  variants: {\n    // Body scale — font-size + line-height come straight from the type tokens.\n    size: {\n      large:\n        \"text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]\",\n      regular:\n        \"text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]\",\n      small:\n        \"text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]\",\n      mini: \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n      caption:\n        \"text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    variant: {\n      default: \"text-primary-txt\",\n      muted: \"text-muted-txt\",\n      primary: \"text-primary-txt\",\n      destructive: \"text-danger-txt\",\n      success: \"text-success-txt\",\n    },\n    font: {\n      body: \"font-sans\",\n      heading: \"font-heading\",\n      mono: \"font-mono\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n  },\n  defaultVariants: {\n    size: \"regular\",\n    weight: \"normal\",\n    variant: \"default\",\n    font: \"body\",\n  },\n});\n\ntype TextProps = Omit<React.ComponentProps<\"p\">, \"color\"> &\n  VariantProps<typeof textVariants> & {\n    /** Element/component to render. Defaults to `p`. */\n    as?: React.ElementType;\n    /** Body type-scale step (font-size + line-height). Defaults to `regular`. */\n    size?: VariantProps<typeof textVariants>[\"size\"];\n    /** Font weight. Defaults to `normal`. */\n    weight?: VariantProps<typeof textVariants>[\"weight\"];\n    /** Foreground colour token. Defaults to `default` (text-primary-txt). */\n    variant?: VariantProps<typeof textVariants>[\"variant\"];\n    /** Font family. Defaults to `body` (sans). */\n    font?: VariantProps<typeof textVariants>[\"font\"];\n    /** Horizontal text alignment. */\n    align?: VariantProps<typeof textVariants>[\"align\"];\n    /** Truncate to a single line with an ellipsis. */\n    truncate?: VariantProps<typeof textVariants>[\"truncate\"];\n  };\n\n/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */\nfunction Text({\n  as,\n  className,\n  size,\n  weight,\n  variant,\n  font,\n  align,\n  truncate,\n  ...props\n}: TextProps) {\n  const Comp = as ?? \"p\";\n  return (\n    <Comp\n      data-slot=\"text\"\n      className={cn(textVariants({ size, weight, variant, font, align, truncate }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Text, textVariants, type TextProps };\n"],"mappings":";;;;;AASA,MAAM,gBAAA,GAAA,yBAAA,KAAmB,IAAI;CAC3B,UAAU;EAER,MAAM;GACJ,OACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;EACJ;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;GACT,aAAa;GACb,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;GACT,MAAM;EACR;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAqBD,SAAS,KAAK,EACZ,IACA,WACA,MACA,QACA,SACA,MACA,OACA,UACA,GAAG,SACS;CAEZ,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,KAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAM;GAAQ;GAAS;GAAM;GAAO;EAAS,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Text/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/Text/Text.tsx
 const textVariants = cva("", {
 	variants: {

package/dist/primitives/Textarea/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Textarea/Textarea.tsx
-const textareaVariants = (0, require("class-variance-authority").cva)("text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50", {
+const textareaVariants = (0, class_variance_authority.cva)("text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50", {
 	variants: {
 		variant: {
 			default: "border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border",

package/dist/primitives/Textarea/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Textarea (node 16:1745). Chrome matches Input. */\nconst textareaVariants = cva(\n  \"text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      shape: {\n        default: \"rounded-12\",\n        // Figma drew 18px here (off the radius scale, flagged to design); code rounds\n        // to the nearest token step, rounded-16.\n        round: \"rounded-16\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Multi-line text input that auto-grows with its content and supports validation + disabled states. */\nfunction Textarea({\n  className,\n  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  shape,\n  ...props\n}: React.ComponentProps<\"textarea\"> &\n  VariantProps<typeof textareaVariants> & {\n    /** Corner radius: `default` (12px) or `round` (16px). */\n    shape?: VariantProps<typeof textareaVariants>[\"shape\"];\n  }) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ variant, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaVariants };\n"],"mappings":";;;;AAMA,MAAM,oBAAA,qCAAA,EAAA,KACJ,4RACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EACA,OAAO;GACL,SAAS;GAGT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;;AAGA,SAAS,SAAS,EAChB,WAEA,SACA,OACA,GAAG,SAKA;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,iBAAiB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Textarea (node 16:1745). Chrome matches Input. */\nconst textareaVariants = cva(\n  \"text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      shape: {\n        default: \"rounded-12\",\n        // Figma drew 18px here (off the radius scale, flagged to design); code rounds\n        // to the nearest token step, rounded-16.\n        round: \"rounded-16\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Multi-line text input that auto-grows with its content and supports validation + disabled states. */\nfunction Textarea({\n  className,\n  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  shape,\n  ...props\n}: React.ComponentProps<\"textarea\"> &\n  VariantProps<typeof textareaVariants> & {\n    /** Corner radius: `default` (12px) or `round` (16px). */\n    shape?: VariantProps<typeof textareaVariants>[\"shape\"];\n  }) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ variant, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaVariants };\n"],"mappings":";;;;;AAMA,MAAM,oBAAA,GAAA,yBAAA,KACJ,4RACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EACA,OAAO;GACL,SAAS;GAGT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;;AAGA,SAAS,SAAS,EAChB,WAEA,SACA,OACA,GAAG,SAKA;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,iBAAiB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Textarea/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/Textarea/Textarea.tsx
 const textareaVariants = cva("text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50", {
 	variants: {

package/dist/primitives/Toggle/index.cjs

@@ -1,9 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Toggle/Toggle.tsx
-const toggleVariants = (0, require("class-variance-authority").cva)("inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap", {
+const toggleVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap", {
 	variants: {
 		/** Visual style: `default` (transparent/ghost) or `outline` (bordered). */
 		variant: {

package/dist/primitives/Toggle/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["TogglePrimitive","cn"],"sources":["../../../src/primitives/Toggle/Toggle.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Toggle & Toggle Group (274:53016). Active state\n   is bg/interaction/toggle-active; Figma defines no hover state, so hover keeps\n   the subtle ghost tint. */\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap\",\n  {\n    variants: {\n      /** Visual style: `default` (transparent/ghost) or `outline` (bordered). */\n      variant: {\n        default: \"bg-ghost-bg\",\n        outline: \"border border-primary-border bg-ghost-bg\",\n      },\n      /** Control size: `xs` (Mini 24), `sm` (32), `default` (36), or `lg` (40). */\n      size: {\n        xs: \"h-6 px-1 min-w-6\",\n        sm: \"h-8 px-2 min-w-8\",\n        default: \"h-9 px-2 min-w-9\",\n        lg: \"h-10 px-2 min-w-10\",\n      },\n      // Shape (Figma): `default` (8px) and `round` (pill) are standalone\n      // shapes; `left`/`middle`/`right` join into a segmented group, rounding\n      // only the outer edge.\n      shape: {\n        default: \"rounded-8\",\n        round: \"rounded-full\",\n        left: \"rounded-l-8 rounded-r-none\",\n        middle: \"rounded-none\",\n        right: \"rounded-r-8 rounded-l-none\",\n      },\n    },\n    compoundVariants: [\n      // Outlined segments collapse the shared border between adjacent items.\n      { variant: \"outline\", shape: \"middle\", class: \"border-l-0\" },\n      { variant: \"outline\", shape: \"right\", class: \"border-l-0\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** A two-state button that can be toggled on or off, built on Radix Toggle. */\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;;;AASA,MAAM,kBAAA,qCAAA,EAAA,KACJ,2eACA;CACE,UAAU;;EAER,SAAS;GACP,SAAS;GACT,SAAS;EACX;;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAIA,OAAO;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB,CAEhB;EAAE,SAAS;EAAW,OAAO;EAAU,OAAO;CAAa,GAC3D;EAAE,SAAS;EAAW,OAAO;EAAS,OAAO;CAAa,CAC5D;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,OAAO,EACd,WACA,SACA,MACA,OACA,GAAG,SACuF;CAC1F,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["TogglePrimitive","cn"],"sources":["../../../src/primitives/Toggle/Toggle.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Toggle & Toggle Group (274:53016). Active state\n   is bg/interaction/toggle-active; Figma defines no hover state, so hover keeps\n   the subtle ghost tint. */\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap\",\n  {\n    variants: {\n      /** Visual style: `default` (transparent/ghost) or `outline` (bordered). */\n      variant: {\n        default: \"bg-ghost-bg\",\n        outline: \"border border-primary-border bg-ghost-bg\",\n      },\n      /** Control size: `xs` (Mini 24), `sm` (32), `default` (36), or `lg` (40). */\n      size: {\n        xs: \"h-6 px-1 min-w-6\",\n        sm: \"h-8 px-2 min-w-8\",\n        default: \"h-9 px-2 min-w-9\",\n        lg: \"h-10 px-2 min-w-10\",\n      },\n      // Shape (Figma): `default` (8px) and `round` (pill) are standalone\n      // shapes; `left`/`middle`/`right` join into a segmented group, rounding\n      // only the outer edge.\n      shape: {\n        default: \"rounded-8\",\n        round: \"rounded-full\",\n        left: \"rounded-l-8 rounded-r-none\",\n        middle: \"rounded-none\",\n        right: \"rounded-r-8 rounded-l-none\",\n      },\n    },\n    compoundVariants: [\n      // Outlined segments collapse the shared border between adjacent items.\n      { variant: \"outline\", shape: \"middle\", class: \"border-l-0\" },\n      { variant: \"outline\", shape: \"right\", class: \"border-l-0\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** A two-state button that can be toggled on or off, built on Radix Toggle. */\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;;;;AASA,MAAM,kBAAA,GAAA,yBAAA,KACJ,2eACA;CACE,UAAU;;EAER,SAAS;GACP,SAAS;GACT,SAAS;EACX;;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAIA,OAAO;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB,CAEhB;EAAE,SAAS;EAAW,OAAO;EAAU,OAAO;CAAa,GAC3D;EAAE,SAAS;EAAW,OAAO;EAAS,OAAO;CAAa,CAC5D;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,OAAO,EACd,WACA,SACA,MACA,OACA,GAAG,SACuF;CAC1F,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Toggle/index.js

@@ -1,7 +1,7 @@
 import { t as cn } from "../../cn.js";
-import { Toggle as Toggle$1 } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Toggle as Toggle$1 } from "radix-ui";
 //#region src/primitives/Toggle/Toggle.tsx
 const toggleVariants = cva("inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap", {
 	variants: {

package/dist/primitives/ToggleGroup/index.cjs

@@ -4,8 +4,8 @@ const require_cn = require("../../cn.cjs");
 const require_primitives_Toggle_index = require("../Toggle/index.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/ToggleGroup/ToggleGroup.tsx
 const ToggleGroupContext = react.createContext({
 	size: "default",

package/dist/primitives/ToggleGroup/index.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../../cn.js";
 import { toggleVariants } from "../Toggle/index.js";
 import * as React from "react";
-import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 //#region src/primitives/ToggleGroup/ToggleGroup.tsx
 const ToggleGroupContext = React.createContext({
 	size: "default",

package/dist/primitives/Tooltip/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Tooltip/Tooltip.tsx
 /** Provides shared tooltip context (delay/skip timings) to all tooltips inside it. */
 function TooltipProvider({ delayDuration = 0, ...props }) {

package/dist/primitives/Tooltip/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { Tooltip as Tooltip$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "radix-ui";
 //#region src/primitives/Tooltip/Tooltip.tsx
 /** Provides shared tooltip context (delay/skip timings) to all tooltips inside it. */
 function TooltipProvider({ delayDuration = 0, ...props }) {

package/dist/primitives/index.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Sidebar = require("../Sidebar.cjs");
+const require_Icon = require("../Icon.cjs");
 const require_primitives_Accordion_index = require("./Accordion/index.cjs");
 const require_primitives_Alert_index = require("./Alert/index.cjs");
 const require_primitives_Spinner_index = require("./Spinner/index.cjs");
@@ -30,7 +31,6 @@ const require_primitives_Field_index = require("./Field/index.cjs");
 const require_primitives_Form_index = require("./Form/index.cjs");
 const require_primitives_Heading_index = require("./Heading/index.cjs");
 const require_primitives_HoverCard_index = require("./HoverCard/index.cjs");
-const require_Icon = require("../Icon.cjs");
 const require_primitives_InfoBanner_index = require("./InfoBanner/index.cjs");
 const require_primitives_Input_index = require("./Input/index.cjs");
 const require_primitives_Textarea_index = require("./Textarea/index.cjs");

package/dist/primitives/index.js

@@ -1,4 +1,5 @@
 import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../Sidebar.js";
+import { n as ICON_NAMES, t as Icon } from "../Icon.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion/index.js";
 import { Alert, AlertAction, AlertContent, AlertDescription, AlertTitle } from "./Alert/index.js";
 import { Spinner } from "./Spinner/index.js";
@@ -29,7 +30,6 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./Form/index.js";
 import { Heading, headingVariants } from "./Heading/index.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCard/index.js";
-import { n as ICON_NAMES, t as Icon } from "../Icon.js";
 import { InfoBanner, infoBannerVariants } from "./InfoBanner/index.js";
 import { Input, inputVariants } from "./Input/index.js";
 import { Textarea, textareaVariants } from "./Textarea/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/design-system",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,
@@ -123,6 +123,7 @@
     "tokens:components": "node scripts/css-vars-inventory.mjs && node scripts/component-vars-inventory.mjs",
     "tokens:theme-usage": "node scripts/css-vars-inventory.mjs && node scripts/theme-usage-inventory.mjs",
     "styles:copy": "node scripts/copy-styles.mjs",
+    "docs:variants": "node scripts/gen-variant-docs.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "biome check ./src && pnpm lint:dark-variant",
     "lint:dark-variant": "node scripts/check-no-dark-variant.mjs",