@adea-ai/ui 0.60.4 → 0.61.0

package/dist/components/theme/theme-provider.js

@@ -0,0 +1,164 @@
+import { accentPresets, fontOptions } from "../../lib/tokens.js";
+import { accentVariables, builtinThemes, defaultDarkThemeId, defaultLightThemeId, themeById, themeCssVariables } from "../../lib/themes.js";
+import { createComponent } from "solid-js/web";
+import { createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+//#region src/components/theme/theme-provider.tsx
+var defaultThemeSelection = {
+	appearance: "system",
+	lightThemeId: defaultLightThemeId,
+	darkThemeId: defaultDarkThemeId,
+	accent: "theme",
+	font: "space-grotesk",
+	density: "comfortable"
+};
+/**
+* A stored selection's density, defaulted.
+*
+* The stored value is read through here rather than trusted, because a preference
+* written before density existed has no `density` key and a hand-edited store may
+* hold anything.
+*/
+function resolvedDensity(selection) {
+	return selection.density === "compact" ? "compact" : "comfortable";
+}
+var ThemeContext = createContext();
+function useTheme() {
+	const value = useContext(ThemeContext);
+	if (!value) throw new Error("useTheme must be called inside a <ThemeProvider>.");
+	return value;
+}
+/** The stored preference, validated against the catalogue. */
+function readSelection(storageKey) {
+	if (typeof localStorage === "undefined") return defaultThemeSelection;
+	try {
+		const raw = localStorage.getItem(storageKey);
+		if (!raw) return defaultThemeSelection;
+		const parsed = JSON.parse(raw);
+		return {
+			appearance: parsed.appearance === "light" || parsed.appearance === "dark" || parsed.appearance === "system" ? parsed.appearance : defaultThemeSelection.appearance,
+			lightThemeId: themeById(parsed.lightThemeId ?? "")?.appearance === "light" ? parsed.lightThemeId : defaultLightThemeId,
+			darkThemeId: themeById(parsed.darkThemeId ?? "")?.appearance === "dark" ? parsed.darkThemeId : defaultDarkThemeId,
+			accent: accentPresets.some((preset) => preset.id === parsed.accent) ? parsed.accent : defaultThemeSelection.accent,
+			font: fontOptions.some((option) => option.id === parsed.font) ? parsed.font : defaultThemeSelection.font
+		};
+	} catch {
+		return defaultThemeSelection;
+	}
+}
+function ThemeProvider(props) {
+	const [local] = splitProps(props, [
+		"children",
+		"storageKey",
+		"initial"
+	]);
+	const storageKey = () => local.storageKey ?? "adea-appearance";
+	const [selection, setSelectionState] = createSignal({
+		...readSelection(storageKey()),
+		...local.initial
+	});
+	const [systemAppearance, setSystemAppearance] = createSignal("light");
+	if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+		const query = window.matchMedia("(prefers-color-scheme: dark)");
+		setSystemAppearance(query.matches ? "dark" : "light");
+		const onChange = (event) => setSystemAppearance(event.matches ? "dark" : "light");
+		query.addEventListener("change", onChange);
+		onCleanup(() => query.removeEventListener("change", onChange));
+	}
+	const resolvedAppearance = createMemo(() => {
+		const preference = selection().appearance;
+		if (preference === "system") return systemAppearance();
+		return preference;
+	});
+	const variant = createMemo(() => {
+		const id = resolvedAppearance() === "dark" ? selection().darkThemeId : selection().lightThemeId;
+		return themeById(id) ?? builtinThemes[0];
+	});
+	createEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		const active = variant();
+		const properties = { ...themeCssVariables(active) };
+		const accent = accentVariables(selection().accent, resolvedAppearance());
+		if (accent) Object.assign(properties, accent);
+		for (const [name, value] of Object.entries(properties)) root.style.setProperty(name, value);
+		root.classList.toggle("dark", resolvedAppearance() === "dark");
+		root.dataset["theme"] = active.id;
+		root.dataset["appearance"] = resolvedAppearance();
+		root.style.colorScheme = resolvedAppearance();
+		if (selection().accent === "theme") root.removeAttribute("data-accent");
+		else root.dataset["accent"] = selection().accent;
+		if (selection().font === "space-grotesk") root.removeAttribute("data-font");
+		else root.dataset["font"] = selection().font;
+		if (resolvedDensity(selection()) === "comfortable") root.removeAttribute("data-density");
+		else root.dataset["density"] = resolvedDensity(selection());
+	});
+	const value = {
+		selection,
+		resolvedAppearance,
+		variant,
+		themes: builtinThemes,
+		setSelection(patch) {
+			const next = {
+				...selection(),
+				...patch
+			};
+			setSelectionState(next);
+			if (typeof localStorage !== "undefined") try {
+				localStorage.setItem(storageKey(), JSON.stringify(next));
+			} catch {}
+		}
+	};
+	return createComponent(ThemeContext.Provider, {
+		value,
+		get children() {
+			return local.children;
+		}
+	});
+}
+/**
+* A string as a JavaScript literal that is also safe inside an inline `<script>`.
+*
+* `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe
+* here: it leaves `<` and `>` alone, so a value containing `<\/script>` ends the tag
+* early and everything after it is parsed as HTML. That is the classic inline-script
+* injection, and it is a real one even though the value is a developer-supplied prop
+* rather than user input — a prop can come from configuration, and a key that happens
+* to contain a closing tag should not be able to execute.
+*
+* The escape is also correct JavaScript: `\u003c` is `<` to the parser, so the value
+* is byte-identical at runtime and inert to the HTML tokenizer. `\u2028` and `\u2029`
+* are escaped for the neighbouring reason — they are legal inside a JSON string and
+* were, before ES2019, line terminators to a JavaScript parser.
+*
+* CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this
+* was found; `tests/theme-script.test.ts` pins it so it cannot come back.
+*/
+function inlineScriptLiteral(value) {
+	return JSON.stringify(value).replace(/[<>\u2028\u2029]/g, (character) => `\\u${character.charCodeAt(0).toString(16).padStart(4, "0")}`);
+}
+/**
+* The no-flash script.
+*
+* Rendered inline in `<head>` before any stylesheet that matters. Without it a dark
+* preference paints the light theme first and then swaps, which is the flash every
+* themed application has to solve and the one thing a provider cannot do from
+* inside the body.
+*
+* Deliberately tiny and dependency-free: it reads the stored preference, resolves
+* `system`, and sets the class. It does not apply the variant's roles — the default
+* theme in `theme.css` covers the first paint, and the provider writes the rest on
+* mount.
+*
+* The script reads two values out of `localStorage` and writes them to `dataset`,
+* which is a *property* assignment rather than code: a stored accent or font id can
+* set an attribute and cannot execute. The one value that reaches the source as text
+* is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason
+* documented there.
+*/
+function themeScript(storageKey = "adea-appearance") {
+	return `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`;
+}
+//#endregion
+export { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme };
+
+//# sourceMappingURL=theme-provider.js.map

