@krizaka/ui 2.8.0 → 2.9.0

package/dist/auth-layout.d.ts

@@ -0,0 +1,136 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const authLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+            asideBrand?: tailwind_variants.ClassValue;
+            asideBody?: tailwind_variants.ClassValue;
+            asideTitle?: tailwind_variants.ClassValue;
+            asideText?: tailwind_variants.ClassValue;
+            asideFoot?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            mobileBrand?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+            asideBrand?: tailwind_variants.ClassValue;
+            asideBody?: tailwind_variants.ClassValue;
+            asideTitle?: tailwind_variants.ClassValue;
+            asideText?: tailwind_variants.ClassValue;
+            asideFoot?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            mobileBrand?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    aside: string;
+    asideBrand: string;
+    asideBody: string;
+    asideTitle: string;
+    asideText: string;
+    asideFoot: string;
+    main: string;
+    column: string;
+    mobileBrand: string;
+    head: string;
+    title: string;
+    description: string;
+    footer: string;
+    legal: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+            asideBrand?: tailwind_variants.ClassValue;
+            asideBody?: tailwind_variants.ClassValue;
+            asideTitle?: tailwind_variants.ClassValue;
+            asideText?: tailwind_variants.ClassValue;
+            asideFoot?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            mobileBrand?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    aside: string;
+    asideBrand: string;
+    asideBody: string;
+    asideTitle: string;
+    asideText: string;
+    asideFoot: string;
+    main: string;
+    column: string;
+    mobileBrand: string;
+    head: string;
+    title: string;
+    description: string;
+    footer: string;
+    legal: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    aside: string;
+    asideBrand: string;
+    asideBody: string;
+    asideTitle: string;
+    asideText: string;
+    asideFoot: string;
+    main: string;
+    column: string;
+    mobileBrand: string;
+    head: string;
+    title: string;
+    description: string;
+    footer: string;
+    legal: string;
+}>>;
+type AuthLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The product's mark and name (`<ProductLogo id="orochia" /> Orochia`): in the brand panel, and above the form on a phone. */
+    brand: React.ReactNode;
+    /** The form's title (`Welcome back`): the `h1`. */
+    title: React.ReactNode;
+    /** One sentence under the title. */
+    description?: React.ReactNode;
+    /** The form: fields, the primary Button, the alternatives (a passkey, a magic link). */
+    children: React.ReactNode;
+    /** Under the form: the other way (`No account yet? Create one`). */
+    footer?: React.ReactNode;
+    /** The fine print at the very bottom (terms, privacy). */
+    legal?: React.ReactNode;
+    /** The brand panel's promise, large (desktop). */
+    promise?: React.ReactNode;
+    /** The brand panel's sentence or quote under the promise (a MascotQuote, a creator's words). */
+    aside?: React.ReactNode;
+    /** The brand panel's foot (`© Krizaka · Montréal`). */
+    asideFooter?: React.ReactNode;
+};
+/** An entry screen: the product's brand panel beside the form (one column on a phone). */
+declare function AuthLayout({ brand, title, description, children, footer, legal, promise, aside, asideFooter, className, ...props }: AuthLayoutProps): React.JSX.Element;
+
+export { AuthLayout, type AuthLayoutProps, authLayout };

package/dist/auth-layout.js

