@krizaka/ui 3.46.0 → 3.48.0

package/dist/agenda.js

@@ -0,0 +1,90 @@
+// src/agenda/agenda.tsx
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var agenda = tv({
+  slots: {
+    root: "m-0 flex list-none flex-col p-0",
+    item: "relative flex items-stretch gap-1 border-b border-border-subtle last:border-b-0",
+    main: "group flex min-w-0 flex-1 items-center gap-3 rounded-md px-2 py-3 text-left outline-none transition-colors hover:bg-surface-1 focus-visible:ring-2 focus-visible:ring-focus data-[selected=true]:bg-surface-2",
+    times: "flex w-16 shrink-0 flex-col text-sm tabular-nums text-fg",
+    start: "font-semibold",
+    end: "text-xs text-fg-secondary",
+    marker: "h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-ag-tone)] ring-4 ring-surface-0",
+    leading: "shrink-0",
+    text: "flex min-w-0 flex-1 flex-col",
+    title: "truncate text-sm font-semibold text-fg",
+    description: "truncate text-xs text-fg-secondary",
+    status: "shrink-0",
+    action: "flex shrink-0 items-center pr-1",
+    now: "relative flex items-center gap-2 py-1 text-xs font-semibold text-fg-accent",
+    nowLine: "h-px flex-1 bg-accent",
+    nowDot: "h-2 w-2 shrink-0 rounded-full bg-accent",
+    empty: "py-6"
+  },
+  variants: {
+    past: { true: { times: "text-fg-secondary", title: "font-medium text-fg-secondary", marker: "opacity-60" } }
+  }
+});
+var TONE = {
+  neutral: "var(--kz-border-strong)",
+  accent: "var(--kz-accent)",
+  success: "var(--kz-success)",
+  warning: "var(--kz-warning)",
+  danger: "var(--kz-danger)",
+  info: "var(--kz-info)"
+};
+var agendaLabels = { now: (time) => `Now \xB7 ${time}` };
+var stamp = (value) => Date.parse(value);
+function Agenda({ items, locale = "en-US", timeZone, now, selectedId, onSelect, linkAs, action, labels: given, empty, className, "aria-label": label }) {
+  const labels = { ...agendaLabels, ...given };
+  const s = agenda();
+  const clock = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone });
+  const time = (value) => clock.format(typeof value === "string" ? new Date(value) : value);
+  const sorted = [...items].sort((a, b) => stamp(a.start) - stamp(b.start));
+  if (sorted.length === 0) return empty ? /* @__PURE__ */ jsx("div", { className: s.empty(), children: empty }) : null;
+  const at = now ? now.getTime() : null;
+  const upcoming = at === null ? -1 : sorted.findIndex((i) => stamp(i.start) > at);
+  const lineBefore = at === null ? -1 : upcoming === -1 ? sorted.length : upcoming;
+  const Link = linkAs ?? "a";
+  const row = (item) => {
+    const begun = at !== null && stamp(item.start) <= at;
+    const over = begun && item.end !== void 0 && stamp(item.end) <= at;
+    const rowStyle = agenda({ past: over });
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: rowStyle.times(), children: [
+        /* @__PURE__ */ jsx("span", { className: s.start(), children: time(item.start) }),
+        item.end ? /* @__PURE__ */ jsx("span", { className: s.end(), children: time(item.end) }) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: rowStyle.marker(), style: { ["--kz-ag-tone"]: TONE[item.tone ?? "neutral"] } }),
+      item.leading ? /* @__PURE__ */ jsx("span", { className: s.leading(), children: item.leading }) : null,
+      /* @__PURE__ */ jsxs("span", { className: s.text(), children: [
+        /* @__PURE__ */ jsx("span", { className: rowStyle.title(), children: item.title }),
+        item.description ? /* @__PURE__ */ jsx("span", { className: s.description(), children: item.description }) : null
+      ] }),
+      item.status ? /* @__PURE__ */ jsx("span", { className: s.status(), children: item.status }) : null
+    ] });
+    const common = { className: s.main(), "data-selected": selectedId === item.id, "data-current": begun && !over, "aria-current": selectedId === item.id ? "true" : void 0 };
+    return /* @__PURE__ */ jsxs("li", { className: s.item(), children: [
+      item.href ? /* @__PURE__ */ jsx(Link, { href: item.href, ...common, children: inner }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onSelect?.(item), ...common, children: inner }),
+      action ? /* @__PURE__ */ jsx("div", { className: s.action(), children: action(item) }) : null
+    ] }, item.id);
+  };
+  const nowLine = at === null ? null : /* @__PURE__ */ jsxs("li", { className: s.now(), "data-agenda-now": true, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.nowDot() }),
+    /* @__PURE__ */ jsx("span", { children: labels.now(time(now)) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.nowLine() })
+  ] }, "now");
+  const rows = [];
+  sorted.forEach((item, index) => {
+    if (index === lineBefore) rows.push(nowLine);
+    rows.push(row(item));
+  });
+  if (lineBefore === sorted.length) rows.push(nowLine);
+  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: s.root({ className }), children: rows });
+}
+export {
+  Agenda,
+  agenda,
+  agendaLabels
+};
+//# sourceMappingURL=agenda.js.map

