@epilot/spark-ui 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist/components/select.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-BDdoRxXa.js";
+import { i as SparkInputStyle } from "../theme-types-BKlzRiyw.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/select.js

@@ -3,7 +3,7 @@
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import { useFieldControl } from "./field.js";
-import { n as boxChrome } from "../input-box-variants-DcajYXvo.js";
+import { boxChrome } from "../lib/input-box-variants.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/switch.cjs

@@ -1,14 +1,14 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-aJGBMT86.cjs");
-const require_accent_colors = require("../accent-colors-CjHCf8fH.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_switch = require("@base-ui/react/switch");
 let cnfast = require("cnfast");
 //#region src/components/switch.tsx
 function Switch({ className, styleVariant, color, size: _size, variant: _variant, ...props }) {
 	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
-	const dataAccentColor = color ? require_accent_colors.accentByColor[color] : void 0;
+	const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Root, {
 		"data-slot": "switch",
 		"data-style": dataStyle,

package/dist/components/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,sBAAAA,cAAc,SAAS,KAAA;AACvD,QACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,qGACA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,wHACA,gCACA,0DACD;GACD,CAAA;EACmB,CAAA"}
+{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;AACvD,QACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,qGACA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,wHACA,gCACA,0DACD;GACD,CAAA;EACmB,CAAA"}

package/dist/components/switch.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
+import { u as SparkStyle } from "../theme-types-BKlzRiyw.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 

package/dist/components/switch.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { t as accentByColor } from "../accent-colors-Ch2J0EEY.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.tsx

package/dist/components/theme.cjs

@@ -1,6 +1,122 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("../theme-ClRJhexF.cjs");
-exports.Theme = require_theme.Theme;
-exports.useTheme = require_theme.useTheme;
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_lib_accent_theme = require("../lib/accent-theme.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let cnfast = require("cnfast");
+//#region src/components/theme.tsx
+const ThemeContext = react.createContext({});
+/** Merged theme values from enclosing `<Theme>` providers. */
+function useTheme() {
+	return react.useContext(ThemeContext);
+}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+const Theme = react.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
+	const parent = useTheme();
+	const value = react.useMemo(() => ({
+		accentColor: accentColor ?? parent.accentColor,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		radius: radius ?? parent.radius,
+		scaling: scaling ?? parent.scaling,
+		spacing: spacing ?? parent.spacing,
+		styleVariant: styleVariant ?? parent.styleVariant,
+		highContrast: highContrast ?? parent.highContrast,
+		labelPosition: labelPosition ?? parent.labelPosition,
+		inputStyle: inputStyle ?? parent.inputStyle,
+		inputColor: inputColor ?? parent.inputColor,
+		cardVariant: cardVariant ?? parent.cardVariant,
+		cardColor: cardColor ?? parent.cardColor,
+		appearance: appearance ?? parent.appearance
+	}), [
+		accentColor,
+		neutralColor,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor,
+		appearance,
+		parent
+	]);
+	const scopeId = react.useId();
+	const accent = react.useMemo(() => {
+		const empty = {
+			inlineVars: {},
+			css: "",
+			scoped: false
+		};
+		if (!accentColor) return empty;
+		const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
+			const i = decl.indexOf(":");
+			return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
+		}));
+		try {
+			const hex = require_lib_accent_theme.CURATED_ACCENTS[accentColor] ?? accentColor;
+			if (value.appearance) return {
+				inlineVars: toVars(require_lib_accent_theme.accentSparkVars(require_lib_accent_theme.generateAccentScale(hex, value.appearance))),
+				css: "",
+				scoped: false
+			};
+			const light = require_lib_accent_theme.accentSparkVars(require_lib_accent_theme.generateAccentScale(hex, "light"));
+			const dark = require_lib_accent_theme.accentSparkVars(require_lib_accent_theme.generateAccentScale(hex, "dark"));
+			const sel = `[data-spark-scope="${scopeId}"]`;
+			return {
+				inlineVars: {},
+				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				scoped: true
+			};
+		} catch (error) {
+			console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
+			return empty;
+		}
+	}, [
+		accentColor,
+		value.appearance,
+		scopeId
+	]);
+	const resolvedNeutralColor = neutralColor === "auto" ? require_lib_accent_theme.getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
+	const element = (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: (0, _base_ui_react_merge_props.mergeProps)({
+			className: (0, cnfast.cn)("spark-theme", appearance, className),
+			"data-neutral-color": resolvedNeutralColor,
+			"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,
+			"data-spark-scope": accent.scoped ? scopeId : void 0,
+			style: {
+				...accent.inlineVars,
+				...style
+			},
+			children
+		}, rest)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ThemeContext.Provider, {
+		value,
+		children: [accent.css ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: accent.css }) : null, element]
+	});
+});
+//#endregion
+exports.Theme = Theme;
+exports.useTheme = useTheme;
+
+//# sourceMappingURL=theme.cjs.map

