@epilot/spark-ui 0.26.1 → 0.27.0

package/dist/components/theme.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkScaling } from "../theme-types-Bn5E15-P.cjs";
+import { a as SparkButtonRoles, c as SparkInputColor, d as SparkNeutral, f as SparkNeutralFamily, g as SparkStyle, h as SparkSpacing, i as SparkButtonRole, l as SparkInputStyle, m as SparkScaling, n as SparkButtonColor, o as SparkCardColor, p as SparkRadius, r as SparkButtonEmphasis, s as SparkCardVariant, u as SparkLabelPosition } from "../theme-types-CKZzOmSa.cjs";
 import { Appearance } from "../lib/accent-theme.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
@@ -45,6 +45,8 @@ interface ThemeValue {
   cardVariant?: SparkCardVariant;
   /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */
   cardColor?: SparkCardColor;
+  /** `<Button emphasis>` looks; an explicit `styleVariant` / `color` on the button wins. */
+  buttons?: SparkButtonRoles;
   appearance?: Appearance;
   /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */
   fontHeading?: string;
@@ -63,5 +65,5 @@ declare function PortalTheme({
   children: React$1.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { PortalTheme, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+export { PortalTheme, type SparkButtonColor, type SparkButtonEmphasis, type SparkButtonRole, type SparkButtonRoles, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
 //# sourceMappingURL=theme.d.cts.map

package/dist/components/theme.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkScaling } from "../theme-types-Bn5E15-P.js";
+import { a as SparkButtonRoles, c as SparkInputColor, d as SparkNeutral, f as SparkNeutralFamily, g as SparkStyle, h as SparkSpacing, i as SparkButtonRole, l as SparkInputStyle, m as SparkScaling, n as SparkButtonColor, o as SparkCardColor, p as SparkRadius, r as SparkButtonEmphasis, s as SparkCardVariant, u as SparkLabelPosition } from "../theme-types-CKZzOmSa.js";
 import { Appearance } from "../lib/accent-theme.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
@@ -45,6 +45,8 @@ interface ThemeValue {
   cardVariant?: SparkCardVariant;
   /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */
   cardColor?: SparkCardColor;
+  /** `<Button emphasis>` looks; an explicit `styleVariant` / `color` on the button wins. */
+  buttons?: SparkButtonRoles;
   appearance?: Appearance;
   /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */
   fontHeading?: string;
@@ -63,5 +65,5 @@ declare function PortalTheme({
   children: React$1.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { PortalTheme, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+export { PortalTheme, type SparkButtonColor, type SparkButtonEmphasis, type SparkButtonRole, type SparkButtonRoles, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
 //# sourceMappingURL=theme.d.ts.map

package/dist/components/theme.js

@@ -11,14 +11,51 @@ import { useRender } from "@base-ui/react/use-render";
 /** The epilot brand accent — the scale `spark-default.css` ships statically. */
 const DEFAULT_ACCENT = "#005EB4";
 const ThemeContext = React$1.createContext({});
+function roleOf(style, color) {
+	if (style === void 0 && color === void 0) return void 0;
+	return {
+		...style !== void 0 && { style },
+		...color !== void 0 && { color }
+	};
+}
+function useButtonRoles(buttons) {
+	const isSet = buttons !== void 0;
+	const { primary, secondary, tertiary } = buttons ?? {};
+	const primaryStyle = primary?.style;
+	const primaryColor = primary?.color;
+	const secondaryStyle = secondary?.style;
+	const secondaryColor = secondary?.color;
+	const tertiaryStyle = tertiary?.style;
+	const tertiaryColor = tertiary?.color;
+	return React$1.useMemo(() => {
+		if (!isSet) return void 0;
+		const roles = {};
+		const primaryRole = roleOf(primaryStyle, primaryColor);
+		const secondaryRole = roleOf(secondaryStyle, secondaryColor);
+		const tertiaryRole = roleOf(tertiaryStyle, tertiaryColor);
+		if (primaryRole) roles.primary = primaryRole;
+		if (secondaryRole) roles.secondary = secondaryRole;
+		if (tertiaryRole) roles.tertiary = tertiaryRole;
+		return roles;
+	}, [
+		isSet,
+		primaryStyle,
+		primaryColor,
+		secondaryStyle,
+		secondaryColor,
+		tertiaryStyle,
+		tertiaryColor
+	]);
+}
 const ThemeOutputContext = React$1.createContext(null);
 /** Merged theme values from enclosing `<Theme>` providers. */
 function useTheme() {
 	return React$1.useContext(ThemeContext);
 }
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
-const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
+const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, buttons: buttonsProp, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
 	const parent = useTheme();
+	const buttons = useButtonRoles(buttonsProp);
 	const parentOutput = React$1.useContext(ThemeOutputContext);
 	const value = React$1.useMemo(() => ({
 		accentColor: accentColor ?? parent.accentColor,
@@ -35,6 +72,10 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		inputColor: inputColor ?? parent.inputColor,
 		cardVariant: cardVariant ?? parent.cardVariant,
 		cardColor: cardColor ?? parent.cardColor,
+		buttons: buttons ? {
+			...parent.buttons,
+			...buttons
+		} : parent.buttons,
 		appearance: appearance ?? parent.appearance,
 		fontHeading: fontHeading ?? parent.fontHeading,
 		fontBody: fontBody ?? parent.fontBody
@@ -53,6 +94,7 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		inputColor,
 		cardVariant,
 		cardColor,
+		buttons,
 		appearance,
 		fontHeading,
 		fontBody,
@@ -154,7 +196,7 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		"data-input-style": inputStyle,
 		"data-input-color": inputColor,
 		"data-card-variant": cardVariant,
-		"data-card-color": cardColor === "accent" ? "accent" : void 0
+		"data-card-color": cardColor
 	}), [
 		neutralColorAttr,
 		radius,

package/dist/components/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["React"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  appearanceForBackground,\n  generateAccentScale,\n  getMatchingNeutral,\n  invertAccentScale,\n  isParsableColor,\n  neutralFamilyVars,\n  neutralSparkVars,\n  resolveAutoNeutral,\n  type Appearance,\n  type SparkAccentScale,\n} from '../lib/accent-theme'\nimport {\n  isSparkNeutralFamily,\n  type SparkCardColor,\n  type SparkCardVariant,\n  type SparkInputColor,\n  type SparkInputStyle,\n  type SparkLabelPosition,\n  type SparkNeutral,\n  type SparkRadius,\n  type SparkScaling,\n  type SparkSpacing,\n  type SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkNeutralFamily,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\n/** The epilot brand accent — the scale `spark-default.css` ships statically. */\nconst DEFAULT_ACCENT = '#005EB4'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /**\n   * Page canvas as a custom hex. Regenerates BOTH the accent and neutral scales against\n   * it (each alpha step is composited against the canvas, so a saturated colour needs\n   * the neutral ramp regenerated too, not just the accent). Unset → the fixed\n   * `#ffffff` / `#000000` default, and neutrals stay on the static Radix families.\n   */\n  backgroundColor?: string\n  /**\n   * A curated family name, an arbitrary color to seed the neutral scale, or `'auto'` to\n   * resolve one — preferring `backgroundColor`'s own hue when it's perceptibly tinted,\n   * else pairing with the accent (Radix's `grayColor=\"auto\"`). A custom seed (from `auto`\n   * or set directly) only regenerates the scale alongside a `backgroundColor`; without\n   * one, `data-neutral-color` falls back to the accent-matched family and that's what\n   * actually paints.\n   */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  /**\n   * Orthogonal to `styleVariant`: re-casts the accent scale for use ON its own solid fill,\n   * for controls sitting on a solid accent surface (a `<Card variant=\"solid\" color=\"accent\">`),\n   * where a solid control would otherwise paint the same `--spark-9` as the card and vanish.\n   * Swaps step 9 with its contrast ink, so the fill/ink pair stays WCAG-safe for any accent.\n   */\n  inverted?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n  /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */\n  fontHeading?: string\n  /** Font stack for everything else. Any valid CSS `font-family` value. */\n  fontBody?: string\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** What a Theme actually wrote to the DOM, merged over its ancestors (nearest wins). */\ninterface ThemeOutput {\n  attrs: Record<string, string>\n  vars: Record<string, string>\n  scopes: string[]\n}\n\nconst ThemeOutputContext = React.createContext<ThemeOutput | null>(null)\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      backgroundColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      inverted,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      fontHeading,\n      fontBody,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n    const parentOutput = React.useContext(ThemeOutputContext)\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        backgroundColor: backgroundColor ?? parent.backgroundColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        inverted: inverted ?? parent.inverted,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n        fontHeading: fontHeading ?? parent.fontHeading,\n        fontBody: fontBody ?? parent.fontBody,\n      }),\n      [\n        accentColor,\n        backgroundColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        inverted,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        fontHeading,\n        fontBody,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    // 'auto' pairs a neutral with the canvas's own tint when it has one, else the\n    // effective accent (Radix's grayColor=\"auto\") — see resolveAutoNeutral. Reads the\n    // OWN backgroundColor, not the merged value.backgroundColor: optsFor (below) only\n    // ever regenerates against a scope's own canvas too, so preferring an inherited one\n    // here would resolve a seed that then gets silently discarded.\n    const rawNeutralColor =\n      neutralColor === 'auto'\n        ? resolveAutoNeutral(\n            value.accentColor ?? DEFAULT_ACCENT,\n            backgroundColor,\n          )\n        : neutralColor\n\n    // A custom neutral that isn't a recognized family must be a real, parseable color —\n    // reject invalid input here (e.g. a typo'd family name like \"slat\") so it can't throw\n    // deep inside the shared generator, where the catch below would otherwise blame\n    // accentColor/backgroundColor without ever naming neutralColor as the actual cause.\n    const neutralColorIsValid =\n      rawNeutralColor === undefined ||\n      isSparkNeutralFamily(rawNeutralColor) ||\n      isParsableColor(rawNeutralColor)\n    if (!neutralColorIsValid) {\n      console.warn(\n        `[Theme] Ignoring invalid neutralColor \"${rawNeutralColor}\" — falling back to the accent-matched family.`,\n      )\n    }\n    const resolvedNeutralColor = neutralColorIsValid\n      ? rawNeutralColor\n      : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    // The DOM attribute stays one of the 6 static families `[data-neutral-color]` has CSS\n    // for — a raw color (from the canvas-tinted auto path, or an arbitrary neutralColor\n    // prop) falls back to its accent-matched family here instead, so the attribute is\n    // always CSS-selectable/debuggable rather than a sentinel nothing matches.\n    // generateAccentScale still gets the real resolvedNeutralColor for generation, below —\n    // this substitution is display-only, and doesn't by itself guarantee the *other*\n    // appearance's neutrals in ambient (no explicit `appearance`) mode: that's a\n    // pre-existing cross-appearance leak in the same family as review-findings.md #5, not\n    // something this attribute fallback fixes or regresses.\n    const neutralColorAttr =\n      resolvedNeutralColor === undefined\n        ? undefined\n        : isSparkNeutralFamily(resolvedNeutralColor)\n          ? resolvedNeutralColor\n          : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        portalVars: {} as React.CSSProperties,\n        portalScope: undefined as string | undefined,\n        css: '',\n        scoped: false,\n      }\n      // A custom canvas generates even with no accent of its own: the neutral ramp is\n      // composited against it, and --spark-background has to carry it.\n      if (!accentColor && !backgroundColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const source = value.accentColor ?? DEFAULT_ACCENT\n        const hex = CURATED_ACCENTS[source] ?? source\n\n        // A canvas has a polarity, unlike an accent hue: a yellow page is a *light*\n        // page, and reusing it for the dark scale yields light ink on a light canvas\n        // (measured 1.16:1). So the custom canvas applies to the appearance it actually\n        // belongs to, and the other keeps its default. One knob still covers the common\n        // case — a tenant wanting both sets an explicit appearance per scope.\n        const bgAppearance = backgroundColor\n          ? appearanceForBackground(backgroundColor)\n          : undefined\n\n        // Honouring a mismatched canvas would paint light ink on a light page, so it's\n        // dropped — but say so, or the prop looks broken.\n        if (\n          backgroundColor &&\n          value.appearance &&\n          bgAppearance !== value.appearance\n        ) {\n          console.warn(\n            `[Theme] Ignoring backgroundColor \"${backgroundColor}\": it reads as a ${bgAppearance} canvas on an appearance=\"${value.appearance}\" scope. Pass a ${value.appearance} colour, or set it on a scope whose appearance matches.`,\n          )\n        }\n\n        // Default to slate so a regenerated neutral stays in the family the static\n        // `:root` default already points at, rather than the generator's ECP gray seed.\n        const optsFor = (appearance: Appearance) =>\n          backgroundColor && bgAppearance === appearance\n            ? {\n                background: backgroundColor,\n                neutral: resolvedNeutralColor ?? ('slate' as const),\n              }\n            : undefined\n\n        // Neutrals are only worth regenerating against a custom canvas — see\n        // neutralSparkVars. Without one the static Radix families are already correct.\n        const emit = (scale: SparkAccentScale, custom: boolean) =>\n          custom\n            ? [...accentSparkVars(scale), ...neutralSparkVars(scale)]\n            : accentSparkVars(scale)\n\n        const build = (appearance: Appearance) => {\n          const opts = optsFor(appearance)\n          const scale = generateAccentScale(hex, appearance, opts)\n          // `inverted` re-casts the accent for a solid-accent surface; the neutral ramp is\n          // unrelated to that swap, so it passes through untouched.\n          const rendered = emit(\n            inverted ? invertAccentScale(scale) : scale,\n            opts != null,\n          )\n          // Popups sit on their own surface, so they get the scale before the inverted re-cast.\n          const plain = inverted ? emit(scale, opts != null) : rendered\n          return { rendered, plain }\n        }\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          const { rendered, plain } = build(value.appearance)\n          const inlineVars = toVars(rendered)\n          return {\n            inlineVars,\n            portalVars: inverted ? toVars(plain) : inlineVars,\n            portalScope: undefined,\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        //\n        // Both blocks must declare the SAME tokens. A custom canvas only regenerates\n        // neutrals for its own appearance (see optsFor), and a custom property the other\n        // block leaves undeclared keeps its sibling's value rather than falling back — so\n        // the off-canvas appearance would paint this one's canvas-tinted neutrals, and\n        // being unlayered they'd beat `[data-neutral-color]`'s @layer base mapping too.\n        // Point it at the static family instead: the same seed the canvas side was given,\n        // so the two appearances agree on family and differ only in canvas.\n        const offCanvasNeutrals = backgroundColor\n          ? neutralFamilyVars(resolvedNeutralColor ?? 'slate')\n          : []\n        const scaleFor = (appearance: Appearance) => {\n          const { rendered, plain } = build(appearance)\n          const extra = bgAppearance === appearance ? [] : offCanvasNeutrals\n          return {\n            rendered: [...rendered, ...extra],\n            plain: [...plain, ...extra],\n          }\n        }\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const rule = (\n          id: string,\n          lightDecls: string[],\n          darkDecls: string[],\n        ) => {\n          const sel = `[data-spark-scope~=\"${id}\"]`\n          return `${sel}{${lightDecls.join('')}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join('')}}`\n        }\n        const portalScope = inverted ? `${scopeId}p` : scopeId\n        const css =\n          rule(scopeId, light.rendered, dark.rendered) +\n          (inverted ? rule(portalScope, light.plain, dark.plain) : '')\n        return {\n          inlineVars: {} as React.CSSProperties,\n          portalVars: {} as React.CSSProperties,\n          portalScope,\n          css,\n          scoped: true,\n        }\n      } catch (error) {\n        // A bad accentColor/backgroundColor must not throw through render — fall back\n        // to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\" / backgroundColor \"${backgroundColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [\n      accentColor,\n      backgroundColor,\n      inverted,\n      resolvedNeutralColor,\n      value.accentColor,\n      value.appearance,\n      scopeId,\n    ])\n\n    const attrs = React.useMemo(\n      () => ({\n        'data-neutral-color': neutralColorAttr,\n        'data-radius': radius,\n        'data-scaling': scaling,\n        'data-spacing': spacing,\n        'data-style': styleVariant,\n        'data-high-contrast': highContrast ? '' : undefined,\n        'data-label-position': labelPosition,\n        'data-input-style': inputStyle,\n        'data-input-color': inputColor,\n        'data-card-variant': cardVariant,\n        'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n      }),\n      [\n        neutralColorAttr,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n      ],\n    )\n    const fontVars = React.useMemo(\n      () => ({\n        ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n        ...(fontBody ? { '--spark-font-body': fontBody } : null),\n      }),\n      [fontHeading, fontBody],\n    )\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          ...attrs,\n          'data-inverted': inverted ? '' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: {\n            ...accent.inlineVars,\n            // Paint the canvas we were handed, else the prop emits a token and visibly\n            // does nothing. Reads the var (not the raw prop) so the scoped <style>'s\n            // per-appearance value still wins under ambient appearance.\n            ...(backgroundColor\n              ? { backgroundColor: 'var(--spark-background)' }\n              : null),\n            ...fontVars,\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    const output = React.useMemo<ThemeOutput>(() => {\n      // An unset own knob must not blank out the ancestor's value it inherits.\n      const own = Object.fromEntries(\n        Object.entries(attrs).filter(\n          (entry): entry is [string, string] => entry[1] !== undefined,\n        ),\n      )\n      const parentScopes = parentOutput?.scopes ?? []\n      return {\n        attrs: { ...parentOutput?.attrs, ...own },\n        vars: {\n          ...parentOutput?.vars,\n          ...(accent.portalVars as Record<string, string>),\n          ...fontVars,\n        },\n        scopes: accent.portalScope\n          ? [...parentScopes, accent.portalScope]\n          : parentScopes,\n      }\n    }, [parentOutput, attrs, accent, fontVars])\n\n    return (\n      <ThemeContext.Provider value={value}>\n        <ThemeOutputContext.Provider value={output}>\n          {accent.css ? <style>{accent.css}</style> : null}\n          {element}\n        </ThemeOutputContext.Provider>\n      </ThemeContext.Provider>\n    )\n  },\n)\n\n/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */\nexport function PortalTheme({ children }: { children: React.ReactNode }) {\n  const output = React.useContext(ThemeOutputContext)\n  const theme = useTheme()\n  // A popup sits on its own surface, never on the solid accent `inverted` is for.\n  const value = React.useMemo(() => ({ ...theme, inverted: false }), [theme])\n  if (!output) return <>{children}</>\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        data-slot=\"portal-theme\"\n        className={cn('spark-theme', theme.appearance)}\n        {...output.attrs}\n        data-spark-scope={\n          output.scopes.length ? output.scopes.join(' ') : undefined\n        }\n        style={{ display: 'contents', ...output.vars }}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":["React"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  appearanceForBackground,\n  generateAccentScale,\n  getMatchingNeutral,\n  invertAccentScale,\n  isParsableColor,\n  neutralFamilyVars,\n  neutralSparkVars,\n  resolveAutoNeutral,\n  type Appearance,\n  type SparkAccentScale,\n} from '../lib/accent-theme'\nimport {\n  isSparkNeutralFamily,\n  type SparkButtonColor,\n  type SparkButtonRoles,\n  type SparkCardColor,\n  type SparkCardVariant,\n  type SparkInputColor,\n  type SparkInputStyle,\n  type SparkLabelPosition,\n  type SparkNeutral,\n  type SparkRadius,\n  type SparkScaling,\n  type SparkSpacing,\n  type SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkButtonColor,\n  SparkButtonEmphasis,\n  SparkButtonRole,\n  SparkButtonRoles,\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkNeutralFamily,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\n/** The epilot brand accent — the scale `spark-default.css` ships statically. */\nconst DEFAULT_ACCENT = '#005EB4'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /**\n   * Page canvas as a custom hex. Regenerates BOTH the accent and neutral scales against\n   * it (each alpha step is composited against the canvas, so a saturated colour needs\n   * the neutral ramp regenerated too, not just the accent). Unset → the fixed\n   * `#ffffff` / `#000000` default, and neutrals stay on the static Radix families.\n   */\n  backgroundColor?: string\n  /**\n   * A curated family name, an arbitrary color to seed the neutral scale, or `'auto'` to\n   * resolve one — preferring `backgroundColor`'s own hue when it's perceptibly tinted,\n   * else pairing with the accent (Radix's `grayColor=\"auto\"`). A custom seed (from `auto`\n   * or set directly) only regenerates the scale alongside a `backgroundColor`; without\n   * one, `data-neutral-color` falls back to the accent-matched family and that's what\n   * actually paints.\n   */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  /**\n   * Orthogonal to `styleVariant`: re-casts the accent scale for use ON its own solid fill,\n   * for controls sitting on a solid accent surface (a `<Card variant=\"solid\" color=\"accent\">`),\n   * where a solid control would otherwise paint the same `--spark-9` as the card and vanish.\n   * Swaps step 9 with its contrast ink, so the fill/ink pair stays WCAG-safe for any accent.\n   */\n  inverted?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  /** `<Button emphasis>` looks; an explicit `styleVariant` / `color` on the button wins. */\n  buttons?: SparkButtonRoles\n  appearance?: Appearance\n  /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */\n  fontHeading?: string\n  /** Font stack for everything else. Any valid CSS `font-family` value. */\n  fontBody?: string\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** What a Theme actually wrote to the DOM, merged over its ancestors (nearest wins). */\ninterface ThemeOutput {\n  attrs: Record<string, string>\n  vars: Record<string, string>\n  scopes: string[]\n}\n\nfunction roleOf(\n  style: SparkStyle | undefined,\n  color: SparkButtonColor | undefined,\n) {\n  if (style === undefined && color === undefined) return undefined\n  return {\n    ...(style !== undefined && { style }),\n    ...(color !== undefined && { color }),\n  }\n}\n\nfunction useButtonRoles(buttons: SparkButtonRoles | undefined) {\n  const isSet = buttons !== undefined\n  const { primary, secondary, tertiary } = buttons ?? {}\n  const primaryStyle = primary?.style\n  const primaryColor = primary?.color\n  const secondaryStyle = secondary?.style\n  const secondaryColor = secondary?.color\n  const tertiaryStyle = tertiary?.style\n  const tertiaryColor = tertiary?.color\n  return React.useMemo<SparkButtonRoles | undefined>(() => {\n    if (!isSet) return undefined\n    const roles: SparkButtonRoles = {}\n    const primaryRole = roleOf(primaryStyle, primaryColor)\n    const secondaryRole = roleOf(secondaryStyle, secondaryColor)\n    const tertiaryRole = roleOf(tertiaryStyle, tertiaryColor)\n    if (primaryRole) roles.primary = primaryRole\n    if (secondaryRole) roles.secondary = secondaryRole\n    if (tertiaryRole) roles.tertiary = tertiaryRole\n    return roles\n  }, [\n    isSet,\n    primaryStyle,\n    primaryColor,\n    secondaryStyle,\n    secondaryColor,\n    tertiaryStyle,\n    tertiaryColor,\n  ])\n}\n\nconst ThemeOutputContext = React.createContext<ThemeOutput | null>(null)\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      backgroundColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      inverted,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      buttons: buttonsProp,\n      appearance,\n      fontHeading,\n      fontBody,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n    const buttons = useButtonRoles(buttonsProp)\n    const parentOutput = React.useContext(ThemeOutputContext)\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        backgroundColor: backgroundColor ?? parent.backgroundColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        inverted: inverted ?? parent.inverted,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        buttons: buttons ? { ...parent.buttons, ...buttons } : parent.buttons,\n        appearance: appearance ?? parent.appearance,\n        fontHeading: fontHeading ?? parent.fontHeading,\n        fontBody: fontBody ?? parent.fontBody,\n      }),\n      [\n        accentColor,\n        backgroundColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        inverted,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        buttons,\n        appearance,\n        fontHeading,\n        fontBody,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    // 'auto' pairs a neutral with the canvas's own tint when it has one, else the\n    // effective accent (Radix's grayColor=\"auto\") — see resolveAutoNeutral. Reads the\n    // OWN backgroundColor, not the merged value.backgroundColor: optsFor (below) only\n    // ever regenerates against a scope's own canvas too, so preferring an inherited one\n    // here would resolve a seed that then gets silently discarded.\n    const rawNeutralColor =\n      neutralColor === 'auto'\n        ? resolveAutoNeutral(\n            value.accentColor ?? DEFAULT_ACCENT,\n            backgroundColor,\n          )\n        : neutralColor\n\n    // A custom neutral that isn't a recognized family must be a real, parseable color —\n    // reject invalid input here (e.g. a typo'd family name like \"slat\") so it can't throw\n    // deep inside the shared generator, where the catch below would otherwise blame\n    // accentColor/backgroundColor without ever naming neutralColor as the actual cause.\n    const neutralColorIsValid =\n      rawNeutralColor === undefined ||\n      isSparkNeutralFamily(rawNeutralColor) ||\n      isParsableColor(rawNeutralColor)\n    if (!neutralColorIsValid) {\n      console.warn(\n        `[Theme] Ignoring invalid neutralColor \"${rawNeutralColor}\" — falling back to the accent-matched family.`,\n      )\n    }\n    const resolvedNeutralColor = neutralColorIsValid\n      ? rawNeutralColor\n      : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    // The DOM attribute stays one of the 6 static families `[data-neutral-color]` has CSS\n    // for — a raw color (from the canvas-tinted auto path, or an arbitrary neutralColor\n    // prop) falls back to its accent-matched family here instead, so the attribute is\n    // always CSS-selectable/debuggable rather than a sentinel nothing matches.\n    // generateAccentScale still gets the real resolvedNeutralColor for generation, below —\n    // this substitution is display-only, and doesn't by itself guarantee the *other*\n    // appearance's neutrals in ambient (no explicit `appearance`) mode: that's a\n    // pre-existing cross-appearance leak in the same family as review-findings.md #5, not\n    // something this attribute fallback fixes or regresses.\n    const neutralColorAttr =\n      resolvedNeutralColor === undefined\n        ? undefined\n        : isSparkNeutralFamily(resolvedNeutralColor)\n          ? resolvedNeutralColor\n          : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        portalVars: {} as React.CSSProperties,\n        portalScope: undefined as string | undefined,\n        css: '',\n        scoped: false,\n      }\n      // A custom canvas generates even with no accent of its own: the neutral ramp is\n      // composited against it, and --spark-background has to carry it.\n      if (!accentColor && !backgroundColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const source = value.accentColor ?? DEFAULT_ACCENT\n        const hex = CURATED_ACCENTS[source] ?? source\n\n        // A canvas has a polarity, unlike an accent hue: a yellow page is a *light*\n        // page, and reusing it for the dark scale yields light ink on a light canvas\n        // (measured 1.16:1). So the custom canvas applies to the appearance it actually\n        // belongs to, and the other keeps its default. One knob still covers the common\n        // case — a tenant wanting both sets an explicit appearance per scope.\n        const bgAppearance = backgroundColor\n          ? appearanceForBackground(backgroundColor)\n          : undefined\n\n        // Honouring a mismatched canvas would paint light ink on a light page, so it's\n        // dropped — but say so, or the prop looks broken.\n        if (\n          backgroundColor &&\n          value.appearance &&\n          bgAppearance !== value.appearance\n        ) {\n          console.warn(\n            `[Theme] Ignoring backgroundColor \"${backgroundColor}\": it reads as a ${bgAppearance} canvas on an appearance=\"${value.appearance}\" scope. Pass a ${value.appearance} colour, or set it on a scope whose appearance matches.`,\n          )\n        }\n\n        // Default to slate so a regenerated neutral stays in the family the static\n        // `:root` default already points at, rather than the generator's ECP gray seed.\n        const optsFor = (appearance: Appearance) =>\n          backgroundColor && bgAppearance === appearance\n            ? {\n                background: backgroundColor,\n                neutral: resolvedNeutralColor ?? ('slate' as const),\n              }\n            : undefined\n\n        // Neutrals are only worth regenerating against a custom canvas — see\n        // neutralSparkVars. Without one the static Radix families are already correct.\n        const emit = (scale: SparkAccentScale, custom: boolean) =>\n          custom\n            ? [...accentSparkVars(scale), ...neutralSparkVars(scale)]\n            : accentSparkVars(scale)\n\n        const build = (appearance: Appearance) => {\n          const opts = optsFor(appearance)\n          const scale = generateAccentScale(hex, appearance, opts)\n          // `inverted` re-casts the accent for a solid-accent surface; the neutral ramp is\n          // unrelated to that swap, so it passes through untouched.\n          const rendered = emit(\n            inverted ? invertAccentScale(scale) : scale,\n            opts != null,\n          )\n          // Popups sit on their own surface, so they get the scale before the inverted re-cast.\n          const plain = inverted ? emit(scale, opts != null) : rendered\n          return { rendered, plain }\n        }\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          const { rendered, plain } = build(value.appearance)\n          const inlineVars = toVars(rendered)\n          return {\n            inlineVars,\n            portalVars: inverted ? toVars(plain) : inlineVars,\n            portalScope: undefined,\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        //\n        // Both blocks must declare the SAME tokens. A custom canvas only regenerates\n        // neutrals for its own appearance (see optsFor), and a custom property the other\n        // block leaves undeclared keeps its sibling's value rather than falling back — so\n        // the off-canvas appearance would paint this one's canvas-tinted neutrals, and\n        // being unlayered they'd beat `[data-neutral-color]`'s @layer base mapping too.\n        // Point it at the static family instead: the same seed the canvas side was given,\n        // so the two appearances agree on family and differ only in canvas.\n        const offCanvasNeutrals = backgroundColor\n          ? neutralFamilyVars(resolvedNeutralColor ?? 'slate')\n          : []\n        const scaleFor = (appearance: Appearance) => {\n          const { rendered, plain } = build(appearance)\n          const extra = bgAppearance === appearance ? [] : offCanvasNeutrals\n          return {\n            rendered: [...rendered, ...extra],\n            plain: [...plain, ...extra],\n          }\n        }\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const rule = (\n          id: string,\n          lightDecls: string[],\n          darkDecls: string[],\n        ) => {\n          const sel = `[data-spark-scope~=\"${id}\"]`\n          return `${sel}{${lightDecls.join('')}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join('')}}`\n        }\n        const portalScope = inverted ? `${scopeId}p` : scopeId\n        const css =\n          rule(scopeId, light.rendered, dark.rendered) +\n          (inverted ? rule(portalScope, light.plain, dark.plain) : '')\n        return {\n          inlineVars: {} as React.CSSProperties,\n          portalVars: {} as React.CSSProperties,\n          portalScope,\n          css,\n          scoped: true,\n        }\n      } catch (error) {\n        // A bad accentColor/backgroundColor must not throw through render — fall back\n        // to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\" / backgroundColor \"${backgroundColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [\n      accentColor,\n      backgroundColor,\n      inverted,\n      resolvedNeutralColor,\n      value.accentColor,\n      value.appearance,\n      scopeId,\n    ])\n\n    const attrs = React.useMemo(\n      () => ({\n        'data-neutral-color': neutralColorAttr,\n        'data-radius': radius,\n        'data-scaling': scaling,\n        'data-spacing': spacing,\n        'data-style': styleVariant,\n        'data-high-contrast': highContrast ? '' : undefined,\n        'data-label-position': labelPosition,\n        'data-input-style': inputStyle,\n        'data-input-color': inputColor,\n        'data-card-variant': cardVariant,\n        'data-card-color': cardColor,\n      }),\n      [\n        neutralColorAttr,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n      ],\n    )\n    const fontVars = React.useMemo(\n      () => ({\n        ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n        ...(fontBody ? { '--spark-font-body': fontBody } : null),\n      }),\n      [fontHeading, fontBody],\n    )\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          ...attrs,\n          'data-inverted': inverted ? '' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: {\n            ...accent.inlineVars,\n            // Paint the canvas we were handed, else the prop emits a token and visibly\n            // does nothing. Reads the var (not the raw prop) so the scoped <style>'s\n            // per-appearance value still wins under ambient appearance.\n            ...(backgroundColor\n              ? { backgroundColor: 'var(--spark-background)' }\n              : null),\n            ...fontVars,\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    const output = React.useMemo<ThemeOutput>(() => {\n      // An unset own knob must not blank out the ancestor's value it inherits.\n      const own = Object.fromEntries(\n        Object.entries(attrs).filter(\n          (entry): entry is [string, string] => entry[1] !== undefined,\n        ),\n      )\n      const parentScopes = parentOutput?.scopes ?? []\n      return {\n        attrs: { ...parentOutput?.attrs, ...own },\n        vars: {\n          ...parentOutput?.vars,\n          ...(accent.portalVars as Record<string, string>),\n          ...fontVars,\n        },\n        scopes: accent.portalScope\n          ? [...parentScopes, accent.portalScope]\n          : parentScopes,\n      }\n    }, [parentOutput, attrs, accent, fontVars])\n\n    return (\n      <ThemeContext.Provider value={value}>\n        <ThemeOutputContext.Provider value={output}>\n          {accent.css ? <style>{accent.css}</style> : null}\n          {element}\n        </ThemeOutputContext.Provider>\n      </ThemeContext.Provider>\n    )\n  },\n)\n\n/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */\nexport function PortalTheme({ children }: { children: React.ReactNode }) {\n  const output = React.useContext(ThemeOutputContext)\n  const theme = useTheme()\n  // A popup sits on its own surface, never on the solid accent `inverted` is for.\n  const value = React.useMemo(() => ({ ...theme, inverted: false }), [theme])\n  if (!output) return <>{children}</>\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        data-slot=\"portal-theme\"\n        className={cn('spark-theme', theme.appearance)}\n        {...output.attrs}\n        data-spark-scope={\n          output.scopes.length ? output.scopes.join(' ') : undefined\n        }\n        style={{ display: 'contents', ...output.vars }}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/toast.cjs

@@ -2,8 +2,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_components_button = require("./button.cjs");
 const require_components_theme = require("./theme.cjs");
+const require_components_button = require("./button.cjs");
 const require_components_spinner = require("./spinner.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/toast.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import { buttonVariants } from "./button.js";
 import { PortalTheme } from "./theme.js";
+import { buttonVariants } from "./button.js";
 import { Spinner } from "./spinner.js";
 import "react";
 import { Cancel, CheckCircle, Close, Info, Warning } from "@epilot/spark-icons";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { SparkButtonColor } from "./button.cjs";
+import { n as SparkButtonColor } from "../theme-types-CKZzOmSa.cjs";
 import { ToggleProps, ToggleStyle } from "./toggle.cjs";
 import * as React$1 from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { SparkButtonColor } from "./button.js";
+import { n as SparkButtonColor } from "../theme-types-CKZzOmSa.js";
 import { ToggleProps, ToggleStyle } from "./toggle.js";
 import * as React$1 from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";

package/dist/components/toggle.d.cts

@@ -1,7 +1,7 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
-import { SparkButtonColor, buttonVariants } from "./button.cjs";
+import { g as SparkStyle, n as SparkButtonColor } from "../theme-types-CKZzOmSa.cjs";
+import { buttonVariants } from "./button.cjs";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";

package/dist/components/toggle.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
-import { SparkButtonColor, buttonVariants } from "./button.js";
+import { g as SparkStyle, n as SparkButtonColor } from "../theme-types-CKZzOmSa.js";
+import { buttonVariants } from "./button.js";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";

package/dist/lib/accent-theme.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { c as SparkNeutralFamily, s as SparkNeutral } from "../theme-types-Bn5E15-P.cjs";
+import { d as SparkNeutral, f as SparkNeutralFamily } from "../theme-types-CKZzOmSa.cjs";
 import { t as generateRadixColors } from "../generate-radix-colors-BY4Wjsm7.cjs";
 
 //#region src/lib/accent-theme.d.ts

package/dist/lib/accent-theme.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { c as SparkNeutralFamily, s as SparkNeutral } from "../theme-types-Bn5E15-P.js";
+import { d as SparkNeutral, f as SparkNeutralFamily } from "../theme-types-CKZzOmSa.js";
 import { t as generateRadixColors } from "../generate-radix-colors-BY4Wjsm7.js";
 
 //#region src/lib/accent-theme.d.ts

package/dist/lib/container-chrome.cjs

@@ -12,12 +12,12 @@ const radiusClasses = {
 	full: "rounded-full"
 };
 const containerChrome = {
-	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))",
-	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]",
-	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
+	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]",
+	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]",
+	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]",
 	outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
 	ghost: "[--spark-card-bg:transparent]",
-	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]"
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]"
 };
 const containerPaddingX = {
 	ambient: "px-(--spark-card-px,1rem)",

package/dist/lib/container-chrome.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
+{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is Card's cva key for an unset `variant` prop and List's opt-in `variant` — not\n// part of the public SparkCardVariant union, which Card shares with Theme's `cardVariant`.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}

package/dist/lib/container-chrome.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { r as SparkCardVariant } from "../theme-types-Bn5E15-P.cjs";
+import { s as SparkCardVariant } from "../theme-types-CKZzOmSa.cjs";
 
 //#region src/lib/container-chrome.d.ts
 type ContainerVariant = SparkCardVariant | 'ambient';

package/dist/lib/container-chrome.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { r as SparkCardVariant } from "../theme-types-Bn5E15-P.js";
+import { s as SparkCardVariant } from "../theme-types-CKZzOmSa.js";
 
 //#region src/lib/container-chrome.d.ts
 type ContainerVariant = SparkCardVariant | 'ambient';

package/dist/lib/container-chrome.js

@@ -11,12 +11,12 @@ const radiusClasses = {
 	full: "rounded-full"
 };
 const containerChrome = {
-	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))",
-	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]",
-	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
+	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]",
+	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]",
+	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]",
 	outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
 	ghost: "[--spark-card-bg:transparent]",
-	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]"
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]"
 };
 const containerPaddingX = {
 	ambient: "px-(--spark-card-px,1rem)",

package/dist/lib/container-chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
+{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is Card's cva key for an unset `variant` prop and List's opt-in `variant` — not\n// part of the public SparkCardVariant union, which Card shares with Theme's `cardVariant`.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}

package/dist/lib/input-box-variants.cjs

@@ -3,20 +3,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let cn = require("cn");
 //#region src/lib/input-box-variants.ts
 const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
-const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8";
-const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!";
+const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)";
+const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!";
 const boxChrome = {
 	soft: {
-		brand: (0, cn.cn)(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active"),
-		gray: (0, cn.cn)(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8")
+		brand: (0, cn.cn)(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)"),
+		gray: (0, cn.cn)(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)")
 	},
 	surface: {
-		brand: (0, cn.cn)(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: (0, cn.cn)(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: (0, cn.cn)(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: (0, cn.cn)(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	outlined: {
-		brand: (0, cn.cn)(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: (0, cn.cn)(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: (0, cn.cn)(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: (0, cn.cn)(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	ghost: {
 		brand: (0, cn.cn)(GHOST_UNDERLINE, "border-b-input"),

package/dist/lib/input-box-variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants.cjs","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,GAAA,IACE,WACA,sFACF;EACA,OAAA,GAAA,GAAA,IACE,WACA,4EACF;CACF;CACA,SAAS;EACP,QAAA,GAAA,GAAA,IACE,UACA,mGACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,gGACF;CACF;CACA,UAAU;EACR,QAAA,GAAA,GAAA,IACE,UACA,4EACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,2EACF;CACF;CACA,OAAO;EACL,QAAA,GAAA,GAAA,IAAU,iBAAiB,gBAAgB;EAC3C,OAAA,GAAA,GAAA,IAAS,iBAAiB,qBAAqB;CACjD;AACF"}
+{"version":3,"file":"input-box-variants.cjs","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,GAAA,IACE,WACA,8FACF;EACA,OAAA,GAAA,GAAA,IACE,WACA,yFACF;CACF;CACA,SAAS;EACP,QAAA,GAAA,GAAA,IACE,UACA,+GACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,6GACF;CACF;CACA,UAAU;EACR,QAAA,GAAA,GAAA,IACE,UACA,wFACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,wFACF;CACF;CACA,OAAO;EACL,QAAA,GAAA,GAAA,IAAU,iBAAiB,gBAAgB;EAC3C,OAAA,GAAA,GAAA,IAAS,iBAAiB,qBAAqB;CACjD;AACF"}

package/dist/lib/input-box-variants.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, i as SparkInputColor } from "../theme-types-Bn5E15-P.cjs";
+import { c as SparkInputColor, l as SparkInputStyle } from "../theme-types-CKZzOmSa.cjs";
 
 //#region src/lib/input-box-variants.d.ts
 declare const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";

package/dist/lib/input-box-variants.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, i as SparkInputColor } from "../theme-types-Bn5E15-P.js";
+import { c as SparkInputColor, l as SparkInputStyle } from "../theme-types-CKZzOmSa.js";
 
 //#region src/lib/input-box-variants.d.ts
 declare const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";

package/dist/lib/input-box-variants.js

@@ -2,20 +2,20 @@
 import { cn } from "../utils/cn.js";
 //#region src/lib/input-box-variants.ts
 const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
-const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8";
-const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!";
+const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)";
+const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!";
 const boxChrome = {
 	soft: {
-		brand: cn(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active"),
-		gray: cn(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8")
+		brand: cn(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)"),
+		gray: cn(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)")
 	},
 	surface: {
-		brand: cn(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: cn(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: cn(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: cn(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	outlined: {
-		brand: cn(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: cn(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: cn(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: cn(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	ghost: {
 		brand: cn(GHOST_UNDERLINE, "border-b-input"),

package/dist/lib/input-box-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants.js","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,sFACF;EACA,MAAM,GACJ,WACA,4EACF;CACF;CACA,SAAS;EACP,OAAO,GACL,UACA,mGACF;EACA,MAAM,GACJ,UACA,gGACF;CACF;CACA,UAAU;EACR,OAAO,GACL,UACA,4EACF;EACA,MAAM,GACJ,UACA,2EACF;CACF;CACA,OAAO;EACL,OAAO,GAAG,iBAAiB,gBAAgB;EAC3C,MAAM,GAAG,iBAAiB,qBAAqB;CACjD;AACF"}
+{"version":3,"file":"input-box-variants.js","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,8FACF;EACA,MAAM,GACJ,WACA,yFACF;CACF;CACA,SAAS;EACP,OAAO,GACL,UACA,+GACF;EACA,MAAM,GACJ,UACA,6GACF;CACF;CACA,UAAU;EACR,OAAO,GACL,UACA,wFACF;EACA,MAAM,GACJ,UACA,wFACF;CACF;CACA,OAAO;EACL,OAAO,GAAG,iBAAiB,gBAAgB;EAC3C,MAAM,GAAG,iBAAiB,qBAAqB;CACjD;AACF"}