@krizaka/ui 3.7.1 → 3.9.0

package/dist/recipes.d.ts

@@ -0,0 +1,143 @@
+import { TV } from 'tailwind-variants';
+
+/** What a recipe is made of: the `tv()` options — `base`, `slots`, `variants`, `defaultVariants`, `compoundVariants`. */
+type RecipeConfig = Parameters<TV>[0];
+/**
+ * A recipe is data: the variants of a component (a `variant`, a `size`, a `tone`…) as classes of the Krizaka tokens.
+ * `defineRecipe` only keeps the literal types, so `tv(recipe)` is typed exactly as `tv({ … })` would be (the web side) and
+ * `nativeRecipe(recipe)` reads the same classes into styles on the theme's roles (the native side, `./native`).
+ *
+ * Sizes are a variant dimension (`size: { sm: "h-8 px-3 text-xs" }`); states are the prefixes (`hover:`, `disabled:`,
+ * `data-[state=on]:`). Write colours as roles (`bg-accent`, `text-fg-secondary`, `border-border-default`, `ring-accent/40`),
+ * spacing as Tailwind units (`h-10`, `px-4`), type as `text-sm` / `text-[11px]` / `font-semibold`.
+ */
+declare function defineRecipe<const C extends RecipeConfig>(config: C): C;
+
+/** The colour roles of a native theme (`Theme` of `@krizaka/ui/native`): a key, a colour. */
+type ThemeColors = Readonly<Record<string, string>>;
+type NativeFrame = {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    height?: number;
+    width?: number;
+    minWidth?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    padding?: number;
+    gap?: number;
+    opacity?: number;
+};
+type NativeText = {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: "400" | "500" | "600" | "700" | "800" | "900";
+    letterSpacing?: number;
+    textTransform?: "uppercase" | "lowercase" | "capitalize";
+};
+/** What one part of a component looks like: its frame (a View), its text, and the states that change them. */
+type NativeLook = {
+    frame: NativeFrame;
+    text: NativeText;
+    /** `bg-<role>` of the part's dot (`[&>[data-dot]]:bg-accent`): the colour of a status dot. */
+    dot?: string;
+    /** `bg-linear-to-r from-<role> to-<role>`: the two stops of a gradient fill. */
+    gradient?: readonly [string, string];
+    /** `disabled:` — the frame and text while disabled. */
+    disabled: {
+        frame: NativeFrame;
+        text: NativeText;
+    };
+    /** `data-[state=on]:` — the frame and text while selected / pressed on. */
+    on: {
+        frame: NativeFrame;
+        text: NativeText;
+    };
+    /** The classes with no native meaning (the web's pointer states, shadows, layout…). */
+    ignored: string[];
+};
+type Props = Readonly<Record<string, string | number | boolean | null | undefined>>;
+type Slot = string | readonly unknown[] | null | undefined;
+type Config = {
+    base?: Slot;
+    slots?: Readonly<Record<string, Slot>>;
+    variants?: Readonly<Record<string, Readonly<Record<string, unknown>>>>;
+    defaultVariants?: Readonly<Record<string, unknown>>;
+    compoundVariants?: readonly Readonly<Record<string, unknown>>[];
+};
+/** `#rrggbb` at an opacity (`rgba()`); any other form passes through. */
+declare function withAlpha(color: string, opacity: number): string;
+type NativeRecipe = {
+    /** The looks of each slot (`base` for a recipe without slots) for these variants, on this theme. */
+    resolve: (props: Props, theme: ThemeColors) => Record<string, NativeLook>;
+};
+/** The native side of a recipe (`defineRecipe`): what its variants look like on a theme. */
+declare function nativeRecipe(config: Config): NativeRecipe;
+
+declare const ROLES: {
+    readonly "surface-0": "surface0";
+    readonly "surface-1": "surface1";
+    readonly "surface-2": "surface2";
+    readonly "surface-3": "surface3";
+    readonly media: "media";
+    readonly scrim: "scrim";
+    readonly "scrim-strong": "scrimStrong";
+    readonly overlay: "overlay";
+    readonly "border-subtle": "borderSubtle";
+    readonly "border-default": "borderDefault";
+    readonly "border-strong": "borderStrong";
+    readonly fg: "textPrimary";
+    readonly "fg-secondary": "textSecondary";
+    readonly "fg-muted": "textMuted";
+    readonly "fg-on-media": "textOnMedia";
+    readonly "fg-accent": "accentText";
+    readonly "fg-success": "successText";
+    readonly "fg-warning": "warningText";
+    readonly "fg-danger": "dangerText";
+    readonly "fg-info": "infoText";
+    readonly accent: "accent";
+    readonly "accent-hover": "accentHover";
+    readonly "accent-soft": "accentSoft";
+    readonly "accent-2": "accent2";
+    readonly "on-accent": "onAccent";
+    readonly ring: "ring";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly danger: "danger";
+    readonly info: "info";
+    readonly "success-soft": "successSoft";
+    readonly "warning-soft": "warningSoft";
+    readonly "danger-soft": "dangerSoft";
+    readonly glass: "glassBg";
+    readonly "glass-border": "glassBorder";
+};
+type RoleName = keyof typeof ROLES;
+/** Tailwind's type scale, in points (`text-xs` → 12). */
+declare const TEXT_SIZES: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly "2xl": 24;
+    readonly "3xl": 30;
+};
+declare const FONT_WEIGHTS: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+/** `tracking-*`, in em (React Native takes points: the resolver multiplies by the font size). */
+declare const TRACKING: {
+    readonly tighter: -0.05;
+    readonly tight: -0.025;
+    readonly normal: 0;
+    readonly wide: 0.025;
+    readonly wider: 0.05;
+    readonly widest: 0.1;
+};
+
+export { FONT_WEIGHTS, type NativeFrame, type NativeLook, type NativeRecipe, type NativeText, ROLES, type RecipeConfig, type RoleName, TEXT_SIZES, TRACKING, type ThemeColors, defineRecipe, nativeRecipe, withAlpha };

package/dist/recipes.js

