@krizaka/ui 3.36.0 → 3.37.0

package/dist/settings-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/settings-layout/settings-layout.tsx"],"sourcesContent":["// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto overflow-y-hidden px-4 py-1 -my-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:overflow-visible lg:px-0 lg:py-0 lg:my-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-full border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n    // The flat look: no card, hairline-divided rows (Linear / Vercel / GitHub settings).\n    rows: \"flex flex-col divide-y divide-border-subtle border-y border-border-subtle\",\n    row: \"flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\",\n    rowText: \"flex min-w-0 flex-col gap-0.5\",\n    rowLabel: \"text-sm font-medium text-fg\",\n    rowDescription: \"text-sm text-fg-secondary\",\n    rowControl: \"flex min-w-0 shrink-0 items-center gap-2 text-sm text-fg sm:max-w-[60%] sm:justify-end\",\n  },\n  variants: {\n    variant: {\n      card: {},\n      flat: {\n        content: \"max-w-[45rem] gap-10\",\n        section: \"rounded-none border-0 bg-transparent\",\n        sectionHead: \"gap-0.5 px-0 pb-3 pt-0\",\n        sectionBody: \"gap-0 px-0 py-0\",\n        sectionFooter: \"justify-start border-t-0 bg-transparent px-0 pb-0 pt-4\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"card\" },\n});\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /**\n   * `card` (each form a titled card) or `flat` (one calm column of at most 45rem, rows divided by hairlines).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", variant = \"card\", className, children, ...props }: SettingsLayoutProps) {\n  const s = settingsLayout({ variant });\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `card` (a titled card) or `flat` (no card: a title, then hairline-divided `SettingsRow`s).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The fields (or, flat, the `SettingsRow`s). */\n  children: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */\nexport function SettingsSection({ title, description, footer, variant = \"card\", id, className, children, ...props }: SettingsSectionProps) {\n  const s = settingsLayout({ variant });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section id={id} aria-labelledby={titleId} className={s.section({ className })} {...props}>\n      <div className={s.sectionHead()}>\n        <h2 id={titleId} className={s.sectionTitle()}>\n          {title}\n        </h2>\n        {description && <p className={s.sectionDescription()}>{description}</p>}\n      </div>\n      <div className={variant === \"flat\" ? s.rows() : s.sectionBody()} data-settings-rows={variant === \"flat\" ? \"\" : undefined}>\n        {children}\n      </div>\n      {footer && <div className={s.sectionFooter()}>{footer}</div>}\n    </section>\n  );\n}\n\nexport type SettingsRowProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** What the setting is (`Username`). */\n  label: React.ReactNode;\n  /** The help text under it, one sentence. */\n  description?: React.ReactNode;\n  /** The id of the control, so the label names it (a `<label htmlFor>`). Leave out for a plain value. */\n  htmlFor?: string;\n  /** The control or the value, on the right (stacked under the label on a phone). */\n  children?: React.ReactNode;\n};\n\n/** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */\nexport function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps) {\n  const s = settingsLayout();\n  const Label = htmlFor ? \"label\" : \"span\";\n  return (\n    <div className={s.row({ className })} {...props}>\n      <div className={s.rowText()}>\n        <Label className={s.rowLabel()} {...(htmlFor ? { htmlFor } : {})}>\n          {label}\n        </Label>\n        {description && <span className={s.rowDescription()}>{description}</span>}\n      </div>\n      {children !== undefined && <div className={s.rowControl()}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/settings-layout/settings-layout.tsx"],"sourcesContent":["// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto overflow-y-hidden px-4 py-1 -my-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:overflow-visible lg:px-0 lg:py-0 lg:my-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-sm border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n    // The flat look: no card, hairline-divided rows (Linear / Vercel / GitHub settings).\n    rows: \"flex flex-col divide-y divide-border-subtle border-y border-border-subtle\",\n    row: \"flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\",\n    rowText: \"flex min-w-0 flex-col gap-0.5\",\n    rowLabel: \"text-sm font-medium text-fg\",\n    rowDescription: \"text-sm text-fg-secondary\",\n    rowControl: \"flex min-w-0 shrink-0 items-center gap-2 text-sm text-fg sm:max-w-[60%] sm:justify-end\",\n  },\n  variants: {\n    variant: {\n      card: {},\n      flat: {\n        content: \"max-w-[45rem] gap-10\",\n        section: \"rounded-none border-0 bg-transparent\",\n        sectionHead: \"gap-0.5 px-0 pb-3 pt-0\",\n        sectionBody: \"gap-0 px-0 py-0\",\n        sectionFooter: \"justify-start border-t-0 bg-transparent px-0 pb-0 pt-4\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"card\" },\n});\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /**\n   * `card` (each form a titled card) or `flat` (one calm column of at most 45rem, rows divided by hairlines).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", variant = \"card\", className, children, ...props }: SettingsLayoutProps) {\n  const s = settingsLayout({ variant });\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `card` (a titled card) or `flat` (no card: a title, then hairline-divided `SettingsRow`s).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The fields (or, flat, the `SettingsRow`s). */\n  children: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */\nexport function SettingsSection({ title, description, footer, variant = \"card\", id, className, children, ...props }: SettingsSectionProps) {\n  const s = settingsLayout({ variant });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section id={id} aria-labelledby={titleId} className={s.section({ className })} {...props}>\n      <div className={s.sectionHead()}>\n        <h2 id={titleId} className={s.sectionTitle()}>\n          {title}\n        </h2>\n        {description && <p className={s.sectionDescription()}>{description}</p>}\n      </div>\n      <div className={variant === \"flat\" ? s.rows() : s.sectionBody()} data-settings-rows={variant === \"flat\" ? \"\" : undefined}>\n        {children}\n      </div>\n      {footer && <div className={s.sectionFooter()}>{footer}</div>}\n    </section>\n  );\n}\n\nexport type SettingsRowProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** What the setting is (`Username`). */\n  label: React.ReactNode;\n  /** The help text under it, one sentence. */\n  description?: React.ReactNode;\n  /** The id of the control, so the label names it (a `<label htmlFor>`). Leave out for a plain value. */\n  htmlFor?: string;\n  /** The control or the value, on the right (stacked under the label on a phone). */\n  children?: React.ReactNode;\n};\n\n/** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */\nexport function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps) {\n  const s = settingsLayout();\n  const Label = htmlFor ? \"label\" : \"span\";\n  return (\n    <div className={s.row({ className })} {...props}>\n      <div className={s.rowText()}>\n        <Label className={s.rowLabel()} {...(htmlFor ? { htmlFor } : {})}>\n          {label}\n        </Label>\n        {description && <span className={s.rowDescription()}>{description}</span>}\n      </div>\n      {children !== undefined && <div className={s.rowControl()}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/site-footer.js

