@krizaka/ui 3.53.0 → 3.55.0

package/README.md

@@ -191,6 +191,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/date-picker` | `DatePicker`, `DateRangePicker` (`presets`), `Calendar` — ISO dates, the locale's names through `@krizaka/intl`, `min`/`max`/`isDateDisabled`, the APG grid keyboard | client |
 | `@krizaka/ui/search-field` | `SearchField` (`onSearch` debounced, `onSubmit`, `shortcut` ⌘K, `suggestions`, `clearLabel`, `landmark`) | client |
 | `@krizaka/ui/video-player` | `VideoPlayer` (`src` or a signed-source function, `loadHls={() => import("hls.js")}` (optional peer, loaded only without native HLS), `tracks`, `playbackRates`, `preload`, `pauseWhenHidden`, `overlay` for a gate, `labels`; keyboard Space/K, J/L, arrows, M, F, C) | client |
+| `@krizaka/ui/retro-tv` | `RetroTv` (vertical `VideoPlayer` in a `cabinet` or `portable` frame, `channel`, `off`, `tracks`; muted autoplay while on screen, lazy by default) | client |
 | `@krizaka/ui/file-upload` | `Dropzone` (`accept`, `maxSize`, `maxFiles`, refusals with reasons), `UploadList` (preview, progress, speed, pause/resume/retry/cancel), `useUploadQueue` (`upload(file, { signal, onProgress, resumed })`: Tus-ready without depending on it; `retries`, `backoff`, `shouldRetry` — a queue of `@krizaka/pacer`), `acceptsFile`, `formatBytes` | client |
 | `@krizaka/ui/media-capture` | `MediaCapture` (`mode` photo·video·both, `facing`, `maxDuration`, permission asked on a gesture, the file picker as the way out, `onCapture({ blob, kind, url })`) | client |
 | `@krizaka/ui/video-trimmer` | `VideoTrimmer` (`duration`, `value` [start, end], `minLength`, `step`/`largeStep`, `frames` or children, `time` + `onSeek`, `classNames` per part, `renderHandle`) | client |

package/dist/account-menu.d.ts

@@ -29,8 +29,12 @@ interface AccountMenuProps {
     email?: string;
     /** The picture: `src`, or `defaultAvatar` (`{ brand, seed }`) for the product's default person. */
     avatar?: Omit<AvatarProps, "size">;
-    /** Show the name beside the avatar in the trigger from the `sm` breakpoint. */
-    showName?: boolean;
+    /**
+     * Show the name beside the avatar in the trigger: `true` or `"sm"` from 640 px, `"lg"` from 1024 px (the family's top
+     * bar, where search and the counts take the room below it), `false` never.
+     * @default true
+     */
+    showName?: boolean | "sm" | "lg";
     /** Where to go: profile, settings… */
     links?: readonly AccountMenuLink[];
     /** The app's link component (Next's `Link`); an `<a>` otherwise. */

package/dist/account-menu.js

@@ -92,7 +92,14 @@ function AccountMenu({ label, name, email, avatar, showName = true, links = [],
         className: cn("flex items-center gap-2.5 rounded-lg p-1 transition-colors duration-150 hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", className),
         children: [
           /* @__PURE__ */ jsx2(Avatar, { size: "sm", fallback: title.charAt(0).toUpperCase() || "?", ...avatar }),
-          showName && title && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, "data-name": title, className: "hidden max-w-40 truncate text-sm font-medium text-fg-secondary after:content-[attr(data-name)] sm:inline-block" })
+          showName && title && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-name": title,
+              className: cn("hidden max-w-40 truncate text-sm font-medium text-fg-secondary after:content-[attr(data-name)]", showName === "lg" ? "lg:inline-block" : "sm:inline-block")
+            }
+          )
         ]
       }
     ),

package/dist/account-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx","../src/floating.ts","../src/account-menu/account-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 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","// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n","// Client (a portal). The signed-in person's menu under their avatar — who you are first (picture, name, e-mail), then\n// the places (profile, settings), the language as a compact submenu, the extras, and Sign out (a quiet item, not a\n// red alert). Built on DropdownMenu, so the keyboard, the focus return and the collisions are Radix's.\nimport * as React from \"react\";\n\nimport { Avatar, type AvatarProps } from \"../avatar/avatar\";\nimport { cn } from \"../cn\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\n\nexport interface AccountMenuLink {\n  id: string;\n  label: string;\n  href: string;\n  /** A signature icon. */\n  icon?: React.ReactNode;\n}\n\nexport interface AccountMenuLanguage {\n  /** The row's words (`Language`). */\n  label: string;\n  /** The current value (`en`). */\n  value: string;\n  options: readonly { value: string; label: string }[];\n  onChange: (value: string) => void;\n}\n\nexport interface AccountMenuProps {\n  /** The trigger's accessible name (`Account`). */\n  label: string;\n  /** Their name; falls back to the e-mail. */\n  name?: string;\n  /** Their e-mail, shown under the name. */\n  email?: string;\n  /** The picture: `src`, or `defaultAvatar` (`{ brand, seed }`) for the product's default person. */\n  avatar?: Omit<AvatarProps, \"size\">;\n  /** Show the name beside the avatar in the trigger from the `sm` breakpoint. */\n  showName?: boolean;\n  /** Where to go: profile, settings… */\n  links?: readonly AccountMenuLink[];\n  /** The app's link component (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** The language, as a submenu that shows the current one. */\n  language?: AccountMenuLanguage;\n  /** Extra rows between the language and Sign out (a theme switch…). */\n  children?: React.ReactNode;\n  /** The last row: its words, what it does, an optional icon. */\n  signOut: { label: string; onSelect: () => void; icon?: React.ReactNode };\n  /** Classes for the trigger. */\n  className?: string;\n}\n\n/** The account menu: avatar trigger → identity header, links, language submenu, Sign out. */\nexport function AccountMenu({ label, name, email, avatar, showName = true, links = [], linkAs: Link = \"a\", language, children, signOut, className }: AccountMenuProps) {\n  const title = name || email || \"\";\n  const current = language?.options.find((o) => o.value === language.value)?.label;\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger\n        aria-label={label}\n        className={cn(\"flex items-center gap-2.5 rounded-lg p-1 transition-colors duration-150 hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      >\n        <Avatar size=\"sm\" fallback={title.charAt(0).toUpperCase() || \"?\"} {...avatar} />\n        {/* Drawn by CSS: the name is not text of the button, so its accessible name stays `label` with no label-content-name-mismatch. */}\n        {showName && title && <span aria-hidden data-name={title} className=\"hidden max-w-40 truncate text-sm font-medium text-fg-secondary after:content-[attr(data-name)] sm:inline-block\" />}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"end\" className=\"w-64\">\n        <DropdownMenu.Label className=\"flex items-center gap-3 py-2 normal-case tracking-normal\">\n          <Avatar size=\"md\" fallback={title.charAt(0).toUpperCase() || \"?\"} {...avatar} />\n          <span className=\"min-w-0\">\n            <span className=\"block truncate text-sm font-semibold text-fg\">{title}</span>\n            {name && email && name !== email && <span className=\"block truncate text-xs font-normal text-fg-secondary\">{email}</span>}\n          </span>\n        </DropdownMenu.Label>\n        {links.length > 0 && <DropdownMenu.Separator />}\n        {links.map((link) => (\n          <DropdownMenu.Item key={link.id} asChild>\n            <Link href={link.href}>\n              {link.icon}\n              {link.label}\n            </Link>\n          </DropdownMenu.Item>\n        ))}\n        {(language || children) && <DropdownMenu.Separator />}\n        {language && (\n          <DropdownMenu.Sub>\n            <DropdownMenu.SubTrigger>\n              {language.label}\n              {current && <span className=\"ml-auto mr-1 text-xs text-fg-secondary\">{current}</span>}\n            </DropdownMenu.SubTrigger>\n            <DropdownMenu.SubContent>\n              <DropdownMenu.RadioGroup value={language.value} onValueChange={language.onChange}>\n                {language.options.map((o) => (\n                  <DropdownMenu.RadioItem key={o.value} value={o.value}>\n                    {o.label}\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.SubContent>\n          </DropdownMenu.Sub>\n        )}\n        {children}\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item onSelect={() => signOut.onSelect()}>\n          {signOut.icon}\n          {signOut.label}\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"],"mappings":";;;;;;;;AACA,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,UAAU;;;ACDZ,IAAM,WACX;;;ADiCI,cAkBF,YAlBE;AA5BC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,SAAS,GAAG,UAAU,kLAAkL;AAAA,IACxM,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;AAGO,SAAS,uBAAuB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA0D;AAC/H,SACE,qBAAC,cAAc,YAAd,EAAyB,WAAW,EAAE,KAAK,EAAE,WAAW,GAAG,kCAAkC,SAAS,EAAE,CAAC,GAAI,GAAG,OAC9G;AAAA;AAAA,IACD,oBAAC,SAAI,WAAU,uCAAsC,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACjL,8BAAC,UAAK,GAAE,iBAAgB,GAC1B;AAAA,KACF;AAEJ;AAGO,SAAS,uBAAuB,EAAE,aAAa,GAAG,mBAAmB,GAAG,WAAW,GAAG,MAAM,GAA0D;AAC3J,SACE,oBAAC,cAAc,QAAd,EACC,8BAAC,cAAc,YAAd,EAAyB,YAAwB,kBAAoC,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,0DAA0D,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO,GACjN;AAEJ;AAGO,SAAS,sBAAsB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAyD;AAC7H,SACE,qBAAC,cAAc,WAAd,EAAwB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;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;AAAA,EACrB,KAAK,cAAc;AAAA,EACnB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY,cAAc;AAAA,EAC1B,WAAW;AACb;;;AElEM,SAIE,OAAAA,MAJF,QAAAC,aAAA;AALC,SAAS,YAAY,EAAE,OAAO,MAAM,OAAO,QAAQ,WAAW,MAAM,QAAQ,CAAC,GAAG,QAAQ,OAAO,KAAK,UAAU,UAAU,SAAS,UAAU,GAAqB;AACrK,QAAM,QAAQ,QAAQ,SAAS;AAC/B,QAAM,UAAU,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,SAAS,KAAK,GAAG;AAC3E,SACE,gBAAAA,MAAC,aAAa,MAAb,EACC;AAAA,oBAAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,cAAY;AAAA,QACZ,WAAW,GAAG,wKAAwK,SAAS;AAAA,QAE/L;AAAA,0BAAAD,KAAC,UAAO,MAAK,MAAK,UAAU,MAAM,OAAO,CAAC,EAAE,YAAY,KAAK,KAAM,GAAG,QAAQ;AAAA,UAE7E,YAAY,SAAS,gBAAAA,KAAC,UAAK,eAAW,MAAC,aAAW,OAAO,WAAU,kHAAiH;AAAA;AAAA;AAAA,IACvL;AAAA,IACA,gBAAAC,MAAC,aAAa,SAAb,EAAqB,OAAM,OAAM,WAAU,QAC1C;AAAA,sBAAAA,MAAC,aAAa,OAAb,EAAmB,WAAU,4DAC5B;AAAA,wBAAAD,KAAC,UAAO,MAAK,MAAK,UAAU,MAAM,OAAO,CAAC,EAAE,YAAY,KAAK,KAAM,GAAG,QAAQ;AAAA,QAC9E,gBAAAC,MAAC,UAAK,WAAU,WACd;AAAA,0BAAAD,KAAC,UAAK,WAAU,gDAAgD,iBAAM;AAAA,UACrE,QAAQ,SAAS,SAAS,SAAS,gBAAAA,KAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,WACpH;AAAA,SACF;AAAA,MACC,MAAM,SAAS,KAAK,gBAAAA,KAAC,aAAa,WAAb,EAAuB;AAAA,MAC5C,MAAM,IAAI,CAAC,SACV,gBAAAA,KAAC,aAAa,MAAb,EAAgC,SAAO,MACtC,0BAAAC,MAAC,QAAK,MAAM,KAAK,MACd;AAAA,aAAK;AAAA,QACL,KAAK;AAAA,SACR,KAJsB,KAAK,EAK7B,CACD;AAAA,OACC,YAAY,aAAa,gBAAAD,KAAC,aAAa,WAAb,EAAuB;AAAA,MAClD,YACC,gBAAAC,MAAC,aAAa,KAAb,EACC;AAAA,wBAAAA,MAAC,aAAa,YAAb,EACE;AAAA,mBAAS;AAAA,UACT,WAAW,gBAAAD,KAAC,UAAK,WAAU,0CAA0C,mBAAQ;AAAA,WAChF;AAAA,QACA,gBAAAA,KAAC,aAAa,YAAb,EACC,0BAAAA,KAAC,aAAa,YAAb,EAAwB,OAAO,SAAS,OAAO,eAAe,SAAS,UACrE,mBAAS,QAAQ,IAAI,CAAC,MACrB,gBAAAA,KAAC,aAAa,WAAb,EAAqC,OAAO,EAAE,OAC5C,YAAE,SADwB,EAAE,KAE/B,CACD,GACH,GACF;AAAA,SACF;AAAA,MAED;AAAA,MACD,gBAAAA,KAAC,aAAa,WAAb,EAAuB;AAAA,MACxB,gBAAAC,MAAC,aAAa,MAAb,EAAkB,UAAU,MAAM,QAAQ,SAAS,GACjD;AAAA,gBAAQ;AAAA,QACR,QAAQ;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAEJ;","names":["jsx","jsxs"]}
+{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx","../src/floating.ts","../src/account-menu/account-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 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","// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n","// Client (a portal). The signed-in person's menu under their avatar — who you are first (picture, name, e-mail), then\n// the places (profile, settings), the language as a compact submenu, the extras, and Sign out (a quiet item, not a\n// red alert). Built on DropdownMenu, so the keyboard, the focus return and the collisions are Radix's.\nimport * as React from \"react\";\n\nimport { Avatar, type AvatarProps } from \"../avatar/avatar\";\nimport { cn } from \"../cn\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\n\nexport interface AccountMenuLink {\n  id: string;\n  label: string;\n  href: string;\n  /** A signature icon. */\n  icon?: React.ReactNode;\n}\n\nexport interface AccountMenuLanguage {\n  /** The row's words (`Language`). */\n  label: string;\n  /** The current value (`en`). */\n  value: string;\n  options: readonly { value: string; label: string }[];\n  onChange: (value: string) => void;\n}\n\nexport interface AccountMenuProps {\n  /** The trigger's accessible name (`Account`). */\n  label: string;\n  /** Their name; falls back to the e-mail. */\n  name?: string;\n  /** Their e-mail, shown under the name. */\n  email?: string;\n  /** The picture: `src`, or `defaultAvatar` (`{ brand, seed }`) for the product's default person. */\n  avatar?: Omit<AvatarProps, \"size\">;\n  /**\n   * Show the name beside the avatar in the trigger: `true` or `\"sm\"` from 640 px, `\"lg\"` from 1024 px (the family's top\n   * bar, where search and the counts take the room below it), `false` never.\n   * @default true\n   */\n  showName?: boolean | \"sm\" | \"lg\";\n  /** Where to go: profile, settings… */\n  links?: readonly AccountMenuLink[];\n  /** The app's link component (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** The language, as a submenu that shows the current one. */\n  language?: AccountMenuLanguage;\n  /** Extra rows between the language and Sign out (a theme switch…). */\n  children?: React.ReactNode;\n  /** The last row: its words, what it does, an optional icon. */\n  signOut: { label: string; onSelect: () => void; icon?: React.ReactNode };\n  /** Classes for the trigger. */\n  className?: string;\n}\n\n/** The account menu: avatar trigger → identity header, links, language submenu, Sign out. */\nexport function AccountMenu({ label, name, email, avatar, showName = true, links = [], linkAs: Link = \"a\", language, children, signOut, className }: AccountMenuProps) {\n  const title = name || email || \"\";\n  const current = language?.options.find((o) => o.value === language.value)?.label;\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger\n        aria-label={label}\n        className={cn(\"flex items-center gap-2.5 rounded-lg p-1 transition-colors duration-150 hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      >\n        <Avatar size=\"sm\" fallback={title.charAt(0).toUpperCase() || \"?\"} {...avatar} />\n        {/* Drawn by CSS: the name is not text of the button, so its accessible name stays `label` with no label-content-name-mismatch. */}\n        {showName && title && (\n          <span\n            aria-hidden\n            data-name={title}\n            className={cn(\"hidden max-w-40 truncate text-sm font-medium text-fg-secondary after:content-[attr(data-name)]\", showName === \"lg\" ? \"lg:inline-block\" : \"sm:inline-block\")}\n          />\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"end\" className=\"w-64\">\n        <DropdownMenu.Label className=\"flex items-center gap-3 py-2 normal-case tracking-normal\">\n          <Avatar size=\"md\" fallback={title.charAt(0).toUpperCase() || \"?\"} {...avatar} />\n          <span className=\"min-w-0\">\n            <span className=\"block truncate text-sm font-semibold text-fg\">{title}</span>\n            {name && email && name !== email && <span className=\"block truncate text-xs font-normal text-fg-secondary\">{email}</span>}\n          </span>\n        </DropdownMenu.Label>\n        {links.length > 0 && <DropdownMenu.Separator />}\n        {links.map((link) => (\n          <DropdownMenu.Item key={link.id} asChild>\n            <Link href={link.href}>\n              {link.icon}\n              {link.label}\n            </Link>\n          </DropdownMenu.Item>\n        ))}\n        {(language || children) && <DropdownMenu.Separator />}\n        {language && (\n          <DropdownMenu.Sub>\n            <DropdownMenu.SubTrigger>\n              {language.label}\n              {current && <span className=\"ml-auto mr-1 text-xs text-fg-secondary\">{current}</span>}\n            </DropdownMenu.SubTrigger>\n            <DropdownMenu.SubContent>\n              <DropdownMenu.RadioGroup value={language.value} onValueChange={language.onChange}>\n                {language.options.map((o) => (\n                  <DropdownMenu.RadioItem key={o.value} value={o.value}>\n                    {o.label}\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.SubContent>\n          </DropdownMenu.Sub>\n        )}\n        {children}\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item onSelect={() => signOut.onSelect()}>\n          {signOut.icon}\n          {signOut.label}\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/account-settings.js

