@nanisoft/prism-ui 0.5.1 → 0.7.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/dist/.tsbuildinfo +1 -1
- package/dist/blocks/cta-01/cta.d.ts +66 -6
- package/dist/blocks/cta-01/cta.d.ts.map +1 -1
- package/dist/blocks/cta-01/cta.js +8 -3
- package/dist/blocks/cta-01/index.d.ts +1 -0
- package/dist/blocks/cta-01/index.d.ts.map +1 -1
- package/dist/blocks/feature-grid-01/feature-grid.d.ts +57 -6
- package/dist/blocks/feature-grid-01/feature-grid.d.ts.map +1 -1
- package/dist/blocks/feature-grid-01/feature-grid.js +12 -2
- package/dist/blocks/feature-grid-01/index.d.ts +1 -0
- package/dist/blocks/feature-grid-01/index.d.ts.map +1 -1
- package/dist/blocks/hero-01/hero.d.ts +30 -1
- package/dist/blocks/hero-01/hero.d.ts.map +1 -1
- package/dist/blocks/hero-01/hero.js +14 -2
- package/dist/blocks/index.d.ts +10 -0
- package/dist/blocks/index.d.ts.map +1 -1
- package/dist/blocks/index.js +9 -0
- package/dist/blocks/instrument-panel-01/index.d.ts +3 -0
- package/dist/blocks/instrument-panel-01/index.d.ts.map +1 -0
- package/dist/blocks/instrument-panel-01/index.js +1 -0
- package/dist/blocks/instrument-panel-01/instrument-panel.d.ts +114 -0
- package/dist/blocks/instrument-panel-01/instrument-panel.d.ts.map +1 -0
- package/dist/blocks/instrument-panel-01/instrument-panel.js +64 -0
- package/dist/blocks/logo-strip-01/index.d.ts +3 -0
- package/dist/blocks/logo-strip-01/index.d.ts.map +1 -0
- package/dist/blocks/logo-strip-01/index.js +1 -0
- package/dist/blocks/logo-strip-01/logo-strip.d.ts +84 -0
- package/dist/blocks/logo-strip-01/logo-strip.d.ts.map +1 -0
- package/dist/blocks/logo-strip-01/logo-strip.js +40 -0
- package/dist/blocks/note-grid-01/index.d.ts +3 -0
- package/dist/blocks/note-grid-01/index.d.ts.map +1 -0
- package/dist/blocks/note-grid-01/index.js +1 -0
- package/dist/blocks/note-grid-01/note-grid.d.ts +79 -0
- package/dist/blocks/note-grid-01/note-grid.d.ts.map +1 -0
- package/dist/blocks/note-grid-01/note-grid.js +37 -0
- package/dist/blocks/pricing-01/pricing.js +1 -1
- package/dist/blocks/process-rail-01/index.d.ts +3 -0
- package/dist/blocks/process-rail-01/index.d.ts.map +1 -0
- package/dist/blocks/process-rail-01/index.js +1 -0
- package/dist/blocks/process-rail-01/process-rail.d.ts +99 -0
- package/dist/blocks/process-rail-01/process-rail.d.ts.map +1 -0
- package/dist/blocks/process-rail-01/process-rail.js +58 -0
- package/dist/blocks/product-grid-01/index.d.ts +3 -0
- package/dist/blocks/product-grid-01/index.d.ts.map +1 -0
- package/dist/blocks/product-grid-01/index.js +1 -0
- package/dist/blocks/product-grid-01/product-grid.d.ts +114 -0
- package/dist/blocks/product-grid-01/product-grid.d.ts.map +1 -0
- package/dist/blocks/product-grid-01/product-grid.js +51 -0
- package/dist/blocks/site-footer/index.d.ts +3 -0
- package/dist/blocks/site-footer/index.d.ts.map +1 -0
- package/dist/blocks/site-footer/index.js +1 -0
- package/dist/blocks/site-footer/site-footer.d.ts +135 -0
- package/dist/blocks/site-footer/site-footer.d.ts.map +1 -0
- package/dist/blocks/site-footer/site-footer.js +41 -0
- package/dist/blocks/site-header/index.d.ts +3 -0
- package/dist/blocks/site-header/index.d.ts.map +1 -0
- package/dist/blocks/site-header/index.js +1 -0
- package/dist/blocks/site-header/site-header.d.ts +142 -0
- package/dist/blocks/site-header/site-header.d.ts.map +1 -0
- package/dist/blocks/site-header/site-header.js +46 -0
- package/dist/blocks/stack-grid-01/index.d.ts +3 -0
- package/dist/blocks/stack-grid-01/index.d.ts.map +1 -0
- package/dist/blocks/stack-grid-01/index.js +1 -0
- package/dist/blocks/stack-grid-01/stack-grid.d.ts +118 -0
- package/dist/blocks/stack-grid-01/stack-grid.d.ts.map +1 -0
- package/dist/blocks/stack-grid-01/stack-grid.js +49 -0
- package/dist/blocks/status-ledger-01/index.d.ts +3 -0
- package/dist/blocks/status-ledger-01/index.d.ts.map +1 -0
- package/dist/blocks/status-ledger-01/index.js +1 -0
- package/dist/blocks/status-ledger-01/status-ledger.d.ts +131 -0
- package/dist/blocks/status-ledger-01/status-ledger.d.ts.map +1 -0
- package/dist/blocks/status-ledger-01/status-ledger.js +80 -0
- package/dist/catalog.d.ts.map +1 -1
- package/dist/catalog.js +180 -0
- package/dist/components/index.d.ts +11 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +6 -0
- package/dist/components/ui/card.d.ts +25 -0
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/card.js +25 -0
- package/dist/components/ui/cta-link.d.ts +45 -0
- package/dist/components/ui/cta-link.d.ts.map +1 -0
- package/dist/components/ui/cta-link.js +81 -0
- package/dist/components/ui/diagram.d.ts +154 -0
- package/dist/components/ui/diagram.d.ts.map +1 -0
- package/dist/components/ui/diagram.js +150 -0
- package/dist/components/ui/fact-list.d.ts +90 -0
- package/dist/components/ui/fact-list.d.ts.map +1 -0
- package/dist/components/ui/fact-list.js +38 -0
- package/dist/components/ui/product-mark.d.ts +115 -0
- package/dist/components/ui/product-mark.d.ts.map +1 -0
- package/dist/components/ui/product-mark.js +82 -0
- package/dist/components/ui/product-switcher.d.ts +108 -0
- package/dist/components/ui/product-switcher.d.ts.map +1 -0
- package/dist/components/ui/product-switcher.js +47 -0
- package/dist/components/ui/prose.d.ts +88 -0
- package/dist/components/ui/prose.d.ts.map +1 -0
- package/dist/components/ui/prose.js +53 -0
- package/dist/components/ui/section.d.ts +24 -1
- package/dist/components/ui/section.d.ts.map +1 -1
- package/dist/components/ui/section.js +11 -2
- package/dist/components/ui/slider.d.ts.map +1 -1
- package/dist/components/ui/slider.js +7 -1
- package/dist/index.d.ts +24 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -0
- package/dist/pages/blog-post-page/index.d.ts +174 -0
- package/dist/pages/blog-post-page/index.d.ts.map +1 -0
- package/dist/pages/blog-post-page/index.js +49 -0
- package/dist/pages/docs-shell/docs-shell.d.ts +250 -0
- package/dist/pages/docs-shell/docs-shell.d.ts.map +1 -0
- package/dist/pages/docs-shell/docs-shell.js +197 -0
- package/dist/pages/docs-shell/index.d.ts +3 -0
- package/dist/pages/docs-shell/index.d.ts.map +1 -0
- package/dist/pages/docs-shell/index.js +1 -0
- package/dist/pages/index.d.ts +13 -2
- package/dist/pages/index.d.ts.map +1 -1
- package/dist/pages/index.js +10 -2
- package/dist/pages/not-found-page/index.d.ts +112 -0
- package/dist/pages/not-found-page/index.d.ts.map +1 -0
- package/dist/pages/not-found-page/index.js +46 -0
- package/dist/provider/provider.d.ts +5 -0
- package/dist/provider/provider.d.ts.map +1 -1
- package/dist/provider/provider.js +129 -38
- package/dist/provider/theme-script.d.ts +41 -3
- package/dist/provider/theme-script.d.ts.map +1 -1
- package/dist/provider/theme-script.js +68 -17
- package/dist/styles.css +555 -12
- package/dist/theming/index.d.ts +132 -2
- package/dist/theming/index.d.ts.map +1 -1
- package/dist/theming/index.js +127 -1
- package/package.json +14 -4
|
@@ -1,12 +1,67 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
1
2
|
import { type HeadingLevel } from '../../components/ui/section';
|
|
3
|
+
/**
|
|
4
|
+
* One closing action.
|
|
5
|
+
*
|
|
6
|
+
* The destination is required rather than optional, and that is the whole point
|
|
7
|
+
* of the type: `href` was already declared and never rendered, so the type said
|
|
8
|
+
* the control could navigate while the markup produced a `<button>` with no
|
|
9
|
+
* handler. An action with no handler navigates nothing, so there is no arm of
|
|
10
|
+
* this union that omits the destination and no optional one either. A caller
|
|
11
|
+
* whose control is not a link at all uses `Cta01`'s `actionSlot`.
|
|
12
|
+
*/
|
|
13
|
+
export type Cta01Action = {
|
|
14
|
+
label: string;
|
|
15
|
+
/** Where the action goes. Rendered as a native anchor's `href`. */
|
|
16
|
+
href: string;
|
|
17
|
+
/**
|
|
18
|
+
* Opens the destination in a new browsing context, which defaults the link
|
|
19
|
+
* relationship to `noopener noreferrer`. Declared rather than inferred: Prism
|
|
20
|
+
* does not parse the destination, and a cross-origin URL is not by itself a
|
|
21
|
+
* reason to open a tab.
|
|
22
|
+
*/
|
|
23
|
+
newTab?: boolean;
|
|
24
|
+
variant?: 'default' | 'secondary' | 'outline';
|
|
25
|
+
};
|
|
2
26
|
export type Cta01Props = {
|
|
3
27
|
title: string;
|
|
4
28
|
description?: string;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
29
|
+
/**
|
|
30
|
+
* The one action this band carries. Omit it for a closing statement that asks
|
|
31
|
+
* for nothing, and use `actionSlot` for a control that is not a call to
|
|
32
|
+
* action.
|
|
33
|
+
*/
|
|
34
|
+
action?: Cta01Action;
|
|
35
|
+
/**
|
|
36
|
+
* A slot for a control the block does not own, such as a client router's link
|
|
37
|
+
* or a menu. This is what a call to action with no destination becomes: a slot
|
|
38
|
+
* the consumer fills, rather than a control the block renders and cannot make
|
|
39
|
+
* work.
|
|
40
|
+
*/
|
|
41
|
+
actionSlot?: ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* The second action, rendered beside the first at outline weight. It is a prop
|
|
44
|
+
* rather than a second `action` array because `action` is the one this Block
|
|
45
|
+
* styles as the closing ask and a second action in the same weight is two
|
|
46
|
+
* closing asks; a reader who has to choose between two equally-weighted
|
|
47
|
+
* buttons has been given a menu where a page wanted a decision.
|
|
48
|
+
*
|
|
49
|
+
* Three of the four NaniSoft sites render two actions in their closing band
|
|
50
|
+
* and all four do, and all four wrote the pair by hand, so each one re-decided
|
|
51
|
+
* the gap, the order and the weight between them.
|
|
52
|
+
*/
|
|
53
|
+
secondaryAction?: Cta01Action;
|
|
54
|
+
/**
|
|
55
|
+
* The line under the actions: the footnote, the caveat, the sentence that
|
|
56
|
+
* qualifies the ask. Three of the four sites render one, and each wrote it by
|
|
57
|
+
* hand.
|
|
58
|
+
*
|
|
59
|
+
* A `ReactNode` rather than a string because the honest line is sometimes not
|
|
60
|
+
* one sentence: three of the four carry a link inside it, and a string prop
|
|
61
|
+
* would force a caller to compose a paragraph to say "this is in development,
|
|
62
|
+
* here is where to watch it".
|
|
63
|
+
*/
|
|
64
|
+
note?: ReactNode;
|
|
10
65
|
/** Heading level for the headline. See `HeadingLevel`. */
|
|
11
66
|
headingLevel?: HeadingLevel;
|
|
12
67
|
};
|
|
@@ -17,7 +72,12 @@ export type Cta01Props = {
|
|
|
17
72
|
* pitch ("Start with one block, keep the tokens") and a hardcoded "Browse the
|
|
18
73
|
* catalog" button, both of which described the library rather than whatever
|
|
19
74
|
* product installed the block.
|
|
75
|
+
*
|
|
76
|
+
* The action renders a `CtaLink`, so it is a native anchor announced as a link
|
|
77
|
+
* rather than a button announced as a command, and its destination is a required
|
|
78
|
+
* prop. The only rendered change from the button this replaces is the element and
|
|
79
|
+
* the `href` it now carries.
|
|
20
80
|
*/
|
|
21
|
-
export declare function Cta01({ title, description, action, headingLevel }: Cta01Props): import("react").JSX.Element;
|
|
81
|
+
export declare function Cta01({ title, description, action, actionSlot, secondaryAction, note, headingLevel, }: Cta01Props): import("react").JSX.Element;
|
|
22
82
|
export default Cta01;
|
|
23
83
|
//# sourceMappingURL=cta.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cta.d.ts","sourceRoot":"","sources":["../../../src/blocks/cta-01/cta.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"cta.d.ts","sourceRoot":"","sources":["../../../src/blocks/cta-01/cta.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExE;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,EACN,UAAU,EACV,eAAe,EACf,IAAI,EACJ,YAAmB,GACpB,EAAE,UAAU,+BAyDZ;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ArrowRight } from 'lucide-react';
|
|
3
|
-
import {
|
|
3
|
+
import { CtaLink } from '../../components/ui/cta-link';
|
|
4
4
|
import { Section } from '../../components/ui/section';
|
|
5
5
|
/**
|
|
6
6
|
* A closing call to action on a filled primary surface.
|
|
@@ -9,8 +9,13 @@ import { Section } from '../../components/ui/section';
|
|
|
9
9
|
* pitch ("Start with one block, keep the tokens") and a hardcoded "Browse the
|
|
10
10
|
* catalog" button, both of which described the library rather than whatever
|
|
11
11
|
* product installed the block.
|
|
12
|
+
*
|
|
13
|
+
* The action renders a `CtaLink`, so it is a native anchor announced as a link
|
|
14
|
+
* rather than a button announced as a command, and its destination is a required
|
|
15
|
+
* prop. The only rendered change from the button this replaces is the element and
|
|
16
|
+
* the `href` it now carries.
|
|
12
17
|
*/
|
|
13
|
-
export function Cta01({ title, description, action, headingLevel = 'h2' }) {
|
|
18
|
+
export function Cta01({ title, description, action, actionSlot, secondaryAction, note, headingLevel = 'h2', }) {
|
|
14
19
|
/*
|
|
15
20
|
* The same mechanism `SectionHeading` uses for its own `as` prop, which this
|
|
16
21
|
* block cannot borrow: its copy sits on a filled `bg-primary` surface, where
|
|
@@ -19,6 +24,6 @@ export function Cta01({ title, description, action, headingLevel = 'h2' }) {
|
|
|
19
24
|
* rather than the heading level being the reason the markup stays hardcoded.
|
|
20
25
|
*/
|
|
21
26
|
const Heading = headingLevel;
|
|
22
|
-
return (_jsx(Section, { className: "py-20", children: _jsxs("div", { className: "bg-primary text-primary-foreground relative overflow-hidden rounded-2xl px-8 py-16 text-center", children: [_jsx("div", { "aria-hidden": true, className: "from-primary-foreground/15 pointer-events-none absolute inset-0 bg-gradient-to-tr to-transparent" }), _jsxs("div", { className: "relative flex flex-col items-center gap-6", children: [_jsx(Heading, { className: "max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }), description ? (_jsx("p", { className: "max-w-xl text-lg text-pretty opacity-90", children: description })) : null, action ? (_jsxs(
|
|
27
|
+
return (_jsx(Section, { className: "py-20", children: _jsxs("div", { className: "bg-primary text-primary-foreground relative overflow-hidden rounded-2xl px-8 py-16 text-center", children: [_jsx("div", { "aria-hidden": true, className: "from-primary-foreground/15 pointer-events-none absolute inset-0 bg-gradient-to-tr to-transparent" }), _jsxs("div", { className: "relative flex flex-col items-center gap-6", children: [_jsx(Heading, { className: "max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }), description ? (_jsx("p", { className: "max-w-xl text-lg text-pretty opacity-90", children: description })) : null, action ? (_jsxs("div", { className: "flex flex-col items-center gap-3 sm:flex-row", children: [_jsxs(CtaLink, { size: "lg", variant: action.variant ?? 'secondary', href: action.href, newTab: action.newTab, className: "group", children: [action.label, _jsx(ArrowRight, { className: "motion-safe:transition-transform size-4 group-hover:translate-x-0.5" })] }), secondaryAction ? (_jsx(CtaLink, { size: "lg", variant: secondaryAction.variant ?? 'outline', href: secondaryAction.href, newTab: secondaryAction.newTab, children: secondaryAction.label })) : null] })) : actionSlot ? (actionSlot) : null, note ? (_jsx("p", { className: "max-w-2xl text-pretty text-sm opacity-80", children: note })) : null] })] }) }));
|
|
23
28
|
}
|
|
24
29
|
export default Cta01;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/cta-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/cta-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA"}
|
|
@@ -1,27 +1,78 @@
|
|
|
1
1
|
import type { LucideIcon } from 'lucide-react';
|
|
2
2
|
import { type HeadingLevel } from '../../components/ui/section';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* One feature in an icon-bearing grid.
|
|
5
|
+
*
|
|
6
|
+
* The icon is required, not optional, because this tile is always rendered: an
|
|
7
|
+
* optional icon here would compile and then paint an empty accent tile, which is
|
|
8
|
+
* the safe-at-render condition an optional prop turns unsafe.
|
|
9
|
+
*/
|
|
10
|
+
export type IconFeature = {
|
|
4
11
|
icon: LucideIcon;
|
|
5
12
|
title: string;
|
|
6
13
|
body: string;
|
|
7
14
|
};
|
|
8
|
-
|
|
15
|
+
/** One feature in a bare grid, which renders no tile and so asks for no icon. */
|
|
16
|
+
export type BareFeature = {
|
|
17
|
+
title: string;
|
|
18
|
+
body: string;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* A feature, in whichever of the two shapes the grid's `variant` admits.
|
|
22
|
+
*
|
|
23
|
+
* The requirement is expressed as a union discriminated on `variant` rather than
|
|
24
|
+
* as `icon?: LucideIcon` on one type, because only a union lets the type system
|
|
25
|
+
* see the exception. A single type cannot require an icon in one variant and not
|
|
26
|
+
* in the other: it can only be required in both, which makes the bare variant
|
|
27
|
+
* impossible, or optional in both, which makes the icon variant's empty tile
|
|
28
|
+
* possible. The discriminator is the same `variant` value the Block branches on
|
|
29
|
+
* at render, so the two cannot disagree.
|
|
30
|
+
*/
|
|
31
|
+
export type Feature = IconFeature | BareFeature;
|
|
32
|
+
type FeatureGrid01CommonProps = {
|
|
9
33
|
eyebrow?: string;
|
|
10
34
|
title?: string;
|
|
11
35
|
description?: string;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Puts the feature's position in the grid on the card, zero-padded to two
|
|
38
|
+
* digits, above the title.
|
|
39
|
+
*
|
|
40
|
+
* The ordinal is rendered from the card's position rather than taken from the
|
|
41
|
+
* feature, because a list that carries its own numbers is a list whose numbers
|
|
42
|
+
* can disagree with its order after a sort, a filter or an insertion. All four
|
|
43
|
+
* NaniSoft sites render one: three of them as `01` in the mono face on every
|
|
44
|
+
* card, and the fourth on a set of pillars as well as on the grid.
|
|
45
|
+
*
|
|
46
|
+
* It is off by default. A number on a card is a claim that the set is a
|
|
47
|
+
* sequence, and a grid of features is usually a set.
|
|
48
|
+
*/
|
|
49
|
+
numbered?: boolean;
|
|
15
50
|
/** Heading level for the section title. See `HeadingLevel`. */
|
|
16
51
|
headingLevel?: HeadingLevel;
|
|
17
52
|
};
|
|
53
|
+
/**
|
|
54
|
+
* The `icon` arm is the one an omitted `variant` selects, so the default and
|
|
55
|
+
* the required icon live on the same arm: a consumer who writes nothing about
|
|
56
|
+
* the variant gets the tiles and the icons they imply.
|
|
57
|
+
*/
|
|
58
|
+
export type FeatureGrid01Props = FeatureGrid01CommonProps & ({
|
|
59
|
+
variant?: 'icon';
|
|
60
|
+
features: IconFeature[];
|
|
61
|
+
} | {
|
|
62
|
+
variant: 'bare';
|
|
63
|
+
features: BareFeature[];
|
|
64
|
+
});
|
|
18
65
|
/**
|
|
19
66
|
* A grid of short feature blurbs.
|
|
20
67
|
*
|
|
21
68
|
* The feature list is a prop. It previously hardcoded the catalog's own selling
|
|
22
69
|
* points under the heading "Why this catalog", so an installed block argued for
|
|
23
70
|
* the library inside the consumer's product.
|
|
71
|
+
*
|
|
72
|
+
* The `icon` variant renders a tile per feature and requires an icon per feature.
|
|
73
|
+
* The `bare` variant renders no tile and requires no icon, and the type says so
|
|
74
|
+
* rather than the renderer finding out.
|
|
24
75
|
*/
|
|
25
|
-
export declare function FeatureGrid01(
|
|
76
|
+
export declare function FeatureGrid01(props: FeatureGrid01Props): import("react").JSX.Element;
|
|
26
77
|
export default FeatureGrid01;
|
|
27
78
|
//# sourceMappingURL=feature-grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feature-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-grid-01/feature-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExF,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"feature-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-grid-01/feature-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExF;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,iFAAiF;AACjF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,WAAW,CAAA;AAE/C,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,CACI;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,GAC7C;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,CAC/C,CAAA;AAEH;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BA0CtD;AAED,eAAe,aAAa,CAAA"}
|
|
@@ -7,8 +7,18 @@ import { Section, SectionHeading } from '../../components/ui/section';
|
|
|
7
7
|
* The feature list is a prop. It previously hardcoded the catalog's own selling
|
|
8
8
|
* points under the heading "Why this catalog", so an installed block argued for
|
|
9
9
|
* the library inside the consumer's product.
|
|
10
|
+
*
|
|
11
|
+
* The `icon` variant renders a tile per feature and requires an icon per feature.
|
|
12
|
+
* The `bare` variant renders no tile and requires no icon, and the type says so
|
|
13
|
+
* rather than the renderer finding out.
|
|
10
14
|
*/
|
|
11
|
-
export function FeatureGrid01(
|
|
12
|
-
|
|
15
|
+
export function FeatureGrid01(props) {
|
|
16
|
+
const { eyebrow, title, description, numbered = false, headingLevel = 'h2' } = props;
|
|
17
|
+
// Read off `props` rather than destructured, so the two stay one value: taking
|
|
18
|
+
// `variant` and `features` apart is what would let the arm the type checked
|
|
19
|
+
// and the arm the renderer followed come to be two different ones.
|
|
20
|
+
const variant = props.variant ?? 'icon';
|
|
21
|
+
const { features } = props;
|
|
22
|
+
return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { className: "grid gap-6 sm:grid-cols-2", children: features.map((feature, index) => (_jsx(Card, { className: "gap-4 py-6", children: _jsxs(CardHeader, { children: [numbered ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: String(index + 1).padStart(2, '0') })) : null, variant === 'icon' && 'icon' in feature ? (_jsx("span", { className: "bg-accent text-accent-foreground mb-2 flex size-10 items-center justify-center rounded-lg", children: _jsx(feature.icon, { className: "size-5" }) })) : null, _jsx(CardTitle, { children: feature.title }), _jsx(CardDescription, { children: feature.body })] }) }, feature.title))) })] }));
|
|
13
23
|
}
|
|
14
24
|
export default FeatureGrid01;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-grid-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-grid-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACvD,YAAY,EACV,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,WAAW,GACZ,MAAM,gBAAgB,CAAA"}
|
|
@@ -15,6 +15,24 @@ export type Hero01Props = {
|
|
|
15
15
|
title: string;
|
|
16
16
|
description?: string;
|
|
17
17
|
actions?: HeroAction[];
|
|
18
|
+
/**
|
|
19
|
+
* Whether the copy is centered in the band or set flush to the left edge of
|
|
20
|
+
* the container.
|
|
21
|
+
*
|
|
22
|
+
* This is the hero's own alignment and not `SectionHeading`'s, because the two
|
|
23
|
+
* are not the same decision: a left-aligned hero is nearly always the left half
|
|
24
|
+
* of a two-column band with a panel or an instrument beside it, and that column
|
|
25
|
+
* is narrower than the container, so the alignment has to be the hero's before
|
|
26
|
+
* the container can be anything. Three of the four NaniSoft sites compose a
|
|
27
|
+
* left-aligned hero, each beside a panel, and each wrote the alignment by hand
|
|
28
|
+
* because this Block was the centered form only.
|
|
29
|
+
*
|
|
30
|
+
* It has no visual effect on its own, which is the point: it aligns the copy
|
|
31
|
+
* inside whatever width it is given.
|
|
32
|
+
*
|
|
33
|
+
* @defaultValue 'center'
|
|
34
|
+
*/
|
|
35
|
+
align?: 'center' | 'left';
|
|
18
36
|
/**
|
|
19
37
|
* Heading level for the title. Defaults to `h2` because a block is composed,
|
|
20
38
|
* not a page: it installs into a consumer's layout and renders
|
|
@@ -25,6 +43,17 @@ export type Hero01Props = {
|
|
|
25
43
|
*/
|
|
26
44
|
headingLevel?: HeadingLevel;
|
|
27
45
|
};
|
|
28
|
-
|
|
46
|
+
/**
|
|
47
|
+
* A centered marketing hero with an optional eyebrow, a headline, a supporting
|
|
48
|
+
* line and up to two actions.
|
|
49
|
+
*
|
|
50
|
+
* The copy and the actions are props, and the Block ships none of either. It
|
|
51
|
+
* previously shipped nothing of its own here and the remaining thing worth saying
|
|
52
|
+
* is the alignment: `align` is this Block's own prop rather than a pass-through of
|
|
53
|
+
* `SectionHeading`'s, because a left-aligned hero is nearly always one column of a
|
|
54
|
+
* two-column band and that column is narrower than the container, so the alignment
|
|
55
|
+
* has to be decided before the container is anything.
|
|
56
|
+
*/
|
|
57
|
+
export declare function Hero01({ eyebrow, title, description, actions, align, headingLevel, }: Hero01Props): import("react").JSX.Element;
|
|
29
58
|
export default Hero01;
|
|
30
59
|
//# sourceMappingURL=hero.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../src/blocks/hero-01/hero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../src/blocks/hero-01/hero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;CACxD,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACzB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAY,EACZ,KAAgB,EAChB,YAAmB,GACpB,EAAE,WAAW,+BAkDb;AAED,eAAe,MAAM,CAAA"}
|
|
@@ -2,8 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { ArrowRight } from 'lucide-react';
|
|
3
3
|
import { Button } from '../../components/ui/button';
|
|
4
4
|
import { Section, SectionHeading } from '../../components/ui/section';
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
import { cn } from '../../lib/utils';
|
|
6
|
+
/**
|
|
7
|
+
* A centered marketing hero with an optional eyebrow, a headline, a supporting
|
|
8
|
+
* line and up to two actions.
|
|
9
|
+
*
|
|
10
|
+
* The copy and the actions are props, and the Block ships none of either. It
|
|
11
|
+
* previously shipped nothing of its own here and the remaining thing worth saying
|
|
12
|
+
* is the alignment: `align` is this Block's own prop rather than a pass-through of
|
|
13
|
+
* `SectionHeading`'s, because a left-aligned hero is nearly always one column of a
|
|
14
|
+
* two-column band and that column is narrower than the container, so the alignment
|
|
15
|
+
* has to be decided before the container is anything.
|
|
16
|
+
*/
|
|
17
|
+
export function Hero01({ eyebrow, title, description, actions = [], align = 'center', headingLevel = 'h2', }) {
|
|
18
|
+
return (_jsxs(Section, { className: "relative overflow-hidden", children: [_jsx("div", { "aria-hidden": true, className: "from-primary/5 pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b to-transparent" }), _jsxs("div", { "data-slot": "hero-01-copy", className: cn('flex flex-col gap-10', align === 'center' ? 'items-center text-center' : 'items-start text-left'), children: [eyebrow ? (_jsx("span", { className: "bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs font-medium", children: eyebrow })) : null, _jsx(SectionHeading, { as: headingLevel, align: align, title: title, description: description }), actions.length ? (_jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: actions.map((action, index) => (
|
|
7
19
|
// Positional, for the same reason as `pricing-01`'s feature list:
|
|
8
20
|
// the label is display content, and two actions may share one.
|
|
9
21
|
// Safe here because the list is static and never reordered.
|
package/dist/blocks/index.d.ts
CHANGED
|
@@ -15,4 +15,14 @@ export { DataTable01 } from './data-table-01';
|
|
|
15
15
|
export { SettingsPanel01 } from './settings-panel-01';
|
|
16
16
|
export { AuthForm01 } from './auth-form-01';
|
|
17
17
|
export { AppShell01 } from './app-shell-01';
|
|
18
|
+
export { ProcessRail01 } from './process-rail-01';
|
|
19
|
+
export { StatusLedger01, STATUS_TIERS } from './status-ledger-01';
|
|
20
|
+
export type { StatusTier } from './status-ledger-01';
|
|
21
|
+
export { ProductGrid01 } from './product-grid-01';
|
|
22
|
+
export { StackGrid01 } from './stack-grid-01';
|
|
23
|
+
export { LogoStrip01 } from './logo-strip-01';
|
|
24
|
+
export { NoteGrid01 } from './note-grid-01';
|
|
25
|
+
export { InstrumentPanel01 } from './instrument-panel-01';
|
|
26
|
+
export { SiteHeader } from './site-header';
|
|
27
|
+
export { SiteFooter } from './site-footer';
|
|
18
28
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjE,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA"}
|
package/dist/blocks/index.js
CHANGED
|
@@ -15,3 +15,12 @@ export { DataTable01 } from './data-table-01';
|
|
|
15
15
|
export { SettingsPanel01 } from './settings-panel-01';
|
|
16
16
|
export { AuthForm01 } from './auth-form-01';
|
|
17
17
|
export { AppShell01 } from './app-shell-01';
|
|
18
|
+
export { ProcessRail01 } from './process-rail-01';
|
|
19
|
+
export { StatusLedger01, STATUS_TIERS } from './status-ledger-01';
|
|
20
|
+
export { ProductGrid01 } from './product-grid-01';
|
|
21
|
+
export { StackGrid01 } from './stack-grid-01';
|
|
22
|
+
export { LogoStrip01 } from './logo-strip-01';
|
|
23
|
+
export { NoteGrid01 } from './note-grid-01';
|
|
24
|
+
export { InstrumentPanel01 } from './instrument-panel-01';
|
|
25
|
+
export { SiteHeader } from './site-header';
|
|
26
|
+
export { SiteFooter } from './site-footer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/instrument-panel-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC/D,YAAY,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { InstrumentPanel01, default } from './instrument-panel';
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The state a panel's title bar claims about what is inside it.
|
|
4
|
+
*
|
|
5
|
+
* Three, and none of them is a fifth: `neutral` says nothing, `live` says the
|
|
6
|
+
* content is updating now, and `paused` says it is not. A fourth state such as
|
|
7
|
+
* `error` or `stale` is a claim about a specific system's health, and a panel
|
|
8
|
+
* that shipped one would be making a claim about every consumer's data on their
|
|
9
|
+
* behalf.
|
|
10
|
+
*/
|
|
11
|
+
export type PanelState = 'neutral' | 'live' | 'paused';
|
|
12
|
+
/**
|
|
13
|
+
* The props an InstrumentPanel01 takes.
|
|
14
|
+
*
|
|
15
|
+
* The content is a slot and the frame is the Block. A panel that took a prop per
|
|
16
|
+
* kind of instrument would be four panels, and an instrument - a graph, a chart,
|
|
17
|
+
* a table, a canvas, a piece of application-owned markup - is the one thing in
|
|
18
|
+
* this system that Prism cannot draw, because drawing it is the application's job
|
|
19
|
+
* and its data is the application's own.
|
|
20
|
+
*/
|
|
21
|
+
export type InstrumentPanel01Props = {
|
|
22
|
+
/**
|
|
23
|
+
* What the panel shows, in one phrase: "the estate, as one graph", "the loop,
|
|
24
|
+
* live". It is the panel's title and the only visible text the Block adds, so
|
|
25
|
+
* it is required.
|
|
26
|
+
*/
|
|
27
|
+
label: string;
|
|
28
|
+
/**
|
|
29
|
+
* The state the title bar claims about the content. `neutral` renders a quiet
|
|
30
|
+
* dot and no words; `live` and `paused` require `stateLabel` with them, because
|
|
31
|
+
* the words are what a reader is told and the dot is only what a reader sees.
|
|
32
|
+
*
|
|
33
|
+
* @defaultValue 'neutral'
|
|
34
|
+
*/
|
|
35
|
+
state?: PanelState;
|
|
36
|
+
/**
|
|
37
|
+
* The words for the state, in the product's own vocabulary. Required whenever
|
|
38
|
+
* `state` is `live` or `paused`: "live view", "paused", "snapshotting" and
|
|
39
|
+
* "verified" are four different claims about four different systems, and none
|
|
40
|
+
* of them is Prism's to choose.
|
|
41
|
+
*/
|
|
42
|
+
stateLabel?: string;
|
|
43
|
+
/**
|
|
44
|
+
* A slot on the right of the title bar, for a control the panel does not own: a
|
|
45
|
+
* range selector, a pause button, a link to the full view. A slot rather than a
|
|
46
|
+
* prop, because every one of those is application state.
|
|
47
|
+
*/
|
|
48
|
+
actions?: ReactNode;
|
|
49
|
+
/**
|
|
50
|
+
* The instrument. Any node the consumer composes: a graph, a chart, a table, a
|
|
51
|
+
* canvas, a placeholder in a static export. The Block draws the frame and the
|
|
52
|
+
* bar and nothing else.
|
|
53
|
+
*/
|
|
54
|
+
children: ReactNode;
|
|
55
|
+
/**
|
|
56
|
+
* The line under the instrument, for what a reader needs to know before
|
|
57
|
+
* trusting it: where the data came from, how fresh it is, what is not shown.
|
|
58
|
+
*/
|
|
59
|
+
footnote?: ReactNode;
|
|
60
|
+
/**
|
|
61
|
+
* A caption for the panel as a whole, published as the frame's accessible name
|
|
62
|
+
* and as no visible text. It is how a reader navigating by figure knows which
|
|
63
|
+
* figure they have landed on.
|
|
64
|
+
*/
|
|
65
|
+
caption?: string;
|
|
66
|
+
/**
|
|
67
|
+
* Layout only, exactly as on every Component. Changing a Prism-owned visual
|
|
68
|
+
* property from here is prohibited.
|
|
69
|
+
*/
|
|
70
|
+
className?: string;
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* A bordered instrument panel with a titled bar: the frame a live view of
|
|
74
|
+
* something is shown in, beside the copy that explains it.
|
|
75
|
+
*
|
|
76
|
+
* Three of the four NaniSoft sites compose this as the right half of their hero,
|
|
77
|
+
* and each one wrote the same four things by hand: a bordered panel, a bar across
|
|
78
|
+
* the top with a small state dot on the left, the name of the view in the middle
|
|
79
|
+
* and something on the right, the instrument below, and a footnote under it. Each
|
|
80
|
+
* also gave the panel a definite height, because an instrument whose height is
|
|
81
|
+
* whatever its content is makes the hero beside it jump while it loads.
|
|
82
|
+
*
|
|
83
|
+
* **The panel owns the frame, never the instrument.** What goes inside is
|
|
84
|
+
* whatever the consumer composed, and that is not a limitation: an instrument is
|
|
85
|
+
* the one thing in this system Prism cannot draw, because it is a view of the
|
|
86
|
+
* consumer's data and every consumer's data is a different drawing. A panel that
|
|
87
|
+
* took a prop per instrument kind would be four panels and would still not cover
|
|
88
|
+
* the fifth consumer to write their own.
|
|
89
|
+
*
|
|
90
|
+
* The state dot is `aria-hidden` and the words beside it are not. All three sites
|
|
91
|
+
* that draw a dot write the state in words next to it, and that is the rule here:
|
|
92
|
+
* a dot is a shape, and a reader who cannot see `success` has learned nothing from
|
|
93
|
+
* it. `stateLabel` is therefore required whenever the state is `live` or `paused`,
|
|
94
|
+
* and the Block throws without it rather than shipping a state a reader can only
|
|
95
|
+
* see.
|
|
96
|
+
*
|
|
97
|
+
* The bar is a `Section`-width row rather than a page-width one, because a panel
|
|
98
|
+
* is a column and a column that runs the page's width is not a column. The frame
|
|
99
|
+
* carries `shadow-sm`, the resting surface step, and no more: a panel is a card
|
|
100
|
+
* with an instrument in it, and the only element in this system that means
|
|
101
|
+
* *lifted* is the one with a border in the pack's primary hue, which this is not.
|
|
102
|
+
*
|
|
103
|
+
* The three states are `neutral`, `live` and `paused`, and there is no fourth. A
|
|
104
|
+
* state such as `error` or `stale` is a claim about a specific system's health,
|
|
105
|
+
* and a panel that shipped one would be making that claim about every consumer's
|
|
106
|
+
* data.
|
|
107
|
+
*
|
|
108
|
+
* It is a server Component. It holds no state and imports no client code, so a
|
|
109
|
+
* consumer that puts a client instrument inside it pays for the instrument and not
|
|
110
|
+
* for the frame.
|
|
111
|
+
*/
|
|
112
|
+
export declare function InstrumentPanel01({ label, state, stateLabel, actions, children, footnote, caption, className, }: InstrumentPanel01Props): import("react").JSX.Element;
|
|
113
|
+
export default InstrumentPanel01;
|
|
114
|
+
//# sourceMappingURL=instrument-panel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"instrument-panel.d.ts","sourceRoot":"","sources":["../../../src/blocks/instrument-panel-01/instrument-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;AAiBtD;;;;;;;;GAQG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAiB,EACjB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,sBAAsB,+BA2CxB;AAED,eAAe,iBAAiB,CAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../../lib/utils';
|
|
3
|
+
/**
|
|
4
|
+
* The dot each state draws.
|
|
5
|
+
*
|
|
6
|
+
* All three are `aria-hidden`, and the state is announced in words beside them
|
|
7
|
+
* rather than by the colour: a live dot is a shape a reader who cannot see
|
|
8
|
+
* `success` has not been told anything, and the three sites that draw one all
|
|
9
|
+
* write the words next to it. That is the rule this reproduces, and it is why
|
|
10
|
+
* `stateLabel` is required whenever `state` is set to anything but `neutral`.
|
|
11
|
+
*/
|
|
12
|
+
const STATE_DOT = {
|
|
13
|
+
neutral: 'bg-muted-foreground',
|
|
14
|
+
live: 'bg-success',
|
|
15
|
+
paused: 'bg-warning',
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* A bordered instrument panel with a titled bar: the frame a live view of
|
|
19
|
+
* something is shown in, beside the copy that explains it.
|
|
20
|
+
*
|
|
21
|
+
* Three of the four NaniSoft sites compose this as the right half of their hero,
|
|
22
|
+
* and each one wrote the same four things by hand: a bordered panel, a bar across
|
|
23
|
+
* the top with a small state dot on the left, the name of the view in the middle
|
|
24
|
+
* and something on the right, the instrument below, and a footnote under it. Each
|
|
25
|
+
* also gave the panel a definite height, because an instrument whose height is
|
|
26
|
+
* whatever its content is makes the hero beside it jump while it loads.
|
|
27
|
+
*
|
|
28
|
+
* **The panel owns the frame, never the instrument.** What goes inside is
|
|
29
|
+
* whatever the consumer composed, and that is not a limitation: an instrument is
|
|
30
|
+
* the one thing in this system Prism cannot draw, because it is a view of the
|
|
31
|
+
* consumer's data and every consumer's data is a different drawing. A panel that
|
|
32
|
+
* took a prop per instrument kind would be four panels and would still not cover
|
|
33
|
+
* the fifth consumer to write their own.
|
|
34
|
+
*
|
|
35
|
+
* The state dot is `aria-hidden` and the words beside it are not. All three sites
|
|
36
|
+
* that draw a dot write the state in words next to it, and that is the rule here:
|
|
37
|
+
* a dot is a shape, and a reader who cannot see `success` has learned nothing from
|
|
38
|
+
* it. `stateLabel` is therefore required whenever the state is `live` or `paused`,
|
|
39
|
+
* and the Block throws without it rather than shipping a state a reader can only
|
|
40
|
+
* see.
|
|
41
|
+
*
|
|
42
|
+
* The bar is a `Section`-width row rather than a page-width one, because a panel
|
|
43
|
+
* is a column and a column that runs the page's width is not a column. The frame
|
|
44
|
+
* carries `shadow-sm`, the resting surface step, and no more: a panel is a card
|
|
45
|
+
* with an instrument in it, and the only element in this system that means
|
|
46
|
+
* *lifted* is the one with a border in the pack's primary hue, which this is not.
|
|
47
|
+
*
|
|
48
|
+
* The three states are `neutral`, `live` and `paused`, and there is no fourth. A
|
|
49
|
+
* state such as `error` or `stale` is a claim about a specific system's health,
|
|
50
|
+
* and a panel that shipped one would be making that claim about every consumer's
|
|
51
|
+
* data.
|
|
52
|
+
*
|
|
53
|
+
* It is a server Component. It holds no state and imports no client code, so a
|
|
54
|
+
* consumer that puts a client instrument inside it pays for the instrument and not
|
|
55
|
+
* for the frame.
|
|
56
|
+
*/
|
|
57
|
+
export function InstrumentPanel01({ label, state = 'neutral', stateLabel, actions, children, footnote, caption, className, }) {
|
|
58
|
+
if (state !== 'neutral' && !stateLabel) {
|
|
59
|
+
throw new Error(`InstrumentPanel01: the panel state is '${state}' and no stateLabel was passed, so the state would ` +
|
|
60
|
+
'be a dot a reader can only see. Pass the words you mean, or use the neutral state.');
|
|
61
|
+
}
|
|
62
|
+
return (_jsxs("figure", { "data-slot": "instrument-panel", "data-state": state, "aria-label": caption, className: cn('bg-card flex w-full flex-col gap-0 rounded-xl border shadow-sm', className), children: [_jsxs("div", { "data-slot": "instrument-panel-bar", className: "border-border text-muted-foreground flex items-center gap-3 border-b px-4 py-2 text-xs", children: [_jsx("span", { "aria-hidden": true, "data-state": state, className: cn('inline-block size-2 shrink-0 rounded-full', STATE_DOT[state]) }), _jsx("span", { className: "truncate font-medium", children: label }), stateLabel ? _jsx("span", { className: "truncate", children: stateLabel }) : null, actions ? _jsx("span", { className: "ms-auto flex shrink-0 items-center gap-2", children: actions }) : null] }), _jsx("div", { "data-slot": "instrument-panel-body", className: "min-h-0 flex-1 px-4 py-3", children: children }), footnote ? (_jsx("figcaption", { "data-slot": "instrument-panel-footnote", className: "text-muted-foreground border-border border-t px-4 py-2 text-xs", children: footnote })) : null] }));
|
|
63
|
+
}
|
|
64
|
+
export default InstrumentPanel01;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/logo-strip-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACnD,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LogoStrip01, default } from './logo-strip';
|