@krizaka/ui 3.14.0 → 3.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/avatar/defaults.d.ts +43 -0
- package/dist/avatar/defaults.js +76 -0
- package/dist/avatar/defaults.js.map +1 -0
- package/dist/avatar.d.ts +1 -1
- package/dist/avatar.js +4 -2
- package/dist/avatar.js.map +1 -1
- package/dist/chat.js +1 -1
- package/dist/{chunk-UB2BI3AW.js → chunk-BCVLLY3R.js} +47 -3
- package/dist/chunk-BCVLLY3R.js.map +1 -0
- package/dist/{chunk-GR5JNFGQ.js → chunk-LIPK4UCS.js} +300 -164
- package/dist/chunk-LIPK4UCS.js.map +1 -0
- package/dist/{chunk-COJ3IDE2.js → chunk-SKMJRM5K.js} +11 -4
- package/dist/chunk-SKMJRM5K.js.map +1 -0
- package/dist/{chunk-2JFARUKC.js → chunk-YIBKJ36L.js} +1 -1
- package/dist/chunk-YIBKJ36L.js.map +1 -0
- package/dist/{geometry-B2E8oFhg.d.ts → geometry-DX-W-Yyf.d.ts} +5 -2
- package/dist/index.d.ts +18 -2
- package/dist/index.js +5 -1
- package/dist/map.js +60 -0
- package/dist/map.js.map +1 -1
- package/dist/mascot-quote.d.ts +5 -2
- package/dist/mascot-quote.js +45 -1
- package/dist/mascot-quote.js.map +1 -1
- package/dist/mascot-state.d.ts +2 -2
- package/dist/mascot-state.js +1 -1
- package/dist/mascot-state.js.map +1 -1
- package/dist/mascots.d.ts +4 -4
- package/dist/mascots.js +1 -1
- package/dist/match-dialog.js +1 -1
- package/dist/native/map.js +60 -0
- package/dist/native/map.js.map +1 -1
- package/dist/native.d.ts +35 -18
- package/dist/native.js +1114 -912
- package/dist/native.js.map +1 -1
- package/dist/nav-bar.d.ts +1 -1
- package/dist/nav-bar.js +3 -2
- package/dist/nav-bar.js.map +1 -1
- package/dist/site-footer.d.ts +1 -1
- package/dist/site-footer.js +2 -2
- package/dist/{sites-ClGou6ou.d.ts → sites-CHp_vELn.d.ts} +4 -3
- package/dist/sites.d.ts +5 -4
- package/dist/sites.js +9 -2
- package/dist/sites.js.map +1 -1
- package/dist/vertical-video.js +1 -1
- package/package.json +15 -9
- package/registry/avatar.json +6 -2
- package/registry/examples/mascots/beaver.d.ts +4 -0
- package/registry/examples/mascots/beaver.js +19 -0
- package/registry/examples/mascots/beaver.tsx +18 -0
- package/registry/examples/mascots/flock.tsx +1 -1
- package/registry/examples/mascots/magpie.d.ts +4 -0
- package/registry/examples/mascots/magpie.js +19 -0
- package/registry/examples/mascots/magpie.tsx +18 -0
- package/registry/index.json +7 -7
- package/registry/map.json +1 -1
- package/registry/mascot-quote.json +5 -5
- package/registry/mascot-state.json +33 -33
- package/registry/mascots.json +36 -20
- package/registry/nav-bar.json +19 -3
- package/registry/permission-prompt.json +1 -1
- package/registry/product-page.json +2 -2
- package/registry/site-footer.json +18 -2
- package/registry/sites.json +3 -3
- package/dist/chunk-2JFARUKC.js.map +0 -1
- package/dist/chunk-COJ3IDE2.js.map +0 -1
- package/dist/chunk-GR5JNFGQ.js.map +0 -1
- package/dist/chunk-UB2BI3AW.js.map +0 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// registry/examples/mascots/magpie.tsx
|
|
4
|
+
import { Button } from "@krizaka/ui/button";
|
|
5
|
+
import { Mascot } from "@krizaka/ui/mascots";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
function MascotMagpie() {
|
|
8
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
|
|
9
|
+
/* @__PURE__ */ jsx(Mascot, { bird: "magpie", mood: "success", size: 88 }),
|
|
10
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
11
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg", children: "+5 points \u2014 exact score" }),
|
|
12
|
+
/* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-fg-secondary", children: "You move up to second place in the league." }),
|
|
13
|
+
/* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", className: "mt-3", children: "See the standings" })
|
|
14
|
+
] })
|
|
15
|
+
] });
|
|
16
|
+
}
|
|
17
|
+
export {
|
|
18
|
+
MascotMagpie as default
|
|
19
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Button } from "@krizaka/ui/button";
|
|
2
|
+
import { Mascot } from "@krizaka/ui/mascots";
|
|
3
|
+
|
|
4
|
+
// The magpie keeps the score: a win counted, the standings moved — the words and one action beside it.
|
|
5
|
+
export default function MascotMagpie() {
|
|
6
|
+
return (
|
|
7
|
+
<div className="flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
|
|
8
|
+
<Mascot bird="magpie" mood="success" size={88} />
|
|
9
|
+
<div className="flex-1">
|
|
10
|
+
<p className="text-sm font-medium text-fg">+5 points — exact score</p>
|
|
11
|
+
<p className="mt-1 text-sm text-fg-secondary">You move up to second place in the league.</p>
|
|
12
|
+
<Button variant="primary" size="sm" className="mt-3">
|
|
13
|
+
See the standings
|
|
14
|
+
</Button>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
}
|
package/registry/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krizaka/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.15.0",
|
|
4
4
|
"templatePurposes": {
|
|
5
5
|
"convince": {
|
|
6
6
|
"title": "Convince",
|
|
@@ -1731,7 +1731,7 @@
|
|
|
1731
1731
|
"native": 2
|
|
1732
1732
|
},
|
|
1733
1733
|
"dependencies": [
|
|
1734
|
-
"@krizaka/tokens@^3.
|
|
1734
|
+
"@krizaka/tokens@^3.15.0",
|
|
1735
1735
|
"@protomaps/basemaps@5.7.2",
|
|
1736
1736
|
"tailwind-variants@^3.3.1"
|
|
1737
1737
|
],
|
|
@@ -1841,13 +1841,13 @@
|
|
|
1841
1841
|
"name": "mascots",
|
|
1842
1842
|
"type": "primitive",
|
|
1843
1843
|
"title": "Mascots",
|
|
1844
|
-
"summary": "The Krizaka flock:
|
|
1845
|
-
"description": "The Krizaka flock:
|
|
1844
|
+
"summary": "The Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
|
|
1845
|
+
"description": "The Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
|
|
1846
1846
|
"status": "beta",
|
|
1847
1847
|
"category": "feedback",
|
|
1848
1848
|
"platforms": "both",
|
|
1849
1849
|
"examples": {
|
|
1850
|
-
"web":
|
|
1850
|
+
"web": 10,
|
|
1851
1851
|
"native": 4
|
|
1852
1852
|
},
|
|
1853
1853
|
"dependencies": [],
|
|
@@ -1939,7 +1939,7 @@
|
|
|
1939
1939
|
"native": 0
|
|
1940
1940
|
},
|
|
1941
1941
|
"dependencies": [
|
|
1942
|
-
"@krizaka/tokens@^3.
|
|
1942
|
+
"@krizaka/tokens@^3.15.0",
|
|
1943
1943
|
"radix-ui@^1.7.0",
|
|
1944
1944
|
"tailwind-variants@^3.3.1"
|
|
1945
1945
|
],
|
|
@@ -2455,7 +2455,7 @@
|
|
|
2455
2455
|
"native": 0
|
|
2456
2456
|
},
|
|
2457
2457
|
"dependencies": [
|
|
2458
|
-
"@krizaka/tokens@^3.
|
|
2458
|
+
"@krizaka/tokens@^3.15.0",
|
|
2459
2459
|
"radix-ui@^1.7.0",
|
|
2460
2460
|
"tailwind-variants@^3.3.1"
|
|
2461
2461
|
],
|
package/registry/map.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"category": "blocks",
|
|
10
10
|
"platforms": "web",
|
|
11
11
|
"whenToUse": [
|
|
12
|
-
"To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces, the crane listens).",
|
|
12
|
+
"To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces, the crane listens, the magpie keeps the score, the beaver builds the shop).",
|
|
13
13
|
"A promise that deserves its own moment in a section (`callout`)."
|
|
14
14
|
],
|
|
15
15
|
"whenNotToUse": [
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"props": [
|
|
50
50
|
{
|
|
51
51
|
"name": "bird",
|
|
52
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
52
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
53
53
|
"default": null,
|
|
54
54
|
"description": "The bird that speaks — the one whose idea it is.",
|
|
55
55
|
"required": true
|
|
@@ -119,11 +119,11 @@
|
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
121
|
"path": "mascot-quote/mascot-quote.tsx",
|
|
122
|
-
"content": "// Client (the bird has an id per instance). A rule, a promise or a decision told by a bird (blocks.css): the sentence in\n// a speech bubble — an opening quote mark, the hue around it — and under its tail the bird and who speaks. One bird per\n// idea (Mascot's rule): the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the\n// pigeon delivers, the lovebird introduces, the crane listens.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type MascotBird, type MascotMood } from \"../mascots/geometry\";\nimport { Mascot } from \"../mascots/mascot\";\n\nexport type MascotQuoteProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n /** The bird that speaks — the one whose idea it is. */\n bird: MascotBird;\n /**\n * Its mood.\n * @default \"thinking\"\n */\n mood?: MascotMood;\n /** Who speaks, under the bubble: `The falcon's rule`. */\n label: React.ReactNode;\n /** The sentence: the rule, the promise. */\n children: React.ReactNode;\n /**\n * `inline` inside a card (small, the bird answers the pointer); `callout` alone in a section (larger, the bird alive).\n * @default \"inline\"\n */\n variant?: \"inline\" | \"callout\";\n /** The bird's idle loop (it pauses off screen and stops under reduced motion). Defaults to `true` for a callout. */\n animated?: boolean;\n};\n\n/** A sentence told by a bird: a speech bubble, the bird under its tail, who speaks. The bird is decorative. */\nexport function MascotQuote({ bird, mood = \"thinking\", label, children, variant = \"inline\", animated, className, ...props }: MascotQuoteProps) {\n const callout = variant === \"callout\";\n return (\n <figure className={cn(\"kz-quote\", className)} data-variant={callout ? \"callout\" : undefined} {...props}>\n <blockquote>\n <p>{children}</p>\n </blockquote>\n <figcaption>\n <Mascot bird={bird} mood={mood} size={callout ? 72 : 44} animated={animated ?? callout} className=\"kz-quote-bird\" aria-hidden />\n <span>{label}</span>\n </figcaption>\n </figure>\n );\n}\n"
|
|
122
|
+
"content": "// Client (the bird has an id per instance). A rule, a promise or a decision told by a bird (blocks.css): the sentence in\n// a speech bubble — an opening quote mark, the hue around it — and under its tail the bird and who speaks. One bird per\n// idea (Mascot's rule): the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the\n// pigeon delivers, the lovebird introduces, the crane listens, the magpie keeps the score, the beaver builds the shop.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type MascotBird, type MascotMood } from \"../mascots/geometry\";\nimport { Mascot } from \"../mascots/mascot\";\n\nexport type MascotQuoteProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n /** The bird that speaks — the one whose idea it is. */\n bird: MascotBird;\n /**\n * Its mood.\n * @default \"thinking\"\n */\n mood?: MascotMood;\n /** Who speaks, under the bubble: `The falcon's rule`. */\n label: React.ReactNode;\n /** The sentence: the rule, the promise. */\n children: React.ReactNode;\n /**\n * `inline` inside a card (small, the bird answers the pointer); `callout` alone in a section (larger, the bird alive).\n * @default \"inline\"\n */\n variant?: \"inline\" | \"callout\";\n /** The bird's idle loop (it pauses off screen and stops under reduced motion). Defaults to `true` for a callout. */\n animated?: boolean;\n};\n\n/** A sentence told by a bird: a speech bubble, the bird under its tail, who speaks. The bird is decorative. */\nexport function MascotQuote({ bird, mood = \"thinking\", label, children, variant = \"inline\", animated, className, ...props }: MascotQuoteProps) {\n const callout = variant === \"callout\";\n return (\n <figure className={cn(\"kz-quote\", className)} data-variant={callout ? \"callout\" : undefined} {...props}>\n <blockquote>\n <p>{children}</p>\n </blockquote>\n <figcaption>\n <Mascot bird={bird} mood={mood} size={callout ? 72 : 44} animated={animated ?? callout} className=\"kz-quote-bird\" aria-hidden />\n <span>{label}</span>\n </figcaption>\n </figure>\n );\n}\n"
|
|
123
123
|
},
|
|
124
124
|
{
|
|
125
125
|
"path": "mascot-quote/meta.ts",
|
|
126
|
-
"content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n title: \"Mascot quote\",\n summary:\n \"A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — `inline` in a card, `callout` alone in a section.\",\n status: \"beta\",\n category: \"blocks\",\n platforms: \"web\",\n whenToUse: [\n \"To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces, the crane listens).\",\n \"A promise that deserves its own moment in a section (`callout`).\",\n ],\n whenNotToUse: [\n { when: \"For a bird that only decorates: a bird carries a promise, or it is not there.\", use: \"mascots\" },\n { when: \"For a status or a warning the reader must act on.\", use: \"alert\" },\n ],\n bestPractices: [\n \"One bird per idea, the same bird for the same idea everywhere.\",\n \"One sentence, said as a rule: short, in the present tense.\",\n \"The label says who speaks (`The falcon's rule`): words as props.\",\n ],\n accessibility: {\n keyboard: [],\n notes: [\n \"A `figure` with a `blockquote` and its `figcaption`: read as a quote and who says it.\",\n \"The bird is decorative (`aria-hidden`); its idle loop pauses off screen and stops under `prefers-reduced-motion`.\",\n ],\n },\n related: [\"mascots\", \"argument-card\", \"alert\"],\n web: {\n imports: [\"MascotQuote\"],\n examples: [\n { name: \"inline\", title: \"Inline\", description: \"The falcon's rule, small, beside a paragraph or inside a card.\" },\n { name: \"callout\", title: \"Callout\", description: \"The owl's promise, alone in a section, the bird alive.\" },\n ],\n },\n} satisfies ComponentMeta;\n"
|
|
126
|
+
"content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n title: \"Mascot quote\",\n summary:\n \"A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — `inline` in a card, `callout` alone in a section.\",\n status: \"beta\",\n category: \"blocks\",\n platforms: \"web\",\n whenToUse: [\n \"To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces, the crane listens, the magpie keeps the score, the beaver builds the shop).\",\n \"A promise that deserves its own moment in a section (`callout`).\",\n ],\n whenNotToUse: [\n { when: \"For a bird that only decorates: a bird carries a promise, or it is not there.\", use: \"mascots\" },\n { when: \"For a status or a warning the reader must act on.\", use: \"alert\" },\n ],\n bestPractices: [\n \"One bird per idea, the same bird for the same idea everywhere.\",\n \"One sentence, said as a rule: short, in the present tense.\",\n \"The label says who speaks (`The falcon's rule`): words as props.\",\n ],\n accessibility: {\n keyboard: [],\n notes: [\n \"A `figure` with a `blockquote` and its `figcaption`: read as a quote and who says it.\",\n \"The bird is decorative (`aria-hidden`); its idle loop pauses off screen and stops under `prefers-reduced-motion`.\",\n ],\n },\n related: [\"mascots\", \"argument-card\", \"alert\"],\n web: {\n imports: [\"MascotQuote\"],\n examples: [\n { name: \"inline\", title: \"Inline\", description: \"The falcon's rule, small, beside a paragraph or inside a card.\" },\n { name: \"callout\", title: \"Callout\", description: \"The owl's promise, alone in a section, the bird alive.\" },\n ],\n },\n} satisfies ComponentMeta;\n"
|
|
127
127
|
},
|
|
128
128
|
{
|
|
129
129
|
"path": "meta.ts",
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
"props": [
|
|
147
147
|
{
|
|
148
148
|
"name": "bird",
|
|
149
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
149
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
150
150
|
"default": null,
|
|
151
151
|
"description": "The bird that speaks — the one whose idea it is.",
|
|
152
152
|
"required": true
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
}
|
|
35
35
|
],
|
|
36
36
|
"bestPractices": [
|
|
37
|
-
"Choose the bird by the job, not by the mood: the owl reads (documents, search), the falcon watches (security, verification), the duck builds (code, uploads), the flamingo answers and gets paid (support, payments), the pigeon delivers (messages, notifications), the lovebird introduces (matches, introductions), the crane listens (a quiet moment, taking one's time).",
|
|
37
|
+
"Choose the bird by the job, not by the mood: the owl reads (documents, search), the falcon watches (security, verification), the duck builds (code, uploads), the flamingo answers and gets paid (support, payments), the pigeon delivers (messages, notifications), the lovebird introduces (matches, introductions), the crane listens (a quiet moment, taking one's time), the magpie keeps the score (points, standings, trophies), the beaver builds the shop (bookings, invoices).",
|
|
38
38
|
"One bird per screen: a moment, never decoration in working content.",
|
|
39
39
|
"The title says what happened in a few words, the description what comes next; one action — the way out.",
|
|
40
40
|
"`titleAs=\"h1\"` when the state is the whole page (a 404), so the page keeps a heading."
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
"name": "bird",
|
|
87
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
87
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
88
88
|
"default": null,
|
|
89
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
89
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
90
90
|
"required": false
|
|
91
91
|
},
|
|
92
92
|
{
|
|
@@ -160,9 +160,9 @@
|
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"name": "bird",
|
|
163
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
163
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
164
164
|
"default": null,
|
|
165
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
165
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
166
166
|
"required": false
|
|
167
167
|
},
|
|
168
168
|
{
|
|
@@ -236,9 +236,9 @@
|
|
|
236
236
|
},
|
|
237
237
|
{
|
|
238
238
|
"name": "bird",
|
|
239
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
239
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
240
240
|
"default": "owl",
|
|
241
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
241
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
242
242
|
"required": false
|
|
243
243
|
},
|
|
244
244
|
{
|
|
@@ -319,9 +319,9 @@
|
|
|
319
319
|
},
|
|
320
320
|
{
|
|
321
321
|
"name": "bird",
|
|
322
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
322
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
323
323
|
"default": null,
|
|
324
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
324
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
325
325
|
"required": false
|
|
326
326
|
},
|
|
327
327
|
{
|
|
@@ -395,9 +395,9 @@
|
|
|
395
395
|
},
|
|
396
396
|
{
|
|
397
397
|
"name": "bird",
|
|
398
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
398
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
399
399
|
"default": null,
|
|
400
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
400
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
401
401
|
"required": false
|
|
402
402
|
},
|
|
403
403
|
{
|
|
@@ -524,9 +524,9 @@
|
|
|
524
524
|
},
|
|
525
525
|
{
|
|
526
526
|
"name": "bird",
|
|
527
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
527
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
528
528
|
"default": "owl",
|
|
529
|
-
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening).",
|
|
529
|
+
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening), `magpie` (score), `beaver` (shop).",
|
|
530
530
|
"required": false
|
|
531
531
|
},
|
|
532
532
|
{
|
|
@@ -593,9 +593,9 @@
|
|
|
593
593
|
},
|
|
594
594
|
{
|
|
595
595
|
"name": "bird",
|
|
596
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
596
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
597
597
|
"default": null,
|
|
598
|
-
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening).",
|
|
598
|
+
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening), `magpie` (score), `beaver` (shop).",
|
|
599
599
|
"required": false
|
|
600
600
|
},
|
|
601
601
|
{
|
|
@@ -655,9 +655,9 @@
|
|
|
655
655
|
},
|
|
656
656
|
{
|
|
657
657
|
"name": "bird",
|
|
658
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
658
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
659
659
|
"default": null,
|
|
660
|
-
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening).",
|
|
660
|
+
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening), `magpie` (score), `beaver` (shop).",
|
|
661
661
|
"required": false
|
|
662
662
|
},
|
|
663
663
|
{
|
|
@@ -717,9 +717,9 @@
|
|
|
717
717
|
},
|
|
718
718
|
{
|
|
719
719
|
"name": "bird",
|
|
720
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
720
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
721
721
|
"default": null,
|
|
722
|
-
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening).",
|
|
722
|
+
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening), `magpie` (score), `beaver` (shop).",
|
|
723
723
|
"required": false
|
|
724
724
|
},
|
|
725
725
|
{
|
|
@@ -779,9 +779,9 @@
|
|
|
779
779
|
},
|
|
780
780
|
{
|
|
781
781
|
"name": "bird",
|
|
782
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
782
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
783
783
|
"default": null,
|
|
784
|
-
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening).",
|
|
784
|
+
"description": "The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening), `magpie` (score), `beaver` (shop).",
|
|
785
785
|
"required": false
|
|
786
786
|
},
|
|
787
787
|
{
|
|
@@ -837,11 +837,11 @@
|
|
|
837
837
|
},
|
|
838
838
|
{
|
|
839
839
|
"path": "mascot-state/mascot-state.tsx",
|
|
840
|
-
"content": "// The moments a product speaks to a person — nothing yet, a long wait, done, it failed, welcome — told by a bird of\n// the flock beside the words. Every word is a prop; the bird never carries the message alone.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport type { MascotBird, MascotMood, MascotTone } from \"../mascots/geometry\";\nimport { Mascot } from \"../mascots/mascot\";\n\n// Staged: the bird arrives, then the words, then the action — once, and not at all under reduced motion.\nconst CSS = `\n@keyframes kzms-in { from { opacity: 0; transform: translateY(6px); } }\n@media (prefers-reduced-motion: no-preference) {\n [data-kzms-staged] > [data-kzms-part] { animation: kzms-in .42s cubic-bezier(.2,.8,.2,1) both; }\n [data-kzms-staged] > [data-kzms-part=\"words\"] { animation-delay: .12s; }\n [data-kzms-staged] > [data-kzms-part=\"action\"] { animation-delay: .24s; }\n}\n`;\n\nexport const mascotState = tv({\n slots: {\n root: \"flex items-center gap-4 text-fg\",\n bird: \"shrink-0\",\n words: \"flex flex-col gap-1.5\",\n title: \"text-base font-semibold text-fg\",\n description: \"max-w-sm text-sm text-fg-secondary\",\n action: \"flex flex-wrap items-center gap-2\",\n },\n variants: {\n layout: {\n stacked: { root: \"flex-col justify-center px-6 py-10 text-center\", words: \"items-center\", action: \"justify-center\" },\n inline: { root: \"flex-row text-left\", action: \"mt-1\" },\n },\n framed: { true: { root: \"rounded-xl border border-dashed border-border-default bg-surface-1\" }, false: {} },\n },\n compoundVariants: [{ layout: \"inline\", framed: true, class: { root: \"p-4\" } }],\n defaultVariants: { layout: \"stacked\", framed: false },\n});\n\nconst SIZE = { sm: 64, md: 96, lg: 128 } as const;\n\nexport type MascotStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n /**\n * The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n * (code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.\n */\n bird?: MascotBird;\n /** The moment: `empty` (nothing yet), `thinking` (a long task runs), `success` (done), `error` (it failed), `welcome`. */\n mood?: MascotMood;\n /** What happened, in a few words (\"No videos yet\", \"Payment received\"). */\n title: React.ReactNode;\n /** Why, or what comes next. */\n description?: React.ReactNode;\n /** What to do next: a Button, a link. One, at most two. */\n action?: React.ReactNode;\n /** The bird's size: `sm` 64 px, `md` 96 px (default), `lg` 128 px. */\n size?: keyof typeof SIZE;\n /** `stacked` (default): the bird above centred words — a page, a panel. `inline`: the bird beside the words — a card, a row of a form. */\n layout?: \"stacked\" | \"inline\";\n /** A dashed frame on the raised surface, for an empty list or panel. */\n framed?: boolean;\n /** `brand` (default): the product's accent. `own`: the bird's colours of the Krizaka story. */\n tone?: MascotTone;\n /** The bird's gesture and the staged arrival. Off with `false`; always off under `prefers-reduced-motion`. */\n animated?: boolean;\n /** The level of the title (default `p`): `h1` on a full page (a 404), `h2`/`h3` inside a page. */\n titleAs?: \"p\" | \"h1\" | \"h2\" | \"h3\";\n};\n\n/**\n * A moment told by a bird of the flock: an empty list, a long wait, a success, an error, a welcome. Announced to\n * assistive technology — `role=\"alert\"` for an error, `role=\"status\"` otherwise (`aria-busy` while thinking).\n */\nexport function MascotState({\n bird = \"owl\",\n mood = \"empty\",\n title,\n description,\n action,\n size = \"md\",\n layout,\n framed,\n tone,\n animated = true,\n titleAs: Title = \"p\",\n className,\n ...props\n}: MascotStateProps) {\n const s = mascotState({ layout, framed });\n return (\n <div\n role={mood === \"error\" ? \"alert\" : \"status\"}\n aria-busy={mood === \"thinking\" ? true : undefined}\n data-mood={mood}\n data-kzms-staged={animated ? \"\" : undefined}\n className={s.root({ className })}\n {...props}\n >\n {animated && <style>{CSS}</style>}\n <span data-kzms-part=\"bird\" className={s.bird()}>\n <Mascot bird={bird} mood={mood} tone={tone} size={SIZE[size]} animated={animated} />\n </span>\n <div data-kzms-part=\"words\" className={s.words()}>\n <Title className={s.title()}>{title}</Title>\n {description && <p className={s.description()}>{description}</p>}\n {layout === \"inline\" && action && <div className={s.action()}>{action}</div>}\n </div>\n {layout !== \"inline\" && action && (\n <div data-kzms-part=\"action\" className={s.action()}>\n {action}\n </div>\n )}\n </div>\n );\n}\n\ntype PresetProps = Omit<MascotStateProps, \"mood\">;\n\n/** It failed: what went wrong and what to do (`role=\"alert\"`). `MascotState` with `mood=\"error\"`. */\nexport function ErrorState(props: PresetProps) {\n return <MascotState mood=\"error\" {...props} />;\n}\n\n/** It is done: a payment, a verification, a delivery, a sent message. `MascotState` with `mood=\"success\"`. */\nexport function SuccessState(props: PresetProps) {\n return <MascotState mood=\"success\" {...props} />;\n}\n\n/** A long task runs (`aria-busy`): what runs, beside the bird. `MascotState` with `mood=\"thinking\"`. */\nexport function LoadingState(props: PresetProps) {\n return <MascotState mood=\"thinking\" {...props} />;\n}\n\n/** A first screen, an onboarding step. `MascotState` with `mood=\"welcome\"`. */\nexport function WelcomeState(props: PresetProps) {\n return <MascotState mood=\"welcome\" {...props} />;\n}\n"
|
|
840
|
+
"content": "// The moments a product speaks to a person — nothing yet, a long wait, done, it failed, welcome — told by a bird of\n// the flock beside the words. Every word is a prop; the bird never carries the message alone.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport type { MascotBird, MascotMood, MascotTone } from \"../mascots/geometry\";\nimport { Mascot } from \"../mascots/mascot\";\n\n// Staged: the bird arrives, then the words, then the action — once, and not at all under reduced motion.\nconst CSS = `\n@keyframes kzms-in { from { opacity: 0; transform: translateY(6px); } }\n@media (prefers-reduced-motion: no-preference) {\n [data-kzms-staged] > [data-kzms-part] { animation: kzms-in .42s cubic-bezier(.2,.8,.2,1) both; }\n [data-kzms-staged] > [data-kzms-part=\"words\"] { animation-delay: .12s; }\n [data-kzms-staged] > [data-kzms-part=\"action\"] { animation-delay: .24s; }\n}\n`;\n\nexport const mascotState = tv({\n slots: {\n root: \"flex items-center gap-4 text-fg\",\n bird: \"shrink-0\",\n words: \"flex flex-col gap-1.5\",\n title: \"text-base font-semibold text-fg\",\n description: \"max-w-sm text-sm text-fg-secondary\",\n action: \"flex flex-wrap items-center gap-2\",\n },\n variants: {\n layout: {\n stacked: { root: \"flex-col justify-center px-6 py-10 text-center\", words: \"items-center\", action: \"justify-center\" },\n inline: { root: \"flex-row text-left\", action: \"mt-1\" },\n },\n framed: { true: { root: \"rounded-xl border border-dashed border-border-default bg-surface-1\" }, false: {} },\n },\n compoundVariants: [{ layout: \"inline\", framed: true, class: { root: \"p-4\" } }],\n defaultVariants: { layout: \"stacked\", framed: false },\n});\n\nconst SIZE = { sm: 64, md: 96, lg: 128 } as const;\n\nexport type MascotStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n /**\n * The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n * (code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.\n */\n bird?: MascotBird;\n /** The moment: `empty` (nothing yet), `thinking` (a long task runs), `success` (done), `error` (it failed), `welcome`. */\n mood?: MascotMood;\n /** What happened, in a few words (\"No videos yet\", \"Payment received\"). */\n title: React.ReactNode;\n /** Why, or what comes next. */\n description?: React.ReactNode;\n /** What to do next: a Button, a link. One, at most two. */\n action?: React.ReactNode;\n /** The bird's size: `sm` 64 px, `md` 96 px (default), `lg` 128 px. */\n size?: keyof typeof SIZE;\n /** `stacked` (default): the bird above centred words — a page, a panel. `inline`: the bird beside the words — a card, a row of a form. */\n layout?: \"stacked\" | \"inline\";\n /** A dashed frame on the raised surface, for an empty list or panel. */\n framed?: boolean;\n /** `brand` (default): the product's accent. `own`: the bird's colours of the Krizaka story. */\n tone?: MascotTone;\n /** The bird's gesture and the staged arrival. Off with `false`; always off under `prefers-reduced-motion`. */\n animated?: boolean;\n /** The level of the title (default `p`): `h1` on a full page (a 404), `h2`/`h3` inside a page. */\n titleAs?: \"p\" | \"h1\" | \"h2\" | \"h3\";\n};\n\n/**\n * A moment told by a bird of the flock: an empty list, a long wait, a success, an error, a welcome. Announced to\n * assistive technology — `role=\"alert\"` for an error, `role=\"status\"` otherwise (`aria-busy` while thinking).\n */\nexport function MascotState({\n bird = \"owl\",\n mood = \"empty\",\n title,\n description,\n action,\n size = \"md\",\n layout,\n framed,\n tone,\n animated = true,\n titleAs: Title = \"p\",\n className,\n ...props\n}: MascotStateProps) {\n const s = mascotState({ layout, framed });\n return (\n <div\n role={mood === \"error\" ? \"alert\" : \"status\"}\n aria-busy={mood === \"thinking\" ? true : undefined}\n data-mood={mood}\n data-kzms-staged={animated ? \"\" : undefined}\n className={s.root({ className })}\n {...props}\n >\n {animated && <style>{CSS}</style>}\n <span data-kzms-part=\"bird\" className={s.bird()}>\n <Mascot bird={bird} mood={mood} tone={tone} size={SIZE[size]} animated={animated} />\n </span>\n <div data-kzms-part=\"words\" className={s.words()}>\n <Title className={s.title()}>{title}</Title>\n {description && <p className={s.description()}>{description}</p>}\n {layout === \"inline\" && action && <div className={s.action()}>{action}</div>}\n </div>\n {layout !== \"inline\" && action && (\n <div data-kzms-part=\"action\" className={s.action()}>\n {action}\n </div>\n )}\n </div>\n );\n}\n\ntype PresetProps = Omit<MascotStateProps, \"mood\">;\n\n/** It failed: what went wrong and what to do (`role=\"alert\"`). `MascotState` with `mood=\"error\"`. */\nexport function ErrorState(props: PresetProps) {\n return <MascotState mood=\"error\" {...props} />;\n}\n\n/** It is done: a payment, a verification, a delivery, a sent message. `MascotState` with `mood=\"success\"`. */\nexport function SuccessState(props: PresetProps) {\n return <MascotState mood=\"success\" {...props} />;\n}\n\n/** A long task runs (`aria-busy`): what runs, beside the bird. `MascotState` with `mood=\"thinking\"`. */\nexport function LoadingState(props: PresetProps) {\n return <MascotState mood=\"thinking\" {...props} />;\n}\n\n/** A first screen, an onboarding step. `MascotState` with `mood=\"welcome\"`. */\nexport function WelcomeState(props: PresetProps) {\n return <MascotState mood=\"welcome\" {...props} />;\n}\n"
|
|
841
841
|
},
|
|
842
842
|
{
|
|
843
843
|
"path": "mascot-state/meta.ts",
|
|
844
|
-
"content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n title: \"Mascot state\",\n summary:\n \"A moment told by a bird of the flock: nothing yet, a long wait, done, it failed, welcome — the bird of the job beside the words and the next action.\",\n status: \"beta\",\n category: \"feedback\",\n platforms: \"both\",\n whenToUse: [\n \"An empty list or search the person reaches for the first time (`mood=\\\"empty\\\"`, `framed`).\",\n \"A page or a panel that failed: a 404, a lost connection, a refused payment (`ErrorState`).\",\n \"The end of something that matters: a payment received, an identity verified, a message sent (`SuccessState`).\",\n \"A task of several seconds or more, with what runs in words (`LoadingState`).\",\n \"The first screen of an onboarding (`WelcomeState`).\",\n ],\n whenNotToUse: [\n { when: \"A short wait of a second or two, or a list that is loading.\", use: \"skeleton\" },\n { when: \"An error inside a form or a card, next to what it concerns.\", use: \"alert\" },\n { when: \"A result that needs no moment: a saved setting, a copied link.\", use: \"toast\" },\n { when: \"A plain empty list in a dense screen (a table, a sidebar).\", use: \"empty-state\" },\n ],\n bestPractices: [\n \"Choose the bird by the job, not by the mood: the owl reads (documents, search), the falcon watches (security, verification), the duck builds (code, uploads), the flamingo answers and gets paid (support, payments), the pigeon delivers (messages, notifications), the lovebird introduces (matches, introductions), the crane listens (a quiet moment, taking one's time).\",\n \"One bird per screen: a moment, never decoration in working content.\",\n \"The title says what happened in a few words, the description what comes next; one action — the way out.\",\n \"`titleAs=\\\"h1\\\"` when the state is the whole page (a 404), so the page keeps a heading.\",\n ],\n accessibility: {\n keyboard: [],\n notes: [\n \"`role=\\\"alert\\\"` for an error, `role=\\\"status\\\"` otherwise: announced when it appears; `aria-busy` while thinking.\",\n \"The bird is decorative: the title and the description carry the meaning.\",\n \"The staged arrival (bird, words, action) and the bird's gesture stop under `prefers-reduced-motion` and with `animated={false}`.\",\n ],\n },\n related: [\"mascots\", \"empty-state\", \"alert\", \"progress\"],\n web: {\n imports: [\"MascotState\", \"ErrorState\", \"SuccessState\", \"LoadingState\", \"WelcomeState\"],\n examples: [\n { name: \"empty\", title: \"Nothing yet\", description: \"A framed empty list: the pigeon has no message to deliver yet.\" },\n { name: \"error\", title: \"It failed\", description: \"A page that does not exist: the owl did not find it, with the way back.\" },\n { name: \"success\", title: \"Done\", description: \"A payment received: the flamingo answers, the next step beside it.\" },\n { name: \"loading\", title: \"A long task\", description: \"The duck builds while the job runs, in a card (`layout=\\\"inline\\\"`).\" },\n { name: \"welcome\", title: \"Welcome\", description: \"An onboarding's first screen: the falcon keeps the account safe.\" },\n ],\n },\n native: {\n imports: [\"MascotState\", \"ErrorState\", \"SuccessState\", \"LoadingState\", \"WelcomeState\"],\n differences: [\"`title` and `description` are strings; the action is a native `Button`.\", \"No `framed` and no `titleAs`: style with `style`.\", \"Only the idle bob and a fade-in: the web gestures (wave, dots, hop) stay on the web.\"],\n examples: [{ name: \"default\", title: \"Default\", description: \"A payment received (flamingo) and a verification that failed (falcon).\" }],\n },\n} satisfies ComponentMeta;\n"
|
|
844
|
+
"content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n title: \"Mascot state\",\n summary:\n \"A moment told by a bird of the flock: nothing yet, a long wait, done, it failed, welcome — the bird of the job beside the words and the next action.\",\n status: \"beta\",\n category: \"feedback\",\n platforms: \"both\",\n whenToUse: [\n \"An empty list or search the person reaches for the first time (`mood=\\\"empty\\\"`, `framed`).\",\n \"A page or a panel that failed: a 404, a lost connection, a refused payment (`ErrorState`).\",\n \"The end of something that matters: a payment received, an identity verified, a message sent (`SuccessState`).\",\n \"A task of several seconds or more, with what runs in words (`LoadingState`).\",\n \"The first screen of an onboarding (`WelcomeState`).\",\n ],\n whenNotToUse: [\n { when: \"A short wait of a second or two, or a list that is loading.\", use: \"skeleton\" },\n { when: \"An error inside a form or a card, next to what it concerns.\", use: \"alert\" },\n { when: \"A result that needs no moment: a saved setting, a copied link.\", use: \"toast\" },\n { when: \"A plain empty list in a dense screen (a table, a sidebar).\", use: \"empty-state\" },\n ],\n bestPractices: [\n \"Choose the bird by the job, not by the mood: the owl reads (documents, search), the falcon watches (security, verification), the duck builds (code, uploads), the flamingo answers and gets paid (support, payments), the pigeon delivers (messages, notifications), the lovebird introduces (matches, introductions), the crane listens (a quiet moment, taking one's time), the magpie keeps the score (points, standings, trophies), the beaver builds the shop (bookings, invoices).\",\n \"One bird per screen: a moment, never decoration in working content.\",\n \"The title says what happened in a few words, the description what comes next; one action — the way out.\",\n \"`titleAs=\\\"h1\\\"` when the state is the whole page (a 404), so the page keeps a heading.\",\n ],\n accessibility: {\n keyboard: [],\n notes: [\n \"`role=\\\"alert\\\"` for an error, `role=\\\"status\\\"` otherwise: announced when it appears; `aria-busy` while thinking.\",\n \"The bird is decorative: the title and the description carry the meaning.\",\n \"The staged arrival (bird, words, action) and the bird's gesture stop under `prefers-reduced-motion` and with `animated={false}`.\",\n ],\n },\n related: [\"mascots\", \"empty-state\", \"alert\", \"progress\"],\n web: {\n imports: [\"MascotState\", \"ErrorState\", \"SuccessState\", \"LoadingState\", \"WelcomeState\"],\n examples: [\n { name: \"empty\", title: \"Nothing yet\", description: \"A framed empty list: the pigeon has no message to deliver yet.\" },\n { name: \"error\", title: \"It failed\", description: \"A page that does not exist: the owl did not find it, with the way back.\" },\n { name: \"success\", title: \"Done\", description: \"A payment received: the flamingo answers, the next step beside it.\" },\n { name: \"loading\", title: \"A long task\", description: \"The duck builds while the job runs, in a card (`layout=\\\"inline\\\"`).\" },\n { name: \"welcome\", title: \"Welcome\", description: \"An onboarding's first screen: the falcon keeps the account safe.\" },\n ],\n },\n native: {\n imports: [\"MascotState\", \"ErrorState\", \"SuccessState\", \"LoadingState\", \"WelcomeState\"],\n differences: [\"`title` and `description` are strings; the action is a native `Button`.\", \"No `framed` and no `titleAs`: style with `style`.\", \"Only the idle bob and a fade-in: the web gestures (wave, dots, hop) stay on the web.\"],\n examples: [{ name: \"default\", title: \"Default\", description: \"A payment received (flamingo) and a verification that failed (falcon).\" }],\n },\n} satisfies ComponentMeta;\n"
|
|
845
845
|
},
|
|
846
846
|
{
|
|
847
847
|
"path": "meta.ts",
|
|
@@ -886,9 +886,9 @@
|
|
|
886
886
|
},
|
|
887
887
|
{
|
|
888
888
|
"name": "bird",
|
|
889
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
889
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
890
890
|
"default": null,
|
|
891
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
891
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
892
892
|
"required": false
|
|
893
893
|
},
|
|
894
894
|
{
|
|
@@ -962,9 +962,9 @@
|
|
|
962
962
|
},
|
|
963
963
|
{
|
|
964
964
|
"name": "bird",
|
|
965
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
965
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
966
966
|
"default": null,
|
|
967
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
967
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
968
968
|
"required": false
|
|
969
969
|
},
|
|
970
970
|
{
|
|
@@ -1038,9 +1038,9 @@
|
|
|
1038
1038
|
},
|
|
1039
1039
|
{
|
|
1040
1040
|
"name": "bird",
|
|
1041
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
1041
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
1042
1042
|
"default": "owl",
|
|
1043
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
1043
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
1044
1044
|
"required": false
|
|
1045
1045
|
},
|
|
1046
1046
|
{
|
|
@@ -1121,9 +1121,9 @@
|
|
|
1121
1121
|
},
|
|
1122
1122
|
{
|
|
1123
1123
|
"name": "bird",
|
|
1124
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
1124
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
1125
1125
|
"default": null,
|
|
1126
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
1126
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
1127
1127
|
"required": false
|
|
1128
1128
|
},
|
|
1129
1129
|
{
|
|
@@ -1197,9 +1197,9 @@
|
|
|
1197
1197
|
},
|
|
1198
1198
|
{
|
|
1199
1199
|
"name": "bird",
|
|
1200
|
-
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
|
|
1200
|
+
"type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
|
|
1201
1201
|
"default": null,
|
|
1202
|
-
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening). One bird per idea.",
|
|
1202
|
+
"description": "The bird whose job the moment is about: `owl` (documents, reading), `falcon` (security, verification), `duck`\n(code, building), `flamingo` (answers, payments), `pigeon` (delivery, notifications), `lovebird` (introductions), `crane` (listening), `magpie` (score, standings), `beaver` (the shop). One bird per idea.",
|
|
1203
1203
|
"required": false
|
|
1204
1204
|
},
|
|
1205
1205
|
{
|