@epilot/spark-ui 0.20.0 → 0.21.0

package/dist/components/card.cjs

@@ -7,16 +7,16 @@ react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/card.tsx
 const cardVariants = (0, class_variance_authority.cva)("relative flex w-full flex-col gap-1 py-3", {
 	variants: { variant: {
-		ambient: (0, cnfast.cn)(require_lib_container_chrome.containerChrome.ambient, require_lib_container_chrome.containerPaddingX.ambient),
-		soft: (0, cnfast.cn)(require_lib_container_chrome.containerChrome.soft, require_lib_container_chrome.containerPaddingX.soft),
-		surface: (0, cnfast.cn)(require_lib_container_chrome.containerChrome.surface, require_lib_container_chrome.containerPaddingX.surface),
-		outline: (0, cnfast.cn)(require_lib_container_chrome.containerChrome.outline, require_lib_container_chrome.containerPaddingX.outline),
-		ghost: (0, cnfast.cn)(require_lib_container_chrome.containerChrome.ghost, require_lib_container_chrome.containerPaddingX.ghost),
-		solid: (0, cnfast.cn)(require_lib_container_chrome.containerChrome.solid, require_lib_container_chrome.containerPaddingX.solid)
+		ambient: (0, cn.cn)(require_lib_container_chrome.containerChrome.ambient, require_lib_container_chrome.containerPaddingX.ambient),
+		soft: (0, cn.cn)(require_lib_container_chrome.containerChrome.soft, require_lib_container_chrome.containerPaddingX.soft),
+		surface: (0, cn.cn)(require_lib_container_chrome.containerChrome.surface, require_lib_container_chrome.containerPaddingX.surface),
+		outline: (0, cn.cn)(require_lib_container_chrome.containerChrome.outline, require_lib_container_chrome.containerPaddingX.outline),
+		ghost: (0, cn.cn)(require_lib_container_chrome.containerChrome.ghost, require_lib_container_chrome.containerPaddingX.ghost),
+		solid: (0, cn.cn)(require_lib_container_chrome.containerChrome.solid, require_lib_container_chrome.containerPaddingX.solid)
 	} },
 	defaultVariants: { variant: "ambient" }
 });
@@ -29,9 +29,9 @@ const Card = react.forwardRef(({ className, variant, color, radius = "lg", eleva
 		props: {
 			"data-slot": "card",
 			"data-variant": variant,
-			"data-card-color": color === "accent" ? "accent" : void 0,
+			"data-card-color": color,
 			"data-elevated": elevated ? "" : void 0,
-			className: (0, cnfast.cn)(cardVariants({ variant }), require_lib_container_chrome.radiusClasses[radius], elevated && "bg-(--spark-elevated) [background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] shadow-(--spark-card-shadow,var(--spark-shadow-1))", interactive && require_lib_container_chrome.containerInteractiveClasses(resolved, elevated), className),
+			className: (0, cn.cn)(cardVariants({ variant }), require_lib_container_chrome.radiusClasses[radius], elevated && "bg-(--spark-elevated) [background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] shadow-(--spark-card-shadow,var(--spark-shadow-1))", interactive && require_lib_container_chrome.containerInteractiveClasses(resolved, elevated), className),
 			ref,
 			...props
 		}
@@ -39,43 +39,43 @@ const Card = react.forwardRef(({ className, variant, color, radius = "lg", eleva
 });
 Card.displayName = "Card";
 const CardHeader = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: (0, cnfast.cn)("flex items-center gap-4", className),
+	className: (0, cn.cn)("flex items-center gap-4", className),
 	ref,
 	...props
 }));
 CardHeader.displayName = "CardHeader";
 const CardIcon = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: (0, cnfast.cn)("flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))", className),
+	className: (0, cn.cn)("flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))", className),
 	ref,
 	...props
 }));
 CardIcon.displayName = "CardIcon";
 const CardTitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-	className: (0, cnfast.cn)("text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))", className),
+	className: (0, cn.cn)("text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))", className),
 	ref,
 	...props
 }));
 CardTitle.displayName = "CardTitle";
 const CardDescription = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-	className: (0, cnfast.cn)("text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))", className),
+	className: (0, cn.cn)("text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))", className),
 	ref,
 	...props
 }));
 CardDescription.displayName = "CardDescription";
 const CardContent = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: (0, cnfast.cn)("", className),
+	className: (0, cn.cn)("", className),
 	ref,
 	...props
 }));
 CardContent.displayName = "CardContent";
 const CardFooter = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: (0, cnfast.cn)("flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))", className),
+	className: (0, cn.cn)("flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))", className),
 	ref,
 	...props
 }));
 CardFooter.displayName = "CardFooter";
 const CardSkeleton = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	className: (0, cnfast.cn)("relative flex w-full items-center gap-4 rounded-lg bg-spark-a3 p-4 opacity-80", className),
+	className: (0, cn.cn)("relative flex w-full items-center gap-4 rounded-lg bg-spark-a3 p-4 opacity-80", className),
 	ref,
 	...props,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/dist/components/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","names":["containerChrome","containerPaddingX","React","radiusClasses","containerInteractiveClasses"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingX,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype CardRadius = ContainerRadius\n\nconst cardVariants = cva('relative flex w-full flex-col gap-1 py-3', {\n  variants: {\n    variant: {\n      ambient: cn(containerChrome.ambient, containerPaddingX.ambient),\n      soft: cn(containerChrome.soft, containerPaddingX.soft),\n      surface: cn(containerChrome.surface, containerPaddingX.surface),\n      outline: cn(containerChrome.outline, containerPaddingX.outline),\n      ghost: cn(containerChrome.ghost, containerPaddingX.ghost),\n      solid: cn(containerChrome.solid, containerPaddingX.solid),\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: CardRadius\n  /**\n   * Lift the card off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n  /**\n   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant, color, radius = 'lg', elevated, render, ...props },\n    ref,\n  ) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n        ref,\n        ...props,\n      },\n    })\n  },\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-lg bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps, CardRadius }\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,gBAAA,GAAA,yBAAA,KAAmB,4CAA4C;CACnE,UAAU,EACR,SAAS;EACP,UAAA,GAAA,OAAA,IAAYA,6BAAAA,gBAAgB,SAASC,6BAAAA,kBAAkB,OAAO;EAC9D,OAAA,GAAA,OAAA,IAASD,6BAAAA,gBAAgB,MAAMC,6BAAAA,kBAAkB,IAAI;EACrD,UAAA,GAAA,OAAA,IAAYD,6BAAAA,gBAAgB,SAASC,6BAAAA,kBAAkB,OAAO;EAC9D,UAAA,GAAA,OAAA,IAAYD,6BAAAA,gBAAgB,SAASC,6BAAAA,kBAAkB,OAAO;EAC9D,QAAA,GAAA,OAAA,IAAUD,6BAAAA,gBAAgB,OAAOC,6BAAAA,kBAAkB,KAAK;EACxD,QAAA,GAAA,OAAA,IAAUD,6BAAAA,gBAAgB,OAAOC,6BAAAA,kBAAkB,KAAK;CAC1D,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AA0BD,MAAM,OAAOC,MAAM,YAEf,EAAE,WAAW,SAAS,OAAO,SAAS,MAAM,UAAU,QAAQ,GAAG,SACjE,QACG;CACH,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,YAAA,GAAA,OAAA,IACE,aAAa,EAAE,QAAQ,CAAC,GACxBC,6BAAAA,cAAc,SACd,YAAA,kLACA,eAAeC,6BAAAA,4BAA4B,UAAU,QAAQ,GAC7D,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaF,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,MAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,OAAA,IACE,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACE,YAAA,GAAA,OAAA,IACE,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,YAAA,GAAA,OAAA,IACE,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAK,YAAA,GAAA,OAAA,IAAc,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,OAAA,IACE,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,MAAC,OAAD;CACE,YAAA,GAAA,OAAA,IACE,iFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}
