@krizaka/ui 3.34.0 → 3.36.0

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/radio-group/radio-group.tsx"],"sourcesContent":["// 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 { 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-60\",\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};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, ...props }: RadioGroupRootProps) {\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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/radio-group/radio-group.tsx"],"sourcesContent":["// 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 { 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};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, ...props }: RadioGroupRootProps) {\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"],"mappings":"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","names":[]}

package/dist/rail-nav.js

@@ -53,7 +53,7 @@ var railNav = tv({
     shell: "flex min-h-dvh w-full bg-surface-0 text-fg",
     root: (
       // Phone: a bottom tab bar, clear of the home indicator. Desktop: a sticky column that is only as wide as its icons.
-      "fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 md:backdrop-blur-none md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56"
+      "fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1 pb-[env(safe-area-inset-bottom)] md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56"
     ),
     // The mark is the rail's on a desktop; hidden on a phone (the header carries it there).
     mark: "hidden h-14 w-full shrink-0 items-center justify-center md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-4",

package/dist/rail-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tooltip/tooltip.tsx","../src/floating.ts","../src/rail-nav/rail-nav.tsx"],"sourcesContent":["// Client (a portal). A short label for a control, on hover after `delayDuration` and on keyboard focus at once;\n// Escape dismisses it. It names nothing: the control keeps its own accessible name (an IconButton's `label`).\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\n/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, \"content\" | \"children\"> & {\n  /** What the tooltip says — passed translated. */\n  content: React.ReactNode;\n  /** The trigger, rendered as is (`asChild`): a focusable element. */\n  children: React.ReactNode;\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Hover delay in ms before it opens (300 by default). */\n  delayDuration?: number;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function Tooltip({\n  content,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration = 300,\n  container,\n  sideOffset = 6,\n  collisionPadding = 8,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(floating, \"max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)\", className)}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\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 (the expand state, the arrow keys, the tooltip). The compact navigation of an application, read from Orazaka's\n// web client: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, the current one\n// marked by an accent bar on its left edge, a footer for settings and the account — that becomes a bottom tab bar on a\n// phone. The same nodes in both: only the layout changes, so the items, their order and their words are written once.\n// The mark lives in the rail on a desktop; on a phone, where the rail has no room for it, `AppHeader` shows it (the rule\n// « one mark visible at every width »). Brand-aware through the tokens: `accent` scopes `.brand-<id>`.\nimport { Tooltip } from \"@krizaka/ui/tooltip\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph } from \"../glyphs\";\nimport type { BrandId } from \"../marks/ProductLogo\";\n\nexport const railNav = tv({\n  slots: {\n    shell: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    root:\n      // Phone: a bottom tab bar, clear of the home indicator. Desktop: a sticky column that is only as wide as its icons.\n      \"fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl \" +\n      \"md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 md:backdrop-blur-none \" +\n      \"md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56\",\n    // The mark is the rail's on a desktop; hidden on a phone (the header carries it there).\n    mark: \"hidden h-14 w-full shrink-0 items-center justify-center md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-4\",\n    group: \"flex min-w-0 flex-row items-stretch md:flex-col md:items-center md:gap-1 md:px-1.5 md:group-data-expanded/rail:items-stretch\",\n    main: \"max-md:grow-(--rail-n) md:flex-1 md:py-2\",\n    foot: \"max-md:grow-(--rail-n) md:border-t md:border-border-subtle md:py-2\",\n    item:\n      \"group/item relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 px-1 text-[11px] font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg-accent \" +\n      // The accent bar: on the top edge of a tab, on the left edge of a rail item.\n      \"before:absolute before:inset-x-3 before:top-0 before:h-[3px] before:rounded-b-full before:bg-accent before:opacity-0 before:transition-opacity aria-[current=page]:before:opacity-100 \" +\n      \"md:h-10 md:w-full md:flex-none md:flex-row md:justify-center md:gap-3 md:rounded-none md:px-0 md:text-sm \" +\n      \"md:before:inset-x-auto md:before:inset-y-2 md:before:left-0 md:before:top-2 md:before:h-auto md:before:w-[3px] md:before:rounded-r-full md:before:rounded-b-none \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0\",\n    icon: \"relative inline-flex shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    label: \"max-w-full truncate leading-none md:sr-only md:text-sm md:leading-normal md:group-data-expanded/rail:not-sr-only\",\n    badge:\n      \"absolute -right-2 -top-1.5 inline-flex min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-bold leading-4 text-on-accent after:content-[attr(data-count)]\",\n    toggle:\n      \"hidden h-10 w-full items-center justify-center gap-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset md:flex \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5\",\n    body: \"flex min-w-0 flex-1 flex-col max-md:pb-[calc(3.5rem+env(safe-area-inset-bottom))]\",\n  },\n});\nconst s = railNav();\n\ninterface RailState {\n  expanded: boolean;\n}\nconst RailContext = React.createContext<RailState | null>(null);\nconst useRail = () => {\n  const ctx = React.useContext(RailContext);\n  if (!ctx) throw new Error(\"RailNav parts must be inside <RailNav.Root>\");\n  return ctx;\n};\n\n/** The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop. */\nexport function RailNavShell({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.shell({ className })} {...props} />;\n}\n\n/** The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar. */\nexport function RailNavBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type RailNavRootProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Orazaka`, `Studio`). */\n  label: string;\n  /** The product's mark on top of the rail, as a link home (`<Link href=\"/\"><ProductLogo id=\"orazaka\" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there. */\n  mark?: React.ReactNode;\n  /** The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand. */\n  accent?: BrandId;\n  /** The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar. */\n  children: React.ReactNode;\n  /** At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`. */\n  footer?: React.ReactNode;\n  /** Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`. */\n  expandable?: boolean;\n  /** Controlled width (pair with `onExpandedChange` to keep the choice). */\n  expanded?: boolean;\n  /** The starting width when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called when the toggle widens or narrows the rail. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** The toggle's words, `[expand, collapse]`. */\n  expandLabels?: readonly [string, string];\n};\n\nconst count = (node: React.ReactNode) => React.Children.toArray(node).length;\n\n/** Moves the focus along the rail's items with the arrows (↑ ↓ on the rail, ← → on the tab bar; both always work), Home and End. */\nfunction moveFocus(event: React.KeyboardEvent<HTMLElement>) {\n  const keys: Record<string, number> = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };\n  const step = keys[event.key];\n  if (step === undefined && event.key !== \"Home\" && event.key !== \"End\") return;\n  const items = [...event.currentTarget.querySelectorAll<HTMLElement>(\"[data-rail-item]\")];\n  if (items.length === 0) return;\n  const here = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));\n  let next: number;\n  if (event.key === \"Home\") next = 0;\n  else if (event.key === \"End\") next = items.length - 1;\n  else if (here < 0) next = step > 0 ? 0 : items.length - 1;\n  else next = (here + step + items.length) % items.length;\n  event.preventDefault();\n  items[next]?.focus();\n}\n\n/** The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone. */\nexport function RailNavRoot({\n  label, mark, accent, children, footer, expandable, expanded: controlled, defaultExpanded = false, onExpandedChange, expandLabels, className, onKeyDown, ...props\n}: RailNavRootProps) {\n  const [own, setOwn] = React.useState(defaultExpanded);\n  const expanded = expandable ? (controlled ?? own) : false;\n  const toggle = () => {\n    if (controlled === undefined) setOwn(!expanded);\n    onExpandedChange?.(!expanded);\n  };\n  const value = React.useMemo(() => ({ expanded }), [expanded]);\n  return (\n    <RailContext.Provider value={value}>\n      <nav\n        aria-label={label}\n        data-expanded={expanded ? \"\" : undefined}\n        className={cn(\"group/rail\", accent && \"brand-\" + accent, s.root({ className }))}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) moveFocus(e);\n        }}\n        {...props}\n      >\n        {mark && (\n          <div data-brand-mark className={s.mark()}>\n            {mark}\n          </div>\n        )}\n        <div className={s.group({ className: s.main() })} style={{ [\"--rail-n\" as string]: Math.max(count(children), 1) }}>\n          {children}\n        </div>\n        {(footer || expandable) && (\n          <div className={s.group({ className: s.foot() })} style={{ [\"--rail-n\" as string]: Math.max(count(footer), 1) }}>\n            {footer}\n            {expandable && expandLabels && (\n              <button type=\"button\" data-rail-item className={s.toggle()} aria-expanded={expanded} onClick={toggle}>\n                <ChevronGlyph direction={expanded ? \"left\" : \"right\"} className=\"h-4 w-4 shrink-0\" />\n                <span className={expanded ? undefined : \"sr-only\"}>{expanded ? expandLabels[1] : expandLabels[0]}</span>\n              </button>\n            )}\n          </div>\n        )}\n      </nav>\n    </RailContext.Provider>\n  );\n}\n\nexport type RailNavItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail. */\n  icon: React.ReactNode;\n  /** Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded. */\n  label: string;\n  /** This is the section the user is in: `aria-current=\"page\"`, the accent bar and the accent colour. */\n  current?: boolean;\n  /** A count (unread, pending) on the icon. Say it in words with `badgeLabel`. */\n  badge?: React.ReactNode;\n  /** The count in words (« 3 unread »), appended to the accessible name. */\n  badgeLabel?: string;\n  /** Renders your router's link with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  children?: React.ReactElement;\n};\n\n/** A destination of the rail. */\nexport function RailNavItem({ icon, label, current, badge, badgeLabel, asChild, children, className, ...props }: RailNavItemProps) {\n  const { expanded } = useRail();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      <span className={s.icon()}>\n        {icon}\n        {badge != null && (typeof badge === \"string\" || typeof badge === \"number\") ? (\n          // Drawn by CSS, so the count is no text of the link: the visible text stays the label, which the name `Chat, 2 unread` contains.\n          <span className={s.badge()} data-count={badge} aria-hidden />\n        ) : (\n          badge != null && <span className={s.badge()} aria-hidden>{badge}</span>\n        )}\n      </span>\n      <span className={s.label()}>{label}</span>\n    </>\n  );\n  const link = (\n    <Comp data-rail-item aria-label={badgeLabel ? `${label}, ${badgeLabel}` : label} aria-current={current ? \"page\" : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n  // Expanded, the words are on the row; collapsed, the tooltip says them (Escape dismisses it, the keyboard focus shows it).\n  return expanded ? link : <Tooltip content={label} side=\"right\">{link}</Tooltip>;\n}\n\nexport const RailNav = {\n  Shell: RailNavShell,\n  Root: RailNavRoot,\n  Item: RailNavItem,\n  Body: RailNavBody,\n};\n"],"mappings":"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","names":["jsx","jsxs"]}
+{"version":3,"sources":["../src/tooltip/tooltip.tsx","../src/floating.ts","../src/rail-nav/rail-nav.tsx"],"sourcesContent":["// Client (a portal). A short label for a control, on hover after `delayDuration` and on keyboard focus at once;\n// Escape dismisses it. It names nothing: the control keeps its own accessible name (an IconButton's `label`).\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\n/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, \"content\" | \"children\"> & {\n  /** What the tooltip says — passed translated. */\n  content: React.ReactNode;\n  /** The trigger, rendered as is (`asChild`): a focusable element. */\n  children: React.ReactNode;\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Hover delay in ms before it opens (300 by default). */\n  delayDuration?: number;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function Tooltip({\n  content,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration = 300,\n  container,\n  sideOffset = 6,\n  collisionPadding = 8,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(floating, \"max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)\", className)}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\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 (the expand state, the arrow keys, the tooltip). The compact navigation of an application, read from Orazaka's\n// web client: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, the current one\n// marked by an accent bar on its left edge, a footer for settings and the account — that becomes a bottom tab bar on a\n// phone. The same nodes in both: only the layout changes, so the items, their order and their words are written once.\n// The mark lives in the rail on a desktop; on a phone, where the rail has no room for it, `AppHeader` shows it (the rule\n// « one mark visible at every width »). Brand-aware through the tokens: `accent` scopes `.brand-<id>`.\nimport { Tooltip } from \"@krizaka/ui/tooltip\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph } from \"../glyphs\";\nimport type { BrandId } from \"../marks/ProductLogo\";\n\nexport const railNav = tv({\n  slots: {\n    shell: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    root:\n      // Phone: a bottom tab bar, clear of the home indicator. Desktop: a sticky column that is only as wide as its icons.\n      \"fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1 pb-[env(safe-area-inset-bottom)] \" +\n      \"md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 \" +\n      \"md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56\",\n    // The mark is the rail's on a desktop; hidden on a phone (the header carries it there).\n    mark: \"hidden h-14 w-full shrink-0 items-center justify-center md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-4\",\n    group: \"flex min-w-0 flex-row items-stretch md:flex-col md:items-center md:gap-1 md:px-1.5 md:group-data-expanded/rail:items-stretch\",\n    main: \"max-md:grow-(--rail-n) md:flex-1 md:py-2\",\n    foot: \"max-md:grow-(--rail-n) md:border-t md:border-border-subtle md:py-2\",\n    item:\n      \"group/item relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 px-1 text-[11px] font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg-accent \" +\n      // The accent bar: on the top edge of a tab, on the left edge of a rail item.\n      \"before:absolute before:inset-x-3 before:top-0 before:h-[3px] before:rounded-b-full before:bg-accent before:opacity-0 before:transition-opacity aria-[current=page]:before:opacity-100 \" +\n      \"md:h-10 md:w-full md:flex-none md:flex-row md:justify-center md:gap-3 md:rounded-none md:px-0 md:text-sm \" +\n      \"md:before:inset-x-auto md:before:inset-y-2 md:before:left-0 md:before:top-2 md:before:h-auto md:before:w-[3px] md:before:rounded-r-full md:before:rounded-b-none \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0\",\n    icon: \"relative inline-flex shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    label: \"max-w-full truncate leading-none md:sr-only md:text-sm md:leading-normal md:group-data-expanded/rail:not-sr-only\",\n    badge:\n      \"absolute -right-2 -top-1.5 inline-flex min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-bold leading-4 text-on-accent after:content-[attr(data-count)]\",\n    toggle:\n      \"hidden h-10 w-full items-center justify-center gap-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset md:flex \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5\",\n    body: \"flex min-w-0 flex-1 flex-col max-md:pb-[calc(3.5rem+env(safe-area-inset-bottom))]\",\n  },\n});\nconst s = railNav();\n\ninterface RailState {\n  expanded: boolean;\n}\nconst RailContext = React.createContext<RailState | null>(null);\nconst useRail = () => {\n  const ctx = React.useContext(RailContext);\n  if (!ctx) throw new Error(\"RailNav parts must be inside <RailNav.Root>\");\n  return ctx;\n};\n\n/** The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop. */\nexport function RailNavShell({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.shell({ className })} {...props} />;\n}\n\n/** The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar. */\nexport function RailNavBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type RailNavRootProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Orazaka`, `Studio`). */\n  label: string;\n  /** The product's mark on top of the rail, as a link home (`<Link href=\"/\"><ProductLogo id=\"orazaka\" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there. */\n  mark?: React.ReactNode;\n  /** The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand. */\n  accent?: BrandId;\n  /** The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar. */\n  children: React.ReactNode;\n  /** At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`. */\n  footer?: React.ReactNode;\n  /** Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`. */\n  expandable?: boolean;\n  /** Controlled width (pair with `onExpandedChange` to keep the choice). */\n  expanded?: boolean;\n  /** The starting width when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called when the toggle widens or narrows the rail. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** The toggle's words, `[expand, collapse]`. */\n  expandLabels?: readonly [string, string];\n};\n\nconst count = (node: React.ReactNode) => React.Children.toArray(node).length;\n\n/** Moves the focus along the rail's items with the arrows (↑ ↓ on the rail, ← → on the tab bar; both always work), Home and End. */\nfunction moveFocus(event: React.KeyboardEvent<HTMLElement>) {\n  const keys: Record<string, number> = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };\n  const step = keys[event.key];\n  if (step === undefined && event.key !== \"Home\" && event.key !== \"End\") return;\n  const items = [...event.currentTarget.querySelectorAll<HTMLElement>(\"[data-rail-item]\")];\n  if (items.length === 0) return;\n  const here = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));\n  let next: number;\n  if (event.key === \"Home\") next = 0;\n  else if (event.key === \"End\") next = items.length - 1;\n  else if (here < 0) next = step > 0 ? 0 : items.length - 1;\n  else next = (here + step + items.length) % items.length;\n  event.preventDefault();\n  items[next]?.focus();\n}\n\n/** The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone. */\nexport function RailNavRoot({\n  label, mark, accent, children, footer, expandable, expanded: controlled, defaultExpanded = false, onExpandedChange, expandLabels, className, onKeyDown, ...props\n}: RailNavRootProps) {\n  const [own, setOwn] = React.useState(defaultExpanded);\n  const expanded = expandable ? (controlled ?? own) : false;\n  const toggle = () => {\n    if (controlled === undefined) setOwn(!expanded);\n    onExpandedChange?.(!expanded);\n  };\n  const value = React.useMemo(() => ({ expanded }), [expanded]);\n  return (\n    <RailContext.Provider value={value}>\n      <nav\n        aria-label={label}\n        data-expanded={expanded ? \"\" : undefined}\n        className={cn(\"group/rail\", accent && \"brand-\" + accent, s.root({ className }))}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) moveFocus(e);\n        }}\n        {...props}\n      >\n        {mark && (\n          <div data-brand-mark className={s.mark()}>\n            {mark}\n          </div>\n        )}\n        <div className={s.group({ className: s.main() })} style={{ [\"--rail-n\" as string]: Math.max(count(children), 1) }}>\n          {children}\n        </div>\n        {(footer || expandable) && (\n          <div className={s.group({ className: s.foot() })} style={{ [\"--rail-n\" as string]: Math.max(count(footer), 1) }}>\n            {footer}\n            {expandable && expandLabels && (\n              <button type=\"button\" data-rail-item className={s.toggle()} aria-expanded={expanded} onClick={toggle}>\n                <ChevronGlyph direction={expanded ? \"left\" : \"right\"} className=\"h-4 w-4 shrink-0\" />\n                <span className={expanded ? undefined : \"sr-only\"}>{expanded ? expandLabels[1] : expandLabels[0]}</span>\n              </button>\n            )}\n          </div>\n        )}\n      </nav>\n    </RailContext.Provider>\n  );\n}\n\nexport type RailNavItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail. */\n  icon: React.ReactNode;\n  /** Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded. */\n  label: string;\n  /** This is the section the user is in: `aria-current=\"page\"`, the accent bar and the accent colour. */\n  current?: boolean;\n  /** A count (unread, pending) on the icon. Say it in words with `badgeLabel`. */\n  badge?: React.ReactNode;\n  /** The count in words (« 3 unread »), appended to the accessible name. */\n  badgeLabel?: string;\n  /** Renders your router's link with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  children?: React.ReactElement;\n};\n\n/** A destination of the rail. */\nexport function RailNavItem({ icon, label, current, badge, badgeLabel, asChild, children, className, ...props }: RailNavItemProps) {\n  const { expanded } = useRail();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      <span className={s.icon()}>\n        {icon}\n        {badge != null && (typeof badge === \"string\" || typeof badge === \"number\") ? (\n          // Drawn by CSS, so the count is no text of the link: the visible text stays the label, which the name `Chat, 2 unread` contains.\n          <span className={s.badge()} data-count={badge} aria-hidden />\n        ) : (\n          badge != null && <span className={s.badge()} aria-hidden>{badge}</span>\n        )}\n      </span>\n      <span className={s.label()}>{label}</span>\n    </>\n  );\n  const link = (\n    <Comp data-rail-item aria-label={badgeLabel ? `${label}, ${badgeLabel}` : label} aria-current={current ? \"page\" : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n  // Expanded, the words are on the row; collapsed, the tooltip says them (Escape dismisses it, the keyboard focus shows it).\n  return expanded ? link : <Tooltip content={label} side=\"right\">{link}</Tooltip>;\n}\n\nexport const RailNav = {\n  Shell: RailNavShell,\n  Root: RailNavRoot,\n  Item: RailNavItem,\n  Body: RailNavBody,\n};\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/search-field.js

@@ -2,7 +2,7 @@
 import {
   SearchField,
   searchField
-} from "./chunk-REPTKUJ6.js";
+} from "./chunk-7NRSPHAF.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-FZBWEDQI.js";
 import "./chunk-CPA5CF35.js";

package/dist/service-card.js

@@ -19,13 +19,13 @@ var serviceCard = tv({
     titles: "flex min-w-0 flex-1 flex-col gap-1",
     name: "m-0 font-display text-lg font-bold leading-tight tracking-tight text-fg",
     facts: "m-0 flex list-none flex-wrap gap-x-2 gap-y-0.5 p-0 text-xs text-fg-secondary",
-    tag: "shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-on-accent",
+    tag: "shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold text-on-accent",
     description: "m-0 text-sm leading-relaxed text-fg-secondary",
     included: "m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-fg-secondary",
     includedItem: "flex items-start gap-2 [&>svg]:mt-0.5 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-accent",
     foot: "mt-auto flex items-end justify-between gap-3 border-t border-border-subtle pt-3",
     priceBlock: "flex flex-col leading-none",
-    from: "mb-1 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    from: "mb-1 text-[11px] font-semibold text-fg-secondary",
     price: "font-display text-2xl font-black tabular-nums text-fg",
     action: "inline-flex min-h-9 items-center gap-1 rounded-full text-sm font-bold text-fg-accent no-underline after:absolute after:inset-0 after:content-[''] focus-visible:outline-hidden group-data-[selected]:text-fg"
   }

package/dist/service-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/service-card/service-card.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A service a shop sells, as a card that argues: icon or photo, name, duration, price\n// (« from » when it varies), what is included, the capacity, a « Popular » tag — and one way in: a link (the booking page\n// with this service chosen) or a button (`onSelect`, from a client parent). The whole card takes the press.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { CheckGlyph } from \"../glyphs\";\n\nexport const serviceCard = tv({\n  slots: {\n    root:\n      \"group relative flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 text-fg transition-colors duration-150 hover:border-border-strong hover:bg-surface-2 \" +\n      \"hover:border-accent/50 focus-within:ring-2 focus-within:ring-ring data-[selected]:border-accent data-[selected]:bg-accent-soft\",\n    media: \"relative aspect-[16/9] w-full overflow-hidden bg-media [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    body: \"flex flex-1 flex-col gap-3 p-4 sm:p-5\",\n    head: \"flex items-start gap-3\",\n    icon: \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-fg-accent [&>svg]:h-5 [&>svg]:w-5\",\n    titles: \"flex min-w-0 flex-1 flex-col gap-1\",\n    name: \"m-0 font-display text-lg font-bold leading-tight tracking-tight text-fg\",\n    facts: \"m-0 flex list-none flex-wrap gap-x-2 gap-y-0.5 p-0 text-xs text-fg-secondary\",\n    tag: \"shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-on-accent\",\n    description: \"m-0 text-sm leading-relaxed text-fg-secondary\",\n    included: \"m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-fg-secondary\",\n    includedItem: \"flex items-start gap-2 [&>svg]:mt-0.5 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-accent\",\n    foot: \"mt-auto flex items-end justify-between gap-3 border-t border-border-subtle pt-3\",\n    priceBlock: \"flex flex-col leading-none\",\n    from: \"mb-1 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    price: \"font-display text-2xl font-black tabular-nums text-fg\",\n    action:\n      \"inline-flex min-h-9 items-center gap-1 rounded-full text-sm font-bold text-fg-accent no-underline \" +\n      \"after:absolute after:inset-0 after:content-[''] focus-visible:outline-hidden group-data-[selected]:text-fg\",\n  },\n});\nconst s = serviceCard();\n\nexport type ServiceCardProps = Omit<React.ComponentProps<\"article\">, \"title\" | \"children\"> & {\n  /** The service's name (the heading). */\n  name: string;\n  /** Its price, formatted by the app (`22,00 $`): the card never formats money. */\n  price: string;\n  /** The words before the price when it varies (`From`, `À partir de`), passed translated. */\n  priceFrom?: string;\n  /** How long it takes (`30 min`) — the first fact. */\n  duration?: string;\n  /** How many it takes (`Up to 5 dogs`, `1 person`) — the second fact. */\n  capacity?: string;\n  /** One or two sentences: what it is. */\n  description?: string;\n  /** What is included, one short line each (a check precedes it). */\n  included?: readonly string[];\n  /** A tag on the top right (`Popular`): only from real data, never decoration. */\n  tag?: string;\n  /** An icon tile before the name (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A photo or a loop above the card (an `img`, a `video`): fills a 16:9 band. */\n  media?: React.ReactNode;\n  /** This service is the chosen one (the accent, `data-selected`). */\n  selected?: boolean;\n  /** The words of the way in (`Book`, `Choose`): the accessible name of the press. */\n  actionLabel: string;\n  /** The way in, as an address (the booking page with this service preselected). */\n  href?: string;\n  /** The app's link component for internal addresses (Next's `Link`). */\n  linkAs?: LinkComponent;\n  /** The way in, as a press (a client parent). Ignored when `href` is set. */\n  onSelect?: () => void;\n  /**\n   * The heading level of the name.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\";\n  /** Enters on scroll (MotionObserver): the index in the grid becomes the delay. */\n  reveal?: number;\n};\n\n/** A service as a card: icon or photo, duration, price, what is included, the capacity, a tag — one way in. */\nexport function ServiceCard({\n  name, price, priceFrom, duration, capacity, description, included, tag, icon, media, selected, actionLabel, href, linkAs, onSelect, titleAs: Title = \"h3\", reveal, className, style, ...props\n}: ServiceCardProps) {\n  const id = React.useId();\n  const facts = [duration, capacity].filter(Boolean);\n  const arrow = <span aria-hidden>→</span>;\n  const revealStyle = reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <article\n      aria-labelledby={id}\n      data-selected={selected ? \"\" : undefined}\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      style={revealStyle}\n      className={s.root({ className })}\n      {...props}\n    >\n      {media && <div className={s.media()}>{media}</div>}\n      <div className={s.body()}>\n        <div className={s.head()}>\n          {icon && <span aria-hidden className={s.icon()}>{icon}</span>}\n          <div className={s.titles()}>\n            <Title id={id} className={s.name()}>{name}</Title>\n            {facts.length > 0 && (\n              <ul className={s.facts()}>\n                {facts.map((fact, i) => (\n                  <li key={i}>{i > 0 && <span aria-hidden>· </span>}{fact}</li>\n                ))}\n              </ul>\n            )}\n          </div>\n          {tag && <span className={s.tag()}>{tag}</span>}\n        </div>\n        {description && <p className={s.description()}>{description}</p>}\n        {included && included.length > 0 && (\n          <ul className={s.included()}>\n            {included.map((line) => (\n              <li key={line} className={s.includedItem()}>\n                <CheckGlyph />\n                <span>{line}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n        <div className={s.foot()}>\n          <p className={s.priceBlock()}>\n            {priceFrom && <span className={s.from()}>{priceFrom}</span>}\n            <span className={s.price()}>{price}</span>\n          </p>\n          {href ? (\n            <BlockLink href={href} linkAs={linkAs} className={s.action()} aria-describedby={id}>\n              {actionLabel} {arrow}\n            </BlockLink>\n          ) : onSelect ? (\n            <button type=\"button\" onClick={onSelect} aria-pressed={selected ?? false} aria-describedby={id} className={s.action()}>\n              {actionLabel} {arrow}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    </article>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/service-card/service-card.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A service a shop sells, as a card that argues: icon or photo, name, duration, price\n// (« from » when it varies), what is included, the capacity, a « Popular » tag — and one way in: a link (the booking page\n// with this service chosen) or a button (`onSelect`, from a client parent). The whole card takes the press.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { CheckGlyph } from \"../glyphs\";\n\nexport const serviceCard = tv({\n  slots: {\n    root:\n      \"group relative flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 text-fg transition-colors duration-150 hover:border-border-strong hover:bg-surface-2 \" +\n      \"hover:border-accent/50 focus-within:ring-2 focus-within:ring-ring data-[selected]:border-accent data-[selected]:bg-accent-soft\",\n    media: \"relative aspect-[16/9] w-full overflow-hidden bg-media [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    body: \"flex flex-1 flex-col gap-3 p-4 sm:p-5\",\n    head: \"flex items-start gap-3\",\n    icon: \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-fg-accent [&>svg]:h-5 [&>svg]:w-5\",\n    titles: \"flex min-w-0 flex-1 flex-col gap-1\",\n    name: \"m-0 font-display text-lg font-bold leading-tight tracking-tight text-fg\",\n    facts: \"m-0 flex list-none flex-wrap gap-x-2 gap-y-0.5 p-0 text-xs text-fg-secondary\",\n    tag: \"shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold text-on-accent\",\n    description: \"m-0 text-sm leading-relaxed text-fg-secondary\",\n    included: \"m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-fg-secondary\",\n    includedItem: \"flex items-start gap-2 [&>svg]:mt-0.5 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-accent\",\n    foot: \"mt-auto flex items-end justify-between gap-3 border-t border-border-subtle pt-3\",\n    priceBlock: \"flex flex-col leading-none\",\n    from: \"mb-1 text-[11px] font-semibold text-fg-secondary\",\n    price: \"font-display text-2xl font-black tabular-nums text-fg\",\n    action:\n      \"inline-flex min-h-9 items-center gap-1 rounded-full text-sm font-bold text-fg-accent no-underline \" +\n      \"after:absolute after:inset-0 after:content-[''] focus-visible:outline-hidden group-data-[selected]:text-fg\",\n  },\n});\nconst s = serviceCard();\n\nexport type ServiceCardProps = Omit<React.ComponentProps<\"article\">, \"title\" | \"children\"> & {\n  /** The service's name (the heading). */\n  name: string;\n  /** Its price, formatted by the app (`22,00 $`): the card never formats money. */\n  price: string;\n  /** The words before the price when it varies (`From`, `À partir de`), passed translated. */\n  priceFrom?: string;\n  /** How long it takes (`30 min`) — the first fact. */\n  duration?: string;\n  /** How many it takes (`Up to 5 dogs`, `1 person`) — the second fact. */\n  capacity?: string;\n  /** One or two sentences: what it is. */\n  description?: string;\n  /** What is included, one short line each (a check precedes it). */\n  included?: readonly string[];\n  /** A tag on the top right (`Popular`): only from real data, never decoration. */\n  tag?: string;\n  /** An icon tile before the name (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A photo or a loop above the card (an `img`, a `video`): fills a 16:9 band. */\n  media?: React.ReactNode;\n  /** This service is the chosen one (the accent, `data-selected`). */\n  selected?: boolean;\n  /** The words of the way in (`Book`, `Choose`): the accessible name of the press. */\n  actionLabel: string;\n  /** The way in, as an address (the booking page with this service preselected). */\n  href?: string;\n  /** The app's link component for internal addresses (Next's `Link`). */\n  linkAs?: LinkComponent;\n  /** The way in, as a press (a client parent). Ignored when `href` is set. */\n  onSelect?: () => void;\n  /**\n   * The heading level of the name.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\";\n  /** Enters on scroll (MotionObserver): the index in the grid becomes the delay. */\n  reveal?: number;\n};\n\n/** A service as a card: icon or photo, duration, price, what is included, the capacity, a tag — one way in. */\nexport function ServiceCard({\n  name, price, priceFrom, duration, capacity, description, included, tag, icon, media, selected, actionLabel, href, linkAs, onSelect, titleAs: Title = \"h3\", reveal, className, style, ...props\n}: ServiceCardProps) {\n  const id = React.useId();\n  const facts = [duration, capacity].filter(Boolean);\n  const arrow = <span aria-hidden>→</span>;\n  const revealStyle = reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <article\n      aria-labelledby={id}\n      data-selected={selected ? \"\" : undefined}\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      style={revealStyle}\n      className={s.root({ className })}\n      {...props}\n    >\n      {media && <div className={s.media()}>{media}</div>}\n      <div className={s.body()}>\n        <div className={s.head()}>\n          {icon && <span aria-hidden className={s.icon()}>{icon}</span>}\n          <div className={s.titles()}>\n            <Title id={id} className={s.name()}>{name}</Title>\n            {facts.length > 0 && (\n              <ul className={s.facts()}>\n                {facts.map((fact, i) => (\n                  <li key={i}>{i > 0 && <span aria-hidden>· </span>}{fact}</li>\n                ))}\n              </ul>\n            )}\n          </div>\n          {tag && <span className={s.tag()}>{tag}</span>}\n        </div>\n        {description && <p className={s.description()}>{description}</p>}\n        {included && included.length > 0 && (\n          <ul className={s.included()}>\n            {included.map((line) => (\n              <li key={line} className={s.includedItem()}>\n                <CheckGlyph />\n                <span>{line}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n        <div className={s.foot()}>\n          <p className={s.priceBlock()}>\n            {priceFrom && <span className={s.from()}>{priceFrom}</span>}\n            <span className={s.price()}>{price}</span>\n          </p>\n          {href ? (\n            <BlockLink href={href} linkAs={linkAs} className={s.action()} aria-describedby={id}>\n              {actionLabel} {arrow}\n            </BlockLink>\n          ) : onSelect ? (\n            <button type=\"button\" onClick={onSelect} aria-pressed={selected ?? false} aria-describedby={id} className={s.action()}>\n              {actionLabel} {arrow}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    </article>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/site-footer.d.ts

@@ -1,6 +1,6 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
-import { S as SiteId, F as FamilyLabels } from './sites-B4prB793.js';
+import { S as SiteId, F as FamilyLabels } from './sites-B4sYlfPQ.js';
 
 declare const siteFooter: tailwind_variants.TVReturnType<{
     variant: {

package/dist/site-footer.js

@@ -4,7 +4,7 @@ import {
   familyLabels,
   siteById,
   sitesByGroup
-} from "./chunk-2AJ4NJUF.js";
+} from "./chunk-IANSFIVC.js";
 import {
   KrizakaLogo
 } from "./chunk-4E5IUZHR.js";
@@ -25,11 +25,11 @@ var siteFooter = tv({
     own: "grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-8",
     family: "grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4",
     column: "grid min-w-0 content-start gap-3",
-    title: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    title: "text-[11px] font-semibold text-fg-secondary",
     list: "grid min-w-0 gap-2",
     link: "inline-flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 rounded-md text-sm [overflow-wrap:anywhere] text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold",
     mark: "flex h-4 w-4 shrink-0 items-center justify-center text-fg",
-    tag: "rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
+    tag: "rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold text-fg-secondary",
     bottom: "flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary",
     signature: "inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     version: "rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary",

package/dist/site-footer.js.map

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

package/dist/{sites-B4prB793.d.ts → sites-B4sYlfPQ.d.ts}

@@ -1,5 +1,5 @@
 /** A site of the family. */
-type SiteId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka" | "kachizaka" | "akinaza" | "ui" | "java" | "github";
+type SiteId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka" | "kachizaka" | "akinaza" | "ui" | "java" | "motion" | "github";
 /** What a site is: the company, a product, or an open-source project. It chooses the footer's signature line. */
 type SiteKind = "company" | "product" | "open-source";
 /**

package/dist/sites.d.ts

@@ -1,5 +1,5 @@
 /** A site of the family. */
-type SiteId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka" | "kachizaka" | "akinaza" | "ui" | "java" | "github";
+type SiteId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka" | "kachizaka" | "akinaza" | "ui" | "java" | "motion" | "github";
 /** What a site is: the company, a product, or an open-source project. It chooses the footer's signature line. */
 type SiteKind = "company" | "product" | "open-source";
 /**

package/dist/sites.js

@@ -11,6 +11,8 @@ var sites = [
   site({ id: "akinaza", name: "Akinaza", url: "https://dev.akinaza.com", kind: "product", group: "products", status: "development", mark: "akinaza", repo: "https://github.com/krizaka/akinaza" }),
   site({ id: "ui", name: "Krizaka UI", url: "https://ui.krizaka.com", kind: "open-source", group: "open-source", status: "released", mark: "krizaka", repo: "https://github.com/krizaka/krizaka-ui" }),
   site({ id: "java", name: "Krizaka Java", url: "https://java.krizaka.com", kind: "open-source", group: "open-source", status: "released", mark: "krizaka", repo: "https://github.com/krizaka/krizaka-build" }),
+  // The motion lab: built in the open on GitHub Pages; what proves itself there moves into Krizaka UI.
+  site({ id: "motion", name: "Krizaka Motion", url: "https://krizaka.github.io/krizaka-motion", kind: "open-source", group: "open-source", status: "development", mark: "krizaka", repo: "https://github.com/krizaka/krizaka-motion" }),
   site({ id: "github", name: "GitHub", url: "https://github.com/krizaka", kind: "open-source", group: "github", status: "released", mark: "github", repo: "https://github.com/krizaka" })
 ];
 var siteGroups = ["krizaka", "products", "open-source", "github"];
@@ -39,6 +41,7 @@ var familyLabels = {
       akinaza: "Running a shop in Qu\xE9bec, for less \u2014 Loi 25 by design.",
       ui: "Components, tokens, icons and charts \u2014 web and React Native.",
       java: "Spring Boot building blocks on Maven Central.",
+      motion: "The motion lab: the kit's motion, played live with its knobs.",
       github: "Every repository, in the open."
     },
     signature: { company: "A Krizaka company", product: "A Krizaka product", "open-source": "A Krizaka open-source project" },
@@ -61,6 +64,7 @@ var familyLabels = {
       akinaza: "Tenir une boutique au Qu\xE9bec, pour moins cher \u2014 Loi 25 d\xE8s la conception.",
       ui: "Composants, jetons, ic\xF4nes et graphiques \u2014 web et React Native.",
       java: "Des briques Spring Boot sur Maven Central.",
+      motion: "Le labo du mouvement : le mouvement du kit, jou\xE9 en direct, avec ses r\xE9glages.",
       github: "Tous les d\xE9p\xF4ts, au grand jour."
     },
     signature: { company: "Une compagnie Krizaka", product: "Un produit Krizaka", "open-source": "Un projet open source de Krizaka" },

package/dist/sites.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sites/sites.ts"],"sourcesContent":["// Server-safe: plain data. The Krizaka family — every site Krizaka runs, once. The family switcher of the bar\n// (`NavBar.Family`) and the common footer (`SiteFooter`) both read it, so adding a site is one release of this package:\n// every bar and every footer of the family follow.\n//\n// The words of the family (a site's one line, the groups, the statuses, the footer's signature) are brand data, written\n// here in English and French (`familyLabels`) — a site passes the set of its locale, or its own translation.\n\n/** A site of the family. */\nexport type SiteId = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\" | \"ui\" | \"java\" | \"github\";\n\n/** What a site is: the company, a product, or an open-source project. It chooses the footer's signature line. */\nexport type SiteKind = \"company\" | \"product\" | \"open-source\";\n\n/**\n * `released`: open to visit. `upcoming`: announced, not released yet (said \"Coming soon\"). `construction`: under\n * construction — nothing offered (a QA-only app may run; the public page says so). `development`: being built in the\n * open, with a dev site (said \"In development\"). A site with none yet would use its repository as its address.\n */\nexport type SiteStatus = \"released\" | \"upcoming\" | \"construction\" | \"development\";\n\n/** The groups of the family, in reading order: Krizaka · Products · Open source · GitHub. */\nexport type SiteGroup = \"krizaka\" | \"products\" | \"open-source\" | \"github\";\n\n/** The mark a site wears: a brand of `ProductLogo` (Krizaka UI and Krizaka Java wear Krizaka's), or GitHub's. */\nexport type SiteMark = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\" | \"github\";\n\nexport interface Site {\n  readonly id: SiteId;\n  /** The name, never translated. */\n  readonly name: string;\n  /** The address of the site (its home). */\n  readonly url: string;\n  /** The address without the scheme, as people say it (`ui.krizaka.com`). */\n  readonly host: string;\n  readonly kind: SiteKind;\n  readonly group: SiteGroup;\n  readonly status: SiteStatus;\n  readonly mark: SiteMark;\n  /** The repository the site is built from. */\n  readonly repo: string;\n}\n\nconst site = (s: Omit<Site, \"host\">): Site => ({ ...s, host: s.url.replace(/^https?:\\/\\//, \"\").replace(/\\/$/, \"\") });\n\n/** Every site of the family, in reading order (the group order, then the order inside each group). */\nexport const sites: readonly Site[] = [\n  site({ id: \"krizaka\", name: \"Krizaka\", url: \"https://www.krizaka.com\", kind: \"company\", group: \"krizaka\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-com\" }),\n  site({ id: \"orazaka\", name: \"Orazaka\", url: \"https://dev.orazaka.com\", kind: \"product\", group: \"products\", status: \"released\", mark: \"orazaka\", repo: \"https://github.com/krizaka/orazaka\" }),\n  site({ id: \"orochia\", name: \"Orochia\", url: \"https://dev.orochia.com\", kind: \"product\", group: \"products\", status: \"released\", mark: \"orochia\", repo: \"https://github.com/krizaka/orochia\" }),\n  site({ id: \"yasakia\", name: \"Yasakia\", url: \"https://dev.yasakia.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"yasakia\", repo: \"https://github.com/krizaka/yasakia\" }),\n  site({ id: \"yororis\", name: \"Yororis\", url: \"https://dev.yororis.com\", kind: \"product\", group: \"products\", status: \"construction\", mark: \"yororis\", repo: \"https://github.com/krizaka/yororis\" }),\n  site({ id: \"yomizaka\", name: \"Yomizaka\", url: \"https://dev.yomizaka.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"yomizaka\", repo: \"https://github.com/krizaka/yomizaka\" }),\n  site({ id: \"kachizaka\", name: \"Kachizaka\", url: \"https://dev.kachizaka.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"kachizaka\", repo: \"https://github.com/krizaka/kachizaka\" }),\n  site({ id: \"akinaza\", name: \"Akinaza\", url: \"https://dev.akinaza.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"akinaza\", repo: \"https://github.com/krizaka/akinaza\" }),\n  site({ id: \"ui\", name: \"Krizaka UI\", url: \"https://ui.krizaka.com\", kind: \"open-source\", group: \"open-source\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-ui\" }),\n  site({ id: \"java\", name: \"Krizaka Java\", url: \"https://java.krizaka.com\", kind: \"open-source\", group: \"open-source\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-build\" }),\n  site({ id: \"github\", name: \"GitHub\", url: \"https://github.com/krizaka\", kind: \"open-source\", group: \"github\", status: \"released\", mark: \"github\", repo: \"https://github.com/krizaka\" }),\n];\n\n/** The groups, in reading order. */\nexport const siteGroups: readonly SiteGroup[] = [\"krizaka\", \"products\", \"open-source\", \"github\"];\n\n/** A site by id. */\nexport function siteById(id: SiteId): Site {\n  const found = sites.find((s) => s.id === id);\n  if (!found) throw new Error(`Unknown Krizaka site \"${id}\".`);\n  return found;\n}\n\n/** The family grouped, in reading order: `[{ group, sites }]`, empty groups left out. */\nexport function sitesByGroup(): { group: SiteGroup; sites: Site[] }[] {\n  return siteGroups.map((group) => ({ group, sites: sites.filter((s) => s.group === group) })).filter((g) => g.sites.length > 0);\n}\n\n/** The languages the family's words are written in. */\nexport type SiteLocale = \"en\" | \"fr\";\n\n/** The words of the family: the switcher, the footer, each site's one line. */\nexport interface FamilyLabels {\n  /** The family's name: the switcher's navigation and its button, the footer's navigation (“Krizaka family”). */\n  family: string;\n  /** The heading of each group. */\n  groups: Record<SiteGroup, string>;\n  /** The badge of a site that is not released. */\n  status: Record<Exclude<SiteStatus, \"released\">, string>;\n  /** Says which site is the current one (“You are here”). */\n  current: string;\n  /** One line per site: what it is. */\n  descriptions: Record<SiteId, string>;\n  /** The footer's signature, by the kind of the current site (“A Krizaka product”). */\n  signature: Record<SiteKind, string>;\n  /** The footer's place line (“Made in Montréal”). */\n  place: string;\n  /** The accessible name of the version (“Version”). */\n  version: string;\n}\n\n/** The family's words in English and French. Pass `familyLabels[locale]`, or your own translation of the same shape. */\nexport const familyLabels: Record<SiteLocale, FamilyLabels> = {\n  en: {\n    family: \"Krizaka family\",\n    groups: { krizaka: \"Krizaka\", products: \"Products\", \"open-source\": \"Open source\", github: \"GitHub\" },\n    status: { upcoming: \"Coming soon\", construction: \"Under construction\", development: \"In development\" },\n    current: \"You are here\",\n    descriptions: {\n      krizaka: \"The company: our products, our open source, our story.\",\n      orazaka: \"Sovereign AI on your own servers: chat, documents, images and video — and the engine under the other products.\",\n      orochia: \"A video platform for creators.\",\n      yasakia: \"Meet real people: introductions, and photos checked before you see them.\",\n      yororis: \"A listening space with a face and a voice.\",\n      yomizaka: \"Yomizaka reads your leases, contracts and invoices.\",\n      kachizaka: \"Predictions among friends — live data, in real time.\",\n      akinaza: \"Running a shop in Québec, for less — Loi 25 by design.\",\n      ui: \"Components, tokens, icons and charts — web and React Native.\",\n      java: \"Spring Boot building blocks on Maven Central.\",\n      github: \"Every repository, in the open.\",\n    },\n    signature: { company: \"A Krizaka company\", product: \"A Krizaka product\", \"open-source\": \"A Krizaka open-source project\" },\n    place: \"Made in Montréal\",\n    version: \"Version\",\n  },\n  fr: {\n    family: \"Famille Krizaka\",\n    groups: { krizaka: \"Krizaka\", products: \"Produits\", \"open-source\": \"Open source\", github: \"GitHub\" },\n    status: { upcoming: \"Bientôt\", construction: \"En construction\", development: \"En développement\" },\n    current: \"Vous êtes ici\",\n    descriptions: {\n      krizaka: \"La compagnie : nos produits, notre open source, notre histoire.\",\n      orazaka: \"L’IA souveraine sur vos propres serveurs : conversation, documents, images et vidéo — et le moteur des autres produits.\",\n      orochia: \"Une plateforme vidéo pour les créateurs.\",\n      yasakia: \"Rencontrez de vraies personnes : des présentations, et des photos vérifiées avant que vous les voyiez.\",\n      yororis: \"Un espace d’écoute avec un visage et une voix.\",\n      yomizaka: \"Yomizaka lit vos baux, contrats et factures.\",\n      kachizaka: \"Les pronostics entre amis — des données en direct.\",\n      akinaza: \"Tenir une boutique au Québec, pour moins cher — Loi 25 dès la conception.\",\n      ui: \"Composants, jetons, icônes et graphiques — web et React Native.\",\n      java: \"Des briques Spring Boot sur Maven Central.\",\n      github: \"Tous les dépôts, au grand jour.\",\n    },\n    signature: { company: \"Une compagnie Krizaka\", product: \"Un produit Krizaka\", \"open-source\": \"Un projet open source de Krizaka\" },\n    place: \"Fait à Montréal\",\n    version: \"Version\",\n  },\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/sites/sites.ts"],"sourcesContent":["// Server-safe: plain data. The Krizaka family — every site Krizaka runs, once. The family switcher of the bar\n// (`NavBar.Family`) and the common footer (`SiteFooter`) both read it, so adding a site is one release of this package:\n// every bar and every footer of the family follow.\n//\n// The words of the family (a site's one line, the groups, the statuses, the footer's signature) are brand data, written\n// here in English and French (`familyLabels`) — a site passes the set of its locale, or its own translation.\n\n/** A site of the family. */\nexport type SiteId = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\" | \"ui\" | \"java\" | \"motion\" | \"github\";\n\n/** What a site is: the company, a product, or an open-source project. It chooses the footer's signature line. */\nexport type SiteKind = \"company\" | \"product\" | \"open-source\";\n\n/**\n * `released`: open to visit. `upcoming`: announced, not released yet (said \"Coming soon\"). `construction`: under\n * construction — nothing offered (a QA-only app may run; the public page says so). `development`: being built in the\n * open, with a dev site (said \"In development\"). A site with none yet would use its repository as its address.\n */\nexport type SiteStatus = \"released\" | \"upcoming\" | \"construction\" | \"development\";\n\n/** The groups of the family, in reading order: Krizaka · Products · Open source · GitHub. */\nexport type SiteGroup = \"krizaka\" | \"products\" | \"open-source\" | \"github\";\n\n/** The mark a site wears: a brand of `ProductLogo` (Krizaka UI and Krizaka Java wear Krizaka's), or GitHub's. */\nexport type SiteMark = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\" | \"github\";\n\nexport interface Site {\n  readonly id: SiteId;\n  /** The name, never translated. */\n  readonly name: string;\n  /** The address of the site (its home). */\n  readonly url: string;\n  /** The address without the scheme, as people say it (`ui.krizaka.com`). */\n  readonly host: string;\n  readonly kind: SiteKind;\n  readonly group: SiteGroup;\n  readonly status: SiteStatus;\n  readonly mark: SiteMark;\n  /** The repository the site is built from. */\n  readonly repo: string;\n}\n\nconst site = (s: Omit<Site, \"host\">): Site => ({ ...s, host: s.url.replace(/^https?:\\/\\//, \"\").replace(/\\/$/, \"\") });\n\n/** Every site of the family, in reading order (the group order, then the order inside each group). */\nexport const sites: readonly Site[] = [\n  site({ id: \"krizaka\", name: \"Krizaka\", url: \"https://www.krizaka.com\", kind: \"company\", group: \"krizaka\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-com\" }),\n  site({ id: \"orazaka\", name: \"Orazaka\", url: \"https://dev.orazaka.com\", kind: \"product\", group: \"products\", status: \"released\", mark: \"orazaka\", repo: \"https://github.com/krizaka/orazaka\" }),\n  site({ id: \"orochia\", name: \"Orochia\", url: \"https://dev.orochia.com\", kind: \"product\", group: \"products\", status: \"released\", mark: \"orochia\", repo: \"https://github.com/krizaka/orochia\" }),\n  site({ id: \"yasakia\", name: \"Yasakia\", url: \"https://dev.yasakia.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"yasakia\", repo: \"https://github.com/krizaka/yasakia\" }),\n  site({ id: \"yororis\", name: \"Yororis\", url: \"https://dev.yororis.com\", kind: \"product\", group: \"products\", status: \"construction\", mark: \"yororis\", repo: \"https://github.com/krizaka/yororis\" }),\n  site({ id: \"yomizaka\", name: \"Yomizaka\", url: \"https://dev.yomizaka.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"yomizaka\", repo: \"https://github.com/krizaka/yomizaka\" }),\n  site({ id: \"kachizaka\", name: \"Kachizaka\", url: \"https://dev.kachizaka.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"kachizaka\", repo: \"https://github.com/krizaka/kachizaka\" }),\n  site({ id: \"akinaza\", name: \"Akinaza\", url: \"https://dev.akinaza.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"akinaza\", repo: \"https://github.com/krizaka/akinaza\" }),\n  site({ id: \"ui\", name: \"Krizaka UI\", url: \"https://ui.krizaka.com\", kind: \"open-source\", group: \"open-source\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-ui\" }),\n  site({ id: \"java\", name: \"Krizaka Java\", url: \"https://java.krizaka.com\", kind: \"open-source\", group: \"open-source\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-build\" }),\n  // The motion lab: built in the open on GitHub Pages; what proves itself there moves into Krizaka UI.\n  site({ id: \"motion\", name: \"Krizaka Motion\", url: \"https://krizaka.github.io/krizaka-motion\", kind: \"open-source\", group: \"open-source\", status: \"development\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-motion\" }),\n  site({ id: \"github\", name: \"GitHub\", url: \"https://github.com/krizaka\", kind: \"open-source\", group: \"github\", status: \"released\", mark: \"github\", repo: \"https://github.com/krizaka\" }),\n];\n\n/** The groups, in reading order. */\nexport const siteGroups: readonly SiteGroup[] = [\"krizaka\", \"products\", \"open-source\", \"github\"];\n\n/** A site by id. */\nexport function siteById(id: SiteId): Site {\n  const found = sites.find((s) => s.id === id);\n  if (!found) throw new Error(`Unknown Krizaka site \"${id}\".`);\n  return found;\n}\n\n/** The family grouped, in reading order: `[{ group, sites }]`, empty groups left out. */\nexport function sitesByGroup(): { group: SiteGroup; sites: Site[] }[] {\n  return siteGroups.map((group) => ({ group, sites: sites.filter((s) => s.group === group) })).filter((g) => g.sites.length > 0);\n}\n\n/** The languages the family's words are written in. */\nexport type SiteLocale = \"en\" | \"fr\";\n\n/** The words of the family: the switcher, the footer, each site's one line. */\nexport interface FamilyLabels {\n  /** The family's name: the switcher's navigation and its button, the footer's navigation (“Krizaka family”). */\n  family: string;\n  /** The heading of each group. */\n  groups: Record<SiteGroup, string>;\n  /** The badge of a site that is not released. */\n  status: Record<Exclude<SiteStatus, \"released\">, string>;\n  /** Says which site is the current one (“You are here”). */\n  current: string;\n  /** One line per site: what it is. */\n  descriptions: Record<SiteId, string>;\n  /** The footer's signature, by the kind of the current site (“A Krizaka product”). */\n  signature: Record<SiteKind, string>;\n  /** The footer's place line (“Made in Montréal”). */\n  place: string;\n  /** The accessible name of the version (“Version”). */\n  version: string;\n}\n\n/** The family's words in English and French. Pass `familyLabels[locale]`, or your own translation of the same shape. */\nexport const familyLabels: Record<SiteLocale, FamilyLabels> = {\n  en: {\n    family: \"Krizaka family\",\n    groups: { krizaka: \"Krizaka\", products: \"Products\", \"open-source\": \"Open source\", github: \"GitHub\" },\n    status: { upcoming: \"Coming soon\", construction: \"Under construction\", development: \"In development\" },\n    current: \"You are here\",\n    descriptions: {\n      krizaka: \"The company: our products, our open source, our story.\",\n      orazaka: \"Sovereign AI on your own servers: chat, documents, images and video — and the engine under the other products.\",\n      orochia: \"A video platform for creators.\",\n      yasakia: \"Meet real people: introductions, and photos checked before you see them.\",\n      yororis: \"A listening space with a face and a voice.\",\n      yomizaka: \"Yomizaka reads your leases, contracts and invoices.\",\n      kachizaka: \"Predictions among friends — live data, in real time.\",\n      akinaza: \"Running a shop in Québec, for less — Loi 25 by design.\",\n      ui: \"Components, tokens, icons and charts — web and React Native.\",\n      java: \"Spring Boot building blocks on Maven Central.\",\n      motion: \"The motion lab: the kit's motion, played live with its knobs.\",\n      github: \"Every repository, in the open.\",\n    },\n    signature: { company: \"A Krizaka company\", product: \"A Krizaka product\", \"open-source\": \"A Krizaka open-source project\" },\n    place: \"Made in Montréal\",\n    version: \"Version\",\n  },\n  fr: {\n    family: \"Famille Krizaka\",\n    groups: { krizaka: \"Krizaka\", products: \"Produits\", \"open-source\": \"Open source\", github: \"GitHub\" },\n    status: { upcoming: \"Bientôt\", construction: \"En construction\", development: \"En développement\" },\n    current: \"Vous êtes ici\",\n    descriptions: {\n      krizaka: \"La compagnie : nos produits, notre open source, notre histoire.\",\n      orazaka: \"L’IA souveraine sur vos propres serveurs : conversation, documents, images et vidéo — et le moteur des autres produits.\",\n      orochia: \"Une plateforme vidéo pour les créateurs.\",\n      yasakia: \"Rencontrez de vraies personnes : des présentations, et des photos vérifiées avant que vous les voyiez.\",\n      yororis: \"Un espace d’écoute avec un visage et une voix.\",\n      yomizaka: \"Yomizaka lit vos baux, contrats et factures.\",\n      kachizaka: \"Les pronostics entre amis — des données en direct.\",\n      akinaza: \"Tenir une boutique au Québec, pour moins cher — Loi 25 dès la conception.\",\n      ui: \"Composants, jetons, icônes et graphiques — web et React Native.\",\n      java: \"Des briques Spring Boot sur Maven Central.\",\n      motion: \"Le labo du mouvement : le mouvement du kit, joué en direct, avec ses réglages.\",\n      github: \"Tous les dépôts, au grand jour.\",\n    },\n    signature: { company: \"Une compagnie Krizaka\", product: \"Un produit Krizaka\", \"open-source\": \"Un projet open source de Krizaka\" },\n    place: \"Fait à Montréal\",\n    version: \"Version\",\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/specimen-tag.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+type StampTone = "ok" | "wip" | "construction" | "neutral";
+type StampProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * `ok` — released or usable today (green ink); `wip` — in development (pencil); `construction` — not open yet (the
+     * margin's red); `neutral` — a fact.
+     * @default "neutral"
+     */
+    tone?: StampTone;
+};
+/** A rubber stamp: a short status pressed on a tag or a page, double-ruled, slightly askew. */
+declare function Stamp({ tone, className, ...props }: StampProps): React.JSX.Element;
+interface SpecimenField {
+    /** The field's name, typed in lower case: `seen on`, `since`. */
+    label: React.ReactNode;
+    /** Its value: `web · iOS · Android`, `3.34.0`. */
+    value: React.ReactNode;
+}
+type SpecimenTagProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The catalogue number, typed at the top: `KZ-02`, `No. 042`. */
+    code?: React.ReactNode;
+    /** What the tag labels: a product's name, a component's. Set in the display face. */
+    title?: React.ReactNode;
+    /** The element of the title (`h3` in a grid of tags under a section's `h2`). @default "h3" */
+    titleAs?: "h2" | "h3" | "h4" | "p" | "span";
+    /** Beside the title: a product's mark, a bird (decorative). */
+    mark?: React.ReactNode;
+    /** The status, stamped: `{ label: "In development", tone: "wip" }`. */
+    status?: {
+        label: React.ReactNode;
+        tone?: StampTone;
+    };
+    /** The record: a label and a value per line, typed. */
+    fields?: readonly SpecimenField[];
+    /** What the tag says beyond its fields: one or two sentences. */
+    children?: React.ReactNode;
+    /** The foot of the tag: links (the site, the source), a note. */
+    footer?: React.ReactNode;
+    /**
+     * `hang` — the tag hangs from a string (a row of tags on one wire); `pin` — pinned flat, no string.
+     * @default "pin"
+     */
+    mount?: "hang" | "pin";
+};
+/**
+ * A specimen tag: the eyelet, a typed number, a name, a stamp, the record's fields, a sentence and a foot — the status
+ * and meta of a product or a component, labelled the way a field guide labels what it saw.
+ */
+declare function SpecimenTag({ code, title, titleAs: Title, mark, status, fields, children, footer, mount, className, ...props }: SpecimenTagProps): React.JSX.Element;
+
+export { type SpecimenField, SpecimenTag, type SpecimenTagProps, Stamp, type StampProps, type StampTone };

package/dist/specimen-tag.js

@@ -0,0 +1,33 @@
+import {
+  cn
+} from "./chunk-W675RFOA.js";
+
+// src/specimen-tag/specimen-tag.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Stamp({ tone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("kz-stamp", className), "data-tone": tone, ...props });
+}
+function SpecimenTag({ code, title, titleAs: Title = "h3", mark, status, fields, children, footer, mount = "pin", className, ...props }) {
+  return /* @__PURE__ */ jsxs("article", { className: cn("kz-tag", className), "data-mount": mount, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "kz-tag-eyelet", "aria-hidden": true }),
+    (code || status) && /* @__PURE__ */ jsxs("div", { className: "kz-tag-head", children: [
+      code && /* @__PURE__ */ jsx("span", { className: "kz-tag-code", children: code }),
+      status && /* @__PURE__ */ jsx(Stamp, { tone: status.tone, children: status.label })
+    ] }),
+    title && /* @__PURE__ */ jsxs(Title, { className: "kz-tag-title", children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      mark && /* @__PURE__ */ jsx("span", { className: "kz-tag-mark", "aria-hidden": true, children: mark })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "kz-tag-body", children }),
+    fields && fields.length > 0 && /* @__PURE__ */ jsx("dl", { className: "kz-tag-fields", children: fields.map((f, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: f.label }),
+      /* @__PURE__ */ jsx("dd", { children: f.value })
+    ] }, i)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "kz-tag-foot", children: footer })
+  ] });
+}
+export {
+  SpecimenTag,
+  Stamp
+};
+//# sourceMappingURL=specimen-tag.js.map