package/dist/agenda.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/agenda/agenda.tsx"],"sourcesContent":["// Server-safe. One day's agenda: the appointments in time order, the times in tabular sans figures, a « now » line\n// placed between them, the past dimmed. The row is one link or button (the app's selection, its URL); its action is a\n// sibling control, never nested. Words are props; the app passes `now` (null hides the line).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const agenda = tv({\n  slots: {\n    root: \"m-0 flex list-none flex-col p-0\",\n    item: \"relative flex items-stretch gap-1 border-b border-border-subtle last:border-b-0\",\n    main: \"group flex min-w-0 flex-1 items-center gap-3 rounded-md px-2 py-3 text-left outline-none transition-colors hover:bg-surface-1 focus-visible:ring-2 focus-visible:ring-focus data-[selected=true]:bg-surface-2\",\n    times: \"flex w-16 shrink-0 flex-col text-sm tabular-nums text-fg\",\n    start: \"font-semibold\",\n    end: \"text-xs text-fg-secondary\",\n    marker: \"h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-ag-tone)] ring-4 ring-surface-0\",\n    leading: \"shrink-0\",\n    text: \"flex min-w-0 flex-1 flex-col\",\n    title: \"truncate text-sm font-semibold text-fg\",\n    description: \"truncate text-xs text-fg-secondary\",\n    status: \"shrink-0\",\n    action: \"flex shrink-0 items-center pr-1\",\n    now: \"relative flex items-center gap-2 py-1 text-xs font-semibold text-fg-accent\",\n    nowLine: \"h-px flex-1 bg-accent\",\n    nowDot: \"h-2 w-2 shrink-0 rounded-full bg-accent\",\n    empty: \"py-6\",\n  },\n  variants: {\n    past: { true: { times: \"text-fg-secondary\", title: \"font-medium text-fg-secondary\", marker: \"opacity-60\" } },\n  },\n});\n\nexport type AgendaTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nconst TONE: Record<AgendaTone, string> = {\n  neutral: \"var(--kz-border-strong)\",\n  accent: \"var(--kz-accent)\",\n  success: \"var(--kz-success)\",\n  warning: \"var(--kz-warning)\",\n  danger: \"var(--kz-danger)\",\n  info: \"var(--kz-info)\",\n};\n\nexport type AgendaItem = {\n  id: string;\n  /** ISO instant. */\n  start: string;\n  /** ISO instant; shown under the start and used to know which one is current. */\n  end?: string;\n  /** The client, the subject. */\n  title: React.ReactNode;\n  /** The service, the stylist: one muted line. */\n  description?: React.ReactNode;\n  /** The colour of the rail's dot; the status chip carries the word. */\n  tone?: AgendaTone;\n  /** Before the text: an `Avatar`. */\n  leading?: React.ReactNode;\n  /** After the text: a `Badge` with the status, in words. */\n  status?: React.ReactNode;\n  /** An address for the row (the app's URL state, `?appointment=…`); rendered with `linkAs`. */\n  href?: string;\n};\n\nexport type AgendaLabels = {\n  /** The « now » line: `(time) => \"Now · 10:42\"`. */\n  now: (time: string) => string;\n};\nexport const agendaLabels: AgendaLabels = { now: (time) => `Now · ${time}` };\n\nexport type AgendaProps<T extends AgendaItem> = {\n  /** The day's appointments, in any order: the agenda sorts them by start. */\n  items: readonly T[];\n  /** The agenda's accessible name (« Appointments of Monday »). */\n  \"aria-label\": string;\n  /** The locale of the times. Default `en-US`. */\n  locale?: string;\n  /** The time zone of the shop, so the times read the same on the server and on the phone. */\n  timeZone?: string;\n  /** The instant of the « now » line; `null` or absent hides it (a day that is not today). */\n  now?: Date | null;\n  /** The open item: marked `aria-current`. */\n  selectedId?: string | null;\n  /** Called with the item pressed, for items with no `href`. */\n  onSelect?: (item: T) => void;\n  /** The router's link for items with an `href` (`next/link`). Default `a`. */\n  linkAs?: React.ElementType;\n  /** A small control after the row (Start, End), outside the row's link. */\n  action?: (item: T) => React.ReactNode;\n  /** The words, passed translated (the « now » line). */\n  labels?: Partial<AgendaLabels>;\n  /** Shown when there is no item (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** Classes merged on the list. */\n  className?: string;\n};\n\nconst stamp = (value: string) => Date.parse(value);\n\nexport function Agenda<T extends AgendaItem>({ items, locale = \"en-US\", timeZone, now, selectedId, onSelect, linkAs, action, labels: given, empty, className, \"aria-label\": label }: AgendaProps<T>) {\n  const labels = { ...agendaLabels, ...given };\n  const s = agenda();\n  const clock = new Intl.DateTimeFormat(locale, { hour: \"numeric\", minute: \"2-digit\", timeZone });\n  const time = (value: string | Date) => clock.format(typeof value === \"string\" ? new Date(value) : value);\n  const sorted = [...items].sort((a, b) => stamp(a.start) - stamp(b.start));\n  if (sorted.length === 0) return empty ? <div className={s.empty()}>{empty}</div> : null;\n  const at = now ? now.getTime() : null;\n  // The line goes before the first item still to come, and after the last when every one has begun.\n  const upcoming = at === null ? -1 : sorted.findIndex((i) => stamp(i.start) > at);\n  const lineBefore = at === null ? -1 : upcoming === -1 ? sorted.length : upcoming;\n  const Link = (linkAs ?? \"a\") as React.ElementType;\n\n  const row = (item: T) => {\n    const begun = at !== null && stamp(item.start) <= at;\n    const over = begun && item.end !== undefined && stamp(item.end) <= at!;\n    const rowStyle = agenda({ past: over });\n    const inner = (\n      <>\n        <span className={rowStyle.times()}>\n          <span className={s.start()}>{time(item.start)}</span>\n          {item.end ? <span className={s.end()}>{time(item.end)}</span> : null}\n        </span>\n        <span aria-hidden className={rowStyle.marker()} style={{ [\"--kz-ag-tone\" as string]: TONE[item.tone ?? \"neutral\"] }} />\n        {item.leading ? <span className={s.leading()}>{item.leading}</span> : null}\n        <span className={s.text()}>\n          <span className={rowStyle.title()}>{item.title}</span>\n          {item.description ? <span className={s.description()}>{item.description}</span> : null}\n        </span>\n        {item.status ? <span className={s.status()}>{item.status}</span> : null}\n      </>\n    );\n    const common = { className: s.main(), \"data-selected\": selectedId === item.id, \"data-current\": begun && !over, \"aria-current\": selectedId === item.id ? (\"true\" as const) : undefined };\n    return (\n      <li key={item.id} className={s.item()}>\n        {item.href ? (\n          <Link href={item.href} {...common}>\n            {inner}\n          </Link>\n        ) : (\n          <button type=\"button\" onClick={() => onSelect?.(item)} {...common}>\n            {inner}\n          </button>\n        )}\n        {action ? <div className={s.action()}>{action(item)}</div> : null}\n      </li>\n    );\n  };\n\n  const nowLine =\n    at === null ? null : (\n      <li key=\"now\" className={s.now()} data-agenda-now>\n        <span aria-hidden className={s.nowDot()} />\n        <span>{labels.now(time(now!))}</span>\n        <span aria-hidden className={s.nowLine()} />\n      </li>\n    );\n\n  const rows: React.ReactNode[] = [];\n  sorted.forEach((item, index) => {\n    if (index === lineBefore) rows.push(nowLine);\n    rows.push(row(item));\n  });\n  if (lineBefore === sorted.length) rows.push(nowLine);\n\n  return (\n    <ol aria-label={label} className={s.root({ className })}>\n      {rows}\n    </ol>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/avatar-iajODANU.d.ts