@@ -0,0 +1,75 @@
+// src/auth-layout/auth-layout.tsx
+import { tv as tv2 } from "tailwind-variants";
+
+// src/section-backdrop/section-backdrop.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sectionBackdropVariants = tv({
+  slots: {
+    root: "kz-backdrop",
+    drift: "kz-backdrop-drift",
+    dome: "kz-backdrop-dome",
+    grid: "kz-backdrop-grid",
+    media: "kz-backdrop-media"
+  }
+});
+function SectionBackdrop({ as: Tag = "section", direction = "down", dome = true, grid = false, media, animated = true, className, children, ...props }) {
+  const s2 = sectionBackdropVariants();
+  return /* @__PURE__ */ jsxs(Tag, { className: s2.root({ className }), "data-direction": direction, ...props, children: [
+    animated ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.drift() }) : null,
+    dome ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.dome() }) : null,
+    grid ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.grid() }) : null,
+    media ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.media(), children: media }) : null,
+    children
+  ] });
+}
+
+// src/auth-layout/auth-layout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var authLayout = tv2({
+  slots: {
+    root: "grid min-h-dvh w-full bg-surface-0 text-fg lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]",
+    aside: "relative hidden flex-col justify-between overflow-hidden border-r border-border-subtle p-10 lg:flex",
+    asideBrand: "relative flex items-center gap-2.5 font-display text-base font-bold tracking-tight",
+    asideBody: "relative flex max-w-md flex-col gap-4",
+    asideTitle: "font-display text-3xl font-extrabold leading-tight tracking-tight text-fg",
+    asideText: "text-[15px] leading-relaxed text-fg-secondary",
+    asideFoot: "relative text-xs text-fg-secondary",
+    main: "flex flex-col items-center justify-center px-4 py-10 sm:px-8",
+    column: "flex w-full max-w-sm flex-col gap-6",
+    mobileBrand: "flex items-center gap-2.5 font-display text-base font-bold tracking-tight lg:hidden",
+    head: "flex flex-col gap-1.5",
+    title: "font-display text-2xl font-extrabold tracking-tight text-fg",
+    description: "text-sm text-fg-secondary",
+    footer: "text-center text-sm text-fg-secondary",
+    legal: "text-center text-xs leading-relaxed text-fg-secondary"
+  }
+});
+var s = authLayout();
+function AuthLayout({ brand, title, description, children, footer, legal, promise, aside, asideFooter, className, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs2(SectionBackdrop, { as: "div", grid: true, className: s.aside(), "aria-hidden": !promise && !aside ? true : void 0, children: [
+      /* @__PURE__ */ jsx2("div", { className: s.asideBrand(), children: brand }),
+      /* @__PURE__ */ jsxs2("div", { className: s.asideBody(), children: [
+        promise && /* @__PURE__ */ jsx2("p", { className: s.asideTitle(), children: promise }),
+        aside && /* @__PURE__ */ jsx2("div", { className: s.asideText(), children: aside })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: s.asideFoot(), children: asideFooter })
+    ] }),
+    /* @__PURE__ */ jsx2("main", { className: s.main(), children: /* @__PURE__ */ jsxs2("div", { className: s.column(), children: [
+      /* @__PURE__ */ jsx2("div", { className: s.mobileBrand(), children: brand }),
+      /* @__PURE__ */ jsxs2("div", { className: s.head(), children: [
+        /* @__PURE__ */ jsx2("h1", { className: s.title(), children: title }),
+        description && /* @__PURE__ */ jsx2("p", { className: s.description(), children: description })
+      ] }),
+      children,
+      footer && /* @__PURE__ */ jsx2("p", { className: s.footer(), children: footer }),
+      legal && /* @__PURE__ */ jsx2("p", { className: s.legal(), children: legal })
+    ] }) })
+  ] });
+}
+export {
+  AuthLayout,
+  authLayout
+};
+//# sourceMappingURL=auth-layout.js.map