@@ -29,10 +29,10 @@ var siteFooter = tv({
     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 text-fg-secondary",
+    tag: "rounded-sm 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",
+    version: "rounded-sm border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary",
     legal: "flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto"
   },
   variants: {

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 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":[]}
+{"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-sm 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-sm 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/skip-link.js

@@ -2,7 +2,7 @@
 import {
   SkipLink,
   skipLink
-} from "./chunk-QDXV544C.js";
+} from "./chunk-4QH6CP2Y.js";
 export {
   SkipLink,
   skipLink

package/dist/slot-picker.js

@@ -15,7 +15,7 @@ var slotPicker = tv({
     dayName: "text-xs font-bold",
     daySub: "text-[11px] tabular-nums text-fg-muted",
     times: "m-0 flex list-none flex-wrap gap-2 p-0",
-    time: "inline-flex min-h-11 min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full border border-border-default bg-surface-1 px-4 text-sm font-semibold tabular-nums text-fg no-underline transition-colors hover:border-accent/60 hover:bg-accent-soft focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent disabled:cursor-not-allowed disabled:opacity-50",
+    time: "inline-flex min-h-11 min-w-[4.75rem] items-center justify-center gap-1.5 rounded-sm border border-border-default bg-surface-1 px-4 text-sm font-semibold tabular-nums text-fg no-underline transition-colors hover:border-accent/60 hover:bg-accent-soft focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent disabled:cursor-not-allowed disabled:opacity-50",
     note: "text-[11px] font-medium text-fg-secondary group-aria-pressed:text-on-accent",
     empty: "m-0 rounded-xl border border-dashed border-border-default px-4 py-6 text-center text-sm text-fg-secondary"
   }

package/dist/slot-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slot-picker/slot-picker.tsx"],"sourcesContent":["// Client (the chosen day). The next free times of a service as tappable chips: a strip of days, then the day's times.\n// A time is a link (`href`: the booking page with the time chosen) or a toggle the reader presses (`value`,\n// `onValueChange`). The app computes the slots (its availability is the truth) and formats the labels.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\n\nexport const slotPicker = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-3\",\n    days: \"flex gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n    day:\n      \"flex min-h-12 min-w-[4.5rem] shrink-0 cursor-pointer flex-col items-center justify-center rounded-xl border border-border-default bg-surface-1 px-3 py-1.5 text-center leading-tight text-fg-secondary \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-pressed:border-accent aria-pressed:bg-accent-soft aria-pressed:text-fg\",\n    dayName: \"text-xs font-bold\",\n    daySub: \"text-[11px] tabular-nums text-fg-muted\",\n    times: \"m-0 flex list-none flex-wrap gap-2 p-0\",\n    time:\n      \"inline-flex min-h-11 min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full border border-border-default bg-surface-1 px-4 text-sm font-semibold tabular-nums text-fg no-underline \" +\n      \"transition-colors hover:border-accent/60 hover:bg-accent-soft focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent disabled:cursor-not-allowed disabled:opacity-50\",\n    note: \"text-[11px] font-medium text-fg-secondary group-aria-pressed:text-on-accent\",\n    empty: \"m-0 rounded-xl border border-dashed border-border-default px-4 py-6 text-center text-sm text-fg-secondary\",\n  },\n});\nconst s = slotPicker();\n\nexport type PickerSlot = {\n  /** A stable id (the slot's start as an ISO string). */\n  id: string;\n  /** The time in words, formatted by the app (`9 h 30`). */\n  label: string;\n  /** What to know about it (`2 places left`), shown beside the time and read with it. */\n  note?: string;\n  /** Not offered any more: shown, disabled. */\n  disabled?: boolean;\n  /** Makes the time a link to this address (the booking page with the slot chosen). */\n  href?: string;\n};\n\nexport type PickerDay = {\n  /** A stable id (`2026-10-19`). */\n  id: string;\n  /** The day's name, translated (`Today`, `Mon`). */\n  label: string;\n  /** Under it (`19 Oct`). */\n  sub?: string;\n  /** Its free times, in order. */\n  slots: readonly PickerSlot[];\n};\n\nexport type SlotPickerProps = Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> & {\n  /** The days that have free times, in order. */\n  days: readonly PickerDay[];\n  /** The name of the group (`Available times`), passed translated. */\n  label: string;\n  /** Said when no day has a free time. */\n  emptyLabel: string;\n  /** The chosen slot's id (controlled). */\n  value?: string | null;\n  /** Called with the chosen slot's id. */\n  onValueChange?: (id: string) => void;\n  /** The first day shown. Default: the first of `days`. */\n  defaultDay?: string;\n  /** The app's link component for the times that have an `href`. */\n  linkAs?: LinkComponent;\n};\n\n/** Tappable free times by day: the day strip, then the day's chips — links or toggles. */\nexport function SlotPicker({ days, label, emptyLabel, value, onValueChange, defaultDay, linkAs, className, ...props }: SlotPickerProps) {\n  const [dayId, setDayId] = React.useState(defaultDay ?? days[0]?.id);\n  const active = days.find((d) => d.id === dayId) ?? days[0];\n  if (!active) return <p className={s.empty({ className })}>{emptyLabel}</p>;\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.days()} role=\"group\" aria-label={label}>\n        {days.map((day) => (\n          <button key={day.id} type=\"button\" aria-pressed={day.id === active.id} onClick={() => setDayId(day.id)} className={s.day()}>\n            <span className={s.dayName()}>{day.label}</span>\n            {day.sub && <span className={s.daySub()}>{day.sub}</span>}\n          </button>\n        ))}\n      </div>\n      <ul className={s.times()} aria-label={`${active.label}${active.sub ? ` ${active.sub}` : \"\"}`}>\n        {active.slots.map((slot) => (\n          <li key={slot.id}>\n            {slot.href ? (\n              <BlockLink href={slot.href} linkAs={linkAs} className={s.time()}>\n                {slot.label}\n                {slot.note && <span className={s.note()}>{slot.note}</span>}\n              </BlockLink>\n            ) : (\n              <button type=\"button\" aria-pressed={value === slot.id} disabled={slot.disabled} onClick={() => onValueChange?.(slot.id)} className={s.time({ className: \"group\" })}>\n                {slot.label}\n                {slot.note && <span className={s.note()}>{slot.note}</span>}\n              </button>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAsEG,cAKZ,YALY;AAlEf,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KACE;AAAA,IAGF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MACE;AAAA,IAGF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AA4Cd,SAAS,WAAW,EAAE,MAAM,OAAO,YAAY,OAAO,eAAe,YAAY,QAAQ,WAAW,GAAG,MAAM,GAAoB;AACtI,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,cAAc,KAAK,CAAC,GAAG,EAAE;AAClE,QAAM,SAAS,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,KAAK,CAAC;AACzD,MAAI,CAAC,OAAQ,QAAO,oBAAC,OAAE,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,sBAAW;AACtE,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,wBAAC,SAAI,WAAW,EAAE,KAAK,GAAG,MAAK,SAAQ,cAAY,OAChD,eAAK,IAAI,CAAC,QACT,qBAAC,YAAoB,MAAK,UAAS,gBAAc,IAAI,OAAO,OAAO,IAAI,SAAS,MAAM,SAAS,IAAI,EAAE,GAAG,WAAW,EAAE,IAAI,GACvH;AAAA,0BAAC,UAAK,WAAW,EAAE,QAAQ,GAAI,cAAI,OAAM;AAAA,MACxC,IAAI,OAAO,oBAAC,UAAK,WAAW,EAAE,OAAO,GAAI,cAAI,KAAI;AAAA,SAFvC,IAAI,EAGjB,CACD,GACH;AAAA,IACA,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAG,cAAY,GAAG,OAAO,KAAK,GAAG,OAAO,MAAM,IAAI,OAAO,GAAG,KAAK,EAAE,IACvF,iBAAO,MAAM,IAAI,CAAC,SACjB,oBAAC,QACE,eAAK,OACJ,qBAAC,aAAU,MAAM,KAAK,MAAM,QAAgB,WAAW,EAAE,KAAK,GAC3D;AAAA,WAAK;AAAA,MACL,KAAK,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,OACtD,IAEA,qBAAC,YAAO,MAAK,UAAS,gBAAc,UAAU,KAAK,IAAI,UAAU,KAAK,UAAU,SAAS,MAAM,gBAAgB,KAAK,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,QAAQ,CAAC,GAC9J;AAAA,WAAK;AAAA,MACL,KAAK,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,OACtD,KAVK,KAAK,EAYd,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/slot-picker/slot-picker.tsx"],"sourcesContent":["// Client (the chosen day). The next free times of a service as tappable chips: a strip of days, then the day's times.\n// A time is a link (`href`: the booking page with the time chosen) or a toggle the reader presses (`value`,\n// `onValueChange`). The app computes the slots (its availability is the truth) and formats the labels.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\n\nexport const slotPicker = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-3\",\n    days: \"flex gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n    day:\n      \"flex min-h-12 min-w-[4.5rem] shrink-0 cursor-pointer flex-col items-center justify-center rounded-xl border border-border-default bg-surface-1 px-3 py-1.5 text-center leading-tight text-fg-secondary \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-pressed:border-accent aria-pressed:bg-accent-soft aria-pressed:text-fg\",\n    dayName: \"text-xs font-bold\",\n    daySub: \"text-[11px] tabular-nums text-fg-muted\",\n    times: \"m-0 flex list-none flex-wrap gap-2 p-0\",\n    time:\n      \"inline-flex min-h-11 min-w-[4.75rem] items-center justify-center gap-1.5 rounded-sm border border-border-default bg-surface-1 px-4 text-sm font-semibold tabular-nums text-fg no-underline \" +\n      \"transition-colors hover:border-accent/60 hover:bg-accent-soft focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent disabled:cursor-not-allowed disabled:opacity-50\",\n    note: \"text-[11px] font-medium text-fg-secondary group-aria-pressed:text-on-accent\",\n    empty: \"m-0 rounded-xl border border-dashed border-border-default px-4 py-6 text-center text-sm text-fg-secondary\",\n  },\n});\nconst s = slotPicker();\n\nexport type PickerSlot = {\n  /** A stable id (the slot's start as an ISO string). */\n  id: string;\n  /** The time in words, formatted by the app (`9 h 30`). */\n  label: string;\n  /** What to know about it (`2 places left`), shown beside the time and read with it. */\n  note?: string;\n  /** Not offered any more: shown, disabled. */\n  disabled?: boolean;\n  /** Makes the time a link to this address (the booking page with the slot chosen). */\n  href?: string;\n};\n\nexport type PickerDay = {\n  /** A stable id (`2026-10-19`). */\n  id: string;\n  /** The day's name, translated (`Today`, `Mon`). */\n  label: string;\n  /** Under it (`19 Oct`). */\n  sub?: string;\n  /** Its free times, in order. */\n  slots: readonly PickerSlot[];\n};\n\nexport type SlotPickerProps = Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> & {\n  /** The days that have free times, in order. */\n  days: readonly PickerDay[];\n  /** The name of the group (`Available times`), passed translated. */\n  label: string;\n  /** Said when no day has a free time. */\n  emptyLabel: string;\n  /** The chosen slot's id (controlled). */\n  value?: string | null;\n  /** Called with the chosen slot's id. */\n  onValueChange?: (id: string) => void;\n  /** The first day shown. Default: the first of `days`. */\n  defaultDay?: string;\n  /** The app's link component for the times that have an `href`. */\n  linkAs?: LinkComponent;\n};\n\n/** Tappable free times by day: the day strip, then the day's chips — links or toggles. */\nexport function SlotPicker({ days, label, emptyLabel, value, onValueChange, defaultDay, linkAs, className, ...props }: SlotPickerProps) {\n  const [dayId, setDayId] = React.useState(defaultDay ?? days[0]?.id);\n  const active = days.find((d) => d.id === dayId) ?? days[0];\n  if (!active) return <p className={s.empty({ className })}>{emptyLabel}</p>;\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.days()} role=\"group\" aria-label={label}>\n        {days.map((day) => (\n          <button key={day.id} type=\"button\" aria-pressed={day.id === active.id} onClick={() => setDayId(day.id)} className={s.day()}>\n            <span className={s.dayName()}>{day.label}</span>\n            {day.sub && <span className={s.daySub()}>{day.sub}</span>}\n          </button>\n        ))}\n      </div>\n      <ul className={s.times()} aria-label={`${active.label}${active.sub ? ` ${active.sub}` : \"\"}`}>\n        {active.slots.map((slot) => (\n          <li key={slot.id}>\n            {slot.href ? (\n              <BlockLink href={slot.href} linkAs={linkAs} className={s.time()}>\n                {slot.label}\n                {slot.note && <span className={s.note()}>{slot.note}</span>}\n              </BlockLink>\n            ) : (\n              <button type=\"button\" aria-pressed={value === slot.id} disabled={slot.disabled} onClick={() => onValueChange?.(slot.id)} className={s.time({ className: \"group\" })}>\n                {slot.label}\n                {slot.note && <span className={s.note()}>{slot.note}</span>}\n              </button>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAsEG,cAKZ,YALY;AAlEf,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KACE;AAAA,IAGF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MACE;AAAA,IAGF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AA4Cd,SAAS,WAAW,EAAE,MAAM,OAAO,YAAY,OAAO,eAAe,YAAY,QAAQ,WAAW,GAAG,MAAM,GAAoB;AACtI,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,cAAc,KAAK,CAAC,GAAG,EAAE;AAClE,QAAM,SAAS,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,KAAK,CAAC;AACzD,MAAI,CAAC,OAAQ,QAAO,oBAAC,OAAE,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,sBAAW;AACtE,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,wBAAC,SAAI,WAAW,EAAE,KAAK,GAAG,MAAK,SAAQ,cAAY,OAChD,eAAK,IAAI,CAAC,QACT,qBAAC,YAAoB,MAAK,UAAS,gBAAc,IAAI,OAAO,OAAO,IAAI,SAAS,MAAM,SAAS,IAAI,EAAE,GAAG,WAAW,EAAE,IAAI,GACvH;AAAA,0BAAC,UAAK,WAAW,EAAE,QAAQ,GAAI,cAAI,OAAM;AAAA,MACxC,IAAI,OAAO,oBAAC,UAAK,WAAW,EAAE,OAAO,GAAI,cAAI,KAAI;AAAA,SAFvC,IAAI,EAGjB,CACD,GACH;AAAA,IACA,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAG,cAAY,GAAG,OAAO,KAAK,GAAG,OAAO,MAAM,IAAI,OAAO,GAAG,KAAK,EAAE,IACvF,iBAAO,MAAM,IAAI,CAAC,SACjB,oBAAC,QACE,eAAK,OACJ,qBAAC,aAAU,MAAM,KAAK,MAAM,QAAgB,WAAW,EAAE,KAAK,GAC3D;AAAA,WAAK;AAAA,MACL,KAAK,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,OACtD,IAEA,qBAAC,YAAO,MAAK,UAAS,gBAAc,UAAU,KAAK,IAAI,UAAU,KAAK,UAAU,SAAS,MAAM,gBAAgB,KAAK,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,QAAQ,CAAC,GAC9J;AAAA,WAAK;AAAA,MACL,KAAK,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,OACtD,KAVK,KAAK,EAYd,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/step-progress.js

@@ -5,7 +5,7 @@ function StepProgress({ step, total, label, back, trailing, className }) {
   return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "flex min-w-10 justify-start", children: back }),
-      /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, className: "flex flex-1 gap-1", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: ["h-1 flex-1 rounded-full transition-colors motion-reduce:transition-none", i < step ? "bg-accent" : "bg-surface-3"].join(" ") }, i)) }),
+      /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, className: "flex flex-1 gap-1", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: ["h-1 flex-1 rounded-sm transition-colors motion-reduce:transition-none", i < step ? "bg-accent" : "bg-surface-3"].join(" ") }, i)) }),
       /* @__PURE__ */ jsx("div", { className: "flex min-w-10 justify-end", children: trailing })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "m-0 text-center text-xs text-fg-secondary", "aria-hidden": true, children: words })

