@krizaka/ui 3.24.0 → 3.26.0

package/dist/cover-hero.d.ts

@@ -0,0 +1,125 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+
+declare const coverHero: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            lead?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            veil?: tailwind_variants.ClassValue;
+            plain?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            facts?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            lead?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            veil?: tailwind_variants.ClassValue;
+            plain?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            facts?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    media: string;
+    veil: string;
+    plain: string;
+    body: string;
+    back: string;
+    eyebrow: string;
+    title: string;
+    lead: string;
+    facts: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            lead?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            veil?: tailwind_variants.ClassValue;
+            plain?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            facts?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    media: string;
+    veil: string;
+    plain: string;
+    body: string;
+    back: string;
+    eyebrow: string;
+    title: string;
+    lead: string;
+    facts: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    media: string;
+    veil: string;
+    plain: string;
+    body: string;
+    back: string;
+    eyebrow: string;
+    title: string;
+    lead: string;
+    facts: string;
+    actions: string;
+}>>;
+type CoverMedia = {
+    /** The still: the photo, or the poster of the loop (shown first, and alone under reduced motion). */
+    src: string;
+    /** What it shows, in words; empty when it only decorates. */
+    alt?: string;
+    /** A muted loop over the still: WebM first, MP4 for Safari. */
+    video?: {
+        webm?: string;
+        mp4?: string;
+    };
+};
+type CoverHeroProps = Omit<React.ComponentProps<"header">, "title"> & {
+    /** The cover. Without it the hero wears the brand's colours. */
+    cover?: CoverMedia;
+    /** A short mono line above the name (where the shop is: `Saint-Henri · Montréal`). */
+    eyebrow?: React.ReactNode;
+    /** The name: the page's `h1`. */
+    title: React.ReactNode;
+    /** One line: what it promises. */
+    lead?: React.ReactNode;
+    /** Chips under the lead: open now, the neighbourhood, a rating — only what is true. */
+    facts?: React.ReactNode;
+    /** The main action (`ButtonLink`). */
+    actions?: React.ReactNode;
+    /** The way back, above the eyebrow. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** The app's link component for the back link. */
+    linkAs?: LinkComponent;
+};
+/** A shop's first screen: the cover, the name, the promise, the facts and the main action. */
+declare function CoverHero({ cover, eyebrow, title, lead, facts, actions, back, linkAs, className, ...props }: CoverHeroProps): React.JSX.Element;
+
+export { CoverHero, type CoverHeroProps, type CoverMedia, coverHero };

package/dist/cover-hero.js

@@ -0,0 +1,82 @@
+"use client";
+import {
+  ArrowGlyph
+} from "./chunk-P7GZR5CU.js";
+import {
+  cn
+} from "./chunk-WU4VLSEA.js";
+import {
+  BlockLink
+} from "./chunk-C7LTF5CC.js";
+
+// src/cover-hero/cover-hero.tsx
+import * as React2 from "react";
+import { tv } from "tailwind-variants";
+
+// src/page/page.tsx
+import * as React from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function Page({ size = "default", as: Tag = "div", className, ...props }) {
+  return /* @__PURE__ */ jsx(Tag, { "data-size": size === "default" ? void 0 : size, className: cn("kz-frame", className), ...props });
+}
+
+// src/cover-hero/cover-hero.tsx
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var coverHero = tv({
+  slots: {
+    root: "relative isolate flex min-h-[26rem] items-end overflow-hidden bg-surface-1 text-fg data-[cover]:text-fg-on-media sm:min-h-[30rem] lg:min-h-[34rem]",
+    media: "absolute inset-0 -z-20 h-full w-full object-cover",
+    veil: "absolute inset-0 -z-10 bg-linear-to-t from-scrim-strong via-scrim/55 to-scrim/10",
+    plain: "absolute inset-0 -z-10 bg-linear-to-br from-accent/25 via-surface-1 to-accent-2/20",
+    body: "flex flex-col gap-4 pb-8 pt-24 sm:pb-12",
+    back: "inline-flex w-fit items-center gap-1.5 text-sm font-semibold text-current no-underline opacity-90 hover:opacity-100",
+    eyebrow: "m-0 font-mono text-xs font-semibold uppercase tracking-widest opacity-90",
+    title: "m-0 max-w-3xl font-display text-4xl font-black leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl",
+    lead: "m-0 max-w-2xl text-base leading-relaxed opacity-95 sm:text-lg",
+    facts: "flex flex-wrap items-center gap-2",
+    actions: "flex flex-wrap items-center gap-3 pt-1"
+  }
+});
+var s = coverHero();
+function usePlayLoop(enabled) {
+  const [play, setPlay] = React2.useState(false);
+  React2.useEffect(() => {
+    if (!enabled) return;
+    const q = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setPlay(!q.matches);
+    sync();
+    q.addEventListener("change", sync);
+    return () => q.removeEventListener("change", sync);
+  }, [enabled]);
+  return play;
+}
+function CoverHero({ cover, eyebrow, title, lead, facts, actions, back, linkAs, className, ...props }) {
+  const play = usePlayLoop(Boolean(cover?.video));
+  return /* @__PURE__ */ jsxs2("header", { "data-cover": cover ? "" : void 0, className: s.root({ className }), ...props, children: [
+    cover ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsx2("img", { src: cover.src, alt: cover.alt ?? "", className: s.media(), fetchPriority: "high", decoding: "async" }),
+      play && cover.video && /* @__PURE__ */ jsxs2("video", { className: s.media(), poster: cover.src, autoPlay: true, muted: true, loop: true, playsInline: true, preload: "metadata", "aria-hidden": true, tabIndex: -1, children: [
+        cover.video.webm && /* @__PURE__ */ jsx2("source", { src: cover.video.webm, type: "video/webm" }),
+        cover.video.mp4 && /* @__PURE__ */ jsx2("source", { src: cover.video.mp4, type: "video/mp4" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.veil() })
+    ] }) : /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.plain() }),
+    /* @__PURE__ */ jsx2(Page, { children: /* @__PURE__ */ jsxs2("div", { className: s.body(), children: [
+      back && /* @__PURE__ */ jsxs2(BlockLink, { href: back.href, linkAs, className: s.back(), children: [
+        /* @__PURE__ */ jsx2(ArrowGlyph, { direction: "left", className: "h-3.5 w-3.5" }),
+        " ",
+        back.label
+      ] }),
+      eyebrow && /* @__PURE__ */ jsx2("p", { className: s.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsx2("h1", { className: s.title(), children: title }),
+      lead && /* @__PURE__ */ jsx2("p", { className: s.lead(), children: lead }),
+      facts && /* @__PURE__ */ jsx2("div", { className: s.facts(), children: facts }),
+      actions && /* @__PURE__ */ jsx2("div", { className: s.actions(), children: actions })
+    ] }) })
+  ] });
+}
+export {
+  CoverHero,
+  coverHero
+};
+//# sourceMappingURL=cover-hero.js.map