package/dist/auth-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/auth-layout/auth-layout.tsx","../src/section-backdrop/section-backdrop.tsx"],"sourcesContent":["// Server-safe. Sign in, sign up, verify, reset — read from the products' entry screens: on a desktop the product's\n// brand panel (its gradient, a sentence, a quote or an illustration) beside a calm column with the form; on a phone\n// one column, the brand reduced to its mark above the form. Words and the product's mark arrive as props.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { SectionBackdrop } from \"../section-backdrop/section-backdrop\";\n\nexport const authLayout = tv({\n  slots: {\n    root: \"grid min-h-dvh w-full bg-surface-0 text-fg lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]\",\n    aside: \"relative hidden flex-col justify-between overflow-hidden border-r border-border-subtle p-10 lg:flex\",\n    asideBrand: \"relative flex items-center gap-2.5 font-display text-base font-bold tracking-tight\",\n    asideBody: \"relative flex max-w-md flex-col gap-4\",\n    asideTitle: \"font-display text-3xl font-extrabold leading-tight tracking-tight text-fg\",\n    asideText: \"text-[15px] leading-relaxed text-fg-secondary\",\n    asideFoot: \"relative text-xs text-fg-secondary\",\n    main: \"flex flex-col items-center justify-center px-4 py-10 sm:px-8\",\n    column: \"flex w-full max-w-sm flex-col gap-6\",\n    mobileBrand: \"flex items-center gap-2.5 font-display text-base font-bold tracking-tight lg:hidden\",\n    head: \"flex flex-col gap-1.5\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    footer: \"text-center text-sm text-fg-secondary\",\n    legal: \"text-center text-xs leading-relaxed text-fg-secondary\",\n  },\n});\nconst s = authLayout();\n\nexport type AuthLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The product's mark and name (`<ProductLogo id=\"orochia\" /> Orochia`): in the brand panel, and above the form on a phone. */\n  brand: React.ReactNode;\n  /** The form's title (`Welcome back`): the `h1`. */\n  title: React.ReactNode;\n  /** One sentence under the title. */\n  description?: React.ReactNode;\n  /** The form: fields, the primary Button, the alternatives (a passkey, a magic link). */\n  children: React.ReactNode;\n  /** Under the form: the other way (`No account yet? Create one`). */\n  footer?: React.ReactNode;\n  /** The fine print at the very bottom (terms, privacy). */\n  legal?: React.ReactNode;\n  /** The brand panel's promise, large (desktop). */\n  promise?: React.ReactNode;\n  /** The brand panel's sentence or quote under the promise (a MascotQuote, a creator's words). */\n  aside?: React.ReactNode;\n  /** The brand panel's foot (`© Krizaka · Montréal`). */\n  asideFooter?: React.ReactNode;\n};\n\n/** An entry screen: the product's brand panel beside the form (one column on a phone). */\nexport function AuthLayout({ brand, title, description, children, footer, legal, promise, aside, asideFooter, className, ...props }: AuthLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <SectionBackdrop as=\"div\" grid className={s.aside()} aria-hidden={!promise && !aside ? true : undefined}>\n        <div className={s.asideBrand()}>{brand}</div>\n        <div className={s.asideBody()}>\n          {promise && <p className={s.asideTitle()}>{promise}</p>}\n          {aside && <div className={s.asideText()}>{aside}</div>}\n        </div>\n        <div className={s.asideFoot()}>{asideFooter}</div>\n      </SectionBackdrop>\n      <main className={s.main()}>\n        <div className={s.column()}>\n          <div className={s.mobileBrand()}>{brand}</div>\n          <div className={s.head()}>\n            <h1 className={s.title()}>{title}</h1>\n            {description && <p className={s.description()}>{description}</p>}\n          </div>\n          {children}\n          {footer && <p className={s.footer()}>{footer}</p>}\n          {legal && <p className={s.legal()}>{legal}</p>}\n        </div>\n      </main>\n    </div>\n  );\n}\n","// Server-safe. The backdrop of a page section in the brand's visual language (packages/tokens/BRAND.md).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const sectionBackdropVariants = tv({\n  slots: {\n    root: \"kz-backdrop\",\n    drift: \"kz-backdrop-drift\",\n    dome: \"kz-backdrop-dome\",\n    grid: \"kz-backdrop-grid\",\n    media: \"kz-backdrop-media\",\n  },\n});\n\nexport interface SectionBackdropProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element: `section` (default), `header`, `footer` or `div`. */\n  as?: \"section\" | \"header\" | \"footer\" | \"div\";\n  /** Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action). */\n  direction?: \"down\" | \"up\";\n  /** The light dome above the content (the halo of a hero). Default true. */\n  dome?: boolean;\n  /** A floor of perspective lines under the content. Default false. */\n  grid?: boolean;\n  /** A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). */\n  media?: React.ReactNode;\n  /** The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. */\n  animated?: boolean;\n}\n\n/**\n * A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it\n * follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every\n * section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA\n * (tested in @krizaka/tokens).\n */\nexport function SectionBackdrop({ as: Tag = \"section\", direction = \"down\", dome = true, grid = false, media, animated = true, className, children, ...props }: SectionBackdropProps) {\n  const s = sectionBackdropVariants();\n  return (\n    <Tag className={s.root({ className })} data-direction={direction} {...props}>\n      {animated ? <div data-backdrop-layer aria-hidden className={s.drift()} /> : null}\n      {dome ? <div data-backdrop-layer aria-hidden className={s.dome()} /> : null}\n      {grid ? <div data-backdrop-layer aria-hidden className={s.grid()} /> : null}\n      {media ? (\n        <div data-backdrop-layer aria-hidden className={s.media()}>\n          {media}\n        </div>\n      ) : null}\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":["tv","s","jsx","jsxs","tv"]}