package/dist/specimen-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/specimen-tag/specimen-tag.tsx"],"sourcesContent":["// Server-safe. The specimen tag of the Cahier (ADR-004, blocks.css): a manila tag with an eyelet, a typed catalogue\n// number, a name, a stamp for the status and the fields of a record — the way a naturalist labels what was observed.\n// It carries a product's or a component's status and meta; the stamp says the truth (`ok`, `wip`, `construction`).\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type StampTone = \"ok\" | \"wip\" | \"construction\" | \"neutral\";\n\nexport type StampProps = React.HTMLAttributes<HTMLSpanElement> & {\n  /**\n   * `ok` — released or usable today (green ink); `wip` — in development (pencil); `construction` — not open yet (the\n   * margin's red); `neutral` — a fact.\n   * @default \"neutral\"\n   */\n  tone?: StampTone;\n};\n\n/** A rubber stamp: a short status pressed on a tag or a page, double-ruled, slightly askew. */\nexport function Stamp({ tone = \"neutral\", className, ...props }: StampProps) {\n  return <span className={cn(\"kz-stamp\", className)} data-tone={tone} {...props} />;\n}\n\nexport interface SpecimenField {\n  /** The field's name, typed in lower case: `seen on`, `since`. */\n  label: React.ReactNode;\n  /** Its value: `web · iOS · Android`, `3.34.0`. */\n  value: React.ReactNode;\n}\n\nexport type SpecimenTagProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The catalogue number, typed at the top: `KZ-02`, `No. 042`. */\n  code?: React.ReactNode;\n  /** What the tag labels: a product's name, a component's. Set in the display face. */\n  title?: React.ReactNode;\n  /** The element of the title (`h3` in a grid of tags under a section's `h2`). @default \"h3\" */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\n  /** Beside the title: a product's mark, a bird (decorative). */\n  mark?: React.ReactNode;\n  /** The status, stamped: `{ label: \"In development\", tone: \"wip\" }`. */\n  status?: { label: React.ReactNode; tone?: StampTone };\n  /** The record: a label and a value per line, typed. */\n  fields?: readonly SpecimenField[];\n  /** What the tag says beyond its fields: one or two sentences. */\n  children?: React.ReactNode;\n  /** The foot of the tag: links (the site, the source), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `hang` — the tag hangs from a string (a row of tags on one wire); `pin` — pinned flat, no string.\n   * @default \"pin\"\n   */\n  mount?: \"hang\" | \"pin\";\n};\n\n/**\n * A specimen tag: the eyelet, a typed number, a name, a stamp, the record's fields, a sentence and a foot — the status\n * and meta of a product or a component, labelled the way a field guide labels what it saw.\n */\nexport function SpecimenTag({ code, title, titleAs: Title = \"h3\", mark, status, fields, children, footer, mount = \"pin\", className, ...props }: SpecimenTagProps) {\n  return (\n    <article className={cn(\"kz-tag\", className)} data-mount={mount} {...props}>\n      <span className=\"kz-tag-eyelet\" aria-hidden />\n      {(code || status) && (\n        <div className=\"kz-tag-head\">\n          {code && <span className=\"kz-tag-code\">{code}</span>}\n          {status && <Stamp tone={status.tone}>{status.label}</Stamp>}\n        </div>\n      )}\n      {title && (\n        <Title className=\"kz-tag-title\">\n          <span>{title}</span>\n          {mark && <span className=\"kz-tag-mark\" aria-hidden>{mark}</span>}\n        </Title>\n      )}\n      {children && <div className=\"kz-tag-body\">{children}</div>}\n      {fields && fields.length > 0 && (\n        <dl className=\"kz-tag-fields\">\n          {fields.map((f, i) => (\n            <div key={i}>\n              <dt>{f.label}</dt>\n              <dd>{f.value}</dd>\n            </div>\n          ))}\n        </dl>\n      )}\n      {footer && <div className=\"kz-tag-foot\">{footer}</div>}\n    </article>\n  );\n}\n"],"mappings":";;;;;AAoBS,cA2CD,YA3CC;AADF,SAAS,MAAM,EAAE,OAAO,WAAW,WAAW,GAAG,MAAM,GAAe;AAC3E,SAAO,oBAAC,UAAK,WAAW,GAAG,YAAY,SAAS,GAAG,aAAW,MAAO,GAAG,OAAO;AACjF;AAqCO,SAAS,YAAY,EAAE,MAAM,OAAO,SAAS,QAAQ,MAAM,MAAM,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAqB;AAChK,SACE,qBAAC,aAAQ,WAAW,GAAG,UAAU,SAAS,GAAG,cAAY,OAAQ,GAAG,OAClE;AAAA,wBAAC,UAAK,WAAU,iBAAgB,eAAW,MAAC;AAAA,KAC1C,QAAQ,WACR,qBAAC,SAAI,WAAU,eACZ;AAAA,cAAQ,oBAAC,UAAK,WAAU,eAAe,gBAAK;AAAA,MAC5C,UAAU,oBAAC,SAAM,MAAM,OAAO,MAAO,iBAAO,OAAM;AAAA,OACrD;AAAA,IAED,SACC,qBAAC,SAAM,WAAU,gBACf;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACZ,QAAQ,oBAAC,UAAK,WAAU,eAAc,eAAW,MAAE,gBAAK;AAAA,OAC3D;AAAA,IAED,YAAY,oBAAC,SAAI,WAAU,eAAe,UAAS;AAAA,IACnD,UAAU,OAAO,SAAS,KACzB,oBAAC,QAAG,WAAU,iBACX,iBAAO,IAAI,CAAC,GAAG,MACd,qBAAC,SACC;AAAA,0BAAC,QAAI,YAAE,OAAM;AAAA,MACb,oBAAC,QAAI,YAAE,OAAM;AAAA,SAFL,CAGV,CACD,GACH;AAAA,IAED,UAAU,oBAAC,SAAI,WAAU,eAAe,kBAAO;AAAA,KAClD;AAEJ;","names":[]}

package/dist/stat.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var stat = tv({
   slots: {
     root: "flex min-w-0 flex-col gap-1",
-    label: "text-xs font-semibold uppercase tracking-wider text-fg-secondary",
+    label: "text-xs font-semibold text-fg-secondary",
     value: "font-display text-2xl font-black tabular-nums text-fg",
     meta: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs",
     // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries