@krizaka/ui 2.1.0 → 2.3.0

package/dist/loader.d.ts

@@ -0,0 +1,206 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const loader: tailwind_variants.TVReturnType<{
+    variant: {
+        inline: {
+            box: string;
+            glyph: string;
+        };
+        block: {
+            box: string;
+            glyph: string;
+            text: string;
+        };
+        overlay: {
+            root: string;
+            box: string;
+            glyph: string;
+            text: string;
+        };
+        page: {
+            root: string;
+            box: string;
+            glyph: string;
+            text: string;
+            label: string;
+        };
+    };
+    ended: {
+        success: {
+            glyph: string;
+        };
+        error: {
+            glyph: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    glyph: string;
+    text: string;
+    label: string;
+    detail: string;
+}, undefined, {
+    variant: {
+        inline: {
+            box: string;
+            glyph: string;
+        };
+        block: {
+            box: string;
+            glyph: string;
+            text: string;
+        };
+        overlay: {
+            root: string;
+            box: string;
+            glyph: string;
+            text: string;
+        };
+        page: {
+            root: string;
+            box: string;
+            glyph: string;
+            text: string;
+            label: string;
+        };
+    };
+    ended: {
+        success: {
+            glyph: string;
+        };
+        error: {
+            glyph: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    glyph: string;
+    text: string;
+    label: string;
+    detail: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        inline: {
+            box: string;
+            glyph: string;
+        };
+        block: {
+            box: string;
+            glyph: string;
+            text: string;
+        };
+        overlay: {
+            root: string;
+            box: string;
+            glyph: string;
+            text: string;
+        };
+        page: {
+            root: string;
+            box: string;
+            glyph: string;
+            text: string;
+            label: string;
+        };
+    };
+    ended: {
+        success: {
+            glyph: string;
+        };
+        error: {
+            glyph: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    glyph: string;
+    text: string;
+    label: string;
+    detail: string;
+}>>;
+type LoaderVariants = VariantProps<typeof loader>;
+/**
+ * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never
+ * shows, one that shows never blinks.
+ */
+declare function useDelayedWait(active: boolean, delay?: number, minDuration?: number): boolean;
+interface LoaderProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */
+    label: string;
+    /**
+     * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.
+     * @default "loading"
+     */
+    status?: "loading" | "success" | "error";
+    /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */
+    successLabel?: string;
+    /** The words of a failure (“Could not load the invoices”) — passed translated. */
+    errorLabel?: string;
+    /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */
+    value?: number | null;
+    /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */
+    eta?: string;
+    /**
+     * Milliseconds before anything shows: a wait shorter than this never flashes.
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Once shown, the least milliseconds it stays: it never blinks.
+     * @default 600
+     */
+    minDuration?: number;
+    /**
+     * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.
+     * @default 1600
+     */
+    endDuration?: number;
+    /**
+     * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the
+     * whole screen).
+     * @default "inline"
+     */
+    variant?: LoaderVariants["variant"];
+}
+/**
+ * A wait, from start to end. `role="status"` (polite): its words are announced when it shows and when it ends. Under
+ * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.
+ */
+declare function Loader({ label, status, successLabel, errorLabel, value, eta, delay, minDuration, endDuration, variant, className, ...props }: LoaderProps): React.JSX.Element;
+interface LoadingRegionProps extends React.ComponentProps<"div"> {
+    /** Whether the content is on its way. */
+    loading: boolean;
+    /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */
+    skeleton: React.ReactNode;
+    /** What is loading, in words — passed translated; announced when the wait shows. */
+    label: string;
+    /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */
+    slowLabel?: string;
+    /**
+     * Milliseconds of skeleton before the words of a long wait appear over it.
+     * @default 4000
+     */
+    slowAfter?: number;
+    /**
+     * Milliseconds before the skeleton shows: a fast answer goes straight to the content.
+     * @default 200
+     */
+    delay?: number;
+    /**
+     * Once shown, the least milliseconds the skeleton stays.
+     * @default 500
+     */
+    minDuration?: number;
+}
+/**
+ * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over
+ * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.
+ */
+declare function LoadingRegion({ loading, skeleton, label, slowLabel, slowAfter, delay, minDuration, className, children, ...props }: LoadingRegionProps): React.JSX.Element;
+
+export { Loader, type LoaderProps, type LoaderVariants, LoadingRegion, type LoadingRegionProps, loader, useDelayedWait };

package/dist/loader.js

@@ -0,0 +1,138 @@
+"use client";
+import {
+  LoaderGlyph
+} from "./chunk-WEVYKZIF.js";
+
+// src/loader/loader.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var loader = tv({
+  slots: {
+    root: "text-fg-secondary",
+    box: "kz-fade flex items-center gap-3",
+    glyph: "shrink-0 text-accent",
+    text: "flex min-w-0 flex-col",
+    label: "font-medium text-fg",
+    detail: "text-xs text-fg-secondary tabular-nums"
+  },
+  variants: {
+    variant: {
+      inline: { box: "text-sm", glyph: "h-5 w-5" },
+      block: { box: "flex-col justify-center py-10 text-center text-sm", glyph: "h-9 w-9", text: "items-center" },
+      overlay: {
+        root: "absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden",
+        box: "flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm",
+        glyph: "h-9 w-9",
+        text: "items-center"
+      },
+      page: {
+        root: "fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden",
+        box: "flex-col text-center",
+        glyph: "h-14 w-14",
+        text: "items-center",
+        label: "font-display text-lg"
+      }
+    },
+    ended: {
+      success: { glyph: "text-fg-success" },
+      error: { glyph: "text-fg-danger" }
+    }
+  },
+  defaultVariants: { variant: "inline" }
+});
+function useDelayedWait(active, delay = 250, minDuration = 600) {
+  const [shown, setShown] = React.useState(false);
+  const since = React.useRef(0);
+  React.useEffect(() => {
+    if (active === shown) return;
+    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));
+    const timer = setTimeout(() => {
+      since.current = Date.now();
+      setShown(active);
+    }, wait);
+    return () => clearTimeout(timer);
+  }, [active, shown, delay, minDuration]);
+  return shown;
+}
+function Loader({
+  label,
+  status = "loading",
+  successLabel,
+  errorLabel,
+  value,
+  eta,
+  delay = 250,
+  minDuration = 600,
+  endDuration = 1600,
+  variant,
+  className,
+  ...props
+}) {
+  const waiting = useDelayedWait(status === "loading", delay, minDuration);
+  const [ending, setEnding] = React.useState(() => status !== "loading" && endDuration > 0 ? status : null);
+  const wasWaiting = React.useRef(false);
+  React.useEffect(() => {
+    if (!Number.isFinite(endDuration)) return;
+    const hide = setTimeout(() => setEnding((e) => wasWaiting.current ? e : null), endDuration);
+    return () => clearTimeout(hide);
+  }, []);
+  React.useEffect(() => {
+    if (waiting) {
+      wasWaiting.current = true;
+      return;
+    }
+    if (!wasWaiting.current || status === "loading") return;
+    wasWaiting.current = false;
+    const end = status;
+    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);
+    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : void 0;
+    return () => {
+      clearTimeout(show);
+      clearTimeout(hide);
+    };
+  }, [waiting, status, endDuration]);
+  const phase = waiting ? "loading" : ending;
+  const s = loader({ variant, ended: phase === "success" || phase === "error" ? phase : void 0 });
+  const known = phase === "loading" && typeof value === "number" && Number.isFinite(value);
+  const words = phase === "success" ? successLabel ?? label : phase === "error" ? errorLabel ?? label : label;
+  const detail = phase === "loading" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(" \xB7 ") : "";
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "data-phase": phase ?? "idle", className: s.root({ className }), ...props, children: phase && /* @__PURE__ */ jsxs("div", { className: s.box(), children: [
+    /* @__PURE__ */ jsx(LoaderGlyph, { state: phase, value: known ? value : null, className: s.glyph() }),
+    /* @__PURE__ */ jsxs("span", { className: s.text(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.label(), children: words }),
+      detail && /* @__PURE__ */ jsx("span", { className: s.detail(), children: detail })
+    ] })
+  ] }) });
+}
+function LoadingRegion({
+  loading,
+  skeleton,
+  label,
+  slowLabel,
+  slowAfter = 4e3,
+  delay = 200,
+  minDuration = 500,
+  className,
+  children,
+  ...props
+}) {
+  const waiting = useDelayedWait(loading, delay, minDuration);
+  const slow = useDelayedWait(waiting && loading, slowAfter, 0);
+  const busy = loading || waiting;
+  return /* @__PURE__ */ jsxs("div", { "aria-busy": busy, "data-phase": waiting ? slow ? "slow" : "skeleton" : busy ? "pending" : "ready", className: ["relative", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: waiting ? slow ? slowLabel ?? label : label : "" }),
+    waiting ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "kz-fade", children: skeleton }) : busy ? (
+      // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.
+      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "invisible", children: skeleton })
+    ) : /* @__PURE__ */ jsx("div", { className: "kz-fade", children }),
+    waiting && slow && /* @__PURE__ */ jsx(Loader, { label: slowLabel ?? label, variant: "overlay", delay: 0, minDuration: 0, endDuration: 0, "aria-live": "off", role: "presentation" })
+  ] });
+}
+export {
+  Loader,
+  LoadingRegion,
+  loader,
+  useDelayedWait
+};
+//# sourceMappingURL=loader.js.map

