@silverpoint/core 0.2.0 → 0.6.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 +4 -0
- package/dist/catalog.d.ts +97 -0
- package/dist/catalog.js +8002 -0
- package/dist/catalog.js.map +1 -0
- package/dist/chunk-KFBSQH5G.js +34 -0
- package/dist/chunk-KFBSQH5G.js.map +1 -0
- package/dist/chunk-OLYKR5PS.js +632 -0
- package/dist/chunk-OLYKR5PS.js.map +1 -0
- package/dist/chunk-PD4MD7JU.js +170 -0
- package/dist/chunk-PD4MD7JU.js.map +1 -0
- package/dist/dashboard-demos.d.ts +2 -1
- package/dist/index.d.ts +10 -55
- package/dist/index.js +36 -793
- package/dist/index.js.map +1 -1
- package/dist/model-CLhtoG75.d.ts +53 -0
- package/dist/{types-D1hjElfL.d.ts → props-Dq8FC8GG.d.ts} +369 -143
- package/dist/types-B81k-s9_.d.ts +148 -0
- package/dist/ui-demos.d.ts +17 -0
- package/dist/ui-demos.js +129 -0
- package/dist/ui-demos.js.map +1 -0
- package/dist/ui.d.ts +545 -0
- package/dist/ui.js +716 -0
- package/dist/ui.js.map +1 -0
- package/package.json +19 -1
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { t as GroundRef, u as SubstrateName, q as InkMode, v as ProviderConfig } from './props-Dq8FC8GG.js';
|
|
2
|
+
|
|
3
|
+
/** The three container breakpoints; their widths are fixed (TD DD-014). */
|
|
4
|
+
type DashboardBreakpoint = 'sm' | 'md' | 'lg';
|
|
5
|
+
/** A value that may differ per breakpoint; a bare number applies to all three. */
|
|
6
|
+
type PerBreakpoint<T> = T | Partial<Record<DashboardBreakpoint, T>>;
|
|
7
|
+
/** Serialisable layout (REQ-201). No functions, no DOM, no chart references. */
|
|
8
|
+
interface DashboardLayout {
|
|
9
|
+
/** Columns per breakpoint. Default `{ sm: 1, md: 2, lg: 4 }` (REQ-208). */
|
|
10
|
+
columns?: PerBreakpoint<number>;
|
|
11
|
+
/** Height of one row unit, in px, card chrome included. Default `240`. */
|
|
12
|
+
rowHeight?: number;
|
|
13
|
+
/** Gap between cells, in px. Default `16`. */
|
|
14
|
+
gap?: number;
|
|
15
|
+
/** Cells in reading order (REQ-203). Omitted: every child, span 1. */
|
|
16
|
+
cells?: readonly DashboardCellLayout[];
|
|
17
|
+
}
|
|
18
|
+
interface DashboardCellLayout {
|
|
19
|
+
/** Matches `DashboardCell`'s `cell` prop; unique within the dashboard (REQ-205). */
|
|
20
|
+
id: string;
|
|
21
|
+
/** Default `1`. Clamped to the breakpoint's columns with `SP014` (REQ-204). */
|
|
22
|
+
colSpan?: PerBreakpoint<number>;
|
|
23
|
+
/** Default `1`. */
|
|
24
|
+
rowSpan?: PerBreakpoint<number>;
|
|
25
|
+
}
|
|
26
|
+
/** Link on a category key across the dashboard's charts (REQ-216). */
|
|
27
|
+
interface DashboardLink {
|
|
28
|
+
/** The datum field whose value is matched, e.g. `'hour'`. */
|
|
29
|
+
key: string;
|
|
30
|
+
}
|
|
31
|
+
/** Name is required by the type: `title` or `label` (REQ-214). */
|
|
32
|
+
type DashboardName = {
|
|
33
|
+
title: string;
|
|
34
|
+
label?: string;
|
|
35
|
+
} | {
|
|
36
|
+
title?: undefined;
|
|
37
|
+
label: string;
|
|
38
|
+
};
|
|
39
|
+
type DashboardProps = DashboardName & {
|
|
40
|
+
/** Stable identifier; seeds of unnamed charts derive from it (REQ-209). Required. */
|
|
41
|
+
id: string;
|
|
42
|
+
layout?: DashboardLayout;
|
|
43
|
+
/** Long description, exposed as the region's description (REQ-214). */
|
|
44
|
+
description?: string;
|
|
45
|
+
/** Heading level of `title`. Default `2`. */
|
|
46
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
47
|
+
/** Width in px used for nominal cell boxes on the server and at hydration (REQ-207). Default `1200`. */
|
|
48
|
+
ssrWidth?: number;
|
|
49
|
+
/** Linked interaction (REQ-216); client entry points only. */
|
|
50
|
+
link?: DashboardLink;
|
|
51
|
+
/** Inherited by every chart inside, below the chart's own prop (REQ-212). */
|
|
52
|
+
ground?: GroundRef;
|
|
53
|
+
substrate?: SubstrateName;
|
|
54
|
+
mode?: InkMode;
|
|
55
|
+
locale?: string;
|
|
56
|
+
className?: string;
|
|
57
|
+
};
|
|
58
|
+
interface DashboardCellProps {
|
|
59
|
+
/** The layout cell this child fills. Omitted: next in source order, span 1. */
|
|
60
|
+
cell?: string;
|
|
61
|
+
}
|
|
62
|
+
/** A cell's spans at every breakpoint. */
|
|
63
|
+
type ResolvedSpan = Readonly<Record<DashboardBreakpoint, {
|
|
64
|
+
readonly col: number;
|
|
65
|
+
readonly row: number;
|
|
66
|
+
}>>;
|
|
67
|
+
/** The layout with every default applied and every per-breakpoint value expanded (internal surface). */
|
|
68
|
+
interface ResolvedLayout {
|
|
69
|
+
readonly columns: Readonly<Record<DashboardBreakpoint, number>>;
|
|
70
|
+
readonly rowHeight: number;
|
|
71
|
+
readonly gap: number;
|
|
72
|
+
/** The layout's own cells, in its order; children are matched to them by `resolveDashboard`. */
|
|
73
|
+
readonly cells: readonly {
|
|
74
|
+
readonly id: string;
|
|
75
|
+
readonly span: ResolvedSpan;
|
|
76
|
+
}[];
|
|
77
|
+
}
|
|
78
|
+
/** The resolved dashboard (internal surface, API Spec §2). */
|
|
79
|
+
interface DashboardModel {
|
|
80
|
+
readonly id: string;
|
|
81
|
+
/** In reading order. */
|
|
82
|
+
readonly cells: readonly ResolvedCell[];
|
|
83
|
+
/** The CSS custom properties of the wrapper, e.g. `--sp-dashboard-columns-md: 2`. */
|
|
84
|
+
readonly style: Readonly<Record<string, string>>;
|
|
85
|
+
}
|
|
86
|
+
interface ResolvedCell {
|
|
87
|
+
/** The layout cell's id; for a child placed in source order, its source index. */
|
|
88
|
+
readonly id: string;
|
|
89
|
+
/** The child this cell holds: its index in `childCells`, so the adapter emits it here (I-11). */
|
|
90
|
+
readonly child: number;
|
|
91
|
+
/** Derived chart id: `${dashboard.id}--${cell.id}` (REQ-209). */
|
|
92
|
+
readonly chartId: string;
|
|
93
|
+
readonly span: ResolvedSpan;
|
|
94
|
+
/** Outer box at `ssrWidth`, 2 decimals (REQ-002, REQ-206). */
|
|
95
|
+
readonly nominal: {
|
|
96
|
+
readonly width: number;
|
|
97
|
+
readonly height: number;
|
|
98
|
+
};
|
|
99
|
+
/** The cell's CSS custom properties, e.g. `--sp-cell-col-lg: 2`. */
|
|
100
|
+
readonly style: Readonly<Record<string, string>>;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* What a cell hands its chart (TD §3.3): the derived id, the nominal box and the configuration the
|
|
104
|
+
* dashboard sets. Plain data, so it crosses a React Server Components boundary as a prop.
|
|
105
|
+
*/
|
|
106
|
+
interface DashboardCellContext {
|
|
107
|
+
readonly chartId: string;
|
|
108
|
+
readonly box: {
|
|
109
|
+
readonly width: number;
|
|
110
|
+
readonly height: number;
|
|
111
|
+
};
|
|
112
|
+
/** Only the keys the dashboard sets; the chart's own props and then the provider come around it. */
|
|
113
|
+
readonly config: Readonly<ProviderConfig>;
|
|
114
|
+
}
|
|
115
|
+
/** Everything an adapter writes for a dashboard: attributes, texts and cells, all from the core (Art. 2). */
|
|
116
|
+
interface DashboardView {
|
|
117
|
+
readonly model: DashboardModel;
|
|
118
|
+
readonly section: {
|
|
119
|
+
readonly className: string;
|
|
120
|
+
readonly substrate: SubstrateName;
|
|
121
|
+
/** The heading's id, when there is a title. */
|
|
122
|
+
readonly labelledby?: string;
|
|
123
|
+
readonly describedby?: string;
|
|
124
|
+
/** `aria-label`, when only `label` names the dashboard. */
|
|
125
|
+
readonly label?: string;
|
|
126
|
+
readonly style: Readonly<Record<string, string>>;
|
|
127
|
+
};
|
|
128
|
+
readonly heading?: {
|
|
129
|
+
readonly level: 2 | 3 | 4 | 5 | 6;
|
|
130
|
+
readonly id: string;
|
|
131
|
+
readonly text: string;
|
|
132
|
+
};
|
|
133
|
+
readonly description?: {
|
|
134
|
+
readonly id: string;
|
|
135
|
+
readonly text: string;
|
|
136
|
+
};
|
|
137
|
+
/** In reading order. */
|
|
138
|
+
readonly cells: readonly {
|
|
139
|
+
/** Index of the child this cell holds. */
|
|
140
|
+
readonly child: number;
|
|
141
|
+
/** The chart's title id: `aria-labelledby` of the `article` (REQ-214). */
|
|
142
|
+
readonly labelledby: string;
|
|
143
|
+
readonly style: Readonly<Record<string, string>>;
|
|
144
|
+
readonly context: DashboardCellContext;
|
|
145
|
+
}[];
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export type { DashboardProps as D, PerBreakpoint as P, ResolvedLayout as R, DashboardBreakpoint as a, DashboardLayout as b, DashboardModel as c, DashboardView as d, DashboardCellContext as e, DashboardCellLayout as f, DashboardCellProps as g, DashboardLink as h, ResolvedCell as i, ResolvedSpan as j };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The props of one demo state: the component's own props (`Sp<Name>Props`), plus `value` for a
|
|
3
|
+
* value component and `content` for the text it holds. Plain data; each adapter binds it.
|
|
4
|
+
*/
|
|
5
|
+
type UiDemoProps = Readonly<Record<string, unknown> & {
|
|
6
|
+
id: string;
|
|
7
|
+
}>;
|
|
8
|
+
/** Demo states per component slug, in the catalog's order (Data Model §4). */
|
|
9
|
+
type UiDemos = Readonly<Record<string, Readonly<Record<string, UiDemoProps>>>>;
|
|
10
|
+
/**
|
|
11
|
+
* The reference states of the 17 components, drawn from the concept for `0.3.0` (feature-002
|
|
12
|
+
* `concept.png`): one per declared state of `UI_COMPONENTS` (45), shared by the fixtures, the
|
|
13
|
+
* example apps' UI page and the documentation. Frozen (I-9). Cards hold text only (C-5).
|
|
14
|
+
*/
|
|
15
|
+
declare const UI_DEMOS: UiDemos;
|
|
16
|
+
|
|
17
|
+
export { UI_DEMOS, type UiDemoProps, type UiDemos };
|
package/dist/ui-demos.js
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
// src/ui/demo.ts
|
|
2
|
+
function deepFreeze(value) {
|
|
3
|
+
if (value !== null && typeof value === "object") {
|
|
4
|
+
for (const inner of Object.values(value)) deepFreeze(inner);
|
|
5
|
+
Object.freeze(value);
|
|
6
|
+
}
|
|
7
|
+
return value;
|
|
8
|
+
}
|
|
9
|
+
var periods = [
|
|
10
|
+
{ key: "day", label: "Day" },
|
|
11
|
+
{ key: "week", label: "Week" },
|
|
12
|
+
{ key: "month", label: "Month" },
|
|
13
|
+
{ key: "year", label: "Year" }
|
|
14
|
+
];
|
|
15
|
+
var grounds = [
|
|
16
|
+
{ key: "silverpoint", label: "silverpoint" },
|
|
17
|
+
{ key: "cyanotype", label: "cyanotype" }
|
|
18
|
+
];
|
|
19
|
+
var tabs = [
|
|
20
|
+
{ key: "overview", label: "Overview" },
|
|
21
|
+
{ key: "traffic", label: "Traffic" },
|
|
22
|
+
{ key: "errors", label: "Errors" },
|
|
23
|
+
{ key: "settings", label: "Settings" }
|
|
24
|
+
];
|
|
25
|
+
var steps = [
|
|
26
|
+
{ key: "install", title: "Install" },
|
|
27
|
+
{ key: "import", title: "Import" },
|
|
28
|
+
{ key: "configure", title: "Configure" },
|
|
29
|
+
{ key: "publish", title: "Publish" }
|
|
30
|
+
];
|
|
31
|
+
function withIds(demos) {
|
|
32
|
+
const out = {};
|
|
33
|
+
for (const [slug, states] of Object.entries(demos)) {
|
|
34
|
+
out[slug] = {};
|
|
35
|
+
for (const [state, props] of Object.entries(states)) out[slug][state] = { id: `${slug}--${state}`, ...props };
|
|
36
|
+
}
|
|
37
|
+
return deepFreeze(out);
|
|
38
|
+
}
|
|
39
|
+
var UI_DEMOS = /* @__PURE__ */ withIds({
|
|
40
|
+
button: {
|
|
41
|
+
default: { content: "Default" },
|
|
42
|
+
primary: { content: "Primary", variant: "primary" },
|
|
43
|
+
danger: { content: "Delete", variant: "danger" },
|
|
44
|
+
disabled: { content: "Disabled", disabled: true }
|
|
45
|
+
},
|
|
46
|
+
input: {
|
|
47
|
+
empty: { label: "Search charts", placeholder: "Search charts\u2026", type: "search", name: "q", value: "" },
|
|
48
|
+
filled: { label: "City", name: "city", value: "Caracas" },
|
|
49
|
+
invalid: { label: "City", name: "city", value: "Caracas", invalid: true, message: "Required: pick a city" },
|
|
50
|
+
disabled: { label: "City", name: "city", value: "Caracas", disabled: true }
|
|
51
|
+
},
|
|
52
|
+
checkbox: {
|
|
53
|
+
unchecked: { label: "Legend", name: "legend", value: false },
|
|
54
|
+
checked: { label: "Baseline", name: "baseline", value: true },
|
|
55
|
+
indeterminate: { label: "All series", name: "all", value: false, indeterminate: true },
|
|
56
|
+
disabled: { label: "Baseline", name: "baseline", value: true, disabled: true }
|
|
57
|
+
},
|
|
58
|
+
"radio-group": {
|
|
59
|
+
selected: { label: "Ground", name: "ground", items: grounds, value: "silverpoint", orientation: "horizontal" },
|
|
60
|
+
"disabled-item": {
|
|
61
|
+
label: "Ground",
|
|
62
|
+
name: "ground",
|
|
63
|
+
items: [grounds[0], { ...grounds[1], disabled: true }],
|
|
64
|
+
value: "silverpoint",
|
|
65
|
+
orientation: "horizontal"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
switch: {
|
|
69
|
+
off: { label: "Linked hover", name: "linked", value: false },
|
|
70
|
+
on: { label: "Precision", name: "precision", value: true },
|
|
71
|
+
disabled: { label: "Precision", name: "precision", value: true, disabled: true }
|
|
72
|
+
},
|
|
73
|
+
slider: {
|
|
74
|
+
marks: { label: "Volume", name: "volume", value: 30, marks: [0, 25, 50, 75, 100] },
|
|
75
|
+
disabled: { label: "Volume", name: "volume", value: 30, disabled: true }
|
|
76
|
+
},
|
|
77
|
+
rate: {
|
|
78
|
+
three: { label: "Quality", name: "quality", value: 3, count: 5 },
|
|
79
|
+
"read-only": { label: "Quality", name: "quality", value: 3, count: 5, readOnly: true }
|
|
80
|
+
},
|
|
81
|
+
segmented: {
|
|
82
|
+
first: { label: "Period", name: "period", items: periods, value: "day" },
|
|
83
|
+
middle: { label: "Period", name: "period", items: periods, value: "week" }
|
|
84
|
+
},
|
|
85
|
+
tabs: {
|
|
86
|
+
first: { label: "Views", items: tabs, value: "overview" },
|
|
87
|
+
"disabled-tab": { label: "Views", items: tabs.map((t) => t.key === "settings" ? { ...t, disabled: true } : t), value: "traffic" }
|
|
88
|
+
},
|
|
89
|
+
steps: {
|
|
90
|
+
current: { label: "Release", items: steps, current: 2 },
|
|
91
|
+
error: { label: "Release", items: steps.map((s) => s.key === "configure" ? { ...s, status: "error" } : s), current: 2 }
|
|
92
|
+
},
|
|
93
|
+
card: {
|
|
94
|
+
plain: { content: "Hits per hour rose through the afternoon and eased at night." },
|
|
95
|
+
titled: { title: "Revenue", extra: "Q3", content: "128 thousands, up 6.4 on the quarter." }
|
|
96
|
+
},
|
|
97
|
+
tag: {
|
|
98
|
+
"tone-1": { content: "draft", tone: 1 },
|
|
99
|
+
closable: { content: "review", tone: 3, closable: true }
|
|
100
|
+
},
|
|
101
|
+
badge: {
|
|
102
|
+
count: { content: "Inbox", count: 12 },
|
|
103
|
+
dot: { content: "Alerts", dot: true },
|
|
104
|
+
overflow: { content: "Mentions", count: 120, max: 99 }
|
|
105
|
+
},
|
|
106
|
+
divider: {
|
|
107
|
+
plain: {},
|
|
108
|
+
text: { text: "or" }
|
|
109
|
+
},
|
|
110
|
+
progress: {
|
|
111
|
+
line: { label: "Upload", value: 40 },
|
|
112
|
+
circle: { label: "Coverage", value: 72, shape: "circle" },
|
|
113
|
+
indeterminate: { label: "Loading" }
|
|
114
|
+
},
|
|
115
|
+
alert: {
|
|
116
|
+
info: { kind: "info", title: "New ground available", content: "cyanotype ships in 0.2.0." },
|
|
117
|
+
success: { kind: "success", title: "Published", content: "Every package reached npm." },
|
|
118
|
+
warning: { kind: "warning", title: "Contrast check", content: "One ink is close to 4.5:1 on ochre." },
|
|
119
|
+
error: { kind: "error", title: "Build failed", content: "ui.css is over its 24 KB budget." }
|
|
120
|
+
},
|
|
121
|
+
skeleton: {
|
|
122
|
+
paragraph: { lines: 3 },
|
|
123
|
+
avatar: { lines: 3, avatar: true }
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
export { UI_DEMOS };
|
|
128
|
+
//# sourceMappingURL=ui-demos.js.map
|
|
129
|
+
//# sourceMappingURL=ui-demos.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ui/demo.ts"],"names":[],"mappings":"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","file":"ui-demos.js","sourcesContent":["import type { StepItem, UiItem } from './types';\n\n/**\n * The props of one demo state: the component's own props (`Sp<Name>Props`), plus `value` for a\n * value component and `content` for the text it holds. Plain data; each adapter binds it.\n */\nexport type UiDemoProps = Readonly<Record<string, unknown> & { id: string }>;\n\n/** Demo states per component slug, in the catalog's order (Data Model §4). */\nexport type UiDemos = Readonly<Record<string, Readonly<Record<string, UiDemoProps>>>>;\n\nfunction deepFreeze<T>(value: T): T {\n if (value !== null && typeof value === 'object') {\n for (const inner of Object.values(value)) deepFreeze(inner);\n Object.freeze(value);\n }\n return value;\n}\n\nconst periods: UiItem[] = [\n { key: 'day', label: 'Day' },\n { key: 'week', label: 'Week' },\n { key: 'month', label: 'Month' },\n { key: 'year', label: 'Year' },\n];\nconst grounds: UiItem[] = [\n { key: 'silverpoint', label: 'silverpoint' },\n { key: 'cyanotype', label: 'cyanotype' },\n];\nconst tabs: UiItem[] = [\n { key: 'overview', label: 'Overview' },\n { key: 'traffic', label: 'Traffic' },\n { key: 'errors', label: 'Errors' },\n { key: 'settings', label: 'Settings' },\n];\nconst steps: StepItem[] = [\n { key: 'install', title: 'Install' },\n { key: 'import', title: 'Import' },\n { key: 'configure', title: 'Configure' },\n { key: 'publish', title: 'Publish' },\n];\n\n/** Every state's props, keyed `<slug>` → `<state>`; each carries its fixture id `<slug>--<state>`. */\nfunction withIds(demos: Record<string, Record<string, Record<string, unknown>>>): UiDemos {\n const out: Record<string, Record<string, UiDemoProps>> = {};\n for (const [slug, states] of Object.entries(demos)) {\n out[slug] = {};\n for (const [state, props] of Object.entries(states)) out[slug][state] = { id: `${slug}--${state}`, ...props };\n }\n return deepFreeze(out);\n}\n\n/**\n * The reference states of the 17 components, drawn from the concept for `0.3.0` (feature-002\n * `concept.png`): one per declared state of `UI_COMPONENTS` (45), shared by the fixtures, the\n * example apps' UI page and the documentation. Frozen (I-9). Cards hold text only (C-5).\n */\nexport const UI_DEMOS: UiDemos = /* @__PURE__ */ withIds({\n button: {\n default: { content: 'Default' },\n primary: { content: 'Primary', variant: 'primary' },\n danger: { content: 'Delete', variant: 'danger' },\n disabled: { content: 'Disabled', disabled: true },\n },\n input: {\n empty: { label: 'Search charts', placeholder: 'Search charts…', type: 'search', name: 'q', value: '' },\n filled: { label: 'City', name: 'city', value: 'Caracas' },\n invalid: { label: 'City', name: 'city', value: 'Caracas', invalid: true, message: 'Required: pick a city' },\n disabled: { label: 'City', name: 'city', value: 'Caracas', disabled: true },\n },\n checkbox: {\n unchecked: { label: 'Legend', name: 'legend', value: false },\n checked: { label: 'Baseline', name: 'baseline', value: true },\n indeterminate: { label: 'All series', name: 'all', value: false, indeterminate: true },\n disabled: { label: 'Baseline', name: 'baseline', value: true, disabled: true },\n },\n 'radio-group': {\n selected: { label: 'Ground', name: 'ground', items: grounds, value: 'silverpoint', orientation: 'horizontal' },\n 'disabled-item': {\n label: 'Ground',\n name: 'ground',\n items: [grounds[0], { ...grounds[1], disabled: true }],\n value: 'silverpoint',\n orientation: 'horizontal',\n },\n },\n switch: {\n off: { label: 'Linked hover', name: 'linked', value: false },\n on: { label: 'Precision', name: 'precision', value: true },\n disabled: { label: 'Precision', name: 'precision', value: true, disabled: true },\n },\n slider: {\n marks: { label: 'Volume', name: 'volume', value: 30, marks: [0, 25, 50, 75, 100] },\n disabled: { label: 'Volume', name: 'volume', value: 30, disabled: true },\n },\n rate: {\n three: { label: 'Quality', name: 'quality', value: 3, count: 5 },\n 'read-only': { label: 'Quality', name: 'quality', value: 3, count: 5, readOnly: true },\n },\n segmented: {\n first: { label: 'Period', name: 'period', items: periods, value: 'day' },\n middle: { label: 'Period', name: 'period', items: periods, value: 'week' },\n },\n tabs: {\n first: { label: 'Views', items: tabs, value: 'overview' },\n 'disabled-tab': { label: 'Views', items: tabs.map((t) => (t.key === 'settings' ? { ...t, disabled: true } : t)), value: 'traffic' },\n },\n steps: {\n current: { label: 'Release', items: steps, current: 2 },\n error: { label: 'Release', items: steps.map((s) => (s.key === 'configure' ? { ...s, status: 'error' } : s)), current: 2 },\n },\n card: {\n plain: { content: 'Hits per hour rose through the afternoon and eased at night.' },\n titled: { title: 'Revenue', extra: 'Q3', content: '128 thousands, up 6.4 on the quarter.' },\n },\n tag: {\n 'tone-1': { content: 'draft', tone: 1 },\n closable: { content: 'review', tone: 3, closable: true },\n },\n badge: {\n count: { content: 'Inbox', count: 12 },\n dot: { content: 'Alerts', dot: true },\n overflow: { content: 'Mentions', count: 120, max: 99 },\n },\n divider: {\n plain: {},\n text: { text: 'or' },\n },\n progress: {\n line: { label: 'Upload', value: 40 },\n circle: { label: 'Coverage', value: 72, shape: 'circle' },\n indeterminate: { label: 'Loading' },\n },\n alert: {\n info: { kind: 'info', title: 'New ground available', content: 'cyanotype ships in 0.2.0.' },\n success: { kind: 'success', title: 'Published', content: 'Every package reached npm.' },\n warning: { kind: 'warning', title: 'Contrast check', content: 'One ink is close to 4.5:1 on ochre.' },\n error: { kind: 'error', title: 'Build failed', content: 'ui.css is over its 24 KB budget.' },\n },\n skeleton: {\n paragraph: { lines: 3 },\n avatar: { lines: 3, avatar: true },\n },\n});\n"]}
|