@mitcsutt/kiln-ui 0.1.0

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,86 @@
+import { DEFAULT_THEME as e } from "./themes.js";
+import { STORAGE_KEY as t, ThemeContext as n } from "./context.js";
+import { forwardRef as r, useCallback as i, useEffect as a, useMemo as o, useState as s, useSyncExternalStore as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/theme/ThemeProvider.tsx
+var u = "(prefers-color-scheme: dark)";
+function d() {
+	try {
+		let e = typeof localStorage > "u" ? null : localStorage.getItem(t);
+		return e === "light" || e === "dark" || e === "system" ? e : void 0;
+	} catch {
+		return;
+	}
+}
+function f(e) {
+	return window.addEventListener("storage", e), () => {
+		window.removeEventListener("storage", e);
+	};
+}
+function p(e) {
+	return c(f, () => e ? d() : void 0, () => void 0);
+}
+function m(e) {
+	if (typeof matchMedia > "u") return () => void 0;
+	let t = matchMedia(u);
+	return t.addEventListener("change", e), () => {
+		t.removeEventListener("change", e);
+	};
+}
+function h() {
+	return c(m, () => typeof matchMedia < "u" && matchMedia(u).matches, () => !1);
+}
+function g({ theme: r = e, mode: c, defaultMode: u = "system", onThemeChange: d, onModeChange: f, persistMode: m = !0, target: g = "document", children: _ }) {
+	let [v, y] = s(r), [b, x] = s(r);
+	r !== b && (x(r), y(r));
+	let [S, C] = s(c), [w, T] = s(c);
+	c !== w && (T(c), c && C(c));
+	let E = p(m && !c), D = S ?? E ?? u;
+	a(() => {
+		if (g !== "document" || typeof document > "u") return;
+		let e = document.documentElement;
+		e.dataset.theme = v, e.dataset.mode = D;
+	}, [
+		g,
+		v,
+		D
+	]);
+	let O = h(), k = D === "system" ? O ? "dark" : "light" : D, A = i((e) => {
+		y(e), d?.(e);
+	}, [d]), j = i((e) => {
+		if (C(e), m && typeof localStorage < "u") try {
+			localStorage.setItem(t, e);
+		} catch {}
+		f?.(e);
+	}, [f, m]), M = o(() => ({
+		theme: v,
+		mode: D,
+		resolvedMode: k,
+		setTheme: A,
+		setMode: j
+	}), [
+		v,
+		D,
+		k,
+		A,
+		j
+	]);
+	return /* @__PURE__ */ l(n.Provider, {
+		value: M,
+		children: _
+	});
+}
+var _ = r(function({ theme: e, mode: t, paint: n = !0, ...r }, i) {
+	return /* @__PURE__ */ l("div", {
+		ref: i,
+		"data-theme": e,
+		"data-mode": t,
+		"data-kiln-scope": n ? "" : void 0,
+		"data-kiln-scope-bare": n ? void 0 : "",
+		...r
+	});
+});
+//#endregion
+export { g as ThemeProvider, _ as ThemeScope };
+
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","names":["DARK_QUERY","readStoredMode","v","STORAGE_KEY","subscribeToStorage","onChange","useStoredMode","useSyncExternalStore","enabled","subscribeToSystemDark","mq","useSystemDark","ThemeProvider","themeProp","DEFAULT_THEME","modeProp","themeState","setThemeState","useState","prevThemeProp","setPrevThemeProp","chosenMode","setChosenMode","prevModeProp","setPrevModeProp","storedMode","persistMode","modeState","defaultMode","target","el","systemDark","resolvedMode","setTheme","useCallback","t","onThemeChange","setMode","m","onModeChange","value","useMemo","ThemeContext","ThemeScope","forwardRef","rest","theme","mode","paint"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { DEFAULT_THEME } from './themes'\nimport type { ColorMode, ThemeName } from './themes'\nimport type { ThemeContextValue } from './context'\n\nimport { ThemeContext, STORAGE_KEY } from './context'\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)'\n\nfunction readStoredMode(): ColorMode | undefined {\n  try {\n    const v = typeof localStorage === 'undefined' ? null : localStorage.getItem(STORAGE_KEY)\n    return v === 'light' || v === 'dark' || v === 'system' ? v : undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction subscribeToStorage(onChange: () => void): () => void {\n  window.addEventListener('storage', onChange)\n  return () => {\n    window.removeEventListener('storage', onChange)\n  }\n}\n\n/**\n * The mode stored by an earlier visit, read only on the client (`undefined` while\n * rendering on the server and during hydration, so markup always matches).\n */\nfunction useStoredMode(enabled: boolean): ColorMode | undefined {\n  return useSyncExternalStore(\n    subscribeToStorage,\n    () => (enabled ? readStoredMode() : undefined),\n    () => undefined,\n  )\n}\n\nfunction subscribeToSystemDark(onChange: () => void): () => void {\n  if (typeof matchMedia === 'undefined') return () => undefined\n  const mq = matchMedia(DARK_QUERY)\n  mq.addEventListener('change', onChange)\n  return () => {\n    mq.removeEventListener('change', onChange)\n  }\n}\n\nfunction useSystemDark(): boolean {\n  return useSyncExternalStore(\n    subscribeToSystemDark,\n    () => typeof matchMedia !== 'undefined' && matchMedia(DARK_QUERY).matches,\n    () => false,\n  )\n}\n\nexport interface ThemeProviderProps {\n  /**\n   * Which theme to render (default `paper`). A built-in name, or any name your own\n   * `[data-theme='<name>']` stylesheet defines. Controlled if `onThemeChange` is also supplied.\n   */\n  theme?: ThemeName\n  /** Initial/controlled colour mode. `system` follows the OS via CSS alone — no flash. */\n  mode?: ColorMode\n  /**\n   * Uncontrolled starting mode when the user hasn't chosen one yet (default `system`).\n   * A stored choice (see `persistMode`) always wins. Monograph is dark-first, so apps\n   * using it usually pass `defaultMode=\"dark\"`. Pair with `themeScript(theme, defaultMode)`.\n   */\n  defaultMode?: ColorMode\n  onThemeChange?: (theme: ThemeName) => void\n  onModeChange?: (mode: ColorMode) => void\n  /** Persist the user's mode choice in localStorage. Default `true`. */\n  persistMode?: boolean\n  /**\n   * Where to write `data-theme` / `data-mode`. `document` (default) targets `<html>`,\n   * which is what an app wants. Use `<ThemeScope>` for nested, local themes.\n   */\n  target?: 'document' | 'none'\n  children: ReactNode\n}\n\n/**\n * App-level theme state. Writes `data-theme` + `data-mode` to `<html>` and exposes\n * `useTheme()`. All visual work happens in CSS; this component only flips attributes.\n *\n * For SSR without a flash, also render `<script dangerouslySetInnerHTML={{ __html: themeScript() }} />`\n * in the document head (see `themeScript`).\n */\nexport function ThemeProvider({\n  theme: themeProp = DEFAULT_THEME,\n  mode: modeProp,\n  defaultMode = 'system',\n  onThemeChange,\n  onModeChange,\n  persistMode = true,\n  target = 'document',\n  children,\n}: ThemeProviderProps) {\n  const [themeState, setThemeState] = useState<ThemeName>(themeProp)\n  const [prevThemeProp, setPrevThemeProp] = useState(themeProp)\n  // Follow the prop when it changes (React's \"adjust state on a prop change\" pattern).\n  if (themeProp !== prevThemeProp) {\n    setPrevThemeProp(themeProp)\n    setThemeState(themeProp)\n  }\n\n  // The latest explicit choice: a `mode` prop, or a `setMode` call. Unset until one happens.\n  const [chosenMode, setChosenMode] = useState<ColorMode | undefined>(modeProp)\n  const [prevModeProp, setPrevModeProp] = useState(modeProp)\n  if (modeProp !== prevModeProp) {\n    setPrevModeProp(modeProp)\n    if (modeProp) setChosenMode(modeProp)\n  }\n  // A stored choice wins over `defaultMode`, uncontrolled only.\n  const storedMode = useStoredMode(persistMode && !modeProp)\n  const modeState = chosenMode ?? storedMode ?? defaultMode\n\n  useEffect(() => {\n    if (target !== 'document' || typeof document === 'undefined') return\n    const el = document.documentElement\n    el.dataset.theme = themeState\n    el.dataset.mode = modeState\n  }, [target, themeState, modeState])\n\n  const systemDark = useSystemDark()\n  const resolvedMode = modeState === 'system' ? (systemDark ? 'dark' : 'light') : modeState\n\n  const setTheme = useCallback(\n    (t: ThemeName) => {\n      setThemeState(t)\n      onThemeChange?.(t)\n    },\n    [onThemeChange],\n  )\n\n  const setMode = useCallback(\n    (m: ColorMode) => {\n      setChosenMode(m)\n      if (persistMode && typeof localStorage !== 'undefined') {\n        try {\n          localStorage.setItem(STORAGE_KEY, m)\n        } catch {\n          /* storage unavailable — ignore */\n        }\n      }\n      onModeChange?.(m)\n    },\n    [onModeChange, persistMode],\n  )\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({ theme: themeState, mode: modeState, resolvedMode, setTheme, setMode }),\n    [themeState, modeState, resolvedMode, setTheme, setMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\nexport interface ThemeScopeProps extends HTMLAttributes<HTMLDivElement> {\n  theme: ThemeName\n  /** Omit to inherit the surrounding colour mode (the usual case). */\n  mode?: ColorMode\n  /**\n   * Paint the theme's canvas (background, text colour, base type) on the scope.\n   * Default `true`. Set `false` to drop a themed component into a rounded frame or\n   * a surface without a square background.\n   */\n  paint?: boolean\n}\n\n/**\n * Renders a subtree in a different theme (and optionally mode). Themes are plain CSS\n * scoped to `[data-theme]`, so scopes nest freely — e.g. a Fiesta card previewed on a\n * Monograph page. Also paints the theme's page background and text colour.\n */\nexport const ThemeScope = forwardRef<HTMLDivElement, ThemeScopeProps>(function ThemeScope(\n  { theme, mode, paint = true, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-theme={theme}\n      data-mode={mode}\n      data-kiln-scope={paint ? '' : undefined}\n      data-kiln-scope-bare={paint ? undefined : ''}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAgBA,IAAMA,IAAa;AAEnB,SAASC,IAAwC;CAC/C,IAAI;EACF,IAAMC,IAAI,OAAO,eAAiB,MAAc,OAAO,aAAa,QAAQC,CAAW;EACvF,OAAOD,MAAM,WAAWA,MAAM,UAAUA,MAAM,WAAWA,IAAI,KAAA;CAC/D,QAAQ;EACN;CACF;AACF;AAEA,SAASE,EAAmB,GAAkC;CAE5D,OADA,OAAO,iBAAiB,WAAWC,CAAQ,SAC9B;EACX,OAAO,oBAAoB,WAAWA,CAAQ;CAChD;AACF;AAMA,SAASC,EAAc,GAAyC;CAC9D,OAAOC,EACLH,SACOI,IAAUP,EAAe,IAAI,KAAA,SAC9B,KAAA,CACR;AACF;AAEA,SAASQ,EAAsB,GAAkC;CAC/D,IAAI,OAAO,aAAe,KAAa,aAAa,KAAA;CACpD,IAAMC,IAAK,WAAWV,CAAU;CAEhC,OADAU,EAAG,iBAAiB,UAAUL,CAAQ,SACzB;EACX,EAAG,oBAAoB,UAAUA,CAAQ;CAC3C;AACF;AAEA,SAASM,IAAyB;CAChC,OAAOJ,EACLE,SACM,OAAO,aAAe,OAAe,WAAWT,CAAU,CAAC,CAAC,eAC5D,EACR;AACF;AAmCA,SAAgBY,EAAc,EAC5B,OAAOC,IAAYC,GACnB,MAAMC,GACN,iBAAc,UACd,kBACA,iBACA,iBAAc,IACd,YAAS,YACT,eACqB;CACrB,IAAM,CAACC,GAAYC,KAAiBC,EAAoBL,CAAS,GAC3D,CAACM,GAAeC,KAAoBF,EAASL,CAAS;CAE5D,AAAIA,MAAcM,MAChBC,EAAiBP,CAAS,GAC1BI,EAAcJ,CAAS;CAIzB,IAAM,CAACQ,GAAYC,KAAiBJ,EAAgCH,CAAQ,GACtE,CAACQ,GAAcC,KAAmBN,EAASH,CAAQ;CACzD,AAAIA,MAAaQ,MACfC,EAAgBT,CAAQ,GACpBA,KAAUO,EAAcP,CAAQ;CAGtC,IAAMU,IAAanB,EAAcoB,KAAe,CAACX,CAAQ,GACnDY,IAAYN,KAAcI,KAAcG;CAE9C,QAAgB;EACd,IAAIC,MAAW,cAAc,OAAO,WAAa,KAAa;EAC9D,IAAMC,IAAK,SAAS;EAEpB,AADA,EAAG,QAAQ,QAAQd,GACnB,EAAG,QAAQ,OAAOW;CACpB,GAAG;EAACE;EAAQb;EAAYW;CAAS,CAAC;CAElC,IAAMI,IAAapB,EAAc,GAC3BqB,IAAeL,MAAc,WAAYI,IAAa,SAAS,UAAWJ,GAE1EM,IAAWC,GACd,MAAiB;EAEhB,AADAjB,EAAckB,CAAC,GACfC,IAAgBD,CAAC;CACnB,GACA,CAACC,CAAa,CAChB,GAEMC,IAAUH,GACb,MAAiB;EAEhB,IADAZ,EAAcgB,CAAC,GACXZ,KAAe,OAAO,eAAiB,KACzC,IAAI;GACF,aAAa,QAAQvB,GAAamC,CAAC;EACrC,QAAQ,CAER;EAEF,IAAeA,CAAC;CAClB,GACA,CAACC,GAAcb,CAAW,CAC5B,GAEMc,IAAQC,SACL;EAAE,OAAOzB;EAAY,MAAMW;EAAW;EAAc;EAAU;CAAQ,IAC7E;EAACX;EAAYW;EAAWK;EAAcC;EAAUI;CAAO,CACzD;CAEA,OAAO,kBAACK,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;AAmBA,IAAaC,IAAaC,EAA4C,SACpE,EAAE,UAAO,SAAM,WAAQ,IAAM,GAAGC,KAChC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,aAAWC;EACX,mBAAiBC,IAAQ,KAAK,KAAA;EAC9B,wBAAsBA,IAAQ,KAAA,IAAY;EAC1C,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/theme/context.d.ts

@@ -0,0 +1,20 @@
+import type { ColorMode, ThemeName } from './themes.js';
+export interface ThemeContextValue {
+    theme: ThemeName;
+    mode: ColorMode;
+    /** The mode actually rendered once `system` is resolved (`light` during SSR). */
+    resolvedMode: 'light' | 'dark';
+    setTheme: (theme: ThemeName) => void;
+    setMode: (mode: ColorMode) => void;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;
+export declare const STORAGE_KEY = "kiln-color-mode";
+/** Read and change the current theme/mode. Must be inside `<ThemeProvider>`. */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Inline script for the document `<head>` that applies the theme and the stored colour
+ * mode (or `defaultMode` when nothing is stored) before first paint. Use the same `theme`
+ * and `defaultMode` as `<ThemeProvider>`. Only needed with SSR + a user-selectable mode.
+ * Any theme name works, built-in or your own.
+ */
+export declare function themeScript(theme?: ThemeName, defaultMode?: ColorMode): string;

package/dist/theme/context.js

@@ -0,0 +1,19 @@
+import { DEFAULT_THEME as e } from "./themes.js";
+import { createContext as t, useContext as n } from "react";
+//#region src/theme/context.ts
+var r = t(null), i = "kiln-color-mode";
+function a() {
+	let e = n(r);
+	if (!e) throw Error("useTheme() must be used inside <ThemeProvider>.");
+	return e;
+}
+function o(e) {
+	return JSON.stringify(e).replace(/</g, "\\u003c");
+}
+function s(t = e, n = "system") {
+	return `(function(){try{var d=document.documentElement;d.dataset.theme=${o(t)};var m=localStorage.getItem(${o(i)});d.dataset.mode=(m==='light'||m==='dark'||m==='system')?m:${o(n)};}catch(e){}})();`;
+}
+//#endregion
+export { i as STORAGE_KEY, r as ThemeContext, s as themeScript, a as useTheme };
+
+//# sourceMappingURL=context.js.map

package/dist/theme/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["ThemeContext","createContext","STORAGE_KEY","useTheme","ctx","useContext","scriptLiteral","value","themeScript","DEFAULT_THEME","theme","defaultMode"],"sources":["../../src/theme/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { DEFAULT_THEME } from './themes'\nimport type { ColorMode, ThemeName } from './themes'\n\nexport interface ThemeContextValue {\n  theme: ThemeName\n  mode: ColorMode\n  /** The mode actually rendered once `system` is resolved (`light` during SSR). */\n  resolvedMode: 'light' | 'dark'\n  setTheme: (theme: ThemeName) => void\n  setMode: (mode: ColorMode) => void\n}\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n\nexport const STORAGE_KEY = 'kiln-color-mode'\n\n/** Read and change the current theme/mode. Must be inside `<ThemeProvider>`. */\nexport function useTheme(): ThemeContextValue {\n  const ctx = useContext(ThemeContext)\n  if (!ctx) throw new Error('useTheme() must be used inside <ThemeProvider>.')\n  return ctx\n}\n\n/** JSON for an inline `<script>`: `<` is escaped so a name can never close the tag. */\nfunction scriptLiteral(value: string): string {\n  return JSON.stringify(value).replace(/</g, '\\\\u003c')\n}\n\n/**\n * Inline script for the document `<head>` that applies the theme and the stored colour\n * mode (or `defaultMode` when nothing is stored) before first paint. Use the same `theme`\n * and `defaultMode` as `<ThemeProvider>`. Only needed with SSR + a user-selectable mode.\n * Any theme name works, built-in or your own.\n */\nexport function themeScript(\n  theme: ThemeName = DEFAULT_THEME,\n  defaultMode: ColorMode = 'system',\n): string {\n  return `(function(){try{var d=document.documentElement;d.dataset.theme=${scriptLiteral(\n    theme,\n  )};var m=localStorage.getItem(${scriptLiteral(STORAGE_KEY)});d.dataset.mode=(m==='light'||m==='dark'||m==='system')?m:${scriptLiteral(\n    defaultMode,\n  )};}catch(e){}})();`\n}\n"],"mappings":";;;AAaA,IAAaA,IAAeC,EAAwC,IAAI,GAE3DC,IAAc;AAG3B,SAAgBC,IAA8B;CAC5C,IAAMC,IAAMC,EAAWL,CAAY;CACnC,IAAI,CAACI,GAAK,MAAU,MAAM,iDAAiD;CAC3E,OAAOA;AACT;AAGA,SAASE,EAAc,GAAuB;CAC5C,OAAO,KAAK,UAAUC,CAAK,CAAC,CAAC,QAAQ,MAAM,SAAS;AACtD;AAQA,SAAgBC,EACd,IAAmBC,GACnB,IAAyB,UACjB;CACR,OAAO,kEAAkEH,EACvEI,CACF,EAAE,8BAA8BJ,EAAcJ,CAAW,EAAE,6DAA6DI,EACtHK,CACF,EAAE;AACJ"}

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export { ThemeProvider, ThemeScope } from './ThemeProvider.js';
+export type { ThemeProviderProps, ThemeScopeProps } from './ThemeProvider.js';
+export { useTheme, themeScript } from './context.js';
+export type { ThemeContextValue } from './context.js';
+export { THEMES, THEME_META, MODES, DEFAULT_THEME } from './themes.js';
+export type { ThemeName, BuiltInThemeName, ThemeMeta, ColorMode } from './themes.js';

package/dist/theme/themes.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Registry of the themes Kiln ships. A theme is *only* CSS (see `src/themes/<name>.css`);
+ * this list exists so TypeScript, Storybook and the docs agree on the built-in names.
+ *
+ * The runtime never checks a name against this list: `ThemeProvider`, `ThemeScope` and
+ * `themeScript` only write `data-theme`, so a consumer's own theme (any string, styled by
+ * their own `[data-theme='<name>']` stylesheet) works exactly like a built-in one.
+ *
+ * Adding a built-in: create `src/themes/<name>.css`, export it from `package.json` as an
+ * opt-in preset, add it here. Nothing in `src/components/` should ever change for a new
+ * theme.
+ */
+export declare const THEMES: readonly ["paper", "monograph", "ledger", "fiesta"];
+/** A theme that ships with Kiln. */
+export type BuiltInThemeName = (typeof THEMES)[number];
+/**
+ * Any theme name: a built-in, or one you define in your own stylesheet. Built-in names
+ * still autocomplete.
+ */
+export type ThemeName = BuiltInThemeName | (string & Record<never, never>);
+/** Applied when no theme is set. Part of the base stylesheet; needs no extra import. */
+export declare const DEFAULT_THEME = "paper";
+export interface ThemeMeta {
+    label: string;
+    description: string;
+    /** The stylesheet that defines the theme, or `null` when it's in the base stylesheet. */
+    stylesheet: `@mitcsutt/kiln-ui/themes/${BuiltInThemeName}.css` | null;
+}
+export declare const THEME_META: Record<BuiltInThemeName, ThemeMeta>;
+export declare const MODES: readonly ["system", "light", "dark"];
+export type ColorMode = (typeof MODES)[number];