package/dist/cover-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cover-hero/cover-hero.tsx","../src/page/page.tsx"],"sourcesContent":["// Client (the reader's motion preference). The first screen of a shop or a place: its cover — a photo, or a muted loop that\n// stays a still under reduced motion — behind the name, a one-line promise, a few facts and the main action. The words sit\n// on a veil that reads in both themes; without a cover the brand's colours take its place.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { ArrowGlyph } from \"../glyphs\";\nimport { Page } from \"../page/page\";\n\nexport const coverHero = tv({\n  slots: {\n    root: \"relative isolate flex min-h-[26rem] items-end overflow-hidden bg-surface-1 text-fg data-[cover]:text-fg-on-media sm:min-h-[30rem] lg:min-h-[34rem]\",\n    media: \"absolute inset-0 -z-20 h-full w-full object-cover\",\n    veil: \"absolute inset-0 -z-10 bg-linear-to-t from-scrim-strong via-scrim/55 to-scrim/10\",\n    plain: \"absolute inset-0 -z-10 bg-linear-to-br from-accent/25 via-surface-1 to-accent-2/20\",\n    body: \"flex flex-col gap-4 pb-8 pt-24 sm:pb-12\",\n    back: \"inline-flex w-fit items-center gap-1.5 text-sm font-semibold text-current no-underline opacity-90 hover:opacity-100\",\n    eyebrow: \"m-0 font-mono text-xs font-semibold uppercase tracking-widest opacity-90\",\n    title: \"m-0 max-w-3xl font-display text-4xl font-black leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl\",\n    lead: \"m-0 max-w-2xl text-base leading-relaxed opacity-95 sm:text-lg\",\n    facts: \"flex flex-wrap items-center gap-2\",\n    actions: \"flex flex-wrap items-center gap-3 pt-1\",\n  },\n});\nconst s = coverHero();\n\nexport type CoverMedia = {\n  /** The still: the photo, or the poster of the loop (shown first, and alone under reduced motion). */\n  src: string;\n  /** What it shows, in words; empty when it only decorates. */\n  alt?: string;\n  /** A muted loop over the still: WebM first, MP4 for Safari. */\n  video?: { webm?: string; mp4?: string };\n};\n\nexport type CoverHeroProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The cover. Without it the hero wears the brand's colours. */\n  cover?: CoverMedia;\n  /** A short mono line above the name (where the shop is: `Saint-Henri · Montréal`). */\n  eyebrow?: React.ReactNode;\n  /** The name: the page's `h1`. */\n  title: React.ReactNode;\n  /** One line: what it promises. */\n  lead?: React.ReactNode;\n  /** Chips under the lead: open now, the neighbourhood, a rating — only what is true. */\n  facts?: React.ReactNode;\n  /** The main action (`ButtonLink`). */\n  actions?: React.ReactNode;\n  /** The way back, above the eyebrow. */\n  back?: { href: string; label: string };\n  /** The app's link component for the back link. */\n  linkAs?: LinkComponent;\n};\n\nfunction usePlayLoop(enabled: boolean) {\n  const [play, setPlay] = React.useState(false);\n  React.useEffect(() => {\n    if (!enabled) return;\n    const q = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const sync = () => setPlay(!q.matches);\n    sync();\n    q.addEventListener(\"change\", sync);\n    return () => q.removeEventListener(\"change\", sync);\n  }, [enabled]);\n  return play;\n}\n\n/** A shop's first screen: the cover, the name, the promise, the facts and the main action. */\nexport function CoverHero({ cover, eyebrow, title, lead, facts, actions, back, linkAs, className, ...props }: CoverHeroProps) {\n  const play = usePlayLoop(Boolean(cover?.video));\n  return (\n    <header data-cover={cover ? \"\" : undefined} className={s.root({ className })} {...props}>\n      {cover ? (\n        <>\n          <img src={cover.src} alt={cover.alt ?? \"\"} className={s.media()} fetchPriority=\"high\" decoding=\"async\" />\n          {play && cover.video && (\n            <video className={s.media()} poster={cover.src} autoPlay muted loop playsInline preload=\"metadata\" aria-hidden tabIndex={-1}>\n              {cover.video.webm && <source src={cover.video.webm} type=\"video/webm\" />}\n              {cover.video.mp4 && <source src={cover.video.mp4} type=\"video/mp4\" />}\n            </video>\n          )}\n          <div aria-hidden className={s.veil()} />\n        </>\n      ) : (\n        <div aria-hidden className={s.plain()} />\n      )}\n      <Page>\n        <div className={s.body()}>\n          {back && (\n            <BlockLink href={back.href} linkAs={linkAs} className={s.back()}>\n              <ArrowGlyph direction=\"left\" className=\"h-3.5 w-3.5\" /> {back.label}\n            </BlockLink>\n          )}\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <h1 className={s.title()}>{title}</h1>\n          {lead && <p className={s.lead()}>{lead}</p>}\n          {facts && <div className={s.facts()}>{facts}</div>}\n          {actions && <div className={s.actions()}>{actions}</div>}\n        </div>\n      </Page>\n    </header>\n  );\n}\n","// Server-safe. The frame of every page (blocks.css): one width, one pair of gutters, one vertical rhythm — so the\n// navigation, the hero and every section line up on the same edges, at any width.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { SectionBackdrop, type SectionBackdropProps } from \"../section-backdrop/section-backdrop\";\n\nexport type PageSize = \"narrow\" | \"default\" | \"wide\" | \"full\";\n\nexport type PageProps = React.HTMLAttributes<HTMLElement> & {\n  /**\n   * The width of the content: `default` (72rem, `--kz-page-max`), `narrow` (48rem, a reading column), `wide`\n   * (88rem, documentation with a sidebar), `full` (the gutters only).\n   * @default \"default\"\n   */\n  size?: PageSize;\n  /** The element: `div` (default), `main`, `header`, `footer`, `section` or `article`. */\n  as?: \"div\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"article\";\n};\n\n/** The page frame: centred, at most `--kz-page-max` wide, with the gutters of `--kz-page-gutter` (16 → 32 px). */\nexport function Page({ size = \"default\", as: Tag = \"div\", className, ...props }: PageProps) {\n  return <Tag data-size={size === \"default\" ? undefined : size} className={cn(\"kz-frame\", className)} {...props} />;\n}\n\nexport type SectionHeadingProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** The id of the title: the section's anchor and its accessible name. */\n  id?: string;\n  /** A short mono line above the title (the section's subject). */\n  eyebrow?: React.ReactNode;\n  /** The title. */\n  title: React.ReactNode;\n  /** One or two sentences under the title. */\n  lead?: React.ReactNode;\n  /** Actions on the right of the heading (a link to everything, a filter). */\n  actions?: React.ReactNode;\n  /**\n   * The level of the title.\n   * @default 2\n   */\n  level?: 2 | 3;\n  /**\n   * `md` for a section that argues, `sm` for a section of a reading page.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * `center` for a heading that stands alone above a grid.\n   * @default \"start\"\n   */\n  align?: \"start\" | \"center\";\n  /** Rises into place once, as it enters the viewport (`[data-reveal]`, MotionObserver). Never on the first screen. */\n  reveal?: boolean;\n};\n\n/** The head of a section: eyebrow (mono, the accent), title, lead — and its actions on the right. */\nexport function SectionHeading({ id, eyebrow, title, lead, actions, level = 2, size = \"md\", align = \"start\", reveal, className, ...props }: SectionHeadingProps) {\n  const H = level === 2 ? \"h2\" : \"h3\";\n  return (\n    <div\n      className={cn(\"kz-heading\", className)}\n      data-size={size === \"md\" ? undefined : size}\n      data-align={align === \"start\" ? undefined : align}\n      data-actions={actions ? \"\" : undefined}\n      data-reveal={reveal ? \"\" : undefined}\n      {...props}\n    >\n      {eyebrow && <p className=\"kz-eyebrow\">{eyebrow}</p>}\n      <H id={id} className=\"kz-heading-title\">\n        {title}\n      </H>\n      {lead && <p className=\"kz-heading-lead\">{lead}</p>}\n      {actions && <div className=\"kz-heading-actions\">{actions}</div>}\n    </div>\n  );\n}\n\nexport type SectionProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The id of the title (and the anchor of the section). Required with a `title`. */\n  id?: string;\n  /** The heading's eyebrow. */\n  eyebrow?: React.ReactNode;\n  /** The section's title: an `h2` (a `SectionHeading`), which names the section for assistive technology. */\n  title?: React.ReactNode;\n  /** The heading's lead. */\n  lead?: React.ReactNode;\n  /** The heading's actions. */\n  actions?: React.ReactNode;\n  /**\n   * The heading's size: `md` for a page that argues, `sm` for a reading page.\n   * @default \"md\"\n   */\n  headingSize?: \"sm\" | \"md\";\n  /**\n   * The heading's alignment.\n   * @default \"start\"\n   */\n  headingAlign?: \"start\" | \"center\";\n  /** The heading rises into place once (never on the first screen). */\n  reveal?: boolean;\n  /** A hairline above the section, inside the gutters: the transition between two sections of the same surface. */\n  divider?: boolean;\n  /**\n   * The vertical space above and below: `sm` (a reading page), `md`, `lg` (a page's main moments).\n   * @default \"md\"\n   */\n  spacing?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * The width of the content.\n   * @default \"default\"\n   */\n  size?: PageSize;\n  /** The brand's colour transition behind the section (SectionBackdrop): `true`, or its props (`direction`, `grid`…). */\n  backdrop?: boolean | Omit<SectionBackdropProps, \"as\" | \"children\">;\n};\n\n/**\n * A section of a page: full-bleed (its backdrop reaches the edges), its content in the page frame, its heading on top.\n * Sections follow each other on one rhythm; a `divider` or a `backdrop` marks the transition.\n */\nexport function Section({\n  id,\n  eyebrow,\n  title,\n  lead,\n  actions,\n  headingSize,\n  headingAlign,\n  reveal,\n  divider,\n  spacing = \"md\",\n  size,\n  backdrop,\n  className,\n  children,\n  ...props\n}: SectionProps) {\n  const body = (\n    <Page size={size}>\n      {title && <SectionHeading id={id} eyebrow={eyebrow} title={title} lead={lead} actions={actions} size={headingSize} align={headingAlign} reveal={reveal} />}\n      {children}\n    </Page>\n  );\n  const shared = {\n    \"aria-labelledby\": title && id ? id : undefined,\n    \"data-divider\": divider ? \"\" : undefined,\n    \"data-spacing\": spacing === \"md\" ? undefined : spacing,\n    ...props,\n  };\n  if (backdrop) {\n    const backdropProps = backdrop === true ? {} : backdrop;\n    return (\n      <SectionBackdrop {...backdropProps} {...shared} className={cn(\"kz-section\", className)}>\n        {body}\n      </SectionBackdrop>\n    );\n  }\n  return (\n    <section {...shared} className={cn(\"kz-section\", className)}>\n      {body}\n    </section>\n  );\n}\n\nexport type TicksProps = {\n  /** A sentence where words between backticks are code: \"Every request carries a `requestId`.\" */\n  children: string;\n};\n\n/** A sentence of a message catalogue where words between backticks read as code — no markup in the translations. */\nexport function Ticks({ children }: TicksProps) {\n  const parts = children.split(\"`\");\n  return (\n    <>\n      {parts.map((part, i) =>\n        i % 2 ? (\n          <code key={i} className=\"kz-ic\">\n            {part}\n          </code>\n        ) : (\n          <React.Fragment key={i}>{part}</React.Fragment>\n        ),\n      )}\n    </>\n  );\n}\n\nexport interface Fact {\n  /** A few words: `npm 2.5.0`, `Maven Central`, `in progress`. */\n  label: string;\n  /**\n   * `ok` — published, usable today; `wip` — in progress, said honestly; `neutral` — a fact.\n   * @default \"neutral\"\n   */\n  tone?: \"ok\" | \"wip\" | \"neutral\";\n  /** Where the fact is proven (a registry page): the fact becomes a link. */\n  href?: string;\n}\n\nexport type FactsProps = React.HTMLAttributes<HTMLUListElement> & {\n  /** The facts, in reading order. */\n  items: readonly Fact[];\n};\n\n/** Compact facts on one line — a dot that says the state, a few mono words. Links open in a new tab. */\nexport function Facts({ items, className, ...props }: FactsProps) {\n  return (\n    <ul className={cn(\"kz-facts\", className)} {...props}>\n      {items.map((fact) => {\n        const body = (\n          <>\n            <span className=\"kz-fact-dot\" aria-hidden /> {fact.label}\n          </>\n        );\n        const tone = fact.tone && fact.tone !== \"neutral\" ? fact.tone : undefined;\n        return (\n          <li key={fact.label}>\n            {fact.href ? (\n              <a href={fact.href} target=\"_blank\" rel=\"noopener noreferrer\" className=\"kz-fact\" data-tone={tone}>\n                {body}\n              </a>\n            ) : (\n              <span className=\"kz-fact\" data-tone={tone}>\n                {body}\n              </span>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":"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","names":["React","Fragment","Fragment","jsx","jsxs"]}

