@krizaka/ui 3.9.0 → 3.11.0

package/dist/showcase.js

@@ -0,0 +1,218 @@
+"use client";
+import {
+  cn
+} from "./chunk-2FRWNSRO.js";
+
+// src/showcase/showcase.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FILL_CSS = ".kz-showcase-fill{transform-origin:left;animation:kz-showcase-fill 6s linear forwards}@keyframes kz-showcase-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}";
+var REDUCED = "(prefers-reduced-motion: reduce)";
+var subscribeNothing = () => () => void 0;
+var readReduced = () => Boolean(typeof window !== "undefined" && window.matchMedia?.(REDUCED).matches);
+function subscribeReduced(notify) {
+  const query = window.matchMedia?.(REDUCED);
+  query?.addEventListener?.("change", notify);
+  return () => query?.removeEventListener?.("change", notify);
+}
+var readHidden = () => document.visibilityState === "hidden";
+function subscribeVisibility(notify) {
+  document.addEventListener("visibilitychange", notify);
+  return () => document.removeEventListener("visibilitychange", notify);
+}
+var showcaseLabels = {
+  previous: "Previous slide",
+  next: "Next slide",
+  pause: "Pause the slideshow",
+  play: "Play the slideshow",
+  goTo: (n) => `Go to slide ${n}`,
+  counter: (n, total) => `Slide ${n} of ${total}`,
+  slide: (n, total) => `${n} of ${total}`
+};
+function Showcase({
+  label,
+  items,
+  getId,
+  renderItem,
+  getTitle,
+  interval = 6e3,
+  autoplay = true,
+  transition = "fade",
+  loop = true,
+  index: controlled,
+  defaultIndex = 0,
+  onIndexChange,
+  labels = showcaseLabels,
+  className,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  onPointerEnter,
+  onPointerLeave,
+  ...props
+}) {
+  const total = items.length;
+  const root = React.useRef(null);
+  const [inner, setInner] = React.useState(defaultIndex);
+  const current = Math.min(Math.max(controlled ?? inner, 0), Math.max(total - 1, 0));
+  const mounted = React.useSyncExternalStore(subscribeNothing, () => true, () => false);
+  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);
+  const hidden = React.useSyncExternalStore(subscribeVisibility, readHidden, () => false);
+  const [paused, setPaused] = React.useState(false);
+  const [hover, setHover] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const [inView, setInView] = React.useState(true);
+  const [announce, setAnnounce] = React.useState(false);
+  React.useEffect(() => {
+    const host = root.current;
+    if (!host || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => setInView(entries.some((e) => e.isIntersecting)), { threshold: 0.2 });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
+  const move = (to, user) => {
+    if (total === 0) return;
+    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);
+    if (next === current) return;
+    setAnnounce(user);
+    if (controlled === void 0) setInner(next);
+    onIndexChange?.(next, user);
+  };
+  const playing = autoplay && mounted && !reduced && total > 1;
+  const running = playing && !paused && !hover && !focus && !hidden && inView;
+  const lastStop = !loop && current === total - 1;
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    const target = event.target;
+    if (target.closest("input, textarea, select, [contenteditable='true']")) return;
+    const to = event.key === "ArrowRight" ? current + 1 : event.key === "ArrowLeft" ? current - 1 : event.key === "Home" ? 0 : event.key === "End" ? total - 1 : null;
+    if (to === null) return;
+    event.preventDefault();
+    move(to, true);
+  };
+  const item = items[current];
+  const title = item !== void 0 ? getTitle?.(item) : void 0;
+  const button = "inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg-secondary transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: root,
+      "aria-roledescription": "carousel",
+      "aria-label": label,
+      "data-running": running ? "" : void 0,
+      className: cn("flex flex-col gap-3", className),
+      onKeyDown: handleKeyDown,
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        if (e.pointerType === "mouse") setHover(true);
+      },
+      onPointerLeave: (e) => {
+        onPointerLeave?.(e);
+        setHover(false);
+      },
+      onFocus: (e) => {
+        onFocus?.(e);
+        let visible = true;
+        try {
+          visible = e.target.matches(":focus-visible");
+        } catch {
+        }
+        if (visible) setFocus(true);
+      },
+      onBlur: (e) => {
+        onBlur?.(e);
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocus(false);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("style", { href: "kz-showcase", precedence: "medium", children: FILL_CSS }),
+        /* @__PURE__ */ jsx("div", { "aria-live": announce ? "polite" : "off", className: "grid", children: items.map((slide, i) => {
+          const active = i === current;
+          const gap = Math.abs(i - current);
+          const near = gap <= 1 || loop && total - gap <= 1;
+          const side = i < current ? "-translate-x-4" : "translate-x-4";
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": labels.slide(i + 1, total),
+              "aria-hidden": active ? void 0 : true,
+              inert: active ? void 0 : true,
+              "data-active": active ? "" : void 0,
+              className: cn(
+                "col-start-1 row-start-1 min-w-0 transition-[opacity,translate,visibility] duration-500 motion-reduce:transition-none",
+                active ? "visible opacity-100" : "invisible opacity-0",
+                transition === "slide" && (active ? "translate-x-0" : side)
+              ),
+              children: near ? renderItem(slide, { index: i, active }) : null
+            },
+            getId(slide)
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: items.map((slide, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.goTo(i + 1, total),
+            "aria-current": i === current ? "true" : void 0,
+            tabIndex: i === current ? 0 : -1,
+            onClick: () => move(i, true),
+            className: "group/seg relative flex h-6 min-w-0 flex-1 cursor-pointer items-center rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsxs("span", { className: "relative block h-1 w-full overflow-hidden rounded-full bg-surface-3 transition-[height] group-hover/seg:h-1.5", children: [
+              i < current || i === current && (!playing || lastStop) ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-accent" }) : null,
+              i === current && playing && !lastStop ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-segment-fill": true,
+                  className: "kz-showcase-fill absolute inset-0 bg-accent",
+                  style: { animationDuration: `${interval}ms`, animationPlayState: running ? "running" : "paused" },
+                  onAnimationEnd: () => running && move(current + 1, false)
+                },
+                `${current}`
+              ) : null
+            ] })
+          },
+          getId(slide)
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("p", { className: "m-0 min-w-0 flex-1 truncate text-sm text-fg-secondary", children: [
+            title ? /* @__PURE__ */ jsx("span", { className: "font-medium text-fg", children: title }) : null,
+            title ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \xB7 " }) : null,
+            /* @__PURE__ */ jsx("span", { children: labels.counter(current + 1, total) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.previous, disabled: !loop && current === 0, onClick: () => move(current - 1, true), className: button, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5l-7 7 7 7" }) }) }),
+            playing ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": paused ? labels.play : labels.pause, onClick: () => setPaused(!paused), className: button, 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" }) }) }) : null,
+            /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.next, disabled: !loop && current === total - 1, onClick: () => move(current + 1, true), className: button, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M9 5l7 7-7 7" }) }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function useTypedText(text, { active = true, speed = 45 } = {}) {
+  const [typed, setTyped] = React.useState({ of: "", count: 0 });
+  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);
+  React.useEffect(() => {
+    if (!active || reduced) return;
+    const id = window.setInterval(() => {
+      setTyped((state) => {
+        const count2 = state.of === text ? state.count + 1 : 1;
+        if (count2 >= text.length) window.clearInterval(id);
+        return { of: text, count: count2 };
+      });
+    }, Math.max(10, 1e3 / speed));
+    return () => window.clearInterval(id);
+  }, [text, active, reduced, speed]);
+  const count = typed.of === text ? typed.count : 0;
+  const done = !active || reduced || count >= text.length;
+  return { text: done ? text : text.slice(0, count), done };
+}
+export {
+  Showcase,
+  showcaseLabels,
+  useTypedText
+};
+//# sourceMappingURL=showcase.js.map