package/dist/theme/themes.js

@@ -0,0 +1,36 @@
+//#region src/theme/themes.ts
+var e = [
+	"paper",
+	"monograph",
+	"ledger",
+	"fiesta"
+], t = "paper", n = {
+	paper: {
+		label: "Paper",
+		description: "The neutral default. A typeset proof: graphite ink on warm paper, the ink as the accent, a grotesk for scanning and a book serif for reading.",
+		stylesheet: null
+	},
+	monograph: {
+		label: "Monograph",
+		description: "A monograph read under a desk lamp at night. Blue-slate, one ember accent, a big serif display. Dark-first.",
+		stylesheet: "@mitcsutt/kiln-ui/themes/monograph.css"
+	},
+	ledger: {
+		label: "Ledger",
+		description: "An accountant's ruled book. Quiet, dense and numeric: green-grey paper, tabular figures, compact rhythm.",
+		stylesheet: "@mitcsutt/kiln-ui/themes/ledger.css"
+	},
+	fiesta: {
+		label: "Fiesta",
+		description: "A screen-printed festival poster. Flat spot inks, hard offsets, chunky condensed type, springy motion.",
+		stylesheet: "@mitcsutt/kiln-ui/themes/fiesta.css"
+	}
+}, r = [
+	"system",
+	"light",
+	"dark"
+];
+//#endregion
+export { t as DEFAULT_THEME, r as MODES, e as THEMES, n as THEME_META };
+
+//# sourceMappingURL=themes.js.map