+{"version":3,"file":"card.cjs","names":["containerChrome","containerPaddingX","React","radiusClasses","containerInteractiveClasses"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingX,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype CardRadius = ContainerRadius\n\nconst cardVariants = cva('relative flex w-full flex-col gap-1 py-3', {\n  variants: {\n    variant: {\n      ambient: cn(containerChrome.ambient, containerPaddingX.ambient),\n      soft: cn(containerChrome.soft, containerPaddingX.soft),\n      surface: cn(containerChrome.surface, containerPaddingX.surface),\n      outline: cn(containerChrome.outline, containerPaddingX.outline),\n      ghost: cn(containerChrome.ghost, containerPaddingX.ghost),\n      solid: cn(containerChrome.solid, containerPaddingX.solid),\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: CardRadius\n  /**\n   * Lift the card off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n  /**\n   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant, color, radius = 'lg', elevated, render, ...props },\n    ref,\n  ) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n        ref,\n        ...props,\n      },\n    })\n  },\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-lg bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps, CardRadius }\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,gBAAA,GAAA,yBAAA,KAAmB,4CAA4C;CACnE,UAAU,EACR,SAAS;EACP,UAAA,GAAA,GAAA,IAAYA,6BAAAA,gBAAgB,SAASC,6BAAAA,kBAAkB,OAAO;EAC9D,OAAA,GAAA,GAAA,IAASD,6BAAAA,gBAAgB,MAAMC,6BAAAA,kBAAkB,IAAI;EACrD,UAAA,GAAA,GAAA,IAAYD,6BAAAA,gBAAgB,SAASC,6BAAAA,kBAAkB,OAAO;EAC9D,UAAA,GAAA,GAAA,IAAYD,6BAAAA,gBAAgB,SAASC,6BAAAA,kBAAkB,OAAO;EAC9D,QAAA,GAAA,GAAA,IAAUD,6BAAAA,gBAAgB,OAAOC,6BAAAA,kBAAkB,KAAK;EACxD,QAAA,GAAA,GAAA,IAAUD,6BAAAA,gBAAgB,OAAOC,6BAAAA,kBAAkB,KAAK;CAC1D,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AA0BD,MAAM,OAAOC,MAAM,YAEf,EAAE,WAAW,SAAS,OAAO,SAAS,MAAM,UAAU,QAAQ,GAAG,SACjE,QACG;CACH,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB;GACnB,iBAAiB,WAAW,KAAK,KAAA;GACjC,YAAA,GAAA,GAAA,IACE,aAAa,EAAE,QAAQ,CAAC,GACxBC,6BAAAA,cAAc,SACd,YAAA,kLACA,eAAeC,6BAAAA,4BAA4B,UAAU,QAAQ,GAC7D,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaF,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,MAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,GAAA,IACE,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACE,YAAA,GAAA,GAAA,IACE,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,YAAA,GAAA,GAAA,IACE,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAK,YAAA,GAAA,GAAA,IAAc,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,GAAA,IACE,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,MAAC,OAAD;CACE,YAAA,GAAA,GAAA,IACE,iFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}

package/dist/components/card.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { containerChrome, containerInteractiveClasses, containerPaddingX, radiusClasses } from "../lib/container-chrome.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
@@ -26,7 +26,7 @@ const Card = React$1.forwardRef(({ className, variant, color, radius = "lg", ele
 		props: {
 			"data-slot": "card",
 			"data-variant": variant,
-			"data-card-color": color === "accent" ? "accent" : void 0,
+			"data-card-color": color,
 			"data-elevated": elevated ? "" : void 0,
 			className: cn(cardVariants({ variant }), radiusClasses[radius], elevated && "bg-(--spark-elevated) [background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] shadow-(--spark-card-shadow,var(--spark-shadow-1))", interactive && containerInteractiveClasses(resolved, elevated), className),
 			ref,

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["React"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingX,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype CardRadius = ContainerRadius\n\nconst cardVariants = cva('relative flex w-full flex-col gap-1 py-3', {\n  variants: {\n    variant: {\n      ambient: cn(containerChrome.ambient, containerPaddingX.ambient),\n      soft: cn(containerChrome.soft, containerPaddingX.soft),\n      surface: cn(containerChrome.surface, containerPaddingX.surface),\n      outline: cn(containerChrome.outline, containerPaddingX.outline),\n      ghost: cn(containerChrome.ghost, containerPaddingX.ghost),\n      solid: cn(containerChrome.solid, containerPaddingX.solid),\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: CardRadius\n  /**\n   * Lift the card off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n  /**\n   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant, color, radius = 'lg', elevated, render, ...props },\n    ref,\n  ) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n        ref,\n        ...props,\n      },\n    })\n  },\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-lg bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps, CardRadius }\n"],"mappings":";;;;;;;;AAgBA,MAAM,eAAe,IAAI,4CAA4C;CACnE,UAAU,EACR,SAAS;EACP,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,MAAM,GAAG,gBAAgB,MAAM,kBAAkB,IAAI;EACrD,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;EACxD,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;CAC1D,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AA0BD,MAAM,OAAOA,QAAM,YAEf,EAAE,WAAW,SAAS,OAAO,SAAS,MAAM,UAAU,QAAQ,GAAG,SACjE,QACG;CACH,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,WAAW,GACT,aAAa,EAAE,QAAQ,CAAC,GACxB,cAAc,SACd,YAAA,kLACA,eAAe,4BAA4B,UAAU,QAAQ,GAC7D,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,QAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACE,WAAW,GACT,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACE,WAAW,GACT,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,QAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAW,GAAG,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,qBAAC,OAAD;CACE,WAAW,GACT,iFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}
+{"version":3,"file":"card.js","names":["React"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingX,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype CardRadius = ContainerRadius\n\nconst cardVariants = cva('relative flex w-full flex-col gap-1 py-3', {\n  variants: {\n    variant: {\n      ambient: cn(containerChrome.ambient, containerPaddingX.ambient),\n      soft: cn(containerChrome.soft, containerPaddingX.soft),\n      surface: cn(containerChrome.surface, containerPaddingX.surface),\n      outline: cn(containerChrome.outline, containerPaddingX.outline),\n      ghost: cn(containerChrome.ghost, containerPaddingX.ghost),\n      solid: cn(containerChrome.solid, containerPaddingX.solid),\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: CardRadius\n  /**\n   * Lift the card off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n  /**\n   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant, color, radius = 'lg', elevated, render, ...props },\n    ref,\n  ) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n        ref,\n        ...props,\n      },\n    })\n  },\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-lg bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps, CardRadius }\n"],"mappings":";;;;;;;;AAgBA,MAAM,eAAe,IAAI,4CAA4C;CACnE,UAAU,EACR,SAAS;EACP,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,MAAM,GAAG,gBAAgB,MAAM,kBAAkB,IAAI;EACrD,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,SAAS,GAAG,gBAAgB,SAAS,kBAAkB,OAAO;EAC9D,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;EACxD,OAAO,GAAG,gBAAgB,OAAO,kBAAkB,KAAK;CAC1D,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AA0BD,MAAM,OAAOA,QAAM,YAEf,EAAE,WAAW,SAAS,OAAO,SAAS,MAAM,UAAU,QAAQ,GAAG,SACjE,QACG;CACH,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB;GACnB,iBAAiB,WAAW,KAAK,KAAA;GACjC,WAAW,GACT,aAAa,EAAE,QAAQ,CAAC,GACxB,cAAc,SACd,YAAA,kLACA,eAAe,4BAA4B,UAAU,QAAQ,GAC7D,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,QAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACE,WAAW,GACT,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACE,WAAW,GACT,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,QAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAW,GAAG,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,qBAAC,OAAD;CACE,WAAW,GACT,iFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}

package/dist/components/chart.cjs

@@ -5,7 +5,7 @@ const require_components_button = require("./button.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/chart.tsx
 function ChartZoomResetButton({ label, onReset }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
@@ -74,7 +74,7 @@ function clampTooltipPosition({ anchorX, anchorY, width, height, tipWidth, tipHe
 function ChartTooltipCard({ label, rows, className }) {
 	if (rows.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, cnfast.cn)("grid min-w-40 gap-1.5 rounded-lg border border-gray-a6 bg-gray-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3", className),
+		className: (0, cn.cn)("grid min-w-40 gap-1.5 rounded-lg border border-gray-a6 bg-gray-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3", className),
 		children: [label !== void 0 && label !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "font-medium text-gray",
 			children: label

package/dist/components/chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chart.cjs","names":["Button"],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    color?: string\n  }\n>\n\nexport interface ChartTooltipRow {\n  key: string\n  label: React.ReactNode\n  /** CSS color value for the legend swatch (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n  /** Swatch shape: `dot` (default) for solid series, `dashed-line` for dashed ones. */\n  marker?: 'dot' | 'dashed-line'\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\n}\n\ninterface ChartZoomResetButtonProps {\n  label: string\n  onReset: () => void\n}\n\nexport function ChartZoomResetButton({\n  label,\n  onReset,\n}: ChartZoomResetButtonProps) {\n  return (\n    <Button\n      className=\"absolute top-2 right-2 z-20 h-11 bg-gray-1 text-gray hover:bg-gray-2\"\n      color=\"neutral\"\n      onClick={onReset}\n      styleVariant=\"surface\"\n      type=\"button\"\n    >\n      {label}\n    </Button>\n  )\n}\n\n/**\n * Tracks an element's rendered size via ResizeObserver. The element must stay\n * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref\n * is attached when the observer is set up.\n */\nexport function useMeasuredSize<T extends HTMLElement>() {\n  const ref = useRef<T>(null)\n  const [size, setSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setSize({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return [ref, size] as const\n}\n\ninterface ClampTooltipArgs {\n  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */\n  anchorX: number\n  anchorY: number\n  /** Chart bounds (px). */\n  width: number\n  height: number\n  /** Measured tooltip size (px). */\n  tipWidth: number\n  tipHeight: number\n  /** Gap between the anchor and the tooltip. */\n  gap?: number\n  /** Minimum distance kept from every chart edge. */\n  pad?: number\n  /**\n   * `above` (default): centred above the anchor, flipped below if it would clip\n   * the top — good for bars. `beside`: offset to the side of the anchor so it\n   * never sits on top of the hovered point/line — good for line/area charts.\n   */\n  placement?: 'above' | 'beside'\n}\n\n/**\n * Positions a tooltip relative to an anchor while keeping it fully inside the\n * chart: clamped on every edge, flipped above/below or left/right as needed.\n */\nexport function clampTooltipPosition({\n  anchorX,\n  anchorY,\n  width,\n  height,\n  tipWidth,\n  tipHeight,\n  gap = 12,\n  pad = 8,\n  placement = 'above',\n}: ClampTooltipArgs): { left: number; top: number } {\n  const maxLeft = Math.max(pad, width - tipWidth - pad)\n  const maxTop = Math.max(pad, height - tipHeight - pad)\n\n  if (placement === 'beside') {\n    // Prefer the right of the anchor; flip to the left if it would overflow.\n    const right = anchorX + gap\n    const left =\n      right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth\n    return {\n      left: Math.min(Math.max(left, pad), maxLeft),\n      top: Math.min(Math.max(anchorY, pad), maxTop),\n    }\n  }\n\n  const above = anchorY - gap - tipHeight\n  const desiredTop = above >= pad ? above : anchorY + gap\n  return {\n    left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),\n    top: Math.min(Math.max(desiredTop, pad), maxTop),\n  }\n}\n\n/**\n * Card-style multi-series tooltip body: an optional header plus one\n * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart\n * components so every chart shares the same tooltip look.\n */\nexport function ChartTooltipCard({\n  label,\n  rows,\n  className,\n}: ChartTooltipCardProps) {\n  if (rows.length === 0) return null\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-40 gap-1.5 rounded-lg border border-gray-a6 bg-gray-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3',\n        className,\n      )}\n    >\n      {label !== undefined && label !== null && (\n        <div className=\"font-medium text-gray\">{label}</div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {rows.map((row) => (\n          <div\n            key={row.key}\n            className=\"flex items-center justify-between gap-4\"\n          >\n            <span className=\"flex items-center gap-1.5 text-gray-light\">\n              {row.marker === 'dashed-line' ? (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                  style={{ borderColor: row.color }}\n                />\n              ) : (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: row.color }}\n                />\n              )}\n              {row.label}\n            </span>\n            <span className=\"font-medium whitespace-nowrap text-gray tabular-nums\">\n              {row.value}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,qBAAqB,EACnC,OACA,WAC4B;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,WAAU;EACV,OAAM;EACN,SAAS;EACT,cAAa;EACb,MAAK;YAEJ;CACK,CAAA;AAEZ;;;;;;AAOA,SAAgB,kBAAyC;CACvD,MAAM,OAAA,GAAA,MAAA,QAAgB,IAAI;CAC1B,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CAExD,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,OAAO;GACZ,QAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;GAC5B,CAAC;EACH,CAAC;EAED,eAAe,QAAQ,OAAO;EAC9B,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,KAAK,IAAI;AACnB;;;;;AA4BA,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,GAAG;CACpD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,GAAG;CAErD,IAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;EAC5D,OAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG,OAAO;GAC3C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG,MAAM;EAC9C;CACF;CAEA,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;CACpD,OAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,GAAG,GAAG,OAAO;EAC7D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,GAAG,GAAG,MAAM;CACjD;AACF;;;;;;AAOA,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;CACxB,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,+GACA,SACF;YAJF,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aAAyB;EAAW,CAAA,GAErD,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,iBAAA,GAAA,kBAAA,MAAC,QAAD;KAAM,WAAU;eAAhB,CACG,IAAI,WAAW,gBACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,aAAa,IAAI,MAAM;KACjC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,MAAM;KACrC,CAAA,GAEF,IAAI,KACD;QACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,IAAI;IACD,CAAA,CACH;MAtBE,IAAI,GAsBN,CACN;EACE,CAAA,CACF;;AAET"}
+{"version":3,"file":"chart.cjs","names":["Button"],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    color?: string\n  }\n>\n\nexport interface ChartTooltipRow {\n  key: string\n  label: React.ReactNode\n  /** CSS color value for the legend swatch (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n  /** Swatch shape: `dot` (default) for solid series, `dashed-line` for dashed ones. */\n  marker?: 'dot' | 'dashed-line'\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\n}\n\ninterface ChartZoomResetButtonProps {\n  label: string\n  onReset: () => void\n}\n\nexport function ChartZoomResetButton({\n  label,\n  onReset,\n}: ChartZoomResetButtonProps) {\n  return (\n    <Button\n      className=\"absolute top-2 right-2 z-20 h-11 bg-gray-1 text-gray hover:bg-gray-2\"\n      color=\"neutral\"\n      onClick={onReset}\n      styleVariant=\"surface\"\n      type=\"button\"\n    >\n      {label}\n    </Button>\n  )\n}\n\n/**\n * Tracks an element's rendered size via ResizeObserver. The element must stay\n * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref\n * is attached when the observer is set up.\n */\nexport function useMeasuredSize<T extends HTMLElement>() {\n  const ref = useRef<T>(null)\n  const [size, setSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setSize({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return [ref, size] as const\n}\n\ninterface ClampTooltipArgs {\n  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */\n  anchorX: number\n  anchorY: number\n  /** Chart bounds (px). */\n  width: number\n  height: number\n  /** Measured tooltip size (px). */\n  tipWidth: number\n  tipHeight: number\n  /** Gap between the anchor and the tooltip. */\n  gap?: number\n  /** Minimum distance kept from every chart edge. */\n  pad?: number\n  /**\n   * `above` (default): centred above the anchor, flipped below if it would clip\n   * the top — good for bars. `beside`: offset to the side of the anchor so it\n   * never sits on top of the hovered point/line — good for line/area charts.\n   */\n  placement?: 'above' | 'beside'\n}\n\n/**\n * Positions a tooltip relative to an anchor while keeping it fully inside the\n * chart: clamped on every edge, flipped above/below or left/right as needed.\n */\nexport function clampTooltipPosition({\n  anchorX,\n  anchorY,\n  width,\n  height,\n  tipWidth,\n  tipHeight,\n  gap = 12,\n  pad = 8,\n  placement = 'above',\n}: ClampTooltipArgs): { left: number; top: number } {\n  const maxLeft = Math.max(pad, width - tipWidth - pad)\n  const maxTop = Math.max(pad, height - tipHeight - pad)\n\n  if (placement === 'beside') {\n    // Prefer the right of the anchor; flip to the left if it would overflow.\n    const right = anchorX + gap\n    const left =\n      right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth\n    return {\n      left: Math.min(Math.max(left, pad), maxLeft),\n      top: Math.min(Math.max(anchorY, pad), maxTop),\n    }\n  }\n\n  const above = anchorY - gap - tipHeight\n  const desiredTop = above >= pad ? above : anchorY + gap\n  return {\n    left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),\n    top: Math.min(Math.max(desiredTop, pad), maxTop),\n  }\n}\n\n/**\n * Card-style multi-series tooltip body: an optional header plus one\n * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart\n * components so every chart shares the same tooltip look.\n */\nexport function ChartTooltipCard({\n  label,\n  rows,\n  className,\n}: ChartTooltipCardProps) {\n  if (rows.length === 0) return null\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-40 gap-1.5 rounded-lg border border-gray-a6 bg-gray-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3',\n        className,\n      )}\n    >\n      {label !== undefined && label !== null && (\n        <div className=\"font-medium text-gray\">{label}</div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {rows.map((row) => (\n          <div\n            key={row.key}\n            className=\"flex items-center justify-between gap-4\"\n          >\n            <span className=\"flex items-center gap-1.5 text-gray-light\">\n              {row.marker === 'dashed-line' ? (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                  style={{ borderColor: row.color }}\n                />\n              ) : (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: row.color }}\n                />\n              )}\n              {row.label}\n            </span>\n            <span className=\"font-medium whitespace-nowrap text-gray tabular-nums\">\n              {row.value}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,qBAAqB,EACnC,OACA,WAC4B;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,WAAU;EACV,OAAM;EACN,SAAS;EACT,cAAa;EACb,MAAK;YAEJ;CACK,CAAA;AAEZ;;;;;;AAOA,SAAgB,kBAAyC;CACvD,MAAM,OAAA,GAAA,MAAA,QAAgB,IAAI;CAC1B,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CAExD,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,OAAO;GACZ,QAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;GAC5B,CAAC;EACH,CAAC;EAED,eAAe,QAAQ,OAAO;EAC9B,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,KAAK,IAAI;AACnB;;;;;AA4BA,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,GAAG;CACpD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,GAAG;CAErD,IAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;EAC5D,OAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG,OAAO;GAC3C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG,MAAM;EAC9C;CACF;CAEA,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;CACpD,OAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,GAAG,GAAG,OAAO;EAC7D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,GAAG,GAAG,MAAM;CACjD;AACF;;;;;;AAOA,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;CACxB,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,GAAA,IACE,+GACA,SACF;YAJF,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aAAyB;EAAW,CAAA,GAErD,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,iBAAA,GAAA,kBAAA,MAAC,QAAD;KAAM,WAAU;eAAhB,CACG,IAAI,WAAW,gBACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,aAAa,IAAI,MAAM;KACjC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,MAAM;KACrC,CAAA,GAEF,IAAI,KACD;QACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,IAAI;IACD,CAAA,CACH;MAtBE,IAAI,GAsBN,CACN;EACE,CAAA,CACF;;AAET"}

package/dist/components/checkbox.cjs

@@ -6,7 +6,7 @@ let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/checkbox.tsx
 const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, render, nativeButton, ...props }, ref) => {
 	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
@@ -16,7 +16,7 @@ const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered
 		"data-accent-color": dataAccentColor,
 		nativeButton: nativeButton ?? render === void 0,
 		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
-		className: (0, cnfast.cn)("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-md),40%)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--color-primary)) data-checked:bg-(--spark-style-bg,var(--color-primary))", "data-indeterminate:border-(--spark-style-border,var(--color-primary)) data-indeterminate:bg-(--spark-style-bg,var(--color-primary))", className),
+		className: (0, cn.cn)("peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-md),40%)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--color-primary)) data-checked:bg-(--spark-style-bg,var(--color-primary))", "data-indeterminate:border-(--spark-style-border,var(--color-primary)) data-indeterminate:bg-(--spark-style-bg,var(--color-primary))", className),
 		ref,
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_checkbox.Checkbox.Indicator, {

package/dist/components/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":["React","accentByColor","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n  /**\n   * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n   * area). Accepted for back-compat but ignored.\n   */\n  size?: 'default' | 'large'\n  /**\n   * @deprecated The checkbox is always bordered now. Accepted for back-compat\n   * but ignored.\n   */\n  bordered?: boolean\n  styleVariant?: SparkStyle\n  color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size: _size,\n      bordered: _bordered,\n      styleVariant,\n      color,\n      render,\n      nativeButton,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n    const dataAccentColor = color ? accentByColor[color] : undefined\n\n    return (\n      <CheckboxPrimitive.Root\n        data-style={dataStyle}\n        data-accent-color={dataAccentColor}\n        // a native button owns the caller's `id`; on Base UI's default <span> the\n        // `id` lands on the hidden input and the control gets a generated one\n        nativeButton={nativeButton ?? render === undefined}\n        render={render ?? <button />}\n        className={cn(\n          // p-0 defends the 24px box against the UA button padding when the\n          // consumer's CSS has no Tailwind preflight\n          'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n          // both overlays are reserved as layout, so neither can bleed into a scroller;\n          // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n          \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n          'rounded-[min(var(--spark-rounded-md),40%)]',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n          'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft',\n          'data-checked:border-(--spark-style-border,var(--color-primary)) data-checked:bg-(--spark-style-bg,var(--color-primary))',\n          'data-indeterminate:border-(--spark-style-border,var(--color-primary)) data-indeterminate:bg-(--spark-style-bg,var(--color-primary))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n          {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n          <svg\n            aria-hidden=\"true\"\n            className=\"hidden size-5 group-data-checked:block\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n              d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n              pathLength={1}\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.5}\n            />\n          </svg>\n          <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n  },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,WAAWA,MAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,QACA,cACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,0OAGA,qIACA,8CACA,iFACA,6DACA,iFACA,2HACA,uIACA,SACF;EACK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;IACd,CAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,oIAAqI,CAAA,CAC1H;;CACP,CAAA;AAE5B,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"checkbox.cjs","names":["React","accentByColor","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n  /**\n   * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n   * area). Accepted for back-compat but ignored.\n   */\n  size?: 'default' | 'large'\n  /**\n   * @deprecated The checkbox is always bordered now. Accepted for back-compat\n   * but ignored.\n   */\n  bordered?: boolean\n  styleVariant?: SparkStyle\n  color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size: _size,\n      bordered: _bordered,\n      styleVariant,\n      color,\n      render,\n      nativeButton,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n    const dataAccentColor = color ? accentByColor[color] : undefined\n\n    return (\n      <CheckboxPrimitive.Root\n        data-style={dataStyle}\n        data-accent-color={dataAccentColor}\n        // a native button owns the caller's `id`; on Base UI's default <span> the\n        // `id` lands on the hidden input and the control gets a generated one\n        nativeButton={nativeButton ?? render === undefined}\n        render={render ?? <button />}\n        className={cn(\n          // p-0 defends the 24px box against the UA button padding when the\n          // consumer's CSS has no Tailwind preflight\n          'peer touch-target relative my-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) p-0 transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n          // both overlays are reserved as layout, so neither can bleed into a scroller;\n          // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n          \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n          'rounded-[min(var(--spark-rounded-md),40%)]',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n          'border-(--spark-style-idle-border,var(--color-accent-ui)) bg-base-accent-soft',\n          'data-checked:border-(--spark-style-border,var(--color-primary)) data-checked:bg-(--spark-style-bg,var(--color-primary))',\n          'data-indeterminate:border-(--spark-style-border,var(--color-primary)) data-indeterminate:bg-(--spark-style-bg,var(--color-primary))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n          {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n          <svg\n            aria-hidden=\"true\"\n            className=\"hidden size-5 group-data-checked:block\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n              d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n              pathLength={1}\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.5}\n            />\n          </svg>\n          <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n  },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,WAAWA,MAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,QACA,cACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IAGE,0OAGA,qIACA,8CACA,iFACA,6DACA,iFACA,2HACA,uIACA,SACF;EACK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;IACd,CAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,oIAAqI,CAAA,CAC1H;;CACP,CAAA;AAE5B,CACF;AAEA,SAAS,cAAc"}

package/dist/components/checkbox.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";

package/dist/components/circular-gauge.cjs

@@ -4,7 +4,7 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/circular-gauge.tsx
 const TRACK_TONE_CLASSES = {
 	success: "stroke-success-soft",
@@ -27,7 +27,7 @@ const CircularGauge = ({ className, value, max = 100, tone = "accent", size = 44
 	const offset = circumference * (1 - clamped / max);
 	const percent = Math.round(clamped / max * 100);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, cnfast.cn)("relative inline-flex shrink-0", className),
+		className: (0, cn.cn)("relative inline-flex shrink-0", className),
 		style: {
 			width: size,
 			height: size
@@ -60,7 +60,7 @@ const CircularGauge = ({ className, value, max = 100, tone = "accent", size = 44
 				strokeLinecap: "round",
 				strokeDasharray: circumference,
 				strokeDashoffset: offset,
-				className: (0, cnfast.cn)("transition-[stroke-dashoffset] duration-300", INDICATOR_TONE_CLASSES[tone])
+				className: (0, cn.cn)("transition-[stroke-dashoffset] duration-300", INDICATOR_TONE_CLASSES[tone])
 			})]
 		}), children !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "absolute inset-0 flex items-center justify-center text-[11px] leading-none font-semibold tabular-nums",

package/dist/components/circular-gauge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"circular-gauge.cjs","names":[],"sources":["../../src/components/circular-gauge.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst TRACK_TONE_CLASSES: Record<Tone, string> = {\n  success: 'stroke-success-soft',\n  warning: 'stroke-warning-soft',\n  error: 'stroke-error-soft',\n  accent: 'stroke-primary-soft',\n  neutral: 'stroke-base-gray-soft',\n}\n\nconst INDICATOR_TONE_CLASSES: Record<Tone, string> = {\n  // solid ramp, not `-active`: keeps the ring in step with EntityCardState's dot\n  success: 'stroke-base-success-solid',\n  warning: 'stroke-base-warning-solid',\n  error: 'stroke-base-error-solid',\n  accent: 'stroke-primary',\n  neutral: 'stroke-gray',\n}\n\n/**\n * Consumers should pass an `aria-label` to name the metric the gauge represents\n * (e.g. \"Battery\"); `aria-valuetext` defaults to the value as a percentage.\n */\nexport interface CircularGaugeProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /** Current value (0–max). */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Tone color for the indicator/track pair. Default: \"accent\" */\n  tone?: Tone\n  /** Diameter in pixels. Default: 44 */\n  size?: number\n  /** Stroke thickness in pixels. Default: 4 */\n  strokeWidth?: number\n  /** Optional content rendered centered inside the gauge (e.g. percentage, icon). */\n  children?: React.ReactNode\n}\n\nconst CircularGauge = ({\n  className,\n  value,\n  max = 100,\n  tone = 'accent',\n  size = 44,\n  strokeWidth = 4,\n  children,\n  ...rest\n}: CircularGaugeProps) => {\n  const clamped = Math.min(Math.max(value, 0), max)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference * (1 - clamped / max)\n  const percent = Math.round((clamped / max) * 100)\n\n  return (\n    <div\n      className={cn('relative inline-flex shrink-0', className)}\n      style={{ width: size, height: size }}\n      role=\"meter\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-valuetext={`${percent}%`}\n      {...rest}\n    >\n      <svg\n        className=\"size-full -rotate-90\"\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          className={TRACK_TONE_CLASSES[tone]}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={cn(\n            'transition-[stroke-dashoffset] duration-300',\n            INDICATOR_TONE_CLASSES[tone],\n          )}\n        />\n      </svg>\n      {children !== undefined && (\n        <span className=\"absolute inset-0 flex items-center justify-center text-[11px] leading-none font-semibold tabular-nums\">\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { CircularGauge }\n"],"mappings":";;;;;;;;AAIA,MAAM,qBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,yBAA+C;CAEnD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAwBA,MAAM,iBAAiB,EACrB,WACA,OACA,MAAM,KACN,OAAO,UACP,OAAO,IACP,cAAc,GACd,UACA,GAAG,WACqB;CACxB,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG;CAChD,MAAM,UAAU,OAAO,eAAe;CACtC,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;CAC9C,MAAM,UAAU,KAAK,MAAO,UAAU,MAAO,GAAG;CAEhD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EACnC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,QAAQ;EAC3B,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,KAAK,GAAG;GACxB,eAAY;aALd,CAOE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACQ;IACb,WAAW,mBAAmB;GAC/B,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACQ;IACb,eAAc;IACd,iBAAiB;IACjB,kBAAkB;IAClB,YAAA,GAAA,OAAA,IACE,+CACA,uBAAuB,KACzB;GACD,CAAA,CACE;MACJ,aAAa,KAAA,KACZ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GACb;EACG,CAAA,CAEL;;AAET"}
+{"version":3,"file":"circular-gauge.cjs","names":[],"sources":["../../src/components/circular-gauge.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst TRACK_TONE_CLASSES: Record<Tone, string> = {\n  success: 'stroke-success-soft',\n  warning: 'stroke-warning-soft',\n  error: 'stroke-error-soft',\n  accent: 'stroke-primary-soft',\n  neutral: 'stroke-base-gray-soft',\n}\n\nconst INDICATOR_TONE_CLASSES: Record<Tone, string> = {\n  // solid ramp, not `-active`: keeps the ring in step with EntityCardState's dot\n  success: 'stroke-base-success-solid',\n  warning: 'stroke-base-warning-solid',\n  error: 'stroke-base-error-solid',\n  accent: 'stroke-primary',\n  neutral: 'stroke-gray',\n}\n\n/**\n * Consumers should pass an `aria-label` to name the metric the gauge represents\n * (e.g. \"Battery\"); `aria-valuetext` defaults to the value as a percentage.\n */\nexport interface CircularGaugeProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /** Current value (0–max). */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Tone color for the indicator/track pair. Default: \"accent\" */\n  tone?: Tone\n  /** Diameter in pixels. Default: 44 */\n  size?: number\n  /** Stroke thickness in pixels. Default: 4 */\n  strokeWidth?: number\n  /** Optional content rendered centered inside the gauge (e.g. percentage, icon). */\n  children?: React.ReactNode\n}\n\nconst CircularGauge = ({\n  className,\n  value,\n  max = 100,\n  tone = 'accent',\n  size = 44,\n  strokeWidth = 4,\n  children,\n  ...rest\n}: CircularGaugeProps) => {\n  const clamped = Math.min(Math.max(value, 0), max)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference * (1 - clamped / max)\n  const percent = Math.round((clamped / max) * 100)\n\n  return (\n    <div\n      className={cn('relative inline-flex shrink-0', className)}\n      style={{ width: size, height: size }}\n      role=\"meter\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-valuetext={`${percent}%`}\n      {...rest}\n    >\n      <svg\n        className=\"size-full -rotate-90\"\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          className={TRACK_TONE_CLASSES[tone]}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={cn(\n            'transition-[stroke-dashoffset] duration-300',\n            INDICATOR_TONE_CLASSES[tone],\n          )}\n        />\n      </svg>\n      {children !== undefined && (\n        <span className=\"absolute inset-0 flex items-center justify-center text-[11px] leading-none font-semibold tabular-nums\">\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { CircularGauge }\n"],"mappings":";;;;;;;;AAIA,MAAM,qBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,yBAA+C;CAEnD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAwBA,MAAM,iBAAiB,EACrB,WACA,OACA,MAAM,KACN,OAAO,UACP,OAAO,IACP,cAAc,GACd,UACA,GAAG,WACqB;CACxB,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG;CAChD,MAAM,UAAU,OAAO,eAAe;CACtC,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;CAC9C,MAAM,UAAU,KAAK,MAAO,UAAU,MAAO,GAAG;CAEhD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,iCAAiC,SAAS;EACxD,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EACnC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,QAAQ;EAC3B,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,KAAK,GAAG;GACxB,eAAY;aALd,CAOE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACQ;IACb,WAAW,mBAAmB;GAC/B,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACQ;IACb,eAAc;IACd,iBAAiB;IACjB,kBAAkB;IAClB,YAAA,GAAA,GAAA,IACE,+CACA,uBAAuB,KACzB;GACD,CAAA,CACE;MACJ,aAAa,KAAA,KACZ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GACb;EACG,CAAA,CAEL;;AAET"}

package/dist/components/day-of-week-picker.cjs

@@ -4,7 +4,7 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/day-of-week-picker.tsx
 const WEEK_DAYS = [
 	"monday",
@@ -39,7 +39,7 @@ const DayOfWeekPicker = react.forwardRef(function DayOfWeekPicker(props, ref) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
-		className: (0, cnfast.cn)("flex flex-col gap-2", className),
+		className: (0, cn.cn)("flex flex-col gap-2", className),
 		children: [showPresets && props.showPresets ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			role: "group",
 			"aria-label": props.presetsAriaLabel,
@@ -78,7 +78,7 @@ const DayOfWeekPicker = react.forwardRef(function DayOfWeekPicker(props, ref) {
 					"aria-label": dayAriaLabels?.[day] ?? label,
 					disabled,
 					onClick: () => toggle(day),
-					className: (0, cnfast.cn)("touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
+					className: (0, cn.cn)("touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
 				}, day);
 			})
@@ -92,7 +92,7 @@ function PresetButton({ active, children, disabled, onClick }) {
 		onClick,
 		disabled,
 		"aria-pressed": active,
-		className: (0, cnfast.cn)("touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-gray-a3"),
+		className: (0, cn.cn)("touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-gray-a3"),
 		children
 	});
 }

package/dist/components/day-of-week-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: readonly WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n  'saturday',\n  'sunday',\n] as const\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = [...WEEK_DAYS]\n\ntype DayOfWeekPickerBaseProps = {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  className?: string\n  dayLabels: Record<WeekDay, string>\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  daysAriaLabel: string\n}\n\ntype DayOfWeekPickerWithPresets = DayOfWeekPickerBaseProps & {\n  showPresets: true\n  presetLabels: {\n    weekdays: React.ReactNode\n    weekend: React.ReactNode\n    everyDay: React.ReactNode\n  }\n  presetsAriaLabel: string\n}\n\ntype DayOfWeekPickerWithoutPresets = DayOfWeekPickerBaseProps & {\n  showPresets?: false\n  presetLabels?: never\n  presetsAriaLabel?: never\n}\n\ntype DayOfWeekPickerProps =\n  | DayOfWeekPickerWithPresets\n  | DayOfWeekPickerWithoutPresets\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  function DayOfWeekPicker(props, ref) {\n    const {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      daysAriaLabel,\n    } = props\n\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && props.showPresets ? (\n          <div\n            role=\"group\"\n            aria-label={props.presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {props.presetLabels.weekdays}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {props.presetLabels.weekend}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {props.presetLabels.everyDay}\n            </PresetButton>\n          </div>\n        ) : null}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day)\n            const label = dayLabels[day]\n            const ariaLabel = dayAriaLabels?.[day] ?? label\n            return (\n              <button\n                key={day}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day)}\n                className={cn(\n                  'touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAAgC;CAC3C;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,CAAC,GAAG,SAAS;AAgCzC,MAAM,kBAAkBA,MAAM,WAC5B,SAAS,gBAAgB,OAAO,KAAK;CACnC,MAAM,EACJ,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,kBACE;CAEJ,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;YAA7D,CACG,eAAe,MAAM,cACpB,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY,MAAM;GAClB,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,MAAM,aAAa;IACR,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,MAAM,aAAa;IACR,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,MAAM,aAAa;IACR,CAAA;GACX;OACH,MACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,GAAG;IAChC,MAAM,QAAQ,UAAU;IAExB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,QAAQ;KAQ5B;KACV,eAAe,OAAO,GAAG;KACzB,YAAA,GAAA,OAAA,IACE,kRACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,GAeC;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,gRACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}
+{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: readonly WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n  'saturday',\n  'sunday',\n] as const\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = [...WEEK_DAYS]\n\ntype DayOfWeekPickerBaseProps = {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  className?: string\n  dayLabels: Record<WeekDay, string>\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  daysAriaLabel: string\n}\n\ntype DayOfWeekPickerWithPresets = DayOfWeekPickerBaseProps & {\n  showPresets: true\n  presetLabels: {\n    weekdays: React.ReactNode\n    weekend: React.ReactNode\n    everyDay: React.ReactNode\n  }\n  presetsAriaLabel: string\n}\n\ntype DayOfWeekPickerWithoutPresets = DayOfWeekPickerBaseProps & {\n  showPresets?: false\n  presetLabels?: never\n  presetsAriaLabel?: never\n}\n\ntype DayOfWeekPickerProps =\n  | DayOfWeekPickerWithPresets\n  | DayOfWeekPickerWithoutPresets\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  function DayOfWeekPicker(props, ref) {\n    const {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      daysAriaLabel,\n    } = props\n\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && props.showPresets ? (\n          <div\n            role=\"group\"\n            aria-label={props.presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {props.presetLabels.weekdays}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {props.presetLabels.weekend}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {props.presetLabels.everyDay}\n            </PresetButton>\n          </div>\n        ) : null}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day)\n            const label = dayLabels[day]\n            const ariaLabel = dayAriaLabels?.[day] ?? label\n            return (\n              <button\n                key={day}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day)}\n                className={cn(\n                  'touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAAgC;CAC3C;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,CAAC,GAAG,SAAS;AAgCzC,MAAM,kBAAkBA,MAAM,WAC5B,SAAS,gBAAgB,OAAO,KAAK;CACnC,MAAM,EACJ,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,kBACE;CAEJ,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,GAAA,IAAc,uBAAuB,SAAS;YAA7D,CACG,eAAe,MAAM,cACpB,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY,MAAM;GAClB,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,MAAM,aAAa;IACR,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,MAAM,aAAa;IACR,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,MAAM,aAAa;IACR,CAAA;GACX;OACH,MACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,GAAG;IAChC,MAAM,QAAQ,UAAU;IAExB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,QAAQ;KAQ5B;KACV,eAAe,OAAO,GAAG;KACzB,YAAA,GAAA,GAAA,IACE,kRACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,GAeC;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,GAAA,IACE,gRACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}

package/dist/components/dialog.cjs

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/dialog.tsx
 function isBackdropPress(event) {
 	const target = event?.target;
@@ -46,7 +46,7 @@ function DialogClose({ className, children, ...props }) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
 		"data-slot": "dialog-close",
-		className: (0, cnfast.cn)(require_components_button.buttonVariants({
+		className: (0, cn.cn)(require_components_button.buttonVariants({
 			size: "icon",
 			variant: "tertiary"
 		}), "absolute top-2.5 right-3 rounded-full", className),
@@ -57,7 +57,7 @@ function DialogClose({ className, children, ...props }) {
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
 		"data-slot": "dialog-overlay",
-		className: (0, cnfast.cn)("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none", className),
+		className: (0, cn.cn)("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none", className),
 		"data-overlay": "true",
 		...props
 	});
@@ -65,35 +65,35 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
 		"data-slot": "dialog-content",
-		className: (0, cnfast.cn)("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2", "data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0", className),
+		className: (0, cn.cn)("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2", "data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0", className),
 		...props
 	});
 }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "dialog-header",
-		className: (0, cnfast.cn)("flex flex-col gap-1", className),
+		className: (0, cn.cn)("flex flex-col gap-1", className),
 		...props
 	});
 }
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "dialog-footer",
-		className: (0, cnfast.cn)("flex flex-col-reverse gap-4 sm:flex-row sm:justify-end", className),
+		className: (0, cn.cn)("flex flex-col-reverse gap-4 sm:flex-row sm:justify-end", className),
 		...props
 	});
 }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
 		"data-slot": "dialog-title",
-		className: (0, cnfast.cn)("text-lg font-bold text-gray", className),
+		className: (0, cn.cn)("text-lg font-bold text-gray", className),
 		...props
 	});
 }
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Description, {
 		"data-slot": "dialog-description",
-		className: (0, cnfast.cn)("text-sm text-gray-light", className),
+		className: (0, cn.cn)("text-sm text-gray-light", className),
 		...props
 	});
 }

