@evinvest/uikit 0.31.0 → 0.33.0

package/README.md

@@ -1,7 +1,7 @@
 # @evinvest/uikit
 
 A **dep-light** React UI kit with shadcn-style semantics — the TypeScript mirror
-of the UI kit of the [`ev_lib`](https://github.com/EV-invest/lib) Rust crate,
+of the UI kit of the [`ev_lib`](https://github.com/EV-Main/web_std) Rust crate,
 which ships it for Dioxus (`ev_lib::uikit_dioxus`) and Leptos
 (`ev_lib::uikit_leptos`) over one framework-free core. All three are driven from
 the same canonical class strings and the same design tokens, so a component
@@ -65,17 +65,17 @@ your Tailwind v4 entrypoint — this is the load-bearing part of the kit:
 | states | `hover` · `active` · `selected` — translucent tints; `scrim` — behind a modal |
 | ink | `ink` · `ink-mid` · `ink-soft` — hierarchy, loudest first; `ink-faint` — disabled only |
 | lines | `border-subtle` (row rule) · `border` (hairline, 14 %) · `border-strong` (state and overlay edges) · `input` (control edge, ≥ 3:1) · `ring` |
-| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface; `primary-hover` · `primary-border` — the primary button's states |
+| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface; `primary-hover` · `accent-*-hover` — a solid fill's hover, the fill moved away from its label by `--tint-hover`; `primary-border` — the primary button's edge |
 | status inks | `positive-ink` · `accent-info-ink` — a quiet status role as text on a surface (derived, a palette may pin them); warn and error text wears `accent-warn` · `accent-error` itself, held to 3:1 |
-| faces | `button-danger-*` (`bg` `hover` `border` `ink`) — the destructive `Button`; `chip-{neutral,primary,positive,info,warn,error}-{bg,border}` — the `Badge`; `button-primary-*` — no kit component paints it; derived for a brand, pinned per theme by EV |
-| type | `text-caption` 11/14 · `body-s` 12/16 · `body` 13/18 · `body-l` 14/20 · `h3` 14/20 · `h2` 24/30 · `h1` 32/38 · `figure-m` 20/24 · `figure-l` 28/32 (size and line height each) |
-| scalars | `radius` (panel, 6 px) · `control-radius` (4 px) · `chip-radius` (4 px) · `depth-card` `depth-elevated` `depth-overlay` · `control-py` `display-scale` `band-py` `page-max` `page-px` `shell-rail-w` `shell-tab-bar-h` · `font-*` |
+| faces | `button-danger-*` (`bg` `hover` `border` `ink`) — the destructive `Button`; `tint-{neutral,primary,positive,info,warn,error,trace,debug}-{fill,edge}` — a toned `Badge`, `Toast`, `SystemBanner`, `Alert`; derived for a brand, pinned per theme by EV |
+| type | `text-caption` 11/14 · `body-s` 12/16 · `body` 13/18 · `body-l` 14/20 · `h3` 14/20 · `h2` 24/30 · `h1` 32/38 · `figure-m` 20/24 · `figure-l` 28/32 (size and line height each), two ramps off the scalars `body-*` and `display-*` (see `docs/spec/roles.md`) |
+| scalars | `radius` (panel, 6 px) · `control-radius` (4 px) · `chip-radius` (4 px) · `depth-card` `depth-elevated` `depth-overlay` · `control-h` `control-step` `control-inset` `control-px` `control-text` `disabled-opacity` `body-size` `body-step` `body-leading` `display-base` `display-step` `display-leading` `figure-leading` `display-scale` `band-py` `page-max` `page-px` `shell-rail-w` `shell-tab-bar-h` · `font-*` |
 | motion | `ev-ease-out` `ev-ease-in-out` `ev-dur-fast` `ev-dur-base` `ev-dur-slow` `ev-rise` `ev-stagger` `ev-stagger-section` |
 | charts | `chart-1` … `chart-6` |
 
-A palette owes **29 names**: the colours that are not derived, which is every
+A palette owes **28 names**: the colours that are not derived, which is every
 role and surface above plus `chart-1` … `chart-6`. The states, lines, inks,
-status inks, faces and chips are derived from them with formulas, so a brand
+status inks, faces, chips and `on-secondary` (the ink) are derived from them with formulas, so a brand
 file that pins none of them still renders.
 
 Custom properties inherit, so a scope class on a `<section>` re-themes its
@@ -154,7 +154,7 @@ It has two halves, each also shipped as a flat sheet of its own —
 
 ### Brand palettes
 
-A second brand is a palette against the same names (29 of them, `chart-6` among them), scoped to
+A second brand is a palette against the same names (28 of them, `chart-6` among them), scoped to
 `[data-brand="<slug>"]`; light is its default and `.light` / `.dark` beneath it
 pick a polarity, so a `<Section polarity="dark">` inside the brand takes the
 brand's dark values. The package ships a generator for it, reading the
@@ -226,7 +226,7 @@ under a brand under another brand may match either.
 
 ### Fonts
 
-The families are parameters, one per role, and not part of the 29 colour names:
+The families are parameters, one per role, and not part of the 28 colour names:
 a palette is complete without them, and the generator only carries what a
 brand file's `[fonts]` declares. Unset, each is EV's, and Oldschool carries the
 families the navy look shipped with:
@@ -454,6 +454,16 @@ export function Nav() {
   linkComponent?, hideFrom = "lg", labels: { back } }` — sticky under
   `--ev-shell-offset`; with `back` the title centres.
 - **`TopBar`** `{ start?, end? }` — layout only, server-safe.
+- **`Hotbar`** `{ actions: { id, label, icon, shortcut?: "N" | "mod+K", onSelect,
+  pressed?, pinned? }[], status?, takeover?: { tone: "warn" | "error", message,
+  action? }, labels }` — the bottom strip of a terminal-style app; the app docks
+  it. Shortcuts are bound while it is mounted, pinned or not: a plain key skips
+  a focused field, `mod+` (⌘ on Apple, Ctrl elsewhere) fires anywhere, a key
+  another handler took is left alone. Which actions are pinned is the user's,
+  set in its Customize popover and kept in this browser's `localStorage`
+  (`ev-hotbar`). `pressed` is a toggle the app owns. Under a 64rem strip (a
+  container query, not the viewport) it is a sideways-scrolling chip row with
+  no status. A `takeover` tints the strip and replaces the actions until cleared.
 - **`AccountMenu`** `{ account: { name?, email }, manageHref?, switchHref,
   groups?: NavGroup[], onSignOut, linkComponent?, labels: { trigger, manage,
   switchAccount, signOut } }` — an initials avatar opening the menu.
@@ -784,7 +794,7 @@ a button step only — `Input` and `SelectTrigger` already clear it at `lg`.
 | `Badge variant="destructive"` · `"success"` | `error` · `positive` (new: `primary`, `info`, `warn`) |
 | `SystemBanner` tones `warn`, `info` | the same, plus `neutral` and `primary`; `info` draws its icon in `accent-info-ink` |
 | `accent-error-ink` (`text-accent-error-ink`, a brand file's `accent-error-ink`) | `accent-error`; destructive menu rows read in it, and `evinvest-palette` refuses the key |
-| `Terminal`, `TerminalPane*`, `TerminalChart`, `TerminalTicker`, `TickerStat`, `OrderBook*`, `TradesTapeRow`, `OrderForm*`, `OpenOrdersEmpty` and their types | removed from the TS kit (the Rust terminal stays) |
+| `Terminal`, `TerminalPane*`, `TerminalChart`, `TerminalTicker`, `TickerStat`, `OrderBook*`, `TradesTapeRow`, `OrderForm*`, `OpenOrdersEmpty` and their types | removed from the kit; a trading view owns its terminal |
 
 **Silent changes: the compiler does not flag these.**
 
@@ -804,7 +814,7 @@ a button step only — `Input` and `SelectTrigger` already clear it at `lg`.
   Oldschool); the kit ships no font files.
 - The font role `display` is `serif`: `--brand-font-display` / `font-display`
   become `--brand-font-serif` / `font-serif` (see [Fonts](#fonts)).
-- A brand file must add `chart-6` (29 names now); `evinvest-palette` names it.
+- A brand file must add `chart-6` (28 names now); `evinvest-palette` names it.
 - Panel radius is 6 px at every width (the `sm` bump to 8 px is gone), controls
   and chips 4 px, and the depth tiers are flat. **Aquafix, vifnet and any other
   brand take these and lose their card shadow** unless their scope overrides
@@ -923,7 +933,8 @@ measuring needs host-only `web-sys`). Known gaps:
   `SelectValue` labels, `ListRows` / `ListRow` (a table's phone form), the
   rest of the [app shell](#app-shell) (`AppShell`, `ShellNav`, `BottomTabBar`,
   `NavBadge` / `NavDot`, `AccountMenu` and its profile form, `MobileAppBar`,
-  `PageFrame` / `PageHeading`, `SectionNav`, `ResourceError`, `Settled`) and
+  `PageFrame` / `PageHeading`, `SectionNav`, `ResourceError`, `Settled`,
+  `Hotbar`) and
   the parts that need a browser API Rust does not wrap: `AnimatedNumber` /
   `useCountTween` (a frame loop and `Intl`), `ChatStreamText` (word diffing and
   timers), and `ChatPanel` / `ChatDock` (`ResizeObserver`, scroll pinning).

package/dist/components/{accordion.js → atomic/accordion.js}

@@ -1,15 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   ACCORDION_CONTENT,
   ACCORDION_CONTENT_INNER,
   ACCORDION_HEADER,
   ACCORDION_ITEM,
   ACCORDION_TRIGGER
-} from "../generated/accordion.js";
+} from "../../generated/accordion.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 const AccordionContext = React.createContext(null);
 function useAccordion() {
   const ctx = React.useContext(AccordionContext);
@@ -101,7 +102,7 @@ function AccordionTrigger({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             className: "text-ink-soft pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200",
-            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+            children: iconShapes("chevron-down")
           }
         )
       ]

package/dist/components/atomic/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  ACCORDION_CONTENT,\n  ACCORDION_CONTENT_INNER,\n  ACCORDION_HEADER,\n  ACCORDION_ITEM,\n  ACCORDION_TRIGGER,\n} from \"../../generated/accordion\";\nimport type { AccordionType } from \"../../generated/accordion\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\n\ninterface AccordionContextValue {\n  isOpen: (value: string) => boolean;\n  toggle: (value: string) => void;\n}\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nfunction useAccordion(): AccordionContextValue {\n  const ctx = React.useContext(AccordionContext);\n  if (!ctx) throw new Error(\"Accordion parts must be used within <Accordion>\");\n  return ctx;\n}\n\nconst ItemContext = React.createContext<string | null>(null);\n\nfunction useItemValue(): string {\n  const value = React.useContext(ItemContext);\n  if (value === null)\n    throw new Error(\"AccordionTrigger/Content must be used within <AccordionItem>\");\n  return value;\n}\n\nexport interface AccordionProps\n  extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  type?: AccordionType;\n  collapsible?: boolean;\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n}\n\nexport function Accordion({\n  type = \"single\",\n  collapsible = false,\n  value,\n  defaultValue = [],\n  onValueChange,\n  children,\n  ...props\n}: AccordionProps) {\n  const [open, setOpen] = useControllableState<string[]>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const isOpen = (v: string) => open.includes(v);\n  const toggle = (v: string) => {\n    if (type === \"multiple\") {\n      setOpen(open.includes(v) ? open.filter((x) => x !== v) : [...open, v]);\n      return;\n    }\n    if (open.includes(v)) setOpen(collapsible ? [] : open);\n    else setOpen([v]);\n  };\n\n  return (\n    <AccordionContext.Provider value={{ isOpen, toggle }}>\n      <div data-slot=\"accordion\" {...props}>\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nexport interface AccordionItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n}\n\nexport function AccordionItem({\n  className,\n  value,\n  children,\n  ...props\n}: AccordionItemProps) {\n  return (\n    <ItemContext.Provider value={value}>\n      <div\n        data-slot=\"accordion-item\"\n        className={cn(ACCORDION_ITEM, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </ItemContext.Provider>\n  );\n}\n\nexport function AccordionTrigger({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  const { isOpen, toggle } = useAccordion();\n  const value = useItemValue();\n  const open = isOpen(value);\n  return (\n    <h3 className={ACCORDION_HEADER} data-slot=\"accordion-header\">\n      <button\n        type=\"button\"\n        data-slot=\"accordion-trigger\"\n        data-state={open ? \"open\" : \"closed\"}\n        aria-expanded={open}\n        className={cn(ACCORDION_TRIGGER, className)}\n        onClick={(e) => {\n          onClick?.(e);\n          toggle(value);\n        }}\n        {...props}\n      >\n        {children}\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-ink-soft pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\"\n        >\n          {iconShapes(\"chevron-down\")}\n        </svg>\n      </button>\n    </h3>\n  );\n}\n\nexport function AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { isOpen } = useAccordion();\n  const value = useItemValue();\n  if (!isOpen(value)) return null;\n  return (\n    <div\n      data-slot=\"accordion-content\"\n      data-state=\"open\"\n      className={ACCORDION_CONTENT}\n      {...props}\n    >\n      <div className={cn(ACCORDION_CONTENT_INNER, className)}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{alert-dialog.js → atomic/alert-dialog.js}

@@ -1,15 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import { buttonVariants } from "./button.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from "../primitives/dismissable-layer.js";
-import { useFocusScope } from "../primitives/focus-scope.js";
-import { usePresence } from "../primitives/presence.js";
-import { mergeRefs } from "../primitives/merge-refs.js";
-import { Portal } from "../primitives/portal.js";
-import { Slot } from "../primitives/slot.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from "../../primitives/dismissable-layer.js";
+import { useFocusScope } from "../../primitives/focus-scope.js";
+import { usePresence } from "../../primitives/presence.js";
+import { mergeRefs } from "../../primitives/merge-refs.js";
+import { Portal } from "../../primitives/portal.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   ALERT_DIALOG_CONTENT,
   ALERT_DIALOG_DESCRIPTION,
@@ -17,7 +17,7 @@ import {
   ALERT_DIALOG_HEADER,
   ALERT_DIALOG_OVERLAY,
   ALERT_DIALOG_TITLE
-} from "../generated/alert-dialog.js";
+} from "../../generated/alert-dialog.js";
 const AlertDialogContext = React.createContext(null);
 function useAlertDialog() {
   const ctx = React.useContext(AlertDialogContext);

package/dist/components/atomic/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../../primitives/focus-scope\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  ALERT_DIALOG_CONTENT,\n  ALERT_DIALOG_DESCRIPTION,\n  ALERT_DIALOG_FOOTER,\n  ALERT_DIALOG_HEADER,\n  ALERT_DIALOG_OVERLAY,\n  ALERT_DIALOG_TITLE,\n} from \"../../generated/alert-dialog\";\n\ninterface AlertDialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialog(): AlertDialogContextValue {\n  const ctx = React.useContext(AlertDialogContext);\n  if (!ctx) throw new Error(\"AlertDialog parts must be used within <AlertDialog>\");\n  return ctx;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function AlertDialog({ open, defaultOpen = false, onOpenChange, children }: AlertDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <AlertDialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </AlertDialogContext.Provider>\n  );\n}\n\nexport interface AlertDialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function AlertDialogTrigger({ asChild = false, onClick, ...props }: AlertDialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"alert-dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  const { open } = useAlertDialog();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"alert-dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(ALERT_DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <AlertDialogOverlay style={scrimStyle} />\n      <div\n        data-slot=\"alert-dialog-content\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(ALERT_DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n\nexport function AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(ALERT_DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(ALERT_DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"alert-dialog-title\"\n      className={cn(ALERT_DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-dialog-description\"\n      className={cn(ALERT_DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogAction({ className, onClick, ...props }: AlertDialogActionProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogCancelProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogCancel({ className, onClick, ...props }: AlertDialogCancelProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{alert.js → atomic/alert.js}

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import {
   ALERT_BASE,
   ALERT_DESCRIPTION,
-  ALERT_TITLE,
-  alertVariants
-} from "../generated/alert.js";
-function Alert({ className, variant = "neutral", ...props }) {
+  ALERT_TITLE
+} from "../../generated/alert.js";
+import { toneClasses } from "../../generated/tone.js";
+function Alert({ className, tone = "neutral", ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "alert",
       role: "alert",
-      className: cn(ALERT_BASE, alertVariants[variant], className),
+      className: cn(ALERT_BASE, toneClasses[tone], className),
       ...props
     }
   );

package/dist/components/atomic/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  ALERT_BASE,\n  ALERT_DESCRIPTION,\n  ALERT_TITLE,\n} from \"../../generated/alert\";\nimport { toneClasses, type Tone } from \"../../generated/tone\";\n\nexport interface AlertProps extends React.ComponentProps<\"div\"> {\n  tone?: Tone;\n}\n\nexport function Alert({ className, tone = \"neutral\", ...props }: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(ALERT_BASE, toneClasses[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(ALERT_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(ALERT_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AAeI;AAfJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAA8B;AAMhC,SAAS,MAAM,EAAE,WAAW,OAAO,WAAW,GAAG,MAAM,GAAe;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,YAAY,YAAY,IAAI,GAAG,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,SAAS;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/{animated-number-columns.js → atomic/animated-number-columns.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { rollStep } from "../lib/number-parts.js";
+import { rollStep } from "../../lib/number-parts.js";
 const EDGE_MS = 350;
 const EDGE_EASE = "var(--ev-ease-out, cubic-bezier(0.22, 1, 0.36, 1))";
 const SPIN_MS = 750;

package/dist/components/atomic/animated-number-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/animated-number-columns.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { NumberItem, RollDirection } from \"../../lib/number-parts\";\nimport { rollStep } from \"../../lib/number-parts\";\n\n// The JS side has to know when an entering or leaving column is done, so these\n// are literals rather than `--ev-dur-*` (400ms is the nearest token).\nexport const EDGE_MS = 350;\nconst EDGE_EASE = \"var(--ev-ease-out, cubic-bezier(0.22, 1, 0.36, 1))\";\nexport const SPIN_MS = 750;\n// A damped spring (zeta .72, ~4% overshoot) sampled for `linear()`.\nconst SPRING =\n  \"linear(0, 0.097, 0.301, 0.521, 0.712, 0.855, 0.95, 1.005, 1.031, 1.038, 1.035, 1.028, 1.019, 1.012, 1.006, 1.002, 1, 0.999, 1, 1, 1)\";\nconst WINDOW_EDGE = \"0.25em\";\nconst WINDOW_MASK = `linear-gradient(to bottom, transparent 0, black ${WINDOW_EDGE}, black calc(100% - ${WINDOW_EDGE}), transparent 100%)`;\n\nfunction spinEasing(): string {\n  const springy = typeof CSS !== \"undefined\" && typeof CSS.supports === \"function\" && CSS.supports(\"transition-timing-function\", SPRING);\n  return springy ? SPRING : EDGE_EASE;\n}\n\ninterface SlotProps {\n  item: NumberItem;\n  glyphs: readonly string[];\n  direction: RollDirection;\n  motion: boolean;\n  spin: number;\n}\n\n/** One part of the number; collapses to zero width to enter or leave, so its neighbours slide. */\nexport function Slot({ item, glyphs, direction, motion, spin }: SlotProps) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const [open, setOpen] = React.useState(!item.fresh);\n  React.useLayoutEffect(() => {\n    if (open) return;\n    // Reading layout makes the browser style the collapsed state, so opening it is a transition.\n    void ref.current?.offsetWidth;\n    setOpen(true);\n  }, [open]);\n  const collapsed = item.exiting || !open;\n  const { part } = item;\n  return (\n    <span\n      ref={ref}\n      data-slot=\"animated-number-part\"\n      data-state={collapsed ? \"collapsed\" : \"open\"}\n      style={{\n        display: \"inline-grid\",\n        gridTemplateColumns: collapsed ? \"0fr\" : \"1fr\",\n        opacity: collapsed ? 0 : 1,\n        transition: motion\n          ? `grid-template-columns ${EDGE_MS}ms ${EDGE_EASE}, opacity ${EDGE_MS}ms ${EDGE_EASE}`\n          : undefined,\n      }}\n    >\n      <span style={{ minWidth: 0, overflowX: \"clip\", whiteSpace: \"pre\" }}>\n        {part.kind === \"digit\" ? (\n          <Digit digit={part.digit} glyphs={glyphs} direction={direction} motion={motion} spin={spin} />\n        ) : (\n          part.text\n        )}\n      </span>\n    </span>\n  );\n}\n\ninterface SpinState {\n  digit: number;\n  /** Index into the unbounded strip; the glyph at index i is `i mod 10`. */\n  at: number;\n  lo: number;\n  hi: number;\n  animate: boolean;\n  /** Sign of the last move, for `data-roll`. */\n  step: number;\n}\n\nconst settle = (digit: number): SpinState => ({ digit, at: digit, lo: digit, hi: digit, animate: false, step: 0 });\n\nconst glyphIndex = (i: number): number => ((i % 10) + 10) % 10;\n\ninterface DigitProps {\n  digit: number;\n  glyphs: readonly string[];\n  direction: RollDirection;\n  motion: boolean;\n  spin: number;\n}\n\n/**\n * A clipped one-line window over a strip of digits. The strip is unbounded,\n * so a forced direction wraps (9 -> 0 going up lands on index 10) and a column\n * never rewinds through the digits in between. Only the cells between where it\n * was and where it is going exist in the DOM; when the transition ends it is\n * rebased to 0..9 without a transition.\n */\nfunction Digit({ digit, glyphs, direction, motion, spin }: DigitProps) {\n  const [state, setState] = React.useState<SpinState>(() => settle(digit));\n  let s = state;\n  if (s.digit !== digit) {\n    if (motion) {\n      const step = rollStep(s.digit, digit, direction);\n      const at = s.at + step;\n      s = { digit, at, lo: Math.min(s.lo, at), hi: Math.max(s.hi, at), animate: true, step };\n    } else {\n      s = settle(digit);\n    }\n    setState(s);\n  }\n  const moving = s.lo !== s.hi;\n  const cells = Array.from({ length: s.hi - s.lo + 1 }, (_, n) => s.lo + n);\n  return (\n    <span\n      data-slot=\"animated-number-digit\"\n      data-roll={moving ? (s.step > 0 ? \"up\" : \"down\") : \"rest\"}\n      style={{\n        position: \"relative\",\n        display: \"inline-block\",\n        overflow: \"clip\",\n        paddingBlock: WINDOW_EDGE,\n        marginBlock: `-${WINDOW_EDGE}`,\n        ...(moving ? { maskImage: WINDOW_MASK } : {}),\n      }}\n    >\n      <span style={{ display: \"block\", visibility: \"hidden\" }}>{glyphs[0]}</span>\n      <span\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && e.propertyName === \"transform\") setState(settle(digit));\n        }}\n        style={{\n          position: \"absolute\",\n          insetInline: 0,\n          top: WINDOW_EDGE,\n          transform: `translateY(calc(${-s.at} * 1lh))`,\n          transition: s.animate ? `transform ${spin}ms ${spinEasing()}` : \"none\",\n        }}\n      >\n        {cells.map((i) => (\n          <span\n            key={i}\n            style={{ position: \"absolute\", insetInline: 0, top: `calc(${i} * 1lh)`, height: \"1lh\", textAlign: \"center\" }}\n          >\n            {glyphs[glyphIndex(i)]}\n          </span>\n        ))}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{avatar.js → atomic/avatar.js}

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { AVATAR, AVATAR_IMAGE, AVATAR_FALLBACK } from "../generated/avatar.js";
+import { cn } from "../../lib/cn.js";
+import { AVATAR, AVATAR_IMAGE, AVATAR_FALLBACK } from "../../generated/avatar.js";
 function Avatar({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",

package/dist/components/atomic/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { AVATAR, AVATAR_IMAGE, AVATAR_FALLBACK } from \"../../generated/avatar\";\n\nexport function Avatar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar\"\n      className={cn(AVATAR, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  onError,\n  ...props\n}: React.ComponentProps<\"img\">) {\n  const [errored, setErrored] = React.useState(false);\n  if (errored) return null;\n  return (\n    <img\n      data-slot=\"avatar-image\"\n      className={cn(AVATAR_IMAGE, className)}\n      onError={(e) => {\n        onError?.(e);\n        setErrored(true);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-fallback\"\n      className={cn(AVATAR_FALLBACK, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAQI;AANJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc,uBAAuB;AAE/C,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,MAAI,QAAS,QAAO;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,mBAAW,IAAI;AAAA,MACjB;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/atomic/badge.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Slot } from "../../primitives/slot.js";
+import { BADGE_BASE } from "../../generated/badge.js";
+import { toneClasses } from "../../generated/tone.js";
+function Badge({
+  className,
+  tone = "neutral",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(BADGE_BASE, toneClasses[tone], className),
+      ...props
+    }
+  );
+}
+export {
+  Badge
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/atomic/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport { BADGE_BASE } from \"../../generated/badge\";\nimport { toneClasses, type Tone } from \"../../generated/tone\";\n\nexport interface BadgeProps extends React.ComponentProps<\"span\"> {\n  tone?: Tone;\n  asChild?: boolean;\n}\n\nexport function Badge({\n  className,\n  tone = \"neutral\",\n  asChild = false,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot : \"span\";\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(BADGE_BASE, toneClasses[tone], className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":"AAmBI;AAnBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,mBAA8B;AAOhC,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,YAAY,IAAI,GAAG,SAAS;AAAA,MACrD,GAAI;AAAA;AAAA,EACP;AAEJ;","names":[]}

package/dist/components/{band.js → atomic/band.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import {
   CHECK,
   DISPLAY_BASE,
@@ -16,7 +16,7 @@ import {
   STAT_FIGURE,
   STAT_LABEL,
   surfaceClasses
-} from "../generated/band.js";
+} from "../../generated/band.js";
 function Section({
   polarity,
   surface = "background",

package/dist/components/atomic/band.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/band.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  CHECK,\n  DISPLAY_BASE,\n  EYEBROW,\n  LEDE,\n  PROSE,\n  polarityClasses,\n  SECTION_BASE,\n  SECTION_HEAD,\n  SECTION_PY,\n  SECTION_PY_TIGHT,\n  STAT,\n  STAT_FIGURE,\n  STAT_LABEL,\n  surfaceClasses,\n  type Polarity,\n  type Surface,\n} from \"../../generated/band\";\n\nexport type { Polarity, Surface };\n\n/**\n * Full-bleed page bands and the type vocabulary that goes in them. A page built\n * from these writes no spacing or type-scale class of its own: the rhythm is\n * `--band-py`, the gutter `--page-px` and the headline scale `--display-scale`,\n * so a global retune is one edit in the consumer's tokens.\n */\nexport interface SectionProps extends React.ComponentProps<\"section\"> {\n  polarity?: Polarity;\n  surface?: Surface;\n  tight?: boolean;\n}\n\n/**\n * `polarity` sets the token scope on the element, so everything inside reads\n * `text-ink` / `border-border` / `text-ink-soft` and resolves correctly on\n * either side. Omitted, the band sets no scope and inherits its parent's: a\n * default of `light` would flip every band of a dark-first brand. `tight` is\n * the shorter vertical rhythm.\n */\nexport function Section({\n  polarity,\n  surface = \"background\",\n  tight = false,\n  className,\n  ...props\n}: SectionProps) {\n  return (\n    <section\n      data-slot=\"section\"\n      className={cn(\n        // conflict-free by construction — a gutter, a scope class, a plane and a\n        // rhythm — so only the caller override is worth a merge\n        `${SECTION_BASE} ${polarity ? polarityClasses[polarity] : \"\"} ${surfaceClasses[surface]} ${\n          tight ? SECTION_PY_TIGHT : SECTION_PY\n        }`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The label above a headline, in the interactive role's colour. */\nexport function Eyebrow({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p data-slot=\"eyebrow\" className={cn(EYEBROW, className)} {...props} />;\n}\n\n/** The headline. One scale for every band on the site, so a retune is one number. */\nexport function Display({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return <h2 data-slot=\"display\" className={cn(DISPLAY_BASE, className)} {...props} />;\n}\n\nexport interface SectionHeadProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  eyebrow: React.ReactNode;\n  title: React.ReactNode;\n  lede?: React.ReactNode;\n}\n\n/** Eyebrow → headline → lede, the head a band shares. */\nexport function SectionHead({ eyebrow, title, lede, className, ...props }: SectionHeadProps) {\n  return (\n    <div data-slot=\"section-head\" className={cn(SECTION_HEAD, className)} {...props}>\n      <Eyebrow>{eyebrow}</Eyebrow>\n      <Display>{title}</Display>\n      {lede && <p className={LEDE}>{lede}</p>}\n    </div>\n  );\n}\n\n/** Body copy at the reading measure. */\nexport function Prose({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p data-slot=\"prose\" className={cn(PROSE, className)} {...props} />;\n}\n\nexport interface StatProps extends React.ComponentProps<\"span\"> {\n  figure: React.ReactNode;\n  label: React.ReactNode;\n}\n\n/** A figure with its label beside it. */\nexport function Stat({ figure, label, className, ...props }: StatProps) {\n  return (\n    <span data-slot=\"stat\" className={cn(STAT, className)} {...props}>\n      <span className={STAT_FIGURE}>{figure}</span>\n      <span className={STAT_LABEL}>{label}</span>\n    </span>\n  );\n}\n\n/**\n * The affirmative tick. Positive is a valence, not a significance rung — see the\n * kit's `docs/spec/accents.md`.\n */\nexport function Check({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span data-slot=\"check\" aria-hidden className={cn(CHECK, className)} {...props}>\n      ✓\n    </span>\n  );\n}\n"],"mappings":"AAkDI,cAkCA,YAlCA;AAlDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAuBA,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA,QAGT,GAAG,YAAY,IAAI,WAAW,gBAAgB,QAAQ,IAAI,EAAE,IAAI,eAAe,OAAO,CAAC,IACrF,QAAQ,mBAAmB,UAC7B;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAA8B;AAC1E,SAAO,oBAAC,OAAE,aAAU,WAAU,WAAW,GAAG,SAAS,SAAS,GAAI,GAAG,OAAO;AAC9E;AAGO,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC3E,SAAO,oBAAC,QAAG,aAAU,WAAU,WAAW,GAAG,cAAc,SAAS,GAAI,GAAG,OAAO;AACpF;AASO,SAAS,YAAY,EAAE,SAAS,OAAO,MAAM,WAAW,GAAG,MAAM,GAAqB;AAC3F,SACE,qBAAC,SAAI,aAAU,gBAAe,WAAW,GAAG,cAAc,SAAS,GAAI,GAAG,OACxE;AAAA,wBAAC,WAAS,mBAAQ;AAAA,IAClB,oBAAC,WAAS,iBAAM;AAAA,IACf,QAAQ,oBAAC,OAAE,WAAW,MAAO,gBAAK;AAAA,KACrC;AAEJ;AAGO,SAAS,MAAM,EAAE,WAAW,GAAG,MAAM,GAA8B;AACxE,SAAO,oBAAC,OAAE,aAAU,SAAQ,WAAW,GAAG,OAAO,SAAS,GAAI,GAAG,OAAO;AAC1E;AAQO,SAAS,KAAK,EAAE,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAc;AACtE,SACE,qBAAC,UAAK,aAAU,QAAO,WAAW,GAAG,MAAM,SAAS,GAAI,GAAG,OACzD;AAAA,wBAAC,UAAK,WAAW,aAAc,kBAAO;AAAA,IACtC,oBAAC,UAAK,WAAW,YAAa,iBAAM;AAAA,KACtC;AAEJ;AAMO,SAAS,MAAM,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC3E,SACE,oBAAC,UAAK,aAAU,SAAQ,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,GAAI,GAAG,OAAO,oBAEhF;AAEJ;","names":[]}

package/dist/components/{breadcrumb.js → atomic/breadcrumb.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Slot } from "../primitives/slot.js";
+import { cn } from "../../lib/cn.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   BREADCRUMB_ELLIPSIS,
   BREADCRUMB_ITEM,
@@ -9,9 +9,11 @@ import {
   BREADCRUMB_LIST,
   BREADCRUMB_PAGE,
   BREADCRUMB_SEPARATOR
-} from "../generated/breadcrumb.js";
+} from "../../generated/breadcrumb.js";
+import * as copy from "../../generated/copy.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 function Breadcrumb({ ...props }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": copy.BREADCRUMB, "data-slot": "breadcrumb", ...props });
 }
 function BreadcrumbList({
   className,
@@ -83,7 +85,7 @@ function BreadcrumbSeparator({
       "aria-hidden": "true",
       className: cn(BREADCRUMB_SEPARATOR, className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+      children: children ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: iconShapes("chevron-right") })
     }
   );
 }