package/dist/theme/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","names":["THEMES","DEFAULT_THEME","THEME_META","MODES"],"sources":["../../src/theme/themes.ts"],"sourcesContent":["/**\n * Registry of the themes Kiln ships. A theme is *only* CSS (see `src/themes/<name>.css`);\n * this list exists so TypeScript, Storybook and the docs agree on the built-in names.\n *\n * The runtime never checks a name against this list: `ThemeProvider`, `ThemeScope` and\n * `themeScript` only write `data-theme`, so a consumer's own theme (any string, styled by\n * their own `[data-theme='<name>']` stylesheet) works exactly like a built-in one.\n *\n * Adding a built-in: create `src/themes/<name>.css`, export it from `package.json` as an\n * opt-in preset, add it here. Nothing in `src/components/` should ever change for a new\n * theme.\n */\nexport const THEMES = ['paper', 'monograph', 'ledger', 'fiesta'] as const\n\n/** A theme that ships with Kiln. */\nexport type BuiltInThemeName = (typeof THEMES)[number]\n\n/**\n * Any theme name: a built-in, or one you define in your own stylesheet. Built-in names\n * still autocomplete.\n */\nexport type ThemeName = BuiltInThemeName | (string & Record<never, never>)\n\n/** Applied when no theme is set. Part of the base stylesheet; needs no extra import. */\nexport const DEFAULT_THEME = 'paper' satisfies BuiltInThemeName\n\nexport interface ThemeMeta {\n  label: string\n  description: string\n  /** The stylesheet that defines the theme, or `null` when it's in the base stylesheet. */\n  stylesheet: `@mitcsutt/kiln-ui/themes/${BuiltInThemeName}.css` | null\n}\n\nexport const THEME_META: Record<BuiltInThemeName, ThemeMeta> = {\n  paper: {\n    label: 'Paper',\n    description:\n      'The neutral default. A typeset proof: graphite ink on warm paper, the ink as the accent, a grotesk for scanning and a book serif for reading.',\n    stylesheet: null,\n  },\n  monograph: {\n    label: 'Monograph',\n    description:\n      'A monograph read under a desk lamp at night. Blue-slate, one ember accent, a big serif display. Dark-first.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/monograph.css',\n  },\n  ledger: {\n    label: 'Ledger',\n    description:\n      \"An accountant's ruled book. Quiet, dense and numeric: green-grey paper, tabular figures, compact rhythm.\",\n    stylesheet: '@mitcsutt/kiln-ui/themes/ledger.css',\n  },\n  fiesta: {\n    label: 'Fiesta',\n    description:\n      'A screen-printed festival poster. Flat spot inks, hard offsets, chunky condensed type, springy motion.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/fiesta.css',\n  },\n}\n\nexport const MODES = ['system', 'light', 'dark'] as const\nexport type ColorMode = (typeof MODES)[number]\n"],"mappings":";AAYA,IAAaA,IAAS;CAAC;CAAS;CAAa;CAAU;AAAQ,GAYlDC,IAAgB,SAShBC,IAAkD;CAC7D,OAAO;EACL,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,WAAW;EACT,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,QAAQ;EACN,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,QAAQ;EACN,OAAO;EACP,aACE;EACF,YAAY;CACd;AACF,GAEaC,IAAQ;CAAC;CAAU;CAAS;AAAM"}

