@siyahi/ui 0.1.9-next.5 → 0.1.9-next.7
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 +7 -2
- package/THIRD_PARTY_NOTICES.md +11 -11
- package/dist/components/registry/dashboard-01/section-cards.d.ts +2 -0
- package/dist/components/registry/dashboard-01/section-cards.js +2 -1
- package/dist/components/registry/dashboardcn/kpi-row-card.d.ts +29 -0
- package/dist/components/registry/dashboardcn/kpi-row-card.js +81 -0
- package/dist/components/registry/dashboardcn/sparkline.d.ts +18 -0
- package/dist/components/registry/dashboardcn/sparkline.js +95 -0
- package/dist/components/registry/sidebar-07/nav-main.d.ts +1 -1
- package/dist/components/siyahi/data-bar.d.ts +19 -0
- package/dist/components/siyahi/data-bar.js +29 -0
- package/dist/index.d.ts +5 -2
- package/dist/index.js +5 -2
- package/package.json +1 -1
- package/registry.lock.json +16 -0
package/README.md
CHANGED
|
@@ -72,7 +72,8 @@ Every merge to `main` also attaches both tarballs to a GitHub release
|
|
|
72
72
|
- **Registry add-ons**, copied once with their origin and licence recorded:
|
|
73
73
|
bar, area and line chart cards from shadcn's chart blocks, a data table on
|
|
74
74
|
TanStack Table, calendar, weekday and status heatmaps, a ranked
|
|
75
|
-
bar list, the `
|
|
75
|
+
bar list, a `Sparkline`, the `MetricStrip` row of figures, the
|
|
76
|
+
`SectionCards` stat tile and the `sidebar-07` app shell.
|
|
76
77
|
- **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
|
|
77
78
|
(TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
|
|
78
79
|
map; hover or tap a tile for its figures) with `TreemapLegend` (its colour
|
|
@@ -80,7 +81,8 @@ Every merge to `main` also attaches both tarballs to a GitHub release
|
|
|
80
81
|
in a tooltip), `ToneProgress` (Progress in a meaning colour), the page parts
|
|
81
82
|
`PageSection`, `PageSubheading`, `DataList` and `InlineCode`, the data table
|
|
82
83
|
parts `DataTableSortHeader` (sorts on one click) and `DataTableRowCount`
|
|
83
|
-
("12 of 48"),
|
|
84
|
+
("12 of 48"), `DataBar` (a figure in a table cell with a bar giving its size
|
|
85
|
+
against the column's largest), and `SiyahiProvider`.
|
|
84
86
|
- **Cards and badges as installed**: every `Card`, stat tiles included, keeps
|
|
85
87
|
luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
|
|
86
88
|
broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
|
|
@@ -110,6 +112,9 @@ Every merge to `main` also attaches both tarballs to a GitHub release
|
|
|
110
112
|
| Ranked counts or amounts by category (a name, a bar and a figure) | `BarList`; give two lists one `max` to share a scale |
|
|
111
113
|
| Where a budget sits, a split of a whole, or losses against gains | `DistributionBar` |
|
|
112
114
|
| Headline figures with their change | `SectionCards`, with a `Delta` in each badge |
|
|
115
|
+
| Many figures of equal weight, each with its change and recent run | `MetricStrip` |
|
|
116
|
+
| A run of values beside a figure, in a tile, a strip or a table cell | `Sparkline`; in a tile, `SectionCards`' `trend` |
|
|
117
|
+
| A table column that should read as a bar chart | `DataBar` in the column's cell |
|
|
113
118
|
| One instrument's price history | `PriceChart` |
|
|
114
119
|
| Holdings sized by weight and coloured by change | `Treemap` |
|
|
115
120
|
| Activity by day, by weekday and hour, or a status over time | `CalendarHeatmap`, `WeekdayHeatmap`, `StatusHeatmap` |
|
package/THIRD_PARTY_NOTICES.md
CHANGED
|
@@ -8,17 +8,17 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
|
|
|
8
8
|
|
|
9
9
|
## Copied into `@siyahi/ui`
|
|
10
10
|
|
|
11
|
-
| What
|
|
12
|
-
|
|
|
13
|
-
| shadcn/ui core components (installed with `shadcn add`, never edited)
|
|
14
|
-
| shadcn `tailwind.css` (variants and utilities the components use)
|
|
15
|
-
| shadcn block `sidebar-07`
|
|
16
|
-
| shadcn block `dashboard-01`, `SectionCards` only
|
|
17
|
-
| Heatmaps: calendar, weekday by hour, status timeline
|
|
18
|
-
| niko-table data table on TanStack Table
|
|
19
|
-
| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple`
|
|
20
|
-
| dashboardcn ranked list (`BarList`)
|
|
21
|
-
| MiniDev copy button (`CopyButton`)
|
|
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
|
+
| shadcn block `dashboard-01`, `SectionCards` only | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json | MIT, Copyright (c) 2023 shadcn |
|
|
17
|
+
| 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 |
|
|
18
|
+
| 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 |
|
|
19
|
+
| 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 |
|
|
20
|
+
| 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 |
|
|
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 |
|
|
22
22
|
|
|
23
23
|
## Runtime dependencies with attribution terms
|
|
24
24
|
|
|
@@ -6,6 +6,8 @@ export interface SectionCard {
|
|
|
6
6
|
value: React$1.ReactNode;
|
|
7
7
|
/** Outline badge, top right; usually a <Delta />. */
|
|
8
8
|
badge?: React$1.ReactNode;
|
|
9
|
+
/** A small chart under the value, usually a <Sparkline /> of the recent run. */
|
|
10
|
+
trend?: React$1.ReactNode;
|
|
9
11
|
/** Bold first footer line. */
|
|
10
12
|
headline?: React$1.ReactNode;
|
|
11
13
|
/** Muted second footer line. */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Badge } from "../../ui/badge.js";
|
|
3
|
-
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
|
|
3
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
|
|
4
4
|
import { cn } from "../../../lib/utils.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import "react";
|
|
@@ -39,6 +39,7 @@ function SectionCards({ items, selected, onSelect }) {
|
|
|
39
39
|
children: item.badge
|
|
40
40
|
}) })
|
|
41
41
|
] }),
|
|
42
|
+
item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
|
|
42
43
|
(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
|
|
43
44
|
className: "flex-col items-start gap-1.5 text-sm",
|
|
44
45
|
children: [item.headline && /* @__PURE__ */ jsx("div", {
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Card } from "../../ui/card.js";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
//#region src/components/registry/dashboardcn/kpi-row-card.d.ts
|
|
4
|
+
export interface MetricStripItem {
|
|
5
|
+
/** Muted label above the figure. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** The figure, formatted by the page: money(4512300). */
|
|
8
|
+
value: React$1.ReactNode;
|
|
9
|
+
/** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
|
|
10
|
+
change?: number;
|
|
11
|
+
changeFormat?: "pct" | "money";
|
|
12
|
+
/** Muted words after the change, such as "vs last month". */
|
|
13
|
+
note?: React$1.ReactNode;
|
|
14
|
+
/** Recent values, oldest first, drawn as a sparkline beside the figure. */
|
|
15
|
+
trend?: number[];
|
|
16
|
+
}
|
|
17
|
+
export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
|
|
18
|
+
title?: React$1.ReactNode;
|
|
19
|
+
description?: React$1.ReactNode;
|
|
20
|
+
/** A range toggle, top right, that changes every figure. */
|
|
21
|
+
action?: React$1.ReactNode;
|
|
22
|
+
items: MetricStripItem[];
|
|
23
|
+
/** Lines under the strip, such as what the figures cover. */
|
|
24
|
+
footer?: React$1.ReactNode;
|
|
25
|
+
}
|
|
26
|
+
/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
|
|
27
|
+
declare function MetricStrip({ title, description, action, items, footer, className, ...props }: MetricStripProps): React$1.JSX.Element;
|
|
28
|
+
//#endregion
|
|
29
|
+
export { MetricStrip };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
|
|
2
|
+
import { cn } from "../../../lib/utils.js";
|
|
3
|
+
import { Delta } from "../../siyahi/delta.js";
|
|
4
|
+
import { Sparkline } from "./sparkline.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import "react";
|
|
7
|
+
//#region src/components/registry/dashboardcn/kpi-row-card.tsx
|
|
8
|
+
const COLUMNS = {
|
|
9
|
+
1: "basis-full",
|
|
10
|
+
2: "basis-full @2xs/strip:basis-1/2",
|
|
11
|
+
3: "basis-full @lg/strip:basis-1/3",
|
|
12
|
+
4: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4",
|
|
13
|
+
5: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/5",
|
|
14
|
+
6: "basis-full @2xs/strip:basis-1/2 @xl/strip:basis-1/3 @5xl/strip:basis-1/6",
|
|
15
|
+
8: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4 @7xl/strip:basis-1/8"
|
|
16
|
+
};
|
|
17
|
+
function trendColor(change) {
|
|
18
|
+
if (change === void 0) return "var(--chart-1)";
|
|
19
|
+
if (change > 0) return "var(--positive)";
|
|
20
|
+
if (change < 0) return "var(--negative)";
|
|
21
|
+
return "var(--muted-foreground)";
|
|
22
|
+
}
|
|
23
|
+
/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
|
|
24
|
+
function MetricStrip({ title, description, action, items, footer, className, ...props }) {
|
|
25
|
+
const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
|
|
26
|
+
return /* @__PURE__ */ jsxs(Card, {
|
|
27
|
+
"data-slot": "metric-strip",
|
|
28
|
+
className: cn("gap-4", className),
|
|
29
|
+
...props,
|
|
30
|
+
children: [
|
|
31
|
+
(title || description || action) && /* @__PURE__ */ jsxs(CardHeader, { children: [
|
|
32
|
+
title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
|
|
33
|
+
description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
|
|
34
|
+
action && /* @__PURE__ */ jsx(CardAction, { children: action })
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
|
|
37
|
+
className: "@container/strip -mx-4 -my-3 overflow-hidden",
|
|
38
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
39
|
+
className: "-mt-px -ml-px flex flex-wrap",
|
|
40
|
+
children: items.map((item) => /* @__PURE__ */ jsxs("div", {
|
|
41
|
+
"data-slot": "metric-strip-item",
|
|
42
|
+
className: cn("flex min-w-0 flex-col gap-1 border-t border-l px-4 py-3", columns),
|
|
43
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
44
|
+
className: "truncate text-xs text-muted-foreground",
|
|
45
|
+
children: item.label
|
|
46
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
47
|
+
className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",
|
|
48
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
49
|
+
className: "flex min-w-0 flex-col gap-0.5",
|
|
50
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
51
|
+
className: "text-xl font-semibold tracking-tight tabular-nums",
|
|
52
|
+
children: item.value
|
|
53
|
+
}), (item.change !== void 0 || item.note) && /* @__PURE__ */ jsxs("div", {
|
|
54
|
+
className: "flex flex-wrap items-center gap-x-1.5 text-xs",
|
|
55
|
+
children: [item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
|
|
56
|
+
value: item.change,
|
|
57
|
+
format: item.changeFormat
|
|
58
|
+
}), item.note && /* @__PURE__ */ jsx("span", {
|
|
59
|
+
className: "text-muted-foreground",
|
|
60
|
+
children: item.note
|
|
61
|
+
})]
|
|
62
|
+
})]
|
|
63
|
+
}), item.trend && item.trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
|
|
64
|
+
data: item.trend,
|
|
65
|
+
variant: "line",
|
|
66
|
+
color: trendColor(item.change),
|
|
67
|
+
className: "h-8 w-16 shrink-0"
|
|
68
|
+
})]
|
|
69
|
+
})]
|
|
70
|
+
}, item.label))
|
|
71
|
+
})
|
|
72
|
+
}) }),
|
|
73
|
+
footer && /* @__PURE__ */ jsx(CardFooter, {
|
|
74
|
+
className: "flex-col items-start gap-2 text-sm",
|
|
75
|
+
children: footer
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
//#endregion
|
|
81
|
+
export { MetricStrip };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ChartColor } from "../../../lib/chart-series.js";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
//#region src/components/registry/dashboardcn/sparkline.d.ts
|
|
4
|
+
export interface SparklineProps extends React$1.ComponentProps<"div"> {
|
|
5
|
+
/** Series to plot, oldest first. */
|
|
6
|
+
data: number[];
|
|
7
|
+
variant?: "area" | "line";
|
|
8
|
+
/** A chart slot, or var(--positive) or var(--negative) for a gain or a loss. Defaults to var(--chart-1). */
|
|
9
|
+
color?: ChartColor;
|
|
10
|
+
curve?: "monotone" | "linear" | "step";
|
|
11
|
+
strokeWidth?: number;
|
|
12
|
+
/** Animate after hydration and when data changes. Respects reduced motion. */
|
|
13
|
+
animate?: boolean;
|
|
14
|
+
animationDuration?: number;
|
|
15
|
+
}
|
|
16
|
+
declare function Sparkline({ data, variant, color, curve, strokeWidth, animate, animationDuration, className, ...props }: SparklineProps): React$1.JSX.Element;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { Sparkline };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React$1 from "react";
|
|
4
|
+
import { Area, AreaChart, Line, LineChart, ResponsiveContainer, YAxis } from "recharts";
|
|
5
|
+
//#region src/components/registry/dashboardcn/sparkline.tsx
|
|
6
|
+
const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
|
|
7
|
+
function subscribeToReducedMotion(onChange) {
|
|
8
|
+
const query = window.matchMedia(reducedMotionQuery);
|
|
9
|
+
query.addEventListener("change", onChange);
|
|
10
|
+
return () => query.removeEventListener("change", onChange);
|
|
11
|
+
}
|
|
12
|
+
function getReducedMotionSnapshot() {
|
|
13
|
+
return window.matchMedia(reducedMotionQuery).matches;
|
|
14
|
+
}
|
|
15
|
+
function getReducedMotionServerSnapshot() {
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "monotone", strokeWidth = 1.5, animate = true, animationDuration = 500, className, ...props }) {
|
|
19
|
+
const id = React$1.useId();
|
|
20
|
+
const reducedMotion = React$1.useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
|
|
21
|
+
const animationActive = animate && !reducedMotion;
|
|
22
|
+
const points = React$1.useMemo(() => data.map((y, i) => ({
|
|
23
|
+
i,
|
|
24
|
+
y
|
|
25
|
+
})), [data]);
|
|
26
|
+
const margin = {
|
|
27
|
+
top: 2,
|
|
28
|
+
right: 0,
|
|
29
|
+
bottom: 2,
|
|
30
|
+
left: 0
|
|
31
|
+
};
|
|
32
|
+
const axis = /* @__PURE__ */ jsx(YAxis, {
|
|
33
|
+
hide: true,
|
|
34
|
+
domain: ["dataMin", "dataMax"]
|
|
35
|
+
});
|
|
36
|
+
return /* @__PURE__ */ jsx("div", {
|
|
37
|
+
"data-slot": "sparkline",
|
|
38
|
+
"aria-hidden": "true",
|
|
39
|
+
className: cn("h-10 w-full", className),
|
|
40
|
+
...props,
|
|
41
|
+
children: /* @__PURE__ */ jsx(ResponsiveContainer, {
|
|
42
|
+
width: "100%",
|
|
43
|
+
height: "100%",
|
|
44
|
+
children: variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
|
|
45
|
+
data: points,
|
|
46
|
+
margin,
|
|
47
|
+
children: [axis, /* @__PURE__ */ jsx(Line, {
|
|
48
|
+
type: curve,
|
|
49
|
+
dataKey: "y",
|
|
50
|
+
stroke: color,
|
|
51
|
+
strokeWidth,
|
|
52
|
+
dot: false,
|
|
53
|
+
isAnimationActive: animationActive,
|
|
54
|
+
animationDuration,
|
|
55
|
+
animationEasing: "ease-out"
|
|
56
|
+
})]
|
|
57
|
+
}) : /* @__PURE__ */ jsxs(AreaChart, {
|
|
58
|
+
data: points,
|
|
59
|
+
margin,
|
|
60
|
+
children: [
|
|
61
|
+
axis,
|
|
62
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
|
|
63
|
+
id,
|
|
64
|
+
x1: "0",
|
|
65
|
+
y1: "0",
|
|
66
|
+
x2: "0",
|
|
67
|
+
y2: "1",
|
|
68
|
+
children: [/* @__PURE__ */ jsx("stop", {
|
|
69
|
+
offset: "0%",
|
|
70
|
+
stopColor: color,
|
|
71
|
+
stopOpacity: .3
|
|
72
|
+
}), /* @__PURE__ */ jsx("stop", {
|
|
73
|
+
offset: "100%",
|
|
74
|
+
stopColor: color,
|
|
75
|
+
stopOpacity: 0
|
|
76
|
+
})]
|
|
77
|
+
}) }),
|
|
78
|
+
/* @__PURE__ */ jsx(Area, {
|
|
79
|
+
type: curve,
|
|
80
|
+
dataKey: "y",
|
|
81
|
+
stroke: color,
|
|
82
|
+
strokeWidth,
|
|
83
|
+
fill: `url(#${id})`,
|
|
84
|
+
dot: false,
|
|
85
|
+
isAnimationActive: animationActive,
|
|
86
|
+
animationDuration,
|
|
87
|
+
animationEasing: "ease-out"
|
|
88
|
+
})
|
|
89
|
+
]
|
|
90
|
+
})
|
|
91
|
+
})
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
//#endregion
|
|
95
|
+
export { Sparkline };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
//#region src/components/siyahi/data-bar.d.ts
|
|
3
|
+
export interface DataBarProps {
|
|
4
|
+
value: number;
|
|
5
|
+
/** The value a full bar stands for, usually the column's largest: Math.max(...rows.map((row) => row.value)). */
|
|
6
|
+
max: number;
|
|
7
|
+
/** "sign" draws a gain in --positive and a loss in --negative; by default every bar is --chart-1. */
|
|
8
|
+
tone?: "chart" | "sign";
|
|
9
|
+
/** The figure, as the page formats it. */
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
|
|
15
|
+
* The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
|
|
16
|
+
* keeps its height.
|
|
17
|
+
*/
|
|
18
|
+
export declare function DataBar({ value, max, tone, children, className }: DataBarProps): import("react").JSX.Element;
|
|
19
|
+
//#endregion
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { cn } from "cn";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/siyahi/data-bar.tsx
|
|
4
|
+
/**
|
|
5
|
+
* A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
|
|
6
|
+
* The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
|
|
7
|
+
* keeps its height.
|
|
8
|
+
*/
|
|
9
|
+
function DataBar({ value, max, tone = "chart", children, className }) {
|
|
10
|
+
const share = max > 0 ? Math.min(1, Math.abs(value) / max) : 0;
|
|
11
|
+
const fill = tone === "chart" ? "bg-chart-1" : value < 0 ? "bg-negative" : "bg-positive";
|
|
12
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
13
|
+
"data-slot": "data-bar",
|
|
14
|
+
className: cn("flex items-center gap-2", className),
|
|
15
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
16
|
+
"aria-hidden": "true",
|
|
17
|
+
className: "h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-muted",
|
|
18
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: cn("h-full rounded-full", fill),
|
|
20
|
+
style: { width: `${share * 100}%` }
|
|
21
|
+
})
|
|
22
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
23
|
+
className: "tabular-nums",
|
|
24
|
+
children
|
|
25
|
+
})]
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { DataBar };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,9 @@ import { LineChartCard, LineChartCardProps } from "./components/registry/charts/
|
|
|
5
5
|
import { SectionCard, SectionCards, SectionCardsProps } from "./components/registry/dashboard-01/section-cards.js";
|
|
6
6
|
import { BarList, BarListItem, BarListProps } from "./components/registry/dashboardcn/bar-list.js";
|
|
7
7
|
import { DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment } from "./components/registry/dashboardcn/distribution-bar.js";
|
|
8
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
|
|
9
|
+
import { MetricStrip, MetricStripItem, MetricStripProps } from "./components/registry/dashboardcn/kpi-row-card.js";
|
|
10
|
+
import { Sparkline, SparklineProps } from "./components/registry/dashboardcn/sparkline.js";
|
|
8
11
|
import { Activity, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, ColorConfig, Labels } from "./components/registry/heatmap/calendar-heatmap.js";
|
|
9
12
|
import { StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue } from "./components/registry/heatmap/status-heatmap.js";
|
|
10
13
|
import { ColorConfig as ColorConfig$1, WeekdayExtraColumnSpec, WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBlockProps, WeekdayHeatmapBody, WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, WeekdayHeatmapFooterProps, WeekdayHeatmapLabels, WeekdayHeatmapLegend, WeekdayHeatmapLegendProps, WeekdayHeatmapProps, WeekdayHeatmapStat, WeekdayHeatmapStatProps, WeekdayHour, WeekdayHourlyActivity, WeekdayIndex } from "./components/registry/heatmap/weekday-heatmap.js";
|
|
@@ -46,6 +49,7 @@ import { Separator } from "./components/ui/separator.js";
|
|
|
46
49
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
|
|
47
50
|
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./components/ui/sidebar.js";
|
|
48
51
|
import { AppSidebar, AppSidebarProps } from "./components/registry/sidebar-07/app-sidebar.js";
|
|
52
|
+
import { DataBar, DataBarProps } from "./components/siyahi/data-bar.js";
|
|
49
53
|
import { DataList, DataListItem, DataListItemProps } from "./components/siyahi/data-list.js";
|
|
50
54
|
import { DataTableRowCount, DataTableRowCountProps } from "./components/siyahi/data-table-row-count.js";
|
|
51
55
|
import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
|
|
@@ -65,7 +69,6 @@ import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, Ava
|
|
|
65
69
|
import { Badge, badgeVariants } from "./components/ui/badge.js";
|
|
66
70
|
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/ui/breadcrumb.js";
|
|
67
71
|
import { Calendar, CalendarDayButton } from "./components/ui/calendar.js";
|
|
68
|
-
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
|
|
69
72
|
import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./components/ui/chart.js";
|
|
70
73
|
import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "./components/ui/code-block.js";
|
|
71
74
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible.js";
|
|
@@ -85,4 +88,4 @@ import { Textarea } from "./components/ui/textarea.js";
|
|
|
85
88
|
import { Toggle, toggleVariants } from "./components/ui/toggle.js";
|
|
86
89
|
import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
|
|
87
90
|
import { Formatters, TimeOptions, count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
|
|
88
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, NumericXProps, type Option, PageSection, PageSectionProps, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
|
|
91
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericXProps, type Option, PageSection, PageSectionProps, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, Sparkline, SparklineProps, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
|
package/dist/index.js
CHANGED
|
@@ -39,6 +39,9 @@ import { SectionCards } from "./components/registry/dashboard-01/section-cards.j
|
|
|
39
39
|
import { count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
|
|
40
40
|
import { BarList } from "./components/registry/dashboardcn/bar-list.js";
|
|
41
41
|
import { DistributionBar } from "./components/registry/dashboardcn/distribution-bar.js";
|
|
42
|
+
import { Delta } from "./components/siyahi/delta.js";
|
|
43
|
+
import { Sparkline } from "./components/registry/dashboardcn/sparkline.js";
|
|
44
|
+
import { MetricStrip } from "./components/registry/dashboardcn/kpi-row-card.js";
|
|
42
45
|
import { CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat } from "./components/registry/heatmap/calendar-heatmap.js";
|
|
43
46
|
import { StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat } from "./components/registry/heatmap/status-heatmap.js";
|
|
44
47
|
import { WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat } from "./components/registry/heatmap/weekday-heatmap.js";
|
|
@@ -72,14 +75,14 @@ import { NavProjects } from "./components/registry/sidebar-07/nav-projects.js";
|
|
|
72
75
|
import { NavUser } from "./components/registry/sidebar-07/nav-user.js";
|
|
73
76
|
import { TeamSwitcher } from "./components/registry/sidebar-07/team-switcher.js";
|
|
74
77
|
import { AppSidebar } from "./components/registry/sidebar-07/app-sidebar.js";
|
|
78
|
+
import { DataBar } from "./components/siyahi/data-bar.js";
|
|
75
79
|
import { DataList, DataListItem } from "./components/siyahi/data-list.js";
|
|
76
80
|
import { DataTableRowCount } from "./components/siyahi/data-table-row-count.js";
|
|
77
81
|
import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
|
|
78
|
-
import { Delta } from "./components/siyahi/delta.js";
|
|
79
82
|
import { InlineCode } from "./components/siyahi/inline-code.js";
|
|
80
83
|
import { LocalTime } from "./components/siyahi/local-time.js";
|
|
81
84
|
import { PageSection, PageSubheading } from "./components/siyahi/page-section.js";
|
|
82
85
|
import { PriceChart } from "./components/siyahi/price-chart.js";
|
|
83
86
|
import { ToneProgress } from "./components/siyahi/tone-progress.js";
|
|
84
87
|
import { Treemap, TreemapLegend } from "./components/siyahi/treemap.js";
|
|
85
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, NavMain, NavProjects, NavUser, PageSection, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
|
|
88
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, MetricStrip, NavMain, NavProjects, NavUser, PageSection, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, Sparkline, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
|
package/package.json
CHANGED
package/registry.lock.json
CHANGED
|
@@ -49,6 +49,22 @@
|
|
|
49
49
|
"copied": "2026-10-22",
|
|
50
50
|
"sha256": "9028368f1363732cef765dabad2eca3ba98b608f1e237123b09df701c41c8b5a"
|
|
51
51
|
},
|
|
52
|
+
{
|
|
53
|
+
"file": "src/components/registry/dashboardcn/kpi-row-card.tsx",
|
|
54
|
+
"registry": "@dashboardcn/kpi-row-card",
|
|
55
|
+
"origin": "https://dashboardcn.com/r/kpi-row-card.json",
|
|
56
|
+
"licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
|
|
57
|
+
"copied": "2026-10-26",
|
|
58
|
+
"sha256": "b49fa95b3efa19086b3df2e3a18f6a0d5a95204951448c5d93fc41c2bdb6326f"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"file": "src/components/registry/dashboardcn/sparkline.tsx",
|
|
62
|
+
"registry": "@dashboardcn/sparkline",
|
|
63
|
+
"origin": "https://dashboardcn.com/r/sparkline.json",
|
|
64
|
+
"licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
|
|
65
|
+
"copied": "2026-10-26",
|
|
66
|
+
"sha256": "54b43e63d866bcdf8071744df08e87f29385ba60d480ab9ee8aa1fac3eb33d5c"
|
|
67
|
+
},
|
|
52
68
|
{
|
|
53
69
|
"file": "src/components/registry/heatmap/calendar-heatmap.tsx",
|
|
54
70
|
"registry": "@heatmap/calendar-heatmap",
|