@@ -100,7 +102,7 @@ function BreadcrumbEllipsis({
       className: cn(BREADCRUMB_ELLIPSIS, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "svg",
           {
             className: "size-4",
@@ -108,14 +110,10 @@ function BreadcrumbEllipsis({
             fill: "none",
             stroke: "currentColor",
             strokeWidth: 2,
-            children: [
-              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
-            ]
+            children: iconShapes("ellipsis")
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: copy.BREADCRUMB_MORE })
       ]
     }
   );

package/dist/components/atomic/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  BREADCRUMB_ELLIPSIS,\n  BREADCRUMB_ITEM,\n  BREADCRUMB_LINK,\n  BREADCRUMB_LIST,\n  BREADCRUMB_PAGE,\n  BREADCRUMB_SEPARATOR,\n} from \"../../generated/breadcrumb\";\nimport * as copy from \"../../generated/copy\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\nexport function Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label={copy.BREADCRUMB} data-slot=\"breadcrumb\" {...props} />;\n}\n\nexport function BreadcrumbList({\n  className,\n  ...props\n}: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(BREADCRUMB_LIST, className)}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(BREADCRUMB_ITEM, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface BreadcrumbLinkProps extends React.ComponentProps<\"a\"> {\n  asChild?: boolean;\n}\n\nexport function BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: BreadcrumbLinkProps) {\n  const Comp = asChild ? Slot : \"a\";\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(BREADCRUMB_LINK, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(BREADCRUMB_PAGE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(BREADCRUMB_SEPARATOR, className)}\n      {...props}\n    >\n      {children ?? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n          {iconShapes(\"chevron-right\")}\n        </svg>\n      )}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(BREADCRUMB_ELLIPSIS, className)}\n      {...props}\n    >\n      <svg\n        className=\"size-4\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={2}\n      >\n        {iconShapes(\"ellipsis\")}\n      </svg>\n      <span className=\"sr-only\">{copy.BREADCRUMB_MORE}</span>\n    </span>\n  );\n}\n"],"mappings":"AAeS,cA2FL,YA3FK;AAfT,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,UAAU;AACtB,SAAS,kBAAkB;AAEpB,SAAS,WAAW,EAAE,GAAG,MAAM,GAAgC;AACpE,SAAO,oBAAC,SAAI,cAAY,KAAK,YAAY,aAAU,cAAc,GAAG,OAAO;AAC7E;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;AAMO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAI;AAAA;AAAA,EACP;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MACb,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC5C,GAAG;AAAA,MAEH,sBACC,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GACrE,qBAAW,eAAe,GAC7B;AAAA;AAAA,EAEJ;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAa;AAAA,YAEZ,qBAAW,UAAU;AAAA;AAAA,QACxB;AAAA,QACA,oBAAC,UAAK,WAAU,WAAW,eAAK,iBAAgB;AAAA;AAAA;AAAA,EAClD;AAEJ;","names":[]}