package/dist/themes/fiesta.css

@@ -0,0 +1 @@
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=fiesta]{--font-display:"Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;--font-text:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-prose:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-mono:"Martian Mono", ui-monospace, Menlo, monospace;--font-numeric:"Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;--type-base:1rem;--display-scale:1;--type-ratio:1.28;--display-weight:850;--display-style:normal;--display-stretch:100%;--display-transform:uppercase;--display-tracking:.005em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:800;--heading-tracking:.01em;--heading-transform:uppercase;--label-weight:650;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--numeral-weight:600;--numeral-scale:1.12;--mono-stretch:75%;--table-head-font:var(--font-display);--leading-tight:.9;--leading-snug:1.1;--leading-body:1.5;--prose-size:1.0625rem;--prose-leading:1.55;--density:.92;--motion-scale:.9;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--icon-stroke:2.25;--border-width:2px;--border-width-strong:3px;--radius-action:999px;--radius-field:.75rem;--radius-surface:1.125rem;--radius-media:.75rem;--radius-chip:999px;--radius-avatar:50%;--color-canvas:light-dark(oklch(85% .105 62),oklch(20% .055 305));--color-surface:light-dark(oklch(98.5% .012 90),oklch(26.5% .065 305));--color-surface-sunken:light-dark(oklch(94.5% .03 80),oklch(22.5% .055 305));--color-surface-raised:light-dark(oklch(99% .01 90),oklch(30% .07 305));--color-surface-inverse:light-dark(oklch(25% .065 300),oklch(96% .02 90));--color-ink:light-dark(oklch(25% .065 300),oklch(97% .015 90));--color-ink-muted:light-dark(oklch(40% .055 300),oklch(84% .03 90));--color-ink-subtle:light-dark(oklch(45% .045 300),oklch(70% .04 300));--color-ink-inverse:light-dark(oklch(97% .015 90),oklch(25% .065 300));--color-line:light-dark(oklch(86% .03 70),oklch(36% .06 305));--color-line-strong:var(--color-ink);--section-divider-color:var(--color-ink);--control-checked-border:var(--color-ink);--marquee-edge:var(--color-ink);--color-accent:light-dark(oklch(66% .215 12),oklch(70% .2 12));--color-accent-hover:light-dark(oklch(70% .2 14),oklch(75% .19 14));--color-accent-ink:oklch(22% .065 300);--color-accent-text:light-dark(oklch(46.5% .19 12),oklch(78% .16 14));--color-accent-soft:light-dark(oklch(92% .06 15),oklch(36% .1 10));--color-highlight:light-dark(oklch(88% .165 92),oklch(86% .16 92));--color-highlight-ink:oklch(22% .065 300);--highlight-tone-positive-text:oklch(42% .09 190);--highlight-tone-caution-text:oklch(44% .1 75);--highlight-tone-critical-text:oklch(45% .19 25);--highlight-tone-info-text:oklch(43% .12 245);--highlight-accent-text:oklch(45% .19 12);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(88% .165 92),oklch(55% .15 12));--color-scrim:light-dark(oklch(25% .065 300/.5),oklch(8% .04 305/.7));--tone-positive:light-dark(oklch(72% .12 185),oklch(76% .12 185));--tone-positive-soft:light-dark(oklch(92% .05 185),oklch(34% .06 190));--tone-positive-text:light-dark(oklch(43% .09 190),oklch(82% .1 185));--tone-positive-ink:oklch(22% .065 300);--tone-caution:light-dark(oklch(88% .165 92),oklch(86% .16 92));--tone-caution-soft:light-dark(oklch(95% .08 95),oklch(36% .07 90));--tone-caution-text:light-dark(oklch(45% .1 75),oklch(88% .14 92));--tone-caution-ink:oklch(22% .065 300);--tone-critical:light-dark(oklch(58% .22 25),oklch(66% .21 25));--tone-critical-soft:light-dark(oklch(92% .05 25),oklch(36% .1 25));--tone-critical-text:light-dark(oklch(46.5% .19 25),oklch(80% .14 22));--tone-critical-ink:light-dark(oklch(98.5% .01 25),oklch(18% .04 25));--tone-info:light-dark(oklch(62% .12 240),oklch(74% .11 238));--tone-info-soft:light-dark(oklch(92% .04 240),oklch(34% .07 245));--tone-info-text:light-dark(oklch(44.5% .12 245),oklch(82% .09 238));--tone-info-ink:oklch(22% .065 300);--color-cat-1:oklch(72% .19 12);--color-cat-2:oklch(86% .16 92);--color-cat-3:oklch(76% .12 185);--color-cat-4:oklch(76% .15 55);--color-cat-5:oklch(78% .11 240);--color-cat-6:oklch(80% .15 135);--color-cat-7:oklch(76% .12 330);--color-cat-8:oklch(82% .06 70);--color-cat-ink:oklch(22% .065 300);--shadow-surface:4px 4px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--active-shift:2px;--shadow-active:2px 2px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--shadow-float:5px 5px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--shadow-overlay:8px 8px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--canvas-image:radial-gradient(circle at 1px 1px, light-dark(oklch(25% .065 300/.07),oklch(97% .015 90/.05)) 1px, transparent 1.4px);--canvas-image-size:7px 7px}}@font-face{font-family:Big Shoulders;font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/big-shoulders-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Big Shoulders;font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/big-shoulders-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../assets/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../assets/fonts/bricolage-grotesque-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/dist/themes/ledger.css

@@ -0,0 +1 @@
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=ledger]{--font-display:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-text:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-prose:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-mono:"Martian Mono", ui-monospace, Menlo, monospace;--font-numeric:"Martian Mono", ui-monospace, Menlo, monospace;--type-base:.9375rem;--type-ratio:1.2;--display-scale:1.25;--display-weight:700;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.03em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:650;--heading-tracking:-.012em;--heading-transform:none;--label-weight:550;--label-tracking:0;--label-transform:none;--numeric-stretch:80%;--mono-stretch:80%;--leading-tight:1.05;--leading-snug:1.2;--leading-body:1.5;--prose-size:1rem;--prose-leading:1.55;--density:.86;--motion-scale:.8;--ease-out:cubic-bezier(.25, 1, .5, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:2px;--radius-action:.3125rem;--radius-field:.3125rem;--radius-surface:.375rem;--radius-media:.25rem;--radius-chip:.25rem;--radius-avatar:.3125rem;--color-canvas:light-dark(oklch(96.8% .008 145),oklch(19% .012 170));--color-surface:light-dark(oklch(99.2% .004 145),oklch(22.2% .013 170));--color-surface-sunken:light-dark(oklch(94.8% .01 145),oklch(17% .011 170));--color-surface-raised:light-dark(oklch(99.6% .003 145),oklch(25% .014 170));--color-surface-inverse:light-dark(oklch(25% .02 170),oklch(93% .008 145));--color-ink:light-dark(oklch(24% .02 170),oklch(93% .008 145));--color-ink-muted:light-dark(oklch(45% .018 170),oklch(74% .012 150));--color-ink-subtle:light-dark(oklch(52.5% .014 165),oklch(63.5% .012 160));--color-ink-inverse:light-dark(oklch(96% .006 145),oklch(22% .02 170));--color-line:light-dark(oklch(88.5% .018 150),oklch(30% .014 170));--color-line-strong:light-dark(oklch(76% .03 155),oklch(40% .018 170));--table-foot-rule:3px double var(--color-ink);--stat-fit:7.5;--color-accent:light-dark(oklch(47% .085 165),oklch(72% .1 162));--color-accent-hover:light-dark(oklch(42% .08 165),oklch(77% .1 162));--color-accent-ink:light-dark(oklch(98.5% .008 145),oklch(18% .03 165));--color-accent-text:light-dark(oklch(44% .085 165),oklch(78% .09 162));--color-accent-soft:light-dark(oklch(93% .03 160),oklch(29% .04 165));--color-highlight:light-dark(oklch(95% .09 102),oklch(36% .06 100));--color-highlight-ink:var(--color-ink);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(93% .1 102),oklch(40% .07 100));--color-scrim:light-dark(oklch(24% .02 170/.4),oklch(8% .01 170/.66));--tone-positive:light-dark(oklch(50% .1 155),oklch(72% .11 158));--tone-positive-soft:light-dark(oklch(94% .035 155),oklch(28% .045 158));--tone-positive-text:light-dark(oklch(44% .1 155),oklch(78% .1 158));--tone-positive-ink:light-dark(oklch(98.5% .01 155),oklch(18% .03 158));--tone-caution:light-dark(oklch(74% .14 78),oklch(80% .13 85));--tone-caution-soft:light-dark(oklch(95% .05 88),oklch(30% .05 80));--tone-caution-text:light-dark(oklch(50% .1 70),oklch(84% .11 88));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 80));--tone-critical:light-dark(oklch(52% .18 25),oklch(68% .16 24));--tone-critical-soft:light-dark(oklch(94.5% .03 22),oklch(29% .055 24));--tone-critical-text:light-dark(oklch(49% .17 25),oklch(76% .13 24));--tone-critical-ink:light-dark(oklch(98.5% .01 22),oklch(18% .03 24));--tone-info:light-dark(oklch(50% .07 230),oklch(72% .07 230));--tone-info-soft:light-dark(oklch(94% .02 230),oklch(28% .03 230));--tone-info-text:light-dark(oklch(45% .07 230),oklch(78% .06 230));--tone-info-ink:light-dark(oklch(98.5% .01 230),oklch(18% .03 230));--color-cat-1:light-dark(oklch(62% .09 165),oklch(68% .09 165));--color-cat-2:light-dark(oklch(72% .11 75),oklch(76% .11 75));--color-cat-3:light-dark(oklch(60% .08 235),oklch(68% .08 235));--color-cat-4:light-dark(oklch(62% .12 30),oklch(68% .12 30));--color-cat-5:light-dark(oklch(70% .06 120),oklch(74% .07 120));--color-cat-6:light-dark(oklch(62% .07 300),oklch(68% .07 300));--color-cat-7:light-dark(oklch(72% .05 195),oklch(76% .05 195));--color-cat-8:light-dark(oklch(65% .02 170),oklch(70% .02 170));--color-cat-ink:oklch(20% .02 170);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(24% .02 170/.1), 0 8px 20px -6px oklch(24% .02 170/.18);--shadow-overlay:0 2px 4px oklch(20% .02 170/.12), 0 20px 48px -12px oklch(20% .02 170/.3);--canvas-image:none}}

