@epilot/spark-ui 0.25.0 → 0.26.0

package/dist/components/theme.js

@@ -1,16 +1,17 @@
 "use client";
 "use client";
+import { cn } from "../utils/cn.js";
 import { isSparkNeutralFamily } from "../lib/theme-types.js";
 import { CURATED_ACCENTS, accentSparkVars, appearanceForBackground, generateAccentScale, getMatchingNeutral, invertAccentScale, isParsableColor, neutralFamilyVars, neutralSparkVars, resolveAutoNeutral } from "../lib/accent-theme.js";
-import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/theme.tsx
 /** The epilot brand accent — the scale `spark-default.css` ships statically. */
 const DEFAULT_ACCENT = "#005EB4";
 const ThemeContext = React$1.createContext({});
+const ThemeOutputContext = React$1.createContext(null);
 /** Merged theme values from enclosing `<Theme>` providers. */
 function useTheme() {
 	return React$1.useContext(ThemeContext);
@@ -18,6 +19,7 @@ function useTheme() {
 /** 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 parent = useTheme();
+	const parentOutput = React$1.useContext(ThemeOutputContext);
 	const value = React$1.useMemo(() => ({
 		accentColor: accentColor ?? parent.accentColor,
 		backgroundColor: backgroundColor ?? parent.backgroundColor,
@@ -65,6 +67,8 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 	const accent = React$1.useMemo(() => {
 		const empty = {
 			inlineVars: {},
+			portalVars: {},
+			portalScope: void 0,
 			css: "",
 			scoped: false
 		};
@@ -86,21 +90,44 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 			const build = (appearance) => {
 				const opts = optsFor(appearance);
 				const scale = generateAccentScale(hex, appearance, opts);
-				return emit(inverted ? invertAccentScale(scale) : scale, opts != null);
-			};
-			if (value.appearance) return {
-				inlineVars: toVars(build(value.appearance)),
-				css: "",
-				scoped: false
+				const rendered = emit(inverted ? invertAccentScale(scale) : scale, opts != null);
+				return {
+					rendered,
+					plain: inverted ? emit(scale, opts != null) : rendered
+				};
 			};
+			if (value.appearance) {
+				const { rendered, plain } = build(value.appearance);
+				const inlineVars = toVars(rendered);
+				return {
+					inlineVars,
+					portalVars: inverted ? toVars(plain) : inlineVars,
+					portalScope: void 0,
+					css: "",
+					scoped: false
+				};
+			}
 			const offCanvasNeutrals = backgroundColor ? neutralFamilyVars(resolvedNeutralColor ?? "slate") : [];
-			const scaleFor = (appearance) => bgAppearance === appearance ? build(appearance) : [...build(appearance), ...offCanvasNeutrals];
+			const scaleFor = (appearance) => {
+				const { rendered, plain } = build(appearance);
+				const extra = bgAppearance === appearance ? [] : offCanvasNeutrals;
+				return {
+					rendered: [...rendered, ...extra],
+					plain: [...plain, ...extra]
+				};
+			};
 			const light = scaleFor("light");
 			const dark = scaleFor("dark");
-			const sel = `[data-spark-scope="${scopeId}"]`;
+			const rule = (id, lightDecls, darkDecls) => {
+				const sel = `[data-spark-scope~="${id}"]`;
+				return `${sel}{${lightDecls.join("")}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join("")}}`;
+			};
+			const portalScope = inverted ? `${scopeId}p` : scopeId;
 			return {
 				inlineVars: {},
-				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				portalVars: {},
+				portalScope,
+				css: rule(scopeId, light.rendered, dark.rendered) + (inverted ? rule(portalScope, light.plain, dark.plain) : ""),
 				scoped: true
 			};
 		} catch (error) {
@@ -116,41 +143,107 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		value.appearance,
 		scopeId
 	]);
+	const attrs = React$1.useMemo(() => ({
+		"data-neutral-color": neutralColorAttr,
+		"data-radius": radius,
+		"data-scaling": scaling,
+		"data-spacing": spacing,
+		"data-style": styleVariant,
+		"data-high-contrast": highContrast ? "" : void 0,
+		"data-label-position": labelPosition,
+		"data-input-style": inputStyle,
+		"data-input-color": inputColor,
+		"data-card-variant": cardVariant,
+		"data-card-color": cardColor === "accent" ? "accent" : void 0
+	}), [
+		neutralColorAttr,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor
+	]);
+	const fontVars = React$1.useMemo(() => ({
+		...fontHeading ? { "--spark-font-heading": fontHeading } : null,
+		...fontBody ? { "--spark-font-body": fontBody } : null
+	}), [fontHeading, fontBody]);
 	const element = useRender({
 		defaultTagName: "div",
 		render,
 		ref,
 		props: mergeProps({
 			className: cn("spark-theme", appearance, className),
-			"data-neutral-color": neutralColorAttr,
-			"data-radius": radius,
-			"data-scaling": scaling,
-			"data-spacing": spacing,
-			"data-style": styleVariant,
-			"data-high-contrast": highContrast ? "" : void 0,
+			...attrs,
 			"data-inverted": inverted ? "" : void 0,
-			"data-label-position": labelPosition,
-			"data-input-style": inputStyle,
-			"data-input-color": inputColor,
-			"data-card-variant": cardVariant,
-			"data-card-color": cardColor === "accent" ? "accent" : void 0,
 			"data-spark-scope": accent.scoped ? scopeId : void 0,
 			style: {
 				...accent.inlineVars,
 				...backgroundColor ? { backgroundColor: "var(--spark-background)" } : null,
-				...fontHeading ? { "--spark-font-heading": fontHeading } : null,
-				...fontBody ? { "--spark-font-body": fontBody } : null,
+				...fontVars,
 				...style
 			},
 			children
 		}, rest)
 	});
-	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+	const output = React$1.useMemo(() => {
+		const own = Object.fromEntries(Object.entries(attrs).filter((entry) => entry[1] !== void 0));
+		const parentScopes = parentOutput?.scopes ?? [];
+		return {
+			attrs: {
+				...parentOutput?.attrs,
+				...own
+			},
+			vars: {
+				...parentOutput?.vars,
+				...accent.portalVars,
+				...fontVars
+			},
+			scopes: accent.portalScope ? [...parentScopes, accent.portalScope] : parentScopes
+		};
+	}, [
+		parentOutput,
+		attrs,
+		accent,
+		fontVars
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
 		value,
-		children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+		children: /* @__PURE__ */ jsxs(ThemeOutputContext.Provider, {
+			value: output,
+			children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+		})
 	});
 });
