@psnext/design-system 1.1.0 → 1.2.0

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

@@ -0,0 +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"}

package/dist/primitives/ButtonGroup/index.cjs

@@ -0,0 +1,46 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Separator_index = require("../Separator/index.cjs");
+let radix_ui = require("radix-ui");
+let 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", {
+	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"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+/** Groups related buttons into a single attached unit with merged borders and shared corners. */
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: require_cn.cn(buttonGroupVariants({ orientation }), className),
+		...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),
+		...props
+	});
+}
+/** A divider between segments inside a {@link ButtonGroup}, defaulting to a vertical rule. */
+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),
+		...props
+	});
+}
+//#endregion
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupText = ButtonGroupText;
+exports.buttonGroupVariants = buttonGroupVariants;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

package/dist/primitives/ButtonGroup/index.d.cts

@@ -0,0 +1,2 @@
+import { i as buttonGroupVariants, n as ButtonGroupSeparator, r as ButtonGroupText, t as ButtonGroup } from "../../index10.cjs";
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/primitives/ButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+import { i as buttonGroupVariants, n as ButtonGroupSeparator, r as ButtonGroupText, t as ButtonGroup } from "../../index10.js";
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/primitives/ButtonGroup/index.js

@@ -0,0 +1,43 @@
+import { t as cn } from "../../cn.js";
+import { Separator as Separator$1 } from "../Separator/index.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#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", {
+	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"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+/** Groups related buttons into a single attached unit with merged borders and shared corners. */
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: cn(buttonGroupVariants({ orientation }), className),
+		...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),
+		...props
+	});
+}
+/** A divider between segments inside a {@link ButtonGroup}, defaulting to a vertical rule. */
+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),
+		...props
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/dist/primitives/Calendar/index.cjs

@@ -0,0 +1,112 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../Button/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let 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 }) {
+	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),
+		captionLayout,
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: require_cn.cn("w-fit", defaultClassNames.root),
+			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),
+			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),
+			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),
+			hidden: require_cn.cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: require_cn.cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "left") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeftIcon, {
+					className: require_cn.cn("size-4", className),
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, {
+					className: require_cn.cn("size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+					className: require_cn.cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: CalendarDayButton,
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+					...props,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+/** Single day cell button, applying selected/range styling from the day's modifiers. */
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+	const defaultClassNames = (0, react_day_picker.getDefaultClassNames)();
+	const ref = react.useRef(null);
+	react.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+		ref,
+		variant: "ghost",
+		size: "icon",
+		"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 dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+}
+//#endregion
+exports.Calendar = Calendar;
+exports.CalendarDayButton = CalendarDayButton;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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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"}

package/dist/primitives/Calendar/index.d.cts

@@ -0,0 +1,2 @@
+import { n as CalendarDayButton, t as Calendar } from "../../index11.cjs";
+export { Calendar, CalendarDayButton };

package/dist/primitives/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { n as CalendarDayButton, t as Calendar } from "../../index11.js";
+export { Calendar, CalendarDayButton };

package/dist/primitives/Calendar/index.js

@@ -0,0 +1,108 @@
+import { t as cn } from "../../cn.js";
+import { Button, buttonVariants } from "../Button/index.js";
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { 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 }) {
+	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),
+		captionLayout,
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			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),
+			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),
+			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),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: CalendarDayButton,
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+/** Single day cell button, applying selected/range styling from the day's modifiers. */
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		variant: "ghost",
+		size: "icon",
+		"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 dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+}
+//#endregion
+export { Calendar, CalendarDayButton };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

package/dist/primitives/Card/index.cjs

@@ -0,0 +1,128 @@
+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", {
+	variants: {
+		variant: {
+			default: "bg-card",
+			glass: "border-transparent backdrop-blur-[var(--glass-blur)]",
+			brand: "border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground",
+			inverted: "border-transparent bg-foreground text-background"
+		},
+		tint: {
+			subtle: "",
+			light: "",
+			medium: "",
+			heavy: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "glass",
+			tint: "subtle",
+			class: "bg-[var(--glass-subtle)]"
+		},
+		{
+			variant: "glass",
+			tint: "light",
+			class: "bg-[var(--glass-light)]"
+		},
+		{
+			variant: "glass",
+			tint: "medium",
+			class: "bg-[var(--glass-medium)]"
+		},
+		{
+			variant: "glass",
+			tint: "heavy",
+			class: "bg-[var(--glass-heavy)]"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		tint: "light"
+	}
+});
+/** Surface container with composable header/content/footer slots. */
+function Card({ className, variant, tint, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card",
+		"data-variant": variant ?? "default",
+		className: require_cn.cn(cardVariants({
+			variant,
+			tint
+		}), className),
+		...props
+	});
+}
+const cardHeaderAlign = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end"
+};
+/** Top region of a card — holds the title, description, and optional action. */
+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),
+		...props
+	});
+}
+/** Card heading rendered as an `h4`. */
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+		"data-slot": "card-title",
+		className: require_cn.cn("leading-none", className),
+		...props
+	});
+}
+/** Muted supporting text shown beneath the title. */
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		"data-slot": "card-description",
+		className: require_cn.cn("text-muted-foreground", className),
+		...props
+	});
+}
+/** Action slot in the header row, aligned to the end alongside the title. */
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-action",
+		className: require_cn.cn("col-start-2 row-start-1 justify-self-end", className),
+		...props
+	});
+}
+/** Main body region of the card. */
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-content",
+		className: require_cn.cn("px-6 [&:last-child]:pb-6", 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"
+};
+/** Bottom region of the card — typically holds actions or summary text. */
+function CardFooter({ className, tone = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-footer",
+		className: require_cn.cn("flex items-center", cardFooterTone[tone], className),
+		...props
+	});
+}
+//#endregion
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.cardVariants = cardVariants;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

package/dist/primitives/Card/index.d.cts

@@ -0,0 +1,2 @@
+import { a as CardFooter, c as CardTitle, i as CardDescription, l as cardVariants, n as CardAction, o as CardHeader, r as CardContent, s as CardProps, t as Card } from "../../index12.cjs";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardProps, CardTitle, cardVariants };

package/dist/primitives/Card/index.d.ts

@@ -0,0 +1,2 @@
+import { a as CardFooter, c as CardTitle, i as CardDescription, l as cardVariants, n as CardAction, o as CardHeader, r as CardContent, s as CardProps, t as Card } from "../../index12.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardProps, CardTitle, cardVariants };