package/dist/themes/monograph.css

@@ -0,0 +1 @@
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=monograph]{--font-display:"Newsreader", "Iowan Old Style", Georgia, serif;--font-text:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-prose:"Newsreader", "Iowan Old Style", Georgia, serif;--font-mono:"Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--font-numeric:"Newsreader", "Iowan Old Style", Georgia, serif;--type-base:1.0625rem;--display-scale:1;--type-ratio:1.25;--display-weight:430;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.035em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:480;--heading-tracking:-.018em;--heading-transform:none;--label-weight:560;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--mono-stretch:87.5%;--leading-tight:1.02;--leading-snug:1.2;--leading-body:1.55;--prose-size:1.1875rem;--prose-leading:1.62;--density:1.05;--motion-scale:1.1;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:1px;--radius-action:999px;--radius-field:.5rem;--radius-surface:.75rem;--radius-media:.5rem;--radius-chip:999px;--radius-avatar:28%;--color-canvas:light-dark(oklch(97.2% .005 250),oklch(17.8% .013 257));--color-surface:light-dark(oklch(99.3% .003 250),oklch(20.8% .015 257));--color-surface-sunken:light-dark(oklch(95.2% .007 250),oklch(15.8% .012 257));--color-surface-raised:light-dark(oklch(99.7% .002 250),oklch(23.8% .016 257));--color-surface-inverse:light-dark(oklch(22% .018 257),oklch(93% .008 250));--color-ink:light-dark(oklch(22.5% .02 257),oklch(94% .008 250));--color-ink-muted:light-dark(oklch(44% .018 257),oklch(75% .013 250));--color-ink-subtle:light-dark(oklch(52.5% .014 257),oklch(62.5% .013 252));--color-ink-inverse:light-dark(oklch(96% .006 250),oklch(20% .018 257));--color-line:light-dark(oklch(89.5% .008 250),oklch(29% .015 257));--color-line-strong:light-dark(oklch(79% .012 250),oklch(39% .016 257));--color-accent:light-dark(oklch(56.5% .158 44),oklch(72% .15 52));--color-accent-hover:light-dark(oklch(52% .15 42),oklch(77% .14 55));--color-accent-ink:light-dark(oklch(98.5% .01 60),oklch(19% .03 45));--color-accent-text:light-dark(oklch(53% .15 42),oklch(78% .13 56));--color-accent-soft:light-dark(oklch(94% .035 60),oklch(29% .055 48));--color-highlight:light-dark(oklch(93% .02 230),oklch(30% .03 240));--color-highlight-ink:var(--color-ink);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(88% .07 58),oklch(42% .09 50));--color-scrim:light-dark(oklch(25% .02 257/.42),oklch(8% .01 257/.66));--tone-positive:light-dark(oklch(52% .11 155),oklch(72% .12 158));--tone-positive-soft:light-dark(oklch(94% .035 155),oklch(28% .045 158));--tone-positive-text:light-dark(oklch(45% .1 155),oklch(78% .11 158));--tone-positive-ink:light-dark(oklch(98.5% .01 155),oklch(18% .03 158));--tone-caution:light-dark(oklch(72% .14 80),oklch(80% .13 85));--tone-caution-soft:light-dark(oklch(95% .05 88),oklch(30% .05 80));--tone-caution-text:light-dark(oklch(50% .1 70),oklch(84% .11 88));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 80));--tone-critical:light-dark(oklch(54% .19 22),oklch(68% .17 22));--tone-critical-soft:light-dark(oklch(94% .035 20),oklch(29% .06 22));--tone-critical-text:light-dark(oklch(50% .18 22),oklch(76% .14 22));--tone-critical-ink:light-dark(oklch(98.5% .01 20),oklch(18% .03 22));--tone-info:light-dark(oklch(52% .08 235),oklch(72% .08 232));--tone-info-soft:light-dark(oklch(94% .02 235),oklch(28% .035 235));--tone-info-text:light-dark(oklch(46% .08 235),oklch(78% .07 232));--tone-info-ink:light-dark(oklch(98.5% .01 235),oklch(18% .03 235));--color-cat-1:light-dark(oklch(78% .09 50),oklch(70% .1 50));--color-cat-2:light-dark(oklch(80% .07 160),oklch(70% .08 160));--color-cat-3:light-dark(oklch(80% .06 235),oklch(70% .07 235));--color-cat-4:light-dark(oklch(84% .09 95),oklch(74% .1 95));--color-cat-5:light-dark(oklch(79% .07 15),oklch(69% .08 15));--color-cat-6:light-dark(oklch(80% .05 195),oklch(70% .06 195));--color-cat-7:light-dark(oklch(82% .06 125),oklch(72% .07 125));--color-cat-8:light-dark(oklch(78% .03 257),oklch(68% .03 257));--color-cat-ink:oklch(22% .02 257);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(20% .02 257/.12), 0 10px 28px -6px oklch(20% .03 257/.22);--shadow-overlay:0 2px 4px oklch(15% .02 257/.14), 0 24px 64px -12px oklch(15% .03 257/.36);--canvas-image:none}}

package/dist/utils/cx.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Merges class names, filtering falsy values.
+ * @example cx(styles.root, isActive && styles.active, className)
+ */
+export declare function cx(...classes: (string | undefined | null | false)[]): string;

package/dist/utils/cx.js

@@ -0,0 +1,8 @@
+//#region src/utils/cx.ts
+function e(...e) {
+	return e.filter(Boolean).join(" ");
+}
+//#endregion
+export { e as cx };
+
+//# sourceMappingURL=cx.js.map

package/dist/utils/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","names":["cx","classes"],"sources":["../../src/utils/cx.ts"],"sourcesContent":["/**\n * Merges class names, filtering falsy values.\n * @example cx(styles.root, isActive && styles.active, className)\n */\nexport function cx(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(' ')\n}\n"],"mappings":";AAIA,SAAgBA,EAAG,GAAGC,GAAwD;CAC5E,OAAOA,EAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACzC"}

package/dist/utils/heading.d.ts

@@ -0,0 +1,13 @@
+/** Heading levels as numbers, `1` → `<h1>`. */
+export type HeadingTagLevel = 1 | 2 | 3 | 4 | 5 | 6;
+declare const HEADING_TAGS: {
+    readonly 1: "h1";
+    readonly 2: "h2";
+    readonly 3: "h3";
+    readonly 4: "h4";
+    readonly 5: "h5";
+    readonly 6: "h6";
+};
+/** The heading element for a level, typed as the matching intrinsic element. */
+export declare function headingTag<L extends HeadingTagLevel>(level: L): (typeof HEADING_TAGS)[L];
+export {};

package/dist/utils/heading.js

@@ -0,0 +1,16 @@
+//#region src/utils/heading.ts
+var e = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+};
+function t(t) {
+	return e[t];
+}
+//#endregion
+export { t as headingTag };
+
+//# sourceMappingURL=heading.js.map