package/dist/data-table.js

@@ -9,12 +9,12 @@ import {
   dataTableCsv,
   dataTableLabels,
   useDataTable
-} from "./chunk-F7FVPPBB.js";
+} from "./chunk-LYOPPBMC.js";
 import "./chunk-7Z4KHPFC.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-DZU6RMYD.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-CEJDH6SA.js";
+import "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";

package/dist/docs-nav.js

@@ -1,19 +1,6 @@
-// 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) ?? "";
-}
+import {
+  cn
+} from "./chunk-KH3JOEPY.js";
 
 // src/docs-nav/docs-nav.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/docs-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cn.ts","../src/docs-nav/docs-nav.tsx"],"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","// Server-safe. The pages of a documentation, grouped: a quiet list of links, each group a native `details` (open when it\n// holds the current page), only the current page marked. No state: the app tells which page is current.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { LinkComponent } from \"../page-hero\";\n\nexport type DocsNavGroup = {\n  /** A stable key. */\n  id: string;\n  /** The group's name — one word or two. */\n  title: React.ReactNode;\n  /** Its pages: a short, one-line title each. */\n  items: readonly { href: string; label: React.ReactNode }[];\n};\n\nexport type DocsNavProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's accessible name (`Documentation`). */\n  label: string;\n  /** The groups, in order. */\n  groups: readonly DocsNavGroup[];\n  /** The `href` of the page being read. */\n  current?: string;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The pages of the documentation in groups; the group of the current page is open, the others fold. */\nexport function DocsNav({ label, groups, current, linkAs, className, ...props }: DocsNavProps) {\n  const L = linkAs ?? \"a\";\n  return (\n    <nav aria-label={label} className={cn(\"flex flex-col gap-1 text-sm\", className)} {...props}>\n      {groups.map((g) => {\n        const open = g.items.some((i) => i.href === current) || !current;\n        return (\n          <details key={g.id} open={open} className=\"group py-1\">\n            <summary className=\"flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden\">\n              {g.title}\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" className=\"h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none\">\n                <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </summary>\n            <ul className=\"mt-1 flex flex-col gap-0.5 border-l border-border-subtle\">\n              {g.items.map((i) => (\n                <li key={i.href}>\n                  <L\n                    href={i.href}\n                    aria-current={i.href === current ? \"page\" : undefined}\n                    className=\"-ml-px block truncate border-l border-transparent px-3 py-1.5 text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:border-accent aria-[current=page]:font-semibold aria-[current=page]:text-fg\"\n                  >\n                    {i.label}\n                  </L>\n                </li>\n              ))}\n            </ul>\n          </details>\n        );\n      })}\n    </nav>\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;;;ACIY,SAGI,KAHJ;AARL,SAAS,QAAQ,EAAE,OAAO,QAAQ,SAAS,QAAQ,WAAW,GAAG,MAAM,GAAiB;AAC7F,QAAM,IAAI,UAAU;AACpB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAClF,iBAAO,IAAI,CAAC,MAAM;AACjB,UAAM,OAAO,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,KAAK,CAAC;AACzD,WACE,qBAAC,aAAmB,MAAY,WAAU,cACxC;AAAA,2BAAC,aAAQ,WAAU,ySAChB;AAAA,UAAE;AAAA,QACH,oBAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,SAAQ,WAAU,0HACtE,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ,GACtE;AAAA,SACF;AAAA,MACA,oBAAC,QAAG,WAAU,4DACX,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE;AAAA,UACR,gBAAc,EAAE,SAAS,UAAU,SAAS;AAAA,UAC5C,WAAU;AAAA,UAET,YAAE;AAAA;AAAA,MACL,KAPO,EAAE,IAQX,CACD,GACH;AAAA,SAnBY,EAAE,EAoBhB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/docs-nav/docs-nav.tsx"],"sourcesContent":["// Server-safe. The pages of a documentation, grouped: a quiet list of links, each group a native `details` (open when it\n// holds the current page), only the current page marked. No state: the app tells which page is current.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { LinkComponent } from \"../page-hero\";\n\nexport type DocsNavGroup = {\n  /** A stable key. */\n  id: string;\n  /** The group's name — one word or two. */\n  title: React.ReactNode;\n  /** Its pages: a short, one-line title each. */\n  items: readonly { href: string; label: React.ReactNode }[];\n};\n\nexport type DocsNavProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's accessible name (`Documentation`). */\n  label: string;\n  /** The groups, in order. */\n  groups: readonly DocsNavGroup[];\n  /** The `href` of the page being read. */\n  current?: string;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The pages of the documentation in groups; the group of the current page is open, the others fold. */\nexport function DocsNav({ label, groups, current, linkAs, className, ...props }: DocsNavProps) {\n  const L = linkAs ?? \"a\";\n  return (\n    <nav aria-label={label} className={cn(\"flex flex-col gap-1 text-sm\", className)} {...props}>\n      {groups.map((g) => {\n        const open = g.items.some((i) => i.href === current) || !current;\n        return (\n          <details key={g.id} open={open} className=\"group py-1\">\n            <summary className=\"flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden\">\n              {g.title}\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" className=\"h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none\">\n                <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </summary>\n            <ul className=\"mt-1 flex flex-col gap-0.5 border-l border-border-subtle\">\n              {g.items.map((i) => (\n                <li key={i.href}>\n                  <L\n                    href={i.href}\n                    aria-current={i.href === current ? \"page\" : undefined}\n                    className=\"-ml-px block truncate border-l border-transparent px-3 py-1.5 text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:border-accent aria-[current=page]:font-semibold aria-[current=page]:text-fg\"\n                  >\n                    {i.label}\n                  </L>\n                </li>\n              ))}\n            </ul>\n          </details>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAoCY,SAGI,KAHJ;AARL,SAAS,QAAQ,EAAE,OAAO,QAAQ,SAAS,QAAQ,WAAW,GAAG,MAAM,GAAiB;AAC7F,QAAM,IAAI,UAAU;AACpB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAClF,iBAAO,IAAI,CAAC,MAAM;AACjB,UAAM,OAAO,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,KAAK,CAAC;AACzD,WACE,qBAAC,aAAmB,MAAY,WAAU,cACxC;AAAA,2BAAC,aAAQ,WAAU,ySAChB;AAAA,UAAE;AAAA,QACH,oBAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,SAAQ,WAAU,0HACtE,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ,GACtE;AAAA,SACF;AAAA,MACA,oBAAC,QAAG,WAAU,4DACX,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE;AAAA,UACR,gBAAc,EAAE,SAAS,UAAU,SAAS;AAAA,UAC5C,WAAU;AAAA,UAET,YAAE;AAAA;AAAA,MACL,KAPO,EAAE,IAQX,CACD,GACH;AAAA,SAnBY,EAAE,EAoBhB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/dropdown-menu.d.ts