package/dist/showcase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/showcase/showcase.tsx"],"sourcesContent":["// Client (state, timers' observers, keys). A slideshow that advances by itself — and shows it: a segmented progress bar\n// (one segment per slide, the current one fills over the interval, each one a button) with a counter, previous / next and a\n// visible pause button (WCAG 2.2.2). The time IS the CSS animation of the current segment (`.kz-showcase-fill`):\n// when it ends, the next slide comes — so what you see filling is exactly what decides, and pausing the animation pauses\n// the show. Its two rules travel with the component (a hoisted, deduplicated <style>): no stylesheet to import. It waits while the pointer is over it, while a keyboard focus is inside, while the tab is hidden and while it\n// is off screen; under reduced motion it never advances by itself. Slides are slots: any content.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nconst FILL_CSS = \".kz-showcase-fill{transform-origin:left;animation:kz-showcase-fill 6s linear forwards}@keyframes kz-showcase-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}\";\nconst REDUCED = \"(prefers-reduced-motion: reduce)\";\nconst subscribeNothing = () => () => undefined;\nconst readReduced = () => Boolean(typeof window !== \"undefined\" && window.matchMedia?.(REDUCED).matches);\nfunction subscribeReduced(notify: () => void) {\n  const query = window.matchMedia?.(REDUCED);\n  query?.addEventListener?.(\"change\", notify);\n  return () => query?.removeEventListener?.(\"change\", notify);\n}\nconst readHidden = () => document.visibilityState === \"hidden\";\nfunction subscribeVisibility(notify: () => void) {\n  document.addEventListener(\"visibilitychange\", notify);\n  return () => document.removeEventListener(\"visibilitychange\", notify);\n}\n\nexport interface ShowcaseLabels {\n  /** The previous button's name. */\n  previous: string;\n  /** The next button's name. */\n  next: string;\n  /** The pause button's name while it plays. */\n  pause: string;\n  /** The same button's name while it is paused. */\n  play: string;\n  /** A progress segment's name: `(3, 17) => \"Go to image 3\"`. */\n  goTo: (n: number, total: number) => string;\n  /** The position in words, beside the title: `(1, 17) => \"Image 1 of 17\"`. */\n  counter: (n: number, total: number) => string;\n  /** The slide's accessible name: `(1, 17) => \"1 of 17\"`. */\n  slide: (n: number, total: number) => string;\n}\n\n/** English defaults — pass your own translated `labels`. */\nexport const showcaseLabels: ShowcaseLabels = {\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  pause: \"Pause the slideshow\",\n  play: \"Play the slideshow\",\n  goTo: (n) => `Go to slide ${n}`,\n  counter: (n, total) => `Slide ${n} of ${total}`,\n  slide: (n, total) => `${n} of ${total}`,\n};\n\nexport interface ShowcaseSlideState {\n  index: number;\n  /** The slide in view. */\n  active: boolean;\n}\n\nexport interface ShowcaseProps<T> extends Omit<React.ComponentProps<\"section\">, \"children\" | \"onChange\"> {\n  /** The slideshow's accessible name (“Prompt to image”), passed translated. */\n  label: string;\n  /** The slides, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One slide's content. Only the slide in view and its neighbours are mounted (the rest stay empty): give slides the same size. */\n  renderItem: (item: T, state: ShowcaseSlideState) => React.ReactNode;\n  /** A slide's title, shown before the counter (“Golden-hour editorial”). */\n  getTitle?: (item: T) => string;\n  /** Milliseconds a slide stays (the time the segment takes to fill). @default 6000 */\n  interval?: number;\n  /** Advances by itself. Never under `prefers-reduced-motion`. @default true */\n  autoplay?: boolean;\n  /** `fade` crossfades; `slide` also moves the slides a few pixels. @default \"fade\" */\n  transition?: \"fade\" | \"slide\";\n  /** After the last slide, go back to the first. @default true */\n  loop?: boolean;\n  /** The slide in view (controlled). */\n  index?: number;\n  /** The slide shown first. @default 0 */\n  defaultIndex?: number;\n  /** Called when the slide in view changes — `user` is true when the visitor asked for it. */\n  onIndexChange?: (index: number, user: boolean) => void;\n  /** The words of the controls, translated. */\n  labels?: ShowcaseLabels;\n}\n\n/** An auto-advancing slideshow with a visible, clickable progress bar, a counter, prev / next and a pause button. */\nexport function Showcase<T>({\n  label,\n  items,\n  getId,\n  renderItem,\n  getTitle,\n  interval = 6000,\n  autoplay = true,\n  transition = \"fade\",\n  loop = true,\n  index: controlled,\n  defaultIndex = 0,\n  onIndexChange,\n  labels = showcaseLabels,\n  className,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onPointerEnter,\n  onPointerLeave,\n  ...props\n}: ShowcaseProps<T>) {\n  const total = items.length;\n  const root = React.useRef<HTMLElement>(null);\n  const [inner, setInner] = React.useState(defaultIndex);\n  const current = Math.min(Math.max(controlled ?? inner, 0), Math.max(total - 1, 0));\n  const mounted = React.useSyncExternalStore(subscribeNothing, () => true, () => false);\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  const hidden = React.useSyncExternalStore(subscribeVisibility, readHidden, () => false);\n  const [paused, setPaused] = React.useState(false);\n  const [hover, setHover] = React.useState(false);\n  const [focus, setFocus] = React.useState(false);\n  const [inView, setInView] = React.useState(true);\n  const [announce, setAnnounce] = React.useState(false);\n\n  React.useEffect(() => {\n    const host = root.current;\n    if (!host || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver((entries) => setInView(entries.some((e) => e.isIntersecting)), { threshold: 0.2 });\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, []);\n\n  const move = (to: number, user: boolean) => {\n    if (total === 0) return;\n    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);\n    if (next === current) return;\n    setAnnounce(user);\n    if (controlled === undefined) setInner(next);\n    onIndexChange?.(next, user);\n  };\n\n  const playing = autoplay && mounted && !reduced && total > 1;\n  const running = playing && !paused && !hover && !focus && !hidden && inView;\n  const lastStop = !loop && current === total - 1;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const target = event.target as HTMLElement;\n    if (target.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n    const to = event.key === \"ArrowRight\" ? current + 1 : event.key === \"ArrowLeft\" ? current - 1 : event.key === \"Home\" ? 0 : event.key === \"End\" ? total - 1 : null;\n    if (to === null) return;\n    event.preventDefault();\n    move(to, true);\n  };\n\n  const item = items[current];\n  const title = item !== undefined ? getTitle?.(item) : undefined;\n  const button = \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg-secondary transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40\";\n\n  return (\n    <section\n      ref={root}\n      aria-roledescription=\"carousel\"\n      aria-label={label}\n      data-running={running ? \"\" : undefined}\n      className={cn(\"flex flex-col gap-3\", className)}\n      onKeyDown={handleKeyDown}\n      onPointerEnter={(e) => {\n        onPointerEnter?.(e);\n        if (e.pointerType === \"mouse\") setHover(true);\n      }}\n      onPointerLeave={(e) => {\n        onPointerLeave?.(e);\n        setHover(false);\n      }}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // A mouse click on a button is not a reason to stop: only a keyboard focus is.\n        let visible = true;\n        try {\n          visible = e.target.matches(\":focus-visible\");\n        } catch {\n          /* a stand-in without :focus-visible */\n        }\n        if (visible) setFocus(true);\n      }}\n      onBlur={(e) => {\n        onBlur?.(e);\n        if (!e.currentTarget.contains(e.relatedTarget)) setFocus(false);\n      }}\n      {...props}\n    >\n      <style href=\"kz-showcase\" precedence=\"medium\">\n        {FILL_CSS}\n      </style>\n      <div aria-live={announce ? \"polite\" : \"off\"} className=\"grid\">\n        {items.map((slide, i) => {\n          const active = i === current;\n          const gap = Math.abs(i - current);\n          const near = gap <= 1 || (loop && total - gap <= 1);\n          const side = i < current ? \"-translate-x-4\" : \"translate-x-4\";\n          return (\n            <div\n              key={getId(slide)}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={labels.slide(i + 1, total)}\n              aria-hidden={active ? undefined : true}\n              inert={active ? undefined : true}\n              data-active={active ? \"\" : undefined}\n              className={cn(\n                \"col-start-1 row-start-1 min-w-0 transition-[opacity,translate,visibility] duration-500 motion-reduce:transition-none\",\n                active ? \"visible opacity-100\" : \"invisible opacity-0\",\n                transition === \"slide\" && (active ? \"translate-x-0\" : side),\n              )}\n            >\n              {near ? renderItem(slide, { index: i, active }) : null}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"flex gap-1\">\n        {items.map((slide, i) => (\n          <button\n            key={getId(slide)}\n            type=\"button\"\n            aria-label={labels.goTo(i + 1, total)}\n            aria-current={i === current ? \"true\" : undefined}\n            tabIndex={i === current ? 0 : -1}\n            onClick={() => move(i, true)}\n            className=\"group/seg relative flex h-6 min-w-0 flex-1 cursor-pointer items-center rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <span className=\"relative block h-1 w-full overflow-hidden rounded-full bg-surface-3 transition-[height] group-hover/seg:h-1.5\">\n              {i < current || (i === current && (!playing || lastStop)) ? <span className=\"absolute inset-0 bg-accent\" /> : null}\n              {i === current && playing && !lastStop ? (\n                <span\n                  key={`${current}`}\n                  data-segment-fill\n                  className=\"kz-showcase-fill absolute inset-0 bg-accent\"\n                  style={{ animationDuration: `${interval}ms`, animationPlayState: running ? \"running\" : \"paused\" }}\n                  onAnimationEnd={() => running && move(current + 1, false)}\n                />\n              ) : null}\n            </span>\n          </button>\n        ))}\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <p className=\"m-0 min-w-0 flex-1 truncate text-sm text-fg-secondary\">\n          {title ? <span className=\"font-medium text-fg\">{title}</span> : null}\n          {title ? <span aria-hidden> · </span> : null}\n          <span>{labels.counter(current + 1, total)}</span>\n        </p>\n        <div className=\"flex items-center gap-1.5\">\n          <button type=\"button\" aria-label={labels.previous} disabled={!loop && current === 0} onClick={() => move(current - 1, true)} className={button}>\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n              <path d=\"M15 5l-7 7 7 7\" />\n            </svg>\n          </button>\n          {playing ? (\n            <button type=\"button\" aria-label={paused ? labels.play : labels.pause} onClick={() => setPaused(!paused)} className={button}>\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          ) : null}\n          <button type=\"button\" aria-label={labels.next} disabled={!loop && current === total - 1} onClick={() => move(current + 1, true)} className={button}>\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n              <path d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/**\n * The typed reveal of a text, kept minimal: the visible prefix grows at `speed` characters per second while `active`;\n * under reduced motion (or when not active) it is the whole text at once. Render the full text for assistive technology\n * (`sr-only`) and this one `aria-hidden`.\n */\nexport function useTypedText(text: string, { active = true, speed = 45 }: { active?: boolean; speed?: number } = {}) {\n  const [typed, setTyped] = React.useState({ of: \"\", count: 0 });\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  React.useEffect(() => {\n    if (!active || reduced) return;\n    const id = window.setInterval(() => {\n      setTyped((state) => {\n        const count = state.of === text ? state.count + 1 : 1;\n        if (count >= text.length) window.clearInterval(id);\n        return { of: text, count };\n      });\n    }, Math.max(10, 1000 / speed));\n    return () => window.clearInterval(id);\n  }, [text, active, reduced, speed]);\n  const count = typed.of === text ? typed.count : 0;\n  const done = !active || reduced || count >= text.length;\n  return { text: done ? text : text.slice(0, count), done };\n}\n"],"mappings":"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","names":["count"]}

