@krizaka/ui 3.35.0 → 3.36.0

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.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/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

package/dist/stat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}

package/dist/sticky-action.d.ts

@@ -1,7 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
-declare const stickyAction: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden", {} | {}, undefined, tailwind_variants.TVReturnTypeLike<unknown, undefined>>;
+declare const stickyAction: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 md:hidden", {} | {}, undefined, tailwind_variants.TVReturnTypeLike<unknown, undefined>>;
 type StickyActionProps = React.ComponentProps<"div"> & {
     /** The action: one `ButtonLink` (full width is added). */
     children: React.ReactNode;

package/dist/sticky-action.js

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 var stickyAction = tv({
-  base: "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden"
+  base: "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 md:hidden"
 });
 function StickyAction({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: stickyAction({ className }), ...props, children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-md flex-col [&>*]:w-full", children }) });

package/dist/sticky-action.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sticky-action/sticky-action.tsx"],"sourcesContent":["// Server-safe: pure CSS. The main action of a page, stuck to the bottom of a phone's screen while the page scrolls: put it\n// as the last child of the page's `main` (a sticky element holds the viewport's edge inside its container). From `md` up it\n// is not drawn — the page's own buttons are within reach.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stickyAction = tv({\n  base: \"sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden\",\n});\n\nexport type StickyActionProps = React.ComponentProps<\"div\"> & {\n  /** The action: one `ButtonLink` (full width is added). */\n  children: React.ReactNode;\n};\n\n/** The one action of a page, held at the bottom edge of a phone. */\nexport function StickyAction({ className, children, ...props }: StickyActionProps) {\n  return (\n    <div className={stickyAction({ className })} {...props}>\n      <div className=\"mx-auto flex max-w-md flex-col [&>*]:w-full\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAeb;AAbC,IAAM,eAAe,GAAG;AAAA,EAC7B,MAAM;AACR,CAAC;AAQM,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,MAAM,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,aAAa,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/C,8BAAC,SAAI,WAAU,+CAA+C,UAAS,GACzE;AAEJ;","names":[]}
+{"version":3,"sources":["../src/sticky-action/sticky-action.tsx"],"sourcesContent":["// Server-safe: pure CSS. The main action of a page, stuck to the bottom of a phone's screen while the page scrolls: put it\n// as the last child of the page's `main` (a sticky element holds the viewport's edge inside its container). From `md` up it\n// is not drawn — the page's own buttons are within reach.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stickyAction = tv({\n  base: \"sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 md:hidden\",\n});\n\nexport type StickyActionProps = React.ComponentProps<\"div\"> & {\n  /** The action: one `ButtonLink` (full width is added). */\n  children: React.ReactNode;\n};\n\n/** The one action of a page, held at the bottom edge of a phone. */\nexport function StickyAction({ className, children, ...props }: StickyActionProps) {\n  return (\n    <div className={stickyAction({ className })} {...props}>\n      <div className=\"mx-auto flex max-w-md flex-col [&>*]:w-full\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAeb;AAbC,IAAM,eAAe,GAAG;AAAA,EAC7B,MAAM;AACR,CAAC;AAQM,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,MAAM,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,aAAa,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/C,8BAAC,SAAI,WAAU,+CAA+C,UAAS,GACzE;AAEJ;","names":[]}

package/dist/swipe-deck.js

@@ -12,7 +12,7 @@ var swipeDeck = tv({
     root: "flex w-full flex-col items-center gap-5",
     stack: "relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0",
     layer: "absolute inset-0 touch-pan-y select-none",
-    stamp: "pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black uppercase tracking-wide",
+    stamp: "pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black ",
     buttons: "flex items-center gap-7",
     button: "inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7",
     card: "relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg",

package/dist/swipe-deck.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/swipe-deck/swipe-deck.tsx"],"sourcesContent":["// Client (the drag, the decision). A deck of cards decided one by one — drag right to like, left to pass, or the\n// buttons, or ← → on the focused deck — and `PersonCard`, a person on a card. Reduced motion: the card leaves without\n// flying.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { usePrefersReducedMotion } from \"../media\";\n\nexport const swipeDeck = tv({\n  slots: {\n    root: \"flex w-full flex-col items-center gap-5\",\n    stack: \"relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0\",\n    layer: \"absolute inset-0 touch-pan-y select-none\",\n    stamp: \"pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black uppercase tracking-wide\",\n    buttons: \"flex items-center gap-7\",\n    button:\n      \"inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7\",\n    card: \"relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg\",\n    photo: \"absolute inset-0 h-full w-full object-cover\",\n    bars: \"absolute inset-x-2 top-2 flex gap-1\",\n    bar: \"h-[3px] flex-1 rounded-full bg-fg-on-media opacity-40 data-[on]:opacity-100\",\n    half: \"absolute top-0 bottom-2/5 w-2/5 cursor-pointer outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    info: \"absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-scrim-strong via-scrim-strong/80 to-transparent p-4 pt-24 text-fg-on-media\",\n    name: \"flex items-center gap-2 font-display text-3xl font-black\",\n    age: \"font-sans text-2xl font-normal\",\n    bio: \"line-clamp-2 text-sm\",\n    footer: \"mt-1 flex flex-wrap gap-1.5\",\n  },\n});\n\nexport type PersonCardProps = {\n  /** The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. */\n  photos: readonly { src: string; alt?: string }[];\n  /** The name. */\n  name: string;\n  /** The age, written after the name. */\n  age?: number;\n  /** Beside the name: a `VerifiedBadge`. */\n  badge?: React.ReactNode;\n  /** A line under the name: a distance, a job. */\n  meta?: React.ReactNode;\n  /** A sentence about the person. */\n  bio?: string;\n  /** At the bottom: the interests as chips. */\n  footer?: React.ReactNode;\n  /** The photo buttons' words: `{ previous: \"Previous photo\", next: \"Next photo\" }` — passed translated. */\n  photoLabels?: { previous: string; next: string };\n  /** Classes merged on the card. */\n  className?: string;\n};\n\n/** A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips. */\nexport function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: \"Previous photo\", next: \"Next photo\" }, className }: PersonCardProps) {\n  const s = swipeDeck();\n  const [index, setIndex] = React.useState(0);\n  const photo = photos[index];\n  return (\n    <article aria-label={age !== undefined ? `${name}, ${age}` : name} className={s.card({ className })}>\n      {photo ? <img src={photo.src} alt={photo.alt ?? \"\"} className={s.photo()} draggable={false} /> : null}\n      {photos.length > 1 ? (\n        <>\n          <div className={s.bars()} aria-hidden>\n            {photos.map((_, i) => (\n              <span key={i} className={s.bar()} data-on={i === index || undefined} />\n            ))}\n          </div>\n          <button type=\"button\" aria-label={photoLabels.previous} disabled={index === 0} className={s.half({ className: \"left-0\" })} onClick={() => setIndex((i) => Math.max(0, i - 1))} />\n          <button type=\"button\" aria-label={photoLabels.next} disabled={index === photos.length - 1} className={s.half({ className: \"right-0\" })} onClick={() => setIndex((i) => Math.min(photos.length - 1, i + 1))} />\n        </>\n      ) : null}\n      <div className={s.info()}>\n        <h3 className={s.name()}>\n          <span className=\"truncate\">\n            {name}\n            {age !== undefined ? <span className={s.age()}>{`  ${age}`}</span> : null}\n          </span>\n          {badge}\n        </h3>\n        {meta}\n        {bio ? <p className={s.bio()}>{bio}</p> : null}\n        {footer ? <div className={s.footer()}>{footer}</div> : null}\n      </div>\n    </article>\n  );\n}\n\nexport type SwipeDirection = \"like\" | \"pass\";\n\nexport type SwipeDeckLabels = {\n  /** The like button (“Like”). */\n  like: string;\n  /** The pass button (“Pass”). */\n  pass: string;\n  /** The deck's name and its keyboard hint (“Profiles. Right arrow to like, left arrow to pass.”). */\n  deck: string;\n  /** The stamp while dragging right (“LIKE”). */\n  likeStamp?: string;\n  /** The stamp while dragging left (“NOPE”). */\n  passStamp?: string;\n  /** Announced after a decision: `(name, direction) => …`. */\n  decided?: (name: string, direction: SwipeDirection) => string;\n};\n\nexport type SwipeDeckProps<T> = {\n  /** The cards still to decide, the first on top. */\n  items: readonly T[];\n  /** A card's id. */\n  getId: (item: T) => string;\n  /** A card's name, for the announcements. */\n  getName: (item: T) => string;\n  /** A card (usually a `PersonCard`). */\n  renderCard: (item: T) => React.ReactNode;\n  /** Called with the card decided and the decision; remove it from `items`. */\n  onSwipe: (item: T, direction: SwipeDirection) => void;\n  /** Shown when there is no card left (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** The words, passed translated. */\n  labels: SwipeDeckLabels;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced. */\nexport function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>) {\n  const s = swipeDeck();\n  const reduce = usePrefersReducedMotion();\n  const [dx, setDx] = React.useState(0);\n  const [leaving, setLeaving] = React.useState<SwipeDirection | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const start = React.useRef<{ x: number; width: number } | null>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const top = items[0];\n  const decide = (direction: SwipeDirection) => {\n    if (!top || leaving) return;\n    const finish = () => {\n      setLeaving(null);\n      setDx(0);\n      setMessage(labels.decided ? labels.decided(getName(top), direction) : `${getName(top)}: ${direction === \"like\" ? labels.like : labels.pass}`);\n      onSwipe(top, direction);\n    };\n    if (reduce) return finish();\n    setLeaving(direction);\n    setTimeout(finish, 220);\n  };\n  const offset = leaving ? (leaving === \"like\" ? 1 : -1) * 900 : dx;\n  const stampOpacity = (dir: 1 | -1) => Math.max(0, Math.min(1, (dir * offset) / 120));\n  return (\n    <div className={s.root({ className })}>\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {message}\n      </p>\n      <div\n        role=\"group\"\n        aria-label={labels.deck}\n        tabIndex={top ? 0 : -1}\n        className={s.stack()}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowRight\") decide(\"like\");\n          if (e.key === \"ArrowLeft\") decide(\"pass\");\n        }}\n      >\n        {!top ? empty : null}\n        {items\n          .slice(0, 2)\n          .reverse()\n          .map((item) => {\n            const isTop = item === top;\n            return (\n              <div\n                key={getId(item)}\n                aria-hidden={!isTop || undefined}\n                inert={!isTop || undefined}\n                className={s.layer()}\n                style={\n                  isTop\n                    ? { transform: `translateX(${offset}px) rotate(${offset / 22}deg)`, transition: dragging && !leaving ? \"none\" : reduce ? \"none\" : \"transform 220ms var(--kz-ease, ease-out)\" }\n                    : { transform: \"scale(0.96)\", opacity: 0.9 }\n                }\n                onPointerDown={(e) => {\n                  if (!isTop || (e.target as HTMLElement).closest(\"button\")) return;\n                  start.current = { x: e.clientX, width: e.currentTarget.offsetWidth };\n                  e.currentTarget.setPointerCapture(e.pointerId);\n                  setDragging(true);\n                }}\n                onPointerMove={(e) => {\n                  if (start.current) setDx(e.clientX - start.current.x);\n                }}\n                onPointerUp={() => {\n                  const width = start.current?.width ?? 300;\n                  start.current = null;\n                  setDragging(false);\n                  if (dx > width / 3) decide(\"like\");\n                  else if (dx < -width / 3) decide(\"pass\");\n                  else setDx(0);\n                }}\n              >\n                {renderCard(item)}\n                {isTop ? (\n                  <>\n                    <span aria-hidden className={s.stamp({ className: \"left-6 -rotate-12 border-success text-fg-success\" })} style={{ opacity: stampOpacity(1) }}>\n                      {labels.likeStamp ?? labels.like}\n                    </span>\n                    <span aria-hidden className={s.stamp({ className: \"right-6 rotate-12 border-danger text-fg-danger\" })} style={{ opacity: stampOpacity(-1) }}>\n                      {labels.passStamp ?? labels.pass}\n                    </span>\n                  </>\n                ) : null}\n              </div>\n            );\n          })}\n      </div>\n      <div className={s.buttons()}>\n        <button type=\"button\" aria-label={labels.pass} disabled={!top} onClick={() => decide(\"pass\")} className={s.button({ className: \"border-danger text-fg-danger\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n            <path d=\"M6 6l12 12M18 6 6 18\" />\n          </svg>\n        </button>\n        <button type=\"button\" aria-label={labels.like} disabled={!top} onClick={() => decide(\"like\")} className={s.button({ className: \"border-success text-fg-success\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n            <path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/swipe-deck/swipe-deck.tsx"],"sourcesContent":["// Client (the drag, the decision). A deck of cards decided one by one — drag right to like, left to pass, or the\n// buttons, or ← → on the focused deck — and `PersonCard`, a person on a card. Reduced motion: the card leaves without\n// flying.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { usePrefersReducedMotion } from \"../media\";\n\nexport const swipeDeck = tv({\n  slots: {\n    root: \"flex w-full flex-col items-center gap-5\",\n    stack: \"relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0\",\n    layer: \"absolute inset-0 touch-pan-y select-none\",\n    stamp: \"pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black \",\n    buttons: \"flex items-center gap-7\",\n    button:\n      \"inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7\",\n    card: \"relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg\",\n    photo: \"absolute inset-0 h-full w-full object-cover\",\n    bars: \"absolute inset-x-2 top-2 flex gap-1\",\n    bar: \"h-[3px] flex-1 rounded-full bg-fg-on-media opacity-40 data-[on]:opacity-100\",\n    half: \"absolute top-0 bottom-2/5 w-2/5 cursor-pointer outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    info: \"absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-scrim-strong via-scrim-strong/80 to-transparent p-4 pt-24 text-fg-on-media\",\n    name: \"flex items-center gap-2 font-display text-3xl font-black\",\n    age: \"font-sans text-2xl font-normal\",\n    bio: \"line-clamp-2 text-sm\",\n    footer: \"mt-1 flex flex-wrap gap-1.5\",\n  },\n});\n\nexport type PersonCardProps = {\n  /** The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. */\n  photos: readonly { src: string; alt?: string }[];\n  /** The name. */\n  name: string;\n  /** The age, written after the name. */\n  age?: number;\n  /** Beside the name: a `VerifiedBadge`. */\n  badge?: React.ReactNode;\n  /** A line under the name: a distance, a job. */\n  meta?: React.ReactNode;\n  /** A sentence about the person. */\n  bio?: string;\n  /** At the bottom: the interests as chips. */\n  footer?: React.ReactNode;\n  /** The photo buttons' words: `{ previous: \"Previous photo\", next: \"Next photo\" }` — passed translated. */\n  photoLabels?: { previous: string; next: string };\n  /** Classes merged on the card. */\n  className?: string;\n};\n\n/** A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips. */\nexport function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: \"Previous photo\", next: \"Next photo\" }, className }: PersonCardProps) {\n  const s = swipeDeck();\n  const [index, setIndex] = React.useState(0);\n  const photo = photos[index];\n  return (\n    <article aria-label={age !== undefined ? `${name}, ${age}` : name} className={s.card({ className })}>\n      {photo ? <img src={photo.src} alt={photo.alt ?? \"\"} className={s.photo()} draggable={false} /> : null}\n      {photos.length > 1 ? (\n        <>\n          <div className={s.bars()} aria-hidden>\n            {photos.map((_, i) => (\n              <span key={i} className={s.bar()} data-on={i === index || undefined} />\n            ))}\n          </div>\n          <button type=\"button\" aria-label={photoLabels.previous} disabled={index === 0} className={s.half({ className: \"left-0\" })} onClick={() => setIndex((i) => Math.max(0, i - 1))} />\n          <button type=\"button\" aria-label={photoLabels.next} disabled={index === photos.length - 1} className={s.half({ className: \"right-0\" })} onClick={() => setIndex((i) => Math.min(photos.length - 1, i + 1))} />\n        </>\n      ) : null}\n      <div className={s.info()}>\n        <h3 className={s.name()}>\n          <span className=\"truncate\">\n            {name}\n            {age !== undefined ? <span className={s.age()}>{`  ${age}`}</span> : null}\n          </span>\n          {badge}\n        </h3>\n        {meta}\n        {bio ? <p className={s.bio()}>{bio}</p> : null}\n        {footer ? <div className={s.footer()}>{footer}</div> : null}\n      </div>\n    </article>\n  );\n}\n\nexport type SwipeDirection = \"like\" | \"pass\";\n\nexport type SwipeDeckLabels = {\n  /** The like button (“Like”). */\n  like: string;\n  /** The pass button (“Pass”). */\n  pass: string;\n  /** The deck's name and its keyboard hint (“Profiles. Right arrow to like, left arrow to pass.”). */\n  deck: string;\n  /** The stamp while dragging right (“LIKE”). */\n  likeStamp?: string;\n  /** The stamp while dragging left (“NOPE”). */\n  passStamp?: string;\n  /** Announced after a decision: `(name, direction) => …`. */\n  decided?: (name: string, direction: SwipeDirection) => string;\n};\n\nexport type SwipeDeckProps<T> = {\n  /** The cards still to decide, the first on top. */\n  items: readonly T[];\n  /** A card's id. */\n  getId: (item: T) => string;\n  /** A card's name, for the announcements. */\n  getName: (item: T) => string;\n  /** A card (usually a `PersonCard`). */\n  renderCard: (item: T) => React.ReactNode;\n  /** Called with the card decided and the decision; remove it from `items`. */\n  onSwipe: (item: T, direction: SwipeDirection) => void;\n  /** Shown when there is no card left (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** The words, passed translated. */\n  labels: SwipeDeckLabels;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced. */\nexport function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>) {\n  const s = swipeDeck();\n  const reduce = usePrefersReducedMotion();\n  const [dx, setDx] = React.useState(0);\n  const [leaving, setLeaving] = React.useState<SwipeDirection | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const start = React.useRef<{ x: number; width: number } | null>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const top = items[0];\n  const decide = (direction: SwipeDirection) => {\n    if (!top || leaving) return;\n    const finish = () => {\n      setLeaving(null);\n      setDx(0);\n      setMessage(labels.decided ? labels.decided(getName(top), direction) : `${getName(top)}: ${direction === \"like\" ? labels.like : labels.pass}`);\n      onSwipe(top, direction);\n    };\n    if (reduce) return finish();\n    setLeaving(direction);\n    setTimeout(finish, 220);\n  };\n  const offset = leaving ? (leaving === \"like\" ? 1 : -1) * 900 : dx;\n  const stampOpacity = (dir: 1 | -1) => Math.max(0, Math.min(1, (dir * offset) / 120));\n  return (\n    <div className={s.root({ className })}>\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {message}\n      </p>\n      <div\n        role=\"group\"\n        aria-label={labels.deck}\n        tabIndex={top ? 0 : -1}\n        className={s.stack()}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowRight\") decide(\"like\");\n          if (e.key === \"ArrowLeft\") decide(\"pass\");\n        }}\n      >\n        {!top ? empty : null}\n        {items\n          .slice(0, 2)\n          .reverse()\n          .map((item) => {\n            const isTop = item === top;\n            return (\n              <div\n                key={getId(item)}\n                aria-hidden={!isTop || undefined}\n                inert={!isTop || undefined}\n                className={s.layer()}\n                style={\n                  isTop\n                    ? { transform: `translateX(${offset}px) rotate(${offset / 22}deg)`, transition: dragging && !leaving ? \"none\" : reduce ? \"none\" : \"transform 220ms var(--kz-ease, ease-out)\" }\n                    : { transform: \"scale(0.96)\", opacity: 0.9 }\n                }\n                onPointerDown={(e) => {\n                  if (!isTop || (e.target as HTMLElement).closest(\"button\")) return;\n                  start.current = { x: e.clientX, width: e.currentTarget.offsetWidth };\n                  e.currentTarget.setPointerCapture(e.pointerId);\n                  setDragging(true);\n                }}\n                onPointerMove={(e) => {\n                  if (start.current) setDx(e.clientX - start.current.x);\n                }}\n                onPointerUp={() => {\n                  const width = start.current?.width ?? 300;\n                  start.current = null;\n                  setDragging(false);\n                  if (dx > width / 3) decide(\"like\");\n                  else if (dx < -width / 3) decide(\"pass\");\n                  else setDx(0);\n                }}\n              >\n                {renderCard(item)}\n                {isTop ? (\n                  <>\n                    <span aria-hidden className={s.stamp({ className: \"left-6 -rotate-12 border-success text-fg-success\" })} style={{ opacity: stampOpacity(1) }}>\n                      {labels.likeStamp ?? labels.like}\n                    </span>\n                    <span aria-hidden className={s.stamp({ className: \"right-6 rotate-12 border-danger text-fg-danger\" })} style={{ opacity: stampOpacity(-1) }}>\n                      {labels.passStamp ?? labels.pass}\n                    </span>\n                  </>\n                ) : null}\n              </div>\n            );\n          })}\n      </div>\n      <div className={s.buttons()}>\n        <button type=\"button\" aria-label={labels.pass} disabled={!top} onClick={() => decide(\"pass\")} className={s.button({ className: \"border-danger text-fg-danger\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n            <path d=\"M6 6l12 12M18 6 6 18\" />\n          </svg>\n        </button>\n        <button type=\"button\" aria-label={labels.like} disabled={!top} onClick={() => decide(\"like\")} className={s.button({ className: \"border-success text-fg-success\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n            <path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}