@siyahi/ui 0.1.9-next.35 → 0.1.9-next.36
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/DESIGN.md +37 -21
- package/README.md +7 -9
- package/THIRD_PARTY_NOTICES.md +10 -11
- package/agents/examples/chart-panels.tsx +0 -4
- package/agents/examples/{section-cards-select.tsx → metric-strip-select.tsx} +5 -5
- package/agents/examples/metric-strip-trend.tsx +33 -0
- package/agents/examples/overview-dashboard.tsx +4 -4
- package/agents/examples/scatter-chart.tsx +0 -1
- package/agents/examples/stale-blocks.tsx +9 -9
- package/agents/examples/surfaces.tsx +2 -3
- package/agents/manifest.json +27 -47
- package/dist/components/registry/dashboardcn/kpi-row-card.d.ts +14 -6
- package/dist/components/registry/dashboardcn/kpi-row-card.js +49 -32
- package/dist/components/siyahi/panel-grid.d.ts +5 -6
- package/dist/components/siyahi/panel-grid.js +10 -9
- package/dist/components/siyahi/scatter-chart.d.ts +3 -3
- package/dist/components/siyahi/scatter-chart.js +5 -2
- package/dist/components/siyahi/siyahi-provider.d.ts +5 -6
- package/dist/components/siyahi/siyahi-provider.js +1 -1
- package/dist/index.d.ts +2 -3
- package/dist/index.js +2 -2
- package/dist/lib/chart-frame.d.ts +1 -1
- package/dist/lib/chart-frame.js +3 -1
- package/dist/lib/chart-series.d.ts +10 -2
- package/dist/lib/chart-series.js +10 -0
- package/package.json +1 -1
- package/registry.lock.json +0 -8
- package/styles/siyahi.css +60 -63
- package/agents/examples/section-cards-trend.tsx +0 -32
- package/agents/examples/section-cards.tsx +0 -48
- package/dist/components/registry/dashboard-01/section-cards.d.ts +0 -30
- package/dist/components/registry/dashboard-01/section-cards.js +0 -74
package/DESIGN.md
CHANGED
|
@@ -51,12 +51,13 @@ a meaning:
|
|
|
51
51
|
- Categories (a team, a region, a product line) stay neutral: outline badges,
|
|
52
52
|
never a hue each. Ordered buckets (largest 5, next 5, rest) use steps of one
|
|
53
53
|
colour, not separate hues.
|
|
54
|
-
- **Colour marks exceptions.** The one
|
|
55
|
-
is marked by the page: `tone: "negative"` or `"warning"` on a `
|
|
56
|
-
|
|
54
|
+
- **Colour marks exceptions.** The one figure or table row that needs a look
|
|
55
|
+
is marked by the page: `tone: "negative"` or `"warning"` on a `MetricStrip`
|
|
56
|
+
item, `data-tone="negative"` or `"warning"` on a `TableRow`,
|
|
57
57
|
and `getRowTone` on a `DataTableBody`, returning the tone for the row. It
|
|
58
58
|
takes a faint wash of the colour over the card (7% in light, 12% in dark),
|
|
59
|
-
and a
|
|
59
|
+
and a figure an outline of it, reaching 8px past the figure so its text
|
|
60
|
+
stays in line with its neighbours'. The page decides, never the sign: a falling cost is good news.
|
|
60
61
|
Mark one or two; a page where every row is washed marks nothing.
|
|
61
62
|
|
|
62
63
|
## Surfaces
|
|
@@ -64,20 +65,37 @@ a meaning:
|
|
|
64
65
|
`SiyahiProvider`'s `surface` sets how a data block sits on the page. The page
|
|
65
66
|
and card colours are fixed: never tint the canvas.
|
|
66
67
|
|
|
67
|
-
- **`
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
like the rest. A stat tile keeps its footer's top rule and faint band. Set
|
|
74
|
-
nothing to get it.
|
|
68
|
+
- **`open`** (the default, with or without a provider): no fill, no ring and
|
|
69
|
+
no padding, so a block's content sits level with the page's text. Space, not
|
|
70
|
+
a box or a rule, parts the blocks: 24px across and 16px down in a
|
|
71
|
+
`PanelGrid`, 24px between `MetricStrip` figures. A lighter box on the canvas
|
|
72
|
+
cuts off abruptly and spends room on its own padding, so data sits on the
|
|
73
|
+
page. Set nothing to get it.
|
|
75
74
|
- **`card`**: tight square cards, for a page of separate blocks, such as an
|
|
76
75
|
index of links. Each block is filled with the card colour inside a hairline
|
|
77
|
-
ring, with no shadow, 8px from the next in a `PanelGrid
|
|
78
|
-
`
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
ring, with no shadow, 8px from the next in a `PanelGrid`. Ask for it with
|
|
77
|
+
`surface="card"`.
|
|
78
|
+
|
|
79
|
+
## Density
|
|
80
|
+
|
|
81
|
+
A page is read on a phone, a laptop and a large monitor, and each gets more of
|
|
82
|
+
the page, not bigger type.
|
|
83
|
+
|
|
84
|
+
- **Lay out by the room, not the device.** `PanelGrid` and the tile rows step
|
|
85
|
+
their columns by their own width (container queries), so a block inside a
|
|
86
|
+
sidebar layout or a one-file page steps the same way. Below 42rem blocks
|
|
87
|
+
stack; from 42rem they sit two or three across.
|
|
88
|
+
- **A large monitor shows more blocks, not wider ones.** From a 140rem grid a
|
|
89
|
+
`PanelGrid` of 2 takes a third block across, and from 180rem a grid of 2 or
|
|
90
|
+
3 a fourth, when it holds that many. Text stays at its size.
|
|
91
|
+
- **A chart's height follows its width** unless the page fixes one: 45% of
|
|
92
|
+
its width, from 240px on a phone to 420px, so a chart on a wide screen
|
|
93
|
+
stays a chart and one on a phone keeps room for its marks. Fix a height
|
|
94
|
+
only where the block must line up with a neighbour.
|
|
95
|
+
- **Gaps are set, not invented.** Stack a page's blocks 16px apart
|
|
96
|
+
(`gap-4`) and its `PageSection`s 24px apart (`gap-6`), the room each
|
|
97
|
+
section keeps under its rule; add no padding or gap of your own around a
|
|
98
|
+
block.
|
|
81
99
|
|
|
82
100
|
Every `PanelGrid` numbers its blocks 01, 02 before their card title, in the
|
|
83
101
|
mono face and the link colour, so the text can point to one.
|
|
@@ -192,8 +210,7 @@ from the catalogue.
|
|
|
192
210
|
|
|
193
211
|
## Labels and totals
|
|
194
212
|
|
|
195
|
-
- **Labels are small monospaced capitals**: a
|
|
196
|
-
lines, a `MetricStrip` label, a table's column heads, a sidebar group's
|
|
213
|
+
- **Labels are small monospaced capitals**: a `MetricStrip` figure's label, a table's column heads, a sidebar group's
|
|
197
214
|
label, a group's label in a menu, a select's list or the command palette,
|
|
198
215
|
and a form field's label (muted, above the field). The components and
|
|
199
216
|
the theme set them; never set a label in this style by hand elsewhere, and
|
|
@@ -235,9 +252,8 @@ from the catalogue.
|
|
|
235
252
|
each end dot as its line finishes; bars fade in rather than grow. Reduced
|
|
236
253
|
motion shows them at once.
|
|
237
254
|
- **Stale data is marked by the page**: `stale` on a chart card or a
|
|
238
|
-
`
|
|
239
|
-
chart or sparkline draws at about 65% strength, a
|
|
240
|
-
turn muted, and a small "Stale · 3 Nov" note says so. A stale block is meant
|
|
255
|
+
`MetricStrip` item, with since when ("3 Nov"). The block greys and its
|
|
256
|
+
chart or sparkline draws at about 65% strength, a figure turns muted, and a small "Stale · 3 Nov" note says so. A stale block is meant
|
|
241
257
|
to be harder to read, so its marks are exempt from the 3:1 mark bar; the
|
|
242
258
|
note and the figure keep their text contrast. Never infer it from dates.
|
|
243
259
|
|
package/README.md
CHANGED
|
@@ -100,24 +100,22 @@ and support one keyboard entry with arrow navigation. `WeekdayHeatmap` accepts
|
|
|
100
100
|
|
|
101
101
|
`SiyahiProvider` sets how data blocks sit on the page:
|
|
102
102
|
|
|
103
|
-
- `surface="
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
and none on the sides; a card standing alone takes the rules above and below
|
|
107
|
-
itself.
|
|
103
|
+
- `surface="open"` (default, even outside a provider): no fill, box or rule,
|
|
104
|
+
and no card padding, so a block's content sits level with the page's text.
|
|
105
|
+
Space parts the blocks: 24px across and 16px down in a `PanelGrid`.
|
|
108
106
|
- `surface="card"`: tight square cards, each filled inside a hairline, 8px
|
|
109
107
|
apart, no shadow, for a page of separate blocks.
|
|
110
|
-
- `surface="open"`: no fill, boxes or rules; card padding is removed.
|
|
111
108
|
|
|
112
109
|
`DESIGN.md` has the rest of the look: square corners, mono capital labels,
|
|
113
110
|
ledger totals, the masthead and exception tones.
|
|
114
111
|
|
|
115
112
|
Nest a provider to change one section. A dialog, sheet or popover renders
|
|
116
|
-
outside the page's provider element: `PanelGrid`
|
|
117
|
-
their surface into it, but a lone `Card` there is
|
|
113
|
+
outside the page's provider element: `PanelGrid` carries
|
|
114
|
+
their surface into it, but a lone `Card` there is open unless the popup's
|
|
118
115
|
content sits in its own provider with an explicit surface, such as
|
|
119
116
|
`<SiyahiProvider surface="card">`; a provider without one draws no element. Stack `PageSection` blocks with
|
|
120
|
-
`flex flex-col gap-6
|
|
117
|
+
`flex flex-col gap-6` and the blocks inside one with `gap-4`; use `PanelGrid`
|
|
118
|
+
for blocks side by side. Categories use
|
|
121
119
|
neutral outline badges, leaving colour for meaning and chart series.
|
|
122
120
|
|
|
123
121
|
## Dark mode
|
package/THIRD_PARTY_NOTICES.md
CHANGED
|
@@ -8,17 +8,16 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
|
|
|
8
8
|
|
|
9
9
|
## Copied into `@siyahi/ui`
|
|
10
10
|
|
|
11
|
-
| What | Where in the package
|
|
12
|
-
| --------------------------------------------------------------------------------------------------- |
|
|
13
|
-
| shadcn/ui core components (installed with `shadcn add`, never edited) | `src/components/ui/*`, `src/hooks/use-mobile.ts`
|
|
14
|
-
| shadcn `tailwind.css` (variants and utilities the components use) | `styles/shadcn.css`
|
|
15
|
-
| shadcn block `sidebar-07` | `src/components/registry/sidebar-07/*`
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
| MiniDev copy button (`CopyButton`) | `src/components/registry/minidev/copy-button.tsx` | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui) | MIT, Copyright (c) 2026 MiniDev |
|
|
11
|
+
| What | Where in the package | Origin | Licence |
|
|
12
|
+
| --------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
13
|
+
| shadcn/ui core components (installed with `shadcn add`, never edited) | `src/components/ui/*`, `src/hooks/use-mobile.ts` | https://github.com/shadcn-ui/ui | MIT, Copyright (c) 2023 shadcn |
|
|
14
|
+
| shadcn `tailwind.css` (variants and utilities the components use) | `styles/shadcn.css` | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn | MIT, Copyright (c) 2023 shadcn |
|
|
15
|
+
| shadcn block `sidebar-07` | `src/components/registry/sidebar-07/*` | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json | MIT, Copyright (c) 2023 shadcn |
|
|
16
|
+
| Heatmaps: calendar, weekday by hour, status timeline | `src/components/registry/heatmap/*` | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap) | MIT, Copyright (c) 2026 ChingRu |
|
|
17
|
+
| niko-table data table on TanStack Table | `src/components/registry/niko-table/*` | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
|
|
18
|
+
| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple` | `src/components/registry/charts/*` | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json | MIT, Copyright (c) 2023 shadcn |
|
|
19
|
+
| dashboardcn ranked list (`BarList`), stacked bar (`DistributionBar`), `Sparkline` and `MetricStrip` | `src/components/registry/dashboardcn/*` | https://dashboardcn.com/r/bar-list.json, https://dashboardcn.com/r/distribution-bar.json, https://dashboardcn.com/r/sparkline.json, https://dashboardcn.com/r/kpi-row-card.json (source: https://github.com/NoahGdev/dashboardcn) | MIT, Copyright (c) 2026 dashboardcn contributors |
|
|
20
|
+
| MiniDev copy button (`CopyButton`) | `src/components/registry/minidev/copy-button.tsx` | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui) | MIT, Copyright (c) 2026 MiniDev |
|
|
22
21
|
|
|
23
22
|
## Runtime dependencies with attribution terms
|
|
24
23
|
|
|
@@ -56,7 +56,6 @@ export default function ChartPanelsExample() {
|
|
|
56
56
|
today="Oct"
|
|
57
57
|
forecastFrom="Oct"
|
|
58
58
|
valueFormatter={pct}
|
|
59
|
-
height={256}
|
|
60
59
|
/>
|
|
61
60
|
<AreaChartCard
|
|
62
61
|
title="Value by kind"
|
|
@@ -66,7 +65,6 @@ export default function ChartPanelsExample() {
|
|
|
66
65
|
series={kinds}
|
|
67
66
|
valueFormatter={money}
|
|
68
67
|
yTickFormatter={moneyCompact}
|
|
69
|
-
height={256}
|
|
70
68
|
/>
|
|
71
69
|
<BarChartCard
|
|
72
70
|
title="Money added by kind and quarter"
|
|
@@ -76,7 +74,6 @@ export default function ChartPanelsExample() {
|
|
|
76
74
|
series={kinds}
|
|
77
75
|
valueFormatter={money}
|
|
78
76
|
yTickFormatter={moneyCompact}
|
|
79
|
-
height={256}
|
|
80
77
|
/>
|
|
81
78
|
<BarChartCard
|
|
82
79
|
title="Money added by kind and quarter"
|
|
@@ -87,7 +84,6 @@ export default function ChartPanelsExample() {
|
|
|
87
84
|
stacked
|
|
88
85
|
valueFormatter={money}
|
|
89
86
|
yTickFormatter={moneyCompact}
|
|
90
|
-
height={256}
|
|
91
87
|
/>
|
|
92
88
|
</PanelGrid>
|
|
93
89
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Delta,
|
|
1
|
+
import { Delta, MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
|
|
4
4
|
// Each sales channel's profit this quarter and its orders; made-up figures.
|
|
@@ -9,19 +9,19 @@ const channels = [
|
|
|
9
9
|
{ label: "Marketplace", net: -61200, orders: 17 },
|
|
10
10
|
];
|
|
11
11
|
|
|
12
|
-
export default function
|
|
12
|
+
export default function MetricStripSelectExample() {
|
|
13
13
|
const [scope, setScope] = useState("All");
|
|
14
14
|
const { count } = useFormat();
|
|
15
|
-
const items:
|
|
15
|
+
const items: MetricStripItem[] = channels.map((c) => ({
|
|
16
16
|
label: c.label,
|
|
17
17
|
value: <Delta value={c.net} format="money" />,
|
|
18
|
-
|
|
18
|
+
note: `${count(c.orders)} orders`,
|
|
19
19
|
// Nothing to show for a channel with no orders, so it cannot be picked.
|
|
20
20
|
disabled: c.orders === 0,
|
|
21
21
|
}));
|
|
22
22
|
return (
|
|
23
23
|
<div className="flex flex-col gap-3">
|
|
24
|
-
<
|
|
24
|
+
<MetricStrip items={items} selected={scope} onSelect={setScope} />
|
|
25
25
|
<p className="text-sm text-muted-foreground">Showing {scope}</p>
|
|
26
26
|
</div>
|
|
27
27
|
);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
|
|
2
|
+
|
|
3
|
+
export default function MetricStripTrendExample() {
|
|
4
|
+
const { money, moneyCompact } = useFormat();
|
|
5
|
+
// trend is each figure's run, oldest first; its change's sign colours it.
|
|
6
|
+
const items: MetricStripItem[] = [
|
|
7
|
+
{
|
|
8
|
+
label: "Revenue",
|
|
9
|
+
value: money(4512300),
|
|
10
|
+
change: 0.031,
|
|
11
|
+
note: "month-end, last six months",
|
|
12
|
+
trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
label: "Cash flow this year",
|
|
16
|
+
value: moneyCompact(-61200),
|
|
17
|
+
change: -61200,
|
|
18
|
+
changeFormat: "money",
|
|
19
|
+
note: "running total since April",
|
|
20
|
+
trend: [0, -8200, -14100, -30400, -52800, -61200],
|
|
21
|
+
// The one figure on the page that needs a look, marked by the page: a falling cost would not be.
|
|
22
|
+
tone: "negative",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: "Gift cards this year",
|
|
26
|
+
value: moneyCompact(38400),
|
|
27
|
+
change: 0.18,
|
|
28
|
+
note: "sold each month",
|
|
29
|
+
trend: [4100, 0, 12800, 3300, 9900, 8300],
|
|
30
|
+
},
|
|
31
|
+
];
|
|
32
|
+
return <MetricStrip items={items} />;
|
|
33
|
+
}
|
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
import { DownloadIcon, LightbulbIcon, PlusIcon } from "lucide-react";
|
|
27
27
|
import { useState } from "react";
|
|
28
28
|
import ChartArea from "./chart-area";
|
|
29
|
-
import
|
|
29
|
+
import MetricStripTrend from "./metric-strip-trend";
|
|
30
30
|
|
|
31
31
|
interface Holding {
|
|
32
32
|
name: string;
|
|
@@ -119,8 +119,8 @@ function Holdings({ rows }: { rows: Holding[] }) {
|
|
|
119
119
|
);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
// An app page on the default,
|
|
123
|
-
// the takeaway. It sets no surface:
|
|
122
|
+
// An app page on the default, open surface: masthead, controls, stat tiles, a chart and a table in a PanelGrid, and
|
|
123
|
+
// the takeaway. It sets no surface: blocks on the page with space between them is what a page gets.
|
|
124
124
|
export default function OverviewDashboard() {
|
|
125
125
|
const [query, setQuery] = useState("");
|
|
126
126
|
const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
|
|
@@ -166,7 +166,7 @@ export default function OverviewDashboard() {
|
|
|
166
166
|
</a>
|
|
167
167
|
</p>
|
|
168
168
|
</div>
|
|
169
|
-
<
|
|
169
|
+
<MetricStripTrend />
|
|
170
170
|
<PanelGrid>
|
|
171
171
|
<ChartArea />
|
|
172
172
|
<Holdings rows={shown} />
|
|
@@ -43,7 +43,6 @@ export default function ScatterChartExample() {
|
|
|
43
43
|
description="Across is the store's share of sales, up its growth on last year. Log spreads out the small stores; Linear shows how far ahead the largest are."
|
|
44
44
|
action={<Badge variant="outline">This month</Badge>}
|
|
45
45
|
points={stores}
|
|
46
|
-
height={360}
|
|
47
46
|
xLabel="Share of sales"
|
|
48
47
|
yLabel="Growth"
|
|
49
48
|
// Log is selected first; the buttons in the header let the reader switch.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AreaChartCard,
|
|
1
|
+
import { AreaChartCard, MetricStrip, useFormat, type MetricStripItem } from "@siyahi/ui";
|
|
2
2
|
|
|
3
3
|
const value = [
|
|
4
4
|
{ month: "May", equity: 2150000, debt: 600000, gold: 320000, intl: 390000, cash: 150000 },
|
|
@@ -20,26 +20,26 @@ const kinds = [
|
|
|
20
20
|
// loses its colour and says since when. The page decides; nothing is inferred from dates.
|
|
21
21
|
export default function StaleBlocksExample() {
|
|
22
22
|
const { money, moneyCompact } = useFormat();
|
|
23
|
-
const
|
|
23
|
+
const figures: MetricStripItem[] = [
|
|
24
24
|
{
|
|
25
25
|
label: "Revenue",
|
|
26
26
|
value: money(4512300),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
change: 0.031,
|
|
28
|
+
note: "month-end, last six months",
|
|
29
|
+
trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
label: "Gift cards this year",
|
|
33
33
|
value: moneyCompact(38400),
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
change: 0.18,
|
|
35
|
+
note: "sold each month",
|
|
36
|
+
trend: [4100, 0, 12800, 3300, 9900, 8300],
|
|
37
37
|
stale: "3 Nov",
|
|
38
38
|
},
|
|
39
39
|
];
|
|
40
40
|
return (
|
|
41
41
|
<div className="flex flex-col gap-6">
|
|
42
|
-
<
|
|
42
|
+
<MetricStrip items={figures} />
|
|
43
43
|
<AreaChartCard
|
|
44
44
|
title="Value by kind"
|
|
45
45
|
description="Month-end value of each kind of holding"
|
|
@@ -89,7 +89,7 @@ function Dashboard() {
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
export default function SurfacesExample() {
|
|
92
|
-
const [surface, setSurface] = useState<Surface>("
|
|
92
|
+
const [surface, setSurface] = useState<Surface>("open");
|
|
93
93
|
return (
|
|
94
94
|
<div className="flex flex-col gap-4">
|
|
95
95
|
<ToggleGroup
|
|
@@ -103,9 +103,8 @@ export default function SurfacesExample() {
|
|
|
103
103
|
aria-label="Surface"
|
|
104
104
|
>
|
|
105
105
|
{/* The default first. */}
|
|
106
|
-
<ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
|
|
107
|
-
<ToggleGroupItem value="card">Card</ToggleGroupItem>
|
|
108
106
|
<ToggleGroupItem value="open">Open</ToggleGroupItem>
|
|
107
|
+
<ToggleGroupItem value="card">Card</ToggleGroupItem>
|
|
109
108
|
</ToggleGroup>
|
|
110
109
|
{/* A nested provider sets the surface for its part of the page. */}
|
|
111
110
|
<SiyahiProvider surface={surface}>
|
package/agents/manifest.json
CHANGED
|
@@ -100,15 +100,7 @@
|
|
|
100
100
|
]
|
|
101
101
|
},
|
|
102
102
|
{
|
|
103
|
-
"need": "Headline figures with
|
|
104
|
-
"guidance": "`SectionCards`, with a `Delta` in each badge",
|
|
105
|
-
"components": [
|
|
106
|
-
"SectionCards",
|
|
107
|
-
"Delta"
|
|
108
|
-
]
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
"need": "Many figures of equal weight, each with its change and recent run",
|
|
103
|
+
"need": "Headline figures, or many figures of equal weight, each with its change and recent run",
|
|
112
104
|
"guidance": "`MetricStrip`",
|
|
113
105
|
"components": [
|
|
114
106
|
"MetricStrip"
|
|
@@ -116,10 +108,10 @@
|
|
|
116
108
|
},
|
|
117
109
|
{
|
|
118
110
|
"need": "A run of values beside a figure, in a tile, a strip or a table cell",
|
|
119
|
-
"guidance": "`Sparkline`; in a
|
|
111
|
+
"guidance": "`Sparkline`; in a strip, `MetricStrip`'s `trend`",
|
|
120
112
|
"components": [
|
|
121
113
|
"Sparkline",
|
|
122
|
-
"
|
|
114
|
+
"MetricStrip"
|
|
123
115
|
]
|
|
124
116
|
},
|
|
125
117
|
{
|
|
@@ -228,10 +220,10 @@
|
|
|
228
220
|
]
|
|
229
221
|
},
|
|
230
222
|
{
|
|
231
|
-
"need": "
|
|
232
|
-
"guidance": "`
|
|
223
|
+
"need": "Figures that pick a scope for the page",
|
|
224
|
+
"guidance": "`MetricStrip` with `selected` and `onSelect`",
|
|
233
225
|
"components": [
|
|
234
|
-
"
|
|
226
|
+
"MetricStrip"
|
|
235
227
|
]
|
|
236
228
|
},
|
|
237
229
|
{
|
|
@@ -289,8 +281,8 @@
|
|
|
289
281
|
]
|
|
290
282
|
},
|
|
291
283
|
{
|
|
292
|
-
"need": "Separate square cards instead of the default
|
|
293
|
-
"guidance": "`SiyahiProvider` with `surface=\"card\"`
|
|
284
|
+
"need": "Separate square cards instead of the default open blocks, for a page or a part of one",
|
|
285
|
+
"guidance": "`SiyahiProvider` with `surface=\"card\"`",
|
|
294
286
|
"components": [
|
|
295
287
|
"SiyahiProvider"
|
|
296
288
|
]
|
|
@@ -309,10 +301,10 @@
|
|
|
309
301
|
"components": []
|
|
310
302
|
},
|
|
311
303
|
{
|
|
312
|
-
"need": "A chart or
|
|
313
|
-
"guidance": "`stale` on the chart card or the `
|
|
304
|
+
"need": "A chart or figure whose data is old",
|
|
305
|
+
"guidance": "`stale` on the chart card or the `MetricStrip` item, with since when (\"3 Nov\"); `StaleNote` for another kind of block",
|
|
314
306
|
"components": [
|
|
315
|
-
"
|
|
307
|
+
"MetricStrip",
|
|
316
308
|
"StaleNote"
|
|
317
309
|
]
|
|
318
310
|
},
|
|
@@ -1026,6 +1018,21 @@
|
|
|
1026
1018
|
"LocalTime"
|
|
1027
1019
|
]
|
|
1028
1020
|
},
|
|
1021
|
+
{
|
|
1022
|
+
"file": "agents/examples/metric-strip-select.tsx",
|
|
1023
|
+
"components": [
|
|
1024
|
+
"Delta",
|
|
1025
|
+
"MetricStrip",
|
|
1026
|
+
"useFormat"
|
|
1027
|
+
]
|
|
1028
|
+
},
|
|
1029
|
+
{
|
|
1030
|
+
"file": "agents/examples/metric-strip-trend.tsx",
|
|
1031
|
+
"components": [
|
|
1032
|
+
"MetricStrip",
|
|
1033
|
+
"useFormat"
|
|
1034
|
+
]
|
|
1035
|
+
},
|
|
1029
1036
|
{
|
|
1030
1037
|
"file": "agents/examples/metric-strip.tsx",
|
|
1031
1038
|
"components": [
|
|
@@ -1186,31 +1193,6 @@
|
|
|
1186
1193
|
"Separator"
|
|
1187
1194
|
]
|
|
1188
1195
|
},
|
|
1189
|
-
{
|
|
1190
|
-
"file": "agents/examples/section-cards-select.tsx",
|
|
1191
|
-
"components": [
|
|
1192
|
-
"Delta",
|
|
1193
|
-
"SectionCards",
|
|
1194
|
-
"useFormat"
|
|
1195
|
-
]
|
|
1196
|
-
},
|
|
1197
|
-
{
|
|
1198
|
-
"file": "agents/examples/section-cards-trend.tsx",
|
|
1199
|
-
"components": [
|
|
1200
|
-
"Delta",
|
|
1201
|
-
"SectionCards",
|
|
1202
|
-
"Sparkline",
|
|
1203
|
-
"useFormat"
|
|
1204
|
-
]
|
|
1205
|
-
},
|
|
1206
|
-
{
|
|
1207
|
-
"file": "agents/examples/section-cards.tsx",
|
|
1208
|
-
"components": [
|
|
1209
|
-
"Delta",
|
|
1210
|
-
"SectionCards",
|
|
1211
|
-
"useFormat"
|
|
1212
|
-
]
|
|
1213
|
-
},
|
|
1214
1196
|
{
|
|
1215
1197
|
"file": "agents/examples/select.tsx",
|
|
1216
1198
|
"components": [
|
|
@@ -1279,9 +1261,7 @@
|
|
|
1279
1261
|
"file": "agents/examples/stale-blocks.tsx",
|
|
1280
1262
|
"components": [
|
|
1281
1263
|
"AreaChartCard",
|
|
1282
|
-
"
|
|
1283
|
-
"SectionCards",
|
|
1284
|
-
"Sparkline",
|
|
1264
|
+
"MetricStrip",
|
|
1285
1265
|
"useFormat"
|
|
1286
1266
|
]
|
|
1287
1267
|
},
|
|
@@ -2,21 +2,25 @@ import { Card } from "../../ui/card.js";
|
|
|
2
2
|
import * as React$1 from "react";
|
|
3
3
|
//#region src/components/registry/dashboardcn/kpi-row-card.d.ts
|
|
4
4
|
export interface MetricStripItem {
|
|
5
|
-
/**
|
|
5
|
+
/** Small capital label above the figure; it also names the figure's button in a picker. */
|
|
6
6
|
label: string;
|
|
7
7
|
/** The figure, formatted by the page: money(4512300). */
|
|
8
8
|
value: React$1.ReactNode;
|
|
9
9
|
/** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
|
|
10
10
|
change?: number | undefined;
|
|
11
11
|
changeFormat?: "pct" | "money" | undefined;
|
|
12
|
-
/** Muted words after the change, such as "vs last month". */
|
|
12
|
+
/** Muted words after the change, such as "vs last month", or what the figure covers. */
|
|
13
13
|
note?: React$1.ReactNode;
|
|
14
|
-
/** Recent values, oldest first, drawn as a sparkline
|
|
14
|
+
/** Recent values, oldest first, drawn as a sparkline under the figure. */
|
|
15
15
|
trend?: number[] | undefined;
|
|
16
16
|
/** Marks the figure as the exception on the page: a faint wash of the colour and an outline of it. */
|
|
17
17
|
tone?: "negative" | "warning" | undefined;
|
|
18
|
+
/** Marks the figure's data as old, with since when, such as "3 Nov": it greys out and says so. */
|
|
19
|
+
stale?: React$1.ReactNode;
|
|
20
|
+
/** In a picker, a figure that cannot be picked, such as one with nothing in it: faded, its button disabled. */
|
|
21
|
+
disabled?: boolean | undefined;
|
|
18
22
|
}
|
|
19
|
-
export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
|
|
23
|
+
export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title" | "onSelect"> {
|
|
20
24
|
title?: React$1.ReactNode;
|
|
21
25
|
description?: React$1.ReactNode;
|
|
22
26
|
/** A range toggle, top right, that changes every figure. */
|
|
@@ -24,8 +28,12 @@ export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Car
|
|
|
24
28
|
items: MetricStripItem[];
|
|
25
29
|
/** Lines under the strip, such as what the figures cover. */
|
|
26
30
|
footer?: React$1.ReactNode;
|
|
31
|
+
/** The label of the picked figure. */
|
|
32
|
+
selected?: string | undefined;
|
|
33
|
+
/** Makes each figure one button, so keep figure content non-interactive; gets the label of the figure picked. */
|
|
34
|
+
onSelect?: ((label: string) => void) | undefined;
|
|
27
35
|
}
|
|
28
|
-
/** A
|
|
29
|
-
declare function MetricStrip({ title, description, action, items, footer, className, ...props }: MetricStripProps): React$1.JSX.Element;
|
|
36
|
+
/** A row of figures, each with its change and recent run, optionally a picker that scopes the page. */
|
|
37
|
+
declare function MetricStrip({ title, description, action, items, footer, selected, onSelect, className, ...props }: MetricStripProps): React$1.JSX.Element;
|
|
30
38
|
//#endregion
|
|
31
39
|
export { MetricStrip };
|