package/dist/site-footer.d.ts

@@ -0,0 +1,172 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+import { S as SiteId, F as FamilyLabels } from './sites-CgJrxejx.js';
+
+declare const siteFooter: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            link?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            inner?: tailwind_variants.ClassValue;
+            top?: tailwind_variants.ClassValue;
+            site?: tailwind_variants.ClassValue;
+            siteName?: tailwind_variants.ClassValue;
+            siteText?: tailwind_variants.ClassValue;
+            own?: tailwind_variants.ClassValue;
+            family?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            tag?: tailwind_variants.ClassValue;
+            bottom?: tailwind_variants.ClassValue;
+            signature?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            link?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            inner?: tailwind_variants.ClassValue;
+            top?: tailwind_variants.ClassValue;
+            site?: tailwind_variants.ClassValue;
+            siteName?: tailwind_variants.ClassValue;
+            siteText?: tailwind_variants.ClassValue;
+            own?: tailwind_variants.ClassValue;
+            family?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            tag?: tailwind_variants.ClassValue;
+            bottom?: tailwind_variants.ClassValue;
+            signature?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    inner: string;
+    top: string;
+    site: string;
+    siteName: string;
+    siteText: string;
+    own: string;
+    family: string;
+    column: string;
+    title: string;
+    list: string;
+    link: string;
+    mark: string;
+    tag: string;
+    bottom: string;
+    signature: string;
+    version: string;
+    legal: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            link?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            inner?: tailwind_variants.ClassValue;
+            top?: tailwind_variants.ClassValue;
+            site?: tailwind_variants.ClassValue;
+            siteName?: tailwind_variants.ClassValue;
+            siteText?: tailwind_variants.ClassValue;
+            own?: tailwind_variants.ClassValue;
+            family?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            tag?: tailwind_variants.ClassValue;
+            bottom?: tailwind_variants.ClassValue;
+            signature?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    inner: string;
+    top: string;
+    site: string;
+    siteName: string;
+    siteText: string;
+    own: string;
+    family: string;
+    column: string;
+    title: string;
+    list: string;
+    link: string;
+    mark: string;
+    tag: string;
+    bottom: string;
+    signature: string;
+    version: string;
+    legal: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    inner: string;
+    top: string;
+    site: string;
+    siteName: string;
+    siteText: string;
+    own: string;
+    family: string;
+    column: string;
+    title: string;
+    list: string;
+    link: string;
+    mark: string;
+    tag: string;
+    bottom: string;
+    signature: string;
+    version: string;
+    legal: string;
+}>>;
+type SiteFooterProps = Omit<React.ComponentProps<"footer">, "children"> & {
+    /** The site this footer belongs to (`@krizaka/ui/sites`): its mark and line, its signature, marked in the family. */
+    current: SiteId;
+    /**
+     * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.
+     * @default familyLabels.en
+     */
+    labels?: FamilyLabels;
+    /** The site's own columns (`SiteFooter.Column`), before the family. */
+    children?: React.ReactNode;
+    /** The version the site runs (`1.2.3`, shown `v1.2.3`). */
+    version?: string;
+    /** The environment, when it is not production (`DEV`). */
+    env?: string;
+    /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */
+    legal?: React.ReactNode;
+};
+/** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */
+declare function SiteFooter({ current, labels, children, version, env, legal, className, ...props }: SiteFooterProps): React.JSX.Element;
+declare namespace SiteFooter {
+    var Column: typeof SiteFooterColumn;
+    var Link: typeof SiteFooterLink;
+}
+type SiteFooterColumnProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The column's heading (“Docs”) — passed translated. */
+    title: string;
+    /** Its links (`SiteFooter.Link`). */
+    children: React.ReactNode;
+};
+/** One of the site's own columns: a heading and its links. */
+declare function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps): React.JSX.Element;
+type SiteFooterLinkProps = React.ComponentProps<"a"> & {
+    /** The current page: `aria-current="page"`. */
+    active?: boolean;
+    /** Renders your router's `<Link>`. */
+    asChild?: boolean;
+};
+/** A link of the footer. */
+declare function SiteFooterLink({ active, asChild, className, ...props }: SiteFooterLinkProps): React.JSX.Element;
+
+export { SiteFooter, SiteFooterColumn, type SiteFooterColumnProps, SiteFooterLink, type SiteFooterLinkProps, type SiteFooterProps, siteFooter };