package/dist/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/marquee.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+type MarqueeProps = Omit<React.ComponentProps<"section">, "children"> & {
+    /** The accessible name of the band (“Our partners”) — passed translated. */
+    label: string;
+    /** The pause button's name (“Pause the band”) — passed translated. */
+    pauseLabel: string;
+    /** The same button's name once paused (“Play the band”) — passed translated. */
+    playLabel: string;
+    /** The items: logos, words, cards. */
+    children: React.ReactNode;
+    /**
+     * Pixels per second.
+     * @default 40
+     */
+    speed?: number;
+    /**
+     * Which way it slides.
+     * @default "left"
+     */
+    direction?: "left" | "right";
+    /**
+     * The edges fade into the page.
+     * @default true
+     */
+    fade?: boolean;
+    /** Starts paused. */
+    defaultPaused?: boolean;
+};
+/** A band of items sliding forever — pausable, accessible, still under reduced motion. */
+declare function Marquee({ label, pauseLabel, playLabel, children, speed, direction, fade, defaultPaused, className, ...props }: MarqueeProps): React.JSX.Element;
+
+export { Marquee, type MarqueeProps };

package/dist/marquee.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/marquee/marquee.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Marquee({ label, pauseLabel, playLabel, children, speed = 40, direction = "left", fade = true, defaultPaused = false, className, ...props }) {
+  const [paused, setPaused] = React.useState(defaultPaused);
+  const track = React.useRef(null);
+  React.useEffect(() => {
+    const el = track.current;
+    if (!el) return;
+    const measure = () => el.style.setProperty("--kz-marquee-duration", `${Math.max(4, el.scrollWidth / 2 / Math.max(1, speed))}s`);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [speed]);
+  return /* @__PURE__ */ jsxs("section", { "aria-label": label, "data-paused": paused ? "" : void 0, "data-direction": direction, "data-fade": fade ? "" : void 0, className: cn("kz-band group/marquee relative", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        tabIndex: 0,
+        className: "kz-band-viewport overflow-hidden rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsxs("div", { ref: track, className: "kz-marquee kz-loop", children: [
+          /* @__PURE__ */ jsx("ul", { className: "flex shrink-0 items-center gap-(--kz-band-gap) pr-(--kz-band-gap)", children: wrap(children) }),
+          /* @__PURE__ */ jsx("ul", { "aria-hidden": true, className: "kz-band-copy flex shrink-0 items-center gap-(--kz-band-gap) pr-(--kz-band-gap)", children: wrap(children) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": paused,
+        "aria-label": paused ? playLabel : pauseLabel,
+        onClick: () => setPaused(!paused),
+        className: "absolute right-1 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full border border-border-default bg-surface-1/90 text-fg-secondary opacity-0 shadow-sm transition-opacity hover:text-fg focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group-hover/marquee:opacity-100 aria-pressed:opacity-100 motion-reduce:hidden",
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "currentColor", "aria-hidden": true, children: paused ? /* @__PURE__ */ jsx("path", { d: "M8 5.5v13l10-6.5Z" }) : /* @__PURE__ */ jsx("path", { d: "M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" }) })
+      }
+    )
+  ] });
+}
+function wrap(children) {
+  return React.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: child }));
+}
+export {
+  Marquee
+};
+//# sourceMappingURL=marquee.js.map