package/dist/choice-grid.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */
+type LinkComponent = React.ElementType<{
+    href: string;
+    className?: string;
+    children?: React.ReactNode;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+}>;
+
+interface ChoiceItem {
+    /** The value of the choice (and its React key). */
+    id: string;
+    /** What represents it: a mark, an avatar, an illustration. Decorative — the name carries the meaning. */
+    visual: React.ReactNode;
+    /** Its name, short. */
+    name: React.ReactNode;
+    /** One line under the name: what it is, its role. */
+    title?: React.ReactNode;
+    /** A small line above the visual (a family, a tier), after its `icon`. */
+    eyebrow?: React.ReactNode;
+    /** A small glyph before the eyebrow (decorative). */
+    icon?: React.ReactNode;
+    /** A short tag in the top corner (“P1”, “New”, “Popular”). */
+    badge?: React.ReactNode;
+    /** Under the line: a gauge (`StatGauge`), facts, a price. */
+    extra?: React.ReactNode;
+    /** At the bottom: where the tile leads (“Chapter 2 ↓”, “See the plan”). */
+    meta?: React.ReactNode;
+    /** Makes the tile a link (ignored when the grid is selectable). */
+    href?: string;
+    /** A brand scope for this tile (`orazaka` → `.brand-orazaka`): its accent becomes that brand's. */
+    brand?: string;
+    /** Not selectable. */
+    disabled?: boolean;
+}
+type ChoiceGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    /** The accessible name of the group (“Choose your plan”) — passed translated. */
+    label: string;
+    /** The choices, in reading order. */
+    items: readonly ChoiceItem[];
+    /** A short mono line above the grid (a step, a tag). */
+    tag?: React.ReactNode;
+    /** A line beside the tag: what the choice means. */
+    caption?: React.ReactNode;
+    /** A call above the tiles, larger (“Choose your plan”). */
+    prompt?: React.ReactNode;
+    /** The chosen id (controlled). */
+    value?: string;
+    /** The chosen id at first (uncontrolled). */
+    defaultValue?: string;
+    /** Makes the grid a radio group: called with the id chosen by click, Enter, Space or the arrow keys. */
+    onValueChange?: (id: string) => void;
+    /** The app's link component for the tiles' internal `href`s (Next's `Link`); an `<a>` otherwise. */
+    linkAs?: LinkComponent;
+    /**
+     * The number of columns (one on a phone).
+     * @default min(items, 4)
+     */
+    columns?: number;
+    /**
+     * `default`: sober tiles. `arcade`: the select screen — the brand's light on each card, corners that lock, a flash.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope for the whole grid (`orochia` → `.brand-orochia`). */
+    brand?: string;
+    /**
+     * The tiles' arrival on mount (arcade: the corners locking one by one, the gauges filling). Always off under
+     * `prefers-reduced-motion`.
+     * @default true
+     */
+    animated?: boolean;
+};
+/**
+ * A line-up of choices as tiles. With `onValueChange` (or `value`), a radio group: one tab stop, the arrow keys move
+ * and choose, Home/End jump, the chosen tile is marked. With `href` on the items, a list of links. Otherwise a list
+ * named by `label` that presents the line-up.
+ */
+declare function ChoiceGrid({ label, items, tag, caption, prompt, value, defaultValue, onValueChange, linkAs, columns, variant, brand, animated, className, style, ...props }: ChoiceGridProps): React.JSX.Element;
+
+export { ChoiceGrid, type ChoiceGridProps, type ChoiceItem };