package/dist/step-progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/step-progress/step-progress.tsx"],"sourcesContent":["// Server-safe. The head of a multi-step flow: back, segments that fill, the position in words — a `progressbar`.\nimport type * as React from \"react\";\n\nexport type StepProgressProps = {\n  /** The current step, from 1. */\n  step: number;\n  /** How many steps. */\n  total: number;\n  /** The position in words: `(n, total) => \"Step \" + n + \" of \" + total` — passed translated. */\n  label: (step: number, total: number) => string;\n  /** The back link or button (a `Button`), at the left. */\n  back?: React.ReactNode;\n  /** At the right: a Skip link. */\n  trailing?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The head of a sign-up or a profile to fill: back, segments that fill, the position in words. */\nexport function StepProgress({ step, total, label, back, trailing, className }: StepProgressProps) {\n  const words = label(step, total);\n  return (\n    <div className={[\"flex flex-col gap-1.5\", className].filter(Boolean).join(\" \")}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex min-w-10 justify-start\">{back}</div>\n        <div role=\"progressbar\" aria-label={words} aria-valuemin={1} aria-valuemax={total} aria-valuenow={step} aria-valuetext={words} className=\"flex flex-1 gap-1\">\n          {Array.from({ length: total }, (_, i) => (\n            <span key={i} className={[\"h-1 flex-1 rounded-full transition-colors motion-reduce:transition-none\", i < step ? \"bg-accent\" : \"bg-surface-3\"].join(\" \")} />\n          ))}\n        </div>\n        <div className=\"flex min-w-10 justify-end\">{trailing}</div>\n      </div>\n      <p className=\"m-0 text-center text-xs text-fg-secondary\" aria-hidden>\n        {words}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAuBM,SACE,KADF;AAJC,SAAS,aAAa,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,GAAsB;AACjG,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,SACE,qBAAC,SAAI,WAAW,CAAC,yBAAyB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC3E;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,+BAA+B,gBAAK;AAAA,MACnD,oBAAC,SAAI,MAAK,eAAc,cAAY,OAAO,iBAAe,GAAG,iBAAe,OAAO,iBAAe,MAAM,kBAAgB,OAAO,WAAU,qBACtI,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,UAAa,WAAW,CAAC,2EAA2E,IAAI,OAAO,cAAc,cAAc,EAAE,KAAK,GAAG,KAA3I,CAA8I,CAC1J,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,6BAA6B,oBAAS;AAAA,OACvD;AAAA,IACA,oBAAC,OAAE,WAAU,6CAA4C,eAAW,MACjE,iBACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/step-progress/step-progress.tsx"],"sourcesContent":["// Server-safe. The head of a multi-step flow: back, segments that fill, the position in words — a `progressbar`.\nimport type * as React from \"react\";\n\nexport type StepProgressProps = {\n  /** The current step, from 1. */\n  step: number;\n  /** How many steps. */\n  total: number;\n  /** The position in words: `(n, total) => \"Step \" + n + \" of \" + total` — passed translated. */\n  label: (step: number, total: number) => string;\n  /** The back link or button (a `Button`), at the left. */\n  back?: React.ReactNode;\n  /** At the right: a Skip link. */\n  trailing?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The head of a sign-up or a profile to fill: back, segments that fill, the position in words. */\nexport function StepProgress({ step, total, label, back, trailing, className }: StepProgressProps) {\n  const words = label(step, total);\n  return (\n    <div className={[\"flex flex-col gap-1.5\", className].filter(Boolean).join(\" \")}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex min-w-10 justify-start\">{back}</div>\n        <div role=\"progressbar\" aria-label={words} aria-valuemin={1} aria-valuemax={total} aria-valuenow={step} aria-valuetext={words} className=\"flex flex-1 gap-1\">\n          {Array.from({ length: total }, (_, i) => (\n            <span key={i} className={[\"h-1 flex-1 rounded-sm transition-colors motion-reduce:transition-none\", i < step ? \"bg-accent\" : \"bg-surface-3\"].join(\" \")} />\n          ))}\n        </div>\n        <div className=\"flex min-w-10 justify-end\">{trailing}</div>\n      </div>\n      <p className=\"m-0 text-center text-xs text-fg-secondary\" aria-hidden>\n        {words}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAuBM,SACE,KADF;AAJC,SAAS,aAAa,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,GAAsB;AACjG,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,SACE,qBAAC,SAAI,WAAW,CAAC,yBAAyB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC3E;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,+BAA+B,gBAAK;AAAA,MACnD,oBAAC,SAAI,MAAK,eAAc,cAAY,OAAO,iBAAe,GAAG,iBAAe,OAAO,iBAAe,MAAM,kBAAgB,OAAO,WAAU,qBACtI,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,UAAa,WAAW,CAAC,yEAAyE,IAAI,OAAO,cAAc,cAAc,EAAE,KAAK,GAAG,KAAzI,CAA4I,CACxJ,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,6BAA6B,oBAAS;AAAA,OACvD;AAAA,IACA,oBAAC,OAAE,WAAU,6CAA4C,eAAW,MACjE,iBACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/tabs.js