@@ -55,6 +55,12 @@ type DropdownMenuItemProps = React.ComponentProps<typeof DropdownMenu$1.Item> &
 declare function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps): React.JSX.Element;
 /** A toggled option: `checked` + `onCheckedChange`. */
 declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React.JSX.Element;
+/** A submenu's trigger: an item that opens `DropdownMenu.SubContent`, with a chevron. */
+declare function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger>): React.JSX.Element;
+/** The submenu's panel (same material as the menu). */
+declare function DropdownMenuSubContent({ sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubContent>): React.JSX.Element;
+/** One choice among several (`DropdownMenu.RadioGroup` holds the value): a language, a sort order. */
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): React.JSX.Element;
 declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Label>): React.JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
 /** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */
@@ -67,6 +73,11 @@ declare const DropdownMenu: {
     Label: typeof DropdownMenuLabel;
     Separator: typeof DropdownMenuSeparator;
     Group: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<DropdownMenu$1.DropdownMenuSubProps>;
+    SubTrigger: typeof DropdownMenuSubTrigger;
+    SubContent: typeof DropdownMenuSubContent;
+    RadioGroup: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: typeof DropdownMenuRadioItem;
 };
 
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, menu };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSubContent, DropdownMenuSubTrigger, menu };

package/dist/dropdown-menu.js

