@psnext/design-system 1.5.1 → 2.1.0

package/dist/primitives/Button/index.js

@@ -5,26 +5,33 @@ 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-ring-error aria-invalid:border-destructive", {
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			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",
-			link: "text-foreground underline-offset-4 hover:underline"
+			default: "bg-primary-invert-bg text-primary-invert-txt hover:bg-primary-invert-hover-bg",
+			destructive: "bg-danger-bg text-danger-txt hover:bg-danger-bg/80 focus-visible:ring-focus-error",
+			outline: "border border-secondary-border bg-outline-bg text-primary-txt hover:bg-outline-hover-bg focus-visible:border-primary-invert-border",
+			secondary: "bg-primary-bg text-primary-txt hover:bg-secondary-hover-bg",
+			ghost: "bg-ghost-bg text-primary-txt hover:bg-ghost-hover-bg",
+			link: "text-primary-txt underline-offset-4 hover:underline",
+			ai: "ai-border bg-primary-bg text-brand-700 hover:[--ai-surface:var(--secondary-hover-bg)]",
+			"destructive-ghost": "bg-ghost-bg text-danger-txt hover:bg-danger-bg focus-visible:ring-focus-error"
 		},
 		size: {
-			xs: "h-7 gap-1 px-2.5 text-xs has-[>svg]:px-2",
-			sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
-			default: "h-9 px-4 py-2 has-[>svg]:px-3",
-			lg: "h-10 px-6 has-[>svg]:px-4",
-			icon: "size-9"
+			xs: "h-7.5 py-0.75 px-4 text-xs leading-6",
+			sm: "h-9 py-1.5 px-4 text-sm leading-6",
+			default: "h-10 py-2 px-4 text-sm leading-6",
+			lg: "h-11 py-2.5 px-4 text-sm leading-6",
+			xl: "h-12 py-3 px-4 text-base leading-6",
+			icon: "size-9",
+			"icon-xs": "size-6",
+			"icon-sm": "size-8",
+			"icon-lg": "size-10",
+			"icon-xl": "size-12"
 		},
 		shape: {
 			default: "rounded-full",
-			square: "rounded-md"
+			square: "rounded-6"
 		}
 	},
 	defaultVariants: {

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-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"}
+{"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\n/* Figma: PS AI Helix – Core → Button (node 9:1071). Sizes are line-height (24px)\n   plus vertical padding; the 3/6/10px paddings are Figma's \"hacks to fit scale\"\n   values with no spacing token, hence the arbitrary values. */\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap font-heading font-medium cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-focus focus-visible:ring-3 aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary-invert-bg text-primary-invert-txt hover:bg-primary-invert-hover-bg\",\n        destructive:\n          \"bg-danger-bg text-danger-txt hover:bg-danger-bg/80 focus-visible:ring-focus-error\",\n        outline:\n          \"border border-secondary-border bg-outline-bg text-primary-txt hover:bg-outline-hover-bg focus-visible:border-primary-invert-border\",\n        secondary: \"bg-primary-bg text-primary-txt hover:bg-secondary-hover-bg\",\n        ghost: \"bg-ghost-bg text-primary-txt hover:bg-ghost-hover-bg\",\n        link: \"text-primary-txt underline-offset-4 hover:underline\",\n        ai: \"ai-border bg-primary-bg text-brand-700 hover:[--ai-surface:var(--secondary-hover-bg)]\",\n        // Icon Button page (274:37817): destructive icon buttons are ghost-red —\n        // transparent at rest, danger tint on hover, danger icon/label.\n        \"destructive-ghost\":\n          \"bg-ghost-bg text-danger-txt hover:bg-danger-bg focus-visible:ring-focus-error\",\n      },\n      size: {\n        xs: \"h-7.5 py-0.75 px-4 text-xs leading-6\",\n        sm: \"h-9 py-1.5 px-4 text-sm leading-6\",\n        default: \"h-10 py-2 px-4 text-sm leading-6\",\n        lg: \"h-11 py-2.5 px-4 text-sm leading-6\",\n        xl: \"h-12 py-3 px-4 text-base leading-6\",\n        // Icon Button sizes (Figma): Mini 24 / Small 32 / Default 36 / Large 40 / XL 48.\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n        \"icon-xl\": \"size-12\",\n      },\n      // Default is a pill (Figma); `square` gives the standard 6px corner.\n      shape: {\n        default: \"rounded-full\",\n        square: \"rounded-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\ntype ButtonProps = ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    /** Render as the child element (Radix `Slot`) instead of a native `<button>`. */\n    asChild?: boolean;\n    /** Show a spinner and disable the button while an action is in flight. */\n    loading?: boolean;\n  };\n\n/**\n * Clickable button supporting visual variants, sizes, shapes, async loading, and\n * `asChild` composition. Forwards its ref so it can be used as a Radix trigger\n * (`asChild`) for floating overlays (Popover, Tooltip, DropdownMenu, …).\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    shape,\n    asChild = false,\n    loading = false,\n    disabled,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-loading={loading || undefined}\n      className={cn(buttonVariants({ variant, size, shape, className }))}\n      disabled={disabled || loading}\n      {...props}\n    >\n      {/* asChild expects a single child, so only plain buttons get the spinner. */}\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {loading ? <Spinner /> : null}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\n\nexport { Button, buttonVariants, type ButtonProps };\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,IACrB,ogBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OAAO;GACP,MAAM;GACN,IAAI;GAGJ,qBACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GAEJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;EACb;EAEA,OAAO;GACL,SAAS;GACT,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;;;;;AAeA,MAAM,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

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

package/dist/primitives/ButtonGroup/index.js

@@ -4,7 +4,7 @@ import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/ButtonGroup/ButtonGroup.tsx
-const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
 	variants: { orientation: {
 		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
 		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
@@ -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-lg 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-8 border bg-muted-bg px-4 text-sm font-medium shadow-sm [&_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-border data-[orientation=vertical]:h-auto", className),
+		className: cn("relative m-0! self-stretch bg-primary-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-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"}
+{"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-12 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\n/** Props for the {@link ButtonGroup} container. */\ntype ButtonGroupProps = React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>;\n\n/** Groups related buttons into a single attached unit with merged borders and shared corners. */\nfunction ButtonGroup({\n  className,\n  /** Lays the group out left-to-right (`horizontal`, default) or stacked (`vertical`). */\n  orientation,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** A non-interactive label/affix segment styled to sit inline with the grouped buttons. */\nfunction ButtonGroupText({\n  className,\n  /** Renders into the child element via Radix `Slot` instead of a wrapping `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Renders into the child element via Radix `Slot` instead of a wrapping `div`. */\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-8 border bg-muted-bg px-4 text-sm font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A divider between segments inside a {@link ButtonGroup}, defaulting to a vertical rule. */\nfunction ButtonGroupSeparator({\n  className,\n  /** Divider direction; defaults to `vertical` to split horizontally-laid buttons. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative m-0! self-stretch bg-primary-border data-[orientation=vertical]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":";;;;;;AAMA,MAAM,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,4JACA,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,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Calendar/index.cjs

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

package/dist/primitives/Calendar/index.js

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

package/dist/primitives/Card/index.cjs

@@ -2,13 +2,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Card/Card.tsx
-const cardVariants = (0, require("class-variance-authority").cva)("flex flex-col gap-6 rounded-xl border text-card-foreground", {
+const cardVariants = (0, require("class-variance-authority").cva)("flex flex-col justify-between gap-6 rounded-8 border text-primary-txt", {
 	variants: {
 		variant: {
-			default: "bg-card shadow-sm",
+			default: "bg-glass-none-bg 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-inverse text-inverse-foreground"
+			brand: "border-transparent bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))] text-white",
+			ai: "ai-border [--ai-surface:var(--glass-none-bg)]",
+			inverted: "border-transparent bg-primary-invert-bg text-primary-invert-txt"
 		},
 		tint: {
 			subtle: "",
@@ -21,22 +22,22 @@ const cardVariants = (0, require("class-variance-authority").cva)("flex flex-col
 		{
 			variant: "glass",
 			tint: "subtle",
-			class: "bg-[var(--glass-subtle)]"
+			class: "bg-glass-20-bg backdrop-blur-glass"
 		},
 		{
 			variant: "glass",
 			tint: "light",
-			class: "bg-[var(--glass-light)]"
+			class: "bg-glass-40-bg backdrop-blur-glass"
 		},
 		{
 			variant: "glass",
 			tint: "medium",
-			class: "bg-[var(--glass-medium)]"
+			class: "bg-glass-40-bg backdrop-blur-glass"
 		},
 		{
 			variant: "glass",
 			tint: "heavy",
-			class: "bg-[var(--glass-heavy)]"
+			class: "bg-glass-60-bg backdrop-blur-glass"
 		}
 	],
 	defaultVariants: {
@@ -52,7 +53,7 @@ function Card({ className, variant, tint, ...props }) {
 		className: require_cn.cn(cardVariants({
 			variant,
 			tint
-		}), className, "justify-between"),
+		}), className),
 		...props
 	});
 }
@@ -65,15 +66,16 @@ const cardHeaderAlign = {
 function CardHeader({ className, align = "center", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "card-header",
-		className: require_cn.cn("@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", cardHeaderAlign[align], className),
+		className: require_cn.cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", cardHeaderAlign[align], className),
 		...props
 	});
 }
-/** Card heading rendered as an `h4`. */
+/** Card heading rendered as an `h4`. Figma binds the body font (Inter Semibold
+16/24), so we override the base heading styles explicitly. */
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 		"data-slot": "card-title",
-		className: require_cn.cn("leading-none", className),
+		className: require_cn.cn("font-sans text-base leading-6 font-semibold", className),
 		...props
 	});
 }
@@ -81,7 +83,7 @@ function CardTitle({ className, ...props }) {
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		"data-slot": "card-description",
-		className: require_cn.cn("text-muted-foreground", className),
+		className: require_cn.cn("text-sm leading-5 text-muted-txt", className),
 		...props
 	});
 }
@@ -103,9 +105,9 @@ function CardContent({ className, ...props }) {
 }
 const cardFooterTone = {
 	default: "px-6 pb-6 [.border-t]:pt-6",
-	brand: "justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground",
-	muted: "justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground",
-	card: "justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground"
+	brand: "justify-center rounded-b-8 bg-brand-200 px-6 py-3 text-brand-800",
+	muted: "justify-center rounded-b-8 bg-muted-bg px-6 py-3 text-muted-txt",
+	card: "justify-center rounded-b-8 bg-glass-none-bg px-6 py-3 text-primary-txt"
 };
 /** Bottom region of the card — typically holds actions or summary text. */
 function CardFooter({ className, tone = "default", ...props }) {