package/dist/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/marquee/marquee.tsx"],"sourcesContent":["// Client (a pause button, a measure). A band that slides — and that anyone can stop: it pauses under the pointer and\n// while something inside has the focus, it carries a visible pause button (WCAG 2.2.2: motion longer than 5 s can be\n// paused), its speed is in pixels per second whatever its width (a long band does not race), its copy is hidden from\n// assistive technology (each item is read once), and under reduced motion it is a still row you scroll by hand.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type MarqueeProps = Omit<React.ComponentProps<\"section\">, \"children\"> & {\n  /** The accessible name of the band (“Our partners”) — passed translated. */\n  label: string;\n  /** The pause button's name (“Pause the band”) — passed translated. */\n  pauseLabel: string;\n  /** The same button's name once paused (“Play the band”) — passed translated. */\n  playLabel: string;\n  /** The items: logos, words, cards. */\n  children: React.ReactNode;\n  /**\n   * Pixels per second.\n   * @default 40\n   */\n  speed?: number;\n  /**\n   * Which way it slides.\n   * @default \"left\"\n   */\n  direction?: \"left\" | \"right\";\n  /**\n   * The edges fade into the page.\n   * @default true\n   */\n  fade?: boolean;\n  /** Starts paused. */\n  defaultPaused?: boolean;\n};\n\n/** A band of items sliding forever — pausable, accessible, still under reduced motion. */\nexport function Marquee({ label, pauseLabel, playLabel, children, speed = 40, direction = \"left\", fade = true, defaultPaused = false, className, ...props }: MarqueeProps) {\n  const [paused, setPaused] = React.useState(defaultPaused);\n  const track = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    const el = track.current;\n    if (!el) return;\n    const measure = () => el.style.setProperty(\"--kz-marquee-duration\", `${Math.max(4, el.scrollWidth / 2 / Math.max(1, speed))}s`);\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [speed]);\n  return (\n    <section aria-label={label} data-paused={paused ? \"\" : undefined} data-direction={direction} data-fade={fade ? \"\" : undefined} className={cn(\"kz-band group/marquee relative\", className)} {...props}>\n      {/* Focusable: the keyboard stops the band (focus-within) and, still under reduced motion, scrolls the row. */}\n      <div\n        tabIndex={0}\n        className=\"kz-band-viewport overflow-hidden rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\"\n      >\n        {/* Each copy ends with the gap: two copies are exactly twice one, so the loop never jumps. */}\n        <div ref={track} className=\"kz-marquee kz-loop\">\n          <ul className=\"flex shrink-0 items-center gap-(--kz-band-gap) pr-(--kz-band-gap)\">{wrap(children)}</ul>\n          <ul aria-hidden className=\"kz-band-copy flex shrink-0 items-center gap-(--kz-band-gap) pr-(--kz-band-gap)\">\n            {wrap(children)}\n          </ul>\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        aria-pressed={paused}\n        aria-label={paused ? playLabel : pauseLabel}\n        onClick={() => setPaused(!paused)}\n        className=\"absolute right-1 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full border border-border-default bg-surface-1/90 text-fg-secondary opacity-0 shadow-sm transition-opacity hover:text-fg focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group-hover/marquee:opacity-100 aria-pressed:opacity-100 motion-reduce:hidden\"\n      >\n        <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"currentColor\" aria-hidden>\n          {paused ? <path d=\"M8 5.5v13l10-6.5Z\" /> : <path d=\"M7 5h3.5v14H7zM13.5 5H17v14h-3.5z\" />}\n        </svg>\n      </button>\n    </section>\n  );\n}\n\nfunction wrap(children: React.ReactNode) {\n  return React.Children.map(children, (child) => <li className=\"shrink-0\">{child}</li>);\n}\n"],"mappings":";;;;;;AAIA,YAAY,WAAW;AAqDf,SACE,KADF;AApBD,SAAS,QAAQ,EAAE,OAAO,YAAY,WAAW,UAAU,QAAQ,IAAI,YAAY,QAAQ,OAAO,MAAM,gBAAgB,OAAO,WAAW,GAAG,MAAM,GAAiB;AACzK,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAS,aAAa;AACxD,QAAM,QAAc,aAAuB,IAAI;AAC/C,EAAM,gBAAU,MAAM;AACpB,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,GAAI;AACT,UAAM,UAAU,MAAM,GAAG,MAAM,YAAY,yBAAyB,GAAG,KAAK,IAAI,GAAG,GAAG,cAAc,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG;AAC9H,YAAQ;AACR,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,CAAC;AACV,SACE,qBAAC,aAAQ,cAAY,OAAO,eAAa,SAAS,KAAK,QAAW,kBAAgB,WAAW,aAAW,OAAO,KAAK,QAAW,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAE7L;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QAGV,+BAAC,SAAI,KAAK,OAAO,WAAU,sBACzB;AAAA,8BAAC,QAAG,WAAU,qEAAqE,eAAK,QAAQ,GAAE;AAAA,UAClG,oBAAC,QAAG,eAAW,MAAC,WAAU,kFACvB,eAAK,QAAQ,GAChB;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,cAAY,SAAS,YAAY;AAAA,QACjC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,QAChC,WAAU;AAAA,QAEV,8BAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,gBAAe,eAAW,MAC7E,mBAAS,oBAAC,UAAK,GAAE,qBAAoB,IAAK,oBAAC,UAAK,GAAE,qCAAoC,GACzF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,KAAK,UAA2B;AACvC,SAAa,eAAS,IAAI,UAAU,CAAC,UAAU,oBAAC,QAAG,WAAU,YAAY,iBAAM,CAAK;AACtF;","names":[]}