package/dist/components/theme/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","names":["JSX","createContext","createEffect","createMemo","createSignal","onCleanup","splitProps","useContext","accentPresets","fontOptions","accentVariables","builtinThemes","defaultDarkThemeId","defaultLightThemeId","themeById","themeCssVariables","ThemeAppearance","ThemeVariant","ThemeSelection","appearance","lightThemeId","darkThemeId","accent","font","density","ThemeDensity","defaultThemeSelection","resolvedDensity","selection","ThemeContextValue","resolvedAppearance","variant","setSelection","patch","Partial","themes","ThemeContext","useTheme","value","Error","readSelection","storageKey","localStorage","raw","getItem","parsed","JSON","parse","some","preset","id","option","ThemeProviderProps","children","Element","initial","ThemeProvider","props","local","setSelectionState","systemAppearance","setSystemAppearance","window","matchMedia","query","matches","onChange","event","MediaQueryListEvent","addEventListener","removeEventListener","preference","document","root","documentElement","active","properties","Object","assign","name","entries","style","setProperty","classList","toggle","dataset","colorScheme","removeAttribute","next","setItem","stringify","_$createComponent","Provider","inlineScriptLiteral","replace","character","charCodeAt","toString","padStart","themeScript","_$createComponent"],"sources":["../../../src/components/theme/theme-provider.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { accentPresets, fontOptions } from '#lib/tokens'\nimport {\n  accentVariables,\n  builtinThemes,\n  defaultDarkThemeId,\n  defaultLightThemeId,\n  themeById,\n  themeCssVariables,\n  type ThemeAppearance,\n  type ThemeVariant,\n} from '#lib/themes'\n\n/**\n * ThemeProvider.\n *\n * Owns the appearance preference and applies it to the document. One provider near\n * the root; everything below reads it.\n *\n * ## What a preference is\n *\n * Four independent choices, and keeping them independent is the point:\n *\n *   - **appearance** — light, dark, or follow the system.\n *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and\n *     Solarized Light by day without re-choosing when the system flips.\n *   - **an accent** — adea's six presets, which re-colour the interactive roles on\n *     top of whichever theme is active.\n *   - **a font** — the interface face.\n *\n * Four axes rather than one list of presets, because they compose: a user who wants\n * Nord with a violet accent and the system font should not need someone to author\n * that combination.\n *\n * ## Why the variants are applied as inline properties\n *\n * The catalogue is data, and a theme is applied by writing its roles onto\n * `<html>` as custom properties. That is what makes an imported palette work\n * without a hand-written `[data-theme]` block per theme, and it is why a settings\n * UI can show a preview by reading the same object rather than by loading a\n * stylesheet. `theme.css` keeps the default theme's values so the first paint is\n * correct before any script runs.\n */\nexport type ThemeSelection = {\n  /** `system` follows `prefers-color-scheme` and updates when it changes. */\n  appearance: ThemeAppearance | 'system'\n  /** The variant to use when the resolved appearance is light. */\n  lightThemeId: string\n  /** The variant to use when the resolved appearance is dark. */\n  darkThemeId: string\n  /** An `accentPresets` id, or `theme` for the variant's own primary. */\n  accent: string\n  /** A `fontOptions` id, or `space-grotesk` for the default. */\n  font: string\n  /**\n   * `comfortable` is the system's default geometry; `compact` moves the control\n   * ladder down one rung.\n   *\n   * Optional, and defaulted on read, so a preference stored before density existed\n   * keeps working and `ThemeSelection` stays assignable without it.\n   */\n  density?: ThemeDensity\n}\n\nexport const defaultThemeSelection: ThemeSelection = {\n  appearance: 'system',\n  lightThemeId: defaultLightThemeId,\n  darkThemeId: defaultDarkThemeId,\n  accent: 'theme',\n  font: 'space-grotesk',\n  density: 'comfortable',\n}\n\n/**\n * The two density rungs.\n *\n * `comfortable` is the geometry in `theme.css`, so it is the absence of an\n * attribute rather than a value: a document that ships no `data-density` at all\n * renders correctly, which is what keeps this additive.\n */\nexport type ThemeDensity = 'comfortable' | 'compact'\n\n/**\n * A stored selection's density, defaulted.\n *\n * The stored value is read through here rather than trusted, because a preference\n * written before density existed has no `density` key and a hand-edited store may\n * hold anything.\n */\nexport function resolvedDensity(selection: ThemeSelection): ThemeDensity {\n  return selection.density === 'compact' ? 'compact' : 'comfortable'\n}\n\nexport type ThemeContextValue = {\n  /** The preference as stored. */\n  selection: () => ThemeSelection\n  /** What the preference resolves to right now, after `system`. */\n  resolvedAppearance: () => ThemeAppearance\n  /** The variant in use. */\n  variant: () => ThemeVariant\n  /** Update part of the preference. */\n  setSelection: (patch: Partial<ThemeSelection>) => void\n  /** The catalogue, so a picker does not import it separately. */\n  themes: readonly ThemeVariant[]\n}\n\nconst ThemeContext = createContext<ThemeContextValue>()\n\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext)\n  if (!value) throw new Error('useTheme must be called inside a <ThemeProvider>.')\n  return value\n}\n\n/** The stored preference, validated against the catalogue. */\nfunction readSelection(storageKey: string): ThemeSelection {\n  if (typeof localStorage === 'undefined') return defaultThemeSelection\n  try {\n    const raw = localStorage.getItem(storageKey)\n    if (!raw) return defaultThemeSelection\n    const parsed = JSON.parse(raw) as Partial<ThemeSelection>\n    return {\n      appearance:\n        parsed.appearance === 'light' ||\n        parsed.appearance === 'dark' ||\n        parsed.appearance === 'system'\n          ? parsed.appearance\n          : defaultThemeSelection.appearance,\n      // An unknown id would leave the document with no theme at all, so a stale\n      // preference from an older catalogue falls back rather than applying nothing.\n      lightThemeId:\n        themeById(parsed.lightThemeId ?? '')?.appearance === 'light'\n          ? (parsed.lightThemeId as string)\n          : defaultLightThemeId,\n      darkThemeId:\n        themeById(parsed.darkThemeId ?? '')?.appearance === 'dark'\n          ? (parsed.darkThemeId as string)\n          : defaultDarkThemeId,\n      accent: accentPresets.some((preset) => preset.id === parsed.accent)\n        ? (parsed.accent as string)\n        : defaultThemeSelection.accent,\n      font: fontOptions.some((option) => option.id === parsed.font)\n        ? (parsed.font as string)\n        : defaultThemeSelection.font,\n    }\n  } catch {\n    return defaultThemeSelection\n  }\n}\n\nexport type ThemeProviderProps = {\n  children?: JSX.Element\n  /** Where the preference is persisted. Distinct per application. */\n  storageKey?: string\n  /** Start from this instead of the stored preference. */\n  initial?: Partial<ThemeSelection>\n}\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const [local] = splitProps(props, ['children', 'storageKey', 'initial'])\n  const storageKey = () => local.storageKey ?? 'adea-appearance'\n\n  const [selection, setSelectionState] = createSignal<ThemeSelection>({\n    ...readSelection(storageKey()),\n    ...local.initial,\n  })\n\n  const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')\n\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    const query = window.matchMedia('(prefers-color-scheme: dark)')\n    setSystemAppearance(query.matches ? 'dark' : 'light')\n    const onChange = (event: MediaQueryListEvent) =>\n      setSystemAppearance(event.matches ? 'dark' : 'light')\n    query.addEventListener('change', onChange)\n    onCleanup(() => query.removeEventListener('change', onChange))\n  }\n\n  const resolvedAppearance = createMemo<ThemeAppearance>(() => {\n    const preference = selection().appearance\n    if (preference === 'system') return systemAppearance()\n    return preference\n  })\n\n  const variant = createMemo<ThemeVariant>(() => {\n    const id = resolvedAppearance() === 'dark' ? selection().darkThemeId : selection().lightThemeId\n    return themeById(id) ?? builtinThemes[0]!\n  })\n\n  createEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const active = variant()\n\n    // The variant's roles, as properties. `--primary` and `--ring` are written here\n    // too, and an accent selection is layered over them below.\n    //\n    // The accent is applied *here* rather than left to the `[data-accent]` blocks in\n    // `theme.css`, because this loop writes inline custom properties and an inline\n    // declaration outranks every stylesheet selector however specific it is. The\n    // blocks still exist and are still correct — they are what styles the window\n    // before this runs — but they cannot win from here, so leaving the accent to\n    // them meant the attribute was set, the rules were present, and nothing\n    // changed on screen.\n    const properties = { ...themeCssVariables(active) }\n    const accent = accentVariables(selection().accent, resolvedAppearance())\n    if (accent) Object.assign(properties, accent)\n\n    for (const [name, value] of Object.entries(properties)) {\n      root.style.setProperty(name, value)\n    }\n\n    root.classList.toggle('dark', resolvedAppearance() === 'dark')\n    root.dataset['theme'] = active.id\n    root.dataset['appearance'] = resolvedAppearance()\n    root.style.colorScheme = resolvedAppearance()\n\n    if (selection().accent === 'theme') root.removeAttribute('data-accent')\n    else root.dataset['accent'] = selection().accent\n\n    if (selection().font === 'space-grotesk') root.removeAttribute('data-font')\n    else root.dataset['font'] = selection().font\n\n    // Density is a pure token shift, so unlike the colour axes there is nothing to\n    // compute: the attribute selects a block in `theme.css`. It is applied here for\n    // the same reason as the others — this is the one place that knows what the\n    // current selection is, and it is the only writer of these attributes.\n    if (resolvedDensity(selection()) === 'comfortable') root.removeAttribute('data-density')\n    else root.dataset['density'] = resolvedDensity(selection())\n  })\n\n  const value: ThemeContextValue = {\n    selection,\n    resolvedAppearance,\n    variant,\n    themes: builtinThemes,\n    setSelection(patch) {\n      const next = { ...selection(), ...patch }\n      setSelectionState(next)\n      if (typeof localStorage !== 'undefined') {\n        try {\n          localStorage.setItem(storageKey(), JSON.stringify(next))\n        } catch {\n          // A full or unavailable store must not break the switch: the preference\n          // simply does not survive the reload.\n        }\n      }\n    },\n  }\n\n  return <ThemeContext.Provider value={value}>{local.children}</ThemeContext.Provider>\n}\n\n/**\n * A string as a JavaScript literal that is also safe inside an inline `<script>`.\n *\n * `JSON.stringify` produces a correct JavaScript literal, and it is **not** safe\n * here: it leaves `<` and `>` alone, so a value containing `</script>` ends the tag\n * early and everything after it is parsed as HTML. That is the classic inline-script\n * injection, and it is a real one even though the value is a developer-supplied prop\n * rather than user input — a prop can come from configuration, and a key that happens\n * to contain a closing tag should not be able to execute.\n *\n * The escape is also correct JavaScript: `\\u003c` is `<` to the parser, so the value\n * is byte-identical at runtime and inert to the HTML tokenizer. `\\u2028` and `\\u2029`\n * are escaped for the neighbouring reason — they are legal inside a JSON string and\n * were, before ES2019, line terminators to a JavaScript parser.\n *\n * CodeQL flags the unescaped form as `js/bad-code-sanitization`, which is how this\n * was found; `tests/theme-script.test.ts` pins it so it cannot come back.\n */\nexport function inlineScriptLiteral(value: string): string {\n  return JSON.stringify(value).replace(\n    /[<>\\u2028\\u2029]/g,\n    (character) => `\\\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`\n  )\n}\n\n/**\n * The no-flash script.\n *\n * Rendered inline in `<head>` before any stylesheet that matters. Without it a dark\n * preference paints the light theme first and then swaps, which is the flash every\n * themed application has to solve and the one thing a provider cannot do from\n * inside the body.\n *\n * Deliberately tiny and dependency-free: it reads the stored preference, resolves\n * `system`, and sets the class. It does not apply the variant's roles — the default\n * theme in `theme.css` covers the first paint, and the provider writes the rest on\n * mount.\n *\n * The script reads two values out of `localStorage` and writes them to `dataset`,\n * which is a *property* assignment rather than code: a stored accent or font id can\n * set an attribute and cannot execute. The one value that reaches the source as text\n * is `storageKey`, and it goes through {@link inlineScriptLiteral} for the reason\n * documented there.\n */\nexport function themeScript(storageKey = 'adea-appearance'): string {\n  return `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'solid-js';
+import { ToggleGroup } from '../ui/toggle-group/toggle-group';
+/**
+ * ThemeToggle.
+ *
+ * Three states, not two: light, dark, and follow the system. A two-state switch is
+ * the common mistake — it forces a choice on someone who wanted the application to
+ * track their OS, and it has no way to say "I have not decided", so the first click
+ * silently overrides a system preference the user set deliberately.
+ *
+ * The icons carry the state and the accessible name comes from the label, so the
+ * control is usable without seeing which glyph is lit.
+ */
+export type ThemeToggleProps = Omit<ComponentProps<typeof ToggleGroup>, 'children'> & {
+    /** Draw labels beside the icons. Off by default: a toolbar wants icons. */
+    withLabels?: boolean;
+};
+export declare function ThemeToggle(props: ThemeToggleProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/theme/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAG9C,OAAO,EAAE,WAAW,EAAmB,MAAM,iCAAiC,CAAA;AAG9E;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAQD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAkClD"}

package/dist/components/theme/theme-toggle.js

@@ -0,0 +1,69 @@
+import { cn } from "../../lib/utils.js";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group/toggle-group.js";
+import { useTheme } from "./theme-provider.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Monitor, Moon, Sun } from "lucide-solid";
+import { For, splitProps } from "solid-js";
+//#region src/components/theme/theme-toggle.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var APPEARANCES = [
+	{
+		value: "light",
+		label: "Light",
+		icon: Sun
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: Moon
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: Monitor
+	}
+];
+function ThemeToggle(props) {
+	const [local, rest] = splitProps(props, ["class", "withLabels"]);
+	const { selection, setSelection } = useTheme();
+	return createComponent(ToggleGroup, mergeProps({
+		attached: true,
+		get value() {
+			return selection().appearance;
+		},
+		onChange: (value) => {
+			if (typeof value === "string") setSelection({ appearance: value });
+		},
+		"aria-label": "Appearance",
+		get ["class"]() {
+			return cn(local.class);
+		}
+	}, rest, { get children() {
+		return createComponent(For, {
+			each: APPEARANCES,
+			children: (appearance) => createComponent(ToggleGroupItem, {
+				get value() {
+					return appearance.value;
+				},
+				variant: "outline",
+				get size() {
+					return local.withLabels ? "sm" : "icon-sm";
+				},
+				get ["aria-label"]() {
+					return appearance.label;
+				},
+				get children() {
+					return [createComponent(appearance.icon, {}), memo(() => memo(() => !!local.withLabels)() ? (() => {
+						var _el$ = _tmpl$();
+						insert(_el$, () => appearance.label);
+						return _el$;
+					})() : null)];
+				}
+			})
+		});
+	} }));
+}
+//#endregion
+export { ThemeToggle };
+
+//# sourceMappingURL=theme-toggle.js.map

package/dist/components/theme/theme-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.js","names":["Monitor","Moon","Sun","ComponentProps","For","splitProps","cn","ToggleGroup","ToggleGroupItem","useTheme","ThemeToggleProps","Omit","withLabels","APPEARANCES","value","label","icon","const","ThemeToggle","props","local","rest","selection","setSelection","_$createComponent","_$mergeProps","attached","appearance","onChange","class","children","each","variant","size","aria-label","_$memo","_el$","_tmpl$","_$insert","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../src/components/theme/theme-toggle.tsx"],"sourcesContent":["import { Monitor, Moon, Sun } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { For, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group/toggle-group'\nimport { useTheme } from './theme-provider'\n\n/**\n * ThemeToggle.\n *\n * Three states, not two: light, dark, and follow the system. A two-state switch is\n * the common mistake — it forces a choice on someone who wanted the application to\n * track their OS, and it has no way to say \"I have not decided\", so the first click\n * silently overrides a system preference the user set deliberately.\n *\n * The icons carry the state and the accessible name comes from the label, so the\n * control is usable without seeing which glyph is lit.\n */\nexport type ThemeToggleProps = Omit<ComponentProps<typeof ToggleGroup>, 'children'> & {\n  /** Draw labels beside the icons. Off by default: a toolbar wants icons. */\n  withLabels?: boolean\n}\n\nconst APPEARANCES = [\n  { value: 'light', label: 'Light', icon: Sun },\n  { value: 'dark', label: 'Dark', icon: Moon },\n  { value: 'system', label: 'System', icon: Monitor },\n] as const\n\nexport function ThemeToggle(props: ThemeToggleProps) {\n  const [local, rest] = splitProps(props, ['class', 'withLabels'])\n  const { selection, setSelection } = useTheme()\n\n  return (\n    <ToggleGroup\n      attached\n      value={selection().appearance}\n      onChange={(value: string | null) => {\n        // A toggle group reports the pressed value or null; null would leave the\n        // appearance unset, so a re-press keeps the current one.\n        if (typeof value === 'string') {\n          setSelection({ appearance: value as 'light' | 'dark' | 'system' })\n        }\n      }}\n      aria-label=\"Appearance\"\n      class={cn(local.class)}\n      {...rest}\n    >\n      <For each={APPEARANCES}>\n        {(appearance) => (\n          <ToggleGroupItem\n            value={appearance.value}\n            variant=\"outline\"\n            size={local.withLabels ? 'sm' : 'icon-sm'}\n            aria-label={appearance.label}\n          >\n            <appearance.icon />\n            {local.withLabels ? <span>{appearance.label}</span> : null}\n          </ToggleGroupItem>\n        )}\n      </For>\n    </ToggleGroup>\n  )\n}\n"],"mappings":";;;;;;;;AAuBA,IAAMa,cAAc;CAClB;EAAEC,OAAO;EAASC,OAAO;EAASC,MAAMd;CAAI;CAC5C;EAAEY,OAAO;EAAQC,OAAO;EAAQC,MAAMf;CAAK;CAC3C;EAAEa,OAAO;EAAUC,OAAO;EAAUC,MAAMhB;CAAQ;AAAC;AAGrD,SAAgBkB,YAAYC,OAAyB;CACnD,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,SAAS,YAAY,CAAC;CAC/D,MAAM,EAAEG,WAAWC,iBAAiBd,SAAS;CAE7C,OAAAe,gBACGjB,aAAWkB,WAAA;EACVC,UAAQ;EAAA,IACRZ,QAAK;GAAA,OAAEQ,UAAU,CAAC,CAACK;EAAU;EAC7BC,WAAWd,UAAyB;GAGlC,IAAI,OAAOA,UAAU,UACnBS,aAAa,EAAEI,YAAYb,MAAqC,CAAC;EAErE;EAAC,cAAA;EAAA,KAAA,WAAA;GAAA,OAEMR,GAAGc,MAAMS,KAAK;EAAC;CAAA,GAClBR,MAAI,EAAA,IAAAS,WAAA;EAAA,OAAAN,gBAEPpB,KAAG;GAAC2B,MAAMlB;GAAWiB,WAClBH,eAAUH,gBACThB,iBAAe;IAAA,IACdM,QAAK;KAAA,OAAEa,WAAWb;IAAK;IACvBkB,SAAO;IAAA,IACPC,OAAI;KAAA,OAAEb,MAAMR,aAAa,OAAO;IAAS;IAAA,KAAA,gBAAA;KAAA,OAC7Be,WAAWZ;IAAK;IAAA,IAAAe,WAAA;KAAA,OAAA,CAAAN,gBAE3BG,WAAWX,MAAI,CAAA,CAAA,GAAAmB,WACfA,WAAA,CAAA,CAAAf,MAAMR,UAAU,CAAA,CAAA,WAAA;MAAA,IAAAwB,OAAAC,OAAA;MAAAC,OAAAF,YAAUT,WAAWZ,KAAK;MAAA,OAAAqB;KAAA,EAAA,CAAA,IAAW,IAAI,CAAA;IAAA;GAAA,CAAA;EAE7D,CAAA;CAAA,EAAA,CAAA,CAAA;AAIT"}

package/dist/components/ui/accordion/accordion.d.ts

@@ -0,0 +1,18 @@
+import { Accordion as KobalteAccordion } from '@kobalte/core/accordion';
+import type { ComponentProps } from 'solid-js';
+/**
+ * Accordion.
+ *
+ * A list of collapsible sections. `collapsible` (the default) lets the user
+ * close the open section; without it one section is always open, which is what
+ * a settings page usually wants and a FAQ usually does not.
+ *
+ * The trigger is a real button with `aria-expanded` and the panel is
+ * `aria-labelledby` the trigger, so the relationship survives even when the
+ * panel is empty.
+ */
+export declare function Accordion(props: ComponentProps<typeof KobalteAccordion>): import("solid-js").JSX.Element;
+export declare function AccordionItem(props: ComponentProps<typeof KobalteAccordion.Item>): import("solid-js").JSX.Element;
+export declare function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.Trigger>): import("solid-js").JSX.Element;
+export declare function AccordionContent(props: ComponentProps<typeof KobalteAccordion.Content>): import("solid-js").JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/ui/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,kCAQhF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAwBtF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAOtF"}

package/dist/components/ui/accordion/accordion.js

@@ -0,0 +1,60 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Accordion } from "@kobalte/core/accordion";
+import { ChevronDown } from "lucide-solid";
+import { splitProps } from "solid-js";
+//#region src/components/ui/accordion/accordion.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class="pt-0 pb-3">`);
+/**
+* Accordion.
+*
+* A list of collapsible sections. `collapsible` (the default) lets the user
+* close the open section; without it one section is always open, which is what
+* a settings page usually wants and a FAQ usually does not.
+*
+* The trigger is a real button with `aria-expanded` and the panel is
+* `aria-labelledby` the trigger, so the relationship survives even when the
+* panel is empty.
+*/
+function Accordion$1(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Accordion, mergeProps({ get ["class"]() {
+		return cn("flex w-full flex-col", local.class);
+	} }, rest));
+}
+function AccordionItem(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Accordion.Item, mergeProps({ get ["class"]() {
+		return cn("border-b border-border last:border-b-0", local.class);
+	} }, rest));
+}
+function AccordionTrigger(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Accordion.Header, {
+		"class": "flex",
+		get children() {
+			return createComponent(Accordion.Trigger, mergeProps({ get ["class"]() {
+				return cn("flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium", "transition-colors ease-out outline-none", "hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", local.class);
+			} }, rest, { get children() {
+				return [memo(() => local.children), createComponent(ChevronDown, {
+					"class": "text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180",
+					"aria-hidden": "true"
+				})];
+			} }));
+		}
+	});
+}
+function AccordionContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Accordion.Content, mergeProps({ get ["class"]() {
+		return cn("overflow-hidden text-sm", local.class);
+	} }, rest, { get children() {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.children);
+		return _el$;
+	} }));
+}
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+
+//# sourceMappingURL=accordion.js.map

