@krizaka/ui 2.2.0 → 2.3.0

package/registry/glow-card.json

@@ -0,0 +1,162 @@
+{
+  "name": "glow-card",
+  "type": "primitive",
+  "title": "Glow card",
+  "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+  "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+  "status": "beta",
+  "category": "layout",
+  "platforms": "web",
+  "whenToUse": [
+    "Cards that invite a choice: plans, products, the entry points of a landing page.",
+    "One featured card among others (`alive`): its ring turns at rest."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For the cards of an app's lists and feeds: a calm card reads better there.",
+      "use": "card"
+    },
+    {
+      "when": "Around content the reader studies (a form, a table): light that moves distracts."
+    }
+  ],
+  "bestPractices": [
+    "One grid of glowing cards per page; `alive` on one card at most.",
+    "Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.",
+    "Colours come from the brand (`.brand-<id>`): never pass one."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Focusing the card (or a control inside it) lights its ring, as the pointer does."
+      }
+    ],
+    "notes": [
+      "Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.",
+      "Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.",
+      "Its loops pause off screen and while the page settles (MotionObserver)."
+    ]
+  },
+  "related": [
+    "card",
+    "button"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/glow-card",
+    "import": "import { GlowCard } from \"@krizaka/ui/glow-card\";",
+    "props": [
+      {
+        "component": "GlowCard",
+        "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+        "props": [
+          {
+            "name": "alive",
+            "type": "boolean",
+            "default": "false",
+            "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+            "required": false
+          },
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders your element (a link, an article) with the card's look and behaviour.",
+            "required": false
+          },
+          {
+            "name": "glow",
+            "type": "\"both\" | \"border\" | \"spotlight\"",
+            "default": "both",
+            "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "plans",
+        "title": "Plans",
+        "description": "Three plans: the light follows the pointer across them; the featured one's ring turns at rest.",
+        "path": "examples/glow-card/plans.tsx",
+        "module": "@krizaka/ui/registry/examples/glow-card/plans",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\n\nconst plans = [\n  { name: \"Community\", price: \"Free\", line: \"Self-hosted, every feature.\" },\n  { name: \"Team\", price: \"€19\", line: \"Shared workspaces and roles.\", featured: true },\n  { name: \"Sovereign\", price: \"Custom\", line: \"Your servers, our support.\" },\n];\n\n// Plans: move the pointer across them — the light follows, the ring brightens. The featured plan's ring turns at rest.\nexport default function GlowCardPlans() {\n  return (\n    <div className=\"grid w-full max-w-3xl gap-4 sm:grid-cols-3\">\n      {plans.map((p) => (\n        <GlowCard key={p.name} alive={p.featured} className=\"flex flex-col gap-3\">\n          <h3 className=\"font-display text-lg font-semibold text-fg\">{p.name}</h3>\n          <p className=\"font-display text-3xl font-bold text-fg\">{p.price}</p>\n          <p className=\"text-sm text-fg-secondary\">{p.line}</p>\n          <Button variant={p.featured ? \"gradient\" : \"outline\"} size=\"sm\" className=\"mt-auto\">\n            Choose {p.name}\n          </Button>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "link-card",
+        "title": "A card that is a link",
+        "description": "`asChild` on an `<a>`, `glow=\"border\"`: the focus lights the ring.",
+        "path": "examples/glow-card/link-card.tsx",
+        "module": "@krizaka/ui/registry/examples/glow-card/link-card",
+        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `asChild`: the card is the link. The focus lights the ring as the pointer does — keyboard readers get the same answer.\nexport default function GlowCardLink() {\n  return (\n    <GlowCard asChild glow=\"border\" className=\"block max-w-sm no-underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n      <a href=\"#docs\">\n        <span className=\"block font-display text-lg font-semibold text-fg\">Read the documentation</span>\n        <span className=\"mt-1 block text-sm text-fg-secondary\">Every component, its examples and its props — generated from the code.</span>\n      </a>\n    </GlowCard>\n  );\n}\n"
+      },
+      {
+        "name": "spotlight",
+        "title": "Spotlight only",
+        "description": "`glow=\"spotlight\"`: the bloom alone, for a dense grid.",
+        "path": "examples/glow-card/spotlight.tsx",
+        "module": "@krizaka/ui/registry/examples/glow-card/spotlight",
+        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `glow=\"spotlight\"`: only the bloom under the pointer, for a dense grid where rings would be too much.\nexport default function GlowCardSpotlight() {\n  return (\n    <div className=\"grid w-full max-w-lg grid-cols-2 gap-3\">\n      {[\"Tips\", \"Unlocks\", \"Auctions\", \"Challenges\"].map((name) => (\n        <GlowCard key={name} glow=\"spotlight\" className=\"p-4\">\n          <p className=\"font-semibold text-fg\">{name}</p>\n          <p className=\"text-xs text-fg-secondary\">90 % to the creator</p>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "glow-card/glow-card.tsx",
+      "content": "// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, onPointerMove, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      onPointerMove={(e: React.PointerEvent<HTMLDivElement>) => {\n        const box = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--kz-glow-x\", `${e.clientX - box.left}px`);\n        e.currentTarget.style.setProperty(\"--kz-glow-y\", `${e.clientY - box.top}px`);\n        onPointerMove?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n"
+    },
+    {
+      "path": "glow-card/index.ts",
+      "content": "/** @krizaka/ui/glow-card — `GlowCard`: a bloom of the brand light under the pointer, a turning gradient ring. Client. */\nexport { GlowCard, type GlowCardProps } from \"./glow-card\";\n"
+    },
+    {
+      "path": "glow-card/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Glow card\",\n  summary:\n    \"A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.\",\n  status: \"beta\",\n  category: \"layout\",\n  platforms: \"web\",\n  whenToUse: [\n    \"Cards that invite a choice: plans, products, the entry points of a landing page.\",\n    \"One featured card among others (`alive`): its ring turns at rest.\",\n  ],\n  whenNotToUse: [\n    { when: \"For the cards of an app's lists and feeds: a calm card reads better there.\", use: \"card\" },\n    { when: \"Around content the reader studies (a form, a table): light that moves distracts.\" },\n  ],\n  bestPractices: [\n    \"One grid of glowing cards per page; `alive` on one card at most.\",\n    \"Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.\",\n    \"Colours come from the brand (`.brand-<id>`): never pass one.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focusing the card (or a control inside it) lights its ring, as the pointer does.\" }],\n    notes: [\n      \"Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.\",\n      \"Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.\",\n      \"Its loops pause off screen and while the page settles (MotionObserver).\",\n    ],\n  },\n  related: [\"card\", \"button\"],\n  web: {\n    imports: [\"GlowCard\"],\n    examples: [\n      { name: \"plans\", title: \"Plans\", description: \"Three plans: the light follows the pointer across them; the featured one's ring turns at rest.\" },\n      { name: \"link-card\", title: \"A card that is a link\", description: \"`asChild` on an `<a>`, `glow=\\\"border\\\"`: the focus lights the ring.\" },\n      { name: \"spotlight\", title: \"Spotlight only\", description: \"`glow=\\\"spotlight\\\"`: the bloom alone, for a dense grid.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "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  | \"chip-link\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"glow-card\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\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  | \"stepper\"\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"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/glow-card/plans.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\n\nconst plans = [\n  { name: \"Community\", price: \"Free\", line: \"Self-hosted, every feature.\" },\n  { name: \"Team\", price: \"€19\", line: \"Shared workspaces and roles.\", featured: true },\n  { name: \"Sovereign\", price: \"Custom\", line: \"Your servers, our support.\" },\n];\n\n// Plans: move the pointer across them — the light follows, the ring brightens. The featured plan's ring turns at rest.\nexport default function GlowCardPlans() {\n  return (\n    <div className=\"grid w-full max-w-3xl gap-4 sm:grid-cols-3\">\n      {plans.map((p) => (\n        <GlowCard key={p.name} alive={p.featured} className=\"flex flex-col gap-3\">\n          <h3 className=\"font-display text-lg font-semibold text-fg\">{p.name}</h3>\n          <p className=\"font-display text-3xl font-bold text-fg\">{p.price}</p>\n          <p className=\"text-sm text-fg-secondary\">{p.line}</p>\n          <Button variant={p.featured ? \"gradient\" : \"outline\"} size=\"sm\" className=\"mt-auto\">\n            Choose {p.name}\n          </Button>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "GlowCard",
+      "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+      "props": [
+        {
+          "name": "alive",
+          "type": "boolean",
+          "default": "false",
+          "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+          "required": false
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders your element (a link, an article) with the card's look and behaviour.",
+          "required": false
+        },
+        {
+          "name": "glow",
+          "type": "\"both\" | \"border\" | \"spotlight\"",
+          "default": "both",
+          "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "items": [
     {
       "name": "alert",
@@ -61,20 +61,22 @@
       "name": "button",
       "type": "primitive",
       "title": "Button",
-      "summary": "The action: a button in six looks (primary, gradient, secondary, outline, ghost, danger), three sizes and two shapes.",
-      "description": "The action: a button in six looks (primary, gradient, secondary, outline, ghost, danger), three sizes and two shapes.",
+      "summary": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+      "description": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
       "status": "stable",
       "category": "actions",
       "platforms": "both",
       "examples": {
-        "web": 12,
+        "web": 16,
         "native": 11
       },
       "dependencies": [
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "spinner"
+      ]
     },
     {
       "name": "card",
@@ -135,6 +137,25 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "chip-link",
+      "type": "primitive",
+      "title": "Chip link",
+      "summary": "A chip that is a link — a filter that is an address — with the look of `Chip`, the current one marked, and `chipVariants` to style anything else; server-safe.",
+      "description": "A chip that is a link — a filter that is an address — with the look of `Chip`, the current one marked, and `chipVariants` to style anything else; server-safe.",
+      "status": "beta",
+      "category": "navigation",
+      "platforms": "web",
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "cn",
       "type": "primitive",
@@ -226,7 +247,7 @@
       "category": "overlays",
       "platforms": "web",
       "examples": {
-        "web": 6,
+        "web": 7,
         "native": 0
       },
       "dependencies": [
@@ -296,6 +317,42 @@
         "cn"
       ]
     },
+    {
+      "name": "glow-card",
+      "type": "primitive",
+      "title": "Glow card",
+      "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+      "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+      "status": "beta",
+      "category": "layout",
+      "platforms": "web",
+      "examples": {
+        "web": 3,
+        "native": 0
+      },
+      "dependencies": [
+        "radix-ui@^1.7.0"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "iso",
+      "type": "primitive",
+      "title": "Iso",
+      "summary": "The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (`IsoHub`) or composed from primitives.",
+      "description": "The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (`IsoHub`) or composed from primitives.",
+      "status": "beta",
+      "category": "layout",
+      "platforms": "web",
+      "examples": {
+        "web": 4,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "kbd",
       "type": "primitive",
@@ -314,6 +371,44 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "loader",
+      "type": "primitive",
+      "title": "Loader",
+      "summary": "A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and `LoadingRegion`, which hands a region over to a skeleton of its shape.",
+      "description": "A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and `LoadingRegion`, which hands a region over to a skeleton of its shape.",
+      "status": "beta",
+      "category": "feedback",
+      "platforms": "web",
+      "examples": {
+        "web": 6,
+        "native": 0
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "spinner"
+      ]
+    },
+    {
+      "name": "marquee",
+      "type": "primitive",
+      "title": "Marquee",
+      "summary": "A band of items that slides forever — at a speed in pixels per second, paused by the pointer, the focus or its own pause button, read once by assistive technology, and a still row you scroll under reduced motion.",
+      "description": "A band of items that slides forever — at a speed in pixels per second, paused by the pointer, the focus or its own pause button, read once by assistive technology, and a still row you scroll under reduced motion.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "web",
+      "examples": {
+        "web": 2,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
     {
       "name": "mascots",
       "type": "primitive",
@@ -330,6 +425,61 @@
       "dependencies": [],
       "registryDependencies": []
     },
+    {
+      "name": "meter",
+      "type": "primitive",
+      "title": "Meter",
+      "summary": "A measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.",
+      "description": "A measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "web",
+      "examples": {
+        "web": 3,
+        "native": 0
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "nav-bar",
+      "type": "primitive",
+      "title": "Nav bar",
+      "summary": "The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.",
+      "description": "The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.",
+      "status": "beta",
+      "category": "navigation",
+      "platforms": "web",
+      "examples": {
+        "web": 3,
+        "native": 0
+      },
+      "dependencies": [
+        "radix-ui@^1.7.0",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
+    {
+      "name": "number-ticker",
+      "type": "primitive",
+      "title": "Number ticker",
+      "summary": "A figure that climbs into view once, or rolls digit by digit to each new value — server-rendered at its final value, its width held from the first paint, read once by assistive technology.",
+      "description": "A figure that climbs into view once, or rolls digit by digit to each new value — server-rendered at its final value, its width held from the first paint, read once by assistive technology.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "web",
+      "examples": {
+        "web": 3,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "page-header",
       "type": "primitive",
@@ -372,13 +522,13 @@
       "name": "progress",
       "type": "primitive",
       "title": "Progress",
-      "summary": "How far a task or a goal has come: a bar or a ring, determinate or indeterminate.",
-      "description": "How far a task or a goal has come: a bar or a ring, determinate or indeterminate.",
+      "summary": "How far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.",
+      "description": "How far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.",
       "status": "beta",
       "category": "feedback",
       "platforms": "both",
       "examples": {
-        "web": 5,
+        "web": 9,
         "native": 3
       },
       "dependencies": [
@@ -462,13 +612,13 @@
       "name": "skeleton",
       "type": "primitive",
       "title": "Skeleton",
-      "summary": "A placeholder the shape of what is loading: a line, a circle or a block.",
-      "description": "A placeholder the shape of what is loading: a line, a circle or a block.",
+      "summary": "A placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (`SkeletonShape`) — crossed by one reflection of the brand light.",
+      "description": "A placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (`SkeletonShape`) — crossed by one reflection of the brand light.",
       "status": "stable",
       "category": "feedback",
       "platforms": "both",
       "examples": {
-        "web": 4,
+        "web": 6,
         "native": 1
       },
       "dependencies": [
@@ -517,8 +667,8 @@
       "name": "spinner",
       "type": "primitive",
       "title": "Spinner",
-      "summary": "An indeterminate wait: a turning ring named by `label`.",
-      "description": "An indeterminate wait: a turning ring named by `label`.",
+      "summary": "The Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a `value`; still and legible under reduced motion.",
+      "description": "The Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a `value`; still and legible under reduced motion.",
       "status": "stable",
       "category": "feedback",
       "platforms": "both",
@@ -549,6 +699,26 @@
       ],
       "registryDependencies": []
     },
+    {
+      "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",
+      "examples": {
+        "web": 3,
+        "native": 0
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "spinner"
+      ]
+    },
     {
       "name": "switch",
       "type": "primitive",
@@ -572,8 +742,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",
@@ -609,20 +779,21 @@
       "name": "toast",
       "type": "primitive",
       "title": "Toast",
-      "summary": "A short message that comes and goes: `toast()` from anywhere, one `Toaster` per app.",
-      "description": "A short message that comes and goes: `toast()` from anywhere, one `Toaster` per app.",
+      "summary": "A short message that comes and goes — with the time it has left drawn and paused under the pointer, an undo that waits before an action is final, a long task updated in place, and repeats folded into one toast that counts.",
+      "description": "A short message that comes and goes — with the time it has left drawn and paused under the pointer, an undo that waits before an action is final, a long task updated in place, and repeats folded into one toast that counts.",
       "status": "stable",
       "category": "feedback",
       "platforms": "both",
       "examples": {
-        "web": 2,
+        "web": 5,
         "native": 2
       },
       "dependencies": [
         "sonner@^2.0.8"
       ],
       "registryDependencies": [
-        "cn"
+        "cn",
+        "spinner"
       ]
     },
     {