@@ -21,8 +21,8 @@ var tabs = tv({
     variant: {
       /* The section of a page: a line under the list, the active tab underlined in the accent. */
       underline: {
-        list: "gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)",
-        trigger: "relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent"
+        list: "gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-sm before:bg-accent data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)",
+        trigger: "relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg after:absolute after:rounded-sm after:bg-transparent data-[state=active]:after:bg-accent data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent"
       },
       /* A view switch: equal segments in a track, the active one filled. */
       segmented: {
@@ -31,8 +31,8 @@ var tabs = tv({
       },
       /* Pills that scroll sideways on a phone: a feed's sections. */
       pills: {
-        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
-        trigger: "h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
+        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-sm before:border before:border-accent before:bg-accent-soft",
+        trigger: "h-9 rounded-sm border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
       }
     }
   },

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-sm before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-sm after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-sm before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-sm border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}

package/dist/tag-input.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Combobox
-} from "./chunk-CKSHLSDH.js";
-import "./chunk-7UCPGXKN.js";
+} from "./chunk-AAP3U66V.js";
+import "./chunk-C3NF7V5Y.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-ZIXB33X7.js";
 import {

package/dist/tag-selector.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Chip
-} from "./chunk-7UCPGXKN.js";
+} from "./chunk-C3NF7V5Y.js";
 import "./chunk-D3T54RSL.js";
 
 // src/tag-selector/tag-selector.tsx

package/dist/toast.js