@@ -0,0 +1,180 @@
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
+
+// src/recipes/roles.ts
+var ROLES = {
+  "surface-0": "surface0",
+  "surface-1": "surface1",
+  "surface-2": "surface2",
+  "surface-3": "surface3",
+  media: "media",
+  scrim: "scrim",
+  "scrim-strong": "scrimStrong",
+  overlay: "overlay",
+  "border-subtle": "borderSubtle",
+  "border-default": "borderDefault",
+  "border-strong": "borderStrong",
+  fg: "textPrimary",
+  "fg-secondary": "textSecondary",
+  "fg-muted": "textMuted",
+  "fg-on-media": "textOnMedia",
+  "fg-accent": "accentText",
+  "fg-success": "successText",
+  "fg-warning": "warningText",
+  "fg-danger": "dangerText",
+  "fg-info": "infoText",
+  accent: "accent",
+  "accent-hover": "accentHover",
+  "accent-soft": "accentSoft",
+  "accent-2": "accent2",
+  "on-accent": "onAccent",
+  ring: "ring",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  info: "info",
+  "success-soft": "successSoft",
+  "warning-soft": "warningSoft",
+  "danger-soft": "dangerSoft",
+  glass: "glassBg",
+  "glass-border": "glassBorder"
+};
+var TEXT_SIZES = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30 };
+var FONT_WEIGHTS = { normal: "400", medium: "500", semibold: "600", bold: "700", extrabold: "800", black: "900" };
+var TRACKING = { tighter: -0.05, tight: -0.025, normal: 0, wide: 0.025, wider: 0.05, widest: 0.1 };
+
+// src/recipes/native.ts
+var BASE = "base";
+var words = (value) => typeof value === "string" ? value.split(/\s+/).filter(Boolean) : Array.isArray(value) ? value.flatMap(words) : [];
+function withAlpha(color, opacity) {
+  const hex = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
+  if (!hex) return color;
+  const [r, g, b] = hex.slice(1).map((part) => parseInt(part, 16));
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+function slotNames(config) {
+  return config.slots ? Object.keys(config.slots) : [BASE];
+}
+function classesFor(config, props) {
+  const names = slotNames(config);
+  const out = Object.fromEntries(names.map((name) => [name, config.slots ? words(config.slots[name]) : words(config.base)]));
+  const add = (value) => {
+    if (typeof value === "string" || Array.isArray(value)) (out[BASE] ??= []).push(...words(value));
+    else if (value && typeof value === "object") for (const [name, classes] of Object.entries(value)) (out[name] ??= []).push(...words(classes));
+  };
+  const chosen = { ...config.defaultVariants, ...Object.fromEntries(Object.entries(props).filter(([, v]) => v !== void 0)) };
+  for (const [dimension, values] of Object.entries(config.variants ?? {})) {
+    const key = String(chosen[dimension]);
+    if (key in values) add(values[key]);
+  }
+  for (const compound of config.compoundVariants ?? []) {
+    const { class: a, className: b, ...conditions } = compound;
+    const matches = Object.entries(conditions).every(([dimension, expected]) => Array.isArray(expected) ? expected.map(String).includes(String(chosen[dimension])) : String(chosen[dimension]) === String(expected));
+    if (matches) add(a ?? b);
+  }
+  return out;
+}
+var empty = () => ({ frame: {}, text: {}, disabled: { frame: {}, text: {} }, on: { frame: {}, text: {} }, ignored: [] });
+var unit = (value) => /^\d+(\.\d+)?$/.test(value) ? Number(value) * 4 : void 0;
+function colour(name, theme) {
+  const [role, percent] = name.split("/");
+  if (role === "transparent") return "transparent";
+  if (!role || !(role in ROLES)) return void 0;
+  const resolved = theme[ROLES[role]];
+  if (resolved === void 0) return void 0;
+  return percent === void 0 ? resolved : withAlpha(resolved, Number(percent) / 100);
+}
+function apply(look, cls, theme) {
+  let target = look;
+  let utility = cls;
+  if (cls.startsWith("disabled:")) {
+    target = look.disabled;
+    utility = cls.slice("disabled:".length);
+  } else if (cls.startsWith("data-[state=on]:")) {
+    target = look.on;
+    utility = cls.slice("data-[state=on]:".length);
+  } else if (cls.startsWith("[&>[data-dot]]:bg-")) {
+    const dot = colour(cls.slice("[&>[data-dot]]:bg-".length), theme);
+    if (dot === void 0) return false;
+    look.dot = dot;
+    return true;
+  }
+  if (utility.includes(":") || utility.startsWith("[&")) return false;
+  const { frame, text } = target;
+  let match;
+  if (utility.startsWith("bg-linear-to-")) return true;
+  if (match = /^bg-(.+)$/.exec(utility)) {
+    const value = colour(match[1], theme);
+    if (value === void 0) return false;
+    frame.backgroundColor = value;
+    return true;
+  }
+  if (match = /^text-(.+)$/.exec(utility)) {
+    const arbitrary = /^\[(\d+(?:\.\d+)?)px\]$/.exec(match[1]);
+    if (arbitrary) return text.fontSize = Number(arbitrary[1]), true;
+    if (match[1] in TEXT_SIZES) return text.fontSize = TEXT_SIZES[match[1]], true;
+    const value = colour(match[1], theme);
+    if (value === void 0) return false;
+    text.color = value;
+    return true;
+  }
+  if (utility === "border") return frame.borderWidth = 1, true;
+  if (match = /^(?:border|ring)-(.+)$/.exec(utility)) {
+    if (match[1] === "1") return frame.borderWidth = 1, true;
+    if (match[1] === "inset") return true;
+    const value = colour(match[1], theme);
+    if (value === void 0) return false;
+    frame.borderColor = value;
+    return true;
+  }
+  if (utility === "ring-inset") return true;
+  if (match = /^(h|w|min-w|px|py|p|gap)-(\d+(?:\.\d+)?)$/.exec(utility)) {
+    const points = unit(match[2]);
+    const key = { h: "height", w: "width", "min-w": "minWidth", px: "paddingHorizontal", py: "paddingVertical", p: "padding", gap: "gap" }[match[1]];
+    frame[key] = points;
+    return true;
+  }
+  if (match = /^opacity-(\d+)$/.exec(utility)) return frame.opacity = Number(match[1]) / 100, true;
+  if ((match = /^font-(.+)$/.exec(utility)) && match[1] in FONT_WEIGHTS) return text.fontWeight = FONT_WEIGHTS[match[1]], true;
+  if ((match = /^tracking-(.+)$/.exec(utility)) && match[1] in TRACKING) return text.letterSpacing = TRACKING[match[1]], true;
+  if (utility === "uppercase" || utility === "lowercase" || utility === "capitalize") return text.textTransform = utility, true;
+  if (match = /^(from|to)-(.+)$/.exec(utility)) {
+    const value = colour(match[2], theme);
+    if (value === void 0) return false;
+    const stops = [...look.gradient ?? ["transparent", "transparent"]];
+    stops[match[1] === "from" ? 0 : 1] = value;
+    look.gradient = stops;
+    return true;
+  }
+  return false;
+}
+function finish(look) {
+  for (const part of [look, look.disabled, look.on]) {
+    if (part.text.letterSpacing !== void 0) part.text.letterSpacing = part.text.letterSpacing * (part.text.fontSize ?? look.text.fontSize ?? 14);
+  }
+  return look;
+}
+function nativeRecipe(config) {
+  return {
+    resolve(props, theme) {
+      const looks = {};
+      for (const [slot, classes] of Object.entries(classesFor(config, props))) {
+        const look = empty();
+        for (const cls of classes) if (!apply(look, cls, theme)) look.ignored.push(cls);
+        looks[slot] = finish(look);
+      }
+      return looks;
+    }
+  };
+}
+export {
+  FONT_WEIGHTS,
+  ROLES,
+  TEXT_SIZES,
+  TRACKING,
+  defineRecipe,
+  nativeRecipe,
+  withAlpha
+};
+//# sourceMappingURL=recipes.js.map

package/dist/recipes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/recipes/roles.ts","../src/recipes/native.ts"],"sourcesContent":["// The colour roles a recipe may name, by the Tailwind utility suffix the preset gives them (`bg-accent`,\n// `text-fg-secondary`, `border-border-default`) → the key of the same role in the native theme (`accent`, `textSecondary`,\n// `borderDefault`). One table: the web class and the native colour cannot name different tokens. `recipes.test.ts`\n// checks that every key of the right-hand side exists in the real native theme (@krizaka/tokens/native).\nexport const ROLES = {\n  \"surface-0\": \"surface0\",\n  \"surface-1\": \"surface1\",\n  \"surface-2\": \"surface2\",\n  \"surface-3\": \"surface3\",\n  media: \"media\",\n  scrim: \"scrim\",\n  \"scrim-strong\": \"scrimStrong\",\n  overlay: \"overlay\",\n  \"border-subtle\": \"borderSubtle\",\n  \"border-default\": \"borderDefault\",\n  \"border-strong\": \"borderStrong\",\n  fg: \"textPrimary\",\n  \"fg-secondary\": \"textSecondary\",\n  \"fg-muted\": \"textMuted\",\n  \"fg-on-media\": \"textOnMedia\",\n  \"fg-accent\": \"accentText\",\n  \"fg-success\": \"successText\",\n  \"fg-warning\": \"warningText\",\n  \"fg-danger\": \"dangerText\",\n  \"fg-info\": \"infoText\",\n  accent: \"accent\",\n  \"accent-hover\": \"accentHover\",\n  \"accent-soft\": \"accentSoft\",\n  \"accent-2\": \"accent2\",\n  \"on-accent\": \"onAccent\",\n  ring: \"ring\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n  info: \"info\",\n  \"success-soft\": \"successSoft\",\n  \"warning-soft\": \"warningSoft\",\n  \"danger-soft\": \"dangerSoft\",\n  glass: \"glassBg\",\n  \"glass-border\": \"glassBorder\",\n} as const;\n\nexport type RoleName = keyof typeof ROLES;\n\n/** Tailwind's type scale, in points (`text-xs` → 12). */\nexport const TEXT_SIZES = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, \"2xl\": 24, \"3xl\": 30 } as const;\n\nexport const FONT_WEIGHTS = { normal: \"400\", medium: \"500\", semibold: \"600\", bold: \"700\", extrabold: \"800\", black: \"900\" } as const;\n\n/** `tracking-*`, in em (React Native takes points: the resolver multiplies by the font size). */\nexport const TRACKING = { tighter: -0.05, tight: -0.025, normal: 0, wide: 0.025, wider: 0.05, widest: 0.1 } as const;\n","// The native side of a recipe: the classes of its variants, read into the styles React Native takes, on the roles of the\n// theme. Pure (no React Native, no theme import): the components wrap the result in `StyleSheet` and pass the theme.\n// What a phone has no use for (`hover:`, `focus-visible:`, shadows, transitions, the layout classes) is returned in\n// `ignored`, so a test can tell the classes that only the web has from the ones that were forgotten.\nimport { FONT_WEIGHTS, type RoleName, ROLES, TEXT_SIZES, TRACKING } from \"./roles\";\n\n/** The colour roles of a native theme (`Theme` of `@krizaka/ui/native`): a key, a colour. */\nexport type ThemeColors = Readonly<Record<string, string>>;\n\nexport type NativeFrame = {\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: number;\n  height?: number;\n  width?: number;\n  minWidth?: number;\n  paddingHorizontal?: number;\n  paddingVertical?: number;\n  padding?: number;\n  gap?: number;\n  opacity?: number;\n};\n\nexport type NativeText = {\n  color?: string;\n  fontSize?: number;\n  fontWeight?: \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\";\n  letterSpacing?: number;\n  textTransform?: \"uppercase\" | \"lowercase\" | \"capitalize\";\n};\n\n/** What one part of a component looks like: its frame (a View), its text, and the states that change them. */\nexport type NativeLook = {\n  frame: NativeFrame;\n  text: NativeText;\n  /** `bg-<role>` of the part's dot (`[&>[data-dot]]:bg-accent`): the colour of a status dot. */\n  dot?: string;\n  /** `bg-linear-to-r from-<role> to-<role>`: the two stops of a gradient fill. */\n  gradient?: readonly [string, string];\n  /** `disabled:` — the frame and text while disabled. */\n  disabled: { frame: NativeFrame; text: NativeText };\n  /** `data-[state=on]:` — the frame and text while selected / pressed on. */\n  on: { frame: NativeFrame; text: NativeText };\n  /** The classes with no native meaning (the web's pointer states, shadows, layout…). */\n  ignored: string[];\n};\n\ntype Props = Readonly<Record<string, string | number | boolean | null | undefined>>;\ntype Slot = string | readonly unknown[] | null | undefined;\ntype Config = {\n  base?: Slot;\n  slots?: Readonly<Record<string, Slot>>;\n  variants?: Readonly<Record<string, Readonly<Record<string, unknown>>>>;\n  defaultVariants?: Readonly<Record<string, unknown>>;\n  compoundVariants?: readonly Readonly<Record<string, unknown>>[];\n};\n\nconst BASE = \"base\";\n\nconst words = (value: unknown): string[] => (typeof value === \"string\" ? value.split(/\\s+/).filter(Boolean) : Array.isArray(value) ? value.flatMap(words) : []);\n\n/** `#rrggbb` at an opacity (`rgba()`); any other form passes through. */\nexport function withAlpha(color: string, opacity: number): string {\n  const hex = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);\n  if (!hex) return color;\n  const [r, g, b] = hex.slice(1).map((part) => parseInt(part, 16));\n  return `rgba(${r},${g},${b},${opacity})`;\n}\n\n/** The slots of a config: `slots` when it has some, else the single `base`. */\nfunction slotNames(config: Config): string[] {\n  return config.slots ? Object.keys(config.slots) : [BASE];\n}\n\n/** The classes of each slot for some props: base, the chosen variants (defaults first), then the compound ones. */\nfunction classesFor(config: Config, props: Props): Record<string, string[]> {\n  const names = slotNames(config);\n  const out: Record<string, string[]> = Object.fromEntries(names.map((name) => [name, config.slots ? words(config.slots[name]) : words(config.base)]));\n  // A string (or a list) is for the base; an object names the slots it is for.\n  const add = (value: unknown) => {\n    if (typeof value === \"string\" || Array.isArray(value)) (out[BASE] ??= []).push(...words(value));\n    else if (value && typeof value === \"object\") for (const [name, classes] of Object.entries(value)) (out[name] ??= []).push(...words(classes));\n  };\n  const chosen = { ...config.defaultVariants, ...Object.fromEntries(Object.entries(props).filter(([, v]) => v !== undefined)) } as Record<string, unknown>;\n  for (const [dimension, values] of Object.entries(config.variants ?? {})) {\n    const key = String(chosen[dimension]);\n    if (key in values) add(values[key]);\n  }\n  for (const compound of config.compoundVariants ?? []) {\n    const { class: a, className: b, ...conditions } = compound as Record<string, unknown>;\n    const matches = Object.entries(conditions).every(([dimension, expected]) => (Array.isArray(expected) ? expected.map(String).includes(String(chosen[dimension])) : String(chosen[dimension]) === String(expected)));\n    if (matches) add(a ?? b);\n  }\n  return out;\n}\n\nconst empty = (): NativeLook => ({ frame: {}, text: {}, disabled: { frame: {}, text: {} }, on: { frame: {}, text: {} }, ignored: [] });\n\n/** `3` → 12, `0.5` → 2, `3.5` → 14: Tailwind's spacing unit is 4. */\nconst unit = (value: string): number | undefined => (/^\\d+(\\.\\d+)?$/.test(value) ? Number(value) * 4 : undefined);\n\n/** `accent`, `accent/40`, `transparent` → a colour of the theme, or `undefined` when it is not a role. */\nfunction colour(name: string, theme: ThemeColors): string | undefined {\n  const [role, percent] = name.split(\"/\");\n  if (role === \"transparent\") return \"transparent\";\n  if (!role || !(role in ROLES)) return undefined;\n  const resolved = theme[ROLES[role as RoleName]];\n  if (resolved === undefined) return undefined;\n  return percent === undefined ? resolved : withAlpha(resolved, Number(percent) / 100);\n}\n\n/** Reads one class into a look. Returns `false` when the class means nothing natively. */\nfunction apply(look: NativeLook, cls: string, theme: ThemeColors): boolean {\n  // States: `disabled:` and `data-[state=on]:` are kept apart; every other prefix is a pointer, focus or media state.\n  let target: { frame: NativeFrame; text: NativeText } = look;\n  let utility = cls;\n  if (cls.startsWith(\"disabled:\")) {\n    target = look.disabled;\n    utility = cls.slice(\"disabled:\".length);\n  } else if (cls.startsWith(\"data-[state=on]:\")) {\n    target = look.on;\n    utility = cls.slice(\"data-[state=on]:\".length);\n  } else if (cls.startsWith(\"[&>[data-dot]]:bg-\")) {\n    const dot = colour(cls.slice(\"[&>[data-dot]]:bg-\".length), theme);\n    if (dot === undefined) return false;\n    look.dot = dot;\n    return true;\n  }\n  if (utility.includes(\":\") || utility.startsWith(\"[&\")) return false;\n\n  const { frame, text } = target;\n  let match: RegExpExecArray | null;\n  if (utility.startsWith(\"bg-linear-to-\")) return true;\n  if ((match = /^bg-(.+)$/.exec(utility))) {\n    const value = colour(match[1]!, theme);\n    if (value === undefined) return false;\n    frame.backgroundColor = value;\n    return true;\n  }\n  if ((match = /^text-(.+)$/.exec(utility))) {\n    const arbitrary = /^\\[(\\d+(?:\\.\\d+)?)px\\]$/.exec(match[1]!);\n    if (arbitrary) return ((text.fontSize = Number(arbitrary[1])), true);\n    if (match[1]! in TEXT_SIZES) return ((text.fontSize = TEXT_SIZES[match[1] as keyof typeof TEXT_SIZES]), true);\n    const value = colour(match[1]!, theme);\n    if (value === undefined) return false;\n    text.color = value;\n    return true;\n  }\n  if (utility === \"border\") return ((frame.borderWidth = 1), true);\n  if ((match = /^(?:border|ring)-(.+)$/.exec(utility))) {\n    if (match[1] === \"1\") return ((frame.borderWidth = 1), true);\n    if (match[1] === \"inset\") return true;\n    const value = colour(match[1]!, theme);\n    if (value === undefined) return false;\n    frame.borderColor = value;\n    return true;\n  }\n  if (utility === \"ring-inset\") return true;\n  if ((match = /^(h|w|min-w|px|py|p|gap)-(\\d+(?:\\.\\d+)?)$/.exec(utility))) {\n    const points = unit(match[2]!)!;\n    const key = { h: \"height\", w: \"width\", \"min-w\": \"minWidth\", px: \"paddingHorizontal\", py: \"paddingVertical\", p: \"padding\", gap: \"gap\" }[match[1]!] as keyof NativeFrame;\n    (frame as Record<string, number>)[key] = points;\n    return true;\n  }\n  if ((match = /^opacity-(\\d+)$/.exec(utility))) return ((frame.opacity = Number(match[1]) / 100), true);\n  if ((match = /^font-(.+)$/.exec(utility)) && match[1]! in FONT_WEIGHTS) return ((text.fontWeight = FONT_WEIGHTS[match[1] as keyof typeof FONT_WEIGHTS]), true);\n  if ((match = /^tracking-(.+)$/.exec(utility)) && match[1]! in TRACKING) return ((text.letterSpacing = TRACKING[match[1] as keyof typeof TRACKING]), true);\n  if (utility === \"uppercase\" || utility === \"lowercase\" || utility === \"capitalize\") return ((text.textTransform = utility), true);\n  if ((match = /^(from|to)-(.+)$/.exec(utility))) {\n    const value = colour(match[2]!, theme);\n    if (value === undefined) return false;\n    const stops = [...(look.gradient ?? [\"transparent\", \"transparent\"])] as [string, string];\n    stops[match[1] === \"from\" ? 0 : 1] = value;\n    look.gradient = stops;\n    return true;\n  }\n  return false;\n}\n\n/** `tracking-*` is in em; React Native wants points. */\nfunction finish(look: NativeLook): NativeLook {\n  for (const part of [look, look.disabled, look.on]) {\n    if (part.text.letterSpacing !== undefined) part.text.letterSpacing = part.text.letterSpacing * (part.text.fontSize ?? look.text.fontSize ?? 14);\n  }\n  return look;\n}\n\nexport type NativeRecipe = {\n  /** The looks of each slot (`base` for a recipe without slots) for these variants, on this theme. */\n  resolve: (props: Props, theme: ThemeColors) => Record<string, NativeLook>;\n};\n\n/** The native side of a recipe (`defineRecipe`): what its variants look like on a theme. */\nexport function nativeRecipe(config: Config): NativeRecipe {\n  return {\n    resolve(props, theme) {\n      const looks: Record<string, NativeLook> = {};\n      for (const [slot, classes] of Object.entries(classesFor(config, props))) {\n        const look = empty();\n        for (const cls of classes) if (!apply(look, cls, theme)) look.ignored.push(cls);\n        looks[slot] = finish(look);\n      }\n      return looks;\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/search-field.js

@@ -2,9 +2,9 @@
 import {
   SearchField,
   searchField
-} from "./chunk-FDCMBWUU.js";
+} from "./chunk-REPTKUJ6.js";
 import "./chunk-ZIXB33X7.js";