package/dist/site-footer.js

@@ -0,0 +1,105 @@
+"use client";
+import {
+  FamilyMark,
+  familyLabels,
+  siteById,
+  sitesByGroup
+} from "./chunk-OT6HX3PN.js";
+import {
+  KrizakaLogo
+} from "./chunk-HG65YAV4.js";
+
+// src/site-footer/site-footer.tsx
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var siteFooter = tv({
+  slots: {
+    root: "w-full border-t border-border-subtle bg-surface-0 text-fg",
+    inner: "mx-auto grid w-full max-w-(--kz-page-max,72rem) gap-10 px-(--kz-page-gutter,16px) py-12",
+    top: "grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
+    site: "grid content-start gap-3",
+    siteName: "inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg",
+    siteText: "max-w-xs text-sm leading-relaxed text-fg-secondary",
+    own: "grid grid-cols-2 gap-8 sm:grid-cols-3",
+    family: "grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4",
+    column: "grid content-start gap-3",
+    title: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    list: "grid gap-2",
+    link: "inline-flex min-h-6 items-center gap-2 rounded-md text-sm text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold",
+    mark: "flex h-4 w-4 shrink-0 items-center justify-center text-fg",
+    tag: "rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
+    bottom: "flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary",
+    signature: "inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    version: "rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary",
+    legal: "flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto"
+  }
+});
+var s = siteFooter();
+function SiteFooter({ current, labels = familyLabels.en, children, version, env, legal, className, ...props }) {
+  const id = React.useId();
+  const site = siteById(current);
+  const krizaka = siteById("krizaka");
+  const tag = [env, version && `v${version.replace(/^v/, "")}`].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsx("footer", { className: s.root({ className }), ...props, children: /* @__PURE__ */ jsxs("div", { className: s.inner(), children: [
+    /* @__PURE__ */ jsxs("div", { className: s.top(), children: [
+      /* @__PURE__ */ jsxs("div", { className: s.site(), children: [
+        /* @__PURE__ */ jsxs("a", { href: site.url, className: s.siteName(), children: [
+          /* @__PURE__ */ jsx(FamilyMark, { mark: site.mark, size: 24 }),
+          site.name
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: s.siteText(), children: labels.descriptions[site.id] })
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: s.own(), children })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { "aria-label": labels.family, className: s.family(), children: sitesByGroup().map(({ group, sites }) => /* @__PURE__ */ jsxs("div", { className: s.column(), children: [
+      /* @__PURE__ */ jsx("p", { id: `${id}-${group}`, className: s.title(), children: labels.groups[group] }),
+      /* @__PURE__ */ jsx("ul", { "aria-labelledby": `${id}-${group}`, className: s.list(), children: sites.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: item.url, "aria-current": item.id === current ? "true" : void 0, className: s.link(), children: [
+        /* @__PURE__ */ jsx("span", { className: s.mark(), children: /* @__PURE__ */ jsx(FamilyMark, { mark: item.mark, size: 16 }) }),
+        item.name,
+        item.status !== "released" && /* @__PURE__ */ jsx("span", { className: s.tag(), children: labels.status[item.status] }),
+        item.id === current && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          "(",
+          labels.current,
+          ")"
+        ] })
+      ] }) }, item.id)) })
+    ] }, group)) }),
+    /* @__PURE__ */ jsxs("div", { className: s.bottom(), children: [
+      /* @__PURE__ */ jsxs("a", { href: krizaka.url, className: s.signature(), children: [
+        /* @__PURE__ */ jsx(KrizakaLogo, { size: 18, animated: false }),
+        labels.signature[site.kind]
+      ] }),
+      tag && /* @__PURE__ */ jsxs("span", { className: s.version(), children: [
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          labels.version,
+          " "
+        ] }),
+        tag
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: labels.place }),
+      legal && /* @__PURE__ */ jsx("div", { className: s.legal(), children: legal })
+    ] })
+  ] }) });
+}
+function SiteFooterColumn({ title, children, className, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: s.column({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("p", { id, className: s.title(), children: title }),
+    /* @__PURE__ */ jsx("ul", { "aria-labelledby": id, className: s.list(), children: React.Children.map(children, (child) => child ? /* @__PURE__ */ jsx("li", { children: child }) : null) })
+  ] });
+}
+function SiteFooterLink({ active, asChild, className, ...props }) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(Comp, { "aria-current": active ? "page" : void 0, className: s.link({ className }), ...props });
+}
+SiteFooter.Column = SiteFooterColumn;
+SiteFooter.Link = SiteFooterLink;
+export {
+  SiteFooter,
+  SiteFooterColumn,
+  SiteFooterLink,
+  siteFooter
+};
+//# sourceMappingURL=site-footer.js.map