@@ -0,0 +1,114 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+type DefaultAvatarBrand = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka" | "kachizaka" | "akinaza";
+/** `person`: a neutral silhouette. `plain`: the brand's gradient alone, ready for initials. */
+type DefaultAvatarKind = "person" | "plain";
+interface DefaultAvatar {
+    /** The brand of the product showing the avatar: its gradient, its hues. */
+    brand: DefaultAvatarBrand;
+    /** Any stable text or number of the person (their id): the same seed gives the same tone everywhere. */
+    seed?: string | number;
+    /** Force a tone, 1 to 6, instead of deriving it from `seed`. */
+    tone?: number;
+    /**
+     * `person` (default): a silhouette. `plain`: the gradient alone.
+     * @default "person"
+     */
+    kind?: DefaultAvatarKind;
+}
+
+declare const avatar: tailwind_variants.TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    group: string;
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    group: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    group: string;
+}>>;
+type AvatarSize = NonNullable<VariantProps<typeof avatar>["size"]>;
+type AvatarProps = Omit<React.ComponentProps<"span">, "children"> & {
+    /** The image's URL; `null` or nothing shows the `fallback`. */
+    src?: string | null;
+    /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */
+    alt?: string;
+    /** Shown while the image loads, when it fails or when there is none: initials, an icon. */
+    fallback?: React.ReactNode;
+    /** The picture to show instead when `src` is missing or fails to load (an image URL). The `fallback` still covers its own loading. */
+    fallbackSrc?: string;
+    /**
+     * The Krizaka default picture when the person has no photo (or it fails): their brand's gradient and a silhouette,
+     * one of six tones from `seed` — `defaultAvatar={{ brand: "orochia", seed: user.id }}`. `fallbackSrc` wins over it.
+     */
+    defaultAvatar?: DefaultAvatar;
+    /**
+     * xs · sm · md · lg · xl.
+     * @default "md"
+     */
+    size?: AvatarSize;
+};
+
+export type { AvatarProps as A, DefaultAvatar as D };

package/dist/chunk-3D2YI63L.js

@@ -0,0 +1,27 @@
+// 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 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" }) });
+
+export {
+  ChevronGlyph,
+  CheckGlyph
+};
+//# sourceMappingURL=chunk-3D2YI63L.js.map

package/dist/chunk-3D2YI63L.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;AA+CO,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;","names":[]}

package/dist/chunk-3RVFD3UX.js

