@krizaka/ui 2.5.0 → 2.8.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 +49 -5
- package/dist/action-bar.d.ts +38 -0
- package/dist/action-bar.js +52 -0
- package/dist/action-bar.js.map +1 -0
- package/dist/argument-card.d.ts +67 -0
- package/dist/argument-card.js +69 -0
- package/dist/argument-card.js.map +1 -0
- package/dist/audio-player.js +1 -1
- package/dist/block-link-BAg4eoZk.d.ts +12 -0
- package/dist/blocks.css +529 -0
- package/dist/button.js +5 -94
- package/dist/button.js.map +1 -1
- package/dist/card-grid.d.ts +42 -0
- package/dist/card-grid.js +47 -0
- package/dist/card-grid.js.map +1 -0
- package/dist/chunk-2AGSO3WH.js +20 -0
- package/dist/chunk-2AGSO3WH.js.map +1 -0
- package/dist/chunk-AB5D3KBG.js +37 -0
- package/dist/chunk-AB5D3KBG.js.map +1 -0
- package/dist/{chunk-YX6CNVJA.js → chunk-CPA5CF35.js} +1 -1
- package/dist/chunk-CPA5CF35.js.map +1 -0
- package/dist/chunk-K3SWZXYT.js +92 -0
- package/dist/chunk-K3SWZXYT.js.map +1 -0
- package/dist/chunk-NOVUREEC.js +274 -0
- package/dist/chunk-NOVUREEC.js.map +1 -0
- package/dist/{chunk-XUMJA5ZI.js → chunk-X6TW3X6Y.js} +2 -2
- package/dist/chunk-XCBVFMNV.js +41 -0
- package/dist/{chunk-YX6CNVJA.js.map → chunk-XCBVFMNV.js.map} +1 -1
- package/dist/chunk-XVLWVTQA.js +28 -0
- package/dist/chunk-XVLWVTQA.js.map +1 -0
- package/dist/chunk-Z6FUPB3Q.js +102 -0
- package/dist/chunk-Z6FUPB3Q.js.map +1 -0
- package/dist/code-block.d.ts +42 -0
- package/dist/code-block.js +202 -0
- package/dist/code-block.js.map +1 -0
- package/dist/combobox.js +2 -2
- package/dist/cta-panel.d.ts +23 -0
- package/dist/cta-panel.js +20 -0
- package/dist/cta-panel.js.map +1 -0
- package/dist/data-table.js +1 -1
- package/dist/date-picker.js +1 -1
- package/dist/decision-list.d.ts +34 -0
- package/dist/decision-list.js +67 -0
- package/dist/decision-list.js.map +1 -0
- package/dist/file-upload.js +1 -1
- package/dist/filter-bar.js +1 -1
- package/dist/geometry-CXrAW34x.d.ts +19 -0
- package/dist/index.d.ts +10 -2
- package/dist/index.js +86 -4
- package/dist/index.js.map +1 -1
- package/dist/link-card.d.ts +35 -0
- package/dist/link-card.js +46 -0
- package/dist/link-card.js.map +1 -0
- package/dist/mascot-quote.d.ts +43 -0
- package/dist/mascot-quote.js +287 -0
- package/dist/mascot-quote.js.map +1 -0
- package/dist/mascot-state.d.ts +128 -0
- package/dist/mascot-state.js +95 -0
- package/dist/mascot-state.js.map +1 -0
- package/dist/mascots.d.ts +5 -20
- package/dist/mascots.js +5 -246
- package/dist/mascots.js.map +1 -1
- package/dist/media-capture.js +1 -1
- package/dist/motion.css +25 -1
- package/dist/native.d.ts +54 -7
- package/dist/native.js +334 -166
- package/dist/native.js.map +1 -1
- package/dist/page-hero.d.ts +44 -0
- package/dist/page-hero.js +41 -0
- package/dist/page-hero.js.map +1 -0
- package/dist/page.d.ts +116 -0
- package/dist/page.js +17 -0
- package/dist/page.js.map +1 -0
- package/dist/pagination.js +25 -44
- package/dist/pagination.js.map +1 -1
- package/dist/pointer-light.d.ts +20 -0
- package/dist/pointer-light.js +12 -0
- package/dist/pointer-light.js.map +1 -0
- package/dist/search-field.js +1 -1
- package/dist/section-backdrop.js +4 -22
- package/dist/section-backdrop.js.map +1 -1
- package/dist/tag-input.js +2 -2
- package/dist/terminal-replay.d.ts +68 -0
- package/dist/terminal-replay.js +231 -0
- package/dist/terminal-replay.js.map +1 -0
- package/dist/toc.d.ts +23 -0
- package/dist/toc.js +39 -0
- package/dist/toc.js.map +1 -0
- package/dist/video-player.js +1 -1
- package/package.json +208 -8
- package/registry/action-bar.json +205 -0
- package/registry/alert.json +1 -1
- package/registry/argument-card.json +327 -0
- package/registry/audio-player.json +2 -2
- package/registry/avatar.json +1 -1
- package/registry/badge.json +1 -1
- package/registry/button.json +5 -5
- package/registry/card-grid.json +221 -0
- package/registry/card.json +3 -3
- package/registry/checkbox.json +1 -1
- package/registry/chip-link.json +1 -1
- package/registry/chip.json +1 -1
- package/registry/code-block.json +262 -0
- package/registry/combobox.json +2 -2
- package/registry/command.json +1 -1
- package/registry/confirm-button.json +3 -3
- package/registry/countdown.json +1 -1
- package/registry/cta-panel.json +154 -0
- package/registry/data-table.json +2 -2
- package/registry/date-picker.json +2 -2
- package/registry/decision-list.json +144 -0
- package/registry/dialog.json +1 -1
- package/registry/dropdown-menu.json +1 -1
- package/registry/empty-state.json +1 -1
- package/registry/examples/action-bar/buttons.d.ts +4 -0
- package/registry/examples/action-bar/buttons.js +22 -0
- package/registry/examples/action-bar/buttons.tsx +17 -0
- package/registry/examples/action-bar/icons.d.ts +4 -0
- package/registry/examples/action-bar/icons.js +24 -0
- package/registry/examples/action-bar/icons.tsx +23 -0
- package/registry/examples/argument-card/building-block.d.ts +4 -0
- package/registry/examples/argument-card/building-block.js +29 -0
- package/registry/examples/argument-card/building-block.tsx +29 -0
- package/registry/examples/argument-card/grid.d.ts +4 -0
- package/registry/examples/argument-card/grid.js +17 -0
- package/registry/examples/argument-card/grid.tsx +19 -0
- package/registry/examples/argument-card/unfold.d.ts +4 -0
- package/registry/examples/argument-card/unfold.js +26 -0
- package/registry/examples/argument-card/unfold.tsx +21 -0
- package/registry/examples/card-grid/products.d.ts +4 -0
- package/registry/examples/card-grid/products.js +16 -0
- package/registry/examples/card-grid/products.tsx +13 -0
- package/registry/examples/card-grid/reveal.d.ts +4 -0
- package/registry/examples/card-grid/reveal.js +13 -0
- package/registry/examples/card-grid/reveal.tsx +16 -0
- package/registry/examples/code-block/build-tools.d.ts +4 -0
- package/registry/examples/code-block/build-tools.js +30 -0
- package/registry/examples/code-block/build-tools.tsx +25 -0
- package/registry/examples/code-block/file.d.ts +4 -0
- package/registry/examples/code-block/file.js +17 -0
- package/registry/examples/code-block/file.tsx +13 -0
- package/registry/examples/cta-panel/discuss.d.ts +4 -0
- package/registry/examples/cta-panel/discuss.js +31 -0
- package/registry/examples/cta-panel/discuss.tsx +23 -0
- package/registry/examples/decision-list/product.d.ts +4 -0
- package/registry/examples/decision-list/product.js +35 -0
- package/registry/examples/decision-list/product.tsx +30 -0
- package/registry/examples/link-card/docs-hub.d.ts +4 -0
- package/registry/examples/link-card/docs-hub.js +18 -0
- package/registry/examples/link-card/docs-hub.tsx +20 -0
- package/registry/examples/link-card/external.d.ts +4 -0
- package/registry/examples/link-card/external.js +22 -0
- package/registry/examples/link-card/external.tsx +16 -0
- package/registry/examples/link-card/stack.d.ts +4 -0
- package/registry/examples/link-card/stack.js +26 -0
- package/registry/examples/link-card/stack.tsx +21 -0
- package/registry/examples/mascot-quote/callout.d.ts +4 -0
- package/registry/examples/mascot-quote/callout.js +11 -0
- package/registry/examples/mascot-quote/callout.tsx +10 -0
- package/registry/examples/mascot-quote/inline.d.ts +4 -0
- package/registry/examples/mascot-quote/inline.js +11 -0
- package/registry/examples/mascot-quote/inline.tsx +10 -0
- package/registry/examples/mascot-state/empty.d.ts +4 -0
- package/registry/examples/mascot-state/empty.js +22 -0
- package/registry/examples/mascot-state/empty.tsx +20 -0
- package/registry/examples/mascot-state/error.d.ts +4 -0
- package/registry/examples/mascot-state/error.js +23 -0
- package/registry/examples/mascot-state/error.tsx +21 -0
- package/registry/examples/mascot-state/loading.d.ts +4 -0
- package/registry/examples/mascot-state/loading.js +22 -0
- package/registry/examples/mascot-state/loading.tsx +16 -0
- package/registry/examples/mascot-state/native/default.d.ts +4 -0
- package/registry/examples/mascot-state/native/default.dark.png +0 -0
- package/registry/examples/mascot-state/native/default.js +25 -0
- package/registry/examples/mascot-state/native/default.light.png +0 -0
- package/registry/examples/mascot-state/native/default.tsx +19 -0
- package/registry/examples/mascot-state/success.d.ts +4 -0
- package/registry/examples/mascot-state/success.js +21 -0
- package/registry/examples/mascot-state/success.tsx +19 -0
- package/registry/examples/mascot-state/welcome.d.ts +4 -0
- package/registry/examples/mascot-state/welcome.js +21 -0
- package/registry/examples/mascot-state/welcome.tsx +19 -0
- package/registry/examples/mascots/flock.tsx +1 -1
- package/registry/examples/mascots/lovebird.d.ts +4 -0
- package/registry/examples/mascots/lovebird.js +19 -0
- package/registry/examples/mascots/lovebird.tsx +18 -0
- package/registry/examples/mascots/native/lovebird.d.ts +4 -0
- package/registry/examples/mascots/native/lovebird.dark.png +0 -0
- package/registry/examples/mascots/native/lovebird.js +21 -0
- package/registry/examples/mascots/native/lovebird.light.png +0 -0
- package/registry/examples/mascots/native/lovebird.tsx +18 -0
- package/registry/examples/page/backdrop.d.ts +4 -0
- package/registry/examples/page/backdrop.js +23 -0
- package/registry/examples/page/backdrop.tsx +18 -0
- package/registry/examples/page/facts.d.ts +4 -0
- package/registry/examples/page/facts.js +24 -0
- package/registry/examples/page/facts.tsx +21 -0
- package/registry/examples/page/frame.d.ts +4 -0
- package/registry/examples/page/frame.js +15 -0
- package/registry/examples/page/frame.tsx +17 -0
- package/registry/examples/page/sections.d.ts +4 -0
- package/registry/examples/page/sections.js +14 -0
- package/registry/examples/page/sections.tsx +15 -0
- package/registry/examples/page-hero/building-block.d.ts +4 -0
- package/registry/examples/page-hero/building-block.js +24 -0
- package/registry/examples/page-hero/building-block.tsx +20 -0
- package/registry/examples/page-hero/hub.d.ts +4 -0
- package/registry/examples/page-hero/hub.js +21 -0
- package/registry/examples/page-hero/hub.tsx +15 -0
- package/registry/examples/pointer-light/list.d.ts +4 -0
- package/registry/examples/pointer-light/list.js +16 -0
- package/registry/examples/pointer-light/list.tsx +14 -0
- package/registry/examples/terminal-replay/at-rest.d.ts +4 -0
- package/registry/examples/terminal-replay/at-rest.js +32 -0
- package/registry/examples/terminal-replay/at-rest.tsx +26 -0
- package/registry/examples/terminal-replay/session.d.ts +4 -0
- package/registry/examples/terminal-replay/session.js +34 -0
- package/registry/examples/terminal-replay/session.tsx +28 -0
- package/registry/examples/toc/reading-page.d.ts +4 -0
- package/registry/examples/toc/reading-page.js +21 -0
- package/registry/examples/toc/reading-page.tsx +21 -0
- package/registry/field.json +1 -1
- package/registry/file-upload.json +2 -2
- package/registry/filter-bar.json +2 -2
- package/registry/glow-card.json +1 -1
- package/registry/image-cropper.json +1 -1
- package/registry/index.json +265 -5
- package/registry/iso.json +1 -1
- package/registry/kbd.json +1 -1
- package/registry/link-card.json +279 -0
- package/registry/loader.json +1 -1
- package/registry/marquee.json +1 -1
- package/registry/mascot-quote.json +191 -0
- package/registry/mascot-state.json +1249 -0
- package/registry/mascots.json +41 -21
- package/registry/media-capture.json +4 -4
- package/registry/meter.json +1 -1
- package/registry/nav-bar.json +1 -1
- package/registry/number-ticker.json +1 -1
- package/registry/page-header.json +1 -1
- package/registry/page-hero.json +254 -0
- package/registry/page.json +497 -0
- package/registry/pagination.json +2 -2
- package/registry/pointer-light.json +119 -0
- package/registry/popover.json +1 -1
- package/registry/progress.json +1 -1
- package/registry/radio-group.json +1 -1
- package/registry/search-field.json +2 -2
- package/registry/section-backdrop.json +1 -1
- package/registry/separator.json +1 -1
- package/registry/skeleton.json +3 -3
- package/registry/slider.json +1 -1
- package/registry/slot.json +1 -1
- package/registry/spinner.json +1 -1
- package/registry/stat.json +1 -1
- package/registry/stepper.json +1 -1
- package/registry/switch.json +1 -1
- package/registry/tabs.json +1 -1
- package/registry/tag-input.json +1 -1
- package/registry/terminal-replay.json +317 -0
- package/registry/theme.json +1 -1
- package/registry/toast.json +1 -1
- package/registry/toc.json +157 -0
- package/registry/tooltip.json +1 -1
- package/registry/video-player.json +4 -4
- package/registry/video-trimmer.json +3 -3
- /package/dist/{chunk-XUMJA5ZI.js.map → chunk-X6TW3X6Y.js.map} +0 -0
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
4
|
+
/** The cards: one cell each. */
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.
|
|
8
|
+
* @default 300
|
|
9
|
+
*/
|
|
10
|
+
min?: number;
|
|
11
|
+
/**
|
|
12
|
+
* `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.
|
|
13
|
+
* @default "fill"
|
|
14
|
+
*/
|
|
15
|
+
fit?: "fill" | "fit";
|
|
16
|
+
/**
|
|
17
|
+
* `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).
|
|
18
|
+
* @default "stretch"
|
|
19
|
+
*/
|
|
20
|
+
align?: "stretch" | "start";
|
|
21
|
+
/**
|
|
22
|
+
* The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.
|
|
23
|
+
* @default true
|
|
24
|
+
*/
|
|
25
|
+
reveal?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* The columns the stagger counts (the delay restarts on every row).
|
|
28
|
+
* @default 3
|
|
29
|
+
*/
|
|
30
|
+
columns?: number;
|
|
31
|
+
/**
|
|
32
|
+
* The light that follows the pointer over the cards (`[data-kz-light]`).
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
light?: boolean;
|
|
36
|
+
/** `ul` when the cards are a list (each cell an `li`). */
|
|
37
|
+
as?: "div" | "ul" | "ol";
|
|
38
|
+
};
|
|
39
|
+
/** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */
|
|
40
|
+
declare function CardGrid({ children, min, fit, align, reveal, columns, light, as: Tag, className, style, ...props }: CardGridProps): React.JSX.Element;
|
|
41
|
+
|
|
42
|
+
export { CardGrid, type CardGridProps };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
POINTER_LIGHT_TARGET,
|
|
4
|
+
usePointerLight
|
|
5
|
+
} from "./chunk-AB5D3KBG.js";
|
|
6
|
+
import {
|
|
7
|
+
cn
|
|
8
|
+
} from "./chunk-5AXLA4LK.js";
|
|
9
|
+
|
|
10
|
+
// src/card-grid/card-grid.tsx
|
|
11
|
+
import * as React from "react";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
var STEP_MS = 70;
|
|
14
|
+
function CardGrid({ children, min = 300, fit = "fill", align = "stretch", reveal = true, columns = 3, light = true, as: Tag = "div", className, style, ...props }) {
|
|
15
|
+
const ref = React.useRef(null);
|
|
16
|
+
usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);
|
|
17
|
+
const Cell = Tag === "div" ? "div" : "li";
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
Tag,
|
|
20
|
+
{
|
|
21
|
+
ref,
|
|
22
|
+
className: cn("kz-cards", className),
|
|
23
|
+
"data-fit": fit === "fit" ? "" : void 0,
|
|
24
|
+
"data-align": align === "start" ? "start" : void 0,
|
|
25
|
+
style: { "--kz-cards-min": `${min}px`, ...style },
|
|
26
|
+
...props,
|
|
27
|
+
children: React.Children.toArray(children).map((child, i) => {
|
|
28
|
+
const step = Math.min(i % Math.max(columns, 1), 5);
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
Cell,
|
|
31
|
+
{
|
|
32
|
+
className: "kz-cards-cell",
|
|
33
|
+
"data-reveal": reveal ? "" : void 0,
|
|
34
|
+
style: reveal && step ? { "--kz-delay": `${step * STEP_MS}ms` } : void 0,
|
|
35
|
+
children: child
|
|
36
|
+
},
|
|
37
|
+
React.isValidElement(child) && child.key != null ? child.key : i
|
|
38
|
+
);
|
|
39
|
+
})
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
var NO_REF = { current: null };
|
|
44
|
+
export {
|
|
45
|
+
CardGrid
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=card-grid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/card-grid/card-grid.tsx"],"sourcesContent":["// Client (the pointer's light). A responsive grid of cards (blocks.css): one column on a phone, the cells of a row\n// share their height, each card rises once as it enters the viewport — staggered by column — and the pointer carries a\n// light over the card it is on.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { POINTER_LIGHT_TARGET, usePointerLight } from \"../pointer-light/pointer-light\";\n\nconst STEP_MS = 70;\n\nexport type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n /** The cards: one cell each. */\n children: React.ReactNode;\n /**\n * The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.\n * @default 300\n */\n min?: number;\n /**\n * `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.\n * @default \"fill\"\n */\n fit?: \"fill\" | \"fit\";\n /**\n * `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).\n * @default \"stretch\"\n */\n align?: \"stretch\" | \"start\";\n /**\n * The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.\n * @default true\n */\n reveal?: boolean;\n /**\n * The columns the stagger counts (the delay restarts on every row).\n * @default 3\n */\n columns?: number;\n /**\n * The light that follows the pointer over the cards (`[data-kz-light]`).\n * @default true\n */\n light?: boolean;\n /** `ul` when the cards are a list (each cell an `li`). */\n as?: \"div\" | \"ul\" | \"ol\";\n};\n\n/** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */\nexport function CardGrid({ children, min = 300, fit = \"fill\", align = \"stretch\", reveal = true, columns = 3, light = true, as: Tag = \"div\", className, style, ...props }: CardGridProps) {\n const ref = React.useRef<HTMLElement>(null);\n usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);\n const Cell = Tag === \"div\" ? \"div\" : \"li\";\n return (\n <Tag\n ref={ref as React.Ref<never>}\n className={cn(\"kz-cards\", className)}\n data-fit={fit === \"fit\" ? \"\" : undefined}\n data-align={align === \"start\" ? \"start\" : undefined}\n style={{ \"--kz-cards-min\": `${min}px`, ...style } as React.CSSProperties}\n {...props}\n >\n {React.Children.toArray(children).map((child, i) => {\n const step = Math.min(i % Math.max(columns, 1), 5);\n return (\n <Cell\n key={React.isValidElement(child) && child.key != null ? child.key : i}\n className=\"kz-cards-cell\"\n data-reveal={reveal ? \"\" : undefined}\n style={reveal && step ? ({ \"--kz-delay\": `${step * STEP_MS}ms` } as React.CSSProperties) : undefined}\n >\n {child}\n </Cell>\n );\n })}\n </Tag>\n );\n}\n\nconst NO_REF: React.RefObject<HTMLElement | null> = { current: null };\n"],"mappings":";;;;;;;;;;AAGA,YAAY,WAAW;AA6Db;AAxDV,IAAM,UAAU;AAwCT,SAAS,SAAS,EAAE,UAAU,MAAM,KAAK,MAAM,QAAQ,QAAQ,WAAW,SAAS,MAAM,UAAU,GAAG,QAAQ,MAAM,IAAI,MAAM,OAAO,WAAW,OAAO,GAAG,MAAM,GAAkB;AACvL,QAAM,MAAY,aAAoB,IAAI;AAC1C,kBAAgB,QAAQ,MAAM,QAAQ,oBAAoB;AAC1D,QAAM,OAAO,QAAQ,QAAQ,QAAQ;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,YAAU,QAAQ,QAAQ,KAAK;AAAA,MAC/B,cAAY,UAAU,UAAU,UAAU;AAAA,MAC1C,OAAO,EAAE,kBAAkB,GAAG,GAAG,MAAM,GAAG,MAAM;AAAA,MAC/C,GAAG;AAAA,MAEH,UAAM,eAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,MAAM;AAClD,cAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,CAAC;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,eAAa,SAAS,KAAK;AAAA,YAC3B,OAAO,UAAU,OAAQ,EAAE,cAAc,GAAG,OAAO,OAAO,KAAK,IAA4B;AAAA,YAE1F;AAAA;AAAA,UALU,qBAAe,KAAK,KAAK,MAAM,OAAO,OAAO,MAAM,MAAM;AAAA,QAMtE;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAM,SAA8C,EAAE,SAAS,KAAK;","names":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// src/block-link.tsx
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
var isExternal = (href) => /^[a-z][a-z0-9+.-]*:/i.test(href);
|
|
4
|
+
function BlockLink({
|
|
5
|
+
href,
|
|
6
|
+
linkAs: Link = "a",
|
|
7
|
+
external = isExternal(href),
|
|
8
|
+
rel,
|
|
9
|
+
...props
|
|
10
|
+
}) {
|
|
11
|
+
if (external) return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
|
|
12
|
+
const Comp = Link;
|
|
13
|
+
return /* @__PURE__ */ jsx(Comp, { href, ...props });
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export {
|
|
17
|
+
isExternal,
|
|
18
|
+
BlockLink
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=chunk-2AGSO3WH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/block-link.tsx"],"sourcesContent":["// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} {...props} />;\n}\n"],"mappings":";AAkBuB;AAThB,IAAM,aAAa,CAAC,SAAiB,uBAAuB,KAAK,IAAI;AAErE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ,OAAO;AAAA,EACf,WAAW,WAAW,IAAI;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA2G;AACzG,MAAI,SAAU,QAAO,oBAAC,OAAE,MAAY,QAAO,UAAS,KAAK,OAAO,uBAAwB,GAAG,OAAO;AAClG,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAa,GAAG,OAAO;AACtC;","names":[]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/pointer-light/pointer-light.tsx
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
var POINTER_LIGHT_TARGET = "[data-kz-light]";
|
|
7
|
+
function usePointerLight(ref, target = POINTER_LIGHT_TARGET) {
|
|
8
|
+
React.useEffect(() => {
|
|
9
|
+
const group = ref.current;
|
|
10
|
+
if (!group || typeof window.matchMedia !== "function" || !window.matchMedia("(hover: hover) and (prefers-reduced-motion: no-preference)").matches) return;
|
|
11
|
+
const onMove = (e) => {
|
|
12
|
+
const card = e.target?.closest(target);
|
|
13
|
+
if (!card || !group.contains(card)) return;
|
|
14
|
+
const box = card.getBoundingClientRect();
|
|
15
|
+
card.style.setProperty("--kz-pointer-x", `${Math.round(e.clientX - box.left)}px`);
|
|
16
|
+
card.style.setProperty("--kz-pointer-y", `${Math.round(e.clientY - box.top)}px`);
|
|
17
|
+
};
|
|
18
|
+
group.addEventListener("pointermove", onMove, { passive: true });
|
|
19
|
+
return () => group.removeEventListener("pointermove", onMove);
|
|
20
|
+
}, [ref, target]);
|
|
21
|
+
}
|
|
22
|
+
function PointerLight({ target = POINTER_LIGHT_TARGET }) {
|
|
23
|
+
const ref = React.useRef(null);
|
|
24
|
+
const parent = React.useRef(null);
|
|
25
|
+
React.useLayoutEffect(() => {
|
|
26
|
+
parent.current = ref.current?.parentElement ?? null;
|
|
27
|
+
}, []);
|
|
28
|
+
usePointerLight(parent, target);
|
|
29
|
+
return /* @__PURE__ */ jsx("span", { ref, hidden: true });
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export {
|
|
33
|
+
POINTER_LIGHT_TARGET,
|
|
34
|
+
usePointerLight,
|
|
35
|
+
PointerLight
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=chunk-AB5D3KBG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/pointer-light/pointer-light.tsx"],"sourcesContent":["// Client. The light that follows the pointer over the cards of a group (blocks.css `.kz-block-card::after`): one passive\n// pointermove listener on the group writes the pointer's position into the card it is over (`--kz-pointer-x/y`); the\n// card's CSS draws the light. Nothing runs on a touch screen or under reduced motion, nothing loops.\nimport * as React from \"react\";\n\n/** Every card of the page blocks carries it: LinkCard, ArgumentCard. */\nexport const POINTER_LIGHT_TARGET = \"[data-kz-light]\";\n\n/** Lights the cards inside `ref` that match `target`. Returns nothing; the effect cleans itself up. */\nexport function usePointerLight(ref: React.RefObject<HTMLElement | null>, target: string = POINTER_LIGHT_TARGET) {\n React.useEffect(() => {\n const group = ref.current;\n if (!group || typeof window.matchMedia !== \"function\" || !window.matchMedia(\"(hover: hover) and (prefers-reduced-motion: no-preference)\").matches) return;\n const onMove = (e: PointerEvent) => {\n const card = (e.target as Element | null)?.closest<HTMLElement>(target);\n if (!card || !group.contains(card)) return;\n const box = card.getBoundingClientRect();\n card.style.setProperty(\"--kz-pointer-x\", `${Math.round(e.clientX - box.left)}px`);\n card.style.setProperty(\"--kz-pointer-y\", `${Math.round(e.clientY - box.top)}px`);\n };\n group.addEventListener(\"pointermove\", onMove, { passive: true });\n return () => group.removeEventListener(\"pointermove\", onMove);\n }, [ref, target]);\n}\n\nexport type PointerLightProps = {\n /**\n * The cards to light, as a selector inside the parent element.\n * @default \"[data-kz-light]\"\n */\n target?: string;\n};\n\n/**\n * Drop it inside any group of cards (a grid, a list) — it listens on its parent element. Renders an empty, hidden span.\n * CardGrid includes it already.\n */\nexport function PointerLight({ target = POINTER_LIGHT_TARGET }: PointerLightProps) {\n const ref = React.useRef<HTMLSpanElement>(null);\n const parent = React.useRef<HTMLElement | null>(null);\n React.useLayoutEffect(() => {\n parent.current = ref.current?.parentElement ?? null;\n }, []);\n usePointerLight(parent, target);\n return <span ref={ref} hidden />;\n}\n"],"mappings":";;;AAGA,YAAY,WAAW;AAyCd;AAtCF,IAAM,uBAAuB;AAG7B,SAAS,gBAAgB,KAA0C,SAAiB,sBAAsB;AAC/G,EAAM,gBAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,QAAI,CAAC,SAAS,OAAO,OAAO,eAAe,cAAc,CAAC,OAAO,WAAW,4DAA4D,EAAE,QAAS;AACnJ,UAAM,SAAS,CAAC,MAAoB;AAClC,YAAM,OAAQ,EAAE,QAA2B,QAAqB,MAAM;AACtE,UAAI,CAAC,QAAQ,CAAC,MAAM,SAAS,IAAI,EAAG;AACpC,YAAM,MAAM,KAAK,sBAAsB;AACvC,WAAK,MAAM,YAAY,kBAAkB,GAAG,KAAK,MAAM,EAAE,UAAU,IAAI,IAAI,CAAC,IAAI;AAChF,WAAK,MAAM,YAAY,kBAAkB,GAAG,KAAK,MAAM,EAAE,UAAU,IAAI,GAAG,CAAC,IAAI;AAAA,IACjF;AACA,UAAM,iBAAiB,eAAe,QAAQ,EAAE,SAAS,KAAK,CAAC;AAC/D,WAAO,MAAM,MAAM,oBAAoB,eAAe,MAAM;AAAA,EAC9D,GAAG,CAAC,KAAK,MAAM,CAAC;AAClB;AAcO,SAAS,aAAa,EAAE,SAAS,qBAAqB,GAAsB;AACjF,QAAM,MAAY,aAAwB,IAAI;AAC9C,QAAM,SAAe,aAA2B,IAAI;AACpD,EAAM,sBAAgB,MAAM;AAC1B,WAAO,UAAU,IAAI,SAAS,iBAAiB;AAAA,EACjD,GAAG,CAAC,CAAC;AACL,kBAAgB,QAAQ,MAAM;AAC9B,SAAO,oBAAC,UAAK,KAAU,QAAM,MAAC;AAChC;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/glyphs.tsx"],"sourcesContent":["// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n return (\n <svg\n viewBox=\"0 0 24 24\"\n className={className}\n fill={fill ? \"currentColor\" : \"none\"}\n stroke={fill ? \"none\" : \"currentColor\"}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden\n focusable=\"false\"\n >\n {children}\n </svg>\n );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n <Glyph {...p} fill>\n <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n <Glyph {...p} fill>\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n <Glyph {...p}>\n <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n <Glyph {...p}>\n {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <circle cx=\"11\" cy=\"11\" r=\"7\" />\n <path d=\"m20 20-3.5-3.5\" />\n </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M18 6 6 18M6 6l12 12\" />\n </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n <Glyph {...p}>\n <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M20 6 9 17l-5-5\" />\n </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M12 5v14M5 12h14\" />\n </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n <path d=\"M3 10h18M8 3v4M16 3v4\" />\n </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n <path d=\"M14 3v5h5\" />\n </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n <path d=\"M18 3v4h-4M6 21v-4h4\" />\n </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n <path d=\"M4 4v4.5h4.5\" />\n </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n <Glyph {...p}>\n {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n <Glyph {...p}>\n <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M14 4h6v6M20 4l-9 9\" />\n <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <path d=\"M12 4 2.5 20h19L12 4Z\" />\n <path d=\"M12 10v4M12 17.2v.1\" />\n </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n <Glyph {...p}>\n <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n </Glyph>\n);\n"],"mappings":";;;AASI,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,YAAY,CAAC,MACxB,oBAAC,SAAO,GAAG,GAAG,MAAI,MAChB,8BAAC,UAAK,GAAE,kFAAiF,GAC3F;AAEK,IAAM,aAAa,CAAC,MACzB,qBAAC,SAAO,GAAG,GAAG,MAAI,MAChB;AAAA,sBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,KAAI,QAAO,MAAK,IAAG,KAAI;AAAA,EAC/C,oBAAC,UAAK,GAAE,MAAK,GAAE,KAAI,OAAM,KAAI,QAAO,MAAK,IAAG,KAAI;AAAA,GAClD;AAEK,IAAM,cAAc,CAAC,EAAE,OAAO,GAAG,EAAE,MACxC,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,0BAAyB;AAAA,EAChC,QAAQ,oBAAC,UAAK,GAAE,qBAAoB,IAAK,oBAAC,UAAK,GAAE,mDAAkD;AAAA,GACtG;AAEK,IAAM,kBAAkB,CAAC,EAAE,MAAM,GAAG,EAAE,MAC3C,oBAAC,SAAO,GAAG,GACR,iBAAO,oBAAC,UAAK,GAAE,yCAAwC,IAAK,oBAAC,UAAK,GAAE,uCAAsC,GAC7G;AAEK,IAAM,gBAAgB,CAAC,MAC5B,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,EAChD,oBAAC,UAAK,GAAE,gDAA+C;AAAA,GACzD;AAEK,IAAM,WAAW,CAAC,MACvB,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,EAChD,oBAAC,UAAK,GAAE,MAAK,GAAE,MAAK,OAAM,KAAI,QAAO,KAAI,IAAG,KAAI;AAAA,GAClD;AAEK,IAAM,cAAc,CAAC,MAC1B,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,EAC9B,oBAAC,UAAK,GAAE,kBAAiB;AAAA,GAC3B;AAEK,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,wBAAuB,GACjC;AAEK,IAAM,eAAe,CAAC,EAAE,YAAY,QAAQ,GAAG,EAAE,MACtD,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAG,EAAE,MAAM,iBAAiB,OAAO,gBAAgB,IAAI,iBAAiB,MAAM,eAAe,EAAE,SAAS,GAAG,GACnH;AAEK,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAEK,IAAM,YAAY,CAAC,MACxB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,oBAAmB,GAC7B;AAEK,IAAM,gBAAgB,CAAC,MAC5B,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,EAChD,oBAAC,UAAK,GAAE,yBAAwB;AAAA,GAClC;AAEK,IAAM,cAAc,CAAC,MAC1B,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,4BAA2B;AAAA,EACnC,oBAAC,UAAK,GAAE,6CAA4C;AAAA,GACtD;AAEK,IAAM,YAAY,CAAC,MACxB,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,mEAAkE;AAAA,EAC1E,oBAAC,UAAK,GAAE,aAAY;AAAA,GACtB;AAEK,IAAM,cAAc,CAAC,MAC1B,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,sFAAqF;AAAA,EAC7F,oBAAC,YAAO,IAAG,MAAK,IAAG,QAAO,GAAE,OAAM;AAAA,GACpC;AAEK,IAAM,YAAY,CAAC,MACxB,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,iDAAgD;AAAA,EACxD,oBAAC,UAAK,GAAE,wBAAuB;AAAA,GACjC;AAEK,IAAM,aAAa,CAAC,MACzB,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,iCAAgC;AAAA,EACxC,oBAAC,UAAK,GAAE,gBAAe;AAAA,GACzB;AAEK,IAAM,YAAY,CAAC,EAAE,WAAW,GAAG,EAAE,MAC1C,oBAAC,SAAO,GAAG,GACR,wBAAc,cAAc,oBAAC,UAAK,GAAE,iBAAgB,IAAK,cAAc,eAAe,oBAAC,UAAK,GAAE,iBAAgB,IAAK,oBAAC,UAAK,GAAE,6BAA4B,GAC1J;","names":[]}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import {
|
|
2
|
+
SectionBackdrop
|
|
3
|
+
} from "./chunk-XVLWVTQA.js";
|
|
4
|
+
import {
|
|
5
|
+
cn
|
|
6
|
+
} from "./chunk-FJDSLNXK.js";
|
|
7
|
+
|
|
8
|
+
// src/page/page.tsx
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
function Page({ size = "default", as: Tag = "div", className, ...props }) {
|
|
12
|
+
return /* @__PURE__ */ jsx(Tag, { "data-size": size === "default" ? void 0 : size, className: cn("kz-frame", className), ...props });
|
|
13
|
+
}
|
|
14
|
+
function SectionHeading({ id, eyebrow, title, lead, actions, level = 2, size = "md", align = "start", reveal, className, ...props }) {
|
|
15
|
+
const H = level === 2 ? "h2" : "h3";
|
|
16
|
+
return /* @__PURE__ */ jsxs(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
className: cn("kz-heading", className),
|
|
20
|
+
"data-size": size === "md" ? void 0 : size,
|
|
21
|
+
"data-align": align === "start" ? void 0 : align,
|
|
22
|
+
"data-actions": actions ? "" : void 0,
|
|
23
|
+
"data-reveal": reveal ? "" : void 0,
|
|
24
|
+
...props,
|
|
25
|
+
children: [
|
|
26
|
+
eyebrow && /* @__PURE__ */ jsx("p", { className: "kz-eyebrow", children: eyebrow }),
|
|
27
|
+
/* @__PURE__ */ jsx(H, { id, className: "kz-heading-title", children: title }),
|
|
28
|
+
lead && /* @__PURE__ */ jsx("p", { className: "kz-heading-lead", children: lead }),
|
|
29
|
+
actions && /* @__PURE__ */ jsx("div", { className: "kz-heading-actions", children: actions })
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
function Section({
|
|
35
|
+
id,
|
|
36
|
+
eyebrow,
|
|
37
|
+
title,
|
|
38
|
+
lead,
|
|
39
|
+
actions,
|
|
40
|
+
headingSize,
|
|
41
|
+
headingAlign,
|
|
42
|
+
reveal,
|
|
43
|
+
divider,
|
|
44
|
+
spacing = "md",
|
|
45
|
+
size,
|
|
46
|
+
backdrop,
|
|
47
|
+
className,
|
|
48
|
+
children,
|
|
49
|
+
...props
|
|
50
|
+
}) {
|
|
51
|
+
const body = /* @__PURE__ */ jsxs(Page, { size, children: [
|
|
52
|
+
title && /* @__PURE__ */ jsx(SectionHeading, { id, eyebrow, title, lead, actions, size: headingSize, align: headingAlign, reveal }),
|
|
53
|
+
children
|
|
54
|
+
] });
|
|
55
|
+
const shared = {
|
|
56
|
+
"aria-labelledby": title && id ? id : void 0,
|
|
57
|
+
"data-divider": divider ? "" : void 0,
|
|
58
|
+
"data-spacing": spacing === "md" ? void 0 : spacing,
|
|
59
|
+
...props
|
|
60
|
+
};
|
|
61
|
+
if (backdrop) {
|
|
62
|
+
const backdropProps = backdrop === true ? {} : backdrop;
|
|
63
|
+
return /* @__PURE__ */ jsx(SectionBackdrop, { ...backdropProps, ...shared, className: cn("kz-section", className), children: body });
|
|
64
|
+
}
|
|
65
|
+
return /* @__PURE__ */ jsx("section", { ...shared, className: cn("kz-section", className), children: body });
|
|
66
|
+
}
|
|
67
|
+
function Ticks({ children }) {
|
|
68
|
+
const parts = children.split("`");
|
|
69
|
+
return /* @__PURE__ */ jsx(Fragment2, { children: parts.map(
|
|
70
|
+
(part, i) => i % 2 ? /* @__PURE__ */ jsx("code", { className: "kz-ic", children: part }, i) : /* @__PURE__ */ jsx(React.Fragment, { children: part }, i)
|
|
71
|
+
) });
|
|
72
|
+
}
|
|
73
|
+
function Facts({ items, className, ...props }) {
|
|
74
|
+
return /* @__PURE__ */ jsx("ul", { className: cn("kz-facts", className), ...props, children: items.map((fact) => {
|
|
75
|
+
const body = /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
76
|
+
/* @__PURE__ */ jsx("span", { className: "kz-fact-dot", "aria-hidden": true }),
|
|
77
|
+
" ",
|
|
78
|
+
fact.label
|
|
79
|
+
] });
|
|
80
|
+
const tone = fact.tone && fact.tone !== "neutral" ? fact.tone : void 0;
|
|
81
|
+
return /* @__PURE__ */ jsx("li", { children: fact.href ? /* @__PURE__ */ jsx("a", { href: fact.href, target: "_blank", rel: "noopener noreferrer", className: "kz-fact", "data-tone": tone, children: body }) : /* @__PURE__ */ jsx("span", { className: "kz-fact", "data-tone": tone, children: body }) }, fact.label);
|
|
82
|
+
}) });
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
export {
|
|
86
|
+
Page,
|
|
87
|
+
SectionHeading,
|
|
88
|
+
Section,
|
|
89
|
+
Ticks,
|
|
90
|
+
Facts
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=chunk-K3SWZXYT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/page/page.tsx"],"sourcesContent":["// Server-safe. The frame of every page (blocks.css): one width, one pair of gutters, one vertical rhythm — so the\n// navigation, the hero and every section line up on the same edges, at any width.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { SectionBackdrop, type SectionBackdropProps } from \"../section-backdrop/section-backdrop\";\n\nexport type PageSize = \"narrow\" | \"default\" | \"wide\" | \"full\";\n\nexport type PageProps = React.HTMLAttributes<HTMLElement> & {\n /**\n * The width of the content: `default` (72rem, `--kz-page-max`), `narrow` (48rem, a reading column), `wide`\n * (88rem, documentation with a sidebar), `full` (the gutters only).\n * @default \"default\"\n */\n size?: PageSize;\n /** The element: `div` (default), `main`, `header`, `footer`, `section` or `article`. */\n as?: \"div\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"article\";\n};\n\n/** The page frame: centred, at most `--kz-page-max` wide, with the gutters of `--kz-page-gutter` (16 → 32 px). */\nexport function Page({ size = \"default\", as: Tag = \"div\", className, ...props }: PageProps) {\n return <Tag data-size={size === \"default\" ? undefined : size} className={cn(\"kz-frame\", className)} {...props} />;\n}\n\nexport type SectionHeadingProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n /** The id of the title: the section's anchor and its accessible name. */\n id?: string;\n /** A short mono line above the title (the section's subject). */\n eyebrow?: React.ReactNode;\n /** The title. */\n title: React.ReactNode;\n /** One or two sentences under the title. */\n lead?: React.ReactNode;\n /** Actions on the right of the heading (a link to everything, a filter). */\n actions?: React.ReactNode;\n /**\n * The level of the title.\n * @default 2\n */\n level?: 2 | 3;\n /**\n * `md` for a section that argues, `sm` for a section of a reading page.\n * @default \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * `center` for a heading that stands alone above a grid.\n * @default \"start\"\n */\n align?: \"start\" | \"center\";\n /** Rises into place once, as it enters the viewport (`[data-reveal]`, MotionObserver). Never on the first screen. */\n reveal?: boolean;\n};\n\n/** The head of a section: eyebrow (mono, the accent), title, lead — and its actions on the right. */\nexport function SectionHeading({ id, eyebrow, title, lead, actions, level = 2, size = \"md\", align = \"start\", reveal, className, ...props }: SectionHeadingProps) {\n const H = level === 2 ? \"h2\" : \"h3\";\n return (\n <div\n className={cn(\"kz-heading\", className)}\n data-size={size === \"md\" ? undefined : size}\n data-align={align === \"start\" ? undefined : align}\n data-actions={actions ? \"\" : undefined}\n data-reveal={reveal ? \"\" : undefined}\n {...props}\n >\n {eyebrow && <p className=\"kz-eyebrow\">{eyebrow}</p>}\n <H id={id} className=\"kz-heading-title\">\n {title}\n </H>\n {lead && <p className=\"kz-heading-lead\">{lead}</p>}\n {actions && <div className=\"kz-heading-actions\">{actions}</div>}\n </div>\n );\n}\n\nexport type SectionProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The id of the title (and the anchor of the section). Required with a `title`. */\n id?: string;\n /** The heading's eyebrow. */\n eyebrow?: React.ReactNode;\n /** The section's title: an `h2` (a `SectionHeading`), which names the section for assistive technology. */\n title?: React.ReactNode;\n /** The heading's lead. */\n lead?: React.ReactNode;\n /** The heading's actions. */\n actions?: React.ReactNode;\n /**\n * The heading's size: `md` for a page that argues, `sm` for a reading page.\n * @default \"md\"\n */\n headingSize?: \"sm\" | \"md\";\n /**\n * The heading's alignment.\n * @default \"start\"\n */\n headingAlign?: \"start\" | \"center\";\n /** The heading rises into place once (never on the first screen). */\n reveal?: boolean;\n /** A hairline above the section, inside the gutters: the transition between two sections of the same surface. */\n divider?: boolean;\n /**\n * The vertical space above and below: `sm` (a reading page), `md`, `lg` (a page's main moments).\n * @default \"md\"\n */\n spacing?: \"sm\" | \"md\" | \"lg\";\n /**\n * The width of the content.\n * @default \"default\"\n */\n size?: PageSize;\n /** The brand's colour transition behind the section (SectionBackdrop): `true`, or its props (`direction`, `grid`…). */\n backdrop?: boolean | Omit<SectionBackdropProps, \"as\" | \"children\">;\n};\n\n/**\n * A section of a page: full-bleed (its backdrop reaches the edges), its content in the page frame, its heading on top.\n * Sections follow each other on one rhythm; a `divider` or a `backdrop` marks the transition.\n */\nexport function Section({\n id,\n eyebrow,\n title,\n lead,\n actions,\n headingSize,\n headingAlign,\n reveal,\n divider,\n spacing = \"md\",\n size,\n backdrop,\n className,\n children,\n ...props\n}: SectionProps) {\n const body = (\n <Page size={size}>\n {title && <SectionHeading id={id} eyebrow={eyebrow} title={title} lead={lead} actions={actions} size={headingSize} align={headingAlign} reveal={reveal} />}\n {children}\n </Page>\n );\n const shared = {\n \"aria-labelledby\": title && id ? id : undefined,\n \"data-divider\": divider ? \"\" : undefined,\n \"data-spacing\": spacing === \"md\" ? undefined : spacing,\n ...props,\n };\n if (backdrop) {\n const backdropProps = backdrop === true ? {} : backdrop;\n return (\n <SectionBackdrop {...backdropProps} {...shared} className={cn(\"kz-section\", className)}>\n {body}\n </SectionBackdrop>\n );\n }\n return (\n <section {...shared} className={cn(\"kz-section\", className)}>\n {body}\n </section>\n );\n}\n\nexport type TicksProps = {\n /** A sentence where words between backticks are code: \"Every request carries a `requestId`.\" */\n children: string;\n};\n\n/** A sentence of a message catalogue where words between backticks read as code — no markup in the translations. */\nexport function Ticks({ children }: TicksProps) {\n const parts = children.split(\"`\");\n return (\n <>\n {parts.map((part, i) =>\n i % 2 ? (\n <code key={i} className=\"kz-ic\">\n {part}\n </code>\n ) : (\n <React.Fragment key={i}>{part}</React.Fragment>\n ),\n )}\n </>\n );\n}\n\nexport interface Fact {\n /** A few words: `npm 2.5.0`, `Maven Central`, `in progress`. */\n label: string;\n /**\n * `ok` — published, usable today; `wip` — in progress, said honestly; `neutral` — a fact.\n * @default \"neutral\"\n */\n tone?: \"ok\" | \"wip\" | \"neutral\";\n /** Where the fact is proven (a registry page): the fact becomes a link. */\n href?: string;\n}\n\nexport type FactsProps = React.HTMLAttributes<HTMLUListElement> & {\n /** The facts, in reading order. */\n items: readonly Fact[];\n};\n\n/** Compact facts on one line — a dot that says the state, a few mono words. Links open in a new tab. */\nexport function Facts({ items, className, ...props }: FactsProps) {\n return (\n <ul className={cn(\"kz-facts\", className)} {...props}>\n {items.map((fact) => {\n const body = (\n <>\n <span className=\"kz-fact-dot\" aria-hidden /> {fact.label}\n </>\n );\n const tone = fact.tone && fact.tone !== \"neutral\" ? fact.tone : undefined;\n return (\n <li key={fact.label}>\n {fact.href ? (\n <a href={fact.href} target=\"_blank\" rel=\"noopener noreferrer\" className=\"kz-fact\" data-tone={tone}>\n {body}\n </a>\n ) : (\n <span className=\"kz-fact\" data-tone={tone}>\n {body}\n </span>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n"],"mappings":"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","names":["Fragment"]}
|
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/mascots/geometry.ts
|
|
4
|
+
var MASCOT_BIRDS = ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird"];
|
|
5
|
+
var MASCOT_MOODS = ["welcome", "thinking", "success", "empty", "error"];
|
|
6
|
+
var mirror = (d) => d.replace(/(-?\d+(?:\.\d+)?) (-?\d+(?:\.\d+)?)/g, (_, x, y) => `${120 - Number(x)} ${y}`);
|
|
7
|
+
var falconWing = "M29 58 C17 68 19 88 37 86 C31 76 31 66 29 58 Z";
|
|
8
|
+
var pigeonWing = "M36 58 C20 50 16 80 38 84 C34 74 34 66 36 58 Z";
|
|
9
|
+
var BIRDS = {
|
|
10
|
+
falcon: {
|
|
11
|
+
shadow: [60, 110, 26, 3.5],
|
|
12
|
+
legs: ["M51 94 L48 108 M44 108 L52 108", "M69 94 L72 108 M68 108 L76 108"],
|
|
13
|
+
body: "M30 62 C30 42 90 42 90 62 C90 88 78 98 60 98 C42 98 30 88 30 62 Z",
|
|
14
|
+
belly: "M41 66 C41 55 79 55 79 66 C79 82 71 90 60 90 C49 90 41 82 41 66 Z",
|
|
15
|
+
wings: [
|
|
16
|
+
{ d: falconWing, pivot: [29, 58] },
|
|
17
|
+
{ d: mirror(falconWing), pivot: [91, 58] }
|
|
18
|
+
],
|
|
19
|
+
head: { cx: 60, cy: 38, r: 22 },
|
|
20
|
+
details: ["M46 20 L52 10 L56 19 Z", "M74 20 L68 10 L64 19 Z"],
|
|
21
|
+
visor: { x: 41, y: 29, w: 38, h: 13 },
|
|
22
|
+
beak: "M54 45 L66 45 L60 57 Z",
|
|
23
|
+
eyes: { at: [[50, 35.5], [70, 35.5]], white: 0, pupil: 3.2 }
|
|
24
|
+
},
|
|
25
|
+
owl: {
|
|
26
|
+
shadow: [60, 110, 24, 3.5],
|
|
27
|
+
legs: ["M53 100 L51 107 M47 107 L55 107", "M67 100 L69 107 M65 107 L73 107"],
|
|
28
|
+
body: "M28 52 C28 20 92 20 92 52 C92 86 82 102 60 102 C38 102 28 86 28 52 Z",
|
|
29
|
+
belly: "M42 66 C42 52 78 52 78 66 C78 86 72 94 60 94 C48 94 42 86 42 66 Z",
|
|
30
|
+
wings: [
|
|
31
|
+
{ d: "M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z", pivot: [29, 58] },
|
|
32
|
+
{ d: mirror("M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z"), pivot: [91, 58] }
|
|
33
|
+
],
|
|
34
|
+
head: { cx: 60, cy: 42, r: 0 },
|
|
35
|
+
details: ["M31 20 L47 31 L31 41 Z", "M89 20 L73 31 L89 41 Z"],
|
|
36
|
+
beak: "M55 50 L65 50 L60 59 Z",
|
|
37
|
+
eyes: { at: [[47, 41], [73, 41]], white: 10, pupil: 4 }
|
|
38
|
+
},
|
|
39
|
+
duck: {
|
|
40
|
+
shadow: [60, 110, 30, 3.5],
|
|
41
|
+
legs: [],
|
|
42
|
+
back: ["M88 80 C100 76 104 66 96 62 C98 70 94 74 88 74 Z"],
|
|
43
|
+
body: "M26 80 C26 62 94 62 94 80 C94 100 82 106 60 106 C38 106 26 100 26 80 Z",
|
|
44
|
+
belly: "M38 84 C38 72 82 72 82 84 C82 96 74 101 60 101 C46 101 38 96 38 84 Z",
|
|
45
|
+
wings: [
|
|
46
|
+
{ d: "M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z", pivot: [27, 74] },
|
|
47
|
+
{ d: mirror("M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z"), pivot: [93, 74] }
|
|
48
|
+
],
|
|
49
|
+
head: { cx: 60, cy: 42, r: 23 },
|
|
50
|
+
details: ["M57 20 C54 11 63 8 66 14 C62 13 60 16 61 20 Z"],
|
|
51
|
+
glasses: true,
|
|
52
|
+
beak: "M43 51 C43 46 55 45 60 45 C65 45 77 46 77 51 C77 56 66 60 60 60 C54 60 43 56 43 51 Z",
|
|
53
|
+
eyes: { at: [[51, 37], [69, 37]], white: 0, pupil: 2.6 }
|
|
54
|
+
},
|
|
55
|
+
flamingo: {
|
|
56
|
+
shadow: [60, 110, 20, 3],
|
|
57
|
+
legs: ["M56 86 L55 97 L58 108 M53 108 L62 108", "M65 86 L66 108 M62 108 L71 108"],
|
|
58
|
+
body: "M38 70 C38 54 88 54 88 70 C88 86 76 90 62 90 C48 90 38 86 38 70 Z",
|
|
59
|
+
belly: "M46 72 C46 63 80 63 80 72 C80 82 72 85 63 85 C54 85 46 82 46 72 Z",
|
|
60
|
+
wings: [
|
|
61
|
+
{ d: "M42 64 C30 68 32 84 47 84 C43 76 43 70 42 64 Z", pivot: [42, 64] },
|
|
62
|
+
{ d: "M84 64 C96 68 94 84 79 84 C83 76 83 70 84 64 Z", pivot: [84, 64] }
|
|
63
|
+
],
|
|
64
|
+
neck: { d: "M58 60 C58 42 40 34 46 22", width: 7 },
|
|
65
|
+
head: { cx: 48, cy: 18, r: 11 },
|
|
66
|
+
details: [],
|
|
67
|
+
beak: "M38 16 C28 18 29 28 24 33 C33 28 38 23 40 20 Z",
|
|
68
|
+
eyes: { at: [[46, 15]], white: 3.2, pupil: 1.8 }
|
|
69
|
+
},
|
|
70
|
+
pigeon: {
|
|
71
|
+
shadow: [60, 112, 22, 3],
|
|
72
|
+
legs: ["M52 94 L51 99 M48 99 L54 99", "M68 94 L69 99 M66 99 L72 99"],
|
|
73
|
+
back: ["M53 98 L52 103", "M67 98 L68 103", "M30 68 C16 72 14 62 28 56 C17 57 15 49 32 48 Z"],
|
|
74
|
+
body: "M34 64 C34 44 86 44 86 64 C86 86 74 96 60 96 C46 96 34 86 34 64 Z",
|
|
75
|
+
belly: "M43 68 C43 57 77 57 77 68 C77 82 70 88 60 88 C50 88 43 82 43 68 Z",
|
|
76
|
+
wings: [
|
|
77
|
+
{ d: pigeonWing, pivot: [36, 58] },
|
|
78
|
+
{ d: mirror(pigeonWing), pivot: [84, 58] }
|
|
79
|
+
],
|
|
80
|
+
head: { cx: 60, cy: 36, r: 19 },
|
|
81
|
+
details: ["M54 18 C56 12 64 12 66 18 C63 16 57 16 54 18 Z"],
|
|
82
|
+
beak: "M55 41 L65 41 L60 50 Z",
|
|
83
|
+
eyes: { at: [[52, 33], [68, 33]], white: 5, pupil: 2.4 },
|
|
84
|
+
parcel: ["M60 100 L71 105 L60 110 L49 105 Z", "M49 105 L60 110 L60 118 L49 113 Z", "M71 105 L60 110 L60 118 L71 113 Z"]
|
|
85
|
+
},
|
|
86
|
+
/**
|
|
87
|
+
* The lovebird — the inseparable that introduces two people. A plump little parrot: a short tail, a round head
|
|
88
|
+
* with its coloured face (the detail colour), the white eye-rings of the species and a short hooked beak.
|
|
89
|
+
*/
|
|
90
|
+
lovebird: {
|
|
91
|
+
shadow: [60, 110, 23, 3.5],
|
|
92
|
+
legs: ["M53 96 L52 106 M48 106 L56 106", "M67 96 L68 106 M64 106 L72 106"],
|
|
93
|
+
back: ["M74 90 C82 98 88 104 95 103 C91 98 86 91 82 84 Z"],
|
|
94
|
+
body: "M32 66 C32 46 88 46 88 66 C88 90 76 100 60 100 C44 100 32 90 32 66 Z",
|
|
95
|
+
belly: "M42 70 C42 59 78 59 78 70 C78 85 70 92 60 92 C50 92 42 85 42 70 Z",
|
|
96
|
+
wings: [
|
|
97
|
+
{ d: "M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z", pivot: [33, 60] },
|
|
98
|
+
{ d: mirror("M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z"), pivot: [87, 60] }
|
|
99
|
+
],
|
|
100
|
+
head: { cx: 60, cy: 38, r: 21 },
|
|
101
|
+
details: ["M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z"],
|
|
102
|
+
beak: "M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z",
|
|
103
|
+
eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 }
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
var MOOD_PARTS = {
|
|
107
|
+
/** The badge of `success` and `error`, top right. */
|
|
108
|
+
badge: { cx: 98, cy: 22, r: 11 },
|
|
109
|
+
check: "M92.5 22.5 L96.8 26.6 L103.6 18.4",
|
|
110
|
+
bang: { line: "M98 15.5 L98 23.5", dot: [98, 28] },
|
|
111
|
+
/** `thinking`: three dots rising to the right of the head. */
|
|
112
|
+
dots: [
|
|
113
|
+
[88, 26, 2.6],
|
|
114
|
+
[96, 19, 3.2],
|
|
115
|
+
[105, 11, 3.8]
|
|
116
|
+
],
|
|
117
|
+
/** `empty`: an open tray beside the bird. */
|
|
118
|
+
tray: "M90 96 L110 96 L107 108 L93 108 Z",
|
|
119
|
+
/** `success`: two sparkles. */
|
|
120
|
+
sparkles: ["M16 26 L18 31 L23 33 L18 35 L16 40 L14 35 L9 33 L14 31 Z", "M104 52 L105.2 55 L108 56 L105.2 57 L104 60 L102.8 57 L100 56 L102.8 55 Z"]
|
|
121
|
+
};
|
|
122
|
+
var archEye = ([x, y], r) => `M${x - r} ${y + r * 0.45} Q${x} ${y - r * 1.15} ${x + r} ${y + r * 0.45}`;
|
|
123
|
+
var lidEye = ([x, y], r) => `M${x - r} ${y + 0.4} L${x + r} ${y + 0.4}`;
|
|
124
|
+
var upperLid = ([x, y], r) => `M${x - r} ${y} A${r} ${r} 0 0 1 ${x + r} ${y} Z`;
|
|
125
|
+
var brow = ([x, y], r, side) => `M${x - r * 1.1} ${y - r * 1.25 - (side < 0 ? 0 : r * 0.7)} L${x + r * 1.1} ${y - r * 1.5 - (side < 0 ? r * 0.7 : 0)}`;
|
|
126
|
+
var OWN_PALETTES = {
|
|
127
|
+
falcon: { from: "#ff9f00", to: "#ff2a00", wing: "#d84315", detail: "#b4320d", beak: "#ffb300", eye: "#00c8d4" },
|
|
128
|
+
owl: { from: "#a78bfa", to: "#6d28d9", wing: "#7c3aed", detail: "#5b21b6", beak: "#fbbf24", eye: "#1f2937" },
|
|
129
|
+
duck: { from: "#f43f5e", to: "#be123c", wing: "#db2777", detail: "#9f1239", beak: "#fbbf24", eye: "#1f2937" },
|
|
130
|
+
flamingo: { from: "#f9a8d4", to: "#db2777", wing: "#ec4899", detail: "#be185d", beak: "#fbbf24", eye: "#1f2937" },
|
|
131
|
+
pigeon: { from: "#22d3ee", to: "#6366f1", wing: "#a855f7", detail: "#4338ca", beak: "#f59e0b", eye: "#1f2937" },
|
|
132
|
+
lovebird: { from: "#6ee7b7", to: "#059669", wing: "#047857", detail: "#fb7185", beak: "#f97316", eye: "#1f2937" }
|
|
133
|
+
};
|
|
134
|
+
var LIGHT = "#ffffff";
|
|
135
|
+
var SHADE = "#000000";
|
|
136
|
+
var PARCEL = ["#f59e0b", "#d97706", "#b45309"];
|
|
137
|
+
|
|
138
|
+
// src/mascots/mascot.tsx
|
|
139
|
+
import { useId } from "react";
|
|
140
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
141
|
+
var CSS = `
|
|
142
|
+
.kzb-bird { transform-box: view-box; transform-origin: 60px 108px; }
|
|
143
|
+
.kzb-eye { transform-box: fill-box; transform-origin: center; }
|
|
144
|
+
.kzb-wing { transform-box: view-box; }
|
|
145
|
+
[data-animated] .kzb-bird { animation: kzb-bob 3.6s ease-in-out infinite; }
|
|
146
|
+
[data-animated] .kzb-blink { animation: kzb-blink 5.2s ease-in-out infinite; }
|
|
147
|
+
[data-animated][data-mood="welcome"] .kzb-wing-r { animation: kzb-wave 1.1s ease-in-out infinite alternate; }
|
|
148
|
+
[data-animated][data-mood="thinking"] .kzb-dot { animation: kzb-dot 1.5s ease-in-out infinite; }
|
|
149
|
+
[data-animated][data-mood="thinking"] .kzb-dot:nth-child(2) { animation-delay: .2s; }
|
|
150
|
+
[data-animated][data-mood="thinking"] .kzb-dot:nth-child(3) { animation-delay: .4s; }
|
|
151
|
+
[data-animated][data-mood="success"] .kzb-bird { animation: kzb-hop 1.6s cubic-bezier(.3,1.6,.5,1) 1, kzb-bob 3.6s ease-in-out 1.6s infinite; }
|
|
152
|
+
[data-animated][data-mood="success"] .kzb-badge { animation: kzb-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }
|
|
153
|
+
[data-animated][data-mood="success"] .kzb-sparkle { animation: kzb-twinkle 2.4s ease-in-out infinite; }
|
|
154
|
+
[data-animated][data-mood="error"] .kzb-bird { animation: kzb-shake .5s ease-in-out .2s 2, kzb-bob 3.6s ease-in-out 1.2s infinite; }
|
|
155
|
+
[data-animated][data-mood="empty"] .kzb-bird { animation: kzb-sway 5s ease-in-out infinite; }
|
|
156
|
+
.kzb-badge, .kzb-sparkle, .kzb-dot { transform-box: fill-box; transform-origin: center; }
|
|
157
|
+
@keyframes kzb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
|
|
158
|
+
@keyframes kzb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
|
|
159
|
+
@keyframes kzb-wave { from { transform: rotate(-8deg); } to { transform: rotate(-38deg); } }
|
|
160
|
+
@keyframes kzb-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
|
|
161
|
+
@keyframes kzb-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-9px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); } }
|
|
162
|
+
@keyframes kzb-pop { from { transform: scale(0); } to { transform: scale(1); } }
|
|
163
|
+
@keyframes kzb-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
|
|
164
|
+
@keyframes kzb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
|
|
165
|
+
@keyframes kzb-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2deg); } }
|
|
166
|
+
@media (prefers-reduced-motion: reduce) {
|
|
167
|
+
.kzb-bird, .kzb-blink, .kzb-wing-r, .kzb-dot, .kzb-badge, .kzb-sparkle { animation: none !important; }
|
|
168
|
+
}
|
|
169
|
+
`;
|
|
170
|
+
var BRAND = {
|
|
171
|
+
from: "var(--kz-accent-2, var(--kz-accent))",
|
|
172
|
+
to: "var(--kz-accent)",
|
|
173
|
+
wing: "var(--kz-accent)",
|
|
174
|
+
detail: "var(--kz-accent-2, var(--kz-accent))",
|
|
175
|
+
beak: "var(--kz-warning)",
|
|
176
|
+
eye: "var(--kz-text-primary)"
|
|
177
|
+
};
|
|
178
|
+
var OUTLINE = "var(--kz-border-strong, color-mix(in srgb, currentColor 35%, transparent))";
|
|
179
|
+
var SURFACE = "var(--kz-surface-0)";
|
|
180
|
+
function Mascot({ bird = "owl", mood = "welcome", tone = "brand", size = 96, animated = true, title, className, ...props }) {
|
|
181
|
+
const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
|
|
182
|
+
const g = BIRDS[bird];
|
|
183
|
+
const p = tone === "own" ? OWN_PALETTES[bird] : BRAND;
|
|
184
|
+
const body = `url(#kzb-${uid})`;
|
|
185
|
+
const line = { stroke: OUTLINE, strokeWidth: 1.4, strokeLinejoin: "round" };
|
|
186
|
+
const eyeR = g.eyes.white || g.eyes.pupil * 1.2;
|
|
187
|
+
const eyes = g.eyes.at.map((at, i) => {
|
|
188
|
+
const look = mood === "thinking" ? 1.4 : 0;
|
|
189
|
+
if (mood === "success") return /* @__PURE__ */ jsx("path", { d: archEye(at, eyeR * 0.85), stroke: g.visor ? p.eye : OUTLINE, strokeWidth: 2.2, strokeLinecap: "round", fill: "none" }, i);
|
|
190
|
+
if (mood === "empty" && g.eyes.white > 0)
|
|
191
|
+
return /* @__PURE__ */ jsxs("g", { children: [
|
|
192
|
+
/* @__PURE__ */ jsx("circle", { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
|
|
193
|
+
/* @__PURE__ */ jsx("circle", { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
|
|
194
|
+
/* @__PURE__ */ jsx("path", { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
|
|
195
|
+
] }, i);
|
|
196
|
+
if (mood === "empty") return /* @__PURE__ */ jsx("path", { d: lidEye(at, eyeR * 0.8), stroke: g.visor ? p.eye : OUTLINE, strokeWidth: 2.2, strokeLinecap: "round", fill: "none" }, i);
|
|
197
|
+
return /* @__PURE__ */ jsxs("g", { className: "kzb-eye kzb-blink", children: [
|
|
198
|
+
g.eyes.white > 0 && /* @__PURE__ */ jsx("circle", { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
|
|
199
|
+
/* @__PURE__ */ jsx("circle", { cx: at[0] + look, cy: at[1] - look, r: g.eyes.pupil, fill: g.visor ? p.eye : SHADE }),
|
|
200
|
+
g.eyes.white > 0 && /* @__PURE__ */ jsx("circle", { cx: at[0] + look - g.eyes.pupil * 0.35, cy: at[1] - look - g.eyes.pupil * 0.35, r: g.eyes.pupil * 0.35, fill: LIGHT })
|
|
201
|
+
] }, i);
|
|
202
|
+
});
|
|
203
|
+
const [wl, wr] = g.wings;
|
|
204
|
+
return /* @__PURE__ */ jsxs(
|
|
205
|
+
"svg",
|
|
206
|
+
{
|
|
207
|
+
width: size,
|
|
208
|
+
height: size,
|
|
209
|
+
viewBox: "0 0 120 120",
|
|
210
|
+
fill: "none",
|
|
211
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
212
|
+
"data-bird": bird,
|
|
213
|
+
"data-mood": mood,
|
|
214
|
+
"data-animated": animated ? "" : void 0,
|
|
215
|
+
className,
|
|
216
|
+
...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
|
|
217
|
+
...props,
|
|
218
|
+
children: [
|
|
219
|
+
/* @__PURE__ */ jsx("style", { children: CSS }),
|
|
220
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `kzb-${uid}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
221
|
+
/* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: p.from } }),
|
|
222
|
+
/* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: p.to } })
|
|
223
|
+
] }) }),
|
|
224
|
+
/* @__PURE__ */ jsx("ellipse", { cx: g.shadow[0], cy: g.shadow[1], rx: g.shadow[2], ry: g.shadow[3], fill: SHADE, opacity: 0.14 }),
|
|
225
|
+
mood === "empty" && /* @__PURE__ */ jsx("path", { d: MOOD_PARTS.tray, stroke: OUTLINE, strokeWidth: 1.6, strokeDasharray: "3 3", strokeLinejoin: "round" }),
|
|
226
|
+
/* @__PURE__ */ jsxs("g", { className: "kzb-bird", children: [
|
|
227
|
+
g.legs.map((d) => /* @__PURE__ */ jsx("path", { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round" }, d)),
|
|
228
|
+
g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx("path", { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx("path", { d, stroke: OUTLINE, strokeWidth: 1.4 }, d)),
|
|
229
|
+
g.parcel && /* @__PURE__ */ jsx("g", { ...line, children: g.parcel.map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: PARCEL[i] }, d)) }),
|
|
230
|
+
/* @__PURE__ */ jsx("path", { d: g.body, fill: body, ...line }),
|
|
231
|
+
/* @__PURE__ */ jsx("path", { d: g.belly, fill: LIGHT, opacity: 0.28 }),
|
|
232
|
+
[wl, wr].map((w, i) => {
|
|
233
|
+
const turn = mood === "success" ? i === 0 ? 28 : -28 : mood === "welcome" && i === 1 ? -20 : 0;
|
|
234
|
+
return /* @__PURE__ */ jsxs("g", { className: i === 1 ? "kzb-wing kzb-wing-r" : "kzb-wing", style: { transformOrigin: `${w.pivot[0]}px ${w.pivot[1]}px`, transform: turn ? `rotate(${turn}deg)` : void 0 }, children: [
|
|
235
|
+
/* @__PURE__ */ jsx("path", { d: w.d, fill: p.wing, ...line }),
|
|
236
|
+
/* @__PURE__ */ jsx("path", { d: w.d, fill: SHADE, opacity: 0.16 })
|
|
237
|
+
] }, i);
|
|
238
|
+
}),
|
|
239
|
+
g.neck && /* @__PURE__ */ jsx("path", { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round" }),
|
|
240
|
+
g.head.r > 0 && /* @__PURE__ */ jsx("circle", { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
|
|
241
|
+
g.details.map((d) => /* @__PURE__ */ jsx("path", { d, fill: p.detail, ...line }, d)),
|
|
242
|
+
g.visor && /* @__PURE__ */ jsx("rect", { x: g.visor.x, y: g.visor.y, width: g.visor.w, height: g.visor.h, rx: 4, fill: SURFACE, ...line }),
|
|
243
|
+
eyes,
|
|
244
|
+
g.glasses && /* @__PURE__ */ jsxs("g", { stroke: OUTLINE, strokeWidth: 1.3, children: [
|
|
245
|
+
g.eyes.at.map(([x, y]) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 6.5, fill: LIGHT, fillOpacity: 0.12 }, x)),
|
|
246
|
+
/* @__PURE__ */ jsx("path", { d: `M${g.eyes.at[0][0] + 6.5} ${g.eyes.at[0][1]} L${g.eyes.at[1][0] - 6.5} ${g.eyes.at[1][1]}` })
|
|
247
|
+
] }),
|
|
248
|
+
mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */ jsx("path", { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: OUTLINE, strokeWidth: 2, strokeLinecap: "round" }, i)),
|
|
249
|
+
/* @__PURE__ */ jsx("path", { d: g.beak, fill: p.beak, ...line })
|
|
250
|
+
] }),
|
|
251
|
+
mood === "thinking" && /* @__PURE__ */ jsx("g", { children: MOOD_PARTS.dots.map(([cx, cy, r]) => /* @__PURE__ */ jsx("circle", { className: "kzb-dot", cx, cy, r, fill: "var(--kz-text-secondary)" }, cx)) }),
|
|
252
|
+
mood === "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
253
|
+
MOOD_PARTS.sparkles.map((d) => /* @__PURE__ */ jsx("path", { className: "kzb-sparkle", d, fill: p.from }, d)),
|
|
254
|
+
/* @__PURE__ */ jsxs("g", { className: "kzb-badge", children: [
|
|
255
|
+
/* @__PURE__ */ jsx("circle", { cx: MOOD_PARTS.badge.cx, cy: MOOD_PARTS.badge.cy, r: MOOD_PARTS.badge.r, fill: "var(--kz-success)" }),
|
|
256
|
+
/* @__PURE__ */ jsx("path", { d: MOOD_PARTS.check, stroke: SURFACE, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round" })
|
|
257
|
+
] })
|
|
258
|
+
] }),
|
|
259
|
+
mood === "error" && /* @__PURE__ */ jsxs("g", { className: "kzb-badge", children: [
|
|
260
|
+
/* @__PURE__ */ jsx("circle", { cx: MOOD_PARTS.badge.cx, cy: MOOD_PARTS.badge.cy, r: MOOD_PARTS.badge.r, fill: "var(--kz-danger)" }),
|
|
261
|
+
/* @__PURE__ */ jsx("path", { d: MOOD_PARTS.bang.line, stroke: SURFACE, strokeWidth: 2.8, strokeLinecap: "round" }),
|
|
262
|
+
/* @__PURE__ */ jsx("circle", { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: SURFACE })
|
|
263
|
+
] })
|
|
264
|
+
]
|
|
265
|
+
}
|
|
266
|
+
);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
export {
|
|
270
|
+
MASCOT_BIRDS,
|
|
271
|
+
MASCOT_MOODS,
|
|
272
|
+
Mascot
|
|
273
|
+
};
|
|
274
|
+
//# sourceMappingURL=chunk-NOVUREEC.js.map
|