package/dist/site-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/site-footer/site-footer.tsx"],"sourcesContent":["// Client (the marks hold an id). The footer shared by every site of the Krizaka family: the site's own columns, then the\n// family in columns from `@krizaka/ui/sites` (the same groups as the bar's switcher), then the signature line — “A\n// Krizaka product” by the kind of the current site — the version and the place.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { FamilyMark } from \"../family-mark\";\nimport { KrizakaLogo } from \"../marks/KrizakaLogo\";\nimport { type FamilyLabels, familyLabels, siteById, type SiteId, sitesByGroup } from \"../sites/sites\";\n\nexport const siteFooter = tv({\n  slots: {\n    root: \"w-full border-t border-border-subtle bg-surface-0 text-fg\",\n    inner: \"mx-auto grid w-full max-w-(--kz-page-max,72rem) gap-10 px-(--kz-page-gutter,16px) py-12\",\n    top: \"grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]\",\n    site: \"grid content-start gap-3\",\n    siteName: \"inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg\",\n    siteText: \"max-w-xs text-sm leading-relaxed text-fg-secondary\",\n    own: \"grid grid-cols-2 gap-8 sm:grid-cols-3\",\n    family: \"grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4\",\n    column: \"grid content-start gap-3\",\n    title: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    list: \"grid gap-2\",\n    link:\n      \"inline-flex min-h-6 items-center gap-2 rounded-md text-sm text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold\",\n    mark: \"flex h-4 w-4 shrink-0 items-center justify-center text-fg\",\n    tag: \"rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    bottom: \"flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary\",\n    signature:\n      \"inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    version: \"rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary\",\n    legal: \"flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto\",\n  },\n});\nconst s = siteFooter();\n\nexport type SiteFooterProps = Omit<React.ComponentProps<\"footer\">, \"children\"> & {\n  /** The site this footer belongs to (`@krizaka/ui/sites`): its mark and line, its signature, marked in the family. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** The site's own columns (`SiteFooter.Column`), before the family. */\n  children?: React.ReactNode;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */\n  legal?: React.ReactNode;\n};\n\n/** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */\nexport function SiteFooter({ current, labels = familyLabels.en, children, version, env, legal, className, ...props }: SiteFooterProps) {\n  const id = React.useId();\n  const site = siteById(current);\n  const krizaka = siteById(\"krizaka\");\n  const tag = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean).join(\" · \");\n  return (\n    <footer className={s.root({ className })} {...props}>\n      <div className={s.inner()}>\n        <div className={s.top()}>\n          <div className={s.site()}>\n            <a href={site.url} className={s.siteName()}>\n              <FamilyMark mark={site.mark} size={24} />\n              {site.name}\n            </a>\n            <p className={s.siteText()}>{labels.descriptions[site.id]}</p>\n          </div>\n          {children && <div className={s.own()}>{children}</div>}\n        </div>\n        <nav aria-label={labels.family} className={s.family()}>\n          {sitesByGroup().map(({ group, sites }) => (\n            <div key={group} className={s.column()}>\n              <p id={`${id}-${group}`} className={s.title()}>\n                {labels.groups[group]}\n              </p>\n              <ul aria-labelledby={`${id}-${group}`} className={s.list()}>\n                {sites.map((item) => (\n                  <li key={item.id}>\n                    <a href={item.url} aria-current={item.id === current ? \"true\" : undefined} className={s.link()}>\n                      <span className={s.mark()}>\n                        <FamilyMark mark={item.mark} size={16} />\n                      </span>\n                      {item.name}\n                      {item.status !== \"released\" && <span className={s.tag()}>{labels.status[item.status]}</span>}\n                      {item.id === current && <span className=\"sr-only\">({labels.current})</span>}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </nav>\n        <div className={s.bottom()}>\n          <a href={krizaka.url} className={s.signature()}>\n            <KrizakaLogo size={18} animated={false} />\n            {labels.signature[site.kind]}\n          </a>\n          {tag && (\n            <span className={s.version()}>\n              <span className=\"sr-only\">{labels.version} </span>\n              {tag}\n            </span>\n          )}\n          <span>{labels.place}</span>\n          {legal && <div className={s.legal()}>{legal}</div>}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport type SiteFooterColumnProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The column's heading (“Docs”) — passed translated. */\n  title: string;\n  /** Its links (`SiteFooter.Link`). */\n  children: React.ReactNode;\n};\n\n/** One of the site's own columns: a heading and its links. */\nexport function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps) {\n  const id = React.useId();\n  return (\n    <div className={s.column({ className })} {...props}>\n      <p id={id} className={s.title()}>\n        {title}\n      </p>\n      <ul aria-labelledby={id} className={s.list()}>\n        {React.Children.map(children, (child) => (child ? <li>{child}</li> : null))}\n      </ul>\n    </div>\n  );\n}\n\nexport type SiteFooterLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page: `aria-current=\"page\"`. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the footer. */\nexport function SiteFooterLink({ active, asChild, className, ...props }: SiteFooterLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.link({ className })} {...props} />;\n}\n\nSiteFooter.Column = SiteFooterColumn;\nSiteFooter.Link = SiteFooterLink;\n"],"mappings":"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","names":[]}