@@ -12,7 +12,7 @@ import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var menu = tv({
   slots: {
-    content: cn(floating, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)"),
+    content: cn(floating, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)"),
     item: "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-secondary",
     indicator: "ml-auto flex h-4 w-4 items-center justify-center text-fg-accent",
     label: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
@@ -38,6 +38,21 @@ function DropdownMenuCheckboxItem({ className, children, ...props }) {
     /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: s.indicator(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) })
   ] });
 }
+function DropdownMenuSubTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive.SubTrigger, { className: s.item({ className: cn("data-[state=open]:bg-surface-3", className) }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("svg", { className: "ml-auto !h-4 !w-4 text-fg-secondary", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+  ] });
+}
+function DropdownMenuSubContent({ sideOffset = 4, collisionPadding = 8, className, ...props }) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenuPrimitive.SubContent, { sideOffset, collisionPadding, className: s.content({ className: cn("max-h-(--radix-dropdown-menu-content-available-height)", className) }), ...props }) });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive.RadioItem, { className: s.item({ className }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: s.indicator(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) })
+  ] });
+}
 function DropdownMenuLabel({ className, ...props }) {
   return /* @__PURE__ */ jsx(MenuPrimitive.Label, { className: s.label({ className }), ...props });
 }
@@ -52,7 +67,12 @@ var DropdownMenu = {
   CheckboxItem: DropdownMenuCheckboxItem,
   Label: DropdownMenuLabel,
   Separator: DropdownMenuSeparator,
-  Group: MenuPrimitive.Group
+  Group: MenuPrimitive.Group,
+  Sub: MenuPrimitive.Sub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent,
+  RadioGroup: MenuPrimitive.RadioGroup,
+  RadioItem: DropdownMenuRadioItem
 };
 export {
   DropdownMenu,
@@ -60,7 +80,10 @@ export {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   menu
 };
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,UAAU;AAiCb,cAkBF,YAlBE;AA5BC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,SAAS,GAAG,UAAU,6IAA6I;AAAA,IACnK,MACE;AAAA,IAGF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAE,MAAM,mEAAmE,EAAE;AAAA,EAC5G;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AACD,IAAM,IAAI,KAAK;AAOR,SAAS,oBAAoB,EAAE,aAAa,GAAG,QAAQ,OAAO,mBAAmB,GAAG,WAAW,WAAW,GAAG,MAAM,GAA6B;AACrJ,SACE,oBAAC,cAAc,QAAd,EAAqB,WACpB,8BAAC,cAAc,SAAd,EAAsB,YAAwB,OAAc,kBAAoC,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GACnJ;AAEJ;AAQO,SAAS,iBAAiB,EAAE,MAAM,WAAW,GAAG,MAAM,GAA0B;AACrF,SAAO,oBAAC,cAAc,MAAd,EAAmB,aAAW,QAAQ,WAAW,WAAW,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrH;AAGO,SAAS,yBAAyB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4D;AACnI,SACE,qBAAC,cAAc,cAAd,EAA2B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/D;AAAA;AAAA,IACD,oBAAC,cAAc,eAAd,EAA4B,WAAW,EAAE,UAAU,GAClD,8BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAE,mBAAkB,GAC5B,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAqD;AAC3G,SAAO,oBAAC,cAAc,OAAd,EAAoB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC5E;AAEO,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAAyD;AACnH,SAAO,oBAAC,cAAc,WAAd,EAAwB,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACpF;AAGO,IAAM,eAAe;AAAA,EAC1B,MAAM,cAAc;AAAA,EACpB,SAAS,cAAc;AAAA,EACvB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO,cAAc;AACvB;","names":[]}
+{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A submenu's trigger: an item that opens `DropdownMenu.SubContent`, with a chevron. */\nexport function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger>) {\n  return (\n    <MenuPrimitive.SubTrigger className={s.item({ className: cn(\"data-[state=open]:bg-surface-3\", className) })} {...props}>\n      {children}\n      <svg className=\"ml-auto !h-4 !w-4 text-fg-secondary\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </MenuPrimitive.SubTrigger>\n  );\n}\n\n/** The submenu's panel (same material as the menu). */\nexport function DropdownMenuSubContent({ sideOffset = 4, collisionPadding = 8, className, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.SubContent sideOffset={sideOffset} collisionPadding={collisionPadding} className={s.content({ className: cn(\"max-h-(--radix-dropdown-menu-content-available-height)\", className) })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\n/** One choice among several (`DropdownMenu.RadioGroup` holds the value): a language, a sort order. */\nexport function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n  Sub: MenuPrimitive.Sub,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuSubContent,\n  RadioGroup: MenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n};\n"],"mappings":"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","names":[]}

package/dist/filter-bar.js

@@ -5,7 +5,7 @@ import {
   filterBar,
   readFilterParams,
   writeFilterParams
-} from "./chunk-CEJDH6SA.js";
+} from "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";

package/dist/genui.js

@@ -7,12 +7,12 @@ import {
 } from "./chunk-MQPC3P4T.js";
 import {
   DataTable
-} from "./chunk-F7FVPPBB.js";
+} from "./chunk-LYOPPBMC.js";
 import "./chunk-7Z4KHPFC.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-DZU6RMYD.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-CEJDH6SA.js";
+import "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";

package/dist/language-switch.d.ts

@@ -0,0 +1,120 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+/** A language the site speaks: its code (`fr`), its name in its own language (`Français`) and the address of the page in it. */
+interface Language {
+    code: string;
+    name: string;
+    href: string;
+}
+/** The languages of the family, each named in its own language — the switch never shows “French” to a French reader. */
+declare const languageNames: Readonly<Record<string, string>>;
+/**
+ * The same page in another language: `/fr/baux?x=1#a` → `/en/baux?x=1#a`. The first segment is the language when it is
+ * one of `locales`; an address without a language prefix gets one. Query and hash are kept.
+ */
+declare function languageHref(path: string, to: string, locales?: readonly string[]): string;
+/** The `languages` of a switch for the page at `path`, in the order of `locales`, each named in its own language. */
+declare function languagesFor(path: string, locales?: readonly string[]): Language[];
+
+declare const languageSwitch: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            heading?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            panel?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            inline?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            inlineLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            heading?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            panel?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            inline?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            inlineLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    trigger: string;
+    glyph: string;
+    panel: string;
+    heading: string;
+    item: string;
+    check: string;
+    inline: string;
+    inlineLink: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            heading?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            panel?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            inline?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            inlineLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    trigger: string;
+    glyph: string;
+    panel: string;
+    heading: string;
+    item: string;
+    check: string;
+    inline: string;
+    inlineLink: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    trigger: string;
+    glyph: string;
+    panel: string;
+    heading: string;
+    item: string;
+    check: string;
+    inline: string;
+    inlineLink: string;
+}>>;
+type LanguageSwitchProps = {
+    /** The control's accessible name (“Language”, “Langue”) — passed translated. */
+    label: string;
+    /** The code of the page's language (`fr`). */
+    current: string;
+    /** The languages offered, each with its name in its own language and the address of the same page (`languagesFor`). */
+    languages: readonly Language[];
+    /**
+     * `menu`: a globe and the code, opening a menu (the bar). `inline`: every language in a row (a mobile panel, a settings page).
+     * @default "menu"
+     */
+    variant?: "menu" | "inline";
+    /** Your router's `<Link>` (it receives `href`, `hrefLang`, `lang`). A plain `<a>` otherwise. */
+    linkAs?: React.ElementType;
+    /** Opens the menu at first render (a story, a screenshot). */
+    defaultOpen?: boolean;
+    /** Classes of the control. */
+    className?: string;
+};
+/**
+ * The language switch, the same on every Krizaka site and app: a compact control — a globe and the current code
+ * (`FR`) — that opens a menu of the languages named in their own language (Français · English), each a link with
+ * `hreflang` to the same page. It shows the language you are in, never the “other” one. `variant="inline"` lays the
+ * languages in a row for a phone's panel or a settings page.
+ */
+declare function LanguageSwitch({ label, current, languages, variant, linkAs, defaultOpen, className }: LanguageSwitchProps): React.JSX.Element;
+
+export { type Language, LanguageSwitch, type LanguageSwitchProps, languageHref, languageNames, languageSwitch, languagesFor };

package/dist/language-switch.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  LanguageSwitch,
+  languageSwitch
+} from "./chunk-3S4GHSPZ.js";
+
+// src/language-switch/href.ts
+var languageNames = {
+  en: "English",
+  fr: "Fran\xE7ais",
+  es: "Espa\xF1ol",
+  de: "Deutsch",
+  it: "Italiano",
+  pt: "Portugu\xEAs"
+};
+function languageHref(path, to, locales = ["en", "fr"]) {
+  const [, pathname = "/", rest = ""] = /^([^?#]*)(.*)$/.exec(path) ?? [];
+  const segments = pathname.split("/").filter(Boolean);
+  if (segments[0] && locales.includes(segments[0])) segments.shift();
+  return `/${[to, ...segments].join("/")}${rest}`;
+}
+function languagesFor(path, locales = ["en", "fr"]) {
+  return locales.map((code) => ({ code, name: languageNames[code] ?? code.toUpperCase(), href: languageHref(path, code, locales) }));
+}
+export {
+  LanguageSwitch,
+  languageHref,
+  languageNames,
+  languageSwitch,
+  languagesFor
+};
+//# sourceMappingURL=language-switch.js.map

package/dist/language-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/language-switch/href.ts"],"sourcesContent":["/** A language the site speaks: its code (`fr`), its name in its own language (`Français`) and the address of the page in it. */\nexport interface Language {\n  code: string;\n  name: string;\n  href: string;\n}\n\n/** The languages of the family, each named in its own language — the switch never shows “French” to a French reader. */\nexport const languageNames: Readonly<Record<string, string>> = {\n  en: \"English\",\n  fr: \"Français\",\n  es: \"Español\",\n  de: \"Deutsch\",\n  it: \"Italiano\",\n  pt: \"Português\",\n};\n\n/**\n * The same page in another language: `/fr/baux?x=1#a` → `/en/baux?x=1#a`. The first segment is the language when it is\n * one of `locales`; an address without a language prefix gets one. Query and hash are kept.\n */\nexport function languageHref(path: string, to: string, locales: readonly string[] = [\"en\", \"fr\"]): string {\n  const [, pathname = \"/\", rest = \"\"] = /^([^?#]*)(.*)$/.exec(path) ?? [];\n  const segments = pathname.split(\"/\").filter(Boolean);\n  if (segments[0] && locales.includes(segments[0])) segments.shift();\n  return `/${[to, ...segments].join(\"/\")}${rest}`;\n}\n\n/** The `languages` of a switch for the page at `path`, in the order of `locales`, each named in its own language. */\nexport function languagesFor(path: string, locales: readonly string[] = [\"en\", \"fr\"]): Language[] {\n  return locales.map((code) => ({ code, name: languageNames[code] ?? code.toUpperCase(), href: languageHref(path, code, locales) }));\n}\n"],"mappings":";;;;;;;AAQO,IAAM,gBAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,SAAS,aAAa,MAAc,IAAY,UAA6B,CAAC,MAAM,IAAI,GAAW;AACxG,QAAM,CAAC,EAAE,WAAW,KAAK,OAAO,EAAE,IAAI,iBAAiB,KAAK,IAAI,KAAK,CAAC;AACtE,QAAM,WAAW,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO;AACnD,MAAI,SAAS,CAAC,KAAK,QAAQ,SAAS,SAAS,CAAC,CAAC,EAAG,UAAS,MAAM;AACjE,SAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE,KAAK,GAAG,CAAC,GAAG,IAAI;AAC/C;AAGO,SAAS,aAAa,MAAc,UAA6B,CAAC,MAAM,IAAI,GAAe;AAChG,SAAO,QAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,MAAM,cAAc,IAAI,KAAK,KAAK,YAAY,GAAG,MAAM,aAAa,MAAM,MAAM,OAAO,EAAE,EAAE;AACnI;","names":[]}