@@ -0,0 +1,85 @@
+// src/avatar/default-avatar.ts
+var DEFAULT_AVATAR_TONES = 6;
+var DEFAULT_AVATAR_BASE = "https://krizaka-assets.b-cdn.net/people/defaults/v1";
+var clampTone = (tone) => Math.min(DEFAULT_AVATAR_TONES, Math.max(1, Math.round(tone)));
+function defaultAvatarToneOf(seed) {
+  if (seed === void 0) return 1;
+  let h = 2166136261;
+  for (const ch of String(seed)) {
+    h ^= ch.codePointAt(0) ?? 0;
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h % DEFAULT_AVATAR_TONES + 1;
+}
+var resolveTone = (a) => a.tone === void 0 ? defaultAvatarToneOf(a.seed) : clampTone(a.tone);
+function defaultAvatarFile(kind, tone, size) {
+  return size === "svg" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;
+}
+function trimTrailingSlashes(value) {
+  let end = value.length;
+  while (end > 0 && value.charCodeAt(end - 1) === 47) end--;
+  return value.slice(0, end);
+}
+function defaultAvatarUrl(avatar2, { size = 256, base = DEFAULT_AVATAR_BASE } = {}) {
+  return `${trimTrailingSlashes(base)}/${avatar2.brand}/${defaultAvatarFile(avatar2.kind ?? "person", resolveTone(avatar2), size)}`;
+}
+
+// src/avatar/avatar.tsx
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatar = tv({
+  slots: {
+    root: "relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle",
+    image: "h-full w-full object-cover",
+    fallback: "flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary",
+    group: "flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0"
+  },
+  variants: {
+    size: {
+      xs: { root: "h-5 w-5 text-[9px]" },
+      sm: { root: "h-8 w-8 text-xs" },
+      md: { root: "h-10 w-10 text-sm" },
+      lg: { root: "h-14 w-14 text-base" },
+      xl: { root: "h-20 w-20 text-lg" }
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function AvatarRoot({ src, alt = "", fallback, fallbackSrc, defaultAvatar, size, className, ...props }) {
+  const s = avatar({ size });
+  const [failed, setFailed] = React.useState(null);
+  const backup = fallbackSrc ?? (defaultAvatar ? defaultAvatarUrl(defaultAvatar, { size: size === "xl" || size === "lg" ? 512 : 256 }) : void 0);
+  const shown = src && failed !== src ? src : backup;
+  return /* @__PURE__ */ jsxs(AvatarPrimitive.Root, { "data-size": size ?? "md", className: s.root({ className }), ...props, children: [
+    shown && /* @__PURE__ */ jsx(
+      AvatarPrimitive.Image,
+      {
+        src: shown,
+        alt,
+        className: s.image(),
+        onLoadingStatusChange: (status) => {
+          if (status === "error" && shown === src) setFailed(src);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { delayMs: shown ? 300 : 0, className: s.fallback(), children: fallback })
+  ] });
+}
+function AvatarGroup({ max, size, className, children, ...props }) {
+  const items = React.Children.toArray(children);
+  const shown = max === void 0 ? items : items.slice(0, max);
+  const rest = items.length - shown.length;
+  return /* @__PURE__ */ jsxs("div", { className: avatar().group({ className }), ...props, children: [
+    shown,
+    rest > 0 && /* @__PURE__ */ jsx(AvatarRoot, { size, fallback: `+${rest}` })
+  ] });
+}
+var Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });
+
+export {
+  defaultAvatarUrl,
+  Avatar
+};
+//# sourceMappingURL=chunk-3RVFD3UX.js.map

package/dist/chunk-3RVFD3UX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/avatar/default-avatar.ts","../src/avatar/avatar.tsx"],"sourcesContent":["// The default profile pictures of the Krizaka family: what a product shows when a person has no photo.\n// They are generated from this file (tools/export-brand.mjs renders them to SVG and WebP and uploads them to Bunny,\n// `people/defaults/v1/<brand>/…`), so the pictures and the URLs that name them cannot drift apart.\n\nexport type DefaultAvatarBrand = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\";\n/** `person`: a neutral silhouette. `plain`: the brand's gradient alone, ready for initials. */\nexport type DefaultAvatarKind = \"person\" | \"plain\";\nexport type DefaultAvatarSize = 256 | 512;\n\nexport const DEFAULT_AVATAR_BRANDS: readonly DefaultAvatarBrand[] = [\"krizaka\", \"orazaka\", \"orochia\", \"yasakia\", \"yororis\", \"yomizaka\", \"kachizaka\", \"akinaza\"];\nexport const DEFAULT_AVATAR_KINDS: readonly DefaultAvatarKind[] = [\"person\", \"plain\"];\nexport const DEFAULT_AVATAR_SIZES: readonly DefaultAvatarSize[] = [256, 512];\n/** How many tones each brand has: a person always gets the same one from their seed, so a list is not one colour. */\nexport const DEFAULT_AVATAR_TONES = 6;\n\n/** Where the set lives. `v1` is the set's version: a changed picture is a new version folder, never an overwrite. */\nexport const DEFAULT_AVATAR_BASE = \"https://krizaka-assets.b-cdn.net/people/defaults/v1\";\n\nexport interface DefaultAvatar {\n  /** The brand of the product showing the avatar: its gradient, its hues. */\n  brand: DefaultAvatarBrand;\n  /** Any stable text or number of the person (their id): the same seed gives the same tone everywhere. */\n  seed?: string | number;\n  /** Force a tone, 1 to 6, instead of deriving it from `seed`. */\n  tone?: number;\n  /**\n   * `person` (default): a silhouette. `plain`: the gradient alone.\n   * @default \"person\"\n   */\n  kind?: DefaultAvatarKind;\n}\n\n/** The mark gradient of each brand (BRAND.md, `$extensions[\"com.krizaka\"].mark`) as [hue, saturation %, lightness %] and the hue spread of its tones. */\nconst BRANDS: Record<DefaultAvatarBrand, { from: [number, number, number]; to: [number, number, number]; spread: number }> = {\n  krizaka: { from: [217, 92, 53], to: [217, 92, 68], spread: 14 },\n  orazaka: { from: [26, 90.5, 37.1], to: [26, 92, 45], spread: 7 },\n  orochia: { from: [262.1, 83.3, 57.8], to: [328.6, 85.5, 70.2], spread: 12 },\n  yasakia: { from: [156, 92, 32], to: [178, 90, 32], spread: 12 },\n  yororis: { from: [34, 46, 44], to: [104, 28, 42], spread: 10 },\n  yomizaka: { from: [232, 50, 55], to: [248, 50, 58], spread: 10 },\n  kachizaka: { from: [226, 80, 56], to: [44, 92, 33], spread: 10 },\n  akinaza: { from: [140, 48, 34], to: [22, 60, 46], spread: 10 },\n};\n\n/** White on top of a stop must stay visible: a stop is darkened until the contrast reaches this (WCAG 1.4.11, non-text). */\nconst MIN_CONTRAST = 3.2;\nconst OFFSETS = [0, -1, 1, -2, 2, 3] as const;\n\nfunction hslToHex([h, s, l]: [number, number, number]): string {\n  const sat = s / 100;\n  const light = l / 100;\n  const k = (n: number) => (n + (((h % 360) + 360) % 360) / 30) % 12;\n  const a = sat * Math.min(light, 1 - light);\n  const channel = (n: number) => Math.round(255 * (light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));\n  return `#${[0, 8, 4].map((n) => channel(n).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nconst channelLuminance = (v: number) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);\nconst whiteContrast = (hex: string) => {\n  const [r, g, b] = [1, 3, 5].map((i) => channelLuminance(Number.parseInt(hex.slice(i, i + 2), 16) / 255));\n  return 1.05 / (0.2126 * r! + 0.7152 * g! + 0.0722 * b! + 0.05);\n};\n/** The stop, darkened one point of lightness at a time until white reads on it. */\nfunction readable([h, s, l]: [number, number, number]): string {\n  let hex = hslToHex([h, s, l]);\n  for (let light = l; whiteContrast(hex) < MIN_CONTRAST && light > 10; light -= 1) hex = hslToHex([h, s, light]);\n  return hex;\n}\n\n/** The two stops (hex) of tone `tone` (1 to 6) of a brand. */\nexport function defaultAvatarTone(brand: DefaultAvatarBrand, tone: number): readonly [string, string] {\n  const b = BRANDS[brand];\n  const o = OFFSETS[(clampTone(tone) - 1) % OFFSETS.length] * b.spread;\n  return [readable([b.from[0] + o, b.from[1], b.from[2]]), readable([b.to[0] + o, b.to[1], b.to[2]])];\n}\n\nconst clampTone = (tone: number) => Math.min(DEFAULT_AVATAR_TONES, Math.max(1, Math.round(tone)));\n\n/** 1 to 6 from a seed (FNV-1a): stable across renders, devices and products. */\nexport function defaultAvatarToneOf(seed: string | number | undefined): number {\n  if (seed === undefined) return 1;\n  let h = 0x811c9dc5;\n  for (const ch of String(seed)) {\n    h ^= ch.codePointAt(0) ?? 0;\n    h = Math.imul(h, 0x01000193) >>> 0;\n  }\n  return (h % DEFAULT_AVATAR_TONES) + 1;\n}\n\nconst resolveTone = (a: DefaultAvatar) => (a.tone === undefined ? defaultAvatarToneOf(a.seed) : clampTone(a.tone));\n\n/** The file name of a picture in the set: `person-3` + 256 → `person-3-256.webp`; `svg` has no size. */\nexport function defaultAvatarFile(kind: DefaultAvatarKind, tone: number, size: DefaultAvatarSize | \"svg\"): string {\n  return size === \"svg\" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;\n}\n\n/** Linear on purpose: a `/\\/+$/` regex backtracks quadratically on a long run of slashes. */\nfunction trimTrailingSlashes(value: string): string {\n  let end = value.length;\n  while (end > 0 && value.charCodeAt(end - 1) === 47) end--;\n  return value.slice(0, end);\n}\n\n/**\n * The URL of a default avatar: `defaultAvatarUrl({ brand: \"orochia\", seed: user.id })`.\n * @param size 256 for lists, 512 for a profile; `\"svg\"` for the vector.\n * @param base Another host or version of the set (a self-hosted copy); the default is the Krizaka CDN.\n */\nexport function defaultAvatarUrl(avatar: DefaultAvatar, { size = 256, base = DEFAULT_AVATAR_BASE }: { size?: DefaultAvatarSize | \"svg\"; base?: string } = {}): string {\n  return `${trimTrailingSlashes(base)}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? \"person\", resolveTone(avatar), size)}`;\n}\n\n/** The SVG source of a default avatar, 512 × 512 and square (the Avatar clips it round). */\nexport function defaultAvatarSvg(avatar: DefaultAvatar): string {\n  const [from, to] = defaultAvatarTone(avatar.brand, resolveTone(avatar));\n  const person =\n    (avatar.kind ?? \"person\") === \"person\"\n      ? `<circle cx=\"256\" cy=\"200\" r=\"86\" fill=\"#fff\" fill-opacity=\".92\"/><path d=\"M84 512c0-108 78-182 172-182s172 74 172 182z\" fill=\"#fff\" fill-opacity=\".92\"/>`\n      : \"\";\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/></linearGradient><radialGradient id=\"l\" cx=\".28\" cy=\".18\" r=\".85\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".24\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient></defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"/><rect width=\"512\" height=\"512\" fill=\"url(#l)\"/>${person}</svg>`;\n}\n","// Client: Radix tracks the image's loading state and shows the fallback until it has loaded (or when it fails).\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { type DefaultAvatar, defaultAvatarUrl } from \"./default-avatar\";\n\nconst avatar = tv({\n  slots: {\n    root: \"relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary\",\n    group: \"flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0\",\n  },\n  variants: {\n    size: {\n      xs: { root: \"h-5 w-5 text-[9px]\" },\n      sm: { root: \"h-8 w-8 text-xs\" },\n      md: { root: \"h-10 w-10 text-sm\" },\n      lg: { root: \"h-14 w-14 text-base\" },\n      xl: { root: \"h-20 w-20 text-lg\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type AvatarSize = NonNullable<VariantProps<typeof avatar>[\"size\"]>;\n\nexport type AvatarProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */\n  alt?: string;\n  /** Shown while the image loads, when it fails or when there is none: initials, an icon. */\n  fallback?: React.ReactNode;\n  /** The picture to show instead when `src` is missing or fails to load (an image URL). The `fallback` still covers its own loading. */\n  fallbackSrc?: string;\n  /**\n   * The Krizaka default picture when the person has no photo (or it fails): their brand's gradient and a silhouette,\n   * one of six tones from `seed` — `defaultAvatar={{ brand: \"orochia\", seed: user.id }}`. `fallbackSrc` wins over it.\n   */\n  defaultAvatar?: DefaultAvatar;\n  /**\n   * xs · sm · md · lg · xl.\n   * @default \"md\"\n   */\n  size?: AvatarSize;\n};\n\nexport function AvatarRoot({ src, alt = \"\", fallback, fallbackSrc, defaultAvatar, size, className, ...props }: AvatarProps) {\n  const s = avatar({ size });\n  const [failed, setFailed] = React.useState<string | null>(null);\n  // 512 px for the big sizes, 256 for the others: sharp on a 2x screen either way.\n  const backup = fallbackSrc ?? (defaultAvatar ? defaultAvatarUrl(defaultAvatar, { size: size === \"xl\" || size === \"lg\" ? 512 : 256 }) : undefined);\n  const shown = src && failed !== src ? src : backup;\n  return (\n    <AvatarPrimitive.Root data-size={size ?? \"md\"} className={s.root({ className })} {...props}>\n      {shown && (\n        <AvatarPrimitive.Image\n          src={shown}\n          alt={alt}\n          className={s.image()}\n          onLoadingStatusChange={(status) => {\n            if (status === \"error\" && shown === src) setFailed(src);\n          }}\n        />\n      )}\n      <AvatarPrimitive.Fallback delayMs={shown ? 300 : 0} className={s.fallback()}>\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n}\n\nexport type AvatarGroupProps = React.ComponentProps<\"div\"> & {\n  /** How many avatars are shown; the rest becomes a `+n` avatar. */\n  max?: number;\n  /** The size of the `+n` avatar (match the avatars of the group). */\n  size?: AvatarSize;\n};\n\n/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */\nexport function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const shown = max === undefined ? items : items.slice(0, max);\n  const rest = items.length - shown.length;\n  return (\n    <div className={avatar().group({ className })} {...props}>\n      {shown}\n      {rest > 0 && <AvatarRoot size={size} fallback={`+${rest}`} />}\n    </div>\n  );\n}\n\n/** `Avatar` (an image with a fallback) and `Avatar.Group`. */\nexport const Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });\n"],"mappings":"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","names":["avatar"]}

package/dist/chunk-S6NYGOJT.js

@@ -0,0 +1,22 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { cnMerge } from "tailwind-variants";
+var twMergeConfig = {
+  extend: {
+    classGroups: {
+      "bg-image": ["bg-sheen", "bg-fill-shade", "bg-halo"],
+      shadow: ["shadow-raised", "shadow-floating", "shadow-overlay", "shadow-glow", "shadow-glow-lg"],
+      "inset-shadow": ["inset-shadow-edge", "inset-shadow-edge-fill", "inset-shadow-well"]
+    }
+  }
+};
+var mergeConfig = { twMergeConfig };
+function cn(...inputs) {
+  return cnMerge(clsx(inputs))(mergeConfig) ?? "";
+}
+
+export {
+  twMergeConfig,
+  cn
+};
+//# sourceMappingURL=chunk-S6NYGOJT.js.map

package/dist/chunk-S6NYGOJT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnMerge, type TWMergeConfig } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * The preset's own utilities, told to the merge engine: the material (BRAND.md §6: `bg-sheen`, `bg-fill-shade`,\n * `bg-halo` are background images; `shadow-raised` · `-floating` · `-overlay` · `-glow` are shadows; `inset-shadow-edge`\n * · `-edge-fill` · `-well` are inset shadows). Unknown, tailwind-merge would take `bg-sheen` for a colour and drop the\n * `bg-surface-2` it lies on.\n */\nexport const twMergeConfig: TWMergeConfig = {\n  extend: {\n    classGroups: {\n      \"bg-image\": [\"bg-sheen\", \"bg-fill-shade\", \"bg-halo\"],\n      shadow: [\"shadow-raised\", \"shadow-floating\", \"shadow-overlay\", \"shadow-glow\", \"shadow-glow-lg\"],\n      \"inset-shadow\": [\"inset-shadow-edge\", \"inset-shadow-edge-fill\", \"inset-shadow-well\"],\n    },\n  },\n};\n\nconst mergeConfig = { twMergeConfig };\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 cnMerge(clsx(inputs))(mergeConfig) ?? \"\";\n}\n\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAmC;AAUrC,IAAM,gBAA+B;AAAA,EAC1C,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,YAAY,CAAC,YAAY,iBAAiB,SAAS;AAAA,MACnD,QAAQ,CAAC,iBAAiB,mBAAmB,kBAAkB,eAAe,gBAAgB;AAAA,MAC9F,gBAAgB,CAAC,qBAAqB,0BAA0B,mBAAmB;AAAA,IACrF;AAAA,EACF;AACF;AAEA,IAAM,cAAc,EAAE,cAAc;AAS7B,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC,EAAE,WAAW,KAAK;AAC/C;","names":[]}

package/dist/docs-layout.js

@@ -1,29 +1,10 @@
+import {
+  ChevronGlyph
+} from "./chunk-3D2YI63L.js";
+
 // src/docs-layout/docs-layout.tsx
 import { tv } from "tailwind-variants";
-
-// 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 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] }) });
-
-// src/docs-layout/docs-layout.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var docsLayout = tv({
   slots: {
     root: "mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]",
@@ -37,20 +18,20 @@ var docsLayout = tv({
 });
 var s = docsLayout();
 function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), ...props, children: [
-    /* @__PURE__ */ jsx2("div", { className: s.sidebar(), children: sidebar }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-6", children: [
-      /* @__PURE__ */ jsxs2("details", { className: s.mobileNav(), children: [
-        /* @__PURE__ */ jsxs2("summary", { className: s.mobileSummary(), children: [
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: s.sidebar(), children: sidebar }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs("details", { className: s.mobileNav(), children: [
+        /* @__PURE__ */ jsxs("summary", { className: s.mobileSummary(), children: [
           sidebarLabel,
           " ",
-          /* @__PURE__ */ jsx2(ChevronGlyph, { className: "h-4 w-4 transition-transform motion-reduce:transition-none" })
+          /* @__PURE__ */ jsx(ChevronGlyph, { className: "h-4 w-4 transition-transform motion-reduce:transition-none" })
         ] }),
-        /* @__PURE__ */ jsx2("div", { className: s.mobileBody(), children: sidebar })
+        /* @__PURE__ */ jsx("div", { className: s.mobileBody(), children: sidebar })
       ] }),
-      /* @__PURE__ */ jsx2("article", { className: s.article(), children })
+      /* @__PURE__ */ jsx("article", { className: s.article(), children })
     ] }),
-    toc && /* @__PURE__ */ jsx2("div", { className: s.toc(), children: toc })
+    toc && /* @__PURE__ */ jsx("div", { className: s.toc(), children: toc })
   ] });
 }
 export {

package/dist/docs-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs-layout/docs-layout.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe. A documentation page in the site's frame (--kz-page-max-docs): the sidebar of pages, the article, the\n// table of contents — the three columns of the frame on a wide screen, the sidebar folded into a disclosure above the\n// article on a phone, the contents under the title as chips (a `Toc`). Its edges are the bar's: no column runs to the\n// window's edge.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const docsLayout = tv({\n  slots: {\n    root:\n      \"mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) \" +\n      \"pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]\",\n    sidebar: \"hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto\",\n    mobileNav: \"rounded-xl border border-border-default bg-surface-1 lg:hidden\",\n    mobileSummary:\n      \"flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden \" +\n      \"rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180\",\n    mobileBody: \"border-t border-border-subtle px-2 py-2\",\n    article: \"min-w-0 max-w-3xl\",\n    toc: \"hidden xl:block xl:sticky xl:top-24 xl:self-start\",\n  },\n});\nconst s = docsLayout();\n\nexport type DocsLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The pages of the documentation (a nav of links, grouped). */\n  sidebar: React.ReactNode;\n  /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */\n  sidebarLabel: string;\n  /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */\n  toc?: React.ReactNode;\n  /** The article: its title, its body. */\n  children: React.ReactNode;\n};\n\n/** A documentation page: pages · article · contents, in the site's frame. */\nexport function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.sidebar()}>{sidebar}</div>\n      <div className=\"flex min-w-0 flex-col gap-6\">\n        <details className={s.mobileNav()}>\n          <summary className={s.mobileSummary()}>\n            {sidebarLabel} <ChevronGlyph className=\"h-4 w-4 transition-transform motion-reduce:transition-none\" />\n          </summary>\n          <div className={s.mobileBody()}>{sidebar}</div>\n        </details>\n        <article className={s.article()}>{children}</article>\n      </div>\n      {toc && <div className={s.toc()}>{toc}</div>}\n    </div>\n  );\n}\n","// 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":";AAKA,SAAS,UAAU;;;ACIf,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;AA+CO,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;;;ADhCI,gBAAAA,MAGI,QAAAC,aAHJ;AAhCC,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MACE;AAAA,IAEF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eACE;AAAA,IAEF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAcd,SAAS,WAAW,EAAE,SAAS,cAAc,KAAK,WAAW,UAAU,GAAG,MAAM,GAAoB;AACzG,SACE,gBAAAA,MAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAD,KAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IACtC,gBAAAC,MAAC,SAAI,WAAU,+BACb;AAAA,sBAAAA,MAAC,aAAQ,WAAW,EAAE,UAAU,GAC9B;AAAA,wBAAAA,MAAC,aAAQ,WAAW,EAAE,cAAc,GACjC;AAAA;AAAA,UAAa;AAAA,UAAC,gBAAAD,KAAC,gBAAa,WAAU,8DAA6D;AAAA,WACtG;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAW,EAAE,WAAW,GAAI,mBAAQ;AAAA,SAC3C;AAAA,MACA,gBAAAA,KAAC,aAAQ,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OAC7C;AAAA,IACC,OAAO,gBAAAA,KAAC,SAAI,WAAW,EAAE,IAAI,GAAI,eAAI;AAAA,KACxC;AAEJ;","names":["jsx","jsxs"]}
+{"version":3,"sources":["../src/docs-layout/docs-layout.tsx"],"sourcesContent":["// Server-safe. A documentation page in the site's frame (--kz-page-max-docs): the sidebar of pages, the article, the\n// table of contents — the three columns of the frame on a wide screen, the sidebar folded into a disclosure above the\n// article on a phone, the contents under the title as chips (a `Toc`). Its edges are the bar's: no column runs to the\n// window's edge.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const docsLayout = tv({\n  slots: {\n    root:\n      \"mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) \" +\n      \"pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]\",\n    sidebar: \"hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto\",\n    mobileNav: \"rounded-xl border border-border-default bg-surface-1 lg:hidden\",\n    mobileSummary:\n      \"flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden \" +\n      \"rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180\",\n    mobileBody: \"border-t border-border-subtle px-2 py-2\",\n    article: \"min-w-0 max-w-3xl\",\n    toc: \"hidden xl:block xl:sticky xl:top-24 xl:self-start\",\n  },\n});\nconst s = docsLayout();\n\nexport type DocsLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The pages of the documentation (a nav of links, grouped). */\n  sidebar: React.ReactNode;\n  /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */\n  sidebarLabel: string;\n  /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */\n  toc?: React.ReactNode;\n  /** The article: its title, its body. */\n  children: React.ReactNode;\n};\n\n/** A documentation page: pages · article · contents, in the site's frame. */\nexport function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.sidebar()}>{sidebar}</div>\n      <div className=\"flex min-w-0 flex-col gap-6\">\n        <details className={s.mobileNav()}>\n          <summary className={s.mobileSummary()}>\n            {sidebarLabel} <ChevronGlyph className=\"h-4 w-4 transition-transform motion-reduce:transition-none\" />\n          </summary>\n          <div className={s.mobileBody()}>{sidebar}</div>\n        </details>\n        <article className={s.article()}>{children}</article>\n      </div>\n      {toc && <div className={s.toc()}>{toc}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAS,UAAU;AAoCb,cAGI,YAHJ;AAhCC,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MACE;AAAA,IAEF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eACE;AAAA,IAEF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAcd,SAAS,WAAW,EAAE,SAAS,cAAc,KAAK,WAAW,UAAU,GAAG,MAAM,GAAoB;AACzG,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,wBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IACtC,qBAAC,SAAI,WAAU,+BACb;AAAA,2BAAC,aAAQ,WAAW,EAAE,UAAU,GAC9B;AAAA,6BAAC,aAAQ,WAAW,EAAE,cAAc,GACjC;AAAA;AAAA,UAAa;AAAA,UAAC,oBAAC,gBAAa,WAAU,8DAA6D;AAAA,WACtG;AAAA,QACA,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,mBAAQ;AAAA,SAC3C;AAAA,MACA,oBAAC,aAAQ,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OAC7C;AAAA,IACC,OAAO,oBAAC,SAAI,WAAW,EAAE,IAAI,GAAI,eAAI;AAAA,KACxC;AAEJ;","names":[]}

package/dist/docs-nav.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-KH3JOEPY.js";
+} from "./chunk-S6NYGOJT.js";
 
 // src/docs-nav/docs-nav.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/drop-overlay.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/** True while the drag carries files (not text or a link): the only drag that should raise the overlay. */
+declare function dragHasFiles(transfer: {
+    types?: readonly string[] | DOMStringList;
+} | null | undefined): boolean;
+/** One accepted kind: a MIME type (`application/pdf`), a family (`image/*`) or an extension (`.pdf`). */
+type AcceptRule = string;
+interface DropSplit<F> {
+    accepted: F[];
+    rejected: F[];
+}
+/** Splits dropped files by `accept` (no rule: everything is accepted). */
+declare function splitDropped<F extends Pick<File, "name" | "type">>(files: readonly F[], accept?: readonly AcceptRule[]): DropSplit<F>;
+
+type DropOverlayProps = Omit<React.ComponentProps<"div">, "children" | "onDrop"> & {
+    /** What the overlay says (“Drop to check”) — passed translated. */
+    label: string;
+    /** One line under it (“PDF or text”). */
+    hint?: string;
+    /** The files dropped: the accepted ones, then the ones `accept` refused. */
+    onFiles: (accepted: File[], rejected: File[]) => void;
+    /** What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`). */
+    accept?: readonly AcceptRule[];
+    /** Turns the window back into a plain page (while a modal is open, signed out). */
+    disabled?: boolean;
+};
+/** Drag a file anywhere on the page: a full-window overlay accepts it. */
+declare function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }: DropOverlayProps): React.JSX.Element | null;
+
+export { type AcceptRule, DropOverlay, type DropOverlayProps, type DropSplit, dragHasFiles, splitDropped };