package/dist/mascots.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+/**
+ * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
+ * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
+ * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), redrawn on one 120 × 120
+ * grid so that any bird can wear any mood.
+ *
+ * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
+ * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
+ * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
+ * and highlights are black and white at a low opacity over the role, so they hold in both themes.
+ */
+declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon"];
+type MascotBird = (typeof MASCOT_BIRDS)[number];
+declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
+type MascotMood = (typeof MASCOT_MOODS)[number];
+type MascotTone = "brand" | "own";
+
+type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
+    /** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications). */
+    bird?: MascotBird;
+    /** What the moment is: `welcome` (onboarding), `thinking` (a long task running), `success` (it is done), `empty` (nothing here yet), `error` (it failed). */
+    mood?: MascotMood;
+    /** `brand` (default): the host's accent, so the bird wears the product it is in. `own`: the bird's signature colours of the Krizaka story. */
+    tone?: MascotTone;
+    /** Width and height in pixels. */
+    size?: number;
+    /** A light idle motion and the mood's gesture. Off with `false`; always off under `prefers-reduced-motion`. */
+    animated?: boolean;
+    /** An accessible name (the bird becomes an image); without it the mascot is decorative. */
+    title?: string;
+};
+/**
+ * One of the five Krizaka birds in one mood — for the moments a product speaks to a person: a welcome, a long wait,
+ * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone="own"` for the story's).
+ */
+declare function Mascot({ bird, mood, tone, size, animated, title, className, ...props }: MascotProps): React.JSX.Element;
+
+export { MASCOT_BIRDS, MASCOT_MOODS, Mascot, type MascotBird, type MascotMood, type MascotProps, type MascotTone };