@epilot/spark-ui 0.10.1 → 0.11.1

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

@@ -0,0 +1,15 @@
+"use client";
+
+import { n as SparkCardVariant } from "../theme-types-1yB0d8mp.js";
+
+//#region src/lib/container-chrome.d.ts
+type ContainerVariant = SparkCardVariant | 'ambient';
+type ContainerRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+declare const radiusClasses: Record<ContainerRadius, string>;
+declare const containerChrome: Record<ContainerVariant, string>;
+declare const containerPaddingX: Record<ContainerVariant, string>;
+declare const containerPaddingAll: Record<ContainerVariant, string>;
+declare function containerInteractiveClasses(resolved: ContainerVariant): (string | false)[];
+//#endregion
+export { ContainerRadius, ContainerVariant, containerChrome, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
+//# sourceMappingURL=container-chrome.d.ts.map

package/dist/lib/container-chrome.js

@@ -0,0 +1,48 @@
+"use client";
+//#region src/lib/container-chrome.ts
+const radiusClasses = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl",
+	"2xl": "rounded-2xl",
+	"3xl": "rounded-3xl",
+	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))",
+	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))",
+	outline: "border border-(--spark-card-c-border,var(--neutral-a6))",
+	ghost: "",
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
+};
+const containerPaddingX = {
+	ambient: "px-(--spark-card-px,1rem)",
+	soft: "px-4",
+	surface: "px-4",
+	outline: "px-4",
+	ghost: "",
+	solid: "px-4"
+};
+const containerPaddingAll = {
+	ambient: "p-(--spark-card-px,1rem)",
+	soft: "p-4",
+	surface: "p-4",
+	outline: "p-4",
+	ghost: "",
+	solid: "p-4"
+};
+function containerInteractiveClasses(resolved) {
+	return [
+		"cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none",
+		"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+		"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+		(resolved === "ambient" || resolved === "soft") && "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))"
+	];
+}
+//#endregion
+export { containerChrome, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
+
+//# sourceMappingURL=container-chrome.js.map

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

@@ -0,0 +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.\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))',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))',\n  outline: 'border border-(--spark-card-c-border,var(--neutral-a6))',\n  ghost: '',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]',\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\nexport function containerInteractiveClasses(resolved: ContainerVariant) {\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    (resolved === 'ambient' || resolved === 'soft') &&\n      'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))',\n  ]\n}\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAIA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SAAS;CACT,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;AAEA,SAAgB,4BAA4B,UAA4B;CACtE,OAAO;EACL;EACA;EACA;GAEC,aAAa,aAAa,aAAa,WACtC;CACJ;AACF"}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle, r as SparkInputColor } from "../theme-types-8wjgiNA_.cjs";
+import { i as SparkInputStyle, r as SparkInputColor } from "../theme-types-1yB0d8mp.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 { i as SparkInputStyle, r as SparkInputColor } from "../theme-types-8wjgiNA_.js";
+import { i as SparkInputStyle, r as SparkInputColor } from "../theme-types-1yB0d8mp.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/theme-types.d.cts

@@ -1,4 +1,4 @@
 "use client";
 
-import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
 export { SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkRadius, SparkScaling, SparkSpacing, SparkStyle };

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

@@ -1,4 +1,4 @@
 "use client";
 
-import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 export { SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkRadius, SparkScaling, SparkSpacing, SparkStyle };

package/dist/styles/spark-default.css

@@ -220,6 +220,25 @@
     --spark-rounded-3xl: calc(16px * var(--spark-rounded-factor));
   }
 
+  /*
+   * Typography (gap 5, library-gaps audit). `<Theme fontHeading fontBody>` writes
+   * the two vars as inline styles (same mechanism as `accentColor`) — free-form
+   * font stacks, not an enum, so there's no `[data-*]` preset to key off. Falling
+   * back to `inherit` keeps a `<Theme>` that sets neither exactly as before: no
+   * rule here ever changes what a component would otherwise inherit from outside
+   * spark, so this is purely additive. `.spark-theme` is the only selector needed
+   * (not `:root` + a `:where(… .spark-theme)` twin) because `font-family` is an
+   * ordinary inherited property with no `@theme inline` alias in the chain, so it
+   * cannot freeze the way gap 3c's `--color-gray-*` did.
+   */
+  .spark-theme {
+    font-family: var(--spark-font-body, inherit);
+  }
+
+  .spark-theme :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--spark-font-heading, inherit);
+  }
+
   /*
    * Roundness presets. Sets the factor on the scoped element; descendants
    * inherit, so it cascades and is overridable at any level (global → block →
@@ -514,10 +533,17 @@
   :where([data-style='solid'] .spark-theme) {
     --spark-style-bg: var(--spark-9);
     --spark-style-bg-hover: var(--spark-10);
-    /* fg intentionally unset: a solid foreground means different things per role, so
-       each component falls back to the right contrast — Button *text* → --spark-contrast
-       (AA-enforced 4.5:1), Checkbox *check glyph* → --spark-on-solid (native ~3:1, white
-       on any accent). Baking one here would give one of them the wrong contrast. */
+    /* fg intentionally has no *value* here — a solid foreground means different things
+       per role, so each component should fall back to its own right contrast: Button
+       *text* → --spark-contrast (AA-enforced 4.5:1), Checkbox *check glyph* →
+       --spark-on-solid (native ~3:1, white on any accent). Baking one here would give one
+       of them the wrong contrast. But custom properties inherit, so simply never
+       declaring it let a solid element pick up whatever value an ancestor's own
+       [data-style] (or a differently accented ancestor <Theme>) left behind, instead of
+       reaching any fallback at all. `initial` resets it to the guaranteed-invalid value
+       right here, which is what actually makes every consumer's own var(…, fallback)
+       fire — and stops it propagating any further into solid's own descendants either. */
+    --spark-style-fg: initial;
     --spark-style-border: transparent;
   }
 