+/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */
+function PortalTheme({ children }) {
+	const output = React$1.useContext(ThemeOutputContext);
+	const theme = useTheme();
+	const value = React$1.useMemo(() => ({
+		...theme,
+		inverted: false
+	}), [theme]);
+	if (!output) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "portal-theme",
+			className: cn("spark-theme", theme.appearance),
+			...output.attrs,
+			"data-spark-scope": output.scopes.length ? output.scopes.join(" ") : void 0,
+			style: {
+				display: "contents",
+				...output.vars
+			},
+			children
+		})
+	});
+}
 //#endregion
-export { Theme, useTheme };
+export { PortalTheme, Theme, useTheme };
 
 //# sourceMappingURL=theme.js.map

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/** 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\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        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          return emit(inverted ? invertAccentScale(scale) : scale, opts != null)\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          return {\n            inlineVars: toVars(build(value.appearance)),\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          bgAppearance === appearance\n            ? build(appearance)\n            : [...build(appearance), ...offCanvasNeutrals]\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const sel = `[data-spark-scope=\"${scopeId}\"]`\n        const css = `${sel}{${light.join('')}}:is(.dark,.dark-theme) ${sel}{${dark.join('')}}`\n        return { inlineVars: {} as React.CSSProperties, css, scoped: true }\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 element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\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-inverted': inverted ? '' : 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          '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            ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n            ...(fontBody ? { '--spark-font-body': fontBody } : null),\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    return (\n      <ThemeContext.Provider value={value}>\n        {accent.css ? <style>{accent.css}</style> : null}\n        {element}\n      </ThemeContext.Provider>\n    )\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 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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"}

package/dist/components/toast.cjs

@@ -3,6 +3,7 @@
 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_spinner = require("./spinner.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
@@ -194,7 +195,7 @@ function Toaster({ className, closeButton = true, closeLabel = "Close", duration
 		limit,
 		timeout: duration,
 		toastManager: manager,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_theme.PortalTheme, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
 			className: (0, cn.cn)("fixed inset-x-4 z-50 block h-0 outline-none", mobilePosition === "top" ? "top-4" : "bottom-4", "sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]", POSITION_CLASSES[position], className),
 			"data-mobile-side": mobilePosition,
 			"data-side": position.startsWith("top") ? "top" : "bottom",
@@ -204,7 +205,7 @@ function Toaster({ className, closeButton = true, closeLabel = "Close", duration
 				closeLabel,
 				richColors
 			})
-		}) })
+		}) }) })
 	});
 }
 //#endregion

package/dist/components/toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.cjs","names":["CheckCircle","Info","Warning","Cancel","ToastPrimitive","Spinner","buttonVariants","Close"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport type { BaseUIEvent } from '@base-ui/react/types'\nimport {\n  Cancel,\n  CheckCircle,\n  Close,\n  Info,\n  Warning,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = {\n  closeButton?: boolean\n  closeLabel?: string\n  icon?: React.ReactNode\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'children'\n> & {\n  label: React.ReactNode\n}\n\ntype ToastOptions = {\n  description?: React.ReactNode\n  /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n  duration?: number\n  /** Reuse an id to update a toast in place instead of stacking a new one. */\n  id?: string\n  closeButton?: boolean\n  /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */\n  closeLabel?: string\n  /**\n   * Replaces the type icon. `null` renders no icon. The icon is decorative,\n   * so the title has to carry the meaning on its own.\n   */\n  icon?: React.ReactNode\n  /**\n   * Runs when the close button is clicked. Call `event.preventDefault()` to\n   * keep the toast open, for example to cancel a running download first.\n   */\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  action?: ToastAction\n  onDismiss?: () => void\n  /** `high` announces urgently (assertive); the default is polite. */\n  priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n  loading: string\n  success: string | ((value: Value) => string)\n  error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n  Exclude<ToastType, 'loading'>,\n  { icon: SparkIcon; className: string }\n> = {\n  success: { icon: CheckCircle, className: 'text-success-light' },\n  info: { icon: Info, className: 'text-info-light' },\n  warning: { icon: Warning, className: 'text-warning-light' },\n  error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n  success: 'border-green-6 bg-green-2 text-green-11',\n  info: 'border-blue-6 bg-blue-2 text-blue-11',\n  warning: 'border-orange-6 bg-orange-2 text-orange-11',\n  error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n  'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n  'top-center':\n    'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n  'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n  'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n  'bottom-center':\n    'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n  'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n  label: _label,\n  onClick: _onClick,\n  ...rest\n}: ToastAction) {\n  return rest\n}\n\nfunction toManagerOptions(\n  id: string,\n  title: React.ReactNode,\n  type: ToastType | undefined,\n  options: ToastOptions | undefined,\n) {\n  const action = options?.action\n  return {\n    id,\n    title,\n    type,\n    description: options?.description,\n    timeout: options?.duration,\n    priority: options?.priority,\n    onClose: options?.onDismiss,\n    // Base UI leaves the toast open after an action; dismissing matches what\n    // callers expect from an \"Undo\" button.\n    actionProps: action && {\n      ...actionRest(action),\n      children: action.label,\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n        action.onClick?.(event)\n        manager.close(id)\n      },\n    },\n    data: {\n      closeButton: options?.closeButton,\n      closeLabel: options?.closeLabel,\n      icon: options?.icon,\n      onCloseClick: options?.onCloseClick,\n    },\n  }\n}\n\nconst emit =\n  (type?: ToastType) =>\n  (message: React.ReactNode, options?: ToastOptions): string => {\n    // an id up front lets the action handler close the toast it belongs to\n    const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n    return manager.add(toManagerOptions(id, message, type, options))\n  }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n  <Value,>(\n    value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n    type: ToastType,\n  ) =>\n  (result: Value) => {\n    const resolved = typeof value === 'function' ? value(result) : value\n    return { title: resolved, type }\n  }\n\nconst toast = Object.assign(emit(), {\n  success: emit('success'),\n  info: emit('info'),\n  warning: emit('warning'),\n  error: emit('error'),\n  loading: emit('loading'),\n  /** Dismiss one toast, or every toast when called without an id. */\n  dismiss: (id?: string) => manager.close(id),\n  promise: <Value,>(\n    promiseValue: Promise<Value>,\n    messages: ToastPromiseMessages<Value>,\n  ) =>\n    manager.promise(promiseValue, {\n      loading: { title: messages.loading, type: 'loading' as const },\n      success: phase(messages.success, 'success'),\n      error: phase(messages.error as never, 'error'),\n    }),\n})\n\nfunction ToastIcon({\n  custom,\n  type,\n}: {\n  custom: React.ReactNode | undefined\n  type?: string\n}) {\n  const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n  if (custom !== undefined) {\n    if (custom === null || custom === false) return null\n    return (\n      <span\n        aria-hidden=\"true\"\n        className=\"flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]\"\n        data-slot=\"toast-icon\"\n      >\n        {custom}\n      </span>\n    )\n  }\n  if (type !== 'loading' && !icon) return null\n\n  const Glyph = icon?.icon\n\n  // Fixed box matching the title's line height, so the glyph and the spinner\n  // both centre on the first line whether or not a description follows.\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n      data-slot=\"toast-icon\"\n    >\n      {type === 'loading' ? (\n        // Decorative: the toast already announces the loading message, so the\n        // spinner must not add a second status live region.\n        <Spinner\n          className=\"text-gray-11\"\n          label=\"\"\n          role=\"presentation\"\n          size=\"sm\"\n        />\n      ) : Glyph ? (\n        <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n      ) : null}\n    </span>\n  )\n}\n\nfunction ToastItem({\n  closeButton,\n  closeLabel,\n  richColors,\n  toast: toastObject,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n  toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n  const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n  const showClose = toastObject.data?.closeButton ?? closeButton\n  const onCloseClick = toastObject.data?.onCloseClick\n\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(\n        // Skin only. All geometry (position, stacking, transitions, the\n        // pointer bridge) lives in styles/index.css, because Tailwind's\n        // `utilities` layer outranks `components` and a stray `bottom-0` here\n        // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n        // The border is what makes the cards behind the front one legible.\n        'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n        richColors && tone,\n      )}\n      // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n      // both vertical directions have to dismiss\n      swipeDirection={['up', 'down', 'right']}\n      toast={toastObject}\n    >\n      <ToastIcon custom={toastObject.data?.icon} type={toastObject.type} />\n      <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <ToastPrimitive.Title\n          className=\"text-sm font-medium\"\n          data-slot=\"toast-title\"\n        />\n        <ToastPrimitive.Description\n          className={cn(\n            'text-sm',\n            richColors && tone ? 'text-inherit' : 'text-gray-11',\n          )}\n          data-slot=\"toast-description\"\n        />\n      </ToastPrimitive.Content>\n      {toastObject.actionProps ? (\n        <ToastPrimitive.Action\n          // -my-2 keeps the 36px control from stretching a single-line row past\n          // the 20px text; self-center then lands it on the title when there is\n          // no description, and mid-block when there is one\n          className={cn(\n            buttonVariants({ size: 'small', variant: 'primary' }),\n            '-my-2 shrink-0 self-center rounded-full',\n          )}\n          data-slot=\"toast-action\"\n        />\n      ) : null}\n      {showClose ? (\n        <ToastPrimitive.Close\n          aria-label={toastObject.data?.closeLabel ?? closeLabel}\n          className={cn(\n            buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n            // -my-1: same reason as the action, for a 28px control\n            '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n          )}\n          data-slot=\"toast-close\"\n          onClick={\n            onCloseClick &&\n            ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => {\n              onCloseClick(event)\n              // Base UI's own close runs after this handler unless prevented.\n              if (event.defaultPrevented) event.preventBaseUIHandler()\n            })\n          }\n        >\n          <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n        </ToastPrimitive.Close>\n      ) : null}\n    </ToastPrimitive.Root>\n  )\n}\n\nfunction ToastList({\n  closeButton,\n  closeLabel,\n  richColors,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n}) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n  return toasts.map((toastObject) => (\n    <ToastItem\n      closeButton={closeButton}\n      closeLabel={closeLabel}\n      key={toastObject.id}\n      richColors={richColors}\n      toast={toastObject}\n    />\n  ))\n}\n\ntype ToasterProps = {\n  className?: string\n  /** Corner or edge the toasts stack in. */\n  position?: ToastPosition\n  /** Close button on every toast; a per-toast `closeButton` wins. */\n  closeButton?: boolean\n  /** Accessible name of every close button; a per-toast `closeLabel` wins. */\n  closeLabel?: string\n  /** Tinted surfaces for success/info/warning/error toasts. */\n  richColors?: boolean\n  /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n  duration?: number\n  /** Toasts visible at once before older ones are marked `data-limited`. */\n  limit?: number\n  /**\n   * Vertical edge below the `sm` breakpoint, where the stack is always\n   * full-width and `position` does not apply. Defaults to `top`, matching the\n   * end-customer portal.\n   */\n  mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n  className,\n  closeButton = true,\n  closeLabel = 'Close',\n  duration = 4000,\n  limit,\n  mobilePosition = 'top',\n  position = 'bottom-right',\n  richColors = true,\n}: ToasterProps) {\n  return (\n    <ToastPrimitive.Provider\n      limit={limit}\n      timeout={duration}\n      toastManager={manager}\n    >\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          // block + zero height: the toasts are absolutely positioned against\n          // this box's bottom edge, the way Base UI's stacked example works\n          className={cn(\n            'fixed inset-x-4 z-50 block h-0 outline-none',\n            mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n            'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n            POSITION_CLASSES[position],\n            className,\n          )}\n          data-mobile-side={mobilePosition}\n          data-side={position.startsWith('top') ? 'top' : 'bottom'}\n          data-slot=\"toaster\"\n        >\n          <ToastList\n            closeButton={closeButton}\n            closeLabel={closeLabel}\n            richColors={richColors}\n          />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  )\n}\n\nexport { Toaster, toast }\nexport type {\n  ToastAction,\n  ToasterProps,\n  ToastOptions,\n  ToastPosition,\n  ToastPromiseMessages,\n  ToastType,\n}\n"],"mappings":"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"}
+{"version":3,"file":"toast.cjs","names":["CheckCircle","Info","Warning","Cancel","ToastPrimitive","Spinner","buttonVariants","Close","PortalTheme"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport type { BaseUIEvent } from '@base-ui/react/types'\nimport {\n  Cancel,\n  CheckCircle,\n  Close,\n  Info,\n  Warning,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\nimport { PortalTheme } from './theme'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = {\n  closeButton?: boolean\n  closeLabel?: string\n  icon?: React.ReactNode\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'children'\n> & {\n  label: React.ReactNode\n}\n\ntype ToastOptions = {\n  description?: React.ReactNode\n  /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n  duration?: number\n  /** Reuse an id to update a toast in place instead of stacking a new one. */\n  id?: string\n  closeButton?: boolean\n  /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */\n  closeLabel?: string\n  /**\n   * Replaces the type icon. `null` renders no icon. The icon is decorative,\n   * so the title has to carry the meaning on its own.\n   */\n  icon?: React.ReactNode\n  /**\n   * Runs when the close button is clicked. Call `event.preventDefault()` to\n   * keep the toast open, for example to cancel a running download first.\n   */\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  action?: ToastAction\n  onDismiss?: () => void\n  /** `high` announces urgently (assertive); the default is polite. */\n  priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n  loading: string\n  success: string | ((value: Value) => string)\n  error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n  Exclude<ToastType, 'loading'>,\n  { icon: SparkIcon; className: string }\n> = {\n  success: { icon: CheckCircle, className: 'text-success-light' },\n  info: { icon: Info, className: 'text-info-light' },\n  warning: { icon: Warning, className: 'text-warning-light' },\n  error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n  success: 'border-green-6 bg-green-2 text-green-11',\n  info: 'border-blue-6 bg-blue-2 text-blue-11',\n  warning: 'border-orange-6 bg-orange-2 text-orange-11',\n  error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n  'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n  'top-center':\n    'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n  'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n  'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n  'bottom-center':\n    'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n  'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n  label: _label,\n  onClick: _onClick,\n  ...rest\n}: ToastAction) {\n  return rest\n}\n\nfunction toManagerOptions(\n  id: string,\n  title: React.ReactNode,\n  type: ToastType | undefined,\n  options: ToastOptions | undefined,\n) {\n  const action = options?.action\n  return {\n    id,\n    title,\n    type,\n    description: options?.description,\n    timeout: options?.duration,\n    priority: options?.priority,\n    onClose: options?.onDismiss,\n    // Base UI leaves the toast open after an action; dismissing matches what\n    // callers expect from an \"Undo\" button.\n    actionProps: action && {\n      ...actionRest(action),\n      children: action.label,\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n        action.onClick?.(event)\n        manager.close(id)\n      },\n    },\n    data: {\n      closeButton: options?.closeButton,\n      closeLabel: options?.closeLabel,\n      icon: options?.icon,\n      onCloseClick: options?.onCloseClick,\n    },\n  }\n}\n\nconst emit =\n  (type?: ToastType) =>\n  (message: React.ReactNode, options?: ToastOptions): string => {\n    // an id up front lets the action handler close the toast it belongs to\n    const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n    return manager.add(toManagerOptions(id, message, type, options))\n  }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n  <Value,>(\n    value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n    type: ToastType,\n  ) =>\n  (result: Value) => {\n    const resolved = typeof value === 'function' ? value(result) : value\n    return { title: resolved, type }\n  }\n\nconst toast = Object.assign(emit(), {\n  success: emit('success'),\n  info: emit('info'),\n  warning: emit('warning'),\n  error: emit('error'),\n  loading: emit('loading'),\n  /** Dismiss one toast, or every toast when called without an id. */\n  dismiss: (id?: string) => manager.close(id),\n  promise: <Value,>(\n    promiseValue: Promise<Value>,\n    messages: ToastPromiseMessages<Value>,\n  ) =>\n    manager.promise(promiseValue, {\n      loading: { title: messages.loading, type: 'loading' as const },\n      success: phase(messages.success, 'success'),\n      error: phase(messages.error as never, 'error'),\n    }),\n})\n\nfunction ToastIcon({\n  custom,\n  type,\n}: {\n  custom: React.ReactNode | undefined\n  type?: string\n}) {\n  const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n  if (custom !== undefined) {\n    if (custom === null || custom === false) return null\n    return (\n      <span\n        aria-hidden=\"true\"\n        className=\"flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]\"\n        data-slot=\"toast-icon\"\n      >\n        {custom}\n      </span>\n    )\n  }\n  if (type !== 'loading' && !icon) return null\n\n  const Glyph = icon?.icon\n\n  // Fixed box matching the title's line height, so the glyph and the spinner\n  // both centre on the first line whether or not a description follows.\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n      data-slot=\"toast-icon\"\n    >\n      {type === 'loading' ? (\n        // Decorative: the toast already announces the loading message, so the\n        // spinner must not add a second status live region.\n        <Spinner\n          className=\"text-gray-11\"\n          label=\"\"\n          role=\"presentation\"\n          size=\"sm\"\n        />\n      ) : Glyph ? (\n        <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n      ) : null}\n    </span>\n  )\n}\n\nfunction ToastItem({\n  closeButton,\n  closeLabel,\n  richColors,\n  toast: toastObject,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n  toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n  const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n  const showClose = toastObject.data?.closeButton ?? closeButton\n  const onCloseClick = toastObject.data?.onCloseClick\n\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(\n        // Skin only. All geometry (position, stacking, transitions, the\n        // pointer bridge) lives in styles/index.css, because Tailwind's\n        // `utilities` layer outranks `components` and a stray `bottom-0` here\n        // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n        // The border is what makes the cards behind the front one legible.\n        'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n        richColors && tone,\n      )}\n      // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n      // both vertical directions have to dismiss\n      swipeDirection={['up', 'down', 'right']}\n      toast={toastObject}\n    >\n      <ToastIcon custom={toastObject.data?.icon} type={toastObject.type} />\n      <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <ToastPrimitive.Title\n          className=\"text-sm font-medium\"\n          data-slot=\"toast-title\"\n        />\n        <ToastPrimitive.Description\n          className={cn(\n            'text-sm',\n            richColors && tone ? 'text-inherit' : 'text-gray-11',\n          )}\n          data-slot=\"toast-description\"\n        />\n      </ToastPrimitive.Content>\n      {toastObject.actionProps ? (\n        <ToastPrimitive.Action\n          // -my-2 keeps the 36px control from stretching a single-line row past\n          // the 20px text; self-center then lands it on the title when there is\n          // no description, and mid-block when there is one\n          className={cn(\n            buttonVariants({ size: 'small', variant: 'primary' }),\n            '-my-2 shrink-0 self-center rounded-full',\n          )}\n          data-slot=\"toast-action\"\n        />\n      ) : null}\n      {showClose ? (\n        <ToastPrimitive.Close\n          aria-label={toastObject.data?.closeLabel ?? closeLabel}\n          className={cn(\n            buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n            // -my-1: same reason as the action, for a 28px control\n            '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n          )}\n          data-slot=\"toast-close\"\n          onClick={\n            onCloseClick &&\n            ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => {\n              onCloseClick(event)\n              // Base UI's own close runs after this handler unless prevented.\n              if (event.defaultPrevented) event.preventBaseUIHandler()\n            })\n          }\n        >\n          <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n        </ToastPrimitive.Close>\n      ) : null}\n    </ToastPrimitive.Root>\n  )\n}\n\nfunction ToastList({\n  closeButton,\n  closeLabel,\n  richColors,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n}) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n  return toasts.map((toastObject) => (\n    <ToastItem\n      closeButton={closeButton}\n      closeLabel={closeLabel}\n      key={toastObject.id}\n      richColors={richColors}\n      toast={toastObject}\n    />\n  ))\n}\n\ntype ToasterProps = {\n  className?: string\n  /** Corner or edge the toasts stack in. */\n  position?: ToastPosition\n  /** Close button on every toast; a per-toast `closeButton` wins. */\n  closeButton?: boolean\n  /** Accessible name of every close button; a per-toast `closeLabel` wins. */\n  closeLabel?: string\n  /** Tinted surfaces for success/info/warning/error toasts. */\n  richColors?: boolean\n  /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n  duration?: number\n  /** Toasts visible at once before older ones are marked `data-limited`. */\n  limit?: number\n  /**\n   * Vertical edge below the `sm` breakpoint, where the stack is always\n   * full-width and `position` does not apply. Defaults to `top`, matching the\n   * end-customer portal.\n   */\n  mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n  className,\n  closeButton = true,\n  closeLabel = 'Close',\n  duration = 4000,\n  limit,\n  mobilePosition = 'top',\n  position = 'bottom-right',\n  richColors = true,\n}: ToasterProps) {\n  return (\n    <ToastPrimitive.Provider\n      limit={limit}\n      timeout={duration}\n      toastManager={manager}\n    >\n      <ToastPrimitive.Portal>\n        <PortalTheme>\n          <ToastPrimitive.Viewport\n            // block + zero height: the toasts are absolutely positioned against\n            // this box's bottom edge, the way Base UI's stacked example works\n            className={cn(\n              'fixed inset-x-4 z-50 block h-0 outline-none',\n              mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n              'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n              POSITION_CLASSES[position],\n              className,\n            )}\n            data-mobile-side={mobilePosition}\n            data-side={position.startsWith('top') ? 'top' : 'bottom'}\n            data-slot=\"toaster\"\n          >\n            <ToastList\n              closeButton={closeButton}\n              closeLabel={closeLabel}\n              richColors={richColors}\n            />\n          </ToastPrimitive.Viewport>\n        </PortalTheme>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  )\n}\n\nexport { Toaster, toast }\nexport type {\n  ToastAction,\n  ToasterProps,\n  ToastOptions,\n  ToastPosition,\n  ToastPromiseMessages,\n  ToastType,\n}\n"],"mappings":"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"}

package/dist/components/toast.js

@@ -2,6 +2,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
+import { PortalTheme } from "./theme.js";
 import { Spinner } from "./spinner.js";
 import "react";
 import { Cancel, CheckCircle, Close, Info, Warning } from "@epilot/spark-icons";
@@ -191,7 +192,7 @@ function Toaster({ className, closeButton = true, closeLabel = "Close", duration
 		limit,
 		timeout: duration,
 		toastManager: manager,
-		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(PortalTheme, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
 			className: cn("fixed inset-x-4 z-50 block h-0 outline-none", mobilePosition === "top" ? "top-4" : "bottom-4", "sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]", POSITION_CLASSES[position], className),
 			"data-mobile-side": mobilePosition,
 			"data-side": position.startsWith("top") ? "top" : "bottom",
@@ -201,7 +202,7 @@ function Toaster({ className, closeButton = true, closeLabel = "Close", duration
 				closeLabel,
 				richColors
 			})
-		}) })
+		}) }) })
 	});
 }
 //#endregion

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["ToastPrimitive"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport type { BaseUIEvent } from '@base-ui/react/types'\nimport {\n  Cancel,\n  CheckCircle,\n  Close,\n  Info,\n  Warning,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = {\n  closeButton?: boolean\n  closeLabel?: string\n  icon?: React.ReactNode\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'children'\n> & {\n  label: React.ReactNode\n}\n\ntype ToastOptions = {\n  description?: React.ReactNode\n  /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n  duration?: number\n  /** Reuse an id to update a toast in place instead of stacking a new one. */\n  id?: string\n  closeButton?: boolean\n  /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */\n  closeLabel?: string\n  /**\n   * Replaces the type icon. `null` renders no icon. The icon is decorative,\n   * so the title has to carry the meaning on its own.\n   */\n  icon?: React.ReactNode\n  /**\n   * Runs when the close button is clicked. Call `event.preventDefault()` to\n   * keep the toast open, for example to cancel a running download first.\n   */\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  action?: ToastAction\n  onDismiss?: () => void\n  /** `high` announces urgently (assertive); the default is polite. */\n  priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n  loading: string\n  success: string | ((value: Value) => string)\n  error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n  Exclude<ToastType, 'loading'>,\n  { icon: SparkIcon; className: string }\n> = {\n  success: { icon: CheckCircle, className: 'text-success-light' },\n  info: { icon: Info, className: 'text-info-light' },\n  warning: { icon: Warning, className: 'text-warning-light' },\n  error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n  success: 'border-green-6 bg-green-2 text-green-11',\n  info: 'border-blue-6 bg-blue-2 text-blue-11',\n  warning: 'border-orange-6 bg-orange-2 text-orange-11',\n  error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n  'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n  'top-center':\n    'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n  'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n  'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n  'bottom-center':\n    'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n  'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n  label: _label,\n  onClick: _onClick,\n  ...rest\n}: ToastAction) {\n  return rest\n}\n\nfunction toManagerOptions(\n  id: string,\n  title: React.ReactNode,\n  type: ToastType | undefined,\n  options: ToastOptions | undefined,\n) {\n  const action = options?.action\n  return {\n    id,\n    title,\n    type,\n    description: options?.description,\n    timeout: options?.duration,\n    priority: options?.priority,\n    onClose: options?.onDismiss,\n    // Base UI leaves the toast open after an action; dismissing matches what\n    // callers expect from an \"Undo\" button.\n    actionProps: action && {\n      ...actionRest(action),\n      children: action.label,\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n        action.onClick?.(event)\n        manager.close(id)\n      },\n    },\n    data: {\n      closeButton: options?.closeButton,\n      closeLabel: options?.closeLabel,\n      icon: options?.icon,\n      onCloseClick: options?.onCloseClick,\n    },\n  }\n}\n\nconst emit =\n  (type?: ToastType) =>\n  (message: React.ReactNode, options?: ToastOptions): string => {\n    // an id up front lets the action handler close the toast it belongs to\n    const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n    return manager.add(toManagerOptions(id, message, type, options))\n  }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n  <Value,>(\n    value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n    type: ToastType,\n  ) =>\n  (result: Value) => {\n    const resolved = typeof value === 'function' ? value(result) : value\n    return { title: resolved, type }\n  }\n\nconst toast = Object.assign(emit(), {\n  success: emit('success'),\n  info: emit('info'),\n  warning: emit('warning'),\n  error: emit('error'),\n  loading: emit('loading'),\n  /** Dismiss one toast, or every toast when called without an id. */\n  dismiss: (id?: string) => manager.close(id),\n  promise: <Value,>(\n    promiseValue: Promise<Value>,\n    messages: ToastPromiseMessages<Value>,\n  ) =>\n    manager.promise(promiseValue, {\n      loading: { title: messages.loading, type: 'loading' as const },\n      success: phase(messages.success, 'success'),\n      error: phase(messages.error as never, 'error'),\n    }),\n})\n\nfunction ToastIcon({\n  custom,\n  type,\n}: {\n  custom: React.ReactNode | undefined\n  type?: string\n}) {\n  const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n  if (custom !== undefined) {\n    if (custom === null || custom === false) return null\n    return (\n      <span\n        aria-hidden=\"true\"\n        className=\"flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]\"\n        data-slot=\"toast-icon\"\n      >\n        {custom}\n      </span>\n    )\n  }\n  if (type !== 'loading' && !icon) return null\n\n  const Glyph = icon?.icon\n\n  // Fixed box matching the title's line height, so the glyph and the spinner\n  // both centre on the first line whether or not a description follows.\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n      data-slot=\"toast-icon\"\n    >\n      {type === 'loading' ? (\n        // Decorative: the toast already announces the loading message, so the\n        // spinner must not add a second status live region.\n        <Spinner\n          className=\"text-gray-11\"\n          label=\"\"\n          role=\"presentation\"\n          size=\"sm\"\n        />\n      ) : Glyph ? (\n        <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n      ) : null}\n    </span>\n  )\n}\n\nfunction ToastItem({\n  closeButton,\n  closeLabel,\n  richColors,\n  toast: toastObject,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n  toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n  const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n  const showClose = toastObject.data?.closeButton ?? closeButton\n  const onCloseClick = toastObject.data?.onCloseClick\n\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(\n        // Skin only. All geometry (position, stacking, transitions, the\n        // pointer bridge) lives in styles/index.css, because Tailwind's\n        // `utilities` layer outranks `components` and a stray `bottom-0` here\n        // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n        // The border is what makes the cards behind the front one legible.\n        'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n        richColors && tone,\n      )}\n      // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n      // both vertical directions have to dismiss\n      swipeDirection={['up', 'down', 'right']}\n      toast={toastObject}\n    >\n      <ToastIcon custom={toastObject.data?.icon} type={toastObject.type} />\n      <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <ToastPrimitive.Title\n          className=\"text-sm font-medium\"\n          data-slot=\"toast-title\"\n        />\n        <ToastPrimitive.Description\n          className={cn(\n            'text-sm',\n            richColors && tone ? 'text-inherit' : 'text-gray-11',\n          )}\n          data-slot=\"toast-description\"\n        />\n      </ToastPrimitive.Content>\n      {toastObject.actionProps ? (\n        <ToastPrimitive.Action\n          // -my-2 keeps the 36px control from stretching a single-line row past\n          // the 20px text; self-center then lands it on the title when there is\n          // no description, and mid-block when there is one\n          className={cn(\n            buttonVariants({ size: 'small', variant: 'primary' }),\n            '-my-2 shrink-0 self-center rounded-full',\n          )}\n          data-slot=\"toast-action\"\n        />\n      ) : null}\n      {showClose ? (\n        <ToastPrimitive.Close\n          aria-label={toastObject.data?.closeLabel ?? closeLabel}\n          className={cn(\n            buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n            // -my-1: same reason as the action, for a 28px control\n            '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n          )}\n          data-slot=\"toast-close\"\n          onClick={\n            onCloseClick &&\n            ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => {\n              onCloseClick(event)\n              // Base UI's own close runs after this handler unless prevented.\n              if (event.defaultPrevented) event.preventBaseUIHandler()\n            })\n          }\n        >\n          <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n        </ToastPrimitive.Close>\n      ) : null}\n    </ToastPrimitive.Root>\n  )\n}\n\nfunction ToastList({\n  closeButton,\n  closeLabel,\n  richColors,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n}) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n  return toasts.map((toastObject) => (\n    <ToastItem\n      closeButton={closeButton}\n      closeLabel={closeLabel}\n      key={toastObject.id}\n      richColors={richColors}\n      toast={toastObject}\n    />\n  ))\n}\n\ntype ToasterProps = {\n  className?: string\n  /** Corner or edge the toasts stack in. */\n  position?: ToastPosition\n  /** Close button on every toast; a per-toast `closeButton` wins. */\n  closeButton?: boolean\n  /** Accessible name of every close button; a per-toast `closeLabel` wins. */\n  closeLabel?: string\n  /** Tinted surfaces for success/info/warning/error toasts. */\n  richColors?: boolean\n  /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n  duration?: number\n  /** Toasts visible at once before older ones are marked `data-limited`. */\n  limit?: number\n  /**\n   * Vertical edge below the `sm` breakpoint, where the stack is always\n   * full-width and `position` does not apply. Defaults to `top`, matching the\n   * end-customer portal.\n   */\n  mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n  className,\n  closeButton = true,\n  closeLabel = 'Close',\n  duration = 4000,\n  limit,\n  mobilePosition = 'top',\n  position = 'bottom-right',\n  richColors = true,\n}: ToasterProps) {\n  return (\n    <ToastPrimitive.Provider\n      limit={limit}\n      timeout={duration}\n      toastManager={manager}\n    >\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          // block + zero height: the toasts are absolutely positioned against\n          // this box's bottom edge, the way Base UI's stacked example works\n          className={cn(\n            'fixed inset-x-4 z-50 block h-0 outline-none',\n            mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n            'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n            POSITION_CLASSES[position],\n            className,\n          )}\n          data-mobile-side={mobilePosition}\n          data-side={position.startsWith('top') ? 'top' : 'bottom'}\n          data-slot=\"toaster\"\n        >\n          <ToastList\n            closeButton={closeButton}\n            closeLabel={closeLabel}\n            richColors={richColors}\n          />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  )\n}\n\nexport { Toaster, toast }\nexport type {\n  ToastAction,\n  ToasterProps,\n  ToastOptions,\n  ToastPosition,\n  ToastPromiseMessages,\n  ToastType,\n}\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":["ToastPrimitive"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport type { BaseUIEvent } from '@base-ui/react/types'\nimport {\n  Cancel,\n  CheckCircle,\n  Close,\n  Info,\n  Warning,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\nimport { PortalTheme } from './theme'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = {\n  closeButton?: boolean\n  closeLabel?: string\n  icon?: React.ReactNode\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'children'\n> & {\n  label: React.ReactNode\n}\n\ntype ToastOptions = {\n  description?: React.ReactNode\n  /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n  duration?: number\n  /** Reuse an id to update a toast in place instead of stacking a new one. */\n  id?: string\n  closeButton?: boolean\n  /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */\n  closeLabel?: string\n  /**\n   * Replaces the type icon. `null` renders no icon. The icon is decorative,\n   * so the title has to carry the meaning on its own.\n   */\n  icon?: React.ReactNode\n  /**\n   * Runs when the close button is clicked. Call `event.preventDefault()` to\n   * keep the toast open, for example to cancel a running download first.\n   */\n  onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  action?: ToastAction\n  onDismiss?: () => void\n  /** `high` announces urgently (assertive); the default is polite. */\n  priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n  loading: string\n  success: string | ((value: Value) => string)\n  error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n  Exclude<ToastType, 'loading'>,\n  { icon: SparkIcon; className: string }\n> = {\n  success: { icon: CheckCircle, className: 'text-success-light' },\n  info: { icon: Info, className: 'text-info-light' },\n  warning: { icon: Warning, className: 'text-warning-light' },\n  error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n  success: 'border-green-6 bg-green-2 text-green-11',\n  info: 'border-blue-6 bg-blue-2 text-blue-11',\n  warning: 'border-orange-6 bg-orange-2 text-orange-11',\n  error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n  'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n  'top-center':\n    'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n  'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n  'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n  'bottom-center':\n    'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n  'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n  label: _label,\n  onClick: _onClick,\n  ...rest\n}: ToastAction) {\n  return rest\n}\n\nfunction toManagerOptions(\n  id: string,\n  title: React.ReactNode,\n  type: ToastType | undefined,\n  options: ToastOptions | undefined,\n) {\n  const action = options?.action\n  return {\n    id,\n    title,\n    type,\n    description: options?.description,\n    timeout: options?.duration,\n    priority: options?.priority,\n    onClose: options?.onDismiss,\n    // Base UI leaves the toast open after an action; dismissing matches what\n    // callers expect from an \"Undo\" button.\n    actionProps: action && {\n      ...actionRest(action),\n      children: action.label,\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n        action.onClick?.(event)\n        manager.close(id)\n      },\n    },\n    data: {\n      closeButton: options?.closeButton,\n      closeLabel: options?.closeLabel,\n      icon: options?.icon,\n      onCloseClick: options?.onCloseClick,\n    },\n  }\n}\n\nconst emit =\n  (type?: ToastType) =>\n  (message: React.ReactNode, options?: ToastOptions): string => {\n    // an id up front lets the action handler close the toast it belongs to\n    const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n    return manager.add(toManagerOptions(id, message, type, options))\n  }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n  <Value,>(\n    value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n    type: ToastType,\n  ) =>\n  (result: Value) => {\n    const resolved = typeof value === 'function' ? value(result) : value\n    return { title: resolved, type }\n  }\n\nconst toast = Object.assign(emit(), {\n  success: emit('success'),\n  info: emit('info'),\n  warning: emit('warning'),\n  error: emit('error'),\n  loading: emit('loading'),\n  /** Dismiss one toast, or every toast when called without an id. */\n  dismiss: (id?: string) => manager.close(id),\n  promise: <Value,>(\n    promiseValue: Promise<Value>,\n    messages: ToastPromiseMessages<Value>,\n  ) =>\n    manager.promise(promiseValue, {\n      loading: { title: messages.loading, type: 'loading' as const },\n      success: phase(messages.success, 'success'),\n      error: phase(messages.error as never, 'error'),\n    }),\n})\n\nfunction ToastIcon({\n  custom,\n  type,\n}: {\n  custom: React.ReactNode | undefined\n  type?: string\n}) {\n  const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n  if (custom !== undefined) {\n    if (custom === null || custom === false) return null\n    return (\n      <span\n        aria-hidden=\"true\"\n        className=\"flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]\"\n        data-slot=\"toast-icon\"\n      >\n        {custom}\n      </span>\n    )\n  }\n  if (type !== 'loading' && !icon) return null\n\n  const Glyph = icon?.icon\n\n  // Fixed box matching the title's line height, so the glyph and the spinner\n  // both centre on the first line whether or not a description follows.\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n      data-slot=\"toast-icon\"\n    >\n      {type === 'loading' ? (\n        // Decorative: the toast already announces the loading message, so the\n        // spinner must not add a second status live region.\n        <Spinner\n          className=\"text-gray-11\"\n          label=\"\"\n          role=\"presentation\"\n          size=\"sm\"\n        />\n      ) : Glyph ? (\n        <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n      ) : null}\n    </span>\n  )\n}\n\nfunction ToastItem({\n  closeButton,\n  closeLabel,\n  richColors,\n  toast: toastObject,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n  toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n  const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n  const showClose = toastObject.data?.closeButton ?? closeButton\n  const onCloseClick = toastObject.data?.onCloseClick\n\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(\n        // Skin only. All geometry (position, stacking, transitions, the\n        // pointer bridge) lives in styles/index.css, because Tailwind's\n        // `utilities` layer outranks `components` and a stray `bottom-0` here\n        // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n        // The border is what makes the cards behind the front one legible.\n        'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n        richColors && tone,\n      )}\n      // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n      // both vertical directions have to dismiss\n      swipeDirection={['up', 'down', 'right']}\n      toast={toastObject}\n    >\n      <ToastIcon custom={toastObject.data?.icon} type={toastObject.type} />\n      <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <ToastPrimitive.Title\n          className=\"text-sm font-medium\"\n          data-slot=\"toast-title\"\n        />\n        <ToastPrimitive.Description\n          className={cn(\n            'text-sm',\n            richColors && tone ? 'text-inherit' : 'text-gray-11',\n          )}\n          data-slot=\"toast-description\"\n        />\n      </ToastPrimitive.Content>\n      {toastObject.actionProps ? (\n        <ToastPrimitive.Action\n          // -my-2 keeps the 36px control from stretching a single-line row past\n          // the 20px text; self-center then lands it on the title when there is\n          // no description, and mid-block when there is one\n          className={cn(\n            buttonVariants({ size: 'small', variant: 'primary' }),\n            '-my-2 shrink-0 self-center rounded-full',\n          )}\n          data-slot=\"toast-action\"\n        />\n      ) : null}\n      {showClose ? (\n        <ToastPrimitive.Close\n          aria-label={toastObject.data?.closeLabel ?? closeLabel}\n          className={cn(\n            buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n            // -my-1: same reason as the action, for a 28px control\n            '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n          )}\n          data-slot=\"toast-close\"\n          onClick={\n            onCloseClick &&\n            ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => {\n              onCloseClick(event)\n              // Base UI's own close runs after this handler unless prevented.\n              if (event.defaultPrevented) event.preventBaseUIHandler()\n            })\n          }\n        >\n          <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n        </ToastPrimitive.Close>\n      ) : null}\n    </ToastPrimitive.Root>\n  )\n}\n\nfunction ToastList({\n  closeButton,\n  closeLabel,\n  richColors,\n}: {\n  closeButton: boolean\n  closeLabel: string\n  richColors: boolean\n}) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n  return toasts.map((toastObject) => (\n    <ToastItem\n      closeButton={closeButton}\n      closeLabel={closeLabel}\n      key={toastObject.id}\n      richColors={richColors}\n      toast={toastObject}\n    />\n  ))\n}\n\ntype ToasterProps = {\n  className?: string\n  /** Corner or edge the toasts stack in. */\n  position?: ToastPosition\n  /** Close button on every toast; a per-toast `closeButton` wins. */\n  closeButton?: boolean\n  /** Accessible name of every close button; a per-toast `closeLabel` wins. */\n  closeLabel?: string\n  /** Tinted surfaces for success/info/warning/error toasts. */\n  richColors?: boolean\n  /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n  duration?: number\n  /** Toasts visible at once before older ones are marked `data-limited`. */\n  limit?: number\n  /**\n   * Vertical edge below the `sm` breakpoint, where the stack is always\n   * full-width and `position` does not apply. Defaults to `top`, matching the\n   * end-customer portal.\n   */\n  mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n  className,\n  closeButton = true,\n  closeLabel = 'Close',\n  duration = 4000,\n  limit,\n  mobilePosition = 'top',\n  position = 'bottom-right',\n  richColors = true,\n}: ToasterProps) {\n  return (\n    <ToastPrimitive.Provider\n      limit={limit}\n      timeout={duration}\n      toastManager={manager}\n    >\n      <ToastPrimitive.Portal>\n        <PortalTheme>\n          <ToastPrimitive.Viewport\n            // block + zero height: the toasts are absolutely positioned against\n            // this box's bottom edge, the way Base UI's stacked example works\n            className={cn(\n              'fixed inset-x-4 z-50 block h-0 outline-none',\n              mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n              'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n              POSITION_CLASSES[position],\n              className,\n            )}\n            data-mobile-side={mobilePosition}\n            data-side={position.startsWith('top') ? 'top' : 'bottom'}\n            data-slot=\"toaster\"\n          >\n            <ToastList\n              closeButton={closeButton}\n              closeLabel={closeLabel}\n              richColors={richColors}\n            />\n          </ToastPrimitive.Viewport>\n        </PortalTheme>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  )\n}\n\nexport { Toaster, toast }\nexport type {\n  ToastAction,\n  ToasterProps,\n  ToastOptions,\n  ToastPosition,\n  ToastPromiseMessages,\n  ToastType,\n}\n"],"mappings":"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"}

package/dist/components/toggle-group.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import { ToggleGroupContext } from "../lib/toggle-group-context.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/toggle.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_lib_accent_colors = require("../lib/accent-colors.cjs");
-const require_lib_toggle_group_context = require("../lib/toggle-group-context.cjs");
 const require_components_button = require("./button.cjs");
+const require_lib_toggle_group_context = require("../lib/toggle-group-context.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/toggle.js

@@ -1,9 +1,9 @@
 "use client";
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
-import { ToggleGroupContext } from "../lib/toggle-group-context.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import { buttonVariants } from "./button.js";
+import { ToggleGroupContext } from "../lib/toggle-group-context.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";