package/dist/components/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","names":["React","CURATED_ACCENTS","accentSparkVars","generateAccentScale","getMatchingNeutral"],"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  generateAccentScale,\n  getMatchingNeutral,\n  type Appearance,\n} from '../lib/accent-theme'\nimport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  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  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor=\"auto\"`). */\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  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}\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      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\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        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        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      }),\n      [\n        accentColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\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    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        css: '',\n        scoped: false,\n      }\n      if (!accentColor) 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 hex = CURATED_ACCENTS[accentColor] ?? accentColor\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(\n              accentSparkVars(generateAccentScale(hex, value.appearance)),\n            ),\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        const light = accentSparkVars(generateAccentScale(hex, 'light'))\n        const dark = accentSparkVars(generateAccentScale(hex, '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 must not throw through render — fall back to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [accentColor, value.appearance, scopeId])\n\n    // 'auto' pairs a neutral with the effective accent (Radix's grayColor=\"auto\").\n    const resolvedNeutralColor =\n      neutralColor === 'auto'\n        ? getMatchingNeutral(value.accentColor ?? '#005EB4')\n        : neutralColor\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': resolvedNeutralColor,\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          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: { ...accent.inlineVars, ...style },\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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"}

package/dist/components/theme.d.cts

@@ -1,12 +1,10 @@
 "use client";
 
 import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