package/dist/choice-grid.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  brandClass,
+  storyVariantClass
+} from "./chunk-555LWYIN.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/choice-grid/choice-grid.tsx
+import * as React from "react";
+
+// src/block-link.tsx
+import { jsx } from "react/jsx-runtime";
+var isExternal = (href) => /^[a-z][a-z0-9+.-]*:/i.test(href);
+function BlockLink({
+  href,
+  linkAs: Link = "a",
+  external = isExternal(href),
+  rel,
+  ...props
+}) {
+  if (external) return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
+  const Comp = Link;
+  return /* @__PURE__ */ jsx(Comp, { href, ...props });
+}
+
+// src/choice-grid/choice-grid.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CORNERS = ["tl", "tr", "bl", "br"];
+function ChoiceGrid({
+  label,
+  items,
+  tag,
+  caption,
+  prompt,
+  value,
+  defaultValue,
+  onValueChange,
+  linkAs,
+  columns,
+  variant,
+  brand,
+  animated = true,
+  className,
+  style,
+  ...props
+}) {
+  const selectable = onValueChange !== void 0 || value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue);
+  const current = value ?? inner;
+  const refs = React.useRef([]);
+  const enabled = items.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+  const chosenIndex = items.findIndex((item) => item.id === current && !item.disabled);
+  const focusIndex = chosenIndex >= 0 ? chosenIndex : enabled[0] ?? 0;
+  const choose = (i) => {
+    const item = items[i];
+    if (!item || item.disabled) return;
+    if (value === void 0) setInner(item.id);
+    onValueChange?.(item.id);
+  };
+  const onKeyDown = (e, i) => {
+    const at = enabled.indexOf(i);
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = enabled[(at + 1) % enabled.length];
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = enabled[(at - 1 + enabled.length) % enabled.length];
+    else if (e.key === "Home") next = enabled[0];
+    else if (e.key === "End") next = enabled[enabled.length - 1];
+    if (next === void 0) return;
+    e.preventDefault();
+    refs.current[next]?.focus();
+    choose(next);
+  };
+  const Grid = selectable ? "div" : "ul";
+  const Item = selectable ? "div" : "li";
+  const vars = { "--kzs-cols": columns ?? Math.min(items.length, 4), ...style };
+  return /* @__PURE__ */ jsxs("div", { "data-kzs-scene": "", "data-animated": animated ? "" : void 0, className: cn("kzs-choice", storyVariantClass(variant), brandClass(brand), className), style: vars, ...props, children: [
+    /* @__PURE__ */ jsx2("span", { className: "kzs-texture", "aria-hidden": true }),
+    /* @__PURE__ */ jsx2("span", { className: "kzs-scan kzs-loop", "aria-hidden": true }),
+    (tag || caption) && /* @__PURE__ */ jsxs("p", { className: "kzs-choice-head", children: [
+      tag && /* @__PURE__ */ jsx2("span", { className: "kzs-choice-tag", children: tag }),
+      tag && caption && /* @__PURE__ */ jsx2("span", { className: "kzs-choice-sep", "aria-hidden": true }),
+      caption && /* @__PURE__ */ jsx2("span", { className: "kzs-choice-caption", children: caption })
+    ] }),
+    prompt && /* @__PURE__ */ jsx2("p", { className: "kzs-choice-prompt", children: prompt }),
+    /* @__PURE__ */ jsx2(Grid, { className: "kzs-choice-grid", role: selectable ? "radiogroup" : void 0, "aria-label": label, children: items.map((item, i) => {
+      const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("span", { className: "kzs-choice-aura", "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("span", { className: "kzs-choice-flash", "aria-hidden": true }),
+        CORNERS.map((at) => /* @__PURE__ */ jsx2("span", { className: "kzs-corner", "data-at": at, "aria-hidden": true }, at)),
+        (item.badge || item.eyebrow || item.icon) && /* @__PURE__ */ jsxs("span", { className: "kzs-choice-top", children: [
+          item.badge ? /* @__PURE__ */ jsx2("span", { className: "kzs-choice-badge", children: item.badge }) : /* @__PURE__ */ jsx2("span", {}),
+          (item.eyebrow || item.icon) && /* @__PURE__ */ jsxs("span", { className: "kzs-choice-eyebrow", children: [
+            item.icon && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: item.icon }),
+            item.eyebrow
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "kzs-choice-frame", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx2("span", { className: "kzs-choice-floor" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-choice-visual", children: item.visual })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "kzs-choice-name", children: item.name }),
+        item.title && /* @__PURE__ */ jsx2("span", { className: "kzs-choice-title", children: item.title }),
+        item.extra && /* @__PURE__ */ jsx2("span", { className: "kzs-choice-extra", children: item.extra }),
+        item.meta && /* @__PURE__ */ jsx2("span", { className: "kzs-choice-meta", children: item.meta }),
+        /* @__PURE__ */ jsx2("span", { className: "kzs-choice-check", "aria-hidden": true, children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "m5 12 5 5 9-10" }) }) })
+      ] });
+      const itemStyle = { "--i": i };
+      let tile;
+      if (selectable)
+        tile = /* @__PURE__ */ jsx2(
+          "button",
+          {
+            ref: (el) => {
+              refs.current[i] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": current === item.id,
+            tabIndex: i === focusIndex ? 0 : -1,
+            disabled: item.disabled,
+            "data-selectable": "",
+            className: "kzs-choice-item",
+            style: itemStyle,
+            onClick: () => choose(i),
+            onKeyDown: (e) => onKeyDown(e, i),
+            children: body
+          }
+        );
+      else if (item.href)
+        tile = /* @__PURE__ */ jsx2(BlockLink, { href: item.href, linkAs, className: "kzs-choice-item", "data-link": "", style: itemStyle, children: body });
+      else
+        tile = /* @__PURE__ */ jsx2("div", { className: "kzs-choice-item", style: itemStyle, children: body });
+      return /* @__PURE__ */ jsx2(Item, { className: cn("kzs-choice-slot", brandClass(item.brand)), style: itemStyle, children: tile }, item.id);
+    }) })
+  ] });
+}
+export {
+  ChoiceGrid
+};
+//# sourceMappingURL=choice-grid.js.map

package/dist/choice-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice-grid/choice-grid.tsx","../src/block-link.tsx"],"sourcesContent":["// Client. A row of choices shown as tiles — a visual, a name, a line (story.css): pick a plan, a persona, a team, a side.\n// Selectable (`onValueChange`), it is a radio group with roving focus; with `href` on its items, a set of links (a\n// line-up that leads somewhere); otherwise a showcase of the line-up.\nimport * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport interface ChoiceItem {\n  /** The value of the choice (and its React key). */\n  id: string;\n  /** What represents it: a mark, an avatar, an illustration. Decorative — the name carries the meaning. */\n  visual: React.ReactNode;\n  /** Its name, short. */\n  name: React.ReactNode;\n  /** One line under the name: what it is, its role. */\n  title?: React.ReactNode;\n  /** A small line above the visual (a family, a tier), after its `icon`. */\n  eyebrow?: React.ReactNode;\n  /** A small glyph before the eyebrow (decorative). */\n  icon?: React.ReactNode;\n  /** A short tag in the top corner (“P1”, “New”, “Popular”). */\n  badge?: React.ReactNode;\n  /** Under the line: a gauge (`StatGauge`), facts, a price. */\n  extra?: React.ReactNode;\n  /** At the bottom: where the tile leads (“Chapter 2 ↓”, “See the plan”). */\n  meta?: React.ReactNode;\n  /** Makes the tile a link (ignored when the grid is selectable). */\n  href?: string;\n  /** A brand scope for this tile (`orazaka` → `.brand-orazaka`): its accent becomes that brand's. */\n  brand?: string;\n  /** Not selectable. */\n  disabled?: boolean;\n}\n\nexport type ChoiceGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"defaultValue\" | \"onChange\"> & {\n  /** The accessible name of the group (“Choose your plan”) — passed translated. */\n  label: string;\n  /** The choices, in reading order. */\n  items: readonly ChoiceItem[];\n  /** A short mono line above the grid (a step, a tag). */\n  tag?: React.ReactNode;\n  /** A line beside the tag: what the choice means. */\n  caption?: React.ReactNode;\n  /** A call above the tiles, larger (“Choose your plan”). */\n  prompt?: React.ReactNode;\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The chosen id at first (uncontrolled). */\n  defaultValue?: string;\n  /** Makes the grid a radio group: called with the id chosen by click, Enter, Space or the arrow keys. */\n  onValueChange?: (id: string) => void;\n  /** The app's link component for the tiles' internal `href`s (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n  /**\n   * The number of columns (one on a phone).\n   * @default min(items, 4)\n   */\n  columns?: number;\n  /**\n   * `default`: sober tiles. `arcade`: the select screen — the brand's light on each card, corners that lock, a flash.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope for the whole grid (`orochia` → `.brand-orochia`). */\n  brand?: string;\n  /**\n   * The tiles' arrival on mount (arcade: the corners locking one by one, the gauges filling). Always off under\n   * `prefers-reduced-motion`.\n   * @default true\n   */\n  animated?: boolean;\n};\n\nconst CORNERS = [\"tl\", \"tr\", \"bl\", \"br\"] as const;\n\n/**\n * A line-up of choices as tiles. With `onValueChange` (or `value`), a radio group: one tab stop, the arrow keys move\n * and choose, Home/End jump, the chosen tile is marked. With `href` on the items, a list of links. Otherwise a list\n * named by `label` that presents the line-up.\n */\nexport function ChoiceGrid({\n  label,\n  items,\n  tag,\n  caption,\n  prompt,\n  value,\n  defaultValue,\n  onValueChange,\n  linkAs,\n  columns,\n  variant,\n  brand,\n  animated = true,\n  className,\n  style,\n  ...props\n}: ChoiceGridProps) {\n  const selectable = onValueChange !== undefined || value !== undefined;\n  const [inner, setInner] = React.useState(defaultValue);\n  const current = value ?? inner;\n  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const enabled = items.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0);\n  const chosenIndex = items.findIndex((item) => item.id === current && !item.disabled);\n  const focusIndex = chosenIndex >= 0 ? chosenIndex : (enabled[0] ?? 0);\n\n  const choose = (i: number) => {\n    const item = items[i];\n    if (!item || item.disabled) return;\n    if (value === undefined) setInner(item.id);\n    onValueChange?.(item.id);\n  };\n  const onKeyDown = (e: React.KeyboardEvent, i: number) => {\n    const at = enabled.indexOf(i);\n    let next: number | undefined;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = enabled[(at + 1) % enabled.length];\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = enabled[(at - 1 + enabled.length) % enabled.length];\n    else if (e.key === \"Home\") next = enabled[0];\n    else if (e.key === \"End\") next = enabled[enabled.length - 1];\n    if (next === undefined) return;\n    e.preventDefault();\n    refs.current[next]?.focus();\n    choose(next);\n  };\n\n  // A radio group holds radios, not list items; a showcase or a set of links is a list named by `label`.\n  const Grid = selectable ? \"div\" : \"ul\";\n  const Item = selectable ? \"div\" : \"li\";\n  const vars = { \"--kzs-cols\": columns ?? Math.min(items.length, 4), ...style } as React.CSSProperties;\n  return (\n    <div data-kzs-scene=\"\" data-animated={animated ? \"\" : undefined} className={cn(\"kzs-choice\", storyVariantClass(variant), brandClass(brand), className)} style={vars} {...props}>\n      <span className=\"kzs-texture\" aria-hidden />\n      <span className=\"kzs-scan kzs-loop\" aria-hidden />\n      {(tag || caption) && (\n        <p className=\"kzs-choice-head\">\n          {tag && <span className=\"kzs-choice-tag\">{tag}</span>}\n          {tag && caption && <span className=\"kzs-choice-sep\" aria-hidden />}\n          {caption && <span className=\"kzs-choice-caption\">{caption}</span>}\n        </p>\n      )}\n      {prompt && <p className=\"kzs-choice-prompt\">{prompt}</p>}\n      <Grid className=\"kzs-choice-grid\" role={selectable ? \"radiogroup\" : undefined} aria-label={label}>\n        {items.map((item, i) => {\n          const body = (\n            <>\n              <span className=\"kzs-choice-aura\" aria-hidden />\n              <span className=\"kzs-choice-flash\" aria-hidden />\n              {CORNERS.map((at) => (\n                <span key={at} className=\"kzs-corner\" data-at={at} aria-hidden />\n              ))}\n              {(item.badge || item.eyebrow || item.icon) && (\n                <span className=\"kzs-choice-top\">\n                  {item.badge ? <span className=\"kzs-choice-badge\">{item.badge}</span> : <span />}\n                  {(item.eyebrow || item.icon) && (\n                    <span className=\"kzs-choice-eyebrow\">\n                      {item.icon && <span aria-hidden>{item.icon}</span>}\n                      {item.eyebrow}\n                    </span>\n                  )}\n                </span>\n              )}\n              <span className=\"kzs-choice-frame\" aria-hidden>\n                <span className=\"kzs-choice-floor\" />\n                <span className=\"kzs-choice-visual\">{item.visual}</span>\n              </span>\n              <span className=\"kzs-choice-name\">{item.name}</span>\n              {item.title && <span className=\"kzs-choice-title\">{item.title}</span>}\n              {item.extra && <span className=\"kzs-choice-extra\">{item.extra}</span>}\n              {item.meta && <span className=\"kzs-choice-meta\">{item.meta}</span>}\n              <span className=\"kzs-choice-check\" aria-hidden>\n                <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                  <path d=\"m5 12 5 5 9-10\" />\n                </svg>\n              </span>\n            </>\n          );\n          const itemStyle = { \"--i\": i } as React.CSSProperties;\n          let tile: React.ReactNode;\n          if (selectable)\n            tile = (\n              <button\n                ref={(el) => {\n                  refs.current[i] = el;\n                }}\n                type=\"button\"\n                role=\"radio\"\n                aria-checked={current === item.id}\n                tabIndex={i === focusIndex ? 0 : -1}\n                disabled={item.disabled}\n                data-selectable=\"\"\n                className=\"kzs-choice-item\"\n                style={itemStyle}\n                onClick={() => choose(i)}\n                onKeyDown={(e) => onKeyDown(e, i)}\n              >\n                {body}\n              </button>\n            );\n          else if (item.href)\n            tile = (\n              <BlockLink href={item.href} linkAs={linkAs} className=\"kzs-choice-item\" data-link=\"\" style={itemStyle}>\n                {body}\n              </BlockLink>\n            );\n          else\n            tile = (\n              <div className=\"kzs-choice-item\" style={itemStyle}>\n                {body}\n              </div>\n            );\n          return (\n            <Item key={item.id} className={cn(\"kzs-choice-slot\", brandClass(item.brand))} style={itemStyle}>\n              {tile}\n            </Item>\n          );\n        })}\n      </Grid>\n    </div>\n  );\n}\n","// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n  href,\n  linkAs: Link = \"a\",\n  external = isExternal(href),\n  rel,\n  ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n  if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n  const Comp = Link as React.ElementType;\n  return <Comp href={href} {...props} />;\n}\n"],"mappings":"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","names":["jsx"]}

package/dist/chunk-555LWYIN.js

@@ -0,0 +1,11 @@
+"use client";
+
+// src/story-variant.ts
+var storyVariantClass = (variant) => variant === "arcade" ? "kzs-arcade" : void 0;
+var brandClass = (brand) => brand ? `brand-${brand}` : void 0;
+
+export {
+  storyVariantClass,
+  brandClass
+};
+//# sourceMappingURL=chunk-555LWYIN.js.map

package/dist/chunk-555LWYIN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/story-variant.ts"],"sourcesContent":["// The two looks of the storytelling kit (story.css), shared by its entries. Server-safe.\n\n/** The look of the storytelling kit: `default` (sober, for any app) or `arcade` (the opt-in cabinet flavour). */\nexport type StoryVariant = \"default\" | \"arcade\";\n\n/** The class a storytelling component adds for its look (`kzs-arcade` for the arcade flavour). */\nexport const storyVariantClass = (variant: StoryVariant | undefined) => (variant === \"arcade\" ? \"kzs-arcade\" : undefined);\n\n/** The class of a brand scope (`brand-orochia`): the accent and the gradient become that brand's. */\nexport const brandClass = (brand: string | undefined) => (brand ? `brand-${brand}` : undefined);\n"],"mappings":";;;AAMO,IAAM,oBAAoB,CAAC,YAAuC,YAAY,WAAW,eAAe;AAGxG,IAAM,aAAa,CAAC,UAA+B,QAAQ,SAAS,KAAK,KAAK;","names":[]}

package/dist/chunk-AZPKXP3O.js

@@ -0,0 +1,36 @@
+"use client";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var CloseGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+var CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var CopyGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" })
+] });
+
+export {
+  CloseGlyph,
+  ChevronGlyph,
+  CheckGlyph,
+  CopyGlyph
+};
+//# sourceMappingURL=chunk-AZPKXP3O.js.map

