@krizaka/ui 3.2.0 → 3.4.0

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "items": [
     {
       "name": "achievement",
@@ -39,6 +39,40 @@
         "cn"
       ]
     },
+    {
+      "name": "action-sheet",
+      "type": "native",
+      "title": "Action sheet",
+      "summary": "A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.",
+      "description": "A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.",
+      "status": "beta",
+      "category": "overlays",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "activity-feed",
+      "type": "primitive",
+      "title": "Activity feed",
+      "summary": "What happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and `Timeline`, one thing's history on a rail.",
+      "description": "What happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and `Timeline`, one thing's history on a rail.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "both",
+      "examples": {
+        "web": 3,
+        "native": 1
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "alert",
       "type": "primitive",
@@ -146,7 +180,7 @@
       "platforms": "both",
       "examples": {
         "web": 4,
-        "native": 2
+        "native": 3
       },
       "dependencies": [
         "radix-ui@^1.7.0",
@@ -392,10 +426,10 @@
       "description": "A text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.",
       "status": "beta",
       "category": "forms",
-      "platforms": "web",
+      "platforms": "both",
       "examples": {
         "web": 4,
-        "native": 0
+        "native": 2
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -602,7 +636,7 @@
         "native": 7
       },
       "dependencies": [
-        "@krizaka/intl@^0.1.0",
+        "@krizaka/intl@^0.1.1",
         "tailwind-variants@^3.3.1"
       ],
       "registryDependencies": [
@@ -628,6 +662,24 @@
         "cn"
       ]
     },
+    {
+      "name": "description-list",
+      "type": "primitive",
+      "title": "Description list",
+      "summary": "Facts about one thing as term and value: stacked, inline like a receipt, or a grid of key figures (`KeyValueGrid`).",
+      "description": "Facts about one thing as term and value: stacked, inline like a receipt, or a grid of key figures (`KeyValueGrid`).",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "both",
+      "examples": {
+        "web": 3,
+        "native": 1
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "detail-layout",
       "type": "primitive",
@@ -654,10 +706,10 @@
       "description": "A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.",
       "status": "stable",
       "category": "overlays",
-      "platforms": "web",
+      "platforms": "both",
       "examples": {
         "web": 7,
-        "native": 0
+        "native": 1
       },
       "dependencies": [
         "radix-ui@^1.7.0",
@@ -783,6 +835,22 @@
         "cn"
       ]
     },
+    {
+      "name": "fab",
+      "type": "native",
+      "title": "Floating action button",
+      "summary": "The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.",
+      "description": "The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.",
+      "status": "beta",
+      "category": "actions",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "field",
       "type": "primitive",
@@ -794,7 +862,7 @@
       "platforms": "both",
       "examples": {
         "web": 5,
-        "native": 1
+        "native": 2
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -817,7 +885,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/intl@^0.1.0",
+        "@krizaka/intl@^0.1.1",
         "tailwind-variants@^3.3.1"
       ],
       "registryDependencies": [
@@ -860,7 +928,7 @@
         "native": 6
       },
       "dependencies": [
-        "@krizaka/intl@^0.1.0",
+        "@krizaka/intl@^0.1.1",
         "@tanstack/react-form@1.33.5"
       ],
       "registryDependencies": [
@@ -937,6 +1005,22 @@
         "cn"
       ]
     },
+    {
+      "name": "header",
+      "type": "native",
+      "title": "Header",
+      "summary": "A screen's header: the bar under the status bar, and a large title that folds into it as the content scrolls.",
+      "description": "A screen's header: the bar under the status bar, and a large title that folds into it as the content scrolls.",
+      "status": "beta",
+      "category": "navigation",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "how-it-works-page",
       "type": "primitive",
@@ -978,6 +1062,22 @@
         "slider"
       ]
     },
+    {
+      "name": "image-viewer",
+      "type": "native",
+      "title": "Image viewer",
+      "summary": "Images full screen on black: pinch and double tap to zoom, swipe between images, swipe down to close.",
+      "description": "Images full screen on black: pinch and double tap to zoom, swipe between images, swipe down to close.",
+      "status": "beta",
+      "category": "media",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "iso",
       "type": "primitive",
@@ -994,6 +1094,24 @@
       "dependencies": [],
       "registryDependencies": []
     },
+    {
+      "name": "kanban",
+      "type": "primitive",
+      "title": "Kanban",
+      "summary": "Cards in columns moved by drag and drop — and by the keyboard (Space, the arrows, Space) — every move announced, column limits in the counts.",
+      "description": "Cards in columns moved by drag and drop — and by the keyboard (Space, the arrows, Space) — every move announced, column limits in the counts.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "web",
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "kbd",
       "type": "primitive",
@@ -1090,19 +1208,23 @@
     },
     {
       "name": "list",
-      "type": "native",
+      "type": "primitive",
       "title": "List",
-      "summary": "A long list for React Native on FlashList v2 — separators, skeleton rows, empty and error states, pull to refresh, the next page loaded near the end through useInfiniteQuery of @krizaka/query.",
-      "description": "A long list for React Native on FlashList v2 — separators, skeleton rows, empty and error states, pull to refresh, the next page loaded near the end through useInfiniteQuery of @krizaka/query.",
+      "summary": "Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.",
+      "description": "Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.",
       "status": "beta",
       "category": "data-display",
-      "platforms": "native",
+      "platforms": "both",
       "examples": {
-        "web": 0,
+        "web": 3,
         "native": 3
       },
-      "dependencies": [],
-      "registryDependencies": []
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "checkbox"
+      ]
     },
     {
       "name": "loader",
@@ -1112,10 +1234,10 @@
       "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",
+      "platforms": "both",
       "examples": {
         "web": 6,
-        "native": 0
+        "native": 2
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -1144,6 +1266,28 @@
         "page-hero"
       ]
     },
+    {
+      "name": "map",
+      "type": "primitive",
+      "title": "Map",
+      "summary": "Maps that cost nothing per view — MapLibre (open source) over Protomaps tiles on the Krizaka CDN, painted from the tokens in dark or light and in the product's accent — with markers, clusters, the person's position, a radius and a location picker.",
+      "description": "Maps that cost nothing per view — MapLibre (open source) over Protomaps tiles on the Krizaka CDN, painted from the tokens in dark or light and in the product's accent — with markers, clusters, the person's position, a radius and a location picker.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "both",
+      "examples": {
+        "web": 4,
+        "native": 2
+      },
+      "dependencies": [
+        "@krizaka/tokens@^3.4.0",
+        "@protomaps/basemaps@5.7.2",
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": [
+        "cn"
+      ]
+    },
     {
       "name": "marketing-layout",
       "type": "primitive",
@@ -1253,6 +1397,22 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "media-picker",
+      "type": "native",
+      "title": "Media picker",
+      "summary": "Photos and videos picked from the library or the camera, as a grid of tiles with a remove button and a count.",
+      "description": "Photos and videos picked from the library or the camera, as a grid of tiles with a remove button and a count.",
+      "status": "beta",
+      "category": "media",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "meter",
       "type": "primitive",
@@ -1261,10 +1421,10 @@
       "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",
+      "platforms": "both",
       "examples": {
         "web": 3,
-        "native": 0
+        "native": 2
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -1300,10 +1460,42 @@
       "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",
+      "platforms": "both",
       "examples": {
         "web": 3,
-        "native": 0
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "onboarding",
+      "type": "native",
+      "title": "Onboarding",
+      "summary": "A first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are.",
+      "description": "A first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are.",
+      "status": "beta",
+      "category": "layout",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "otp-input",
+      "type": "native",
+      "title": "OTP input",
+      "summary": "A one-time code in boxes over one real input: the keyboard's suggestion of the code and pasting fill every box at once.",
+      "description": "A one-time code in boxes over one real input: the keyboard's suggestion of the code and pasting fill every box at once.",
+      "status": "beta",
+      "category": "forms",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 2
       },
       "dependencies": [],
       "registryDependencies": []
@@ -1383,6 +1575,22 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "permission-prompt",
+      "type": "native",
+      "title": "Permission prompt",
+      "summary": "Before the system's permission dialog, the app says why: a bird, what it is for, the button that asks — and the way to the settings once refused.",
+      "description": "Before the system's permission dialog, the app says why: a bird, what it is for, the button that asks — and the way to the settings once refused.",
+      "status": "beta",
+      "category": "feedback",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 2
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "pointer-light",
       "type": "primitive",
@@ -1520,24 +1728,42 @@
         "cn"
       ]
     },
+    {
+      "name": "pull-to-refresh",
+      "type": "native",
+      "title": "Pull to refresh",
+      "summary": "The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList.",
+      "description": "The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList.",
+      "status": "beta",
+      "category": "feedback",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "radio-group",
       "type": "primitive",
       "title": "Radio group",
-      "summary": "One choice among a few options, all visible: dots with their words, or whole cards.",
-      "description": "One choice among a few options, all visible: dots with their words, or whole cards.",
+      "summary": "One choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.",
+      "description": "One choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.",
       "status": "beta",
       "category": "forms",
-      "platforms": "web",
+      "platforms": "both",
       "examples": {
-        "web": 3,
-        "native": 0
+        "web": 5,
+        "native": 4
       },
       "dependencies": [
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "cn"
+      ]
     },
     {
       "name": "scroll-stage",
@@ -1568,7 +1794,7 @@
       "platforms": "both",
       "examples": {
         "web": 3,
-        "native": 1
+        "native": 2
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -1670,20 +1896,22 @@
       "name": "slider",
       "type": "primitive",
       "title": "Slider",
-      "summary": "A value or a range chosen by dragging a thumb along a track, with arrows and Page keys.",
-      "description": "A value or a range chosen by dragging a thumb along a track, with arrows and Page keys.",
+      "summary": "A value or a range chosen by dragging a thumb along a track — steps you can see, the value floating over the thumb, the brand’s gradient, horizontal or vertical — with arrows and Page keys.",
+      "description": "A value or a range chosen by dragging a thumb along a track — steps you can see, the value floating over the thumb, the brand’s gradient, horizontal or vertical — with arrows and Page keys.",
       "status": "beta",
       "category": "forms",
-      "platforms": "web",
+      "platforms": "both",
       "examples": {
-        "web": 5,
-        "native": 0
+        "web": 9,
+        "native": 4
       },
       "dependencies": [
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "cn"
+      ]
     },
     {
       "name": "slot",
@@ -1767,7 +1995,7 @@
       "category": "data-display",
       "platforms": "web",
       "examples": {
-        "web": 5,
+        "web": 6,
         "native": 0
       },
       "dependencies": [
@@ -1802,10 +2030,10 @@
       "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",
+      "platforms": "both",
       "examples": {
         "web": 3,
-        "native": 0
+        "native": 1
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -1814,6 +2042,22 @@
         "spinner"
       ]
     },
+    {
+      "name": "swipeable-row",
+      "type": "native",
+      "title": "Swipeable row",
+      "summary": "A row whose actions show under a swipe: left for the trailing ones, right for the leading ones, a full swipe runs the outermost.",
+      "description": "A row whose actions show under a swipe: left for the trailing ones, right for the leading ones, a full swipe runs the outermost.",
+      "status": "beta",
+      "category": "data-display",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "switch",
       "type": "primitive",
@@ -1822,10 +2066,10 @@
       "description": "An on/off setting that applies at once.",
       "status": "beta",
       "category": "forms",
-      "platforms": "web",
+      "platforms": "both",
       "examples": {
         "web": 5,
-        "native": 0
+        "native": 2
       },
       "dependencies": [
         "radix-ui@^1.7.0",
@@ -1833,6 +2077,22 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "tab-bar",
+      "type": "native",
+      "title": "Tab bar",
+      "summary": "The app's main sections at the bottom of the screen: an icon and a word each, a badge for what is new, clear of the home indicator.",
+      "description": "The app's main sections at the bottom of the screen: an icon and a word each, a badge for what is new, clear of the home indicator.",
+      "status": "beta",
+      "category": "navigation",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "tabs",
       "type": "primitive",
@@ -1841,10 +2101,10 @@
       "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",
+      "platforms": "both",
       "examples": {
         "web": 4,
-        "native": 0
+        "native": 2
       },
       "dependencies": [
         "radix-ui@^1.7.0",
@@ -1917,7 +2177,7 @@
       "platforms": "both",
       "examples": {
         "web": 5,
-        "native": 2
+        "native": 3
       },
       "dependencies": [
         "sonner@^2.0.8"
@@ -1965,6 +2225,24 @@
         "cn"
       ]
     },
+    {
+      "name": "tree-view",
+      "type": "primitive",
+      "title": "Tree view",
+      "summary": "A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.",
+      "description": "A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.",
+      "status": "beta",
+      "category": "navigation",
+      "platforms": "web",
+      "examples": {
+        "web": 2,
+        "native": 0
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "txt",
       "type": "native",

package/registry/iso.json

@@ -727,7 +727,7 @@
     },
     {
       "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  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"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   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\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"
+      "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  | \"achievement\"\n  | \"action-bar\"\n  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"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   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\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"
     }
   ],
   "dependencies": [],