package/dist/utils/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":["HEADING_TAGS","headingTag","level"],"sources":["../../src/utils/heading.ts"],"sourcesContent":["/** Heading levels as numbers, `1` → `<h1>`. */\nexport type HeadingTagLevel = 1 | 2 | 3 | 4 | 5 | 6\n\nconst HEADING_TAGS = { 1: 'h1', 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' } as const\n\n/** The heading element for a level, typed as the matching intrinsic element. */\nexport function headingTag<L extends HeadingTagLevel>(level: L): (typeof HEADING_TAGS)[L] {\n  return HEADING_TAGS[level]\n}\n"],"mappings":";AAGA,IAAMA,IAAe;CAAE,GAAG;CAAM,GAAG;CAAM,GAAG;CAAM,GAAG;CAAM,GAAG;CAAM,GAAG;AAAK;AAG5E,SAAgBC,EAAsC,GAAoC;CACxF,OAAOD,EAAaE;AACtB"}

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+export { cx } from './cx.js';
+export { responsiveVars, baseValue, mergeStyles, BREAKPOINTS } from './responsive.js';
+export type { Responsive, Breakpoint } from './responsive.js';
+export { space, alignCss, justifyCss, SPACE } from './tokens.js';
+export type { Space, Tone, Size, Width, Align, Justify } from './tokens.js';
+export { visibilityClass } from './visibility.js';
+export type { VisibilityProps, VisibilityBreakpoint } from './visibility.js';

package/dist/utils/responsive.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+/**
+ * Breakpoints are mobile-first min-widths. Keep in sync with `tokens/foundation.css`
+ * (`--bp-*` are documentation only — custom properties can't be used in media queries).
+ *
+ *   base  0      sm  40em (640px)   md  48em (768px)   lg  64em (1024px)   xl  80em (1280px)
+ */
+export declare const BREAKPOINTS: readonly ["base", "sm", "md", "lg", "xl"];
+export type Breakpoint = (typeof BREAKPOINTS)[number];
+/** A value, or a per-breakpoint map of values. `{ base: 2, md: 5 }` */
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * Turns a responsive prop into CSS custom properties, cascading each defined value
+ * up to the next defined breakpoint, so CSS can read `var(--x-md)` without fallbacks.
+ *
+ * responsiveVars('stack-gap', { base: 2, lg: 5 }, space)
+ *   → { '--stack-gap-base': .., '--stack-gap-sm': .., '--stack-gap-md': .., '--stack-gap-lg': .., '--stack-gap-xl': .. }
+ *
+ * Returns `{}` when `value` is undefined, so component CSS falls back to its default.
+ */
+export declare function responsiveVars<T>(name: string, value: Responsive<T> | undefined, toCss: (v: T) => string | number): CSSProperties;
+/**
+ * Picks the value for a breakpoint-agnostic context (e.g. a data attribute or JS logic).
+ * Returns the `base` value (or the smallest defined one).
+ */
+export declare function baseValue<T>(value: Responsive<T> | undefined): T | undefined;
+/** Merge several style objects, ignoring undefined. */
+export declare function mergeStyles(...styles: (CSSProperties | undefined)[]): CSSProperties | undefined;

package/dist/utils/responsive.js

@@ -0,0 +1,40 @@
+//#region src/utils/responsive.ts
+var e = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function t(t) {
+	return typeof t == "object" && !!t && !Array.isArray(t) && Object.keys(t).every((t) => e.includes(t));
+}
+function n(n, r, i) {
+	if (r === void 0) return {};
+	let a = {};
+	if (!t(r)) {
+		let t = i(r);
+		for (let r of e) a[`--${n}-${r}`] = t;
+		return a;
+	}
+	let o;
+	for (let t of e) {
+		let e = r[t];
+		e !== void 0 && (o = i(e)), o !== void 0 && (a[`--${n}-${t}`] = o);
+	}
+	return a;
+}
+function r(n) {
+	if (n !== void 0) {
+		if (!t(n)) return n;
+		for (let t of e) if (n[t] !== void 0) return n[t];
+	}
+}
+function i(...e) {
+	let t = e.filter((e) => e !== void 0 && Object.keys(e).length > 0);
+	if (t.length !== 0) return Object.assign({}, ...t);
+}
+//#endregion
+export { e as BREAKPOINTS, r as baseValue, i as mergeStyles, n as responsiveVars };
+
+//# sourceMappingURL=responsive.js.map

package/dist/utils/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","names":["BREAKPOINTS","isBreakpointMap","value","k","responsiveVars","vars","css","toCss","bp","name","current","v","baseValue","mergeStyles","styles","defined","s"],"sources":["../../src/utils/responsive.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\n\n/**\n * Breakpoints are mobile-first min-widths. Keep in sync with `tokens/foundation.css`\n * (`--bp-*` are documentation only — custom properties can't be used in media queries).\n *\n *   base  0      sm  40em (640px)   md  48em (768px)   lg  64em (1024px)   xl  80em (1280px)\n */\nexport const BREAKPOINTS = ['base', 'sm', 'md', 'lg', 'xl'] as const\nexport type Breakpoint = (typeof BREAKPOINTS)[number]\n\n/** A value, or a per-breakpoint map of values. `{ base: 2, md: 5 }` */\nexport type Responsive<T> = T | Partial<Record<Breakpoint, T>>\n\nfunction isBreakpointMap<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    Object.keys(value).every((k) => (BREAKPOINTS as readonly string[]).includes(k))\n  )\n}\n\n/**\n * Turns a responsive prop into CSS custom properties, cascading each defined value\n * up to the next defined breakpoint, so CSS can read `var(--x-md)` without fallbacks.\n *\n * responsiveVars('stack-gap', { base: 2, lg: 5 }, space)\n *   → { '--stack-gap-base': .., '--stack-gap-sm': .., '--stack-gap-md': .., '--stack-gap-lg': .., '--stack-gap-xl': .. }\n *\n * Returns `{}` when `value` is undefined, so component CSS falls back to its default.\n */\nexport function responsiveVars<T>(\n  name: string,\n  value: Responsive<T> | undefined,\n  toCss: (v: T) => string | number,\n): CSSProperties {\n  if (value === undefined) return {}\n  const vars: Record<string, string | number> = {}\n  if (!isBreakpointMap(value)) {\n    const css = toCss(value)\n    for (const bp of BREAKPOINTS) vars[`--${name}-${bp}`] = css\n    return vars\n  }\n  let current: string | number | undefined\n  for (const bp of BREAKPOINTS) {\n    const v = value[bp]\n    if (v !== undefined) current = toCss(v)\n    if (current !== undefined) vars[`--${name}-${bp}`] = current\n  }\n  return vars\n}\n\n/**\n * Picks the value for a breakpoint-agnostic context (e.g. a data attribute or JS logic).\n * Returns the `base` value (or the smallest defined one).\n */\nexport function baseValue<T>(value: Responsive<T> | undefined): T | undefined {\n  if (value === undefined) return undefined\n  if (!isBreakpointMap(value)) return value\n  for (const bp of BREAKPOINTS) if (value[bp] !== undefined) return value[bp]\n  return undefined\n}\n\n/** Merge several style objects, ignoring undefined. */\nexport function mergeStyles(...styles: (CSSProperties | undefined)[]): CSSProperties | undefined {\n  const defined = styles.filter(\n    (s): s is CSSProperties => s !== undefined && Object.keys(s).length > 0,\n  )\n  if (defined.length === 0) return undefined\n  return Object.assign({}, ...defined) as CSSProperties\n}\n"],"mappings":";AAQA,IAAaA,IAAc;CAAC;CAAQ;CAAM;CAAM;CAAM;AAAI;AAM1D,SAASC,EAAmB,GAA+D;CACzF,OACE,OAAOC,KAAU,cACjBA,KACA,CAAC,MAAM,QAAQA,CAAK,KACpB,OAAO,KAAKA,CAAK,CAAC,CAAC,OAAO,MAAOF,EAAkC,SAASG,CAAC,CAAC;AAElF;AAWA,SAAgBC,EACd,GACA,GACA,GACe;CACf,IAAIF,MAAU,KAAA,GAAW,OAAO,CAAC;CACjC,IAAMG,IAAwC,CAAC;CAC/C,IAAI,CAACJ,EAAgBC,CAAK,GAAG;EAC3B,IAAMI,IAAMC,EAAML,CAAK;EACvB,KAAK,IAAMM,KAAMR,GAAa,EAAK,KAAKS,EAAK,GAAGD,OAAQF;EACxD,OAAOD;CACT;CACA,IAAIK;CACJ,KAAK,IAAMF,KAAMR,GAAa;EAC5B,IAAMW,IAAIT,EAAMM;EAEhB,AADIG,MAAM,KAAA,MAAW,IAAUJ,EAAMI,CAAC,IAClCD,MAAY,KAAA,MAAW,EAAK,KAAKD,EAAK,GAAGD,OAAQE;CACvD;CACA,OAAOL;AACT;AAMA,SAAgBO,EAAa,GAAiD;CAC5E,IAAIV,MAAU,KAAA,GACd;MAAI,CAACD,EAAgBC,CAAK,GAAG,OAAOA;EACpC,KAAK,IAAMM,KAAMR,GAAa,IAAIE,EAAMM,OAAQ,KAAA,GAAW,OAAON,EAAMM;CADpC;AAGtC;AAGA,SAAgBK,EAAY,GAAGC,GAAkE;CAC/F,IAAMC,IAAUD,EAAO,QACpB,MAA0BE,MAAM,KAAA,KAAa,OAAO,KAAKA,CAAC,CAAC,CAAC,SAAS,CACxE;CACA,IAAID,EAAQ,WAAW,GACvB,OAAO,OAAO,OAAO,CAAC,GAAG,GAAGA,CAAO;AACrC"}