@@ -85,7 +85,7 @@ function progressToast(message, { id, value, doneMessage, description, style, ..
     icon: /* @__PURE__ */ jsx(LoaderGlyph, { value: ratio, className: "h-4 w-4 text-accent" }),
     description: /* @__PURE__ */ jsxs("span", { className: "mt-1 flex flex-col gap-1.5", children: [
       typeof description === "function" ? description() : description,
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block h-1 w-full overflow-hidden rounded-full bg-surface-3", children: /* @__PURE__ */ jsx("span", { className: "block h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block h-1 w-full overflow-hidden rounded-sm bg-surface-3", children: /* @__PURE__ */ jsx("span", { className: "block h-full rounded-sm bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }) }),
       /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
         Math.round(ratio * 100),
         " %"

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toast/toast.tsx"],"sourcesContent":["// Client. sonner does the queue, the stacking, the swipe, the timers, the live region and the hotkey; the look is\n// ours: sonner's own styling is off (`unstyled`) and every part reads a role. The status tones are soft (a tinted\n// border and a coloured icon, the text stays `text-fg`): the invariant status tokens are too light for small text.\nimport type * as React from \"react\";\nimport { type ExternalToast, toast, Toaster as Sonner, type ToasterProps as SonnerProps } from \"sonner\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type { ExternalToast } from \"sonner\";\nexport { toast } from \"sonner\";\n\nconst tone = (color: string) => cn(\"border-l-4\", color);\n\nexport const toastClassNames = {\n  // `kz-toast`: a hairline at the bottom counts the time left, and pauses with the toast (hover, focus) — motion.css.\n  toast:\n    \"kz-toast group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border border-border-default bg-surface-2 p-4 pr-10 \" +\n    \"text-sm text-fg shadow-lg\",\n  default: \"\",\n  title: \"font-semibold text-fg\",\n  description: \"mt-0.5 text-xs text-fg-secondary\",\n  content: \"flex min-w-0 flex-1 flex-col\",\n  icon: \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\",\n  success: tone(\"border-l-success [&_[data-icon]]:text-success\"),\n  warning: tone(\"border-l-warning [&_[data-icon]]:text-warning\"),\n  error: tone(\"border-l-danger [&_[data-icon]]:text-danger\"),\n  info: tone(\"border-l-info [&_[data-icon]]:text-info\"),\n  loading: \"\",\n  actionButton:\n    \"ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  cancelButton:\n    \"shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  closeButton:\n    \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5\",\n} satisfies NonNullable<NonNullable<SonnerProps[\"toastOptions\"]>[\"classNames\"]>;\n\nexport type ToasterProps = Omit<SonnerProps, \"richColors\" | \"theme\" | \"containerAriaLabel\" | \"toastOptions\"> & {\n  /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */\n  label: string;\n  /** The accessible name of each toast's close button — passed translated. */\n  closeLabel: string;\n  /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */\n  toastOptions?: Omit<NonNullable<SonnerProps[\"toastOptions\"]>, \"unstyled\" | \"closeButtonAriaLabel\">;\n};\n\n/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`, and the helpers below. */\nexport function Toaster({ label, closeLabel, position = \"bottom-right\", closeButton = true, toastOptions, duration = 4000, ...props }: ToasterProps) {\n  const extra = toastOptions?.classNames ?? {};\n  const classNames = Object.fromEntries(\n    Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key as keyof typeof extra])]),\n  ) as typeof toastClassNames;\n  return (\n    <Sonner\n      position={position}\n      closeButton={closeButton}\n      containerAriaLabel={label}\n      richColors={false}\n      duration={duration}\n      style={{ \"--kz-toast-duration\": Number.isFinite(duration) ? `${duration}ms` : \"none\" } as React.CSSProperties}\n      toastOptions={{ ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames }}\n      {...props}\n    />\n  );\n}\n\n/** The time-left hairline of one toast: its own duration (none when it stays). */\nconst timer = (duration: number | undefined, style?: React.CSSProperties) =>\n  ({ ...style, \"--kz-toast-duration\": duration === undefined ? undefined : Number.isFinite(duration) ? `${duration}ms` : \"none\" }) as React.CSSProperties;\n\nexport interface UndoToastOptions extends Omit<ExternalToast, \"action\" | \"cancel\"> {\n  /** The label of the undo button (“Undo”) — passed translated. */\n  undoLabel: string;\n  /** Called when the user undoes: restore what was done. */\n  onUndo: () => void;\n  /** Called when the toast goes without an undo: make it final (delete for good, send…). */\n  onCommit?: () => void;\n}\n\n/**\n * “Archived — Undo”: an action that waits before it becomes final. The hairline counts the time left to undo (6 s by\n * default, paused while hovered or focused); `onCommit` runs when it goes without an undo. Returns the toast's id.\n */\nexport function undoToast(message: React.ReactNode, { undoLabel, onUndo, onCommit, duration = 6000, style, onAutoClose, onDismiss, ...options }: UndoToastOptions) {\n  let undone = false;\n  const commit = () => {\n    if (!undone) onCommit?.();\n  };\n  return toast(message, {\n    ...options,\n    duration,\n    style: timer(duration, style),\n    action: {\n      label: undoLabel,\n      onClick: () => {\n        undone = true;\n        onUndo();\n      },\n    },\n    onAutoClose: (t) => {\n      commit();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      commit();\n      onDismiss?.(t);\n    },\n  });\n}\n\nexport interface ProgressToastOptions extends Omit<ExternalToast, \"id\" | \"icon\"> {\n  /** The toast to update: pass the id it returned the first time. */\n  id?: string | number;\n  /** Between 0 and 1. At 1 the toast turns to `doneMessage` (a success) and goes after the usual duration. */\n  value: number;\n  /** The message once done (“Uploaded”) — passed translated. */\n  doneMessage?: React.ReactNode;\n}\n\n/**\n * A long task in a toast (an upload in the background): call it again with the same `id` as it advances — the glyph's\n * trace and a bar grow, without a new toast each time; at 1 it becomes a success. Returns the toast's id.\n */\nexport function progressToast(message: React.ReactNode, { id, value, doneMessage, description, style, ...options }: ProgressToastOptions) {\n  const ratio = Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));\n  if (ratio >= 1) return toast.success(doneMessage ?? message, { ...options, id, description, style: timer(options.duration, style) });\n  return toast(message, {\n    ...options,\n    id,\n    duration: Number.POSITIVE_INFINITY,\n    style: timer(Number.POSITIVE_INFINITY, style),\n    icon: <LoaderGlyph value={ratio} className=\"h-4 w-4 text-accent\" />,\n    description: (\n      <span className=\"mt-1 flex flex-col gap-1.5\">\n        {typeof description === \"function\" ? description() : description}\n        <span aria-hidden className=\"block h-1 w-full overflow-hidden rounded-full bg-surface-3\">\n          <span className=\"block h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n        </span>\n        <span className=\"tabular-nums\">{Math.round(ratio * 100)} %</span>\n      </span>\n    ),\n  });\n}\n\nconst counts = new Map<string, number>();\n\nexport interface GroupedToastOptions extends Omit<ExternalToast, \"id\"> {\n  /** The repeat count in words (`(n) => \\`${n} new messages\\``) — passed translated; default “×n”. */\n  countLabel?: (count: number) => string;\n}\n\n/**\n * The same event again and again (new messages, failed retries) folds into one toast that counts — instead of a pile.\n * Toasts with the same `key` share one place; the count resets once it goes. Returns the toast's id.\n */\nexport function groupedToast(key: string, message: React.ReactNode, { countLabel = (n) => `×${n}`, onAutoClose, onDismiss, ...options }: GroupedToastOptions = {}) {\n  const count = (counts.get(key) ?? 0) + 1;\n  counts.set(key, count);\n  const reset = () => counts.delete(key);\n  return toast(message, {\n    ...options,\n    id: `group:${key}`,\n    description: count > 1 ? countLabel(count) : options.description,\n    onAutoClose: (t) => {\n      reset();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      reset();\n      onDismiss?.(t);\n    },\n  });\n}\n"],"mappings":"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","names":["toast"]}
+{"version":3,"sources":["../src/toast/toast.tsx"],"sourcesContent":["// Client. sonner does the queue, the stacking, the swipe, the timers, the live region and the hotkey; the look is\n// ours: sonner's own styling is off (`unstyled`) and every part reads a role. The status tones are soft (a tinted\n// border and a coloured icon, the text stays `text-fg`): the invariant status tokens are too light for small text.\nimport type * as React from \"react\";\nimport { type ExternalToast, toast, Toaster as Sonner, type ToasterProps as SonnerProps } from \"sonner\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type { ExternalToast } from \"sonner\";\nexport { toast } from \"sonner\";\n\nconst tone = (color: string) => cn(\"border-l-4\", color);\n\nexport const toastClassNames = {\n  // `kz-toast`: a hairline at the bottom counts the time left, and pauses with the toast (hover, focus) — motion.css.\n  toast:\n    \"kz-toast group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border border-border-default bg-surface-2 p-4 pr-10 \" +\n    \"text-sm text-fg shadow-lg\",\n  default: \"\",\n  title: \"font-semibold text-fg\",\n  description: \"mt-0.5 text-xs text-fg-secondary\",\n  content: \"flex min-w-0 flex-1 flex-col\",\n  icon: \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\",\n  success: tone(\"border-l-success [&_[data-icon]]:text-success\"),\n  warning: tone(\"border-l-warning [&_[data-icon]]:text-warning\"),\n  error: tone(\"border-l-danger [&_[data-icon]]:text-danger\"),\n  info: tone(\"border-l-info [&_[data-icon]]:text-info\"),\n  loading: \"\",\n  actionButton:\n    \"ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  cancelButton:\n    \"shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  closeButton:\n    \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5\",\n} satisfies NonNullable<NonNullable<SonnerProps[\"toastOptions\"]>[\"classNames\"]>;\n\nexport type ToasterProps = Omit<SonnerProps, \"richColors\" | \"theme\" | \"containerAriaLabel\" | \"toastOptions\"> & {\n  /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */\n  label: string;\n  /** The accessible name of each toast's close button — passed translated. */\n  closeLabel: string;\n  /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */\n  toastOptions?: Omit<NonNullable<SonnerProps[\"toastOptions\"]>, \"unstyled\" | \"closeButtonAriaLabel\">;\n};\n\n/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`, and the helpers below. */\nexport function Toaster({ label, closeLabel, position = \"bottom-right\", closeButton = true, toastOptions, duration = 4000, ...props }: ToasterProps) {\n  const extra = toastOptions?.classNames ?? {};\n  const classNames = Object.fromEntries(\n    Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key as keyof typeof extra])]),\n  ) as typeof toastClassNames;\n  return (\n    <Sonner\n      position={position}\n      closeButton={closeButton}\n      containerAriaLabel={label}\n      richColors={false}\n      duration={duration}\n      style={{ \"--kz-toast-duration\": Number.isFinite(duration) ? `${duration}ms` : \"none\" } as React.CSSProperties}\n      toastOptions={{ ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames }}\n      {...props}\n    />\n  );\n}\n\n/** The time-left hairline of one toast: its own duration (none when it stays). */\nconst timer = (duration: number | undefined, style?: React.CSSProperties) =>\n  ({ ...style, \"--kz-toast-duration\": duration === undefined ? undefined : Number.isFinite(duration) ? `${duration}ms` : \"none\" }) as React.CSSProperties;\n\nexport interface UndoToastOptions extends Omit<ExternalToast, \"action\" | \"cancel\"> {\n  /** The label of the undo button (“Undo”) — passed translated. */\n  undoLabel: string;\n  /** Called when the user undoes: restore what was done. */\n  onUndo: () => void;\n  /** Called when the toast goes without an undo: make it final (delete for good, send…). */\n  onCommit?: () => void;\n}\n\n/**\n * “Archived — Undo”: an action that waits before it becomes final. The hairline counts the time left to undo (6 s by\n * default, paused while hovered or focused); `onCommit` runs when it goes without an undo. Returns the toast's id.\n */\nexport function undoToast(message: React.ReactNode, { undoLabel, onUndo, onCommit, duration = 6000, style, onAutoClose, onDismiss, ...options }: UndoToastOptions) {\n  let undone = false;\n  const commit = () => {\n    if (!undone) onCommit?.();\n  };\n  return toast(message, {\n    ...options,\n    duration,\n    style: timer(duration, style),\n    action: {\n      label: undoLabel,\n      onClick: () => {\n        undone = true;\n        onUndo();\n      },\n    },\n    onAutoClose: (t) => {\n      commit();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      commit();\n      onDismiss?.(t);\n    },\n  });\n}\n\nexport interface ProgressToastOptions extends Omit<ExternalToast, \"id\" | \"icon\"> {\n  /** The toast to update: pass the id it returned the first time. */\n  id?: string | number;\n  /** Between 0 and 1. At 1 the toast turns to `doneMessage` (a success) and goes after the usual duration. */\n  value: number;\n  /** The message once done (“Uploaded”) — passed translated. */\n  doneMessage?: React.ReactNode;\n}\n\n/**\n * A long task in a toast (an upload in the background): call it again with the same `id` as it advances — the glyph's\n * trace and a bar grow, without a new toast each time; at 1 it becomes a success. Returns the toast's id.\n */\nexport function progressToast(message: React.ReactNode, { id, value, doneMessage, description, style, ...options }: ProgressToastOptions) {\n  const ratio = Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));\n  if (ratio >= 1) return toast.success(doneMessage ?? message, { ...options, id, description, style: timer(options.duration, style) });\n  return toast(message, {\n    ...options,\n    id,\n    duration: Number.POSITIVE_INFINITY,\n    style: timer(Number.POSITIVE_INFINITY, style),\n    icon: <LoaderGlyph value={ratio} className=\"h-4 w-4 text-accent\" />,\n    description: (\n      <span className=\"mt-1 flex flex-col gap-1.5\">\n        {typeof description === \"function\" ? description() : description}\n        <span aria-hidden className=\"block h-1 w-full overflow-hidden rounded-sm bg-surface-3\">\n          <span className=\"block h-full rounded-sm bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n        </span>\n        <span className=\"tabular-nums\">{Math.round(ratio * 100)} %</span>\n      </span>\n    ),\n  });\n}\n\nconst counts = new Map<string, number>();\n\nexport interface GroupedToastOptions extends Omit<ExternalToast, \"id\"> {\n  /** The repeat count in words (`(n) => \\`${n} new messages\\``) — passed translated; default “×n”. */\n  countLabel?: (count: number) => string;\n}\n\n/**\n * The same event again and again (new messages, failed retries) folds into one toast that counts — instead of a pile.\n * Toasts with the same `key` share one place; the count resets once it goes. Returns the toast's id.\n */\nexport function groupedToast(key: string, message: React.ReactNode, { countLabel = (n) => `×${n}`, onAutoClose, onDismiss, ...options }: GroupedToastOptions = {}) {\n  const count = (counts.get(key) ?? 0) + 1;\n  counts.set(key, count);\n  const reset = () => counts.delete(key);\n  return toast(message, {\n    ...options,\n    id: `group:${key}`,\n    description: count > 1 ? countLabel(count) : options.description,\n    onAutoClose: (t) => {\n      reset();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      reset();\n      onDismiss?.(t);\n    },\n  });\n}\n"],"mappings":"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","names":["toast"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.36.0",
+  "version": "3.37.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -741,7 +741,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.2.1",
-    "@krizaka/tailwind": ">=3.36.0",
+    "@krizaka/tailwind": ">=3.37.0",
     "@maplibre/maplibre-react-native": ">=11",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
@@ -801,8 +801,8 @@
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
     "zod": "^4.6.5",
-    "@krizaka/query": "0.2.1",
-    "@krizaka/config": "0.4.1"
+    "@krizaka/config": "0.4.1",
+    "@krizaka/query": "0.2.1"
   },
   "engines": {
     "node": ">=22"
@@ -2535,8 +2535,8 @@
     "sonner": "^2.0.8",
     "tailwind-variants": "^3.3.1",
     "@krizaka/intl": "^0.2.1",
-    "@krizaka/tokens": "^3.36.0",
-    "@krizaka/pacer": "^0.1.0"
+    "@krizaka/pacer": "^0.1.0",
+    "@krizaka/tokens": "^3.37.0"
   },
   "scripts": {
     "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",

package/registry/activity-feed.json

@@ -317,7 +317,7 @@
   "files": [
     {
       "path": "activity-feed/activity-feed.tsx",
-      "content": "// Client (the clock of “… ago”, the announcement of new events). What happened, newest first: an activity feed\n// grouped by day with folded runs and relative times, announced politely when it is live; and a `Timeline` — one\n// thing's history on a rail, oldest first. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { type ActivityEvent, type ActivityTone, groupActivity, timeAgo } from \"./group\";\n\nexport const activityFeed = tv({\n  slots: {\n    root: \"flex flex-col gap-5\",\n    group: \"flex flex-col gap-1\",\n    heading: \"sticky top-0 z-10 bg-surface-0 py-1 text-xs font-semibold text-fg-secondary\",\n    ol: \"m-0 flex list-none flex-col p-0\",\n    item: \"relative flex gap-3 py-2.5\",\n    marker: \"relative mt-1 flex h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-af-tone)] ring-4 ring-surface-0\",\n    rail: \"absolute left-[4.5px] top-5 -bottom-1 w-px bg-border-default\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    title: \"text-sm text-fg\",\n    count: \"ml-1.5 inline-flex rounded-full bg-surface-3 px-1.5 text-xs font-semibold tabular-nums text-fg-secondary\",\n    description: \"text-xs text-fg-secondary\",\n    time: \"shrink-0 pt-0.5 text-xs tabular-nums text-fg-secondary\",\n    leading: \"shrink-0\",\n  },\n});\n\nconst TONE: Record<ActivityTone, string> = {\n  neutral: \"var(--kz-border-strong)\",\n  accent: \"var(--kz-accent)\",\n  success: \"var(--kz-success)\",\n  warning: \"var(--kz-warning)\",\n  danger: \"var(--kz-danger)\",\n  info: \"var(--kz-info)\",\n};\n\nexport type ActivityFeedLabels = {\n  /** The heading of today's events. */\n  today: string;\n  /** The heading of yesterday's. */\n  yesterday: string;\n  /** A folded run: `(n) => \"×\" + n` (“3 times”). */\n  times: (count: number) => string;\n  /** Announced when new events arrive in a live feed: `(n) => n + \" new events\"`. */\n  newEvents: (count: number) => string;\n};\n\nexport const activityFeedLabels: ActivityFeedLabels = {\n  today: \"Today\",\n  yesterday: \"Yesterday\",\n  times: (count) => `×${count}`,\n  newEvents: (count) => (count === 1 ? \"1 new event\" : `${count} new events`),\n};\n\nexport type ActivityFeedProps<T extends ActivityEvent> = {\n  /** The events, in any order. */\n  events: readonly T[];\n  /** The feed's accessible name (“Activity”). */\n  \"aria-label\": string;\n  /** The locale of the dates and the “… ago”. Default `en-US`. */\n  locale?: string;\n  /** Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides). */\n  now?: Date;\n  /** Refresh the “… ago” every minute. Default true. */\n  ticking?: boolean;\n  /** Fold the runs of the same actor and kind. Default true. */\n  fold?: boolean;\n  /** Announce new events politely (a stream). */\n  live?: boolean;\n  /** Before an event's text: its actor's `Avatar`, an icon. */\n  leading?: (event: T) => React.ReactNode;\n  /** After an event's text: an action (Reply, View). */\n  action?: (event: T) => React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ActivityFeedLabels>;\n  /** Shown when there is no event (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nfunction useNow(initial: Date | undefined, ticking: boolean) {\n  const [now, setNow] = React.useState(() => initial ?? new Date());\n  React.useEffect(() => {\n    if (!ticking) return;\n    const timer = setInterval(() => setNow(new Date()), 60_000);\n    return () => clearInterval(timer);\n  }, [ticking]);\n  return now;\n}\n\n/**\n * What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events\n * announced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.\n */\nexport function ActivityFeed<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", now: given, ticking = true, fold = true, live, leading, action, labels: words, empty, className }: ActivityFeedProps<T>) {\n  const labels = { ...activityFeedLabels, ...words };\n  const s = activityFeed();\n  const now = useNow(given, ticking && !given);\n  const groups = groupActivity(events, { now, locale, today: labels.today, yesterday: labels.yesterday, fold });\n  const seen = React.useRef(events.length);\n  const [announcement, setAnnouncement] = React.useState(\"\");\n  React.useEffect(() => {\n    const added = events.length - seen.current;\n    seen.current = events.length;\n    if (!live || added <= 0) return;\n    const timer = setTimeout(() => setAnnouncement(labels.newEvents(added)), 0);\n    return () => clearTimeout(timer);\n  }, [events.length, live]); // eslint-disable-line react-hooks/exhaustive-deps -- announce on a new count only\n  return (\n    <section aria-label={label} className={s.root({ className })}>\n      {live ? (\n        <p className=\"sr-only\" aria-live=\"polite\">\n          {announcement}\n        </p>\n      ) : null}\n      {groups.length === 0 && empty ? empty : null}\n      {groups.map((group) => (\n        <div key={group.label} className={s.group()}>\n          <h3 className={s.heading()}>{group.label}</h3>\n          <ol className={s.ol()}>\n            {group.events.map(({ event, count }) => {\n              const date = new Date(event.at);\n              return (\n                <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n                  {leading ? <span className={s.leading()}>{leading(event)}</span> : <span aria-hidden className={s.marker()} />}\n                  <span className={s.body()}>\n                    <span className={s.title()}>\n                      {event.title}\n                      {count > 1 ? <span className={s.count()}>{labels.times(count)}</span> : null}\n                    </span>\n                    {event.description ? <span className={s.description()}>{event.description}</span> : null}\n                  </span>\n                  <time dateTime={date.toISOString()} title={date.toLocaleString(locale)} className={s.time()}>\n                    {timeAgo(date, { now, locale })}\n                  </time>\n                  {action ? <span className=\"shrink-0\">{action(event)}</span> : null}\n                </li>\n              );\n            })}\n          </ol>\n        </div>\n      ))}\n    </section>\n  );\n}\n\nexport type TimelineProps<T extends ActivityEvent> = {\n  /** One thing's events, oldest first (a job's run, a payout's life). */\n  events: readonly T[];\n  /** The timeline's accessible name (“History of the payout”). */\n  \"aria-label\": string;\n  /** The locale of the times. Default `en-US`. */\n  locale?: string;\n  /** How a time is written: `time` (14:02, default), `datetime`, `date`. */\n  timeStyle?: \"time\" | \"datetime\" | \"date\";\n  /** Classes merged on the list. */\n  className?: string;\n};\n\n/** One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words. */\nexport function Timeline<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", timeStyle = \"time\", className }: TimelineProps<T>) {\n  const s = activityFeed();\n  const options: Intl.DateTimeFormatOptions =\n    timeStyle === \"time\" ? { hour: \"2-digit\", minute: \"2-digit\" } : timeStyle === \"date\" ? { dateStyle: \"medium\" } : { dateStyle: \"medium\", timeStyle: \"short\" };\n  const write = new Intl.DateTimeFormat(locale, options);\n  return (\n    <ol aria-label={label} className={s.ol({ className })}>\n      {events.map((event, i) => {\n        const date = new Date(event.at);\n        return (\n          <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n            <span aria-hidden className={s.marker()} />\n            {i < events.length - 1 ? <span aria-hidden className={s.rail()} /> : null}\n            <span className={s.body()}>\n              <span className={s.title()}>{event.title}</span>\n              {event.description ? <span className={s.description()}>{event.description}</span> : null}\n            </span>\n            <time dateTime={date.toISOString()} className={s.time()}>\n              {write.format(date)}\n            </time>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"
+      "content": "// Client (the clock of “… ago”, the announcement of new events). What happened, newest first: an activity feed\n// grouped by day with folded runs and relative times, announced politely when it is live; and a `Timeline` — one\n// thing's history on a rail, oldest first. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { type ActivityEvent, type ActivityTone, groupActivity, timeAgo } from \"./group\";\n\nexport const activityFeed = tv({\n  slots: {\n    root: \"flex flex-col gap-5\",\n    group: \"flex flex-col gap-1\",\n    heading: \"sticky top-0 z-10 bg-surface-0 py-1 text-xs font-semibold text-fg-secondary\",\n    ol: \"m-0 flex list-none flex-col p-0\",\n    item: \"relative flex gap-3 py-2.5\",\n    marker: \"relative mt-1 flex h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-af-tone)] ring-4 ring-surface-0\",\n    rail: \"absolute left-[4.5px] top-5 -bottom-1 w-px bg-border-default\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    title: \"text-sm text-fg\",\n    count: \"ml-1.5 inline-flex rounded-sm bg-surface-3 px-1.5 text-xs font-semibold tabular-nums text-fg-secondary\",\n    description: \"text-xs text-fg-secondary\",\n    time: \"shrink-0 pt-0.5 text-xs tabular-nums text-fg-secondary\",\n    leading: \"shrink-0\",\n  },\n});\n\nconst TONE: Record<ActivityTone, string> = {\n  neutral: \"var(--kz-border-strong)\",\n  accent: \"var(--kz-accent)\",\n  success: \"var(--kz-success)\",\n  warning: \"var(--kz-warning)\",\n  danger: \"var(--kz-danger)\",\n  info: \"var(--kz-info)\",\n};\n\nexport type ActivityFeedLabels = {\n  /** The heading of today's events. */\n  today: string;\n  /** The heading of yesterday's. */\n  yesterday: string;\n  /** A folded run: `(n) => \"×\" + n` (“3 times”). */\n  times: (count: number) => string;\n  /** Announced when new events arrive in a live feed: `(n) => n + \" new events\"`. */\n  newEvents: (count: number) => string;\n};\n\nexport const activityFeedLabels: ActivityFeedLabels = {\n  today: \"Today\",\n  yesterday: \"Yesterday\",\n  times: (count) => `×${count}`,\n  newEvents: (count) => (count === 1 ? \"1 new event\" : `${count} new events`),\n};\n\nexport type ActivityFeedProps<T extends ActivityEvent> = {\n  /** The events, in any order. */\n  events: readonly T[];\n  /** The feed's accessible name (“Activity”). */\n  \"aria-label\": string;\n  /** The locale of the dates and the “… ago”. Default `en-US`. */\n  locale?: string;\n  /** Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides). */\n  now?: Date;\n  /** Refresh the “… ago” every minute. Default true. */\n  ticking?: boolean;\n  /** Fold the runs of the same actor and kind. Default true. */\n  fold?: boolean;\n  /** Announce new events politely (a stream). */\n  live?: boolean;\n  /** Before an event's text: its actor's `Avatar`, an icon. */\n  leading?: (event: T) => React.ReactNode;\n  /** After an event's text: an action (Reply, View). */\n  action?: (event: T) => React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ActivityFeedLabels>;\n  /** Shown when there is no event (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nfunction useNow(initial: Date | undefined, ticking: boolean) {\n  const [now, setNow] = React.useState(() => initial ?? new Date());\n  React.useEffect(() => {\n    if (!ticking) return;\n    const timer = setInterval(() => setNow(new Date()), 60_000);\n    return () => clearInterval(timer);\n  }, [ticking]);\n  return now;\n}\n\n/**\n * What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events\n * announced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.\n */\nexport function ActivityFeed<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", now: given, ticking = true, fold = true, live, leading, action, labels: words, empty, className }: ActivityFeedProps<T>) {\n  const labels = { ...activityFeedLabels, ...words };\n  const s = activityFeed();\n  const now = useNow(given, ticking && !given);\n  const groups = groupActivity(events, { now, locale, today: labels.today, yesterday: labels.yesterday, fold });\n  const seen = React.useRef(events.length);\n  const [announcement, setAnnouncement] = React.useState(\"\");\n  React.useEffect(() => {\n    const added = events.length - seen.current;\n    seen.current = events.length;\n    if (!live || added <= 0) return;\n    const timer = setTimeout(() => setAnnouncement(labels.newEvents(added)), 0);\n    return () => clearTimeout(timer);\n  }, [events.length, live]); // eslint-disable-line react-hooks/exhaustive-deps -- announce on a new count only\n  return (\n    <section aria-label={label} className={s.root({ className })}>\n      {live ? (\n        <p className=\"sr-only\" aria-live=\"polite\">\n          {announcement}\n        </p>\n      ) : null}\n      {groups.length === 0 && empty ? empty : null}\n      {groups.map((group) => (\n        <div key={group.label} className={s.group()}>\n          <h3 className={s.heading()}>{group.label}</h3>\n          <ol className={s.ol()}>\n            {group.events.map(({ event, count }) => {\n              const date = new Date(event.at);\n              return (\n                <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n                  {leading ? <span className={s.leading()}>{leading(event)}</span> : <span aria-hidden className={s.marker()} />}\n                  <span className={s.body()}>\n                    <span className={s.title()}>\n                      {event.title}\n                      {count > 1 ? <span className={s.count()}>{labels.times(count)}</span> : null}\n                    </span>\n                    {event.description ? <span className={s.description()}>{event.description}</span> : null}\n                  </span>\n                  <time dateTime={date.toISOString()} title={date.toLocaleString(locale)} className={s.time()}>\n                    {timeAgo(date, { now, locale })}\n                  </time>\n                  {action ? <span className=\"shrink-0\">{action(event)}</span> : null}\n                </li>\n              );\n            })}\n          </ol>\n        </div>\n      ))}\n    </section>\n  );\n}\n\nexport type TimelineProps<T extends ActivityEvent> = {\n  /** One thing's events, oldest first (a job's run, a payout's life). */\n  events: readonly T[];\n  /** The timeline's accessible name (“History of the payout”). */\n  \"aria-label\": string;\n  /** The locale of the times. Default `en-US`. */\n  locale?: string;\n  /** How a time is written: `time` (14:02, default), `datetime`, `date`. */\n  timeStyle?: \"time\" | \"datetime\" | \"date\";\n  /** Classes merged on the list. */\n  className?: string;\n};\n\n/** One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words. */\nexport function Timeline<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", timeStyle = \"time\", className }: TimelineProps<T>) {\n  const s = activityFeed();\n  const options: Intl.DateTimeFormatOptions =\n    timeStyle === \"time\" ? { hour: \"2-digit\", minute: \"2-digit\" } : timeStyle === \"date\" ? { dateStyle: \"medium\" } : { dateStyle: \"medium\", timeStyle: \"short\" };\n  const write = new Intl.DateTimeFormat(locale, options);\n  return (\n    <ol aria-label={label} className={s.ol({ className })}>\n      {events.map((event, i) => {\n        const date = new Date(event.at);\n        return (\n          <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n            <span aria-hidden className={s.marker()} />\n            {i < events.length - 1 ? <span aria-hidden className={s.rail()} /> : null}\n            <span className={s.body()}>\n              <span className={s.title()}>{event.title}</span>\n              {event.description ? <span className={s.description()}>{event.description}</span> : null}\n            </span>\n            <time dateTime={date.toISOString()} className={s.time()}>\n              {write.format(date)}\n            </time>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"
     },
     {
       "path": "activity-feed/group.ts",