package/dist/sites-CgJrxejx.d.ts

@@ -0,0 +1,32 @@
+/** A site of the family. */
+type SiteId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "ui" | "java" | "github";
+/** What a site is: the company, a product, or an open-source project. It chooses the footer's signature line. */
+type SiteKind = "company" | "product" | "open-source";
+/**
+ * `released`: open to visit. `upcoming`: announced, not released yet (said "Coming soon"). `construction`: under
+ * construction — nothing deployed beyond its page, nothing offered.
+ */
+type SiteStatus = "released" | "upcoming" | "construction";
+/** The groups of the family, in reading order: Krizaka · Products · Open source · GitHub. */
+type SiteGroup = "krizaka" | "products" | "open-source" | "github";
+/** The words of the family: the switcher, the footer, each site's one line. */
+interface FamilyLabels {
+    /** The family's name: the switcher's navigation and its button, the footer's navigation (“Krizaka family”). */
+    family: string;
+    /** The heading of each group. */
+    groups: Record<SiteGroup, string>;
+    /** The badge of a site that is not released. */
+    status: Record<Exclude<SiteStatus, "released">, string>;
+    /** Says which site is the current one (“You are here”). */
+    current: string;
+    /** One line per site: what it is. */
+    descriptions: Record<SiteId, string>;
+    /** The footer's signature, by the kind of the current site (“A Krizaka product”). */
+    signature: Record<SiteKind, string>;
+    /** The footer's place line (“Made in Montréal”). */
+    place: string;
+    /** The accessible name of the version (“Version”). */
+    version: string;
+}
+
+export type { FamilyLabels as F, SiteId as S };