package/dist/utils/tokens.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Typed handles on the token scales. Components accept these unions as props and map
+ * them to CSS variables — consumers never pass raw px, hex or ms values.
+ */
+/** Spacing steps. Map to `var(--space-N)`; the actual size is theme-controlled (density). */
+export declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export type Space = (typeof SPACE)[number];
+export declare const space: (s: Space) => string;
+/** Semantic surface / tone names shared by colored components. */
+export type Tone = 'neutral' | 'accent' | 'positive' | 'caution' | 'critical' | 'info';
+/** Control sizes shared by Button, inputs, Tag, etc. */
+export type Size = 'sm' | 'md' | 'lg';
+/** Content widths for Container and prose measure. */
+export type Width = 'narrow' | 'text' | 'content' | 'wide' | 'full';
+export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export declare const alignCss: (a: Align) => string;
+export declare const justifyCss: (j: Justify) => string;

package/dist/utils/tokens.js

@@ -0,0 +1,6 @@
+//#region src/utils/tokens.ts
+var e = (e) => e === 0 ? "0" : `var(--space-${String(e)})`, t = (e) => e === "start" ? "flex-start" : e === "end" ? "flex-end" : e, n = (e) => e === "start" ? "flex-start" : e === "end" ? "flex-end" : e === "between" ? "space-between" : e === "around" ? "space-around" : e === "evenly" ? "space-evenly" : e;
+//#endregion
+export { t as alignCss, n as justifyCss, e as space };
+
+//# sourceMappingURL=tokens.js.map