package/dist/components/ui/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":["Accordion","KobalteAccordion","ChevronDown","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","AccordionItem","Item","AccordionTrigger","Trigger","Header","children","_$memo","AccordionContent","Content","_el$","_tmpl$","_$insert","Accordion","_$createComponent","KobalteAccordion","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as KobalteAccordion } from '@kobalte/core/accordion'\nimport { ChevronDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Accordion.\n *\n * A list of collapsible sections. `collapsible` (the default) lets the user\n * close the open section; without it one section is always open, which is what\n * a settings page usually wants and a FAQ usually does not.\n *\n * The trigger is a real button with `aria-expanded` and the panel is\n * `aria-labelledby` the trigger, so the relationship survives even when the\n * panel is empty.\n */\nexport function Accordion(props: ComponentProps<typeof KobalteAccordion>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteAccordion class={cn('flex w-full flex-col', local.class)} {...rest} />\n}\n\nexport function AccordionItem(props: ComponentProps<typeof KobalteAccordion.Item>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteAccordion.Item\n      class={cn('border-b border-border last:border-b-0', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteAccordion.Header class=\"flex\">\n      <KobalteAccordion.Trigger\n        class={cn(\n          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',\n          'transition-colors ease-out outline-none',\n          'hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'disabled:pointer-events-none disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <ChevronDown\n          class=\"text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180\"\n          aria-hidden=\"true\"\n        />\n      </KobalteAccordion.Trigger>\n    </KobalteAccordion.Header>\n  )\n}\n\nexport function AccordionContent(props: ComponentProps<typeof KobalteAccordion.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteAccordion.Content class={cn('overflow-hidden text-sm', local.class)} {...rest}>\n      <div class=\"pt-0 pb-3\">{props.children}</div>\n    </KobalteAccordion.Content>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgBA,YAAUM,OAAgD;CACxE,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,WAAgBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,wBAAwBE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACnF;AAEA,SAAgBI,cAAcN,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBY,MAAIH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbL,GAAG,0CAA0CE,MAAMI,KAAK;CAAC,EAAA,GAC5DH,IAAI,CAAA;AAGd;AAEA,SAAgBM,iBAAiBR,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGR,UAAiBe,QAAM;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAAR,gBACrBR,UAAiBc,SAAOL,WAAA,EAAA,KAAA,WAAA;IAAA,OAChBL,GACL,qFACA,2CACA,yBACA,oFACA,oDACAE,MAAMI,KACR;GAAC,EAAA,GACGH,MAAI,EAAA,IAAAS,WAAA;IAAA,OAAA,CAAAC,WAEPX,MAAMU,QAAQ,GAAAR,gBACdP,aAAW;KAAA,SAAA;KAAA,eAAA;IAAA,CAAA,CAAA;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAOpB;AAEA,SAAgBiB,iBAAiBb,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBmB,SAAOV,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,2BAA2BE,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAS,WAAA;EAAA,IAAAI,OAAAC,OAAA;EAAAC,OAAAF,YAC3Df,MAAMW,QAAQ;EAAA,OAAAI;CAAA,EAAA,CAAA,CAAA;AAG5C"}

package/dist/components/ui/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/ui/alert/alert.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps, JSX } from 'solid-js';
+import { type VariantProps } from '#lib/variants';
+/**
+ * Alert.
+ *
+ * A message about the whole surface it sits in — a form's validation summary,
+ * a failed sync banner, a permission notice. It is deliberately not a dialog:
+ * an alert that must be dismissed before the user can continue is a Dialog.
+ *
+ * The glyph follows the tone rather than being passed in, so an alert cannot
+ * be given a green checkmark on a destructive fill. A caller that genuinely
+ * needs a different icon passes `icon`; `icon={null}` removes it.
+ */
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AlertVariantProps = VariantProps<typeof alertVariants>;
+export type AlertProps = ComponentProps<'div'> & AlertVariantProps & {
+    /** Replace the tone's glyph with your own element. `null` removes it. */
+    icon?: JSX.Element | null;
+};
+export declare function Alert(props: AlertProps): JSX.Element;
+export declare function AlertTitle(props: ComponentProps<'div'>): JSX.Element;
+export declare function AlertDescription(props: ComponentProps<'div'>): JSX.Element;
+export { alertVariants };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAGnD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,aAAa;;8EAclB,CAAA;AAUD,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3D,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAC5C,iBAAiB,GAAG;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;CAC1B,CAAA;AAEH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoBtC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAStD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS5D;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/alert/alert.js

@@ -0,0 +1,89 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { AlertCircle, CheckCircle2, Info, TriangleAlert } from "lucide-solid";
+import { splitProps } from "solid-js";
+//#region src/components/ui/alert/alert.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=alert role=alert>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=alert-icon class="row-span-2 pt-0.5 [&amp;_svg]:size-4">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=alert-title>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=alert-description>`);
+/**
+* Alert.
+*
+* A message about the whole surface it sits in — a form's validation summary,
+* a failed sync banner, a permission notice. It is deliberately not a dialog:
+* an alert that must be dismissed before the user can continue is a Dialog.
+*
+* The glyph follows the tone rather than being passed in, so an alert cannot
+* be given a green checkmark on a destructive fill. A caller that genuinely
+* needs a different icon passes `icon`; `icon={null}` removes it.
+*/
+var alertVariants = cva("relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border px-3 py-2.5 text-sm", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground border-border",
+		destructive: "bg-destructive-subtle text-destructive border-destructive/30",
+		success: "bg-success-subtle text-success border-success/30",
+		warning: "bg-warning-subtle text-warning border-warning/30",
+		info: "bg-info-subtle text-info border-info/30"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var alertIcons = {
+	default: Info,
+	destructive: AlertCircle,
+	success: CheckCircle2,
+	warning: TriangleAlert,
+	info: Info
+};
+function Alert(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"icon",
+		"children"
+	]);
+	const tone = () => local.variant ?? "default";
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn(alertVariants({ variant: local.variant }), local.class);
+		} }, rest), false, true);
+		insert(_el$, (() => {
+			var _c$ = memo(() => local.icon === null);
+			return () => _c$() ? null : (() => {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => local.icon ?? createComponent(Dynamic, { get component() {
+					return alertIcons[tone()];
+				} }));
+				return _el$2;
+			})();
+		})(), null);
+		insert(_el$, () => local.children, null);
+		return _el$;
+	})();
+}
+function AlertTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("col-start-2 font-medium tracking-tight", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+function AlertDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("col-start-2 text-sm opacity-90 [&_p]:leading-relaxed", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+//#endregion
+export { Alert, AlertDescription, AlertTitle, alertVariants };
+
+//# sourceMappingURL=alert.js.map

package/dist/components/ui/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":["AlertCircle","CheckCircle2","Info","TriangleAlert","ComponentProps","JSX","splitProps","Dynamic","cva","VariantProps","cn","alertVariants","variants","variant","default","destructive","success","warning","info","defaultVariants","alertIcons","const","AlertVariantProps","AlertProps","icon","Element","Alert","props","local","rest","tone","_el$","_tmpl$","_$spread","_$mergeProps","class","_$insert","_c$","_$memo","_el$2","_tmpl$2","_$createComponent","component","children","AlertTitle","_el$3","_tmpl$3","AlertDescription","_el$4","_tmpl$4","_$mergeProps","_$memo","_$createComponent"],"sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Alert.\n *\n * A message about the whole surface it sits in — a form's validation summary,\n * a failed sync banner, a permission notice. It is deliberately not a dialog:\n * an alert that must be dismissed before the user can continue is a Dialog.\n *\n * The glyph follows the tone rather than being passed in, so an alert cannot\n * be given a green checkmark on a destructive fill. A caller that genuinely\n * needs a different icon passes `icon`; `icon={null}` removes it.\n */\nconst alertVariants = cva(\n  'relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border px-3 py-2.5 text-sm',\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-card-foreground border-border',\n        destructive: 'bg-destructive-subtle text-destructive border-destructive/30',\n        success: 'bg-success-subtle text-success border-success/30',\n        warning: 'bg-warning-subtle text-warning border-warning/30',\n        info: 'bg-info-subtle text-info border-info/30',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  }\n)\n\nconst alertIcons = {\n  default: Info,\n  destructive: AlertCircle,\n  success: CheckCircle2,\n  warning: TriangleAlert,\n  info: Info,\n} as const\n\ntype AlertVariantProps = VariantProps<typeof alertVariants>\n\nexport type AlertProps = ComponentProps<'div'> &\n  AlertVariantProps & {\n    /** Replace the tone's glyph with your own element. `null` removes it. */\n    icon?: JSX.Element | null\n  }\n\nexport function Alert(props: AlertProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'icon', 'children'])\n\n  const tone = () => local.variant ?? 'default'\n\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      class={cn(alertVariants({ variant: local.variant }), local.class)}\n      {...rest}\n    >\n      {local.icon === null ? null : (\n        <span data-slot=\"alert-icon\" class=\"row-span-2 pt-0.5 [&_svg]:size-4\">\n          {local.icon ?? <Dynamic component={alertIcons[tone()]} />}\n        </span>\n      )}\n      {local.children}\n    </div>\n  )\n}\n\nexport function AlertTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"alert-title\"\n      class={cn('col-start-2 font-medium tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function AlertDescription(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"alert-description\"\n      class={cn('col-start-2 text-sm opacity-90 [&_p]:leading-relaxed', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport { alertVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMW,gBAAgBH,IACpB,+GACA;CACEI,UAAU,EACRC,SAAS;EACPC,SAAS;EACTC,aAAa;EACbC,SAAS;EACTC,SAAS;EACTC,MAAM;CACR,EACF;CACAC,iBAAiB,EAAEN,SAAS,UAAU;AACxC,CACF;AAEA,IAAMO,aAAa;CACjBN,SAASZ;CACTa,aAAaf;CACbgB,SAASf;CACTgB,SAASd;CACTe,MAAMhB;AACR;AAUA,SAAgBwB,MAAMC,OAAmB;CACvC,MAAM,CAACC,OAAOC,QAAQvB,WAAWqB,OAAO;EAAC;EAAS;EAAW;EAAQ;CAAU,CAAC;CAEhF,MAAMG,aAAaF,MAAMf,WAAW;CAEpC,cAAA;EAAA,IAAAkB,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWxB,GAAGC,cAAc,EAAEE,SAASe,MAAMf,QAAQ,CAAC,GAAGe,MAAMO,KAAK;EAAC,EAAA,GAC7DN,IAAI,GAAA,OAAA,IAAA;EAAAO,OAAAL,aAAA;GAAA,IAAAM,MAAAC,WAEPV,MAAMJ,SAAS,IAAI;GAAA,aAAnBa,IAAA,IAAsB,cAAI;IAAA,IAAAE,QAAAC,QAAA;IAAAJ,OAAAG,aAEtBX,MAAMJ,QAAIiB,gBAAKlC,SAAO,EAAA,IAACmC,YAAS;KAAA,OAAEtB,WAAWU,KAAK;IAAE,EAAA,CAAA,CAAI;IAAA,OAAAS;GAAA,EAAA,CAAA;EAE5D,EAAA,CAAA,GAAA,IAAA;EAAAH,OAAAL,YACAH,MAAMe,UAAQ,IAAA;EAAA,OAAAZ;CAAA,EAAA,CAAA;AAGrB;AAEA,SAAgBa,WAAWjB,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQvB,WAAWqB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAkB,QAAAC,QAAA;EAAAb,OAAAY,OAAAX,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWxB,GAAG,0CAA0CkB,MAAMO,KAAK;EAAC,EAAA,GAC5DN,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAgB;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBE,iBAAiBpB,OAA8B;CAC7D,MAAM,CAACC,OAAOC,QAAQvB,WAAWqB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAqB,QAAAC,QAAA;EAAAhB,OAAAe,OAAAd,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWxB,GAAG,wDAAwDkB,MAAMO,KAAK;EAAC,EAAA,GAC1EN,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAmB;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert, AlertDescription, AlertTitle, alertVariants, type AlertProps } from './alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/ui/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,29 @@
+import { AlertDialog as KobalteAlertDialog } from '@kobalte/core/alert-dialog';
+import type { ComponentProps } from 'solid-js';
+/**
+ * AlertDialog.
+ *
+ * A dialog that cannot be dismissed by accident: Escape and a click on the scrim
+ * do nothing, and the user must choose one of the actions. That is the whole
+ * difference from Dialog, and it is why this exists as its own component rather
+ * than a prop — a caller has to reach for it deliberately.
+ *
+ * The consequence is a rule of use: this is for confirming a destructive or
+ * irreversible step. Wrapping an ordinary form in an AlertDialog traps someone who
+ * wants to back out.
+ *
+ * There is deliberately no close button in the corner. An X has no label, and the
+ * point of this surface is that every exit is a named choice.
+ */
+export declare function AlertDialog(props: ComponentProps<typeof KobalteAlertDialog>): import("solid-js").JSX.Element;
+export declare function AlertDialogTrigger(props: ComponentProps<typeof KobalteAlertDialog.Trigger>): import("solid-js").JSX.Element;
+export declare function AlertDialogPortal(props: ComponentProps<typeof KobalteAlertDialog.Portal>): import("solid-js").JSX.Element;
+export declare function AlertDialogOverlay(props: ComponentProps<typeof KobalteAlertDialog.Overlay>): import("solid-js").JSX.Element;
+export declare function AlertDialogContent(props: ComponentProps<typeof KobalteAlertDialog.Content>): import("solid-js").JSX.Element;
+export declare function AlertDialogHeader(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+export declare function AlertDialogFooter(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+export declare function AlertDialogTitle(props: ComponentProps<typeof KobalteAlertDialog.Title>): import("solid-js").JSX.Element;
+export declare function AlertDialogDescription(props: ComponentProps<typeof KobalteAlertDialog.Description>): import("solid-js").JSX.Element;
+export declare function AlertDialogAction(props: ComponentProps<typeof KobalteAlertDialog.CloseButton>): import("solid-js").JSX.Element;
+export declare function AlertDialogCancel(props: ComponentProps<typeof KobalteAlertDialog.CloseButton>): import("solid-js").JSX.Element;
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/ui/alert-dialog/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,MAAM,CAAC,kCAExF;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAY1F;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAe1F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS7D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS7D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAQtF;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,WAAW,CAAC,kCAS7D;AAsCD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,WAAW,CAAC,kCAE7F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,WAAW,CAAC,kCAE7F"}