@@ -775,14 +801,14 @@
     --spark-card-icon: var(--spark-a11);
   }
 
-  /* HIDDEN for now: `SparkCardVariant` omits `solid` (content-contrast story TBD),
-     so the typed API never emits data-card-variant='solid'. Kept dormant + ready. */
   [data-card-variant='solid'],
   :where([data-card-variant='solid'] .spark-theme),
   :where([data-card-variant='solid'] [data-card-color]) {
-    /* dark fill → light contrast ink on all slots (accent contrast is AA-enforced) */
+    /* neutral: --neutral-1/--neutral-12 fill/ink — Radix's own bg+text pair, so
+       contrast holds in both appearances with no fixed override needed. accent:
+       --spark-9/--spark-contrast (AA-enforced) instead, via the accent block above. */
     --spark-card-px: 1rem;
-    --spark-card-bg: var(--spark-card-c-solid, var(--neutral-9));
+    --spark-card-bg: var(--spark-card-c-solid, var(--neutral-1));
     --spark-card-border: transparent;
     --spark-card-border-width: 0px;
     --spark-card-fg: var(--spark-card-c-contrast, var(--neutral-contrast));

package/dist/{theme-types-8wjgiNA_.d.ts → theme-types-1yB0d8mp.d.cts}

@@ -7,12 +7,12 @@ type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%';
 type SparkSpacing = 'dense' | 'default' | 'roomy';
 type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline';
 /**
- * Card chrome variants. `solid` is intentionally hidden for now: a solid fill
- * needs a settled content-contrast story (readable text + nested controls on the
- * fill) that isn't decided yet. The recipe stays in the CSS/cva — just not offered —
- * so re-enabling is only widening this type back to `SparkStyle`.
+ * Card chrome variants. `solid` pairs the neutral scale's own background/text
+ * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix
+ * guarantees stays AA-compliant in both light and dark, so it needs no fixed
+ * (non-appearance-tracking) override the way accent's solid ink does.
  */
-type SparkCardVariant = Exclude<SparkStyle, 'solid'>;
+type SparkCardVariant = SparkStyle;
 /**
  * Card container chrome palette. `neutral` (default) paints through the app
  * theme's neutral scale, so a card inherits the configured neutral colour;
@@ -26,4 +26,4 @@ type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost';
 type SparkInputColor = 'brand' | 'gray';
 //#endregion
 export { SparkLabelPosition as a, SparkScaling as c, SparkInputStyle as i, SparkSpacing as l, SparkCardVariant as n, SparkNeutral as o, SparkInputColor as r, SparkRadius as s, SparkCardColor as t, SparkStyle as u };
-//# sourceMappingURL=theme-types-8wjgiNA_.d.ts.map
+//# sourceMappingURL=theme-types-1yB0d8mp.d.cts.map

package/dist/{theme-types-8wjgiNA_.d.cts → theme-types-1yB0d8mp.d.ts}

@@ -7,12 +7,12 @@ type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%';
 type SparkSpacing = 'dense' | 'default' | 'roomy';
 type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline';
 /**
- * Card chrome variants. `solid` is intentionally hidden for now: a solid fill
- * needs a settled content-contrast story (readable text + nested controls on the
- * fill) that isn't decided yet. The recipe stays in the CSS/cva — just not offered —
- * so re-enabling is only widening this type back to `SparkStyle`.
+ * Card chrome variants. `solid` pairs the neutral scale's own background/text
+ * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix
+ * guarantees stays AA-compliant in both light and dark, so it needs no fixed
+ * (non-appearance-tracking) override the way accent's solid ink does.
  */
-type SparkCardVariant = Exclude<SparkStyle, 'solid'>;
+type SparkCardVariant = SparkStyle;
 /**
  * Card container chrome palette. `neutral` (default) paints through the app
  * theme's neutral scale, so a card inherits the configured neutral colour;
@@ -26,4 +26,4 @@ type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost';
 type SparkInputColor = 'brand' | 'gray';
 //#endregion
 export { SparkLabelPosition as a, SparkScaling as c, SparkInputStyle as i, SparkSpacing as l, SparkCardVariant as n, SparkNeutral as o, SparkInputColor as r, SparkRadius as s, SparkCardColor as t, SparkStyle as u };
-//# sourceMappingURL=theme-types-8wjgiNA_.d.cts.map
+//# sourceMappingURL=theme-types-1yB0d8mp.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",