@psnext/design-system 2.3.0 → 2.4.0

package/dist/primitives/Breadcrumb/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { Slot } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/Breadcrumb/Breadcrumb.tsx
 /** Navigation landmark that wraps a breadcrumb trail (renders a labelled `<nav>`). */
 function Breadcrumb({ ...props }) {
@@ -52,7 +53,7 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 		"aria-hidden": "true",
 		className: cn("[&>svg]:size-3.5", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+		children: children ?? /* @__PURE__ */ jsx(Icon, { as: ChevronRight })
 	});
 }
 /** Collapsed-trail indicator that stands in for omitted middle segments. */
@@ -63,7 +64,10 @@ function BreadcrumbEllipsis({ className, ...props }) {
 		"aria-hidden": "true",
 		className: cn("hover:bg-muted-bg hover:text-primary-txt inline-flex size-5 items-center justify-center rounded-4 px-1 py-0.5 transition-colors", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Icon, {
+			as: MoreHorizontal,
+			className: "size-4"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "More"
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../utils\";\n\n/** Navigation landmark that wraps a breadcrumb trail (renders a labelled `<nav>`). */\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\n/** Ordered list container that lays out the breadcrumb items and separators. */\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-txt flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single segment in the trail; wraps a link, page, or ellipsis. */\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A navigable breadcrumb segment that links to an ancestor route. */\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  /** Render as the passed-in child element (e.g. a router `Link`) instead of an `<a>`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-primary-txt transition-colors\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The current page segment; non-interactive and marked `aria-current=\"page\"`. */\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(\"text-primary-txt font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Visual divider between items; defaults to a chevron, overridable via `children`. */\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\n/** Collapsed-trail indicator that stands in for omitted middle segments. */\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"hover:bg-muted-bg hover:text-primary-txt inline-flex size-5 items-center justify-center rounded-4 px-1 py-0.5 transition-colors\",\n        className,\n      )}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":";;;;;;AAOA,SAAS,WAAW,EAAE,GAAG,SAAsC;CAC7D,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,qFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SAIF;CAGD,OACE,oBAHW,UAAU,KAAK,OAAO,KAGjC;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAqC;CAC1F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;YAEH,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GACT,mIACA,SACF;EACA,GAAI;YARN,CAUE,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA,GACpC,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAU,CAAA,CAChC;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { Icon } from \"../Icon\";\n\n/** Navigation landmark that wraps a breadcrumb trail (renders a labelled `<nav>`). */\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\n/** Ordered list container that lays out the breadcrumb items and separators. */\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-txt flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single segment in the trail; wraps a link, page, or ellipsis. */\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A navigable breadcrumb segment that links to an ancestor route. */\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  /** Render as the passed-in child element (e.g. a router `Link`) instead of an `<a>`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-primary-txt transition-colors\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The current page segment; non-interactive and marked `aria-current=\"page\"`. */\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(\"text-primary-txt font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Visual divider between items; defaults to a chevron, overridable via `children`. */\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <Icon as={ChevronRight} />}\n    </li>\n  );\n}\n\n/** Collapsed-trail indicator that stands in for omitted middle segments. */\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"hover:bg-muted-bg hover:text-primary-txt inline-flex size-5 items-center justify-center rounded-4 px-1 py-0.5 transition-colors\",\n        className,\n      )}\n      {...props}\n    >\n      <Icon as={MoreHorizontal} className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,WAAW,EAAE,GAAG,SAAsC;CAC7D,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,qFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SAIF;CAGD,OACE,oBAHW,UAAU,KAAK,OAAO,KAGjC;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAqC;CAC1F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;YAEH,YAAY,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACpC,CAAA;AAER;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GACT,mIACA,SACF;EACA,GAAI;YARN,CAUE,oBAAC,MAAD;GAAM,IAAI;GAAgB,WAAU;EAAU,CAAA,GAC9C,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAU,CAAA,CAChC;;AAEV"}

package/dist/primitives/Button/index.cjs

@@ -1,11 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 const require_primitives_Spinner_index = require("../Spinner/index.cjs");
+let class_variance_authority = require("class-variance-authority");
 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/Button/Button.tsx
-const buttonVariants = (0, require("class-variance-authority").cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border", {
+const buttonVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border", {
 	variants: {
 		variant: {
 			default: "bg-primary-invert-bg text-primary-invert-txt hover:bg-primary-invert-hover-bg",

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Slot","cn","Spinner"],"sources":["../../../src/primitives/Button/Button.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport { type ComponentProps, forwardRef } from \"react\";\n\nimport { Spinner } from \"@/primitives/Spinner\";\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Button (node 9:1071). Sizes are line-height (24px)\n   plus vertical padding; the 3/6/10px paddings are Figma's \"hacks to fit scale\"\n   values with no spacing token, hence the arbitrary values. */\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary-invert-bg text-primary-invert-txt hover:bg-primary-invert-hover-bg\",\n        destructive:\n          \"bg-danger-bg text-danger-txt hover:bg-danger-bg/80 focus-visible:ring-focus-error\",\n        outline:\n          \"border border-secondary-border bg-outline-bg text-primary-txt hover:bg-outline-hover-bg focus-visible:border-primary-invert-border\",\n        secondary: \"bg-primary-bg text-primary-txt hover:bg-secondary-hover-bg\",\n        ghost: \"bg-ghost-bg text-primary-txt hover:bg-ghost-hover-bg\",\n        link: \"text-primary-txt underline-offset-4 hover:underline\",\n        ai: \"ai-border bg-primary-bg text-brand-700 hover:[--ai-surface:var(--secondary-hover-bg)]\",\n        // Icon Button page (274:37817): destructive icon buttons are ghost-red —\n        // transparent at rest, danger tint on hover, danger icon/label.\n        \"destructive-ghost\":\n          \"bg-ghost-bg text-danger-txt hover:bg-danger-bg focus-visible:ring-focus-error\",\n      },\n      size: {\n        xs: \"h-7.5 py-0.75 px-4 text-xs leading-6\",\n        sm: \"h-9 py-1.5 px-4 text-sm leading-6\",\n        default: \"h-10 py-2 px-4 text-sm leading-6\",\n        lg: \"h-11 py-2.5 px-4 text-sm leading-6\",\n        xl: \"h-12 py-3 px-4 text-base leading-6\",\n        // Icon Button sizes (Figma): Mini 24 / Small 32 / Default 36 / Large 40 / XL 48.\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n        \"icon-xl\": \"size-12\",\n      },\n      // Default is a pill (Figma); `square` gives the standard 6px corner.\n      shape: {\n        default: \"rounded-full\",\n        square: \"rounded-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\ntype ButtonProps = ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    /** Render as the child element (Radix `Slot`) instead of a native `<button>`. */\n    asChild?: boolean;\n    /** Show a spinner and disable the button while an action is in flight. */\n    loading?: boolean;\n  };\n\n/**\n * Clickable button supporting visual variants, sizes, shapes, async loading, and\n * `asChild` composition. Forwards its ref so it can be used as a Radix trigger\n * (`asChild`) for floating overlays (Popover, Tooltip, DropdownMenu, …).\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    shape,\n    asChild = false,\n    loading = false,\n    disabled,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-loading={loading || undefined}\n      className={cn(buttonVariants({ variant, size, shape, className }))}\n      disabled={disabled || loading}\n      {...props}\n    >\n      {/* asChild expects a single child, so only plain buttons get the spinner. */}\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {loading ? <Spinner /> : null}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\n\nexport { Button, buttonVariants, type ButtonProps };\n"],"mappings":";;;;;;;AAUA,MAAM,kBAAA,qCAAA,EAAA,KACJ,ogBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OAAO;GACP,MAAM;GACN,IAAI;GAGJ,qBACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GAEJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;EACb;EAEA,OAAO;GACL,SAAS;GACT,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;;;;;AAeA,MAAM,UAAA,GAAA,MAAA,YAAoD,SAAS,OACjE,EACE,WACA,SACA,MACA,OACA,UAAU,OACV,UAAU,OACV,UACA,UACA,GAAG,SAEL,KACA;CAGA,OACE,iBAAA,GAAA,kBAAA,KAHW,UAAUA,SAAAA,KAAK,OAAO,UAGjC;EACO;EACL,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,WAAWC,WAAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,UAAU,YAAY;EACtB,GAAI;YAGH,UACC,WAEA,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,UAAU,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD,CAAU,CAAA,IAAI,MACxB,QACD,EAAA,CAAA;CAEA,CAAA;AAEV,CAAC"}
+{"version":3,"file":"index.cjs","names":["Slot","cn","Spinner"],"sources":["../../../src/primitives/Button/Button.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport { type ComponentProps, forwardRef } from \"react\";\n\nimport { Spinner } from \"@/primitives/Spinner\";\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Button (node 9:1071). Sizes are line-height (24px)\n   plus vertical padding; the 3/6/10px paddings are Figma's \"hacks to fit scale\"\n   values with no spacing token, hence the arbitrary values. */\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary-invert-bg text-primary-invert-txt hover:bg-primary-invert-hover-bg\",\n        destructive:\n          \"bg-danger-bg text-danger-txt hover:bg-danger-bg/80 focus-visible:ring-focus-error\",\n        outline:\n          \"border border-secondary-border bg-outline-bg text-primary-txt hover:bg-outline-hover-bg focus-visible:border-primary-invert-border\",\n        secondary: \"bg-primary-bg text-primary-txt hover:bg-secondary-hover-bg\",\n        ghost: \"bg-ghost-bg text-primary-txt hover:bg-ghost-hover-bg\",\n        link: \"text-primary-txt underline-offset-4 hover:underline\",\n        ai: \"ai-border bg-primary-bg text-brand-700 hover:[--ai-surface:var(--secondary-hover-bg)]\",\n        // Icon Button page (274:37817): destructive icon buttons are ghost-red —\n        // transparent at rest, danger tint on hover, danger icon/label.\n        \"destructive-ghost\":\n          \"bg-ghost-bg text-danger-txt hover:bg-danger-bg focus-visible:ring-focus-error\",\n      },\n      size: {\n        xs: \"h-7.5 py-0.75 px-4 text-xs leading-6\",\n        sm: \"h-9 py-1.5 px-4 text-sm leading-6\",\n        default: \"h-10 py-2 px-4 text-sm leading-6\",\n        lg: \"h-11 py-2.5 px-4 text-sm leading-6\",\n        xl: \"h-12 py-3 px-4 text-base leading-6\",\n        // Icon Button sizes (Figma): Mini 24 / Small 32 / Default 36 / Large 40 / XL 48.\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n        \"icon-xl\": \"size-12\",\n      },\n      // Default is a pill (Figma); `square` gives the standard 6px corner.\n      shape: {\n        default: \"rounded-full\",\n        square: \"rounded-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\ntype ButtonProps = ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    /** Render as the child element (Radix `Slot`) instead of a native `<button>`. */\n    asChild?: boolean;\n    /** Show a spinner and disable the button while an action is in flight. */\n    loading?: boolean;\n  };\n\n/**\n * Clickable button supporting visual variants, sizes, shapes, async loading, and\n * `asChild` composition. Forwards its ref so it can be used as a Radix trigger\n * (`asChild`) for floating overlays (Popover, Tooltip, DropdownMenu, …).\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    shape,\n    asChild = false,\n    loading = false,\n    disabled,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-loading={loading || undefined}\n      className={cn(buttonVariants({ variant, size, shape, className }))}\n      disabled={disabled || loading}\n      {...props}\n    >\n      {/* asChild expects a single child, so only plain buttons get the spinner. */}\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {loading ? <Spinner /> : null}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\n\nexport { Button, buttonVariants, type ButtonProps };\n"],"mappings":";;;;;;;;AAUA,MAAM,kBAAA,GAAA,yBAAA,KACJ,ogBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OAAO;GACP,MAAM;GACN,IAAI;GAGJ,qBACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GAEJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;EACb;EAEA,OAAO;GACL,SAAS;GACT,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;;;;;AAeA,MAAM,UAAA,GAAA,MAAA,YAAoD,SAAS,OACjE,EACE,WACA,SACA,MACA,OACA,UAAU,OACV,UAAU,OACV,UACA,UACA,GAAG,SAEL,KACA;CAGA,OACE,iBAAA,GAAA,kBAAA,KAHW,UAAUA,SAAAA,KAAK,OAAO,UAGjC;EACO;EACL,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,WAAWC,WAAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,UAAU,YAAY;EACtB,GAAI;YAGH,UACC,WAEA,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,UAAU,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD,CAAU,CAAA,IAAI,MACxB,QACD,EAAA,CAAA;CAEA,CAAA;AAEV,CAAC"}

package/dist/primitives/Button/index.js

@@ -1,9 +1,9 @@
 import { t as cn } from "../../cn.js";
 import { Spinner } from "../Spinner/index.js";
+import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
-import { Slot } from "radix-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
 //#region src/primitives/Button/Button.tsx
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border", {
 	variants: {

package/dist/primitives/ButtonGroup/index.cjs

@@ -1,10 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 const require_primitives_Separator_index = require("../Separator/index.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/ButtonGroup/ButtonGroup.tsx
-const buttonGroupVariants = (0, require("class-variance-authority").cva)("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+const buttonGroupVariants = (0, class_variance_authority.cva)("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
 	variants: { orientation: {
 		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
 		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Slot","Separator"],"sources":["../../../src/primitives/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\n\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\n/** Props for the {@link ButtonGroup} container. */\ntype ButtonGroupProps = React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>;\n\n/** Groups related buttons into a single attached unit with merged borders and shared corners. */\nfunction ButtonGroup({\n  className,\n  /** Lays the group out left-to-right (`horizontal`, default) or stacked (`vertical`). */\n  orientation,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** A non-interactive label/affix segment styled to sit inline with the grouped buttons. */\nfunction ButtonGroupText({\n  className,\n  /** Renders into the child element via Radix `Slot` instead of a wrapping `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Renders into the child element via Radix `Slot` instead of a wrapping `div`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-8 border bg-muted-bg px-4 text-sm font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A divider between segments inside a {@link ButtonGroup}, defaulting to a vertical rule. */\nfunction ButtonGroupSeparator({\n  className,\n  /** Divider direction; defaults to `vertical` to split horizontally-laid buttons. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative m-0! self-stretch bg-primary-border data-[orientation=vertical]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":";;;;;;AAMA,MAAM,uBAAA,qCAAA,EAAA,KACJ,oSACA;CACE,UAAU,EACR,aAAa;EACX,YACE;EACF,UACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,CACF;;AAMA,SAAS,YAAY,EACnB,WAEA,aACA,GAAG,SACgB;CACnB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAWA,WAAAA,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WAEA,UAAU,OACV,GAAG,SAIF;CAGD,OACE,iBAAA,GAAA,kBAAA,KAHW,UAAUC,SAAAA,KAAK,OAAO,OAGjC;EACE,WAAWD,WAAAA,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAC5B,WAEA,cAAc,YACd,GAAG,SACsC;CACzC,OACE,iBAAA,GAAA,kBAAA,KAACE,mCAAAA,WAAD;EACE,aAAU;EACG;EACb,WAAWF,WAAAA,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn","Slot","Separator"],"sources":["../../../src/primitives/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\n\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\n/** Props for the {@link ButtonGroup} container. */\ntype ButtonGroupProps = React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>;\n\n/** Groups related buttons into a single attached unit with merged borders and shared corners. */\nfunction ButtonGroup({\n  className,\n  /** Lays the group out left-to-right (`horizontal`, default) or stacked (`vertical`). */\n  orientation,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** A non-interactive label/affix segment styled to sit inline with the grouped buttons. */\nfunction ButtonGroupText({\n  className,\n  /** Renders into the child element via Radix `Slot` instead of a wrapping `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Renders into the child element via Radix `Slot` instead of a wrapping `div`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-8 border bg-muted-bg px-4 text-sm font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A divider between segments inside a {@link ButtonGroup}, defaulting to a vertical rule. */\nfunction ButtonGroupSeparator({\n  className,\n  /** Divider direction; defaults to `vertical` to split horizontally-laid buttons. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative m-0! self-stretch bg-primary-border data-[orientation=vertical]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":";;;;;;;AAMA,MAAM,uBAAA,GAAA,yBAAA,KACJ,oSACA;CACE,UAAU,EACR,aAAa;EACX,YACE;EACF,UACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,CACF;;AAMA,SAAS,YAAY,EACnB,WAEA,aACA,GAAG,SACgB;CACnB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAWA,WAAAA,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WAEA,UAAU,OACV,GAAG,SAIF;CAGD,OACE,iBAAA,GAAA,kBAAA,KAHW,UAAUC,SAAAA,KAAK,OAAO,OAGjC;EACE,WAAWD,WAAAA,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAC5B,WAEA,cAAc,YACd,GAAG,SACsC;CACzC,OACE,iBAAA,GAAA,kBAAA,KAACE,mCAAAA,WAAD;EACE,aAAU;EACG;EACb,WAAWF,WAAAA,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ButtonGroup/index.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../../cn.js";
 import { Separator as Separator$1 } from "../Separator/index.js";
-import { Slot } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
 //#region src/primitives/ButtonGroup/ButtonGroup.tsx
 const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
 	variants: { orientation: {

package/dist/primitives/Calendar/index.cjs

@@ -1,11 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Button_index = require("../Button/index.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 let react_day_picker = require("react-day-picker");
 //#region src/primitives/Calendar/Calendar.tsx
 /** Date picker calendar built on react-day-picker, themed with the DS Button + tokens. */
@@ -56,18 +57,18 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 					...props
 				});
 			},
-			Chevron: ({ className, orientation, ...props }) => {
-				if (orientation === "left") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeftIcon, {
-					className: require_cn.cn("size-4", className),
-					...props
+			Chevron: ({ className, orientation }) => {
+				if (orientation === "left") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					as: lucide_react.ChevronLeftIcon,
+					className: require_cn.cn("size-4", className)
 				});
-				if (orientation === "right") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, {
-					className: require_cn.cn("size-4", className),
-					...props
+				if (orientation === "right") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					as: lucide_react.ChevronRightIcon,
+					className: require_cn.cn("size-4", className)
 				});
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
-					className: require_cn.cn("size-4", className),
-					...props
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					as: lucide_react.ChevronDownIcon,
+					className: require_cn.cn("size-4", className)
 				});
 			},
 			DayButton: CalendarDayButton,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["DayPicker","cn","buttonVariants","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","React","Button"],"sources":["../../../src/primitives/Calendar/Calendar.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Date picker calendar built on react-day-picker, themed with the DS Button + tokens. */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"outline\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  /** Button variant used for the previous/next navigation controls. */\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-glass-60-bg backdrop-blur-glass p-4 [--cell-size:48px] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent rounded-16\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaultClassNames.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-8 w-full items-center justify-center px-8 text-sm leading-5 font-medium\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-8 w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-8 border border-primary-border shadow-sm has-focus:border-primary-invert-border has-focus:ring-3 has-focus:ring-focus\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex h-8 items-center gap-1 rounded-8 pr-1 pl-0.5 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-txt\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex h-8 flex-1 items-center justify-center rounded-8 text-xs leading-4 font-normal text-muted-txt select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-px flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n        week_number: cn(\n          \"text-xs leading-4 text-muted-txt select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative flex h-12 w-(--cell-size) items-center justify-center p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-full\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-full\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-full\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          \"bg-[linear-gradient(to_right,transparent_50%,var(--muted-bg)_50%)]\",\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn(\"rounded-none bg-muted-bg\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"bg-[linear-gradient(to_right,var(--muted-bg)_50%,transparent_50%)]\",\n          defaultClassNames.range_end,\n        ),\n        today: cn(\"data-[selected=true]:rounded-none\", defaultClassNames.today),\n        outside: cn(\"text-muted-txt aria-selected:text-muted-txt\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-txt opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />;\n          }\n\n          if (orientation === \"right\") {\n            return <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />;\n          }\n\n          return <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />;\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\n/** Single day cell button, applying selected/range styling from the day's modifiers. */\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      data-today={modifiers.today}\n      className={cn(\n        // Figma .Date Picker/Day: 48px cell, 32px circular button; selected and\n        // range endpoints are primary-invert circles, today a muted circle.\n        \"flex size-8 flex-col gap-0 rounded-full p-0 text-sm leading-5 font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-focus data-[today=true]:bg-muted-bg data-[range-end=true]:bg-primary-invert-bg! data-[range-end=true]:text-primary-invert-txt data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-primary-txt data-[range-start=true]:bg-primary-invert-bg! data-[range-start=true]:text-primary-invert-txt data-[selected-single=true]:bg-primary-invert-bg! data-[selected-single=true]:text-primary-invert-txt [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["DayPicker","cn","buttonVariants","Icon","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","React","Button"],"sources":["../../../src/primitives/Calendar/Calendar.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Date picker calendar built on react-day-picker, themed with the DS Button + tokens. */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"outline\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  /** Button variant used for the previous/next navigation controls. */\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-glass-60-bg backdrop-blur-glass p-4 [--cell-size:48px] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent rounded-16\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaultClassNames.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-8 w-full items-center justify-center px-8 text-sm leading-5 font-medium\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-8 w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-8 border border-primary-border shadow-sm has-focus:border-primary-invert-border has-focus:ring-3 has-focus:ring-focus\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex h-8 items-center gap-1 rounded-8 pr-1 pl-0.5 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-txt\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex h-8 flex-1 items-center justify-center rounded-8 text-xs leading-4 font-normal text-muted-txt select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-px flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n        week_number: cn(\n          \"text-xs leading-4 text-muted-txt select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative flex h-12 w-(--cell-size) items-center justify-center p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-full\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-full\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-full\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          \"bg-[linear-gradient(to_right,transparent_50%,var(--muted-bg)_50%)]\",\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn(\"rounded-none bg-muted-bg\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"bg-[linear-gradient(to_right,var(--muted-bg)_50%,transparent_50%)]\",\n          defaultClassNames.range_end,\n        ),\n        today: cn(\"data-[selected=true]:rounded-none\", defaultClassNames.today),\n        outside: cn(\"text-muted-txt aria-selected:text-muted-txt\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-txt opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        // DayPicker's chevron props carry a numeric `size` that collides with\n        // Icon's size scale — only className/orientation are meaningful here.\n        Chevron: ({ className, orientation }) => {\n          if (orientation === \"left\") {\n            return <Icon as={ChevronLeftIcon} className={cn(\"size-4\", className)} />;\n          }\n\n          if (orientation === \"right\") {\n            return <Icon as={ChevronRightIcon} className={cn(\"size-4\", className)} />;\n          }\n\n          return <Icon as={ChevronDownIcon} className={cn(\"size-4\", className)} />;\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\n/** Single day cell button, applying selected/range styling from the day's modifiers. */\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      data-today={modifiers.today}\n      className={cn(\n        // Figma .Date Picker/Day: 48px cell, 32px circular button; selected and\n        // range endpoints are primary-invert circles, today a muted circle.\n        \"flex size-8 flex-col gap-0 rounded-full p-0 text-sm leading-5 font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-focus data-[today=true]:bg-muted-bg data-[range-end=true]:bg-primary-invert-bg! data-[range-end=true]:text-primary-invert-txt data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-primary-txt data-[range-start=true]:bg-primary-invert-bg! data-[range-start=true]:text-primary-invert-txt data-[selected-single=true]:bg-primary-invert-bg! data-[selected-single=true]:text-primary-invert-txt [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}

package/dist/primitives/Calendar/index.js

@@ -1,8 +1,9 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { Button, buttonVariants } from "../Button/index.js";
 import * as React from "react";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 //#region src/primitives/Calendar/Calendar.tsx
 /** Date picker calendar built on react-day-picker, themed with the DS Button + tokens. */
@@ -53,18 +54,18 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 					...props
 				});
 			},
-			Chevron: ({ className, orientation, ...props }) => {
-				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
-					className: cn("size-4", className),
-					...props
+			Chevron: ({ className, orientation }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(Icon, {
+					as: ChevronLeftIcon,
+					className: cn("size-4", className)
 				});
-				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
-					className: cn("size-4", className),
-					...props
+				if (orientation === "right") return /* @__PURE__ */ jsx(Icon, {
+					as: ChevronRightIcon,
+					className: cn("size-4", className)
 				});
-				return /* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: cn("size-4", className),
-					...props
+				return /* @__PURE__ */ jsx(Icon, {
+					as: ChevronDownIcon,
+					className: cn("size-4", className)
 				});
 			},
 			DayButton: CalendarDayButton,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Calendar/Calendar.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Date picker calendar built on react-day-picker, themed with the DS Button + tokens. */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"outline\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  /** Button variant used for the previous/next navigation controls. */\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-glass-60-bg backdrop-blur-glass p-4 [--cell-size:48px] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent rounded-16\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaultClassNames.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-8 w-full items-center justify-center px-8 text-sm leading-5 font-medium\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-8 w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-8 border border-primary-border shadow-sm has-focus:border-primary-invert-border has-focus:ring-3 has-focus:ring-focus\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex h-8 items-center gap-1 rounded-8 pr-1 pl-0.5 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-txt\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex h-8 flex-1 items-center justify-center rounded-8 text-xs leading-4 font-normal text-muted-txt select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-px flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n        week_number: cn(\n          \"text-xs leading-4 text-muted-txt select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative flex h-12 w-(--cell-size) items-center justify-center p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-full\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-full\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-full\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          \"bg-[linear-gradient(to_right,transparent_50%,var(--muted-bg)_50%)]\",\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn(\"rounded-none bg-muted-bg\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"bg-[linear-gradient(to_right,var(--muted-bg)_50%,transparent_50%)]\",\n          defaultClassNames.range_end,\n        ),\n        today: cn(\"data-[selected=true]:rounded-none\", defaultClassNames.today),\n        outside: cn(\"text-muted-txt aria-selected:text-muted-txt\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-txt opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />;\n          }\n\n          if (orientation === \"right\") {\n            return <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />;\n          }\n\n          return <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />;\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\n/** Single day cell button, applying selected/range styling from the day's modifiers. */\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      data-today={modifiers.today}\n      className={cn(\n        // Figma .Date Picker/Day: 48px cell, 32px circular button; selected and\n        // range endpoints are primary-invert circles, today a muted circle.\n        \"flex size-8 flex-col gap-0 rounded-full p-0 text-sm leading-5 font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-focus data-[today=true]:bg-muted-bg data-[range-end=true]:bg-primary-invert-bg! data-[range-end=true]:text-primary-invert-txt data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-primary-txt data-[range-start=true]:bg-primary-invert-bg! data-[range-start=true]:text-primary-invert-txt data-[selected-single=true]:bg-primary-invert-bg! data-[selected-single=true]:text-primary-invert-txt [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Calendar/Calendar.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Date picker calendar built on react-day-picker, themed with the DS Button + tokens. */\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"outline\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  /** Button variant used for the previous/next navigation controls. */\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-glass-60-bg backdrop-blur-glass p-4 [--cell-size:48px] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent rounded-16\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"relative flex flex-col gap-4 md:flex-row\", defaultClassNames.months),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-8 rounded-full p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-8 w-full items-center justify-center px-8 text-sm leading-5 font-medium\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-8 w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-8 border border-primary-border shadow-sm has-focus:border-primary-invert-border has-focus:ring-3 has-focus:ring-focus\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex h-8 items-center gap-1 rounded-8 pr-1 pl-0.5 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-txt\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex h-8 flex-1 items-center justify-center rounded-8 text-xs leading-4 font-normal text-muted-txt select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-px flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n        week_number: cn(\n          \"text-xs leading-4 text-muted-txt select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative flex h-12 w-(--cell-size) items-center justify-center p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-full\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-full\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-full\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          \"bg-[linear-gradient(to_right,transparent_50%,var(--muted-bg)_50%)]\",\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn(\"rounded-none bg-muted-bg\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"bg-[linear-gradient(to_right,var(--muted-bg)_50%,transparent_50%)]\",\n          defaultClassNames.range_end,\n        ),\n        today: cn(\"data-[selected=true]:rounded-none\", defaultClassNames.today),\n        outside: cn(\"text-muted-txt aria-selected:text-muted-txt\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-txt opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        // DayPicker's chevron props carry a numeric `size` that collides with\n        // Icon's size scale — only className/orientation are meaningful here.\n        Chevron: ({ className, orientation }) => {\n          if (orientation === \"left\") {\n            return <Icon as={ChevronLeftIcon} className={cn(\"size-4\", className)} />;\n          }\n\n          if (orientation === \"right\") {\n            return <Icon as={ChevronRightIcon} className={cn(\"size-4\", className)} />;\n          }\n\n          return <Icon as={ChevronDownIcon} className={cn(\"size-4\", className)} />;\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\n/** Single day cell button, applying selected/range styling from the day's modifiers. */\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      data-today={modifiers.today}\n      className={cn(\n        // Figma .Date Picker/Day: 48px cell, 32px circular button; selected and\n        // range endpoints are primary-invert circles, today a muted circle.\n        \"flex size-8 flex-col gap-0 rounded-full p-0 text-sm leading-5 font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-focus data-[today=true]:bg-muted-bg data-[range-end=true]:bg-primary-invert-bg! data-[range-end=true]:text-primary-invert-txt data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-primary-txt data-[range-start=true]:bg-primary-invert-bg! data-[range-start=true]:text-primary-invert-txt data-[selected-single=true]:bg-primary-invert-bg! data-[selected-single=true]:text-primary-invert-txt [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}

package/dist/primitives/Card/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/Card/Card.tsx
-const cardVariants = (0, require("class-variance-authority").cva)("flex flex-col justify-between gap-6 rounded-8 border text-primary-txt", {
+const cardVariants = (0, class_variance_authority.cva)("flex flex-col justify-between gap-6 rounded-8 border text-primary-txt", {
 	variants: {
 		variant: {
 			default: "bg-glass-none-bg shadow-sm",

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Card/Card.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 → Card (288:122714): glass-none surface,\n   border/primary, radius-8, shadow-sm, 24px padding/gaps. */\nconst cardVariants = cva(\"flex flex-col justify-between gap-6 rounded-8 border text-primary-txt\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-glass-none-bg shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the glass-*-bg step.\n      glass: \"border-transparent backdrop-blur-glass\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade). Uses the\n      // theme-layer stops so it does NOT flip in dark mode (matches pre-swap look).\n      brand:\n        \"border-transparent bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))] text-white\",\n      // AI affordance: gradient ring around the normal surface (accessible —\n      // a full ai-gradient background fails contrast on the gray end).\n      ai: \"ai-border [--ai-surface:var(--glass-none-bg)]\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-primary-invert-bg text-primary-invert-txt\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-glass-20-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    // No 0.5 step exists in the new glass tokens — medium maps to 40 until\n    // design adds one (flagged).\n    { variant: \"glass\", tint: \"medium\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-glass-60-bg backdrop-blur-glass\" },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    tint: \"light\",\n  },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & {\n    /** Surface treatment of the card. Default `default` (solid surface). */\n    variant?: VariantProps<typeof cardVariants>[\"variant\"];\n    /** Glass opacity step — only applies to `variant=\"glass\"`. Default `light`. */\n    tint?: VariantProps<typeof cardVariants>[\"tint\"];\n  };\n\n/** Surface container with composable header/content/footer slots. */\nfunction Card({ className, variant, tint, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      className={cn(cardVariants({ variant, tint }), className)}\n      {...props}\n    />\n  );\n}\n\n// Vertical alignment of the header's items (title/description vs. the action).\nconst cardHeaderAlign = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n} as const;\n\n/** Top region of a card — holds the title, description, and optional action. */\nfunction CardHeader({\n  className,\n  align = \"center\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Vertical alignment of the header items. Default `center`. */\n  align?: keyof typeof cardHeaderAlign;\n}) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        cardHeaderAlign[align],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Card heading rendered as an `h4`. Figma binds the body font (Inter Semibold\n    16/24), so we override the base heading styles explicitly. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <h4\n      data-slot=\"card-title\"\n      className={cn(\"font-sans text-base leading-6 font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Action slot in the header row, aligned to the end alongside the title. */\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      // Sits in row 1 alongside the title (not spanning rows) and has no `self-*`,\n      // so it shares the title's row and follows CardHeader's `align` — the title\n      // and action then truly centre against each other regardless of height.\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main body region of the card. */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 [&:last-child]:pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n// Footer fill. `default` is transparent (the usual footer); `brand`/`muted`\n// render a full-width tinted band with the action centred — pair with\n// `<Card className=\"overflow-hidden\">` so the band clips to the card radius.\nconst cardFooterTone = {\n  default: \"px-6 pb-6 [.border-t]:pt-6\",\n  // Brand band = the light brand tint pair (brand-200 surface, brand-800 text).\n  brand: \"justify-center rounded-b-8 bg-brand-200 px-6 py-3 text-brand-800\",\n  muted: \"justify-center rounded-b-8 bg-muted-bg px-6 py-3 text-muted-txt\",\n  card: \"justify-center rounded-b-8 bg-glass-none-bg px-6 py-3 text-primary-txt\",\n} as const;\n\n/** Bottom region of the card — typically holds actions or summary text. */\nfunction CardFooter({\n  className,\n  tone = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Footer fill. `brand`/`muted` render a full-width tinted band. */\n  tone?: keyof typeof cardFooterTone;\n}) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", cardFooterTone[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardVariants,\n  type CardProps,\n};\n"],"mappings":";;;;AAOA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,yEAAyE;CAChG,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAIP,OACE;GAGF,IAAI;GAGJ,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;EAG/E;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;CACjF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;AAGA,SAAS,WAAW,EAClB,WACA,QAAQ,UACR,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,qJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;AAIA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,+CAA+C,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EAIV,WAAWA,WAAAA,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CAET,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Card/Card.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 → Card (288:122714): glass-none surface,\n   border/primary, radius-8, shadow-sm, 24px padding/gaps. */\nconst cardVariants = cva(\"flex flex-col justify-between gap-6 rounded-8 border text-primary-txt\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-glass-none-bg shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the glass-*-bg step.\n      glass: \"border-transparent backdrop-blur-glass\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade). Uses the\n      // theme-layer stops so it does NOT flip in dark mode (matches pre-swap look).\n      brand:\n        \"border-transparent bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))] text-white\",\n      // AI affordance: gradient ring around the normal surface (accessible —\n      // a full ai-gradient background fails contrast on the gray end).\n      ai: \"ai-border [--ai-surface:var(--glass-none-bg)]\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-primary-invert-bg text-primary-invert-txt\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-glass-20-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    // No 0.5 step exists in the new glass tokens — medium maps to 40 until\n    // design adds one (flagged).\n    { variant: \"glass\", tint: \"medium\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-glass-60-bg backdrop-blur-glass\" },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    tint: \"light\",\n  },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & {\n    /** Surface treatment of the card. Default `default` (solid surface). */\n    variant?: VariantProps<typeof cardVariants>[\"variant\"];\n    /** Glass opacity step — only applies to `variant=\"glass\"`. Default `light`. */\n    tint?: VariantProps<typeof cardVariants>[\"tint\"];\n  };\n\n/** Surface container with composable header/content/footer slots. */\nfunction Card({ className, variant, tint, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      className={cn(cardVariants({ variant, tint }), className)}\n      {...props}\n    />\n  );\n}\n\n// Vertical alignment of the header's items (title/description vs. the action).\nconst cardHeaderAlign = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n} as const;\n\n/** Top region of a card — holds the title, description, and optional action. */\nfunction CardHeader({\n  className,\n  align = \"center\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Vertical alignment of the header items. Default `center`. */\n  align?: keyof typeof cardHeaderAlign;\n}) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        cardHeaderAlign[align],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Card heading rendered as an `h4`. Figma binds the body font (Inter Semibold\n    16/24), so we override the base heading styles explicitly. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <h4\n      data-slot=\"card-title\"\n      className={cn(\"font-sans text-base leading-6 font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Action slot in the header row, aligned to the end alongside the title. */\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      // Sits in row 1 alongside the title (not spanning rows) and has no `self-*`,\n      // so it shares the title's row and follows CardHeader's `align` — the title\n      // and action then truly centre against each other regardless of height.\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main body region of the card. */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 [&:last-child]:pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n// Footer fill. `default` is transparent (the usual footer); `brand`/`muted`\n// render a full-width tinted band with the action centred — pair with\n// `<Card className=\"overflow-hidden\">` so the band clips to the card radius.\nconst cardFooterTone = {\n  default: \"px-6 pb-6 [.border-t]:pt-6\",\n  // Brand band = the light brand tint pair (brand-200 surface, brand-800 text).\n  brand: \"justify-center rounded-b-8 bg-brand-200 px-6 py-3 text-brand-800\",\n  muted: \"justify-center rounded-b-8 bg-muted-bg px-6 py-3 text-muted-txt\",\n  card: \"justify-center rounded-b-8 bg-glass-none-bg px-6 py-3 text-primary-txt\",\n} as const;\n\n/** Bottom region of the card — typically holds actions or summary text. */\nfunction CardFooter({\n  className,\n  tone = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Footer fill. `brand`/`muted` render a full-width tinted band. */\n  tone?: keyof typeof cardFooterTone;\n}) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", cardFooterTone[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardVariants,\n  type CardProps,\n};\n"],"mappings":";;;;;AAOA,MAAM,gBAAA,GAAA,yBAAA,KAAmB,yEAAyE;CAChG,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAIP,OACE;GAGF,IAAI;GAGJ,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;EAG/E;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;CACjF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;AAGA,SAAS,WAAW,EAClB,WACA,QAAQ,UACR,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,qJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;AAIA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,+CAA+C,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EAIV,WAAWA,WAAAA,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CAET,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Card/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/Card/Card.tsx
 const cardVariants = cva("flex flex-col justify-between gap-6 rounded-8 border text-primary-txt", {
 	variants: {

package/dist/primitives/Carousel/index.cjs

@@ -1,11 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Button_index = require("../Button/index.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 let embla_carousel_react = require("embla-carousel-react");
 embla_carousel_react = require_chunk.__toESM(embla_carousel_react);
 //#region src/primitives/Carousel/Carousel.tsx
@@ -113,7 +114,7 @@ function CarouselPrevious({ className, variant = "outline", size = "icon", ...pr
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.ArrowLeft }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "Previous slide"
 		})]
@@ -130,7 +131,7 @@ function CarouselNext({ className, variant = "outline", size = "icon", ...props
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.ArrowRight }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "Next slide"
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","cn","Button","ArrowLeft","ArrowRight"],"sources":["../../../src/primitives/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  /** Embla carousel options (loop, align, dragFree, etc.). */\n  opts?: CarouselOptions;\n  /** Embla plugins (e.g. Autoplay) to extend the carousel behaviour. */\n  plugins?: CarouselPlugin;\n  /** Scroll axis of the carousel. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Receives the Embla API instance once initialised, for external control. */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** Scroll viewport that lays out the slides along the carousel's axis. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A single slide within `CarouselContent`. */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Button that scrolls to the previous slide; auto-disables at the start. */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-13 -translate-y-1/2\"\n          : \"-top-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Button that scrolls to the next slide; auto-disables at the end. */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-13 -translate-y-1/2\"\n          : \"-bottom-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","cn","Button","Icon","ArrowLeft","ArrowRight"],"sources":["../../../src/primitives/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  /** Embla carousel options (loop, align, dragFree, etc.). */\n  opts?: CarouselOptions;\n  /** Embla plugins (e.g. Autoplay) to extend the carousel behaviour. */\n  plugins?: CarouselPlugin;\n  /** Scroll axis of the carousel. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Receives the Embla API instance once initialised, for external control. */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** Scroll viewport that lays out the slides along the carousel's axis. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A single slide within `CarouselContent`. */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Button that scrolls to the previous slide; auto-disables at the start. */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-13 -translate-y-1/2\"\n          : \"-top-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <Icon as={ArrowLeft} />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Button that scrolls to the next slide; auto-disables at the end. */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-13 -translate-y-1/2\"\n          : \"-bottom-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <Icon as={ArrowRight} />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}

package/dist/primitives/Carousel/index.js

@@ -1,8 +1,9 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { Button } from "../Button/index.js";
 import * as React from "react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 import useEmblaCarousel from "embla-carousel-react";
 //#region src/primitives/Carousel/Carousel.tsx
 const CarouselContext = React.createContext(null);
@@ -109,7 +110,7 @@ function CarouselPrevious({ className, variant = "outline", size = "icon", ...pr
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
-		children: [/* @__PURE__ */ jsx(ArrowLeft, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Icon, { as: ArrowLeft }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Previous slide"
 		})]
@@ -126,7 +127,7 @@ function CarouselNext({ className, variant = "outline", size = "icon", ...props
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,
-		children: [/* @__PURE__ */ jsx(ArrowRight, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Icon, { as: ArrowRight }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Next slide"
 		})]