package/dist/utils/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["space","s","alignCss","a","justifyCss","j"],"sources":["../../src/utils/tokens.ts"],"sourcesContent":["/**\n * Typed handles on the token scales. Components accept these unions as props and map\n * them to CSS variables — consumers never pass raw px, hex or ms values.\n */\n\n/** Spacing steps. Map to `var(--space-N)`; the actual size is theme-controlled (density). */\nexport const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const\nexport type Space = (typeof SPACE)[number]\nexport const space = (s: Space): string => (s === 0 ? '0' : `var(--space-${String(s)})`)\n\n/** Semantic surface / tone names shared by colored components. */\nexport type Tone = 'neutral' | 'accent' | 'positive' | 'caution' | 'critical' | 'info'\n\n/** Control sizes shared by Button, inputs, Tag, etc. */\nexport type Size = 'sm' | 'md' | 'lg'\n\n/** Content widths for Container and prose measure. */\nexport type Width = 'narrow' | 'text' | 'content' | 'wide' | 'full'\n\nexport type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline'\nexport type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\n\nexport const alignCss = (a: Align): string =>\n  a === 'start' ? 'flex-start' : a === 'end' ? 'flex-end' : a\n\nexport const justifyCss = (j: Justify): string =>\n  j === 'start'\n    ? 'flex-start'\n    : j === 'end'\n      ? 'flex-end'\n      : j === 'between'\n        ? 'space-between'\n        : j === 'around'\n          ? 'space-around'\n          : j === 'evenly'\n            ? 'space-evenly'\n            : j\n"],"mappings":";AAQA,IAAaA,KAAS,MAAsBC,MAAM,IAAI,MAAM,eAAe,OAAOA,CAAC,EAAE,IAcxEC,KAAY,MACvBC,MAAM,UAAU,eAAeA,MAAM,QAAQ,aAAaA,GAE/CC,KAAc,MACzBC,MAAM,UACF,eACAA,MAAM,QACJ,aACAA,MAAM,YACJ,kBACAA,MAAM,WACJ,iBACAA,MAAM,WACJ,iBACAA"}

package/dist/utils/visibility.d.ts

@@ -0,0 +1,14 @@
+/** Breakpoints you can hide at (mobile-first, same as utils/responsive.ts). */
+export type VisibilityBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
+export interface VisibilityProps {
+    /** Hide below this breakpoint (e.g. `md` → hidden on phones, shown from 48em). */
+    hideBelow?: VisibilityBreakpoint;
+    /** Hide from this breakpoint up (e.g. `md` → shown on phones only). */
+    hideAbove?: VisibilityBreakpoint;
+}
+/**
+ * Class names for responsive visibility. Components that accept `VisibilityProps`
+ * pass the result through `cx()`. Hidden means `display: none` (removed from the
+ * accessibility tree too) — for screen-reader-only content use <VisuallyHidden>.
+ */
+export declare function visibilityClass({ hideBelow, hideAbove }: VisibilityProps): string | undefined;

package/dist/utils/visibility.js

@@ -0,0 +1,21 @@
+import e from "./visibility.module.js";
+//#region src/utils/visibility.ts
+var t = {
+	sm: e.hideBelowSm,
+	md: e.hideBelowMd,
+	lg: e.hideBelowLg,
+	xl: e.hideBelowXl
+}, n = {
+	sm: e.hideAboveSm,
+	md: e.hideAboveMd,
+	lg: e.hideAboveLg,
+	xl: e.hideAboveXl
+};
+function r({ hideBelow: e, hideAbove: r }) {
+	let i = [e ? t[e] : void 0, r ? n[r] : void 0].filter(Boolean);
+	return i.length ? i.join(" ") : void 0;
+}
+//#endregion
+export { r as visibilityClass };
+
+//# sourceMappingURL=visibility.js.map

package/dist/utils/visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility.js","names":["styles","visibility_module_default","below","above","visibilityClass","classes","hideBelow","hideAbove"],"sources":["../../src/utils/visibility.ts"],"sourcesContent":["import styles from './visibility.module.css'\n\n/** Breakpoints you can hide at (mobile-first, same as utils/responsive.ts). */\nexport type VisibilityBreakpoint = 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface VisibilityProps {\n  /** Hide below this breakpoint (e.g. `md` → hidden on phones, shown from 48em). */\n  hideBelow?: VisibilityBreakpoint\n  /** Hide from this breakpoint up (e.g. `md` → shown on phones only). */\n  hideAbove?: VisibilityBreakpoint\n}\n\nconst below: Record<VisibilityBreakpoint, string | undefined> = {\n  sm: styles.hideBelowSm,\n  md: styles.hideBelowMd,\n  lg: styles.hideBelowLg,\n  xl: styles.hideBelowXl,\n}\nconst above: Record<VisibilityBreakpoint, string | undefined> = {\n  sm: styles.hideAboveSm,\n  md: styles.hideAboveMd,\n  lg: styles.hideAboveLg,\n  xl: styles.hideAboveXl,\n}\n\n/**\n * Class names for responsive visibility. Components that accept `VisibilityProps`\n * pass the result through `cx()`. Hidden means `display: none` (removed from the\n * accessibility tree too) — for screen-reader-only content use <VisuallyHidden>.\n */\nexport function visibilityClass({ hideBelow, hideAbove }: VisibilityProps): string | undefined {\n  const classes = [\n    hideBelow ? below[hideBelow] : undefined,\n    hideAbove ? above[hideAbove] : undefined,\n  ].filter(Boolean)\n  return classes.length ? classes.join(' ') : undefined\n}\n"],"mappings":";;AAYA,IAAME,IAA0D;CAC9D,IAAIF,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;AACb,GACMG,IAA0D;CAC9D,IAAIH,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;AACb;AAOA,SAAgBI,EAAgB,EAAE,cAAW,gBAAkD;CAC7F,IAAMC,IAAU,CACdC,IAAYJ,EAAMI,KAAa,KAAA,GAC/BC,IAAYJ,EAAMI,KAAa,KAAA,CACjC,CAAC,CAAC,OAAO,OAAO;CAChB,OAAOF,EAAQ,SAASA,EAAQ,KAAK,GAAG,IAAI,KAAA;AAC9C"}

package/dist/utils/visibility.module.js

@@ -0,0 +1,16 @@
+//#region src/utils/visibility.module.css
+var e = "kiln-visibility__hideBelowSm", t = "kiln-visibility__hideAboveSm", n = "kiln-visibility__hideBelowMd", r = "kiln-visibility__hideAboveMd", i = "kiln-visibility__hideBelowLg", a = "kiln-visibility__hideAboveLg", o = "kiln-visibility__hideBelowXl", s = "kiln-visibility__hideAboveXl", c = {
+	hideBelowSm: e,
+	"#": "kiln-visibility__#",
+	hideAboveSm: t,
+	hideBelowMd: n,
+	hideAboveMd: r,
+	hideBelowLg: i,
+	hideAboveLg: a,
+	hideBelowXl: o,
+	hideAboveXl: s
+};
+//#endregion
+export { c as default, a as hideAboveLg, r as hideAboveMd, t as hideAboveSm, s as hideAboveXl, i as hideBelowLg, n as hideBelowMd, e as hideBelowSm, o as hideBelowXl };
+
+//# sourceMappingURL=visibility.module.js.map

package/dist/utils/visibility.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility.module.js","names":["hideBelowSm","hideAboveSm","hideBelowMd","hideAboveMd","hideBelowLg","hideAboveLg","hideBelowXl","hideAboveXl","visibility_module_default"],"sources":["../../src/utils/visibility.module.css"],"sourcesContent":["/*\n * Responsive visibility. `:not(#\\#)` adds id-level specificity so these always beat a\n * component's own `display` (class + attribute selectors) without !important.\n */\n\n@media (max-width: calc(40em - 0.02px)) {\n  .hideBelowSm:not(#\\#) {\n    display: none;\n  }\n}\n@media (min-width: 40em) {\n  .hideAboveSm:not(#\\#) {\n    display: none;\n  }\n}\n\n@media (max-width: calc(48em - 0.02px)) {\n  .hideBelowMd:not(#\\#) {\n    display: none;\n  }\n}\n@media (min-width: 48em) {\n  .hideAboveMd:not(#\\#) {\n    display: none;\n  }\n}\n\n@media (max-width: calc(64em - 0.02px)) {\n  .hideBelowLg:not(#\\#) {\n    display: none;\n  }\n}\n@media (min-width: 64em) {\n  .hideAboveLg:not(#\\#) {\n    display: none;\n  }\n}\n\n@media (max-width: calc(80em - 0.02px)) {\n  .hideBelowXl:not(#\\#) {\n    display: none;\n  }\n}\n@media (min-width: 80em) {\n  .hideAboveXl:not(#\\#) {\n    display: none;\n  }\n}\n"],"mappings":""}