@epilot/spark-ui 0.18.2 → 0.20.0

package/dist/components/attachment.d.cts

@@ -20,7 +20,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "image" | "icon" | null | undefined;
+  variant?: "icon" | "image" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/attachment.d.ts

@@ -20,7 +20,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "image" | "icon" | null | undefined;
+  variant?: "icon" | "image" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/avatar.cjs

@@ -31,7 +31,7 @@ const Avatar = react.forwardRef(({ name, src, initials, icon, size = "md", shape
 		"aria-label": name,
 		"data-style": styleVariant,
 		"data-accent-color": require_lib_accent_colors.accentByColor[color],
-		className: (0, cnfast.cn)("inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none", sizeClasses[size], shape === "circle" ? "rounded-full" : squareRadiusClasses[size], "bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))", className),
+		className: (0, cnfast.cn)("inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none", sizeClasses[size], shape === "circle" ? "rounded-full" : squareRadiusClasses[size], "bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--color-primary-foreground))", className),
 		ref,
 		...props,
 		children: [src ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Image, {

package/dist/components/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","names":["React","AvatarPrimitive","accentByColor"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl'\ntype AvatarShape = 'circle' | 'square'\n\ninterface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  src?: string\n  initials?: string\n  icon?: React.ReactNode\n  size?: AvatarSize\n  shape?: AvatarShape\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  imgProps?: Omit<AvatarPrimitive.Image.Props, 'src'>\n}\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n}\n\n// One token lower than the spec's literal sm→lg/md→xl/lg→2xl/xl→2xl mapping:\n// at the default (medium) theme radius factor, rounded-2xl on a 56px `lg` box\n// is a 24px radius (0.86 of the half-width) — reads as a circle, not a square.\nconst squareRadiusClasses: Record<AvatarSize, string> = {\n  sm: 'rounded-md',\n  md: 'rounded-lg',\n  lg: 'rounded-xl',\n  xl: 'rounded-2xl',\n}\n\nfunction avatarInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part.at(0))\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    {\n      name,\n      src,\n      initials,\n      icon,\n      size = 'md',\n      shape = 'circle',\n      styleVariant = 'soft',\n      color = 'accent',\n      imgProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedInitials = initials ?? avatarInitials(name)\n\n    return (\n      <AvatarPrimitive.Root\n        data-slot=\"avatar\"\n        role=\"img\"\n        aria-label={name}\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none',\n          sizeClasses[size],\n          shape === 'circle' ? 'rounded-full' : squareRadiusClasses[size],\n          'bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {src ? (\n          <AvatarPrimitive.Image\n            {...imgProps}\n            data-slot=\"avatar-image\"\n            src={src}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        ) : null}\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          aria-hidden\n          className=\"flex size-full items-center justify-center\"\n        >\n          {resolvedInitials || icon}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { Avatar, avatarInitials }\nexport type { AvatarProps, AvatarSize, AvatarShape }\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAKA,MAAM,sBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,eAAe,MAAsB;CAC5C,OAAO,KACJ,MAAM,GAAG,EACT,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,EACxB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,MAAM,SAASA,MAAM,YAEjB,EACE,MACA,KACA,UACA,MACA,OAAO,MACP,QAAQ,UACR,eAAe,QACf,QAAQ,UACR,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,YAAY,eAAe,IAAI;CAExD,OACE,iBAAA,GAAA,kBAAA,MAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,qBAAmBC,0BAAAA,cAAc;EACjC,YAAA,GAAA,OAAA,IACE,2GACA,YAAY,OACZ,UAAU,WAAW,iBAAiB,oBAAoB,OAC1D,gGACA,SACF;EACK;EACL,GAAI;YAdN,CAgBG,MACC,iBAAA,GAAA,kBAAA,KAACD,sBAAAA,OAAgB,OAAjB;GACE,GAAI;GACJ,aAAU;GACL;GACL,KAAI;GACJ,WAAU;EACX,CAAA,IACC,MACJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,UAAjB;GACE,aAAU;GACV,eAAA;GACA,WAAU;aAET,oBAAoB;EACG,CAAA,CACN;;AAE1B,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"avatar.cjs","names":["React","AvatarPrimitive","accentByColor"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl'\ntype AvatarShape = 'circle' | 'square'\n\ninterface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  src?: string\n  initials?: string\n  icon?: React.ReactNode\n  size?: AvatarSize\n  shape?: AvatarShape\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  imgProps?: Omit<AvatarPrimitive.Image.Props, 'src'>\n}\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n}\n\n// One token lower than the spec's literal sm→lg/md→xl/lg→2xl/xl→2xl mapping:\n// at the default (medium) theme radius factor, rounded-2xl on a 56px `lg` box\n// is a 24px radius (0.86 of the half-width) — reads as a circle, not a square.\nconst squareRadiusClasses: Record<AvatarSize, string> = {\n  sm: 'rounded-md',\n  md: 'rounded-lg',\n  lg: 'rounded-xl',\n  xl: 'rounded-2xl',\n}\n\nfunction avatarInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part.at(0))\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    {\n      name,\n      src,\n      initials,\n      icon,\n      size = 'md',\n      shape = 'circle',\n      styleVariant = 'soft',\n      color = 'accent',\n      imgProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedInitials = initials ?? avatarInitials(name)\n\n    return (\n      <AvatarPrimitive.Root\n        data-slot=\"avatar\"\n        role=\"img\"\n        aria-label={name}\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none',\n          sizeClasses[size],\n          shape === 'circle' ? 'rounded-full' : squareRadiusClasses[size],\n          'bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--color-primary-foreground))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {src ? (\n          <AvatarPrimitive.Image\n            {...imgProps}\n            data-slot=\"avatar-image\"\n            src={src}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        ) : null}\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          aria-hidden\n          className=\"flex size-full items-center justify-center\"\n        >\n          {resolvedInitials || icon}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { Avatar, avatarInitials }\nexport type { AvatarProps, AvatarSize, AvatarShape }\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAKA,MAAM,sBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,eAAe,MAAsB;CAC5C,OAAO,KACJ,MAAM,GAAG,EACT,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,EACxB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,MAAM,SAASA,MAAM,YAEjB,EACE,MACA,KACA,UACA,MACA,OAAO,MACP,QAAQ,UACR,eAAe,QACf,QAAQ,UACR,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,YAAY,eAAe,IAAI;CAExD,OACE,iBAAA,GAAA,kBAAA,MAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,qBAAmBC,0BAAAA,cAAc;EACjC,YAAA,GAAA,OAAA,IACE,2GACA,YAAY,OACZ,UAAU,WAAW,iBAAiB,oBAAoB,OAC1D,+GACA,SACF;EACK;EACL,GAAI;YAdN,CAgBG,MACC,iBAAA,GAAA,kBAAA,KAACD,sBAAAA,OAAgB,OAAjB;GACE,GAAI;GACJ,aAAU;GACL;GACL,KAAI;GACJ,WAAU;EACX,CAAA,IACC,MACJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,UAAjB;GACE,aAAU;GACV,eAAA;GACA,WAAU;aAET,oBAAoB;EACG,CAAA,CACN;;AAE1B,CACF;AAEA,OAAO,cAAc"}

package/dist/components/avatar.js

@@ -28,7 +28,7 @@ const Avatar = React$1.forwardRef(({ name, src, initials, icon, size = "md", sha
 		"aria-label": name,
 		"data-style": styleVariant,
 		"data-accent-color": accentByColor[color],
-		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none", sizeClasses[size], shape === "circle" ? "rounded-full" : squareRadiusClasses[size], "bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))", className),
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none", sizeClasses[size], shape === "circle" ? "rounded-full" : squareRadiusClasses[size], "bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--color-primary-foreground))", className),
 		ref,
 		...props,
 		children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["React","AvatarPrimitive"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl'\ntype AvatarShape = 'circle' | 'square'\n\ninterface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  src?: string\n  initials?: string\n  icon?: React.ReactNode\n  size?: AvatarSize\n  shape?: AvatarShape\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  imgProps?: Omit<AvatarPrimitive.Image.Props, 'src'>\n}\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n}\n\n// One token lower than the spec's literal sm→lg/md→xl/lg→2xl/xl→2xl mapping:\n// at the default (medium) theme radius factor, rounded-2xl on a 56px `lg` box\n// is a 24px radius (0.86 of the half-width) — reads as a circle, not a square.\nconst squareRadiusClasses: Record<AvatarSize, string> = {\n  sm: 'rounded-md',\n  md: 'rounded-lg',\n  lg: 'rounded-xl',\n  xl: 'rounded-2xl',\n}\n\nfunction avatarInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part.at(0))\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    {\n      name,\n      src,\n      initials,\n      icon,\n      size = 'md',\n      shape = 'circle',\n      styleVariant = 'soft',\n      color = 'accent',\n      imgProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedInitials = initials ?? avatarInitials(name)\n\n    return (\n      <AvatarPrimitive.Root\n        data-slot=\"avatar\"\n        role=\"img\"\n        aria-label={name}\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none',\n          sizeClasses[size],\n          shape === 'circle' ? 'rounded-full' : squareRadiusClasses[size],\n          'bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--spark-a12))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {src ? (\n          <AvatarPrimitive.Image\n            {...imgProps}\n            data-slot=\"avatar-image\"\n            src={src}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        ) : null}\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          aria-hidden\n          className=\"flex size-full items-center justify-center\"\n        >\n          {resolvedInitials || icon}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { Avatar, avatarInitials }\nexport type { AvatarProps, AvatarSize, AvatarShape }\n"],"mappings":";;;;;;;AAsBA,MAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAKA,MAAM,sBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,eAAe,MAAsB;CAC5C,OAAO,KACJ,MAAM,GAAG,EACT,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,EACxB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,MAAM,SAASA,QAAM,YAEjB,EACE,MACA,KACA,UACA,MACA,OAAO,MACP,QAAQ,UACR,eAAe,QACf,QAAQ,UACR,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,YAAY,eAAe,IAAI;CAExD,OACE,qBAACC,SAAgB,MAAjB;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,qBAAmB,cAAc;EACjC,WAAW,GACT,2GACA,YAAY,OACZ,UAAU,WAAW,iBAAiB,oBAAoB,OAC1D,gGACA,SACF;EACK;EACL,GAAI;YAdN,CAgBG,MACC,oBAACA,SAAgB,OAAjB;GACE,GAAI;GACJ,aAAU;GACL;GACL,KAAI;GACJ,WAAU;EACX,CAAA,IACC,MACJ,oBAACA,SAAgB,UAAjB;GACE,aAAU;GACV,eAAA;GACA,WAAU;aAET,oBAAoB;EACG,CAAA,CACN;;AAE1B,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"avatar.js","names":["React","AvatarPrimitive"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl'\ntype AvatarShape = 'circle' | 'square'\n\ninterface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  src?: string\n  initials?: string\n  icon?: React.ReactNode\n  size?: AvatarSize\n  shape?: AvatarShape\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  imgProps?: Omit<AvatarPrimitive.Image.Props, 'src'>\n}\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n}\n\n// One token lower than the spec's literal sm→lg/md→xl/lg→2xl/xl→2xl mapping:\n// at the default (medium) theme radius factor, rounded-2xl on a 56px `lg` box\n// is a 24px radius (0.86 of the half-width) — reads as a circle, not a square.\nconst squareRadiusClasses: Record<AvatarSize, string> = {\n  sm: 'rounded-md',\n  md: 'rounded-lg',\n  lg: 'rounded-xl',\n  xl: 'rounded-2xl',\n}\n\nfunction avatarInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part.at(0))\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    {\n      name,\n      src,\n      initials,\n      icon,\n      size = 'md',\n      shape = 'circle',\n      styleVariant = 'soft',\n      color = 'accent',\n      imgProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedInitials = initials ?? avatarInitials(name)\n\n    return (\n      <AvatarPrimitive.Root\n        data-slot=\"avatar\"\n        role=\"img\"\n        aria-label={name}\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'inline-flex shrink-0 items-center justify-center overflow-hidden align-middle font-semibold select-none',\n          sizeClasses[size],\n          shape === 'circle' ? 'rounded-full' : squareRadiusClasses[size],\n          'bg-(--spark-style-bg,var(--color-base-accent-soft)) text-(--spark-style-fg,var(--color-primary-foreground))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {src ? (\n          <AvatarPrimitive.Image\n            {...imgProps}\n            data-slot=\"avatar-image\"\n            src={src}\n            alt=\"\"\n            className=\"size-full object-cover\"\n          />\n        ) : null}\n        <AvatarPrimitive.Fallback\n          data-slot=\"avatar-fallback\"\n          aria-hidden\n          className=\"flex size-full items-center justify-center\"\n        >\n          {resolvedInitials || icon}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { Avatar, avatarInitials }\nexport type { AvatarProps, AvatarSize, AvatarShape }\n"],"mappings":";;;;;;;AAsBA,MAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAKA,MAAM,sBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,eAAe,MAAsB;CAC5C,OAAO,KACJ,MAAM,GAAG,EACT,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,EACxB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,MAAM,SAASA,QAAM,YAEjB,EACE,MACA,KACA,UACA,MACA,OAAO,MACP,QAAQ,UACR,eAAe,QACf,QAAQ,UACR,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,YAAY,eAAe,IAAI;CAExD,OACE,qBAACC,SAAgB,MAAjB;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,qBAAmB,cAAc;EACjC,WAAW,GACT,2GACA,YAAY,OACZ,UAAU,WAAW,iBAAiB,oBAAoB,OAC1D,+GACA,SACF;EACK;EACL,GAAI;YAdN,CAgBG,MACC,oBAACA,SAAgB,OAAjB;GACE,GAAI;GACJ,aAAU;GACL;GACL,KAAI;GACJ,WAAU;EACX,CAAA,IACC,MACJ,oBAACA,SAAgB,UAAjB;GACE,aAAU;GACV,eAAA;GACA,WAAU;aAET,oBAAoB;EACG,CAAA,CACN;;AAE1B,CACF;AAEA,OAAO,cAAc"}

package/dist/components/badge.cjs

@@ -12,7 +12,7 @@ const Badge = react.forwardRef(({ className, children, styleVariant, color, ...p
 		"data-slot": "badge",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
+		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))", className),
 		ref,
 		...props,
 		children

package/dist/components/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * 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 SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\n/** Preferred: `primary` | `neutral` | `success` | `warning` | `error`. `accent` / `danger` stay as aliases. */\nexport type SparkBadgeColor =\n  | 'primary'\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAqBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,kJACA,4FACA,mIACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/badge.d.cts

@@ -4,7 +4,8 @@ import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
 import * as React$1 from "react";
 
 //#region src/components/badge.d.ts
-type SparkBadgeColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+/** Preferred: `primary` | `neutral` | `success` | `warning` | `error`. `accent` / `danger` stay as aliases. */
+type SparkBadgeColor = 'primary' | 'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'danger';
 interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
   styleVariant?: SparkStyle;
   color?: SparkBadgeColor;

package/dist/components/badge.d.ts

@@ -4,7 +4,8 @@ import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
 import * as React$1 from "react";
 
 //#region src/components/badge.d.ts
-type SparkBadgeColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+/** Preferred: `primary` | `neutral` | `success` | `warning` | `error`. `accent` / `danger` stay as aliases. */
+type SparkBadgeColor = 'primary' | 'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'danger';
 interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
   styleVariant?: SparkStyle;
   color?: SparkBadgeColor;

package/dist/components/badge.js

@@ -9,7 +9,7 @@ const Badge = React$1.forwardRef(({ className, children, styleVariant, color, ..
 		"data-slot": "badge",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? accentByColor[color] : void 0,
-		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))", className),
 		ref,
 		...props,
 		children

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * 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 SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\n/** Preferred: `primary` | `neutral` | `success` | `warning` | `error`. `accent` / `danger` stay as aliases. */\nexport type SparkBadgeColor =\n  | 'primary'\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-md px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--color-base-gray-soft)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-high-contrast)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAqBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,kJACA,4FACA,mIACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/{energy-bar-chart.cjs → bar-chart-with-total.cjs}

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_components_bar_chart = require("./bar-chart.cjs");
 const require_components_number_flow = require("./number-flow.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/energy-bar-chart.tsx
-function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
+//#region src/components/bar-chart-with-total.tsx
+function BarChartWithTotal({ totalSuffix, totalFormat, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_bar_chart.BarChart, {
 		...rest,
 		className,
@@ -18,6 +18,6 @@ function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
 	});
 }
 //#endregion
-exports.EnergyBarChart = EnergyBarChart;
+exports.BarChartWithTotal = BarChartWithTotal;
 
-//# sourceMappingURL=energy-bar-chart.cjs.map
+//# sourceMappingURL=bar-chart-with-total.cjs.map

package/dist/components/bar-chart-with-total.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart-with-total.cjs","names":["BarChart","NumberFlow"],"sources":["../../src/components/bar-chart-with-total.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartProps,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type { BarChartCategory, BarChartLineSeries, BarChartSeries }\n\ntype BarChartWithTotalProps<TDatum> = Omit<\n  BarChartProps<TDatum>,\n  'renderTotal' | 'formatTotal'\n> & {\n  totalSuffix?: string\n  totalFormat?: Format\n}\n\nexport function BarChartWithTotal<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: BarChartWithTotalProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,kBAA0B,EACxC,aACA,aACA,WACA,GAAG,QACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,6BAAAA,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,iBAAA,GAAA,kBAAA,KAACC,gCAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,WAAU;EACX,CAAA;CAEJ,CAAA;AAEL"}

package/dist/components/bar-chart-with-total.d.cts

@@ -0,0 +1,19 @@
+"use client";
+
+import { BarChartCategory, BarChartLineSeries, BarChartProps, BarChartSeries } from "./bar-chart.cjs";
+import { Format } from "./number-flow.cjs";
+
+//#region src/components/bar-chart-with-total.d.ts
+type BarChartWithTotalProps<TDatum> = Omit<BarChartProps<TDatum>, 'renderTotal' | 'formatTotal'> & {
+  totalSuffix?: string;
+  totalFormat?: Format;
+};
+declare function BarChartWithTotal<TDatum>({
+  totalSuffix,
+  totalFormat,
+  className,
+  ...rest
+}: BarChartWithTotalProps<TDatum>): React.ReactElement;
+//#endregion
+export { type BarChartCategory, type BarChartLineSeries, type BarChartSeries, BarChartWithTotal };
+//# sourceMappingURL=bar-chart-with-total.d.cts.map

package/dist/components/bar-chart-with-total.d.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import { BarChartCategory, BarChartLineSeries, BarChartProps, BarChartSeries } from "./bar-chart.js";
+import { Format } from "./number-flow.js";
+
+//#region src/components/bar-chart-with-total.d.ts
+type BarChartWithTotalProps<TDatum> = Omit<BarChartProps<TDatum>, 'renderTotal' | 'formatTotal'> & {
+  totalSuffix?: string;
+  totalFormat?: Format;
+};
+declare function BarChartWithTotal<TDatum>({
+  totalSuffix,
+  totalFormat,
+  className,
+  ...rest
+}: BarChartWithTotalProps<TDatum>): React.ReactElement;
+//#endregion
+export { type BarChartCategory, type BarChartLineSeries, type BarChartSeries, BarChartWithTotal };
+//# sourceMappingURL=bar-chart-with-total.d.ts.map

package/dist/components/{energy-bar-chart.js → bar-chart-with-total.js}

@@ -2,8 +2,8 @@
 import { BarChart } from "./bar-chart.js";
 import NumberFlow from "./number-flow.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/energy-bar-chart.tsx
-function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
+//#region src/components/bar-chart-with-total.tsx
+function BarChartWithTotal({ totalSuffix, totalFormat, className, ...rest }) {
 	return /* @__PURE__ */ jsx(BarChart, {
 		...rest,
 		className,
@@ -17,6 +17,6 @@ function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
 	});
 }
 //#endregion
-export { EnergyBarChart };
+export { BarChartWithTotal };
 
-//# sourceMappingURL=energy-bar-chart.js.map
+//# sourceMappingURL=bar-chart-with-total.js.map

package/dist/components/bar-chart-with-total.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart-with-total.js","names":[],"sources":["../../src/components/bar-chart-with-total.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartProps,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type { BarChartCategory, BarChartLineSeries, BarChartSeries }\n\ntype BarChartWithTotalProps<TDatum> = Omit<\n  BarChartProps<TDatum>,\n  'renderTotal' | 'formatTotal'\n> & {\n  totalSuffix?: string\n  totalFormat?: Format\n}\n\nexport function BarChartWithTotal<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: BarChartWithTotalProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAmBA,SAAgB,kBAA0B,EACxC,aACA,aACA,WACA,GAAG,QACkD;CACrD,OACE,oBAAC,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,oBAAC,YAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,WAAU;EACX,CAAA;CAEJ,CAAA;AAEL"}

package/dist/components/bar-chart.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");

package/dist/components/bar-chart.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../utils/cn.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
+import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "default" | "outline" | "destructive" | "secondary" | "muted" | "tinted" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "default" | "outline" | "destructive" | "secondary" | "muted" | "tinted" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button-group.cjs

@@ -9,7 +9,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_button = require("@base-ui/react/button");
 let cnfast = require("cnfast");
 //#region src/components/button-group.tsx
-const buttonGroupRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
+const buttonGroupRecipe = "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
 function buttonGroupSizeClasses(size) {
 	return size === "small" ? "h-9 text-sm [&_svg:not([class*=size-])]:size-4" : "h-10 text-base [&_svg:not([class*=size-])]:size-5";
 }
@@ -36,7 +36,7 @@ const ButtonGroupButton = react.forwardRef(function ButtonGroupButton({ classNam
 		"data-slot": "button-group-button",
 		nativeButton: nativeButton ?? render === void 0,
 		render,
-		className: (0, cnfast.cn)("inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap", "transition-colors hover:bg-(--spark-style-bg-hover,var(--spark-10)) motion-reduce:transition-none", "focus-visible:inset-ring-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		className: (0, cnfast.cn)("inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap", "transition-colors hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) motion-reduce:transition-none", "focus-visible:inset-ring-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", className),
 		ref,
 		...props
 	});

package/dist/components/button-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.cjs","names":["React","accentByColor","ButtonPrimitive"],"sources":["../../src/components/button-group.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\n// Button's chrome recipe (`buttonRecipe` in button.tsx), minus its `hover:`\n// half -- hover belongs on segments, not the shared group chrome. Shared with\n// button-group-pill.tsx.\nexport const buttonGroupRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport function buttonGroupSizeClasses(size: 'small' | 'default') {\n  return size === 'small'\n    ? 'h-9 text-sm [&_svg:not([class*=size-])]:size-4'\n    : 'h-10 text-base [&_svg:not([class*=size-])]:size-5'\n}\n\ninterface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  size?: 'small' | 'default'\n}\n\n/**\n * A layout group, not a toolbar: segments are independent tab stops in DOM\n * order (no roving tabindex). Pass `aria-label` when segments don't\n * self-describe (e.g. icon-only segments). For a fully-rounded status pill,\n * use `ButtonGroupPill` instead.\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    {\n      className,\n      styleVariant = 'soft',\n      color = 'neutral',\n      size = 'default',\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        data-slot=\"button-group\"\n        role=\"group\"\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'isolate inline-flex items-stretch overflow-hidden rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          buttonGroupSizeClasses(size),\n          buttonGroupRecipe,\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n\ninterface ButtonGroupButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'ref'\n> {}\n\nconst ButtonGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  ButtonGroupButtonProps\n>(function ButtonGroupButton(\n  { className, render, nativeButton, ...props },\n  ref,\n) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button-group-button\"\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(\n        'inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap',\n        // fallback mirrors Button's own hover over the same --spark-9 resting\n        // fallback in buttonGroupRecipe, for a segment used outside a ButtonGroup\n        'transition-colors hover:bg-(--spark-style-bg-hover,var(--spark-10)) motion-reduce:transition-none',\n        'focus-visible:inset-ring-2 focus-visible:outline-hidden',\n        'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupButton.displayName = 'ButtonGroupButton'\n\nconst ButtonGroupText = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(function ButtonGroupText({ className, ...props }, ref) {\n  return (\n    <span\n      data-slot=\"button-group-text\"\n      className={cn(\n        'inline-flex items-center gap-2 px-3 font-medium whitespace-nowrap select-none',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupText.displayName = 'ButtonGroupText'\n\nconst ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function ButtonGroupSeparator({ className, ...props }, ref) {\n  return (\n    <div\n      data-slot=\"button-group-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        'h-4 w-px shrink-0 self-center bg-current opacity-25',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator'\n\nexport { ButtonGroup, ButtonGroupButton, ButtonGroupSeparator, ButtonGroupText }\nexport type { ButtonGroupProps, ButtonGroupButtonProps }\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,oBACX;AAEF,SAAgB,uBAAuB,MAA2B;CAChE,OAAO,SAAS,UACZ,mDACA;AACN;;;;;;;AAcA,MAAM,cAAcA,MAAM,WACxB,SAAS,YACP,EACE,WACA,eAAe,QACf,QAAQ,WACR,OAAO,WACP,GAAG,SAEL,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,qBAAmBC,0BAAAA,cAAc;EACjC,YAAA,GAAA,OAAA,IACE,sHACA,uBAAuB,IAAI,GAC3B,mBACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAY,cAAc;AAO1B,MAAM,oBAAoBD,MAAM,WAG9B,SAAS,kBACT,EAAE,WAAW,QAAQ,cAAc,GAAG,SACtC,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,KAACE,sBAAAA,QAAD;EACE,aAAU;EACV,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,OAAA,IACE,oFAGA,qGACA,2DACA,+GACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,kBAAkB,cAAc;AAEhC,MAAM,kBAAkBF,MAAM,WAG5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,iFACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,cAAc;AAE9B,MAAM,uBAAuBA,MAAM,WAGjC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,OAAA,IACE,uDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"button-group.cjs","names":["React","accentByColor","ButtonPrimitive"],"sources":["../../src/components/button-group.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\n// Button's chrome recipe (`buttonRecipe` in button.tsx), minus its `hover:`\n// half -- hover belongs on segments, not the shared group chrome. Shared with\n// button-group-pill.tsx.\nexport const buttonGroupRecipe =\n  'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport function buttonGroupSizeClasses(size: 'small' | 'default') {\n  return size === 'small'\n    ? 'h-9 text-sm [&_svg:not([class*=size-])]:size-4'\n    : 'h-10 text-base [&_svg:not([class*=size-])]:size-5'\n}\n\ninterface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  size?: 'small' | 'default'\n}\n\n/**\n * A layout group, not a toolbar: segments are independent tab stops in DOM\n * order (no roving tabindex). Pass `aria-label` when segments don't\n * self-describe (e.g. icon-only segments). For a fully-rounded status pill,\n * use `ButtonGroupPill` instead.\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    {\n      className,\n      styleVariant = 'soft',\n      color = 'neutral',\n      size = 'default',\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        data-slot=\"button-group\"\n        role=\"group\"\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'isolate inline-flex items-stretch overflow-hidden rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          buttonGroupSizeClasses(size),\n          buttonGroupRecipe,\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n\ninterface ButtonGroupButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'ref'\n> {}\n\nconst ButtonGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  ButtonGroupButtonProps\n>(function ButtonGroupButton(\n  { className, render, nativeButton, ...props },\n  ref,\n) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button-group-button\"\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(\n        'inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap',\n        'transition-colors hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) motion-reduce:transition-none',\n        'focus-visible:inset-ring-2 focus-visible:outline-hidden',\n        'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupButton.displayName = 'ButtonGroupButton'\n\nconst ButtonGroupText = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(function ButtonGroupText({ className, ...props }, ref) {\n  return (\n    <span\n      data-slot=\"button-group-text\"\n      className={cn(\n        'inline-flex items-center gap-2 px-3 font-medium whitespace-nowrap select-none',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupText.displayName = 'ButtonGroupText'\n\nconst ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function ButtonGroupSeparator({ className, ...props }, ref) {\n  return (\n    <div\n      data-slot=\"button-group-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        'h-4 w-px shrink-0 self-center bg-current opacity-25',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator'\n\nexport { ButtonGroup, ButtonGroupButton, ButtonGroupSeparator, ButtonGroupText }\nexport type { ButtonGroupProps, ButtonGroupButtonProps }\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,oBACX;AAEF,SAAgB,uBAAuB,MAA2B;CAChE,OAAO,SAAS,UACZ,mDACA;AACN;;;;;;;AAcA,MAAM,cAAcA,MAAM,WACxB,SAAS,YACP,EACE,WACA,eAAe,QACf,QAAQ,WACR,OAAO,WACP,GAAG,SAEL,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,qBAAmBC,0BAAAA,cAAc;EACjC,YAAA,GAAA,OAAA,IACE,sHACA,uBAAuB,IAAI,GAC3B,mBACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAY,cAAc;AAO1B,MAAM,oBAAoBD,MAAM,WAG9B,SAAS,kBACT,EAAE,WAAW,QAAQ,cAAc,GAAG,SACtC,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,KAACE,sBAAAA,QAAD;EACE,aAAU;EACV,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,OAAA,IACE,oFACA,gHACA,2DACA,+GACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,kBAAkB,cAAc;AAEhC,MAAM,kBAAkBF,MAAM,WAG5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,iFACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,cAAc;AAE9B,MAAM,uBAAuBA,MAAM,WAGjC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,OAAA,IACE,uDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/button-group.d.cts

@@ -6,7 +6,7 @@ import * as React$1 from "react";
 import { Button } from "@base-ui/react/button";
 
 //#region src/components/button-group.d.ts
-declare const buttonGroupRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
+declare const buttonGroupRecipe = "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
 declare function buttonGroupSizeClasses(size: 'small' | 'default'): "h-9 text-sm [&_svg:not([class*=size-])]:size-4" | "h-10 text-base [&_svg:not([class*=size-])]:size-5";
 interface ButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
   styleVariant?: SparkStyle;

package/dist/components/button-group.d.ts

@@ -6,7 +6,7 @@ import * as React$1 from "react";
 import { Button } from "@base-ui/react/button";
 
 //#region src/components/button-group.d.ts
-declare const buttonGroupRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
+declare const buttonGroupRecipe = "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
 declare function buttonGroupSizeClasses(size: 'small' | 'default'): "h-9 text-sm [&_svg:not([class*=size-])]:size-4" | "h-10 text-base [&_svg:not([class*=size-])]:size-5";
 interface ButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
   styleVariant?: SparkStyle;

package/dist/components/button-group.js

@@ -6,7 +6,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/button-group.tsx
-const buttonGroupRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
+const buttonGroupRecipe = "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
 function buttonGroupSizeClasses(size) {
 	return size === "small" ? "h-9 text-sm [&_svg:not([class*=size-])]:size-4" : "h-10 text-base [&_svg:not([class*=size-])]:size-5";
 }
@@ -33,7 +33,7 @@ const ButtonGroupButton = React$1.forwardRef(function ButtonGroupButton({ classN
 		"data-slot": "button-group-button",
 		nativeButton: nativeButton ?? render === void 0,
 		render,
-		className: cn("inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap", "transition-colors hover:bg-(--spark-style-bg-hover,var(--spark-10)) motion-reduce:transition-none", "focus-visible:inset-ring-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		className: cn("inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap", "transition-colors hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) motion-reduce:transition-none", "focus-visible:inset-ring-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", className),
 		ref,
 		...props
 	});

package/dist/components/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":["React","ButtonPrimitive"],"sources":["../../src/components/button-group.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\n// Button's chrome recipe (`buttonRecipe` in button.tsx), minus its `hover:`\n// half -- hover belongs on segments, not the shared group chrome. Shared with\n// button-group-pill.tsx.\nexport const buttonGroupRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport function buttonGroupSizeClasses(size: 'small' | 'default') {\n  return size === 'small'\n    ? 'h-9 text-sm [&_svg:not([class*=size-])]:size-4'\n    : 'h-10 text-base [&_svg:not([class*=size-])]:size-5'\n}\n\ninterface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  size?: 'small' | 'default'\n}\n\n/**\n * A layout group, not a toolbar: segments are independent tab stops in DOM\n * order (no roving tabindex). Pass `aria-label` when segments don't\n * self-describe (e.g. icon-only segments). For a fully-rounded status pill,\n * use `ButtonGroupPill` instead.\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    {\n      className,\n      styleVariant = 'soft',\n      color = 'neutral',\n      size = 'default',\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        data-slot=\"button-group\"\n        role=\"group\"\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'isolate inline-flex items-stretch overflow-hidden rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          buttonGroupSizeClasses(size),\n          buttonGroupRecipe,\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n\ninterface ButtonGroupButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'ref'\n> {}\n\nconst ButtonGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  ButtonGroupButtonProps\n>(function ButtonGroupButton(\n  { className, render, nativeButton, ...props },\n  ref,\n) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button-group-button\"\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(\n        'inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap',\n        // fallback mirrors Button's own hover over the same --spark-9 resting\n        // fallback in buttonGroupRecipe, for a segment used outside a ButtonGroup\n        'transition-colors hover:bg-(--spark-style-bg-hover,var(--spark-10)) motion-reduce:transition-none',\n        'focus-visible:inset-ring-2 focus-visible:outline-hidden',\n        'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupButton.displayName = 'ButtonGroupButton'\n\nconst ButtonGroupText = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(function ButtonGroupText({ className, ...props }, ref) {\n  return (\n    <span\n      data-slot=\"button-group-text\"\n      className={cn(\n        'inline-flex items-center gap-2 px-3 font-medium whitespace-nowrap select-none',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupText.displayName = 'ButtonGroupText'\n\nconst ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function ButtonGroupSeparator({ className, ...props }, ref) {\n  return (\n    <div\n      data-slot=\"button-group-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        'h-4 w-px shrink-0 self-center bg-current opacity-25',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator'\n\nexport { ButtonGroup, ButtonGroupButton, ButtonGroupSeparator, ButtonGroupText }\nexport type { ButtonGroupProps, ButtonGroupButtonProps }\n"],"mappings":";;;;;;;;AAYA,MAAa,oBACX;AAEF,SAAgB,uBAAuB,MAA2B;CAChE,OAAO,SAAS,UACZ,mDACA;AACN;;;;;;;AAcA,MAAM,cAAcA,QAAM,WACxB,SAAS,YACP,EACE,WACA,eAAe,QACf,QAAQ,WACR,OAAO,WACP,GAAG,SAEL,KACA;CACA,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,qBAAmB,cAAc;EACjC,WAAW,GACT,sHACA,uBAAuB,IAAI,GAC3B,mBACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAY,cAAc;AAO1B,MAAM,oBAAoBA,QAAM,WAG9B,SAAS,kBACT,EAAE,WAAW,QAAQ,cAAc,GAAG,SACtC,KACA;CACA,OACE,oBAACC,QAAD;EACE,aAAU;EACV,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,WAAW,GACT,oFAGA,qGACA,2DACA,+GACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,kBAAkB,cAAc;AAEhC,MAAM,kBAAkBD,QAAM,WAG5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,cAAc;AAE9B,MAAM,uBAAuBA,QAAM,WAGjC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,uDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"button-group.js","names":["React","ButtonPrimitive"],"sources":["../../src/components/button-group.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\n// Button's chrome recipe (`buttonRecipe` in button.tsx), minus its `hover:`\n// half -- hover belongs on segments, not the shared group chrome. Shared with\n// button-group-pill.tsx.\nexport const buttonGroupRecipe =\n  'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport function buttonGroupSizeClasses(size: 'small' | 'default') {\n  return size === 'small'\n    ? 'h-9 text-sm [&_svg:not([class*=size-])]:size-4'\n    : 'h-10 text-base [&_svg:not([class*=size-])]:size-5'\n}\n\ninterface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  styleVariant?: SparkStyle\n  color?: SparkAccentColor\n  size?: 'small' | 'default'\n}\n\n/**\n * A layout group, not a toolbar: segments are independent tab stops in DOM\n * order (no roving tabindex). Pass `aria-label` when segments don't\n * self-describe (e.g. icon-only segments). For a fully-rounded status pill,\n * use `ButtonGroupPill` instead.\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    {\n      className,\n      styleVariant = 'soft',\n      color = 'neutral',\n      size = 'default',\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        data-slot=\"button-group\"\n        role=\"group\"\n        data-style={styleVariant}\n        data-accent-color={accentByColor[color]}\n        className={cn(\n          'isolate inline-flex items-stretch overflow-hidden rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          buttonGroupSizeClasses(size),\n          buttonGroupRecipe,\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n\ninterface ButtonGroupButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'ref'\n> {}\n\nconst ButtonGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  ButtonGroupButtonProps\n>(function ButtonGroupButton(\n  { className, render, nativeButton, ...props },\n  ref,\n) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button-group-button\"\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(\n        'inline-flex cursor-pointer items-center gap-2 px-3 font-medium whitespace-nowrap',\n        'transition-colors hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) motion-reduce:transition-none',\n        'focus-visible:inset-ring-2 focus-visible:outline-hidden',\n        'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupButton.displayName = 'ButtonGroupButton'\n\nconst ButtonGroupText = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(function ButtonGroupText({ className, ...props }, ref) {\n  return (\n    <span\n      data-slot=\"button-group-text\"\n      className={cn(\n        'inline-flex items-center gap-2 px-3 font-medium whitespace-nowrap select-none',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupText.displayName = 'ButtonGroupText'\n\nconst ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function ButtonGroupSeparator({ className, ...props }, ref) {\n  return (\n    <div\n      data-slot=\"button-group-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        'h-4 w-px shrink-0 self-center bg-current opacity-25',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator'\n\nexport { ButtonGroup, ButtonGroupButton, ButtonGroupSeparator, ButtonGroupText }\nexport type { ButtonGroupProps, ButtonGroupButtonProps }\n"],"mappings":";;;;;;;;AAYA,MAAa,oBACX;AAEF,SAAgB,uBAAuB,MAA2B;CAChE,OAAO,SAAS,UACZ,mDACA;AACN;;;;;;;AAcA,MAAM,cAAcA,QAAM,WACxB,SAAS,YACP,EACE,WACA,eAAe,QACf,QAAQ,WACR,OAAO,WACP,GAAG,SAEL,KACA;CACA,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,qBAAmB,cAAc;EACjC,WAAW,GACT,sHACA,uBAAuB,IAAI,GAC3B,mBACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAY,cAAc;AAO1B,MAAM,oBAAoBA,QAAM,WAG9B,SAAS,kBACT,EAAE,WAAW,QAAQ,cAAc,GAAG,SACtC,KACA;CACA,OACE,oBAACC,QAAD;EACE,aAAU;EACV,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,WAAW,GACT,oFACA,gHACA,2DACA,+GACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,kBAAkB,cAAc;AAEhC,MAAM,kBAAkBD,QAAM,WAG5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,gDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,cAAc;AAE9B,MAAM,uBAAuBA,QAAM,WAGjC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,uDACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/button.cjs

@@ -13,16 +13,18 @@ let cnfast = require("cnfast");
 const buttonVariants = (0, class_variance_authority.cva)("group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: {
 		variant: {
-			primary: "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))",
+			primary: "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))",
 			secondary: "bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3",
 			tertiary: "bg-transparent text-gray-a11 hover:bg-gray-a3",
 			bare: "rounded-none! text-gray-12 outline-hidden!",
-			destructive: "bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid"
+			destructive: "bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive"
 		},
 		color: {
 			accent: "",
+			primary: "",
 			neutral: "",
-			danger: "focus-visible:ring-base-error-solid"
+			danger: "focus-visible:ring-destructive",
+			destructive: "focus-visible:ring-destructive"
 		},
 		size: {
 			small: "h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4",
@@ -35,7 +37,7 @@ const buttonVariants = (0, class_variance_authority.cva)("group/button touch-tar
 	},
 	defaultVariants: { size: "default" }
 });
-const buttonRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
+const buttonRecipe = "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
 const Button = react.forwardRef(function Button({ className, styleVariant, color, size, render, nativeButton, variant: _variant, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_button.Button, {
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,

package/dist/components/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":["React","ButtonPrimitive","accentByColor"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))',\n        secondary:\n          'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n        tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n        bare: 'rounded-none! text-gray-12 outline-hidden!',\n        destructive:\n          'bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid',\n      },\n      color: {\n        accent: '',\n        neutral: '',\n        danger: 'focus-visible:ring-base-error-solid',\n      },\n      size: {\n        small:\n          'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n        default:\n          'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n        medium:\n          'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n        'icon-small':\n          'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n        icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n        'icon-medium':\n          'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nconst buttonRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport type SparkButtonColor = 'accent' | 'neutral' | 'danger'\n\nexport interface ButtonProps\n  extends\n    Omit<React.ComponentProps<typeof ButtonPrimitive>, 'ref'>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n  styleVariant?: SparkStyle\n  color?: SparkButtonColor\n  /**\n   * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n   * (`solid | soft | surface | ghost | outline`) and `color`\n   * (`accent | neutral | danger`) instead. The `variant` axis on\n   * `buttonVariants` exists only for class-string callers.\n   */\n  variant?: never\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    styleVariant,\n    color,\n    size,\n    render,\n    nativeButton,\n    variant: _variant,\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    <ButtonPrimitive\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(buttonVariants({ size, color }), buttonRecipe, className)}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,kBAAA,GAAA,yBAAA,KACJ,0dACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;EACJ;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,QAAQ;EACV;EACA,MAAM;GACJ,OACE;GACF,SACE;GACF,QACE;GACF,cACE;GACF,MAAM;GACN,eACE;EACJ;CACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,eACJ;AAoBF,MAAM,SAASA,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,cACA,OACA,MACA,QACA,cACA,SAAS,UACT,GAAG,SAEL,KACA;CAKA,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,QAAD;EACE,cANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAMpD,qBALoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAMnD,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,OAAA,IAAc,eAAe;GAAE;GAAM;EAAM,CAAC,GAAG,cAAc,SAAS;EACjE;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,OAAO,cAAc"}
+{"version":3,"file":"button.cjs","names":["React","ButtonPrimitive","accentByColor"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))',\n        secondary:\n          'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n        tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n        bare: 'rounded-none! text-gray-12 outline-hidden!',\n        destructive:\n          'bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive',\n      },\n      color: {\n        accent: '',\n        primary: '',\n        neutral: '',\n        danger: 'focus-visible:ring-destructive',\n        destructive: 'focus-visible:ring-destructive',\n      },\n      size: {\n        small:\n          'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n        default:\n          'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n        medium:\n          'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n        'icon-small':\n          'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n        icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n        'icon-medium':\n          'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nconst buttonRecipe =\n  'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\n/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */\nexport type SparkButtonColor =\n  | 'primary'\n  | 'accent'\n  | 'neutral'\n  | 'destructive'\n  | 'danger'\n\nexport interface ButtonProps\n  extends\n    Omit<React.ComponentProps<typeof ButtonPrimitive>, 'ref'>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n  styleVariant?: SparkStyle\n  color?: SparkButtonColor\n  /**\n   * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n   * (`solid | soft | surface | ghost | outline`) and `color`\n   * (`primary | neutral | destructive`) instead. The `variant` axis on\n   * `buttonVariants` exists only for class-string callers.\n   */\n  variant?: never\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    styleVariant,\n    color,\n    size,\n    render,\n    nativeButton,\n    variant: _variant,\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    <ButtonPrimitive\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(buttonVariants({ size, color }), buttonRecipe, className)}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,kBAAA,GAAA,yBAAA,KACJ,0dACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;EACJ;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,QAAQ;GACR,aAAa;EACf;EACA,MAAM;GACJ,OACE;GACF,SACE;GACF,QACE;GACF,cACE;GACF,MAAM;GACN,eACE;EACJ;CACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,eACJ;AA0BF,MAAM,SAASA,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,cACA,OACA,MACA,QACA,cACA,SAAS,UACT,GAAG,SAEL,KACA;CAKA,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,QAAD;EACE,cANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAMpD,qBALoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAMnD,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,OAAA,IAAc,eAAe;GAAE;GAAM;EAAM,CAAC,GAAG,cAAc,SAAS;EACjE;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,OAAO,cAAc"}

package/dist/components/button.d.cts

@@ -7,18 +7,19 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "bare" | null | undefined;
-  color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "medium" | "default" | "icon" | "icon-small" | "icon-medium" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
+  color?: "primary" | "destructive" | "accent" | "neutral" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type SparkButtonColor = 'accent' | 'neutral' | 'danger';
+/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */
+type SparkButtonColor = 'primary' | 'accent' | 'neutral' | 'destructive' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
   styleVariant?: SparkStyle;
   color?: SparkButtonColor;
   /**
    * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`
    * (`solid | soft | surface | ghost | outline`) and `color`
-   * (`accent | neutral | danger`) instead. The `variant` axis on
+   * (`primary | neutral | destructive`) instead. The `variant` axis on
    * `buttonVariants` exists only for class-string callers.
    */
   variant?: never;

package/dist/components/button.d.ts

@@ -7,18 +7,19 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "bare" | null | undefined;
-  color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "medium" | "default" | "icon" | "icon-small" | "icon-medium" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
+  color?: "primary" | "destructive" | "accent" | "neutral" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type SparkButtonColor = 'accent' | 'neutral' | 'danger';
+/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */
+type SparkButtonColor = 'primary' | 'accent' | 'neutral' | 'destructive' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
   styleVariant?: SparkStyle;
   color?: SparkButtonColor;
   /**
    * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`
    * (`solid | soft | surface | ghost | outline`) and `color`
-   * (`accent | neutral | danger`) instead. The `variant` axis on
+   * (`primary | neutral | destructive`) instead. The `variant` axis on
    * `buttonVariants` exists only for class-string callers.
    */
   variant?: never;

package/dist/components/button.js

@@ -10,16 +10,18 @@ import { cva } from "class-variance-authority";
 const buttonVariants = cva("group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: {
 		variant: {
-			primary: "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))",
+			primary: "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))",
 			secondary: "bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3",
 			tertiary: "bg-transparent text-gray-a11 hover:bg-gray-a3",
 			bare: "rounded-none! text-gray-12 outline-hidden!",
-			destructive: "bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid"
+			destructive: "bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive"
 		},
 		color: {
 			accent: "",
+			primary: "",
 			neutral: "",
-			danger: "focus-visible:ring-base-error-solid"
+			danger: "focus-visible:ring-destructive",
+			destructive: "focus-visible:ring-destructive"
 		},
 		size: {
 			small: "h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4",
@@ -32,7 +34,7 @@ const buttonVariants = cva("group/button touch-target inline-flex cursor-pointer
 	},
 	defaultVariants: { size: "default" }
 });
-const buttonRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
+const buttonRecipe = "bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
 const Button = React$1.forwardRef(function Button({ className, styleVariant, color, size, render, nativeButton, variant: _variant, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,