@@ -118,78 +118,18 @@ function AvatarPicker({ label, showLabel, description, dense, options, upload, c
 }
 
 // src/account-settings/choice-cards.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 
 // src/radio-group/radio-group.tsx
 import { RadioGroup as RadioGroupPrimitive2 } from "radix-ui";
-
-// src/router/route-state.tsx
-import * as React2 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var CHANGE = "kz-route-state";
-var browserAdapter = {
-  search: () => typeof window === "undefined" ? "" : window.location.search,
-  navigate: (search, { replace }) => {
-    const url = `${window.location.pathname}${search}${window.location.hash}`;
-    window.history[replace ? "replaceState" : "pushState"](window.history.state, "", url);
-    window.dispatchEvent(new Event(CHANGE));
-  },
-  subscribe: (onChange) => {
-    window.addEventListener("popstate", onChange);
-    window.addEventListener(CHANGE, onChange);
-    return () => {
-      window.removeEventListener("popstate", onChange);
-      window.removeEventListener(CHANGE, onChange);
-    };
-  }
-};
-var AdapterContext = React2.createContext(browserAdapter);
-function readRouteValue(search, key, { values, default: fallback }) {
-  const raw = new URLSearchParams(search).get(key);
-  if (raw === null) return fallback;
-  return !values || values.includes(raw) ? raw : fallback;
-}
-function writeRouteValue(search, key, value, fallback) {
-  const params = new URLSearchParams(search);
-  if (value === fallback) params.delete(key);
-  else params.set(key, value);
-  const text = params.toString();
-  return text ? `?${text}` : "";
-}
-function useRouteState(key, { values, default: fallback, history = "push" }) {
-  const adapter = React2.useContext(AdapterContext);
-  const search = React2.useSyncExternalStore(adapter.subscribe, adapter.search, () => "");
-  const value = key === void 0 ? fallback : readRouteValue(search, key, { values, default: fallback });
-  const set = React2.useCallback(
-    (next) => {
-      if (key === void 0) return;
-      adapter.navigate(writeRouteValue(adapter.search(), key, next, fallback), { replace: history === "replace" });
-    },
-    [adapter, key, fallback, history]
-  );
-  return [value, set];
-}
-function useRouteBinding(routeKey, routeValues, props) {
-  const initial = props.defaultValue ?? props.value ?? routeValues?.[0] ?? "";
-  const [value, set] = useRouteState(routeKey, { values: routeValues, default: initial });
-  if (routeKey === void 0) return props;
-  return {
-    ...props,
-    value,
-    defaultValue: void 0,
-    onValueChange: (next) => {
-      set(next);
-      props.onValueChange?.(next);
-    }
-  };
-}
+import { useRouteBinding } from "@krizaka/ui/router";
 
 // src/sliding-indicator.ts
-import * as React3 from "react";
-var useIsoLayoutEffect = typeof window === "undefined" ? React3.useEffect : React3.useLayoutEffect;
+import * as React2 from "react";
+var useIsoLayoutEffect = typeof window === "undefined" ? React2.useEffect : React2.useLayoutEffect;
 function useSlidingIndicator({ item, active, prefer, follow = false }) {
-  const ref = React3.useRef(null);
-  const place = React3.useCallback((target) => {
+  const ref = React2.useRef(null);
+  const place = React2.useCallback((target) => {
     const list = ref.current;
     if (!list) return;
     if (!(target instanceof HTMLElement) || !list.contains(target)) {
@@ -204,7 +144,7 @@ function useSlidingIndicator({ item, active, prefer, follow = false }) {
     list.style.setProperty("--kz-ind-h", `${a.height}px`);
     list.setAttribute("data-indicator", "on");
   }, []);
-  const rest = React3.useCallback(
+  const rest = React2.useCallback(
     () => {
       const list = ref.current;
       const hovered = follow ? list?.querySelector(`${item}:hover`) : null;
@@ -212,7 +152,7 @@ function useSlidingIndicator({ item, active, prefer, follow = false }) {
     },
     [place, active, prefer, item, follow]
   );
-  const follow_ = React3.useCallback((target) => {
+  const follow_ = React2.useCallback((target) => {
     const hit = target instanceof Element ? target.closest(item) : null;
     if (hit && ref.current?.contains(hit)) place(hit);
     else rest();
@@ -244,16 +184,16 @@ import { createTV } from "tailwind-variants";
 var tv2 = createTV({ twMergeConfig });
 
 // src/radio-group/radio-group.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var radioGroup = tv2({
   slots: {
     root: "grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap",
-    item: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 inset-shadow-well transition-colors focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger",
+    item: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-control bg-surface-1 inset-shadow-well transition-colors focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger",
     dot: "h-2 w-2 rounded-full bg-on-accent",
     label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70",
     card: "group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow",
     // The card's check: an empty ring at rest, the accent filled with its check once chosen.
-    cardCheck: "absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong bg-surface-1 text-on-accent transition-colors group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent",
+    cardCheck: "absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-control bg-surface-1 text-on-accent transition-colors group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent",
     // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.
     button: "relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none hover:border-border-strong active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]",
     buttonHint: "text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent",
@@ -275,7 +215,7 @@ function RadioGroupRoot({ label, invalid, variant = "list", className, routeKey,
   const props = useRouteBinding(routeKey, routeValues, rest);
   const { ref } = useSlidingIndicator({ item: "[role=radio]", active: "[role=radio][data-state=checked]" });
   const segmented = variant === "segmented";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     RadioGroupPrimitive2.Root,
     {
       ref: segmented ? ref : void 0,
@@ -290,59 +230,59 @@ function RadioGroupRoot({ label, invalid, variant = "list", className, routeKey,
   );
 }
 function RadioGroupItem({ className, children, ...props }) {
-  const item = /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Item, { className: s.item({ className: children ? "mt-0.5" : className }), ...props, children: /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Indicator, { className: s.dot() }) });
+  const item = /* @__PURE__ */ jsx5(RadioGroupPrimitive2.Item, { className: s.item({ className: children ? "mt-0.5" : className }), ...props, children: /* @__PURE__ */ jsx5(RadioGroupPrimitive2.Indicator, { className: s.dot() }) });
   if (!children) return item;
   return /* @__PURE__ */ jsxs5("label", { className: s.label({ className }), children: [
     item,
-    /* @__PURE__ */ jsx6("span", { className: "min-w-0", children })
+    /* @__PURE__ */ jsx5("span", { className: "min-w-0", children })
   ] });
 }
 function RadioGroupCard({ className, children, ...props }) {
   return /* @__PURE__ */ jsxs5(RadioGroupPrimitive2.Item, { className: s.card({ className }), ...props, children: [
     children,
-    /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: s.cardCheck(), children: /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Indicator, { forceMount: true, className: "inline-flex data-[state=unchecked]:hidden", children: /* @__PURE__ */ jsx6(CheckGlyph, { className: "h-3 w-3" }) }) })
+    /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: s.cardCheck(), children: /* @__PURE__ */ jsx5(RadioGroupPrimitive2.Indicator, { forceMount: true, className: "inline-flex data-[state=unchecked]:hidden", children: /* @__PURE__ */ jsx5(CheckGlyph, { className: "h-3 w-3" }) }) })
   ] });
 }
 function RadioGroupButton({ className, children, hint, ...props }) {
   return /* @__PURE__ */ jsxs5(RadioGroupPrimitive2.Item, { className: s.button({ className: ["group", className].filter(Boolean).join(" ") }), ...props, children: [
-    /* @__PURE__ */ jsx6("span", { children }),
-    hint ? /* @__PURE__ */ jsx6("span", { className: s.buttonHint(), children: hint }) : null
+    /* @__PURE__ */ jsx5("span", { children }),
+    hint ? /* @__PURE__ */ jsx5("span", { className: s.buttonHint(), children: hint }) : null
   ] });
 }
 function RadioGroupSegment({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Item, { className: s.segment({ className }), ...props });
+  return /* @__PURE__ */ jsx5(RadioGroupPrimitive2.Item, { className: s.segment({ className }), ...props });
 }
 var RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };
 
 // src/account-settings/choice-cards.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ChoiceCards({ label, showLabel, description, options, className, ...props }) {
-  const base = React4.useId();
-  const group = /* @__PURE__ */ jsx7(RadioGroup.Root, { variant: "cards", label, "aria-labelledby": showLabel ? `${base}-label` : void 0, className: ["grid grid-cols-1 gap-3 sm:grid-cols-2", !showLabel && className].filter(Boolean).join(" "), ...props, children: options.map((option) => {
+  const base = React3.useId();
+  const group = /* @__PURE__ */ jsx6(RadioGroup.Root, { variant: "cards", label, "aria-labelledby": showLabel ? `${base}-label` : void 0, className: ["grid grid-cols-1 gap-3 sm:grid-cols-2", !showLabel && className].filter(Boolean).join(" "), ...props, children: options.map((option) => {
     const describedBy = option.description ? `${base}-${option.id}` : void 0;
     return /* @__PURE__ */ jsxs6(RadioGroup.Card, { value: option.id, disabled: option.disabled, "aria-describedby": describedBy, children: [
       /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2.5 font-semibold text-fg [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-accent", children: [
         option.icon,
         option.title
       ] }),
-      option.description ? /* @__PURE__ */ jsx7("span", { id: describedBy, className: "text-sm font-normal text-fg-secondary", children: option.description }) : null
+      option.description ? /* @__PURE__ */ jsx6("span", { id: describedBy, className: "text-sm font-normal text-fg-secondary", children: option.description }) : null
     ] }, option.id);
   }) });
   if (!showLabel) return group;
   return /* @__PURE__ */ jsxs6("div", { className: ["flex flex-col gap-3", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx7(GroupHead, { id: `${base}-label`, label, description }),
+    /* @__PURE__ */ jsx6(GroupHead, { id: `${base}-label`, label, description }),
     group
   ] });
 }
 
 // src/account-settings/language-picker.tsx
-import * as React5 from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function LanguagePicker({ label, showLabel = true, description, languages, className, ...props }) {
-  const id = React5.useId();
+  const id = React4.useId();
   return /* @__PURE__ */ jsxs7("div", { className: ["flex flex-col gap-2", className].filter(Boolean).join(" "), children: [
-    showLabel ? /* @__PURE__ */ jsx8(GroupHead, { id: `${id}-label`, label, description }) : null,
-    /* @__PURE__ */ jsx8(RadioGroup.Root, { variant: "segmented", "aria-label": showLabel ? void 0 : String(label), "aria-labelledby": showLabel ? `${id}-label` : void 0, ...props, children: languages.map((language) => /* @__PURE__ */ jsx8(RadioGroup.Segment, { value: language.code, lang: language.code, children: language.name }, language.code)) })
+    showLabel ? /* @__PURE__ */ jsx7(GroupHead, { id: `${id}-label`, label, description }) : null,
+    /* @__PURE__ */ jsx7(RadioGroup.Root, { variant: "segmented", "aria-label": showLabel ? void 0 : String(label), "aria-labelledby": showLabel ? `${id}-label` : void 0, ...props, children: languages.map((language) => /* @__PURE__ */ jsx7(RadioGroup.Segment, { value: language.code, lang: language.code, children: language.name }, language.code)) })
   ] });
 }
 export {

package/dist/account-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/badge/badge.tsx","../src/badge/recipe.ts","../src/account-settings/account-profile-card.tsx","../src/account-settings/avatar-picker.tsx","../src/account-settings/group-head.tsx","../src/account-settings/choice-cards.tsx","../src/radio-group/radio-group.tsx","../src/router/route-state.tsx","../src/sliding-indicator.ts","../src/tv.ts","../src/account-settings/language-picker.tsx"],"sourcesContent":["// Server-safe: no hook, no context.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { badgeRecipe } from \"./recipe\";\n\n// Status tones are soft (a tint, a coloured dot, a text role): the invariant status tokens are too light to carry\n// small text on a light surface, or to sit under white text (WCAG AA).\nexport const badgeVariants = tv(badgeRecipe);\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  BadgeVariants & {\n    /**\n     * neutral · accent · success · warning · danger (soft tints, the text stays a text role) · scrim (on a media).\n     * @default \"neutral\"\n     */\n    tone?: BadgeVariants[\"tone\"];\n    /**\n     * sm · md.\n     * @default \"sm\"\n     */\n    size?: BadgeVariants[\"size\"];\n    /** Makes the `dot` pulse (stopped under reduced motion). */\n    pulse?: BadgeVariants[\"pulse\"];\n    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */\n    dot?: boolean;\n  };\n\nexport function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps) {\n  return (\n    <span data-tone={tone ?? \"neutral\"} className={badgeVariants({ tone, size, pulse, className })} {...props}>\n      {dot && <span data-dot=\"\" aria-hidden className=\"h-1.5 w-1.5 rounded-full bg-current\" />}\n      {children}\n    </span>\n  );\n}\n","// The badge's tones and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(badgeRecipe)`,\n// React Native reads the same classes into styles (native/badge.tsx). Status tones are soft (a tint, a coloured dot, a\n// text role): the invariant status tokens are too light to carry small text on a light surface, or to sit under white\n// text (WCAG AA).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const badgeRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm font-semibold \",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n","// Server-safe. Who the account is, at a glance: the picture with its change action, the name, the e-mail and whether it is\n// verified, since when. The head of a profile section.\nimport type * as React from \"react\";\n\nimport { Avatar, type AvatarProps } from \"../avatar/avatar\";\nimport { Badge } from \"../badge/badge\";\nimport { cn } from \"../cn\";\n\nexport type AccountProfileCardProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The name (the card's heading). */\n  name: string;\n  /** The e-mail address. */\n  email: string;\n  /** Whether the address is verified. */\n  verified: boolean;\n  /** “Verified” — passed translated. */\n  verifiedLabel: string;\n  /** “Not verified” — passed translated. */\n  unverifiedLabel: string;\n  /** “Member since October 2026” — formatted by the app, in the viewer's language. */\n  memberSince?: string;\n  /** The picture: the person's photo, or the default avatar of the brand. */\n  avatar?: Pick<AvatarProps, \"src\" | \"defaultAvatar\" | \"fallback\">;\n  /** Beside the picture: the change action (a `Button`). */\n  action?: React.ReactNode;\n  /**\n   * One calm line for a settings row: a medium picture beside the name and the e-mail, no wrapping.\n   * @default false\n   */\n  compact?: boolean;\n};\n\n/** The account's identity card: picture, name, verified e-mail, member since. */\nexport function AccountProfileCard({ name, email, verified, verifiedLabel, unverifiedLabel, memberSince, avatar, action, compact, className, ...props }: AccountProfileCardProps) {\n  return (\n    <section aria-label={name} className={cn(\"flex items-center gap-3\", !compact && \"flex-col items-start gap-4 sm:flex-row sm:gap-5\", className)} {...props}>\n      <div className=\"flex shrink-0 flex-col items-center gap-2\">\n        <Avatar size={compact ? \"md\" : \"xl\"} alt=\"\" fallback={name.slice(0, 1)} {...avatar} />\n        {action}\n      </div>\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        <h2 className={cn(\"m-0 truncate font-bold text-fg\", compact ? \"text-sm font-medium\" : \"text-lg\")}>{name}</h2>\n        <p className=\"m-0 flex flex-wrap items-center gap-2 text-sm text-fg-secondary\">\n          <span className=\"min-w-0 truncate\">{email}</span>\n          <Badge tone={verified ? \"success\" : \"warning\"} dot>\n            {verified ? verifiedLabel : unverifiedLabel}\n          </Badge>\n        </p>\n        {memberSince ? <p className=\"text-sm text-fg-secondary\">{memberSince}</p> : null}\n      </div>\n    </section>\n  );\n}\n","// Client (a radio group). The pictures of a person to choose from — the family's default avatars, a few photos — as a grid of\n// round tiles: one named radiogroup, one tab stop, the arrows choose, a ring and a check on the chosen one.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { type DefaultAvatar, defaultAvatarUrl } from \"../avatar/default-avatar\";\nimport { cn } from \"../cn\";\nimport { CheckGlyph } from \"../glyphs\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface AvatarOption {\n  /** The value of the choice. */\n  id: string;\n  /** Its name for assistive technology (“Teinte 3”) — passed translated. */\n  label: string;\n  /** A picture's address; otherwise `defaultAvatar` draws one of the family's pictures. */\n  src?: string;\n  /** One of Krizaka's default pictures (`{ brand, tone }`). */\n  defaultAvatar?: DefaultAvatar;\n}\n\nexport type AvatarPickerProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Root>, \"children\" | \"onChange\" | \"dir\"> & {\n  /** The group's accessible name (“Profile picture”) — passed translated. */\n  label: string;\n  /**\n   * Smaller tiles, for a settings row.\n   * @default false\n   */\n  dense?: boolean;\n  /** Shows the label above the grid, with `description` under it. */\n  showLabel?: boolean;\n  /** One line under the visible label: what it changes. */\n  description?: React.ReactNode;\n  /** The pictures. */\n  options: readonly AvatarOption[];\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The viewer chooses another picture. */\n  onValueChange?: (id: string) => void;\n  /** After the pictures, in the grid: the upload action (a `Button`, a file input's label). Not a radio. */\n  upload?: React.ReactNode;\n};\n\nconst pictureOf = (option: AvatarOption) => option.src ?? (option.defaultAvatar ? defaultAvatarUrl(option.defaultAvatar, { size: 256 }) : undefined);\n\n/** A grid of pictures to choose from, with an upload beside them: a radio group, never a row of loose radios. */\nexport function AvatarPicker({ label, showLabel, description, dense, options, upload, className, ...props }: AvatarPickerProps) {\n  const id = React.useId();\n  const group = (\n    <RadioGroupPrimitive.Root aria-label={label} aria-labelledby={showLabel ? id : undefined} className={cn(dense ? \"flex flex-wrap gap-2.5\" : \"grid grid-cols-[repeat(auto-fill,minmax(4.25rem,1fr))] gap-3\", !showLabel && className)} {...props}>\n      {options.map((option) => (\n        <RadioGroupPrimitive.Item\n          key={option.id}\n          value={option.id}\n          aria-label={option.label}\n          className={cn(\n            \"group/avatar relative shrink-0 rounded-full\", dense ? \"h-12 w-12\" : \"aspect-square w-full\",\n            \" outline-none transition-shadow duration-200 motion-reduce:transition-none\",\n            \"ring-1 ring-border-default hover:ring-border-strong focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent\",\n          )}\n        >\n          <img src={pictureOf(option)} alt=\"\" draggable={false} className=\"h-full w-full rounded-full bg-surface-3 object-cover\" />\n          <span\n            aria-hidden\n            className=\"absolute -bottom-0.5 -right-0.5 hidden h-5 w-5 items-center justify-center rounded-full border-2 border-surface-1 bg-accent text-on-accent group-data-[state=checked]/avatar:inline-flex\"\n          >\n            <CheckGlyph className=\"h-3 w-3\" />\n          </span>\n        </RadioGroupPrimitive.Item>\n      ))}\n      {upload ? <div className=\"flex aspect-square w-full items-center justify-center\">{upload}</div> : null}\n    </RadioGroupPrimitive.Root>\n  );\n  if (!showLabel) return group;\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)}>\n      <GroupHead id={id} label={label} description={description} />\n      {group}\n    </div>\n  );\n}\n","import type * as React from \"react\";\n\n/** The visible label (and one line of help) of a radio group: the group's `aria-labelledby` points at it. */\nexport function GroupHead({ id, label, description }: { id: string; label: React.ReactNode; description?: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      <span id={id} className=\"text-sm font-medium text-fg\">\n        {label}\n      </span>\n      {description ? <span className=\"text-sm text-fg-secondary\">{description}</span> : null}\n    </div>\n  );\n}\n","// Client (a radio group). A single choice as selectable cards — an icon, a title, one line: the side of a lease, a plan, a\n// way to get the answer. Built on `RadioGroup.Card`, so the arrows choose, the card is the radio, the check lights up.\nimport * as React from \"react\";\n\nimport { RadioGroup } from \"../radio-group\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface ChoiceCardOption {\n  /** The value of the choice. */\n  id: string;\n  /** Its name, short. */\n  title: React.ReactNode;\n  /** One line under the title: what it means. It describes the radio. */\n  description?: React.ReactNode;\n  /** A glyph before the title (decorative). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport type ChoiceCardsProps = Omit<React.ComponentProps<typeof RadioGroup.Root>, \"children\" | \"variant\" | \"label\"> & {\n  /** The question (“Which side of the lease are you?”) — the group's accessible name, passed translated. */\n  label: string;\n  /** Shows the question above the cards, with `description` under it. */\n  showLabel?: boolean;\n  /** One line under the visible question. */\n  description?: React.ReactNode;\n  /** The choices. */\n  options: readonly ChoiceCardOption[];\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The viewer chooses another card. */\n  onValueChange?: (id: string) => void;\n};\n\n/** Cards to choose one from: a radio group where each card has an icon, a title and a description. */\nexport function ChoiceCards({ label, showLabel, description, options, className, ...props }: ChoiceCardsProps) {\n  const base = React.useId();\n  const group = (\n    <RadioGroup.Root variant=\"cards\" label={label} aria-labelledby={showLabel ? `${base}-label` : undefined} className={[\"grid grid-cols-1 gap-3 sm:grid-cols-2\", !showLabel && className].filter(Boolean).join(\" \")} {...props}>\n      {options.map((option) => {\n        const describedBy = option.description ? `${base}-${option.id}` : undefined;\n        return (\n          <RadioGroup.Card key={option.id} value={option.id} disabled={option.disabled} aria-describedby={describedBy}>\n            <span className=\"flex items-center gap-2.5 font-semibold text-fg [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-accent\">\n              {option.icon}\n              {option.title}\n            </span>\n            {option.description ? (\n              <span id={describedBy} className=\"text-sm font-normal text-fg-secondary\">\n                {option.description}\n              </span>\n            ) : null}\n          </RadioGroup.Card>\n        );\n      })}\n    </RadioGroup.Root>\n  );\n  if (!showLabel) return group;\n  return (\n    <div className={[\"flex flex-col gap-3\", className].filter(Boolean).join(\" \")}>\n      <GroupHead id={`${base}-label`} label={label} description={description} />\n      {group}\n    </div>\n  );\n}\n","// Client (a context). Radix RadioGroup: role=\"radiogroup\" / \"radio\", one tab stop, the arrows move and select, a\n// hidden input inside a form. Four looks, one behaviour:\n// - `RadioGroup.Item`: a dot and its words (a settings list);\n// - `RadioGroup.Card`: a whole card is the radio — an amount, a pack, a plan — its check lit when chosen;\n// - `RadioGroup.Button`: a tactile key that presses in — raised on a ledge, sunk when chosen (a size, a tip, a level);\n// - `RadioGroup.Segment` in `<RadioGroup.Root variant=\"segmented\">`: a segmented control, one light gliding to the choice.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { CheckGlyph } from \"../glyphs\";\nimport { useRouteBinding } from \"../router\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { tv } from \"../tv\";\n\nexport const radioGroup = tv({\n  slots: {\n    root: \"grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap\",\n    item:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 inset-shadow-well transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger\",\n    dot: \"h-2 w-2 rounded-full bg-on-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n    card:\n      \"group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge \" +\n      \"transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow\",\n    // The card's check: an empty ring at rest, the accent filled with its check once chosen.\n    cardCheck:\n      \"absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent\",\n    // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.\n    button:\n      \"relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 \" +\n      \"text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] \" +\n      \"transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none \" +\n      \"hover:border-border-strong \" +\n      \"active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade \" +\n      \"data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]\",\n    buttonHint: \"text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent\",\n    segmented:\n      \"relative isolate inline-grid auto-cols-fr grid-flow-col gap-1 rounded-xl border border-border-default bg-surface-2 p-1 inset-shadow-well \" +\n      \"before:pointer-events-none before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) \" +\n      \"before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:border before:border-border-default before:bg-surface-0 before:bg-sheen \" +\n      \"before:opacity-0 before:shadow-raised before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    segment:\n      \"inline-flex min-h-9 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 text-sm font-semibold text-fg-secondary transition-colors \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border data-[state=checked]:border-border-default data-[state=checked]:bg-surface-0 data-[state=checked]:text-fg data-[state=checked]:shadow-raised \" +\n      \"group-data-[indicator=on]/seg:data-[state=checked]:border-transparent group-data-[indicator=on]/seg:data-[state=checked]:bg-transparent group-data-[indicator=on]/seg:data-[state=checked]:shadow-none\",\n  },\n  variants: {\n    variant: {\n      list: {},\n      cards: { root: \"grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3\" },\n      buttons: { root: \"flex flex-wrap gap-2.5 pb-1\" },\n      segmented: {},\n    },\n  },\n  defaultVariants: { variant: \"list\" },\n});\nconst s = radioGroup();\n\nexport type RadioGroupRootProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */\n  label?: string;\n  /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */\n  invalid?: boolean;\n  /**\n   * The layout of the radios: `list` (dots), `cards` (a grid of `Card`s), `buttons` (a row of tactile `Button`s), or\n   * `segmented` (a track of `Segment`s, one light gliding to the choice).\n   * @default \"list\"\n   */\n  variant?: \"list\" | \"cards\" | \"buttons\" | \"segmented\";\n  /** Binds the choice to this search parameter of the URL (`?kind=…`): the URL is the state — for a view's selection (a segmented switch), not a form field. */\n  routeKey?: string;\n  /** The values the parameter may hold (the radios' `value`s); the first is the default unless `defaultValue` says otherwise. */\n  routeValues?: readonly string[];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, routeKey, routeValues, ...rest }: RadioGroupRootProps) {\n  const props = useRouteBinding(routeKey, routeValues, rest);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=radio]\", active: \"[role=radio][data-state=checked]\" });\n  const segmented = variant === \"segmented\";\n  return (\n    <RadioGroupPrimitive.Root\n      ref={segmented ? ref : undefined}\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-variant={variant}\n      orientation={segmented ? \"horizontal\" : props.orientation}\n      className={segmented ? s.segmented({ className: [\"group/seg\", className].filter(Boolean).join(\" \") }) : radioGroup({ variant }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A radio: a dot, and its words when given. */\nexport function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps) {\n  const item = (\n    <RadioGroupPrimitive.Item className={s.item({ className: children ? \"mt-0.5\" : className })} {...props}>\n      <RadioGroupPrimitive.Indicator className={s.dot()} />\n    </RadioGroupPrimitive.Item>\n  );\n  if (!children) return item;\n  return (\n    <label className={s.label({ className })}>\n      {item}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n\n/** A whole card as the radio: its content is the radio's name; its check lights up when chosen. */\nexport function RadioGroupCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item className={s.card({ className })} {...props}>\n      {children}\n      <span aria-hidden className={s.cardCheck()}>\n        <RadioGroupPrimitive.Indicator forceMount className=\"inline-flex data-[state=unchecked]:hidden\">\n          <CheckGlyph className=\"h-3 w-3\" />\n        </RadioGroupPrimitive.Indicator>\n      </span>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport type RadioGroupButtonProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  /** A second line under the words (\"+15 %\"), part of the radio's name. */\n  hint?: React.ReactNode;\n};\n\n/** A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level. */\nexport function RadioGroupButton({ className, children, hint, ...props }: RadioGroupButtonProps) {\n  return (\n    <RadioGroupPrimitive.Item className={s.button({ className: [\"group\", className].filter(Boolean).join(\" \") })} {...props}>\n      <span>{children}</span>\n      {hint ? <span className={s.buttonHint()}>{hint}</span> : null}\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A segment of a `variant=\"segmented\"` group: equal widths, one light gliding to the choice. */\nexport function RadioGroupSegment({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.segment({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card/Button/Segment`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };\n","// Client. The URL is the state: a selection the user would want to share, reload or come back to (a tab, a type, a\n// filter) lives in a search parameter, never in `useState` (Oussama, 2026-10-22: « changer les tabs doit changer les routes »).\n// One primitive reads and writes it: `useRouteState`. The selection components take `routeKey` and bind to it.\nimport * as React from \"react\";\n\n/** How a router moves and reads the address: the browser's by default, your framework's through `RouteStateProvider`. */\nexport interface RouteAdapter {\n  /** The current query string, with or without `?` (`\"\"` on the server). */\n  search: () => string;\n  /** Go to `search` (`?type=bail`, or `\"\"`), keeping the path and the hash; `replace` keeps the history as it is. */\n  navigate: (search: string, options: { replace: boolean }) => void;\n  /** Calls `onChange` when the address changes under you (back, forward, another navigation); returns the unsubscribe. */\n  subscribe: (onChange: () => void) => () => void;\n}\n\nconst CHANGE = \"kz-route-state\";\n\n/** The History API: any web app (Vite, a static site). Next.js apps pass their router's adapter once, in the layout. */\nexport const browserAdapter: RouteAdapter = {\n  search: () => (typeof window === \"undefined\" ? \"\" : window.location.search),\n  navigate: (search, { replace }) => {\n    const url = `${window.location.pathname}${search}${window.location.hash}`;\n    window.history[replace ? \"replaceState\" : \"pushState\"](window.history.state, \"\", url);\n    window.dispatchEvent(new Event(CHANGE));\n  },\n  subscribe: (onChange) => {\n    window.addEventListener(\"popstate\", onChange);\n    window.addEventListener(CHANGE, onChange);\n    return () => {\n      window.removeEventListener(\"popstate\", onChange);\n      window.removeEventListener(CHANGE, onChange);\n    };\n  },\n};\n\nconst AdapterContext = React.createContext<RouteAdapter>(browserAdapter);\n\nexport interface RouteStateProviderProps {\n  /** How your router reads the query string, navigates and tells about changes. */\n  adapter: RouteAdapter;\n  children: React.ReactNode;\n}\n\n/** Gives `useRouteState` your router: `<RouteStateProvider adapter={nextAdapter}>` once, in the root layout. */\nexport function RouteStateProvider({ adapter, children }: RouteStateProviderProps) {\n  return <AdapterContext.Provider value={adapter}>{children}</AdapterContext.Provider>;\n}\n\nexport interface RouteStateOptions<V extends string> {\n  /** The values the parameter may hold, as a const list: anything else in the address reads as the default. Omit for free text. */\n  values?: readonly V[];\n  /** The value when the parameter is absent. It is never written to the address (a clean URL). */\n  default: V;\n  /** `push` (the default) keeps each change in the history, `replace` overwrites it: use `replace` for a filter typed or toggled in passing. */\n  history?: \"push\" | \"replace\";\n}\n\n/** The value a query string holds for `key`, checked against `values`. Pure: the hook and the tests share it. */\nexport function readRouteValue<V extends string>(search: string, key: string, { values, default: fallback }: Pick<RouteStateOptions<V>, \"values\" | \"default\">): V {\n  const raw = new URLSearchParams(search).get(key);\n  if (raw === null) return fallback;\n  return !values || (values as readonly string[]).includes(raw) ? (raw as V) : fallback;\n}\n\n/** The query string with `key` set to `value` (removed when it is the default); every other parameter is kept. Pure. */\nexport function writeRouteValue(search: string, key: string, value: string, fallback: string): string {\n  const params = new URLSearchParams(search);\n  if (value === fallback) params.delete(key);\n  else params.set(key, value);\n  const text = params.toString();\n  return text ? `?${text}` : \"\";\n}\n\n/**\n * A value kept in the URL's search parameter `key`: `const [type, setType] = useRouteState(\"type\", { values: TYPES, default: \"auto\" })`\n * with `const TYPES = [\"auto\", \"lease\", \"contract\", \"invoice\", \"other\"] as const`. The value is typed from the list, an\n * unknown one in the address reads as the default, the default is not written, other parameters are kept.\n * `key` undefined makes the hook inert (it returns the default) so a component can call it unconditionally.\n */\nexport function useRouteState<V extends string>(key: string | undefined, { values, default: fallback, history = \"push\" }: RouteStateOptions<V>): readonly [V, (next: V) => void] {\n  const adapter = React.useContext(AdapterContext);\n  const search = React.useSyncExternalStore(adapter.subscribe, adapter.search, () => \"\");\n  const value = key === undefined ? fallback : readRouteValue(search, key, { values, default: fallback });\n  const set = React.useCallback(\n    (next: V) => {\n      if (key === undefined) return;\n      adapter.navigate(writeRouteValue(adapter.search(), key, next, fallback), { replace: history === \"replace\" });\n    },\n    [adapter, key, fallback, history],\n  );\n  return [value, set] as const;\n}\n\n/** What a selection component spreads on its root: `value` and `onValueChange` bound to the URL when `routeKey` is set. */\nexport interface RouteBindable {\n  value?: string | null;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/** The props of a selection component bound to the URL (`routeKey`), or its own, unchanged, when there is no `routeKey`. */\nexport function useRouteBinding<P extends RouteBindable>(routeKey: string | undefined, routeValues: readonly string[] | undefined, props: P): P {\n  const initial = props.defaultValue ?? props.value ?? routeValues?.[0] ?? \"\";\n  const [value, set] = useRouteState<string>(routeKey, { values: routeValues, default: initial });\n  if (routeKey === undefined) return props;\n  return {\n    ...props,\n    value,\n    defaultValue: undefined,\n    onValueChange: (next: string) => {\n      set(next);\n      props.onValueChange?.(next);\n    },\n  };\n}\n","// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\n/**\n * `item`: the selector of an item; `active`: of the current one, where the light rests; `prefer`: an item that, when\n * present, holds the light before the current one (the NavBar's open menu); `follow`: the light follows the pointer\n * and the focus — over anything that is not an item (an open menu's panel) it goes back to rest.\n */\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, prefer, follow = false }: { item: string; active: string; prefer?: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(\n    () => {\n      const list = ref.current;\n      // An item re-rendered under a resting pointer (a menu closing) keeps the light the pointer gave it.\n      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;\n      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);\n    },\n    [place, active, prefer, item, follow],\n  );\n  const follow_ = React.useCallback((target: EventTarget) => {\n    const hit = target instanceof Element ? target.closest(item) : null;\n    if (hit && ref.current?.contains(hit)) place(hit);\n    else rest();\n  }, [item, place, rest]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => follow_(e.target),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => follow_(e.target),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n","import { createTV } from \"tailwind-variants\";\n\nimport { twMergeConfig } from \"./cn\";\n\n/** `tv` with the preset's utilities known to the merge engine (`twMergeConfig`): what a primitive wearing the material is styled with. */\nexport const tv = createTV({ twMergeConfig });\n","// Client (a radio group). The language of the account, labelled, each language named in its own language, saved per user\n// (the caller saves on change or with its section). Segmented: one light gliding to the choice.\nimport * as React from \"react\";\n\nimport { RadioGroup } from \"../radio-group\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface LanguageOption {\n  /** The BCP 47 code (`fr`, `en`): the value, and the `lang` of the name. */\n  code: string;\n  /** Its native name (`Français`, `English`) — never the current language's name for it. */\n  name: string;\n}\n\nexport type LanguagePickerProps = Omit<React.ComponentProps<typeof RadioGroup.Root>, \"children\" | \"variant\" | \"label\" | \"aria-labelledby\"> & {\n  /** The visible label (“Language”) — passed translated. */\n  label: React.ReactNode;\n  /**\n   * Shows the label above the control; `false` when a `SettingsRow` already says it (the group keeps its accessible name).\n   * @default true\n   */\n  showLabel?: boolean;\n  /** One line under it: what it changes. */\n  description?: React.ReactNode;\n  /** The languages offered. */\n  languages: readonly LanguageOption[];\n  /** The chosen code (controlled). */\n  value?: string;\n  /** The viewer chooses another language. */\n  onValueChange?: (code: string) => void;\n};\n\n/** The language control of an account page: a labelled segmented choice, native names. */\nexport function LanguagePicker({ label, showLabel = true, description, languages, className, ...props }: LanguagePickerProps) {\n  const id = React.useId();\n  return (\n    <div className={[\"flex flex-col gap-2\", className].filter(Boolean).join(\" \")}>\n      {showLabel ? <GroupHead id={`${id}-label`} label={label} description={description} /> : null}\n      <RadioGroup.Root variant=\"segmented\" aria-label={showLabel ? undefined : String(label)} aria-labelledby={showLabel ? `${id}-label` : undefined} {...props}>\n        {languages.map((language) => (\n          <RadioGroup.Segment key={language.code} value={language.code} lang={language.code}>\n            {language.name}\n          </RadioGroup.Segment>\n        ))}\n      </RadioGroup.Root>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs","jsx","jsxs","React","RadioGroupPrimitive","React","jsx","React","tv","jsx","jsxs","tv","RadioGroupPrimitive","jsx","jsxs","React","jsx","jsxs"]}
+{"version":3,"sources":["../src/badge/badge.tsx","../src/badge/recipe.ts","../src/account-settings/account-profile-card.tsx","../src/account-settings/avatar-picker.tsx","../src/account-settings/group-head.tsx","../src/account-settings/choice-cards.tsx","../src/radio-group/radio-group.tsx","../src/sliding-indicator.ts","../src/tv.ts","../src/account-settings/language-picker.tsx"],"sourcesContent":["// Server-safe: no hook, no context.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { badgeRecipe } from \"./recipe\";\n\n// Status tones are soft (a tint, a coloured dot, a text role): the invariant status tokens are too light to carry\n// small text on a light surface, or to sit under white text (WCAG AA).\nexport const badgeVariants = tv(badgeRecipe);\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  BadgeVariants & {\n    /**\n     * neutral · accent · success · warning · danger (soft tints, the text stays a text role) · scrim (on a media).\n     * @default \"neutral\"\n     */\n    tone?: BadgeVariants[\"tone\"];\n    /**\n     * sm · md.\n     * @default \"sm\"\n     */\n    size?: BadgeVariants[\"size\"];\n    /** Makes the `dot` pulse (stopped under reduced motion). */\n    pulse?: BadgeVariants[\"pulse\"];\n    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */\n    dot?: boolean;\n  };\n\nexport function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps) {\n  return (\n    <span data-tone={tone ?? \"neutral\"} className={badgeVariants({ tone, size, pulse, className })} {...props}>\n      {dot && <span data-dot=\"\" aria-hidden className=\"h-1.5 w-1.5 rounded-full bg-current\" />}\n      {children}\n    </span>\n  );\n}\n","// The badge's tones and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(badgeRecipe)`,\n// React Native reads the same classes into styles (native/badge.tsx). Status tones are soft (a tint, a coloured dot, a\n// text role): the invariant status tokens are too light to carry small text on a light surface, or to sit under white\n// text (WCAG AA).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const badgeRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm font-semibold \",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n","// Server-safe. Who the account is, at a glance: the picture with its change action, the name, the e-mail and whether it is\n// verified, since when. The head of a profile section.\nimport type * as React from \"react\";\n\nimport { Avatar, type AvatarProps } from \"../avatar/avatar\";\nimport { Badge } from \"../badge/badge\";\nimport { cn } from \"../cn\";\n\nexport type AccountProfileCardProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The name (the card's heading). */\n  name: string;\n  /** The e-mail address. */\n  email: string;\n  /** Whether the address is verified. */\n  verified: boolean;\n  /** “Verified” — passed translated. */\n  verifiedLabel: string;\n  /** “Not verified” — passed translated. */\n  unverifiedLabel: string;\n  /** “Member since October 2026” — formatted by the app, in the viewer's language. */\n  memberSince?: string;\n  /** The picture: the person's photo, or the default avatar of the brand. */\n  avatar?: Pick<AvatarProps, \"src\" | \"defaultAvatar\" | \"fallback\">;\n  /** Beside the picture: the change action (a `Button`). */\n  action?: React.ReactNode;\n  /**\n   * One calm line for a settings row: a medium picture beside the name and the e-mail, no wrapping.\n   * @default false\n   */\n  compact?: boolean;\n};\n\n/** The account's identity card: picture, name, verified e-mail, member since. */\nexport function AccountProfileCard({ name, email, verified, verifiedLabel, unverifiedLabel, memberSince, avatar, action, compact, className, ...props }: AccountProfileCardProps) {\n  return (\n    <section aria-label={name} className={cn(\"flex items-center gap-3\", !compact && \"flex-col items-start gap-4 sm:flex-row sm:gap-5\", className)} {...props}>\n      <div className=\"flex shrink-0 flex-col items-center gap-2\">\n        <Avatar size={compact ? \"md\" : \"xl\"} alt=\"\" fallback={name.slice(0, 1)} {...avatar} />\n        {action}\n      </div>\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        <h2 className={cn(\"m-0 truncate font-bold text-fg\", compact ? \"text-sm font-medium\" : \"text-lg\")}>{name}</h2>\n        <p className=\"m-0 flex flex-wrap items-center gap-2 text-sm text-fg-secondary\">\n          <span className=\"min-w-0 truncate\">{email}</span>\n          <Badge tone={verified ? \"success\" : \"warning\"} dot>\n            {verified ? verifiedLabel : unverifiedLabel}\n          </Badge>\n        </p>\n        {memberSince ? <p className=\"text-sm text-fg-secondary\">{memberSince}</p> : null}\n      </div>\n    </section>\n  );\n}\n","// Client (a radio group). The pictures of a person to choose from — the family's default avatars, a few photos — as a grid of\n// round tiles: one named radiogroup, one tab stop, the arrows choose, a ring and a check on the chosen one.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { type DefaultAvatar, defaultAvatarUrl } from \"../avatar/default-avatar\";\nimport { cn } from \"../cn\";\nimport { CheckGlyph } from \"../glyphs\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface AvatarOption {\n  /** The value of the choice. */\n  id: string;\n  /** Its name for assistive technology (“Teinte 3”) — passed translated. */\n  label: string;\n  /** A picture's address; otherwise `defaultAvatar` draws one of the family's pictures. */\n  src?: string;\n  /** One of Krizaka's default pictures (`{ brand, tone }`). */\n  defaultAvatar?: DefaultAvatar;\n}\n\nexport type AvatarPickerProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Root>, \"children\" | \"onChange\" | \"dir\"> & {\n  /** The group's accessible name (“Profile picture”) — passed translated. */\n  label: string;\n  /**\n   * Smaller tiles, for a settings row.\n   * @default false\n   */\n  dense?: boolean;\n  /** Shows the label above the grid, with `description` under it. */\n  showLabel?: boolean;\n  /** One line under the visible label: what it changes. */\n  description?: React.ReactNode;\n  /** The pictures. */\n  options: readonly AvatarOption[];\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The viewer chooses another picture. */\n  onValueChange?: (id: string) => void;\n  /** After the pictures, in the grid: the upload action (a `Button`, a file input's label). Not a radio. */\n  upload?: React.ReactNode;\n};\n\nconst pictureOf = (option: AvatarOption) => option.src ?? (option.defaultAvatar ? defaultAvatarUrl(option.defaultAvatar, { size: 256 }) : undefined);\n\n/** A grid of pictures to choose from, with an upload beside them: a radio group, never a row of loose radios. */\nexport function AvatarPicker({ label, showLabel, description, dense, options, upload, className, ...props }: AvatarPickerProps) {\n  const id = React.useId();\n  const group = (\n    <RadioGroupPrimitive.Root aria-label={label} aria-labelledby={showLabel ? id : undefined} className={cn(dense ? \"flex flex-wrap gap-2.5\" : \"grid grid-cols-[repeat(auto-fill,minmax(4.25rem,1fr))] gap-3\", !showLabel && className)} {...props}>\n      {options.map((option) => (\n        <RadioGroupPrimitive.Item\n          key={option.id}\n          value={option.id}\n          aria-label={option.label}\n          className={cn(\n            \"group/avatar relative shrink-0 rounded-full\", dense ? \"h-12 w-12\" : \"aspect-square w-full\",\n            \" outline-none transition-shadow duration-200 motion-reduce:transition-none\",\n            \"ring-1 ring-border-default hover:ring-border-strong focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent\",\n          )}\n        >\n          <img src={pictureOf(option)} alt=\"\" draggable={false} className=\"h-full w-full rounded-full bg-surface-3 object-cover\" />\n          <span\n            aria-hidden\n            className=\"absolute -bottom-0.5 -right-0.5 hidden h-5 w-5 items-center justify-center rounded-full border-2 border-surface-1 bg-accent text-on-accent group-data-[state=checked]/avatar:inline-flex\"\n          >\n            <CheckGlyph className=\"h-3 w-3\" />\n          </span>\n        </RadioGroupPrimitive.Item>\n      ))}\n      {upload ? <div className=\"flex aspect-square w-full items-center justify-center\">{upload}</div> : null}\n    </RadioGroupPrimitive.Root>\n  );\n  if (!showLabel) return group;\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)}>\n      <GroupHead id={id} label={label} description={description} />\n      {group}\n    </div>\n  );\n}\n","import type * as React from \"react\";\n\n/** The visible label (and one line of help) of a radio group: the group's `aria-labelledby` points at it. */\nexport function GroupHead({ id, label, description }: { id: string; label: React.ReactNode; description?: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      <span id={id} className=\"text-sm font-medium text-fg\">\n        {label}\n      </span>\n      {description ? <span className=\"text-sm text-fg-secondary\">{description}</span> : null}\n    </div>\n  );\n}\n","// Client (a radio group). A single choice as selectable cards — an icon, a title, one line: the side of a lease, a plan, a\n// way to get the answer. Built on `RadioGroup.Card`, so the arrows choose, the card is the radio, the check lights up.\nimport * as React from \"react\";\n\nimport { RadioGroup } from \"../radio-group\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface ChoiceCardOption {\n  /** The value of the choice. */\n  id: string;\n  /** Its name, short. */\n  title: React.ReactNode;\n  /** One line under the title: what it means. It describes the radio. */\n  description?: React.ReactNode;\n  /** A glyph before the title (decorative). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport type ChoiceCardsProps = Omit<React.ComponentProps<typeof RadioGroup.Root>, \"children\" | \"variant\" | \"label\"> & {\n  /** The question (“Which side of the lease are you?”) — the group's accessible name, passed translated. */\n  label: string;\n  /** Shows the question above the cards, with `description` under it. */\n  showLabel?: boolean;\n  /** One line under the visible question. */\n  description?: React.ReactNode;\n  /** The choices. */\n  options: readonly ChoiceCardOption[];\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The viewer chooses another card. */\n  onValueChange?: (id: string) => void;\n};\n\n/** Cards to choose one from: a radio group where each card has an icon, a title and a description. */\nexport function ChoiceCards({ label, showLabel, description, options, className, ...props }: ChoiceCardsProps) {\n  const base = React.useId();\n  const group = (\n    <RadioGroup.Root variant=\"cards\" label={label} aria-labelledby={showLabel ? `${base}-label` : undefined} className={[\"grid grid-cols-1 gap-3 sm:grid-cols-2\", !showLabel && className].filter(Boolean).join(\" \")} {...props}>\n      {options.map((option) => {\n        const describedBy = option.description ? `${base}-${option.id}` : undefined;\n        return (\n          <RadioGroup.Card key={option.id} value={option.id} disabled={option.disabled} aria-describedby={describedBy}>\n            <span className=\"flex items-center gap-2.5 font-semibold text-fg [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-accent\">\n              {option.icon}\n              {option.title}\n            </span>\n            {option.description ? (\n              <span id={describedBy} className=\"text-sm font-normal text-fg-secondary\">\n                {option.description}\n              </span>\n            ) : null}\n          </RadioGroup.Card>\n        );\n      })}\n    </RadioGroup.Root>\n  );\n  if (!showLabel) return group;\n  return (\n    <div className={[\"flex flex-col gap-3\", className].filter(Boolean).join(\" \")}>\n      <GroupHead id={`${base}-label`} label={label} description={description} />\n      {group}\n    </div>\n  );\n}\n","// Client (a context). Radix RadioGroup: role=\"radiogroup\" / \"radio\", one tab stop, the arrows move and select, a\n// hidden input inside a form. Four looks, one behaviour:\n// - `RadioGroup.Item`: a dot and its words (a settings list);\n// - `RadioGroup.Card`: a whole card is the radio — an amount, a pack, a plan — its check lit when chosen;\n// - `RadioGroup.Button`: a tactile key that presses in — raised on a ledge, sunk when chosen (a size, a tip, a level);\n// - `RadioGroup.Segment` in `<RadioGroup.Root variant=\"segmented\">`: a segmented control, one light gliding to the choice.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { CheckGlyph } from \"../glyphs\";\nimport { useRouteBinding } from \"../router\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { tv } from \"../tv\";\n\nexport const radioGroup = tv({\n  slots: {\n    root: \"grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap\",\n    item:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-control bg-surface-1 inset-shadow-well transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger\",\n    dot: \"h-2 w-2 rounded-full bg-on-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n    card:\n      \"group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge \" +\n      \"transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow\",\n    // The card's check: an empty ring at rest, the accent filled with its check once chosen.\n    cardCheck:\n      \"absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-control bg-surface-1 text-on-accent transition-colors \" +\n      \"group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent\",\n    // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.\n    button:\n      \"relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 \" +\n      \"text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] \" +\n      \"transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none \" +\n      \"hover:border-border-strong \" +\n      \"active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade \" +\n      \"data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]\",\n    buttonHint: \"text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent\",\n    segmented:\n      \"relative isolate inline-grid auto-cols-fr grid-flow-col gap-1 rounded-xl border border-border-default bg-surface-2 p-1 inset-shadow-well \" +\n      \"before:pointer-events-none before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) \" +\n      \"before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:border before:border-border-default before:bg-surface-0 before:bg-sheen \" +\n      \"before:opacity-0 before:shadow-raised before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    segment:\n      \"inline-flex min-h-9 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 text-sm font-semibold text-fg-secondary transition-colors \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border data-[state=checked]:border-border-default data-[state=checked]:bg-surface-0 data-[state=checked]:text-fg data-[state=checked]:shadow-raised \" +\n      \"group-data-[indicator=on]/seg:data-[state=checked]:border-transparent group-data-[indicator=on]/seg:data-[state=checked]:bg-transparent group-data-[indicator=on]/seg:data-[state=checked]:shadow-none\",\n  },\n  variants: {\n    variant: {\n      list: {},\n      cards: { root: \"grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3\" },\n      buttons: { root: \"flex flex-wrap gap-2.5 pb-1\" },\n      segmented: {},\n    },\n  },\n  defaultVariants: { variant: \"list\" },\n});\nconst s = radioGroup();\n\nexport type RadioGroupRootProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */\n  label?: string;\n  /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */\n  invalid?: boolean;\n  /**\n   * The layout of the radios: `list` (dots), `cards` (a grid of `Card`s), `buttons` (a row of tactile `Button`s), or\n   * `segmented` (a track of `Segment`s, one light gliding to the choice).\n   * @default \"list\"\n   */\n  variant?: \"list\" | \"cards\" | \"buttons\" | \"segmented\";\n  /** Binds the choice to this search parameter of the URL (`?kind=…`): the URL is the state — for a view's selection (a segmented switch), not a form field. */\n  routeKey?: string;\n  /** The values the parameter may hold (the radios' `value`s); the first is the default unless `defaultValue` says otherwise. */\n  routeValues?: readonly string[];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, routeKey, routeValues, ...rest }: RadioGroupRootProps) {\n  const props = useRouteBinding(routeKey, routeValues, rest);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=radio]\", active: \"[role=radio][data-state=checked]\" });\n  const segmented = variant === \"segmented\";\n  return (\n    <RadioGroupPrimitive.Root\n      ref={segmented ? ref : undefined}\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-variant={variant}\n      orientation={segmented ? \"horizontal\" : props.orientation}\n      className={segmented ? s.segmented({ className: [\"group/seg\", className].filter(Boolean).join(\" \") }) : radioGroup({ variant }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A radio: a dot, and its words when given. */\nexport function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps) {\n  const item = (\n    <RadioGroupPrimitive.Item className={s.item({ className: children ? \"mt-0.5\" : className })} {...props}>\n      <RadioGroupPrimitive.Indicator className={s.dot()} />\n    </RadioGroupPrimitive.Item>\n  );\n  if (!children) return item;\n  return (\n    <label className={s.label({ className })}>\n      {item}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n\n/** A whole card as the radio: its content is the radio's name; its check lights up when chosen. */\nexport function RadioGroupCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item className={s.card({ className })} {...props}>\n      {children}\n      <span aria-hidden className={s.cardCheck()}>\n        <RadioGroupPrimitive.Indicator forceMount className=\"inline-flex data-[state=unchecked]:hidden\">\n          <CheckGlyph className=\"h-3 w-3\" />\n        </RadioGroupPrimitive.Indicator>\n      </span>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport type RadioGroupButtonProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  /** A second line under the words (\"+15 %\"), part of the radio's name. */\n  hint?: React.ReactNode;\n};\n\n/** A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level. */\nexport function RadioGroupButton({ className, children, hint, ...props }: RadioGroupButtonProps) {\n  return (\n    <RadioGroupPrimitive.Item className={s.button({ className: [\"group\", className].filter(Boolean).join(\" \") })} {...props}>\n      <span>{children}</span>\n      {hint ? <span className={s.buttonHint()}>{hint}</span> : null}\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A segment of a `variant=\"segmented\"` group: equal widths, one light gliding to the choice. */\nexport function RadioGroupSegment({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.segment({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card/Button/Segment`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };\n","// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\n/**\n * `item`: the selector of an item; `active`: of the current one, where the light rests; `prefer`: an item that, when\n * present, holds the light before the current one (the NavBar's open menu); `follow`: the light follows the pointer\n * and the focus — over anything that is not an item (an open menu's panel) it goes back to rest.\n */\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, prefer, follow = false }: { item: string; active: string; prefer?: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(\n    () => {\n      const list = ref.current;\n      // An item re-rendered under a resting pointer (a menu closing) keeps the light the pointer gave it.\n      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;\n      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);\n    },\n    [place, active, prefer, item, follow],\n  );\n  const follow_ = React.useCallback((target: EventTarget) => {\n    const hit = target instanceof Element ? target.closest(item) : null;\n    if (hit && ref.current?.contains(hit)) place(hit);\n    else rest();\n  }, [item, place, rest]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => follow_(e.target),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => follow_(e.target),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n","import { createTV } from \"tailwind-variants\";\n\nimport { twMergeConfig } from \"./cn\";\n\n/** `tv` with the preset's utilities known to the merge engine (`twMergeConfig`): what a primitive wearing the material is styled with. */\nexport const tv = createTV({ twMergeConfig });\n","// Client (a radio group). The language of the account, labelled, each language named in its own language, saved per user\n// (the caller saves on change or with its section). Segmented: one light gliding to the choice.\nimport * as React from \"react\";\n\nimport { RadioGroup } from \"../radio-group\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface LanguageOption {\n  /** The BCP 47 code (`fr`, `en`): the value, and the `lang` of the name. */\n  code: string;\n  /** Its native name (`Français`, `English`) — never the current language's name for it. */\n  name: string;\n}\n\nexport type LanguagePickerProps = Omit<React.ComponentProps<typeof RadioGroup.Root>, \"children\" | \"variant\" | \"label\" | \"aria-labelledby\"> & {\n  /** The visible label (“Language”) — passed translated. */\n  label: React.ReactNode;\n  /**\n   * Shows the label above the control; `false` when a `SettingsRow` already says it (the group keeps its accessible name).\n   * @default true\n   */\n  showLabel?: boolean;\n  /** One line under it: what it changes. */\n  description?: React.ReactNode;\n  /** The languages offered. */\n  languages: readonly LanguageOption[];\n  /** The chosen code (controlled). */\n  value?: string;\n  /** The viewer chooses another language. */\n  onValueChange?: (code: string) => void;\n};\n\n/** The language control of an account page: a labelled segmented choice, native names. */\nexport function LanguagePicker({ label, showLabel = true, description, languages, className, ...props }: LanguagePickerProps) {\n  const id = React.useId();\n  return (\n    <div className={[\"flex flex-col gap-2\", className].filter(Boolean).join(\" \")}>\n      {showLabel ? <GroupHead id={`${id}-label`} label={label} description={description} /> : null}\n      <RadioGroup.Root variant=\"segmented\" aria-label={showLabel ? undefined : String(label)} aria-labelledby={showLabel ? `${id}-label` : undefined} {...props}>\n        {languages.map((language) => (\n          <RadioGroup.Segment key={language.code} value={language.code} lang={language.code}>\n            {language.name}\n          </RadioGroup.Segment>\n        ))}\n      </RadioGroup.Root>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs","jsx","jsxs","React","RadioGroupPrimitive","React","tv","jsx","jsxs","tv","RadioGroupPrimitive","jsx","jsxs","React","jsx","jsxs"]}

package/dist/anatomy-plate.d.ts

@@ -20,7 +20,10 @@ type AnatomyPlateProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     /** The specimen's scale on a wide screen (it is drawn at 1 on a phone). @default 1.6 */
     scale?: number;
 };
-/** A component's anatomy as a naturalist's plate: the specimen in the middle, its numbered parts and their reasons around it. */
+/**
+ * A component's anatomy as a naturalist's plate: the specimen in the middle, its numbered parts and their reasons around it.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function AnatomyPlate({ title, subtitle, parts, children, scale, className, style, ...props }: AnatomyPlateProps): React.JSX.Element;
 
 export { type AnatomyPart, AnatomyPlate, type AnatomyPlateProps };

package/dist/anatomy-plate.js

@@ -1,3 +1,6 @@
+import {
+  warnDeprecated
+} from "./chunk-KGLRZMCY.js";
 import {
   cn
 } from "./chunk-W675RFOA.js";
@@ -5,6 +8,7 @@ import {
 // src/anatomy-plate/anatomy-plate.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function AnatomyPlate({ title, subtitle, parts, children, scale = 1.6, className, style, ...props }) {
+  warnDeprecated("anatomy-plate");
   const numbered = parts.map((p, i) => ({ ...p, n: i + 1, side: p.side ?? (i % 2 === 0 ? "left" : "right") }));
   const column = (side) => /* @__PURE__ */ jsx("ol", { className: "kz-anatomy-parts", "data-side": side, children: numbered.filter((p) => p.side === side).map((p) => /* @__PURE__ */ jsxs("li", { value: p.n, className: "kz-anatomy-part", children: [
     /* @__PURE__ */ jsx("span", { className: "kz-anatomy-n", "aria-hidden": true, children: p.n }),