package/dist/chunk-AZPKXP3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/glyphs.tsx"],"sourcesContent":["// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";;;AASI,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AA0CO,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,wBAAuB,GACjC;AAEK,IAAM,eAAe,CAAC,EAAE,YAAY,QAAQ,GAAG,EAAE,MACtD,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAG,EAAE,MAAM,iBAAiB,OAAO,gBAAgB,IAAI,iBAAiB,MAAM,eAAe,EAAE,SAAS,GAAG,GACnH;AAEK,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAiEK,IAAM,YAAY,CAAC,MACxB,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,EAChD,oBAAC,UAAK,GAAE,2DAA0D;AAAA,GACpE;","names":[]}

package/dist/chunk-VCAAHCHL.js

@@ -0,0 +1,17 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { cn as merge } from "tailwind-variants";
+function cn(...inputs) {
+  return merge(clsx(inputs)) ?? "";
+}
+
+// src/story-variant.ts
+var storyVariantClass = (variant) => variant === "arcade" ? "kzs-arcade" : void 0;
+var brandClass = (brand) => brand ? `brand-${brand}` : void 0;
+
+export {
+  cn,
+  storyVariantClass,
+  brandClass
+};
+//# sourceMappingURL=chunk-VCAAHCHL.js.map

package/dist/chunk-VCAAHCHL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts","../src/story-variant.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n","// The two looks of the storytelling kit (story.css), shared by its entries. Server-safe.\n\n/** The look of the storytelling kit: `default` (sober, for any app) or `arcade` (the opt-in cabinet flavour). */\nexport type StoryVariant = \"default\" | \"arcade\";\n\n/** The class a storytelling component adds for its look (`kzs-arcade` for the arcade flavour). */\nexport const storyVariantClass = (variant: StoryVariant | undefined) => (variant === \"arcade\" ? \"kzs-arcade\" : undefined);\n\n/** The class of a brand scope (`brand-orochia`): the accent and the gradient become that brand's. */\nexport const brandClass = (brand: string | undefined) => (brand ? `brand-${brand}` : undefined);\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAWrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;;;ACRO,IAAM,oBAAoB,CAAC,YAAuC,YAAY,WAAW,eAAe;AAGxG,IAAM,aAAa,CAAC,UAA+B,QAAQ,SAAS,KAAK,KAAK;","names":[]}