-import "./chunk-BRKMQ6JV.js";
+import "./chunk-FZBWEDQI.js";
 import "./chunk-CPA5CF35.js";
 export {
   SearchField,

package/dist/status-page.d.ts

@@ -10,7 +10,7 @@ type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     };
     /** A mono line above the title. */
     eyebrow?: React.ReactNode;
-    /** The page's `h1` (`Status`, `Yazakia is on its way`). */
+    /** The page's `h1` (`Status`, `Yasakia is on its way`). */
     title: React.ReactNode;
     /** One sentence under it. */
     lead?: React.ReactNode;

package/dist/status-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/status-page/status-page.tsx"],"sourcesContent":["// Server-safe. Where things stand (blocks.css `.kz-tpl-state`, `.kz-tpl-services`): the overall state in words and\n// colour, each service on its line, the incidents under them — or, for something not built yet (`state=\"building\"`),\n// what is coming, its progress and how to hear about it, the bird beside it. A state is always said in words.\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type ServiceState = \"operational\" | \"degraded\" | \"outage\" | \"building\";\n\nexport type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1` (`Status`, `Yazakia is on its way`). */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: a bird (the pigeon that delivers, the duck that builds). */\n  aside?: React.ReactNode;\n  /** The overall state. */\n  state: ServiceState;\n  /** The overall state, in words (`All systems operational`). */\n  stateLabel: React.ReactNode;\n  /** When it was checked (`Checked 2 min ago`). */\n  checked?: React.ReactNode;\n  /** The services and their states, in words: `{ id, name, state, label }`. */\n  services?: readonly { id: string; name: React.ReactNode; state: ServiceState; label: React.ReactNode }[];\n  /** The services list's accessible name (`Services`). */\n  servicesLabel?: string;\n  /** Under the services: the incidents (a ChangelogPage's entries, a list), or for `building` the progress and the way to follow. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A status page — or an « under construction » one: the overall state, each service, then incidents or progress. */\nexport function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = \"Services\", linkAs, children, ...props }: StatusPageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} backdrop=\"plain\" />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-state\" data-state={state} role=\"status\">\n          <span className=\"kz-tpl-dot\" aria-hidden />\n          <strong>{stateLabel}</strong>\n          {checked && <span className=\"kz-tpl-count\">{checked}</span>}\n        </div>\n        {services && services.length > 0 && (\n          <ul className=\"kz-tpl-services\" aria-label={servicesLabel}>\n            {services.map((s) => (\n              <li key={s.id}>\n                <span>{s.name}</span>\n                <small>\n                  <span className=\"kz-tpl-dot\" data-state={s.state} aria-hidden />\n                  {s.label}\n                </small>\n              </li>\n            ))}\n          </ul>\n        )}\n      </Page>\n      {children && <Section spacing=\"sm\">{children}</Section>}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,MAAM,eAAe;AAE9B,SAAS,gBAAgB;AAoCnB,cAEE,YAFF;AAHC,SAAS,WAAW,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,OAAO,YAAY,SAAS,UAAU,gBAAgB,YAAY,QAAQ,UAAU,GAAG,MAAM,GAAoB;AAC/K,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc,UAAS,SAAQ;AAAA,IACjH,qBAAC,QAAK,WAAU,mBACd;AAAA,2BAAC,SAAI,WAAU,gBAAe,cAAY,OAAO,MAAK,UACpD;AAAA,4BAAC,UAAK,WAAU,cAAa,eAAW,MAAC;AAAA,QACzC,oBAAC,YAAQ,sBAAW;AAAA,QACnB,WAAW,oBAAC,UAAK,WAAU,gBAAgB,mBAAQ;AAAA,SACtD;AAAA,MACC,YAAY,SAAS,SAAS,KAC7B,oBAAC,QAAG,WAAU,mBAAkB,cAAY,eACzC,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,4BAAC,UAAM,YAAE,MAAK;AAAA,QACd,qBAAC,WACC;AAAA,8BAAC,UAAK,WAAU,cAAa,cAAY,EAAE,OAAO,eAAW,MAAC;AAAA,UAC7D,EAAE;AAAA,WACL;AAAA,WALO,EAAE,EAMX,CACD,GACH;AAAA,OAEJ;AAAA,IACC,YAAY,oBAAC,WAAQ,SAAQ,MAAM,UAAS;AAAA,KAC/C;AAEJ;","names":[]}
+{"version":3,"sources":["../src/status-page/status-page.tsx"],"sourcesContent":["// Server-safe. Where things stand (blocks.css `.kz-tpl-state`, `.kz-tpl-services`): the overall state in words and\n// colour, each service on its line, the incidents under them — or, for something not built yet (`state=\"building\"`),\n// what is coming, its progress and how to hear about it, the bird beside it. A state is always said in words.\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type ServiceState = \"operational\" | \"degraded\" | \"outage\" | \"building\";\n\nexport type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1` (`Status`, `Yasakia is on its way`). */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: a bird (the pigeon that delivers, the duck that builds). */\n  aside?: React.ReactNode;\n  /** The overall state. */\n  state: ServiceState;\n  /** The overall state, in words (`All systems operational`). */\n  stateLabel: React.ReactNode;\n  /** When it was checked (`Checked 2 min ago`). */\n  checked?: React.ReactNode;\n  /** The services and their states, in words: `{ id, name, state, label }`. */\n  services?: readonly { id: string; name: React.ReactNode; state: ServiceState; label: React.ReactNode }[];\n  /** The services list's accessible name (`Services`). */\n  servicesLabel?: string;\n  /** Under the services: the incidents (a ChangelogPage's entries, a list), or for `building` the progress and the way to follow. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A status page — or an « under construction » one: the overall state, each service, then incidents or progress. */\nexport function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = \"Services\", linkAs, children, ...props }: StatusPageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} backdrop=\"plain\" />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-state\" data-state={state} role=\"status\">\n          <span className=\"kz-tpl-dot\" aria-hidden />\n          <strong>{stateLabel}</strong>\n          {checked && <span className=\"kz-tpl-count\">{checked}</span>}\n        </div>\n        {services && services.length > 0 && (\n          <ul className=\"kz-tpl-services\" aria-label={servicesLabel}>\n            {services.map((s) => (\n              <li key={s.id}>\n                <span>{s.name}</span>\n                <small>\n                  <span className=\"kz-tpl-dot\" data-state={s.state} aria-hidden />\n                  {s.label}\n                </small>\n              </li>\n            ))}\n          </ul>\n        )}\n      </Page>\n      {children && <Section spacing=\"sm\">{children}</Section>}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,MAAM,eAAe;AAE9B,SAAS,gBAAgB;AAoCnB,cAEE,YAFF;AAHC,SAAS,WAAW,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,OAAO,YAAY,SAAS,UAAU,gBAAgB,YAAY,QAAQ,UAAU,GAAG,MAAM,GAAoB;AAC/K,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc,UAAS,SAAQ;AAAA,IACjH,qBAAC,QAAK,WAAU,mBACd;AAAA,2BAAC,SAAI,WAAU,gBAAe,cAAY,OAAO,MAAK,UACpD;AAAA,4BAAC,UAAK,WAAU,cAAa,eAAW,MAAC;AAAA,QACzC,oBAAC,YAAQ,sBAAW;AAAA,QACnB,WAAW,oBAAC,UAAK,WAAU,gBAAgB,mBAAQ;AAAA,SACtD;AAAA,MACC,YAAY,SAAS,SAAS,KAC7B,oBAAC,QAAG,WAAU,mBAAkB,cAAY,eACzC,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,4BAAC,UAAM,YAAE,MAAK;AAAA,QACd,qBAAC,WACC;AAAA,8BAAC,UAAK,WAAU,cAAa,cAAY,EAAE,OAAO,eAAW,MAAC;AAAA,UAC7D,EAAE;AAAA,WACL;AAAA,WALO,EAAE,EAMX,CACD,GACH;AAAA,OAEJ;AAAA,IACC,YAAY,oBAAC,WAAQ,SAAQ,MAAM,UAAS;AAAA,KAC/C;AAEJ;","names":[]}

package/dist/swipe-deck.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   usePrefersReducedMotion
-} from "./chunk-BRKMQ6JV.js";
+} from "./chunk-FZBWEDQI.js";
 
 // src/swipe-deck/swipe-deck.tsx
 import * as React from "react";

