@psnext/design-system 1.2.0 → 1.3.0

package/dist/primitives/Button/index.js

@@ -5,15 +5,15 @@ import { Slot } from "radix-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/Button/Button.tsx
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-ring-error aria-invalid:border-destructive", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-			outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+			destructive: "bg-destructive-alpha text-error-bold-foreground hover:bg-destructive-alpha/80 focus-visible:ring-ring-error",
+			outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-			link: "text-primary underline-offset-4 hover:underline"
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-foreground underline-offset-4 hover:underline"
 		},
 		size: {
 			xs: "h-7 gap-1 px-2.5 text-xs has-[>svg]:px-2",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs has-[>svg]:px-2\",\n        sm: \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        lg: \"h-10 px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n      // Default is a pill (Figma); `square` gives the standard rounded-md corner.\n      shape: {\n        default: \"rounded-full\",\n        square: \"rounded-md\",\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":";;;;;;;AAOA,MAAM,iBAAiB,IACrB,skBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;EACR;EAEA,OAAO;GACL,SAAS;GACT,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;;;;;AAeA,MAAM,SAAS,WAA2C,SAAS,OACjE,EACE,WACA,SACA,MACA,OACA,UAAU,OACV,UAAU,OACV,UACA,UACA,GAAG,SAEL,KACA;CAGA,OACE,oBAHW,UAAU,KAAK,OAAO,UAGjC;EACO;EACL,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,UAAU,YAAY;EACtB,GAAI;YAGH,UACC,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,MACxB,QACD,EAAA,CAAA;CAEA,CAAA;AAEV,CAAC"}
+{"version":3,"file":"index.js","names":[],"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\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-ring-error aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive-alpha text-error-bold-foreground hover:bg-destructive-alpha/80 focus-visible:ring-ring-error\",\n        outline:\n          \"border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-foreground underline-offset-4 hover:underline\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs has-[>svg]:px-2\",\n        sm: \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        lg: \"h-10 px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n      // Default is a pill (Figma); `square` gives the standard rounded-md corner.\n      shape: {\n        default: \"rounded-full\",\n        square: \"rounded-md\",\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":";;;;;;;AAOA,MAAM,iBAAiB,IACrB,4hBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;EACR;EAEA,OAAO;GACL,SAAS;GACT,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;;;;;AAeA,MAAM,SAAS,WAA2C,SAAS,OACjE,EACE,WACA,SACA,MACA,OACA,UAAU,OACV,UAAU,OACV,UACA,UACA,GAAG,SAEL,KACA;CAGA,OACE,oBAHW,UAAU,KAAK,OAAO,UAGjC;EACO;EACL,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,UAAU,YAAY;EACtB,GAAI;YAGH,UACC,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,MACxB,QACD,EAAA,CAAA;CAEA,CAAA;AAEV,CAAC"}

package/dist/primitives/ButtonGroup/index.cjs