package/dist/components/{button-group.js → atomic/button-group.js}

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Slot } from "../primitives/slot.js";
+import { cn } from "../../lib/cn.js";
+import { Slot } from "../../primitives/slot.js";
 import {
   BUTTON_GROUP_BASE,
   BUTTON_GROUP_SEPARATOR_BASE,
   BUTTON_GROUP_TEXT_BASE,
   buttonGroupOrientationClasses
-} from "../generated/button-group.js";
+} from "../../generated/button-group.js";
 function ButtonGroup({
   className,
   orientation = "horizontal",

package/dist/components/atomic/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/button-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  BUTTON_GROUP_BASE,\n  BUTTON_GROUP_SEPARATOR_BASE,\n  BUTTON_GROUP_TEXT_BASE,\n  buttonGroupOrientationClasses,\n  type ButtonGroupOrientation,\n} from \"../../generated/button-group\";\n\nexport type { ButtonGroupOrientation };\n\nexport interface ButtonGroupProps extends React.ComponentProps<\"div\"> {\n  orientation?: ButtonGroupOrientation;\n}\n\nexport function ButtonGroup({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(BUTTON_GROUP_BASE, buttonGroupOrientationClasses[orientation], className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ButtonGroupTextProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nexport function ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: ButtonGroupTextProps) {\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      className={cn(BUTTON_GROUP_TEXT_BASE, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function ButtonGroupSeparator({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"separator\"\n      data-slot=\"button-group-separator\"\n      data-orientation=\"vertical\"\n      className={cn(BUTTON_GROUP_SEPARATOR_BASE, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AAuBI;AAvBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAQA,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW,GAAG,mBAAmB,8BAA8B,WAAW,GAAG,SAAS;AAAA,MACrF,GAAG;AAAA;AAAA,EACN;AAEJ;AAMO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAyB;AACvB,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAC9C,GAAI;AAAA;AAAA,EACP;AAEJ;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAiB;AAAA,MACjB,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/{button.js → atomic/button.js}

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Slot } from "../primitives/slot.js";
-import { accentFillClasses, accentOutlineClasses } from "../generated/accent.js";
+import { cn } from "../../lib/cn.js";
+import { Slot } from "../../primitives/slot.js";
+import { sizeClasses } from "../../generated/size.js";
+import { accentFillClasses, accentOutlineClasses } from "../../generated/accent.js";
 import {
   BUTTON_BASE,
-  buttonIconSizeClasses,
-  buttonSizeClasses,
+  BUTTON_ICON,
   buttonVariantClasses
-} from "../generated/button.js";
+} from "../../generated/button.js";
 function buttonVariants({
   variant = "primary",
   size = "md",
@@ -19,7 +19,8 @@ function buttonVariants({
   return cn(
     BUTTON_BASE,
     buttonVariantClasses[variant],
-    icon ? buttonIconSizeClasses[size] : buttonSizeClasses[size],
+    sizeClasses[size],
+    icon ? BUTTON_ICON : void 0,
     accent === void 0 ? void 0 : accentClass(accent, variant),
     className
   );

package/dist/components/atomic/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport { sizeClasses, type Size } from \"../../generated/size\";\nimport { accentFillClasses, accentOutlineClasses, type Accent } from \"../../generated/accent\";\nimport {\n  BUTTON_BASE,\n  BUTTON_ICON,\n  buttonVariantClasses,\n  type ButtonVariant,\n} from \"../../generated/button\";\n\nexport type ButtonSize = Size;\nexport type { Accent, ButtonVariant };\n\nexport interface ButtonVariantsOptions {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** A square button holding a bare glyph; `size` still picks the magnitude. */\n  icon?: boolean;\n  /** Recolours the button at an accent rung; unset is the normal case. */\n  accent?: Accent | undefined;\n  className?: string;\n}\n\n/**\n * Returns the fused canonical button class string. Reused by `pagination` so a\n * non-`Button` element can adopt the same styling, mirroring Rust's\n * `button_classes`.\n *\n * The accent fuses after the variant so it recolours whatever the variant set.\n */\nexport function buttonVariants({\n  variant = \"primary\",\n  size = \"md\",\n  icon = false,\n  accent,\n  className,\n}: ButtonVariantsOptions = {}): string {\n  return cn(\n    BUTTON_BASE,\n    buttonVariantClasses[variant],\n    sizeClasses[size],\n    icon ? BUTTON_ICON : undefined,\n    accent === undefined ? undefined : accentClass(accent, variant),\n    className,\n  );\n}\n\n// Which face an accent wears is the variant's business — an outlined button tints\n// what it already has, anything else repaints. Mirrors Rust's `button_accent_class`.\nfunction accentClass(accent: Accent, variant: ButtonVariant): string {\n  return variant === \"outline\" ? accentOutlineClasses[accent] : accentFillClasses[accent];\n}\n\nexport interface ButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  icon?: boolean;\n  accent?: Accent;\n  asChild?: boolean;\n  /** Renders an `<a>` wearing the button's classes — a link that looks like a\n   *  call to action is still a link. */\n  href?: string;\n}\n\n// `forwardRef` so `asChild` triggers (Popover, Tooltip, Dialog) get their anchor under React 18 too.\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant = \"primary\", size = \"md\", icon = false, accent, asChild = false, href, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot : href !== undefined ? \"a\" : \"button\";\n  return (\n    <Comp\n      data-slot=\"button\"\n      href={href}\n      ref={ref as React.Ref<never>}\n      className={cn(buttonVariants({ variant, size, icon, accent }), className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n});\n"],"mappings":"AAyEI;AAzEJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,mBAA8B;AACvC,SAAS,mBAAmB,4BAAyC;AACrE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAsBA,SAAS,eAAe;AAAA,EAC7B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AACF,IAA2B,CAAC,GAAW;AACrC,SAAO;AAAA,IACL;AAAA,IACA,qBAAqB,OAAO;AAAA,IAC5B,YAAY,IAAI;AAAA,IAChB,OAAO,cAAc;AAAA,IACrB,WAAW,SAAY,SAAY,YAAY,QAAQ,OAAO;AAAA,IAC9D;AAAA,EACF;AACF;AAIA,SAAS,YAAY,QAAgB,SAAgC;AACnE,SAAO,YAAY,YAAY,qBAAqB,MAAM,IAAI,kBAAkB,MAAM;AACxF;AAcO,MAAM,SAAS,MAAM,WAA2C,SAASA,QAC9E,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,OAAO,OAAO,QAAQ,UAAU,OAAO,MAAM,GAAG,MAAM,GACrG,KACA;AACA,QAAM,OAAO,UAAU,OAAO,SAAS,SAAY,MAAM;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,MAAM,OAAO,CAAC,GAAG,SAAS;AAAA,MACvE,GAAI;AAAA;AAAA,EACP;AAEJ,CAAC;","names":["Button"]}

package/dist/components/{calendar.js → atomic/calendar.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import { buttonVariants } from "./button.js";
 import {
   CALENDAR_CAPTION,
@@ -17,25 +17,10 @@ import {
   CALENDAR_WEEK,
   CALENDAR_WEEKDAY,
   CALENDAR_WEEKDAY_ROW
-} from "../generated/calendar.js";
-const MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
-const CHEVRON_LEFT = "m15 18-6-6 6-6";
-const CHEVRON_RIGHT = "m9 18 6-6-6-6";
-function Chevron({ d }) {
+} from "../../generated/calendar.js";
+import * as copy from "../../generated/copy.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
+function Chevron({ icon }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -50,7 +35,7 @@ function Chevron({ d }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx("path", { d })
+      children: iconShapes(icon)
     }
   );
 }
@@ -94,8 +79,8 @@ function Calendar({
   min,
   max,
   disabled = false,
-  previousMonthLabel = "Previous month",
-  nextMonthLabel = "Next month",
+  previousMonthLabel = copy.CALENDAR_PREVIOUS_MONTH,
+  nextMonthLabel = copy.CALENDAR_NEXT_MONTH,
   locale,
   className
 }) {
@@ -110,8 +95,8 @@ function Calendar({
   };
   const year = view.getFullYear();
   const monthIndex = view.getMonth();
-  const caption = locale ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(view) : `${MONTHS[monthIndex]} ${year}`;
-  const weekdays = locale ? localisedWeekdays(locale) : WEEKDAYS;
+  const caption = locale ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(view) : `${copy.MONTHS[monthIndex]} ${year}`;
+  const weekdays = locale ? localisedWeekdays(locale) : copy.WEEKDAYS;
   const lead = mondayIndex(view);
   const total = new Date(year, monthIndex + 1, 0).getDate();
   const cells = [];
@@ -142,7 +127,7 @@ function Calendar({
               "aria-label": previousMonthLabel,
               disabled,
               onClick: () => go(-1),
-              children: /* @__PURE__ */ jsx(Chevron, { d: CHEVRON_LEFT })
+              children: /* @__PURE__ */ jsx(Chevron, { icon: "chevron-left" })
             }
           ),
           /* @__PURE__ */ jsx("div", { "data-slot": "calendar-caption", className: CALENDAR_CAPTION, children: caption }),
@@ -154,7 +139,7 @@ function Calendar({
               "aria-label": nextMonthLabel,
               disabled,
               onClick: () => go(1),
-              children: /* @__PURE__ */ jsx(Chevron, { d: CHEVRON_RIGHT })
+              children: /* @__PURE__ */ jsx(Chevron, { icon: "chevron-right" })
             }
           )
         ] }),