@krizaka/ui 2.2.0 → 2.4.0

package/registry/stepper.json

@@ -0,0 +1,174 @@
+{
+  "name": "stepper",
+  "type": "primitive",
+  "title": "Stepper",
+  "summary": "The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.",
+  "description": "The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.",
+  "status": "beta",
+  "category": "navigation",
+  "platforms": "web",
+  "whenToUse": [
+    "A job the user follows in steps: an upload that is checked, transcoded and published; a payout; an import.",
+    "A short journey with a known order: a checkout, an onboarding (`orientation=\"horizontal\"`).",
+    "A history of what happened, in order (a timeline of a request)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For one task with a known size and no steps.",
+      "use": "progress"
+    },
+    {
+      "when": "To switch between views the user can visit in any order.",
+      "use": "tabs"
+    }
+  ],
+  "bestPractices": [
+    "Name steps by what happens (“Transcoding”), with a line of detail (a size, a time).",
+    "Put what the user can do or watch into the current or failed step's `content`: a Progress with its ETA, a retry.",
+    "A failure says what went wrong and what to do next, in the step itself."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "An ordered list (name it with `aria-label`); the current step has `aria-current=\"step\"`.",
+      "Each step's state is read with its title (`labels`, translated): never colour alone.",
+      "Under `prefers-reduced-motion` the current glyph rests on a still frame and the connectors do not animate."
+    ]
+  },
+  "related": [
+    "progress",
+    "loader",
+    "tabs"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/stepper",
+    "import": "import { Stepper } from \"@krizaka/ui/stepper\";",
+    "props": [
+      {
+        "component": "Stepper",
+        "description": "An ordered list of steps: `aria-current=\"step\"` on the current one, each state said in words.",
+        "props": [
+          {
+            "name": "labels",
+            "type": "Readonly<Record<StepStatus, string>>",
+            "default": null,
+            "description": "What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated.",
+            "required": true
+          },
+          {
+            "name": "steps",
+            "type": "readonly Step[]",
+            "default": null,
+            "description": "The steps, in order.",
+            "required": true
+          },
+          {
+            "name": "current",
+            "type": "number",
+            "default": "0",
+            "description": "The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins).",
+            "required": false
+          },
+          {
+            "name": "orientation",
+            "type": "\"horizontal\" | \"vertical\"",
+            "default": "vertical",
+            "description": "vertical (a job, a timeline) · horizontal (a short journey, a checkout).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "job",
+        "title": "A job in steps",
+        "description": "Uploaded, checked, transcoding (traced, with its Progress and ETA), then published.",
+        "path": "examples/stepper/job.tsx",
+        "module": "@krizaka/ui/registry/examples/stepper/job",
+        "code": "import { Progress } from \"@krizaka/ui/progress\";\nimport { Stepper } from \"@krizaka/ui/stepper\";\n\nconst labels = { done: \"Done\", current: \"In progress\", upcoming: \"Upcoming\", error: \"Failed\" };\n\n// A video job in steps: done ones checked, the current one traced and growing to its value with its own progress and\n// time left, the next ones waiting. Every state is said in words for assistive technology.\nexport default function StepperJob() {\n  return (\n    <Stepper\n      aria-label=\"Publishing “Night walk”\"\n      labels={labels}\n      current={2}\n      className=\"w-full max-w-sm\"\n      steps={[\n        { title: \"Uploaded\", description: \"1.2 GB in 48 s\" },\n        { title: \"Checked\", description: \"Format, rights, safety\" },\n        {\n          title: \"Transcoding\",\n          description: \"4K, 1080p, 720p\",\n          value: 0.58,\n          content: <Progress label=\"Transcoding\" value={58} eta=\"About 2 min left\" showLabel size=\"sm\" />,\n        },\n        { title: \"Published\", description: \"Visible to your supporters\" },\n      ]}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "failed",
+        "title": "A failed step",
+        "description": "A cross, the danger colour, “Failed” in words — and the action that fixes it.",
+        "path": "examples/stepper/failed.tsx",
+        "module": "@krizaka/ui/registry/examples/stepper/failed",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Stepper } from \"@krizaka/ui/stepper\";\n\nconst labels = { done: \"Done\", current: \"In progress\", upcoming: \"Upcoming\", error: \"Failed\" };\n\n// A step that failed says so (a cross, the danger colour, “Failed” in words) and offers what to do next.\nexport default function StepperFailed() {\n  return (\n    <Stepper\n      aria-label=\"Payout\"\n      labels={labels}\n      current={1}\n      className=\"w-full max-w-sm\"\n      steps={[\n        { title: \"Requested\", description: \"€1,240.00\" },\n        { title: \"Bank transfer\", description: \"The bank refused the account number\", status: \"error\", content: <Button size=\"sm\" variant=\"outline\">Update the account</Button> },\n        { title: \"Received\" },\n      ]}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "checkout",
+        "title": "A short journey",
+        "description": "`orientation=\"horizontal\"`: the connectors fill as it advances.",
+        "path": "examples/stepper/checkout.tsx",
+        "module": "@krizaka/ui/registry/examples/stepper/checkout",
+        "code": "import { Stepper } from \"@krizaka/ui/stepper\";\n\nconst labels = { done: \"Done\", current: \"Current step\", upcoming: \"Upcoming\", error: \"Failed\" };\n\n// A short journey, horizontal: the connectors fill as it advances.\nexport default function StepperCheckout() {\n  return (\n    <Stepper\n      aria-label=\"Checkout\"\n      orientation=\"horizontal\"\n      labels={labels}\n      current={1}\n      className=\"w-full max-w-xl\"\n      steps={[{ title: \"Plan\" }, { title: \"Payment\" }, { title: \"Confirmation\" }]}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "stepper/index.ts",
+      "content": "/** @krizaka/ui/stepper — `Stepper`: the steps of a journey or a job, the current one traced, each state said in words. Server-safe. */\nexport { type Step, Stepper, stepper, type StepperProps, type StepStatus } from \"./stepper\";\n"
+    },
+    {
+      "path": "stepper/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Stepper\",\n  summary:\n    \"The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"web\",\n  whenToUse: [\n    \"A job the user follows in steps: an upload that is checked, transcoded and published; a payout; an import.\",\n    \"A short journey with a known order: a checkout, an onboarding (`orientation=\\\"horizontal\\\"`).\",\n    \"A history of what happened, in order (a timeline of a request).\",\n  ],\n  whenNotToUse: [\n    { when: \"For one task with a known size and no steps.\", use: \"progress\" },\n    { when: \"To switch between views the user can visit in any order.\", use: \"tabs\" },\n  ],\n  bestPractices: [\n    \"Name steps by what happens (“Transcoding”), with a line of detail (a size, a time).\",\n    \"Put what the user can do or watch into the current or failed step's `content`: a Progress with its ETA, a retry.\",\n    \"A failure says what went wrong and what to do next, in the step itself.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"An ordered list (name it with `aria-label`); the current step has `aria-current=\\\"step\\\"`.\",\n      \"Each step's state is read with its title (`labels`, translated): never colour alone.\",\n      \"Under `prefers-reduced-motion` the current glyph rests on a still frame and the connectors do not animate.\",\n    ],\n  },\n  related: [\"progress\", \"loader\", \"tabs\"],\n  web: {\n    imports: [\"Stepper\"],\n    examples: [\n      { name: \"job\", title: \"A job in steps\", description: \"Uploaded, checked, transcoding (traced, with its Progress and ETA), then published.\" },\n      { name: \"failed\", title: \"A failed step\", description: \"A cross, the danger colour, “Failed” in words — and the action that fixes it.\" },\n      { name: \"checkout\", title: \"A short journey\", description: \"`orientation=\\\"horizontal\\\"`: the connectors fill as it advances.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "stepper/stepper.tsx",
+      "content": "// Server-safe. The steps of a journey or a job: an ordered list whose nodes are the Krizaka loader glyph — the current\n// step traces its hexagon (and grows to its `value` when known), a done step draws its check, a failed one its cross —\n// joined by connectors that fill as the journey advances. The state of every step is said in words, not only colour.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type StepStatus = \"done\" | \"current\" | \"upcoming\" | \"error\";\n\nexport interface Step {\n  /** Its name — passed translated. */\n  title: string;\n  /** One line under it (what happens, a time) — passed translated. */\n  description?: string;\n  /** Where it stands; by default from `current` (before: done, at: current, after: upcoming). */\n  status?: StepStatus;\n  /** Between 0 and 1 for the current step: its glyph grows to it. */\n  value?: number;\n  /** Anything under the step while it is current or failed: a progress bar, an action, a detail. */\n  content?: React.ReactNode;\n}\n\nexport const stepper = tv({\n  slots: {\n    root: \"flex\",\n    step: \"group/step relative flex min-w-0\",\n    node: \"relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-0\",\n    glyph: \"h-6 w-6\",\n    connector: \"absolute bg-border-default after:absolute after:inset-0 after:origin-top-left after:bg-accent after:transition-transform after:duration-700 motion-reduce:after:transition-none\",\n    body: \"min-w-0\",\n    title: \"text-sm font-semibold text-fg group-data-[status=upcoming]/step:text-fg-secondary\",\n    description: \"mt-0.5 text-xs text-fg-secondary\",\n    state: \"sr-only\",\n    content: \"mt-2\",\n  },\n  variants: {\n    orientation: {\n      vertical: {\n        root: \"flex-col\",\n        step: \"gap-3 pb-6 last:pb-0\",\n        connector: \"left-3.5 top-7 bottom-0 w-0.5 -translate-x-1/2 group-last/step:hidden after:scale-y-0 group-data-[status=done]/step:after:scale-y-100\",\n        body: \"pt-1\",\n      },\n      horizontal: {\n        root: \"flex-row\",\n        step: \"flex-1 flex-col gap-2 pr-3 last:flex-none last:pr-0\",\n        connector: \"left-8 right-1 top-3.5 h-0.5 -translate-y-1/2 group-last/step:hidden after:scale-x-0 group-data-[status=done]/step:after:scale-x-100\",\n        body: \"\",\n      },\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nconst GLYPH: Record<StepStatus, \"loading\" | \"success\" | \"error\" | null> = { done: \"success\", current: \"loading\", error: \"error\", upcoming: null };\nconst TONE: Record<StepStatus, string> = { done: \"text-accent\", current: \"text-accent\", error: \"text-fg-danger\", upcoming: \"text-border-strong\" };\n\nexport type StepperProps = Omit<React.ComponentProps<\"ol\">, \"children\"> & {\n  /** The steps, in order. */\n  steps: readonly Step[];\n  /** The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins). */\n  current?: number;\n  /** What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated. */\n  labels: Readonly<Record<StepStatus, string>>;\n  /**\n   * vertical (a job, a timeline) · horizontal (a short journey, a checkout).\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n};\n\n/** An ordered list of steps: `aria-current=\"step\"` on the current one, each state said in words. */\nexport function Stepper({ steps, current = 0, labels, orientation = \"vertical\", className, ...props }: StepperProps) {\n  const s = stepper({ orientation });\n  return (\n    <ol className={s.root({ className })} data-orientation={orientation} {...props}>\n      {steps.map((step, i) => {\n        const status: StepStatus = step.status ?? (i < current ? \"done\" : i === current ? \"current\" : \"upcoming\");\n        const glyph = GLYPH[status];\n        return (\n          <li key={i} data-status={status} aria-current={status === \"current\" ? \"step\" : undefined} className={s.step()}>\n            <span aria-hidden className={s.connector()} />\n            <span aria-hidden className={s.node()}>\n              {glyph ? (\n                <LoaderGlyph state={glyph} value={status === \"current\" ? step.value : undefined} className={[s.glyph(), TONE[status]].join(\" \")} />\n              ) : (\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" className={[s.glyph(), TONE[status]].join(\" \")}>\n                  <path d=\"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n                </svg>\n              )}\n            </span>\n            <div className={s.body()}>\n              <p className={s.title()}>\n                {step.title}\n                <span className={s.state()}> — {labels[status]}</span>\n              </p>\n              {step.description && <p className={s.description()}>{step.description}</p>}\n              {step.content && (status === \"current\" || status === \"error\") && <div className={s.content()}>{step.content}</div>}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "spinner"
+  ],
+  "demo": {
+    "path": "examples/stepper/job.tsx",
+    "content": "import { Progress } from \"@krizaka/ui/progress\";\nimport { Stepper } from \"@krizaka/ui/stepper\";\n\nconst labels = { done: \"Done\", current: \"In progress\", upcoming: \"Upcoming\", error: \"Failed\" };\n\n// A video job in steps: done ones checked, the current one traced and growing to its value with its own progress and\n// time left, the next ones waiting. Every state is said in words for assistive technology.\nexport default function StepperJob() {\n  return (\n    <Stepper\n      aria-label=\"Publishing “Night walk”\"\n      labels={labels}\n      current={2}\n      className=\"w-full max-w-sm\"\n      steps={[\n        { title: \"Uploaded\", description: \"1.2 GB in 48 s\" },\n        { title: \"Checked\", description: \"Format, rights, safety\" },\n        {\n          title: \"Transcoding\",\n          description: \"4K, 1080p, 720p\",\n          value: 0.58,\n          content: <Progress label=\"Transcoding\" value={58} eta=\"About 2 min left\" showLabel size=\"sm\" />,\n        },\n        { title: \"Published\", description: \"Visible to your supporters\" },\n      ]}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Stepper",
+      "description": "An ordered list of steps: `aria-current=\"step\"` on the current one, each state said in words.",
+      "props": [
+        {
+          "name": "labels",
+          "type": "Readonly<Record<StepStatus, string>>",
+          "default": null,
+          "description": "What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated.",
+          "required": true
+        },
+        {
+          "name": "steps",
+          "type": "readonly Step[]",
+          "default": null,
+          "description": "The steps, in order.",
+          "required": true
+        },
+        {
+          "name": "current",
+          "type": "number",
+          "default": "0",
+          "description": "The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins).",
+          "required": false
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "default": "vertical",
+          "description": "vertical (a job, a timeline) · horizontal (a short journey, a checkout).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/switch.json

@@ -124,7 +124,7 @@
   "files": [
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"kbd\"\n  | \"mascots\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     },
     {
       "path": "switch/index.ts",

package/registry/tabs.json

@@ -2,8 +2,8 @@
   "name": "tabs",
   "type": "primitive",
   "title": "Tabs",
-  "summary": "Views of the same page, one at a time: underlined sections, a segmented switch or pills.",
-  "description": "Views of the same page, one at a time: underlined sections, a segmented switch or pills.",
+  "summary": "Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.",
+  "description": "Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.",
   "status": "beta",
   "category": "navigation",
   "platforms": "web",
@@ -68,7 +68,7 @@
       },
       {
         "component": "TabsList",
-        "description": "The tabs. Name it (`aria-label`) when no heading says what it switches.",
+        "description": "The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab.",
         "props": []
       }
     ],
@@ -111,7 +111,11 @@
   "files": [
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"kbd\"\n  | \"mascots\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "sliding-indicator.ts",
+      "content": "// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, follow = false }: { item: string; active: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => place((e.target as Element).closest(item)),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => place((e.target as Element).closest(item)),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n"
     },
     {
       "path": "tabs/index.ts",
@@ -119,11 +123,11 @@
     },
     {
       "path": "tabs/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Tabs\",\n  summary: \"Views of the same page, one at a time: underlined sections, a segmented switch or pills.\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To split a page into sections the user switches between without leaving it: videos, stories, about.\",\n    \"`variant=\\\"segmented\\\"` for a view switch (grid, list); `pills` for a feed's sections.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a filter that narrows a list.\", use: \"chip\" },\n    { when: \"To go to other pages: use links in the navigation.\" },\n    { when: \"For a choice in a form.\", use: \"radio-group\" },\n  ],\n  bestPractices: [\n    \"Short labels of one or two words; the active one should be clear without colour.\",\n    \"Keep the URL in sync with the active tab when a tab is worth sharing.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Moves to the active tab, then into its panel.\" },\n      { keys: \"Arrow keys / Home / End\", action: \"Move between tabs and activate them.\" },\n    ],\n    notes: [\n      \"Radix Tabs: `tablist`, `tab` with `aria-selected` and `aria-controls`, `tabpanel`; name the list with `aria-label`.\",\n      \"A disabled tab is skipped.\",\n    ],\n  },\n  related: [\"chip\", \"segmented\", \"radio-group\"],\n  web: {\n    imports: [\"Tabs\"],\n    examples: [\n      { name: \"underline\", title: \"Underline\", description: \"The sections of a page; a disabled tab is skipped.\" },\n      { name: \"segmented\", title: \"Segmented\", description: \"A view switch: equal segments in a track.\" },\n      { name: \"pills\", title: \"Pills\", description: \"A feed's sections, scrolling sideways on a phone.\" },\n      { name: \"vertical\", title: \"Vertical\", description: \"`orientation=\\\"vertical\\\"`: the list on the side.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Tabs\",\n  summary: \"Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To split a page into sections the user switches between without leaving it: videos, stories, about.\",\n    \"`variant=\\\"segmented\\\"` for a view switch (grid, list); `pills` for a feed's sections.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a filter that narrows a list.\", use: \"chip\" },\n    { when: \"To go to other pages: use links in the navigation.\" },\n    { when: \"For a choice in a form.\", use: \"radio-group\" },\n  ],\n  bestPractices: [\n    \"Short labels of one or two words; the active one should be clear without colour.\",\n    \"Keep the URL in sync with the active tab when a tab is worth sharing.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Moves to the active tab, then into its panel.\" },\n      { keys: \"Arrow keys / Home / End\", action: \"Move between tabs and activate them.\" },\n    ],\n    notes: [\n      \"Radix Tabs: `tablist`, `tab` with `aria-selected` and `aria-controls`, `tabpanel`; name the list with `aria-label`.\",\n      \"A disabled tab is skipped.\",\n    ],\n  },\n  related: [\"chip\", \"segmented\", \"radio-group\"],\n  web: {\n    imports: [\"Tabs\"],\n    examples: [\n      { name: \"underline\", title: \"Underline\", description: \"The sections of a page; a disabled tab is skipped.\" },\n      { name: \"segmented\", title: \"Segmented\", description: \"A view switch: equal segments in a track.\" },\n      { name: \"pills\", title: \"Pills\", description: \"A feed's sections, scrolling sideways on a phone.\" },\n      { name: \"vertical\", title: \"Vertical\", description: \"`orientation=\\\"vertical\\\"`: the list on the side.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "tabs/tabs.tsx",
-      "content": "// 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\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    list: \"flex shrink-0 data-[orientation=vertical]:flex-col\",\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\",\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: \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r\",\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      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list: \"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        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      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list: \"gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1\",\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      },\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. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.List 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"
+      "content": "// 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\",\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 overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 \" +\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"
     }
   ],
   "dependencies": [
@@ -151,7 +155,7 @@
     },
     {
       "component": "TabsList",
-      "description": "The tabs. Name it (`aria-label`) when no heading says what it switches.",
+      "description": "The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab.",
       "props": []
     }
   ]