package/dist/tag-input.js

@@ -1,12 +1,13 @@
 "use client";
 import {
   Combobox
-} from "./chunk-LCZXS6AK.js";
-import "./chunk-YH4LMWRU.js";
+} from "./chunk-CKSHLSDH.js";
+import "./chunk-7UCPGXKN.js";
+import "./chunk-D3T54RSL.js";
 import "./chunk-ZIXB33X7.js";
 import {
   useControllable
-} from "./chunk-BRKMQ6JV.js";
+} from "./chunk-FZBWEDQI.js";
 import "./chunk-CPA5CF35.js";
 
 // src/tag-input/tag-input.tsx

package/dist/tag-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tag-input/tag-input.tsx"],"sourcesContent":["// Client. Free words as chips — the multiple, creatable `Combobox` on strings: Enter or a separator adds the word,\n// a paste of \"a, b, c\" adds three, Backspace on an empty input removes the last, suggestions complete as you type.\n// `normalize` cleans a word (lower case, no `#`), `validate` refuses one with a reason read aloud.\nimport * as React from \"react\";\n\nimport { Combobox, type ComboboxLabels, type ComboboxOption } from \"../combobox\";\nimport { useControllable } from \"../media\";\n\nexport type TagInputProps = {\n  /** The visible label, passed translated (also the accessible name). */\n  label: string;\n  /** Hides the label visually, keeping it as the accessible name. */\n  hideLabel?: boolean;\n  /** The tags (controlled). */\n  value?: readonly string[];\n  /** The tags at first, uncontrolled. */\n  defaultValue?: readonly string[];\n  /** Called with every tag after a change. */\n  onValueChange?: (tags: string[]) => void;\n  /** Words offered as the person types (their own history, a curated list). */\n  suggestions?: readonly string[];\n  /** Cleans a word before it is added (`(t) => t.toLowerCase().replace(/^#/, \"\")`). An empty result is ignored. */\n  normalize?: (tag: string) => string;\n  /** Refuses a word: return the reason (passed translated), shown and read as the field's error; `null` accepts it. */\n  validate?: (tag: string, tags: readonly string[]) => string | null;\n  /** Most tags; the field stops offering more past it. */\n  max?: number;\n  /** Keys that add the word, besides Enter. Default `[\",\"]`. */\n  separators?: readonly string[];\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** A help text under the field (\"Up to 10 tags, separated by commas\"). */\n  hint?: string;\n  /** An error from the app (a server refusal); `validate`'s own errors show here too. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of the hidden inputs, for a plain `<form>` post (one per tag). */\n  name?: string;\n  /** The words of the field, passed translated; English by default. */\n  labels?: Partial<Pick<ComboboxLabels, \"create\" | \"remove\" | \"empty\" | \"results\" | \"toggle\">>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst toOption = (tag: string): ComboboxOption => ({ value: tag, label: tag });\n\n/** Words as removable chips — tags, keywords, e-mail recipients — with suggestions, cleaning and validation. */\nexport function TagInput({\n  value,\n  defaultValue = [],\n  onValueChange,\n  suggestions = [],\n  normalize = (tag) => tag.trim(),\n  validate,\n  max,\n  separators = [\",\"],\n  error,\n  labels,\n  ...props\n}: TagInputProps) {\n  const [tags, setTags] = useControllable<readonly string[]>(value, defaultValue, onValueChange as (next: readonly string[]) => void);\n  const [refusal, setRefusal] = React.useState<string | null>(null);\n\n  const change = (options: ComboboxOption[]) => {\n    const next: string[] = [];\n    for (const option of options) {\n      const tag = normalize(option.value);\n      if (!tag || next.includes(tag)) continue;\n      if (!tags.includes(tag)) {\n        const reason = validate?.(tag, next) ?? null;\n        if (reason) {\n          setRefusal(reason);\n          continue;\n        }\n      }\n      next.push(tag);\n    }\n    if (next.length >= options.length || options.length < tags.length) setRefusal(null);\n    setTags(next);\n  };\n\n  return (\n    <Combobox\n      {...props}\n      multiple\n      creatable\n      separators={separators}\n      maxSelected={max}\n      value={tags.map(toOption)}\n      onValueChange={change}\n      options={suggestions.map(toOption)}\n      error={refusal ?? error}\n      labels={{ empty: \"\", results: () => \"\", ...labels }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAGA,YAAY,WAAW;AAgFnB;AAtCJ,IAAM,WAAW,CAAC,SAAiC,EAAE,OAAO,KAAK,OAAO,IAAI;AAGrE,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,YAAY,CAAC,QAAQ,IAAI,KAAK;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,aAAa,CAAC,GAAG;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,gBAAmC,OAAO,cAAc,aAAkD;AAClI,QAAM,CAAC,SAAS,UAAU,IAAU,eAAwB,IAAI;AAEhE,QAAM,SAAS,CAAC,YAA8B;AAC5C,UAAM,OAAiB,CAAC;AACxB,eAAW,UAAU,SAAS;AAC5B,YAAM,MAAM,UAAU,OAAO,KAAK;AAClC,UAAI,CAAC,OAAO,KAAK,SAAS,GAAG,EAAG;AAChC,UAAI,CAAC,KAAK,SAAS,GAAG,GAAG;AACvB,cAAM,SAAS,WAAW,KAAK,IAAI,KAAK;AACxC,YAAI,QAAQ;AACV,qBAAW,MAAM;AACjB;AAAA,QACF;AAAA,MACF;AACA,WAAK,KAAK,GAAG;AAAA,IACf;AACA,QAAI,KAAK,UAAU,QAAQ,UAAU,QAAQ,SAAS,KAAK,OAAQ,YAAW,IAAI;AAClF,YAAQ,IAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAQ;AAAA,MACR,WAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb,OAAO,KAAK,IAAI,QAAQ;AAAA,MACxB,eAAe;AAAA,MACf,SAAS,YAAY,IAAI,QAAQ;AAAA,MACjC,OAAO,WAAW;AAAA,MAClB,QAAQ,EAAE,OAAO,IAAI,SAAS,MAAM,IAAI,GAAG,OAAO;AAAA;AAAA,EACpD;AAEJ;","names":[]}
+{"version":3,"sources":["../src/tag-input/tag-input.tsx"],"sourcesContent":["// Client. Free words as chips — the multiple, creatable `Combobox` on strings: Enter or a separator adds the word,\n// a paste of \"a, b, c\" adds three, Backspace on an empty input removes the last, suggestions complete as you type.\n// `normalize` cleans a word (lower case, no `#`), `validate` refuses one with a reason read aloud.\nimport * as React from \"react\";\n\nimport { Combobox, type ComboboxLabels, type ComboboxOption } from \"../combobox\";\nimport { useControllable } from \"../media\";\n\nexport type TagInputProps = {\n  /** The visible label, passed translated (also the accessible name). */\n  label: string;\n  /** Hides the label visually, keeping it as the accessible name. */\n  hideLabel?: boolean;\n  /** The tags (controlled). */\n  value?: readonly string[];\n  /** The tags at first, uncontrolled. */\n  defaultValue?: readonly string[];\n  /** Called with every tag after a change. */\n  onValueChange?: (tags: string[]) => void;\n  /** Words offered as the person types (their own history, a curated list). */\n  suggestions?: readonly string[];\n  /** Cleans a word before it is added (`(t) => t.toLowerCase().replace(/^#/, \"\")`). An empty result is ignored. */\n  normalize?: (tag: string) => string;\n  /** Refuses a word: return the reason (passed translated), shown and read as the field's error; `null` accepts it. */\n  validate?: (tag: string, tags: readonly string[]) => string | null;\n  /** Most tags; the field stops offering more past it. */\n  max?: number;\n  /** Keys that add the word, besides Enter. Default `[\",\"]`. */\n  separators?: readonly string[];\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** A help text under the field (\"Up to 10 tags, separated by commas\"). */\n  hint?: string;\n  /** An error from the app (a server refusal); `validate`'s own errors show here too. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of the hidden inputs, for a plain `<form>` post (one per tag). */\n  name?: string;\n  /** The words of the field, passed translated; English by default. */\n  labels?: Partial<Pick<ComboboxLabels, \"create\" | \"remove\" | \"empty\" | \"results\" | \"toggle\">>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst toOption = (tag: string): ComboboxOption => ({ value: tag, label: tag });\n\n/** Words as removable chips — tags, keywords, e-mail recipients — with suggestions, cleaning and validation. */\nexport function TagInput({\n  value,\n  defaultValue = [],\n  onValueChange,\n  suggestions = [],\n  normalize = (tag) => tag.trim(),\n  validate,\n  max,\n  separators = [\",\"],\n  error,\n  labels,\n  ...props\n}: TagInputProps) {\n  const [tags, setTags] = useControllable<readonly string[]>(value, defaultValue, onValueChange as (next: readonly string[]) => void);\n  const [refusal, setRefusal] = React.useState<string | null>(null);\n\n  const change = (options: ComboboxOption[]) => {\n    const next: string[] = [];\n    for (const option of options) {\n      const tag = normalize(option.value);\n      if (!tag || next.includes(tag)) continue;\n      if (!tags.includes(tag)) {\n        const reason = validate?.(tag, next) ?? null;\n        if (reason) {\n          setRefusal(reason);\n          continue;\n        }\n      }\n      next.push(tag);\n    }\n    if (next.length >= options.length || options.length < tags.length) setRefusal(null);\n    setTags(next);\n  };\n\n  return (\n    <Combobox\n      {...props}\n      multiple\n      creatable\n      separators={separators}\n      maxSelected={max}\n      value={tags.map(toOption)}\n      onValueChange={change}\n      options={suggestions.map(toOption)}\n      error={refusal ?? error}\n      labels={{ empty: \"\", results: () => \"\", ...labels }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAGA,YAAY,WAAW;AAgFnB;AAtCJ,IAAM,WAAW,CAAC,SAAiC,EAAE,OAAO,KAAK,OAAO,IAAI;AAGrE,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,YAAY,CAAC,QAAQ,IAAI,KAAK;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,aAAa,CAAC,GAAG;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,gBAAmC,OAAO,cAAc,aAAkD;AAClI,QAAM,CAAC,SAAS,UAAU,IAAU,eAAwB,IAAI;AAEhE,QAAM,SAAS,CAAC,YAA8B;AAC5C,UAAM,OAAiB,CAAC;AACxB,eAAW,UAAU,SAAS;AAC5B,YAAM,MAAM,UAAU,OAAO,KAAK;AAClC,UAAI,CAAC,OAAO,KAAK,SAAS,GAAG,EAAG;AAChC,UAAI,CAAC,KAAK,SAAS,GAAG,GAAG;AACvB,cAAM,SAAS,WAAW,KAAK,IAAI,KAAK;AACxC,YAAI,QAAQ;AACV,qBAAW,MAAM;AACjB;AAAA,QACF;AAAA,MACF;AACA,WAAK,KAAK,GAAG;AAAA,IACf;AACA,QAAI,KAAK,UAAU,QAAQ,UAAU,QAAQ,SAAS,KAAK,OAAQ,YAAW,IAAI;AAClF,YAAQ,IAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAQ;AAAA,MACR,WAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb,OAAO,KAAK,IAAI,QAAQ;AAAA,MACxB,eAAe;AAAA,MACf,SAAS,YAAY,IAAI,QAAQ;AAAA,MACjC,OAAO,WAAW;AAAA,MAClB,QAAQ,EAAE,OAAO,IAAI,SAAS,MAAM,IAAI,GAAG,OAAO;AAAA;AAAA,EACpD;AAEJ;","names":[]}

package/dist/tag-selector.js

@@ -1,7 +1,8 @@
 "use client";
 import {
   Chip
-} from "./chunk-YH4LMWRU.js";
+} from "./chunk-7UCPGXKN.js";
+import "./chunk-D3T54RSL.js";
 
 // src/tag-selector/tag-selector.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/tag-selector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tag-selector/tag-selector.tsx"],"sourcesContent":["// Client. Interests, languages, what one is looking for: toggle chips with a limit and a count; once it is reached the\n// others rest (disabled) and the count says so.\nimport { Chip } from \"../chip\";\n\nexport type TagOption = { value: string; label: string };\n\nexport type TagSelectorProps = {\n  /** The group's name (“Interests”) — passed translated. */\n  label: string;\n  /** The tags offered. */\n  options: readonly TagOption[];\n  /** The tags chosen. */\n  value: readonly string[];\n  /** Called with the tags chosen. */\n  onValueChange: (value: string[]) => void;\n  /** The most that can be chosen. */\n  max?: number;\n  /** The count under the tags: `(n, max) => n + \" of \" + max`. */\n  countLabel?: (count: number, max: number) => string;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Toggle chips with a limit and a count — the others rest once the limit is reached. */\nexport function TagSelector({ label, options, value, onValueChange, max, countLabel, className }: TagSelectorProps) {\n  const full = max !== undefined && value.length >= max;\n  return (\n    <div className={[\"flex flex-col gap-2\", className].filter(Boolean).join(\" \")}>\n      <div role=\"group\" aria-label={label} className=\"flex flex-wrap gap-2\">\n        {options.map((option) => {\n          const on = value.includes(option.value);\n          return (\n            <Chip key={option.value} selected={on} disabled={!on && full} onSelectedChange={(next) => onValueChange(next ? [...value, option.value] : value.filter((v) => v !== option.value))}>\n              {option.label}\n            </Chip>\n          );\n        })}\n      </div>\n      {max !== undefined && countLabel ? (\n        <p className={[\"m-0 text-xs\", full ? \"font-semibold text-fg-accent\" : \"text-fg-secondary\"].join(\" \")} aria-live=\"polite\">\n          {countLabel(value.length, max)}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA2BI,SAKQ,KALR;AAHG,SAAS,YAAY,EAAE,OAAO,SAAS,OAAO,eAAe,KAAK,YAAY,UAAU,GAAqB;AAClH,QAAM,OAAO,QAAQ,UAAa,MAAM,UAAU;AAClD,SACE,qBAAC,SAAI,WAAW,CAAC,uBAAuB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACzE;AAAA,wBAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,WAAU,wBAC5C,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,KAAK,MAAM,SAAS,OAAO,KAAK;AACtC,aACE,oBAAC,QAAwB,UAAU,IAAI,UAAU,CAAC,MAAM,MAAM,kBAAkB,CAAC,SAAS,cAAc,OAAO,CAAC,GAAG,OAAO,OAAO,KAAK,IAAI,MAAM,OAAO,CAAC,MAAM,MAAM,OAAO,KAAK,CAAC,GAC9K,iBAAO,SADC,OAAO,KAElB;AAAA,IAEJ,CAAC,GACH;AAAA,IACC,QAAQ,UAAa,aACpB,oBAAC,OAAE,WAAW,CAAC,eAAe,OAAO,iCAAiC,mBAAmB,EAAE,KAAK,GAAG,GAAG,aAAU,UAC7G,qBAAW,MAAM,QAAQ,GAAG,GAC/B,IACE;AAAA,KACN;AAEJ;","names":[]}