@@ -24,7 +24,7 @@ function ButtonGroup({ className, orientation, ...props }) {
 /** A non-interactive label/affix segment styled to sit inline with the grouped buttons. */
 function ButtonGroupText({ className, asChild = false, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? radix_ui.Slot.Root : "div", {
-		className: require_cn.cn("flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		className: require_cn.cn("flex items-center gap-2 rounded-lg border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -33,7 +33,7 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Separator_index.Separator, {
 		"data-slot": "button-group-separator",
 		orientation,
-		className: require_cn.cn("relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto", className),
+		className: require_cn.cn("relative m-0! self-stretch bg-border data-[orientation=vertical]:h-auto", className),
 		...props
 	});
 }

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-md [&>[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-md border bg-muted px-4 text-sm font-medium shadow-xs [&_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-input 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,0JACA,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,0EACA,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-md [&>[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-lg border bg-muted px-4 text-sm font-medium shadow-xs [&_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-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,0JACA,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,2EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ButtonGroup/index.js

@@ -24,7 +24,7 @@ function ButtonGroup({ className, orientation, ...props }) {
 /** A non-interactive label/affix segment styled to sit inline with the grouped buttons. */
 function ButtonGroupText({ className, asChild = false, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "div", {
-		className: cn("flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex items-center gap-2 rounded-lg border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -33,7 +33,7 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 	return /* @__PURE__ */ jsx(Separator$1, {
 		"data-slot": "button-group-separator",
 		orientation,
-		className: cn("relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto", className),
+		className: cn("relative m-0! self-stretch bg-border data-[orientation=vertical]:h-auto", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["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-md [&>[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-md border bg-muted px-4 text-sm font-medium shadow-xs [&_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-input data-[orientation=vertical]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":";;;;;;AAMA,MAAM,sBAAsB,IAC1B,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,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WAEA,UAAU,OACV,GAAG,SAIF;CAGD,OACE,oBAHW,UAAU,KAAK,OAAO,OAGjC;EACE,WAAW,GACT,0JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAC5B,WAEA,cAAc,YACd,GAAG,SACsC;CACzC,OACE,oBAACA,aAAD;EACE,aAAU;EACG;EACb,WAAW,GACT,0EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["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-md [&>[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-lg border bg-muted px-4 text-sm font-medium shadow-xs [&_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-border data-[orientation=vertical]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":";;;;;;AAMA,MAAM,sBAAsB,IAC1B,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,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WAEA,UAAU,OACV,GAAG,SAIF;CAGD,OACE,oBAHW,UAAU,KAAK,OAAO,OAGjC;EACE,WAAW,GACT,0JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAC5B,WAEA,cAAc,YACd,GAAG,SACsC;CACzC,OACE,oBAACA,aAAD;EACE,aAAU;EACG;EACb,WAAW,GACT,2EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Calendar/index.cjs

@@ -101,7 +101,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 		"data-range-start": modifiers.range_start,
 		"data-range-end": modifiers.range_end,
 		"data-range-middle": modifiers.range_middle,
-		className: require_cn.cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		className: require_cn.cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
 		...props
 	});
 }

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 = \"ghost\",\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-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\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-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 bg-popover 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-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-2 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-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\"rounded-l-md bg-accent\", defaultClassNames.range_start),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"font-semibold text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\"text-muted-foreground 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\"\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      className={cn(\n        \"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground dark:hover:text-accent-foreground [&>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","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 = \"ghost\",\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-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\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-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 bg-popover 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-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-2 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-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\"rounded-l-md bg-accent\", defaultClassNames.range_start),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"font-semibold text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\"text-muted-foreground 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\"\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      className={cn(\n        \"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground [&>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

@@ -98,7 +98,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 		"data-range-start": modifiers.range_start,
 		"data-range-end": modifiers.range_end,
 		"data-range-middle": modifiers.range_middle,
-		className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
 		...props
 	});
 }

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 = \"ghost\",\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-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\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-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 bg-popover 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-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-2 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-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\"rounded-l-md bg-accent\", defaultClassNames.range_start),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"font-semibold text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\"text-muted-foreground 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\"\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      className={cn(\n        \"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground dark:hover:text-accent-foreground [&>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 { 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 = \"ghost\",\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-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\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-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\"absolute inset-0 bg-popover 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-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label,\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"mt-2 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-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day,\n        ),\n        range_start: cn(\"rounded-l-md bg-accent\", defaultClassNames.range_start),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"font-semibold text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\"text-muted-foreground 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\"\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      className={cn(\n        \"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground [&>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

@@ -5,10 +5,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const cardVariants = (0, require("class-variance-authority").cva)("flex flex-col gap-6 rounded-xl border text-card-foreground", {
 	variants: {
 		variant: {
-			default: "bg-card",
-			glass: "border-transparent backdrop-blur-[var(--glass-blur)]",
+			default: "bg-card shadow-sm",
+			glass: "border-transparent backdrop-blur-glass",
 			brand: "border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground",
-			inverted: "border-transparent bg-foreground text-background"
+			inverted: "border-transparent bg-inverse text-inverse-foreground"
 		},
 		tint: {
 			subtle: "",
@@ -52,7 +52,7 @@ function Card({ className, variant, tint, ...props }) {
 		className: require_cn.cn(cardVariants({
 			variant,
 			tint
-		}), className),
+		}), className, "justify-between"),
 		...props
 	});
 }

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\nconst cardVariants = cva(\"flex flex-col gap-6 rounded-xl border text-card-foreground\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-card\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the --glass-* token.\n      glass: \"border-transparent backdrop-blur-[var(--glass-blur)]\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade).\n      brand:\n        \"border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-foreground text-background\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-[var(--glass-subtle)]\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-[var(--glass-light)]\" },\n    { variant: \"glass\", tint: \"medium\", class: \"bg-[var(--glass-medium)]\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-[var(--glass-heavy)]\" },\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 `bg-card`). */\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.5 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`. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <h4 data-slot=\"card-title\" className={cn(\"leading-none\", className)} {...props} />;\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p data-slot=\"card-description\" className={cn(\"text-muted-foreground\", className)} {...props} />\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: \"justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground\",\n  muted: \"justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground\",\n  card: \"justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground\",\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":";;;;AAKA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,8DAA8D;CACrF,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAGP,OACE;GAGF,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;EACpE;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;CACtE;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,uJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAa,WAAWA,WAAAA,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,aAAU;EAAmB,WAAWA,WAAAA,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;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;CACT,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\nconst cardVariants = cva(\"flex flex-col gap-6 rounded-xl border text-card-foreground\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-card shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the --glass-* token.\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).\n      brand:\n        \"border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-inverse text-inverse-foreground\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-[var(--glass-subtle)]\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-[var(--glass-light)]\" },\n    { variant: \"glass\", tint: \"medium\", class: \"bg-[var(--glass-medium)]\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-[var(--glass-heavy)]\" },\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 `bg-card`). */\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, \"justify-between\")}\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.5 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`. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <h4 data-slot=\"card-title\" className={cn(\"leading-none\", className)} {...props} />;\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p data-slot=\"card-description\" className={cn(\"text-muted-foreground\", className)} {...props} />\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: \"justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground\",\n  muted: \"justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground\",\n  card: \"justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground\",\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":";;;;AAKA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,8DAA8D;CACrF,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAGP,OACE;GAGF,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;EACpE;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;CACtE;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,WAAW,iBAAiB;EAC3E,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,uJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAa,WAAWA,WAAAA,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,aAAU;EAAmB,WAAWA,WAAAA,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;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;CACT,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

@@ -5,10 +5,10 @@ import { cva } from "class-variance-authority";
 const cardVariants = cva("flex flex-col gap-6 rounded-xl border text-card-foreground", {
 	variants: {
 		variant: {
-			default: "bg-card",
-			glass: "border-transparent backdrop-blur-[var(--glass-blur)]",
+			default: "bg-card shadow-sm",
+			glass: "border-transparent backdrop-blur-glass",
 			brand: "border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground",
-			inverted: "border-transparent bg-foreground text-background"
+			inverted: "border-transparent bg-inverse text-inverse-foreground"
 		},
 		tint: {
 			subtle: "",
@@ -52,7 +52,7 @@ function Card({ className, variant, tint, ...props }) {
 		className: cn(cardVariants({
 			variant,
 			tint
-		}), className),
+		}), className, "justify-between"),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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\nconst cardVariants = cva(\"flex flex-col gap-6 rounded-xl border text-card-foreground\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-card\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the --glass-* token.\n      glass: \"border-transparent backdrop-blur-[var(--glass-blur)]\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade).\n      brand:\n        \"border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-foreground text-background\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-[var(--glass-subtle)]\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-[var(--glass-light)]\" },\n    { variant: \"glass\", tint: \"medium\", class: \"bg-[var(--glass-medium)]\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-[var(--glass-heavy)]\" },\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 `bg-card`). */\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.5 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`. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <h4 data-slot=\"card-title\" className={cn(\"leading-none\", className)} {...props} />;\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p data-slot=\"card-description\" className={cn(\"text-muted-foreground\", className)} {...props} />\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: \"justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground\",\n  muted: \"justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground\",\n  card: \"justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground\",\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":";;;;AAKA,MAAM,eAAe,IAAI,8DAA8D;CACrF,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAGP,OACE;GAGF,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;EACpE;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;CACtE;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,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,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,uJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAa,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,KAAD;EAAG,aAAU;EAAmB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EAIV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"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\nconst cardVariants = cva(\"flex flex-col gap-6 rounded-xl border text-card-foreground\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-card shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the --glass-* token.\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).\n      brand:\n        \"border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-inverse text-inverse-foreground\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-[var(--glass-subtle)]\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-[var(--glass-light)]\" },\n    { variant: \"glass\", tint: \"medium\", class: \"bg-[var(--glass-medium)]\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-[var(--glass-heavy)]\" },\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 `bg-card`). */\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, \"justify-between\")}\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.5 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`. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <h4 data-slot=\"card-title\" className={cn(\"leading-none\", className)} {...props} />;\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p data-slot=\"card-description\" className={cn(\"text-muted-foreground\", className)} {...props} />\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: \"justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground\",\n  muted: \"justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground\",\n  card: \"justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground\",\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":";;;;AAKA,MAAM,eAAe,IAAI,8DAA8D;CACrF,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAGP,OACE;GAGF,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;EACpE;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;CACtE;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,WAAW,iBAAiB;EAC3E,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,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,uJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAa,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,KAAD;EAAG,aAAU;EAAmB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EAIV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Chart/index.cjs

@@ -86,7 +86,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 	if (!active || !payload?.length) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_cn.cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+		className: require_cn.cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs shadow-xl", className),
 		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "grid gap-1.5",
 			children: payload.filter((item) => item.type !== "none").map((item, index) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","cn","RechartsPrimitive"],"sources":["../../../src/primitives/Chart/Chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport type { TooltipValueType } from \"recharts\";\n\nimport { cn } from \"@/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\n/** Maps each data key to its display label, optional icon, and color (flat or per-theme). */\nexport type ChartConfig = Record<\n  string,\n  {\n    /** Human-readable label rendered in tooltips and the legend. */\n    label?: React.ReactNode;\n    /** Optional icon component shown alongside the label. */\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\n/** Root chart wrapper: provides the config context, theme CSS variables, and a responsive container. */\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Maps data keys to labels, icons, and colors used across tooltip and legend. */\n  config: ChartConfig;\n  /** Recharts chart element rendered inside the responsive container. */\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n  /** Initial width/height used before the responsive container measures its parent. */\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/** Injects per-chart CSS custom properties (`--color-*`) derived from the config, one block per theme. */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\n/** Recharts Tooltip element; pair with `ChartTooltipContent` for the styled body. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/** Styled tooltip body that resolves labels, colors, and indicators from the chart config. */\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    /** Hides the tooltip's leading label row. */\n    hideLabel?: boolean;\n    /** Hides the per-item color indicator swatch. */\n    hideIndicator?: boolean;\n    /** Visual style of the per-item color indicator. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Config key used to resolve each item's label/color (defaults to its name). */\n    nameKey?: string;\n    /** Config key used to resolve the tooltip's label (defaults to the data key). */\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            },\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\",\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\n/** Recharts Legend element; pair with `ChartLegendContent` for the styled body. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Styled legend body that resolves labels, icons, and colors from the chart config. */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  /** Hides each item's icon, showing only the color swatch. */\n  hideIcon?: boolean;\n  /** Config key used to resolve each item's label/color (defaults to the data key). */\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","cn","RechartsPrimitive"],"sources":["../../../src/primitives/Chart/Chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport type { TooltipValueType } from \"recharts\";\n\nimport { cn } from \"@/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\n/** Maps each data key to its display label, optional icon, and color (flat or per-theme). */\nexport type ChartConfig = Record<\n  string,\n  {\n    /** Human-readable label rendered in tooltips and the legend. */\n    label?: React.ReactNode;\n    /** Optional icon component shown alongside the label. */\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\n/** Root chart wrapper: provides the config context, theme CSS variables, and a responsive container. */\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Maps data keys to labels, icons, and colors used across tooltip and legend. */\n  config: ChartConfig;\n  /** Recharts chart element rendered inside the responsive container. */\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n  /** Initial width/height used before the responsive container measures its parent. */\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/** Injects per-chart CSS custom properties (`--color-*`) derived from the config, one block per theme. */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\n/** Recharts Tooltip element; pair with `ChartTooltipContent` for the styled body. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/** Styled tooltip body that resolves labels, colors, and indicators from the chart config. */\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    /** Hides the tooltip's leading label row. */\n    hideLabel?: boolean;\n    /** Hides the per-item color indicator swatch. */\n    hideIndicator?: boolean;\n    /** Visual style of the per-item color indicator. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Config key used to resolve each item's label/color (defaults to its name). */\n    nameKey?: string;\n    /** Config key used to resolve the tooltip's label (defaults to the data key). */\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs shadow-xl\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            },\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\",\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\n/** Recharts Legend element; pair with `ChartLegendContent` for the styled body. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Styled legend body that resolves labels, icons, and colors from the chart config. */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  /** Hides each item's icon, showing only the color swatch. */\n  hideIcon?: boolean;\n  /** Config key used to resolve each item's label/color (defaults to the data key). */\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}

package/dist/primitives/Chart/index.js

@@ -82,7 +82,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 	if (!active || !payload?.length) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs shadow-xl", className),
 		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
 			className: "grid gap-1.5",
 			children: payload.filter((item) => item.type !== "none").map((item, index) => {