@siyahi/ui 0.1.7-next.3 → 0.1.8-next.2

package/README.md

@@ -54,8 +54,8 @@ the hashed URLs of `geist-latin-wght-normal.woff2`,
 `geist-latin-ext-wght-normal.woff2` and `geist-mono-latin-wght-normal.woff2`.
 
 Everything comes from `@siyahi/ui`: the shadcn components, the registry
-add-ons (data table, heatmaps, stat tiles, sidebar), Siyahi's own components
-and the Recharts pieces charts are built from. Add `lucide-react` only if your
+add-ons (chart cards, data table, heatmaps, stat tiles, sidebar) and Siyahi's
+own components. Add `lucide-react` only if your
 own code imports icons. A Next.js app compiles the same stylesheet through
 `@tailwindcss/postcss` instead of the Vite plugin.
 
@@ -69,8 +69,9 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 
 - **shadcn/ui components** in the `base-luma` style, installed with the shadcn
   CLI and never edited.
-- **Registry add-ons**, copied once with their origin and licence recorded: a
-  data table on TanStack Table, calendar, weekday and status heatmaps, a ranked
+- **Registry add-ons**, copied once with their origin and licence recorded:
+  bar, area and line chart cards from shadcn's chart blocks, a data table on
+  TanStack Table, calendar, weekday and status heatmaps, a ranked
   bar list, the `SectionCards` stat tile and the `sidebar-07` app shell.
 - **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
   (TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
@@ -91,6 +92,43 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 - **`report.css`** for static HTML reports that do not use React: the theme as
   plain CSS variables plus base body styles, with no network requests.
 
+## Which component
+
+| Need                                                                    | Component                                                   |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------- |
+| Values over time or another ordered axis (months, hours, price buckets) | `BarChartCard`, `AreaChartCard` or `LineChartCard`          |
+| Counts or amounts per period, one series or several                     | `BarChartCard`; `stacked` when the series add up to a total |
+| A running level, such as a portfolio's value against money put in       | `AreaChartCard`                                             |
+| Series compared point by point, such as a return against an index       | `LineChartCard`                                             |
+| Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`                                                   |
+| Headline figures with their change                                      | `SectionCards`, with a `Delta` in each badge                |
+| One instrument's price history                                          | `PriceChart`                                                |
+| Holdings sized by weight and coloured by change                         | `Treemap`                                                   |
+| Activity by day, by weekday and hour, or a status over time             | `CalendarHeatmap`, `WeekdayHeatmap`, `StatusHeatmap`        |
+| Rows to sort and filter                                                 | `DataTable`, inside a `Card`                                |
+| A signed figure (a gain, a loss, a change)                              | `Delta`                                                     |
+| A time, with the viewer's own clock on hover                            | `LocalTime`                                                 |
+
+The three chart cards take the rows, the field the x axis reads and the series,
+and own everything else: the card and its header action (a range or mode
+toggle), the axes, the dashed horizontal grid, Geist Mono ticks, a tooltip that
+names the hovered point and gives each series' formatted value, and the legend
+below. A page never puts Recharts axes, grids or tooltips together itself.
+
+```tsx
+<BarChartCard
+  title="Orders by hour"
+  data={[
+    { hour: 9, orders: 42 },
+    { hour: 10, orders: 31 },
+  ]}
+  xKey="hour"
+  xFormatter={(hour) => `${String(hour).padStart(2, "0")}:00`}
+  series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+  height={256}
+/>
+```
+
 ## Locale
 
 Numbers, money and times default to Indian English, rupees and IST:

package/THIRD_PARTY_NOTICES.md

@@ -8,15 +8,16 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 
 ## Copied into `@siyahi/ui`
 
-| What                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                      | Licence                                                                             |
-| --------------------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| 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                                                      |
-| 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                                                      |
-| 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                                                      |
-| 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                                                      |
-| 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                                                     |
-| 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 (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
-| dashboardcn ranked list (`BarList`)                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| What                                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                      | Licence                                                                             |
+| ------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| 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                                                      |
+| 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                                                      |
+| 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                                                      |
+| 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                                                      |
+| 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                                                     |
+| 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 (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
+| 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                                                      |
+| dashboardcn ranked list (`BarList`)                                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
 
 ## Runtime dependencies with attribution terms
 

package/dist/components/registry/charts/area-chart-card.d.ts

@@ -0,0 +1,9 @@
+import { SeriesChartProps } from "../../../lib/chart-series.js";
+//#region src/components/registry/charts/area-chart-card.d.ts
+export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
+  /** Stack the series into a total instead of overlapping them. */
+  stacked?: boolean;
+}
+/** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
+export declare function AreaChartCard<T extends object, K extends keyof T>({ stacked, ...props }: AreaChartCardProps<T, K>): import("react").JSX.Element;
+//#endregion

package/dist/components/registry/charts/area-chart-card.js

@@ -0,0 +1,22 @@
+"use client";
+import { ChartFrame } from "../../../lib/chart-frame.js";
+import { jsx } from "react/jsx-runtime";
+import { Area, AreaChart } from "recharts";
+//#region src/components/registry/charts/area-chart-card.tsx
+/** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
+function AreaChartCard({ stacked = false, ...props }) {
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		chart: AreaChart,
+		...props,
+		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Area, {
+			dataKey: key,
+			type: "monotone",
+			fill: color,
+			fillOpacity: stacked ? .4 : .2,
+			stroke: color,
+			stackId: stacked ? "stack" : void 0
+		}, key))
+	});
+}
+//#endregion
+export { AreaChartCard };

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -0,0 +1,9 @@
+import { SeriesChartProps } from "../../../lib/chart-series.js";
+//#region src/components/registry/charts/bar-chart-card.d.ts
+export interface BarChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
+  /** Stack the series in one bar per point instead of side by side. */
+  stacked?: boolean;
+}
+/** Values over an ordered axis as bars: one series, or several grouped or stacked. */
+export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
+//#endregion

package/dist/components/registry/charts/bar-chart-card.js

@@ -0,0 +1,25 @@
+"use client";
+import { ChartFrame } from "../../../lib/chart-frame.js";
+import { jsx } from "react/jsx-runtime";
+import { Bar, BarChart } from "recharts";
+//#region src/components/registry/charts/bar-chart-card.tsx
+/** Values over an ordered axis as bars: one series, or several grouped or stacked. */
+function BarChartCard({ stacked = false, ...props }) {
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		chart: BarChart,
+		...props,
+		children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Bar, {
+			dataKey: key,
+			fill: color,
+			stackId: stacked ? "stack" : void 0,
+			radius: !stacked ? 2 : index === props.series.length - 1 ? [
+				2,
+				2,
+				0,
+				0
+			] : 0
+		}, key))
+	});
+}
+//#endregion
+export { BarChartCard };

package/dist/components/registry/charts/line-chart-card.d.ts

@@ -0,0 +1,5 @@
+import { SeriesChartProps } from "../../../lib/chart-series.js";
+//#region src/components/registry/charts/line-chart-card.d.ts
+/** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
+export declare function LineChartCard<T extends object, K extends keyof T>(props: SeriesChartProps<T, K>): import("react").JSX.Element;
+//#endregion

package/dist/components/registry/charts/line-chart-card.js

@@ -0,0 +1,21 @@
+"use client";
+import { ChartFrame } from "../../../lib/chart-frame.js";
+import { jsx } from "react/jsx-runtime";
+import { Line, LineChart } from "recharts";
+//#region src/components/registry/charts/line-chart-card.tsx
+/** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
+function LineChartCard(props) {
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		chart: LineChart,
+		...props,
+		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Line, {
+			dataKey: key,
+			type: "monotone",
+			stroke: color,
+			strokeWidth: 2,
+			dot: false
+		}, key))
+	});
+}
+//#endregion
+export { LineChartCard };

package/dist/components/registry/dashboardcn/bar-list.js

@@ -1,5 +1,5 @@
-import { cn } from "../../../lib/utils.js";
 import { useLocale } from "../../siyahi/siyahi-provider.js";
+import { cn } from "../../../lib/utils.js";
 import { pct } from "../../../lib/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+import { ChartColor, ChartSeries, ChartSeriesItem, SeriesChartProps } from "./lib/chart-series.js";
+import { AreaChartCard, AreaChartCardProps } from "./components/registry/charts/area-chart-card.js";
+import { BarChartCard, BarChartCardProps } from "./components/registry/charts/bar-chart-card.js";
+import { LineChartCard } from "./components/registry/charts/line-chart-card.js";
 import { SectionCard, SectionCards } from "./components/registry/dashboard-01/section-cards.js";
 import { BarList, BarListItem, BarListProps } from "./components/registry/dashboardcn/bar-list.js";
 import { Activity, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, ColorConfig, Labels } from "./components/registry/heatmap/calendar-heatmap.js";
@@ -71,4 +75,4 @@ import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
 import { Formatters, TimeOptions, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, 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, CartesianGrid, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, 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, 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, DataTableRowMenuScope, DataTableSkeleton, DataTableSkeletonProps, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, 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, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, 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, 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, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, 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, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, 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, CartesianGrid, ChartColor, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, 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, 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, DataTableRowMenuScope, DataTableSkeleton, DataTableSkeletonProps, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, 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, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LineChartCard, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, 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, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, 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, XAxis, YAxis, badgeVariants, buttonVariants, 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

@@ -29,9 +29,12 @@ import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, Tabl
 import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./components/ui/tabs.js";
 import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
-import { SectionCards } from "./components/registry/dashboard-01/section-cards.js";
 import { defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, useLocale } from "./components/siyahi/siyahi-provider.js";
+import { AreaChartCard } from "./components/registry/charts/area-chart-card.js";
+import { BarChartCard } from "./components/registry/charts/bar-chart-card.js";
+import { LineChartCard } from "./components/registry/charts/line-chart-card.js";
+import { SectionCards } from "./components/registry/dashboard-01/section-cards.js";
 import { money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
 import { BarList } from "./components/registry/dashboardcn/bar-list.js";
 import { CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat } from "./components/registry/heatmap/calendar-heatmap.js";
@@ -69,4 +72,4 @@ import { LocalTime } from "./components/siyahi/local-time.js";
 import { PriceChart } from "./components/siyahi/price-chart.js";
 import { Treemap } from "./components/siyahi/treemap.js";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, Area, AreaChart, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, 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, 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, DataTableRowMenuScope, DataTableSkeleton, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Line, LineChart, LocalTime, NavMain, NavProjects, NavUser, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, ReferenceLine, 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, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, Area, AreaChart, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, 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, CartesianGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, 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, 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, DataTableRowMenuScope, DataTableSkeleton, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Line, LineChart, LineChartCard, LocalTime, NavMain, NavProjects, NavUser, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, ReferenceLine, 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, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };

package/dist/lib/chart-frame.d.ts

@@ -0,0 +1,22 @@
+import { ChartSeries, SeriesChartProps } from "./chart-series.js";
+import { ReactNode } from "react";
+import { AreaChart, BarChart, LineChart } from "recharts";
+//#region src/lib/chart-frame.d.ts
+interface ChartFrameProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
+  chart: typeof AreaChart | typeof BarChart | typeof LineChart;
+  /** One Bar, Area or Line per series. */
+  children: ReactNode;
+}
+/** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
+export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value: number) => string): (value: unknown, _name: unknown, item: {
+  dataKey?: unknown;
+}) => import("react").JSX.Element;
+/**
+ * The card, axes, grid, tooltip and legend the three chart cards share. Both
+ * axes keep Recharts' default ids: marks find their axes by id, and a page
+ * that gave its category axis its own id (dash#88) got a plot split in two
+ * and every tooltip headed with the series name instead of the category.
+ */
+export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, title, description, action, data, xKey, series, xFormatter, valueFormatter, yTickFormatter, height }: ChartFrameProps<T, K>): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/lib/chart-frame.js

@@ -0,0 +1,96 @@
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
+import { useLocale } from "../components/siyahi/siyahi-provider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+//#region src/lib/chart-frame.tsx
+/** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
+function seriesRow(series, formatValue) {
+	return (value, _name, item) => {
+		const entry = series.find(({ key }) => key === item.dataKey);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "size-2.5 shrink-0 rounded-xs",
+				style: { backgroundColor: entry?.color }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: entry?.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+				children: value == null ? "—" : formatValue(Number(value))
+			})
+		] });
+	};
+}
+/**
+* The card, axes, grid, tooltip and legend the three chart cards share. Both
+* axes keep Recharts' default ids: marks find their axes by id, and a page
+* that gave its category axis its own id (dash#88) got a plot split in two
+* and every tooltip headed with the series name instead of the category.
+*/
+function ChartFrame({ chart: Chart, children, title, description, action, data, xKey, series, xFormatter = String, valueFormatter, yTickFormatter, height }) {
+	const { numberLocale } = useLocale();
+	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
+		label,
+		color
+	}]));
+	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
+		/* @__PURE__ */ jsx(CardTitle, { children: title }),
+		description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+		action && /* @__PURE__ */ jsx(CardAction, { children: action })
+	] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ChartContainer, {
+		config,
+		className: "aspect-auto w-full",
+		style: { height },
+		children: /* @__PURE__ */ jsxs(Chart, {
+			data,
+			margin: {
+				left: 0,
+				right: 8
+			},
+			children: [
+				/* @__PURE__ */ jsx(CartesianGrid, {
+					vertical: false,
+					strokeDasharray: "3 3"
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: xKey,
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: (value) => xFormatter(value),
+					tick: { className: "font-mono" }
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tickLine: false,
+					axisLine: false,
+					width: "auto",
+					tickFormatter: yTickFormatter ?? formatValue,
+					tick: { className: "font-mono" }
+				}),
+				crossesZero && /* @__PURE__ */ jsx(ReferenceLine, {
+					y: 0,
+					stroke: "var(--border)"
+				}),
+				/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+					labelFormatter: (_, payload) => {
+						const row = payload[0]?.payload;
+						return row ? xFormatter(row[xKey]) : null;
+					},
+					formatter: seriesRow(series, formatValue)
+				}) }),
+				children,
+				/* @__PURE__ */ jsx(ChartLegend, {
+					content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+					itemSorter: null
+				})
+			]
+		})
+	}) })] });
+}
+//#endregion
+export { ChartFrame, seriesRow };

package/dist/lib/chart-series.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+//#region src/lib/chart-series.d.ts
+/** The colours a series may take: the five chart slots, and muted for an "Other" past five. */
+export type ChartColor = "var(--chart-1)" | "var(--chart-2)" | "var(--chart-3)" | "var(--chart-4)" | "var(--chart-5)" | "var(--muted-foreground)";
+/** The fields of a row that hold numbers: the ones a series can plot. */
+type NumericKey<T> = { [K in keyof T]-?: T[K] extends number | null | undefined ? K : never; }[keyof T] & string;
+/** One series: the field it plots, its name in the legend and tooltip, and its colour. */
+export interface ChartSeriesItem<T> {
+  key: NumericKey<T>;
+  label: string;
+  color: ChartColor;
+}
+/**
+ * The series in draw, stack and legend order; give the slots in order from
+ * --chart-1. A list, not an object keyed by field, because an object puts
+ * number-like keys such as "2024" first whatever order the page wrote them in.
+ */
+export type ChartSeries<T> = readonly ChartSeriesItem<T>[];
+/** What BarChartCard, AreaChartCard and LineChartCard all take. */
+export interface SeriesChartProps<T extends object, K extends keyof T> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** A range or mode toggle, top right of the card. */
+  action?: ReactNode;
+  /** One row per point on the axis, in axis order. */
+  data: T[];
+  /** The field the x axis reads: a month, an hour of day, a price bucket. One row per value; a repeated value is hidden behind the first. */
+  xKey: K;
+  series: ChartSeries<NoInfer<T>>;
+  /** The x axis ticks and the tooltip's heading. Defaults to the value as text. */
+  xFormatter?: (value: T[K]) => string;
+  /** A series' value in the tooltip, and the y axis unless yTickFormatter is set. Defaults to the locale's numbers. */
+  valueFormatter?: (value: number) => string;
+  /** The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. */
+  yTickFormatter?: (value: number) => string;
+  /** Height of the plot and legend, in pixels. */
+  height: number;
+}
+//#endregion
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.7-next.3",
+  "version": "0.1.8-next.2",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/registry.lock.json

@@ -1,6 +1,30 @@
 {
   "generatedBy": "packages/ui/scripts/generate.ts",
   "items": [
+    {
+      "file": "src/components/registry/charts/area-chart-card.tsx",
+      "registry": "@shadcn/chart-area-stacked",
+      "origin": "https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json",
+      "licence": "MIT, Copyright (c) 2023 shadcn, https://github.com/shadcn-ui/ui/blob/main/LICENSE.md",
+      "copied": "2026-10-21",
+      "sha256": "d65dbe0690431811cfb4c1117506b6ff4c411eb65db70c29c97cca1030abb0b5"
+    },
+    {
+      "file": "src/components/registry/charts/bar-chart-card.tsx",
+      "registry": "@shadcn/chart-bar-multiple",
+      "origin": "https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json",
+      "licence": "MIT, Copyright (c) 2023 shadcn, https://github.com/shadcn-ui/ui/blob/main/LICENSE.md",
+      "copied": "2026-10-21",
+      "sha256": "46fbdcf8c66b0def3836211e4e186eb3777b3daaca3b09dc6f94eb82ccc86309"
+    },
+    {
+      "file": "src/components/registry/charts/line-chart-card.tsx",
+      "registry": "@shadcn/chart-line-multiple",
+      "origin": "https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json",
+      "licence": "MIT, Copyright (c) 2023 shadcn, https://github.com/shadcn-ui/ui/blob/main/LICENSE.md",
+      "copied": "2026-10-21",
+      "sha256": "20c708ac3e313e275a84119970b6046142f24c869a9355caec5483aa4feb6ddd"
+    },
     {
       "file": "src/components/registry/dashboard-01/section-cards.tsx",
       "registry": "@shadcn/dashboard-01",