+{"version":3,"sources":["../src/tag-selector/tag-selector.tsx"],"sourcesContent":["// Client. Interests, languages, what one is looking for: toggle chips with a limit and a count; once it is reached the\n// others rest (disabled) and the count says so.\nimport { Chip } from \"../chip\";\n\nexport type TagOption = { value: string; label: string };\n\nexport type TagSelectorProps = {\n  /** The group's name (“Interests”) — passed translated. */\n  label: string;\n  /** The tags offered. */\n  options: readonly TagOption[];\n  /** The tags chosen. */\n  value: readonly string[];\n  /** Called with the tags chosen. */\n  onValueChange: (value: string[]) => void;\n  /** The most that can be chosen. */\n  max?: number;\n  /** The count under the tags: `(n, max) => n + \" of \" + max`. */\n  countLabel?: (count: number, max: number) => string;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Toggle chips with a limit and a count — the others rest once the limit is reached. */\nexport function TagSelector({ label, options, value, onValueChange, max, countLabel, className }: TagSelectorProps) {\n  const full = max !== undefined && value.length >= max;\n  return (\n    <div className={[\"flex flex-col gap-2\", className].filter(Boolean).join(\" \")}>\n      <div role=\"group\" aria-label={label} className=\"flex flex-wrap gap-2\">\n        {options.map((option) => {\n          const on = value.includes(option.value);\n          return (\n            <Chip key={option.value} selected={on} disabled={!on && full} onSelectedChange={(next) => onValueChange(next ? [...value, option.value] : value.filter((v) => v !== option.value))}>\n              {option.label}\n            </Chip>\n          );\n        })}\n      </div>\n      {max !== undefined && countLabel ? (\n        <p className={[\"m-0 text-xs\", full ? \"font-semibold text-fg-accent\" : \"text-fg-secondary\"].join(\" \")} aria-live=\"polite\">\n          {countLabel(value.length, max)}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA2BI,SAKQ,KALR;AAHG,SAAS,YAAY,EAAE,OAAO,SAAS,OAAO,eAAe,KAAK,YAAY,UAAU,GAAqB;AAClH,QAAM,OAAO,QAAQ,UAAa,MAAM,UAAU;AAClD,SACE,qBAAC,SAAI,WAAW,CAAC,uBAAuB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACzE;AAAA,wBAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,WAAU,wBAC5C,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,KAAK,MAAM,SAAS,OAAO,KAAK;AACtC,aACE,oBAAC,QAAwB,UAAU,IAAI,UAAU,CAAC,MAAM,MAAM,kBAAkB,CAAC,SAAS,cAAc,OAAO,CAAC,GAAG,OAAO,OAAO,KAAK,IAAI,MAAM,OAAO,CAAC,MAAM,MAAM,OAAO,KAAK,CAAC,GAC9K,iBAAO,SADC,OAAO,KAElB;AAAA,IAEJ,CAAC,GACH;AAAA,IACC,QAAQ,UAAa,aACpB,oBAAC,OAAE,WAAW,CAAC,eAAe,OAAO,iCAAiC,mBAAmB,EAAE,KAAK,GAAG,GAAG,aAAU,UAC7G,qBAAW,MAAM,QAAQ,GAAG,GAC/B,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/theme.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { a as ButtonVariants } from './button-BMAO7dKF.js';
+import { a as ButtonVariants } from './button-BmCrLCq7.js';
 import 'tailwind-variants';
 
 type Mode = "dark" | "light" | "system";

package/dist/theme.js

@@ -1,7 +1,8 @@
 "use client";
 import {
   buttonVariants
-} from "./chunk-RUPNPMP3.js";
+} from "./chunk-OWC2LZD2.js";
+import "./chunk-D3T54RSL.js";
 import "./chunk-WEVYKZIF.js";
 
 // src/theme/theme.tsx

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\nexport type ThemeScriptProps = {\n  /** The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`). */\n  nonce?: string;\n  /**\n   * The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted\n   * choice (`kz-theme`) always wins.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\n/**\n * In <head>, before anything renders: applies the persisted mode (else `defaultMode`) and named theme, so the page\n * never flashes. `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce, defaultMode = \"system\" }: ThemeScriptProps) {\n  const fallback = isMode(defaultMode) ? defaultMode : \"system\";\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\");if(m!==\"dark\"&&m!==\"light\"&&m!==\"system\")m=\"${fallback}\";` +\n    `var n=localStorage.getItem(\"${NAME_KEY}\");var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /**\n   * The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // The same resolution as ThemeScript (a no-op after it), for an app that renders the provider without the script.\n  React.useEffect(() => {\n    const persisted = read(MODE_KEY);\n    applyMode(isMode(persisted) ? persisted : defaultMode);\n  }, [defaultMode]);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** Any `Button` variant. */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\nexport type ThemeScriptProps = {\n  /** The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`). */\n  nonce?: string;\n  /**\n   * The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted\n   * choice (`kz-theme`) always wins.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\n/**\n * In <head>, before anything renders: applies the persisted mode (else `defaultMode`) and named theme, so the page\n * never flashes. `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce, defaultMode = \"system\" }: ThemeScriptProps) {\n  const fallback = isMode(defaultMode) ? defaultMode : \"system\";\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\");if(m!==\"dark\"&&m!==\"light\"&&m!==\"system\")m=\"${fallback}\";` +\n    `var n=localStorage.getItem(\"${NAME_KEY}\");var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /**\n   * The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // The same resolution as ThemeScript (a no-op after it), for an app that renders the provider without the script.\n  React.useEffect(() => {\n    const persisted = read(MODE_KEY);\n    applyMode(isMode(persisted) ? persisted : defaultMode);\n  }, [defaultMode]);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** Any `Button` variant. */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tree-view.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useControllable
-} from "./chunk-BRKMQ6JV.js";
+} from "./chunk-FZBWEDQI.js";
 import {
   ChevronGlyph
 } from "./chunk-CPA5CF35.js";

package/dist/vertical-video.js

@@ -4,7 +4,8 @@ import {
 } from "./chunk-CURW36FI.js";
 import {
   IconButton
-} from "./chunk-UOMP6VOZ.js";
+} from "./chunk-276PTQMQ.js";
+import "./chunk-D3T54RSL.js";
 import {
   cn
 } from "./chunk-2FRWNSRO.js";