package/dist/components/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","names":["DialogPrimitive","buttonVariants","Close"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n  const target = event?.target\n  return (\n    target instanceof HTMLElement &&\n    (target.dataset.overlay === 'true' ||\n      target.hasAttribute('data-base-ui-inert'))\n  )\n}\n\nfunction Dialog({\n  onOpenChange,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return (\n    <DialogPrimitive.Root\n      {...props}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          !open &&\n          eventDetails.reason === 'outside-press' &&\n          !isBackdropPress(eventDetails.event)\n        ) {\n          eventDetails.cancel()\n          return\n        }\n        onOpenChange?.(open, eventDetails)\n      }}\n    />\n  )\n}\n\nfunction DialogTrigger(\n  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n  props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"dialog-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </DialogPrimitive.Close>\n  )\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n  return (\n    <DialogPrimitive.Popup\n      data-slot=\"dialog-content\"\n      className={cn(\n        'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACrD,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAgB,UAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.cjs","names":["DialogPrimitive","buttonVariants","Close"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n  const target = event?.target\n  return (\n    target instanceof HTMLElement &&\n    (target.dataset.overlay === 'true' ||\n      target.hasAttribute('data-base-ui-inert'))\n  )\n}\n\nfunction Dialog({\n  onOpenChange,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return (\n    <DialogPrimitive.Root\n      {...props}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          !open &&\n          eventDetails.reason === 'outside-press' &&\n          !isBackdropPress(eventDetails.event)\n        ) {\n          eventDetails.cancel()\n          return\n        }\n        onOpenChange?.(open, eventDetails)\n      }}\n    />\n  )\n}\n\nfunction DialogTrigger(\n  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n  props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"dialog-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </DialogPrimitive.Close>\n  )\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n        className,\n      )}\n      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n  return (\n    <DialogPrimitive.Popup\n      data-slot=\"dialog-content\"\n      className={cn(\n        'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-1 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg font-bold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACrD,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAgB,UAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
-import { Close } from "@epilot/spark-icons";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/components/dialog.tsx