+import { Appearance } from "../lib/accent-theme.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 
-//#region src/lib/accent-theme.d.ts
-type Appearance = 'light' | 'dark';
-//#endregion
 //#region src/components/theme.d.ts
 interface ThemeValue {
   /** Curated accent name or a custom hex. */

package/dist/components/theme.d.ts

@@ -1,12 +1,10 @@
 "use client";
 
-import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BDdoRxXa.js";
+import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BKlzRiyw.js";
+import { Appearance } from "../lib/accent-theme.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 
-//#region src/lib/accent-theme.d.ts
-type Appearance = 'light' | 'dark';
-//#endregion
 //#region src/components/theme.d.ts
 interface ThemeValue {
   /** Curated accent name or a custom hex. */

package/dist/components/theme.js

@@ -1,4 +1,118 @@
 "use client";
 "use client";
-import { n as useTheme, t as Theme } from "../theme-8PDO9E0S.js";
+import { cn } from "../utils/cn.js";
+import { CURATED_ACCENTS, accentSparkVars, generateAccentScale, getMatchingNeutral } from "../lib/accent-theme.js";
+import * as React$1 from "react";
+import { 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
+const ThemeContext = React$1.createContext({});
+/** Merged theme values from enclosing `<Theme>` providers. */
+function useTheme() {
+	return React$1.useContext(ThemeContext);
+}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+const Theme = React$1.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
+	const parent = useTheme();
+	const value = React$1.useMemo(() => ({
+		accentColor: accentColor ?? parent.accentColor,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		radius: radius ?? parent.radius,
+		scaling: scaling ?? parent.scaling,
+		spacing: spacing ?? parent.spacing,
+		styleVariant: styleVariant ?? parent.styleVariant,
+		highContrast: highContrast ?? parent.highContrast,
+		labelPosition: labelPosition ?? parent.labelPosition,
+		inputStyle: inputStyle ?? parent.inputStyle,
+		inputColor: inputColor ?? parent.inputColor,
+		cardVariant: cardVariant ?? parent.cardVariant,
+		cardColor: cardColor ?? parent.cardColor,
+		appearance: appearance ?? parent.appearance
+	}), [
+		accentColor,
+		neutralColor,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor,
+		appearance,
+		parent
+	]);
+	const scopeId = React$1.useId();
+	const accent = React$1.useMemo(() => {
+		const empty = {
+			inlineVars: {},
+			css: "",
+			scoped: false
+		};
+		if (!accentColor) return empty;
+		const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
+			const i = decl.indexOf(":");
+			return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
+		}));
+		try {
+			const hex = CURATED_ACCENTS[accentColor] ?? accentColor;
+			if (value.appearance) return {
+				inlineVars: toVars(accentSparkVars(generateAccentScale(hex, value.appearance))),
+				css: "",
+				scoped: false
+			};
+			const light = accentSparkVars(generateAccentScale(hex, "light"));
+			const dark = accentSparkVars(generateAccentScale(hex, "dark"));
+			const sel = `[data-spark-scope="${scopeId}"]`;
+			return {
+				inlineVars: {},
+				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				scoped: true
+			};
+		} catch (error) {
+			console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
+			return empty;
+		}
+	}, [
+		accentColor,
+		value.appearance,
+		scopeId
+	]);
+	const resolvedNeutralColor = neutralColor === "auto" ? getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: cn("spark-theme", appearance, className),
+			"data-neutral-color": resolvedNeutralColor,
+			"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,
+			"data-spark-scope": accent.scoped ? scopeId : void 0,
+			style: {
+				...accent.inlineVars,
+				...style
+			},
+			children
+		}, rest)
+	});
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value,
+		children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+	});
+});
+//#endregion
 export { Theme, useTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/components/theme.js.map

@@ -0,0 +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  generateAccentScale,\n  getMatchingNeutral,\n  type Appearance,\n} from '../lib/accent-theme'\nimport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  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  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor=\"auto\"`). */\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  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}\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      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\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        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        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      }),\n      [\n        accentColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\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    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        css: '',\n        scoped: false,\n      }\n      if (!accentColor) 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 hex = CURATED_ACCENTS[accentColor] ?? accentColor\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(\n              accentSparkVars(generateAccentScale(hex, value.appearance)),\n            ),\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        const light = accentSparkVars(generateAccentScale(hex, 'light'))\n        const dark = accentSparkVars(generateAccentScale(hex, '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 must not throw through render — fall back to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [accentColor, value.appearance, scopeId])\n\n    // 'auto' pairs a neutral with the effective accent (Radix's grayColor=\"auto\").\n    const resolvedNeutralColor =\n      neutralColor === 'auto'\n        ? getMatchingNeutral(value.accentColor ?? '#005EB4')\n        : neutralColor\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': resolvedNeutralColor,\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          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: { ...accent.inlineVars, ...style },\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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"}

package/dist/components/toast.cjs

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_button = require("./button.cjs");
 const require_components_spinner = require("./spinner.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let sonner = require("sonner");
+let _base_ui_react_toast = require("@base-ui/react/toast");
 let cnfast = require("cnfast");
 //#region src/components/toast.tsx
-const ICONS = Object.fromEntries(Object.entries({
+const TOAST_ICONS = {
 	success: {
 		name: "check_circle",
 		className: "text-success-light"
@@ -27,73 +28,165 @@ const ICONS = Object.fromEntries(Object.entries({
 		name: "cancel",
 		className: "text-error-light"
 	}
-}).map(([type, icon]) => [type, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-	className: (0, cnfast.cn)("inline-flex shrink-0 items-center [--spark-icon-size:16px]", icon.className),
-	name: icon.name
-}, type)]));
-ICONS.loading = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_spinner.Spinner, {
-	"aria-hidden": "true",
-	className: "flex text-gray-11",
-	label: "",
-	role: "presentation",
-	size: "sm"
-});
-const STYLE_VARS = {
-	"--normal-bg": "var(--color-gray-2)",
-	"--normal-text": "var(--color-gray-12)",
-	"--normal-border": "var(--color-gray-a1)",
-	"--border-radius": "var(--radius-lg)",
-	"--gray1": "var(--color-gray-1)",
-	"--gray2": "var(--color-gray-2)",
-	"--gray3": "var(--color-gray-3)",
-	"--gray4": "var(--color-gray-4)",
-	"--gray5": "var(--color-gray-5)",
-	"--gray11": "var(--color-gray-11)",
-	"--gray12": "var(--color-gray-12)",
-	"--toast-close-button-start": "unset",
-	"--toast-close-button-end": "0",
-	"--toast-close-button-transform": "translate(35%, -35%)",
-	"--success-bg": "var(--color-green-2)",
-	"--success-border": "transparent",
-	"--success-text": "var(--color-green-11)",
-	"--info-bg": "var(--color-blue-2)",
-	"--info-border": "transparent",
-	"--info-text": "var(--color-blue-11)",
-	"--warning-bg": "var(--color-orange-2)",
-	"--warning-border": "transparent",
-	"--warning-text": "var(--color-orange-11)",
-	"--error-bg": "var(--color-red-2)",
-	"--error-border": "transparent",
-	"--error-text": "var(--color-red-11)"
 };
-const CLASS_NAMES = {
-	description: "text-gray-11! [[data-rich-colors=true][data-type]_&]:text-inherit!",
-	actionButton: "bg-spark-9! text-spark-contrast! hover:bg-spark-10! rounded-md!",
-	cancelButton: "bg-gray-a3! text-gray-12! hover:bg-gray-a4! rounded-md!"
+const TONE_CLASSES = {
+	success: "border-green-6 bg-green-2 text-green-11",
+	info: "border-blue-6 bg-blue-2 text-blue-11",
+	warning: "border-orange-6 bg-orange-2 text-orange-11",
+	error: "border-red-6 bg-red-2 text-red-11"
 };
-const Toaster = ({ className, closeButton = true, icons, richColors = true, style, toastOptions, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, {
-	className: (0, cnfast.cn)("toaster group", className),
-	closeButton,
-	icons: {
-		...ICONS,
-		...icons
-	},
-	richColors,
-	style: {
-		...STYLE_VARS,
-		...style
-	},
-	toastOptions: {
-		...toastOptions,
-		classNames: {
-			...CLASS_NAMES,
-			...toastOptions?.classNames
-		}
-	},
-	...props
+const POSITION_CLASSES = {
+	"top-left": "sm:top-4 sm:right-auto sm:bottom-auto sm:left-4",
+	"top-center": "sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2",
+	"top-right": "sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto",
+	"bottom-left": "sm:top-auto sm:right-auto sm:bottom-4 sm:left-4",
+	"bottom-center": "sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2",
+	"bottom-right": "sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto"
+};
+const manager = _base_ui_react_toast.Toast.createToastManager();
+let sequence = 0;
+function actionRest({ label: _label, onClick: _onClick, ...rest }) {
+	return rest;
+}
+function toManagerOptions(id, title, type, options) {
+	const action = options?.action;
+	return {
+		id,
+		title,
+		type,
+		description: options?.description,
+		timeout: options?.duration,
+		priority: options?.priority,
+		onClose: options?.onDismiss,
+		actionProps: action && {
+			...actionRest(action),
+			children: action.label,
+			onClick: (event) => {
+				action.onClick?.(event);
+				manager.close(id);
+			}
+		},
+		data: { closeButton: options?.closeButton }
+	};
+}
+const emit = (type) => (message, options) => {
+	const id = options?.id ?? `spark-toast-${sequence += 1}`;
+	return manager.add(toManagerOptions(id, message, type, options));
+};
+const phase = (value, type) => (result) => {
+	return {
+		title: typeof value === "function" ? value(result) : value,
+		type
+	};
+};
+const toast = Object.assign(emit(), {
+	success: emit("success"),
+	info: emit("info"),
+	warning: emit("warning"),
+	error: emit("error"),
+	loading: emit("loading"),
+	/** Dismiss one toast, or every toast when called without an id. */
+	dismiss: (id) => manager.close(id),
+	promise: (promiseValue, messages) => manager.promise(promiseValue, {
+		loading: {
+			title: messages.loading,
+			type: "loading"
+		},
+		success: phase(messages.success, "success"),
+		error: phase(messages.error, "error")
+	})
 });
+function ToastIcon({ type }) {
+	const icon = TOAST_ICONS[type];
+	if (type !== "loading" && !icon) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "flex h-5 w-5 shrink-0 items-center justify-center",
+		children: type === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_spinner.Spinner, {
+			className: "text-gray-11",
+			label: "",
+			role: "presentation",
+			size: "sm"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: (0, cnfast.cn)("[--spark-icon-size:20px]", icon.className),
+			name: icon.name
+		})
+	});
+}
+function ToastItem({ closeButton, richColors, toast: toastObject }) {
+	const tone = TONE_CLASSES[toastObject.type];
+	const showClose = toastObject.data?.closeButton ?? closeButton;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_toast.Toast.Root, {
+		"data-slot": "toast",
+		className: (0, cnfast.cn)("flex items-start gap-2 rounded-md border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none", richColors && tone),
+		swipeDirection: [
+			"up",
+			"down",
+			"right"
+		],
+		toast: toastObject,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastIcon, { type: toastObject.type }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_toast.Toast.Content, {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Title, {
+					className: "text-sm font-medium",
+					"data-slot": "toast-title"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Description, {
+					className: (0, cnfast.cn)("text-sm", richColors && tone ? "text-inherit" : "text-gray-11"),
+					"data-slot": "toast-description"
+				})]
+			}),
+			toastObject.actionProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Action, {
+				className: (0, cnfast.cn)(require_components_button.buttonVariants({
+					size: "small",
+					variant: "primary"
+				}), "-my-2 shrink-0 self-center rounded-full"),
+				"data-slot": "toast-action"
+			}) : null,
+			showClose ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Close, {
+				"aria-label": "Close",
+				className: (0, cnfast.cn)(require_components_button.buttonVariants({
+					size: "icon-small",
+					variant: "tertiary"
+				}), "-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11"),
+				"data-slot": "toast-close",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+					"aria-hidden": "true",
+					className: "[--spark-icon-size:18px]",
+					name: "close"
+				})
+			}) : null
+		]
+	});
+}
+function ToastList({ closeButton, richColors }) {
+	const { toasts } = _base_ui_react_toast.Toast.useToastManager();
+	return toasts.map((toastObject) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastItem, {
+		closeButton,
+		richColors,
+		toast: toastObject
+	}, toastObject.id));
+}
+function Toaster({ className, closeButton = true, duration = 4e3, limit, mobilePosition = "top", position = "bottom-right", richColors = true }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, {
+		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, {
+			className: (0, cnfast.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",
+			"data-slot": "toaster",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastList, {
+				closeButton,
+				richColors
+			})
+		}) })
+	});
+}
 //#endregion
 exports.Toaster = Toaster;
-exports.toast = sonner.toast;
+exports.toast = toast;
 
 //# sourceMappingURL=toast.cjs.map