@siyahi/ui 0.1.1-next.4 → 0.1.2-next.1

package/dist/components/registry/dashboardcn/bar-list.d.ts

@@ -6,6 +6,8 @@ export interface BarListItem {
   /** Renders the label as a link. */
   href?: string;
   icon?: React$1.ReactNode;
+  /** Secondary figure after the label, such as a `Delta`. */
+  detail?: React$1.ReactNode;
   /** Stable key when names can repeat. */
   key?: string;
 }

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

@@ -31,28 +31,36 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 				className: "flex items-center gap-3 text-sm",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "relative flex h-8 min-w-0 flex-1 items-center",
-					children: [/* @__PURE__ */ jsx("div", {
-						"aria-hidden": "true",
-						className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
-						style: {
-							width: `${width}%`,
-							backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
-						}
-					}), /* @__PURE__ */ jsxs(Label, {
-						...item.href ? { href: item.href } : {},
-						...onItemClick && !item.href ? {
-							type: "button",
-							onClick: () => onItemClick(item)
-						} : {},
-						className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
-						children: [item.icon ? /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground shrink-0 [&>svg]:size-4",
-							children: item.icon
-						}) : null, /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: item.name
-						})]
-					})]
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
+							style: {
+								width: `${width}%`,
+								backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
+							}
+						}),
+						/* @__PURE__ */ jsxs(Label, {
+							...item.href ? { href: item.href } : {},
+							...onItemClick && !item.href ? {
+								type: "button",
+								onClick: () => onItemClick(item)
+							} : {},
+							className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
+							children: [item.icon ? /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground shrink-0 [&>svg]:size-4",
+								children: item.icon
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.name
+							})]
+						}),
+						item.detail ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "bar-list-detail",
+							className: "text-muted-foreground relative shrink-0 pr-2 text-xs tabular-nums",
+							children: item.detail
+						}) : null
+					]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex shrink-0 items-center gap-2 tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {

package/dist/components/registry/niko-table/core/data-table-structure.js

@@ -27,7 +27,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 	const flexColumnIds = resolveFlexColumnIds(table);
 	const columnSizing = table.state.columnSizing;
 	return /* @__PURE__ */ jsx(TableHeader, {
-		className: cn(sticky && "sticky top-0 z-30 bg-background", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
+		className: cn(sticky && "sticky top-0 z-30 bg-card", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
 		children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
 			const isFlex = flexColumnIds.has(header.column.id);
 			const headerStyle = {
@@ -83,7 +83,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 				"data-flash": flashing ? "true" : void 0,
 				"data-col-id": cell.column.id,
 				style: cellStyle,
-				className: cn(!cell.getIsGrouped() && "truncate", cell.column.getIsPinned() && "bg-background group-hover:bg-muted/50 group-data-[context-menu-open]:bg-muted/50 group-data-[state=selected]:bg-muted"),
+				className: cn(!cell.getIsGrouped() && "truncate", cell.column.getIsPinned() && "bg-linear-to-r group-hover:from-muted/50 group-hover:to-muted/50 group-data-[context-menu-open]:from-muted/50 group-data-[context-menu-open]:to-muted/50 group-data-[state=selected]:from-muted group-data-[state=selected]:to-muted"),
 				children: renderCellContent(cell)
 			}, cell.id);
 		})

package/dist/components/registry/niko-table/filters/table-column-actions.js

@@ -1,5 +1,5 @@
 import { Button } from "../../../ui/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
 import { cn } from "../../../../lib/utils.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,13 +34,13 @@ function TableColumnActions({ children, className, label = "Column Actions", isA
 			className: "sr-only",
 			children: label
 		})]
-	}) }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+	}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 		align,
 		className: "w-48",
-		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
 			className: "text-xs font-normal text-muted-foreground",
 			children: label
-		}), children]
+		}), children] })
 	})] });
 }
 TableColumnActions.displayName = "TableColumnActions";

package/dist/components/registry/niko-table/filters/table-column-sort.js

@@ -1,6 +1,6 @@
 "use client";
 import { Button } from "../../../ui/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../ui/tooltip.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_VARIANTS } from "../lib/constants.js";
@@ -76,8 +76,7 @@ function TableColumnSortOptions({ column, table: propTable, variant: propVariant
 			column.toggleSorting(isDesc, canMultiSort ? isMulti : false);
 		}
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		withSeparator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [withSeparator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 		/* @__PURE__ */ jsxs(DropdownMenuLabel, {
 			className: "flex items-center justify-between text-xs font-normal text-muted-foreground",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -122,7 +121,7 @@ function TableColumnSortOptions({ column, table: propTable, variant: propVariant
 			onClick: () => column.clearSorting(),
 			children: [/* @__PURE__ */ jsx(icons.unsorted, { className: "mr-2 size-4 text-muted-foreground/70" }), "Clear Sort"]
 		})
-	] });
+	] })] });
 }
 /**
 * Standalone dropdown menu for sorting.

package/dist/components/registry/niko-table/lib/styles.js

@@ -16,7 +16,7 @@ const getCommonPinningStyles = (column, isHeader = false) => {
 		maxWidth: columnSize,
 		flexShrink: 0,
 		zIndex: isHeader ? 20 : 10,
-		backgroundColor: "var(--background)",
+		backgroundColor: "var(--card)",
 		...isLeft ? { boxShadow: "inset -2px 0 0 0 color-mix(in oklab, var(--foreground) 40%, transparent), 4px 0 8px -2px color-mix(in oklab, var(--foreground) 14%, transparent)" } : { boxShadow: "inset 2px 0 0 0 color-mix(in oklab, var(--foreground) 40%, transparent), -4px 0 8px -2px color-mix(in oklab, var(--foreground) 14%, transparent)" }
 	};
 };

package/dist/components/siyahi/treemap.d.ts

@@ -1,14 +1,23 @@
 //#region src/components/siyahi/treemap.d.ts
 export interface TreemapItem {
   name: string;
-  /** Tile area, such as the holding's value. */
+  /** Tile area, such as the holding's value. Zero, negative and non-finite weights draw no tile. */
   weight: number;
-  /** Signed change as a fraction; sets the heat. */
-  change: number;
+  /** Signed change as a fraction; sets the heat. `null` when unknown: a muted tile marked "—". */
+  change: number | null;
+  /** Unique key when names repeat, such as one symbol held at two brokers. Defaults to `name`. */
+  key?: string;
+  /** Tiles of one group, such as a sector, sit together under the group's name, even a group of one. */
+  group?: string;
 }
-/** Holdings heat map: area by weight, colour by signed change, hand-drawn SVG. */
-export declare function Treemap({ items, height }: {
-  items: TreemapItem[];
+export interface TreemapProps<T extends TreemapItem> {
+  items: T[];
   height: number;
-}): import("react").JSX.Element;
+  /** ±range: the change, as a fraction, that takes the deepest heat step. Default 0.05 (±5%); a range that is not a positive number uses the default. */
+  range?: number;
+  /** Gets the item under the pointer, and null when the pointer moves onto a group's name or leaves the map. */
+  onHover?: (item: T | null) => void;
+}
+/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover }: TreemapProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/treemap.js

@@ -1,15 +1,10 @@
 import { useFormat } from "../../lib/format.js";
+import { heat, layout } from "../../lib/treemap.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
 //#region src/components/siyahi/treemap.tsx
-function heat(change) {
-	if (change === 0) return "var(--muted)";
-	const mix = Math.min(5, Math.ceil(Math.abs(change) * 100)) * 12;
-	return `color-mix(in oklab, var(${change > 0 ? "--positive" : "--negative"}) ${mix}%, var(--card))`;
-}
-/** Holdings heat map: area by weight, colour by signed change, hand-drawn SVG. */
-function Treemap({ items, height }) {
+/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+function Treemap({ items, height, range, onHover }) {
 	const ref = useRef(null);
 	const [width, setWidth] = useState(0);
 	const { pct } = useFormat();
@@ -18,39 +13,57 @@ function Treemap({ items, height }) {
 		if (ref.current) observer.observe(ref.current);
 		return () => observer.disconnect();
 	}, []);
-	const root = hierarchy({ children: items }).sum((d) => d.weight ?? 0);
-	const leaves = treemap().size([width, height]).paddingInner(2).tile(treemapSquarify)(root).leaves();
+	const { groups, tiles } = layout(items, width, height);
+	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "treemap",
 		style: { height },
-		children: /* @__PURE__ */ jsx("svg", {
+		children: /* @__PURE__ */ jsxs("svg", {
 			width,
 			height,
 			role: "img",
 			"aria-label": "Treemap of holdings by weight and change",
 			className: "text-xs",
-			children: leaves.map(({ data, x0, y0, x1, y1 }) => /* @__PURE__ */ jsxs("g", {
-				transform: `translate(${x0},${y0})`,
+			onPointerLeave: () => onHover?.(null),
+			children: [groups.map(({ group, ...box }) => /* @__PURE__ */ jsxs("svg", {
+				...box,
+				"data-slot": "treemap-group",
+				onPointerEnter: () => onHover?.(null),
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "100%",
+					height: "100%",
+					fill: "none",
+					pointerEvents: "all"
+				}), /* @__PURE__ */ jsx("text", {
+					x: 2,
+					y: 12,
+					className: "fill-muted-foreground font-medium",
+					children: group
+				})]
+			}, group)), tiles.map(({ item, ...box }) => /* @__PURE__ */ jsxs("svg", {
+				...box,
+				"data-slot": "treemap-tile",
+				onPointerEnter: () => onHover?.(item),
 				children: [/* @__PURE__ */ jsx("rect", {
-					width: x1 - x0,
-					height: y1 - y0,
+					width: "100%",
+					height: "100%",
 					rx: 4,
-					style: { fill: heat(data.change ?? 0) }
-				}), x1 - x0 > 56 && y1 - y0 > 36 && /* @__PURE__ */ jsxs("text", {
+					style: { fill: heat(item.change, range) }
+				}), box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
 					x: 8,
 					y: 18,
 					className: "fill-foreground",
 					children: [/* @__PURE__ */ jsx("tspan", {
 						className: "font-medium",
-						children: data.name
-					}), /* @__PURE__ */ jsxs("tspan", {
+						children: item.name
+					}), /* @__PURE__ */ jsx("tspan", {
 						x: 8,
 						dy: 16,
-						children: [(data.change ?? 0) > 0 ? "▲ " : (data.change ?? 0) < 0 ? "▼ " : "", pct(Math.abs(data.change ?? 0))]
+						children: change(item.change)
 					})]
 				})]
-			}, data.name))
+			}, item.key ?? item.name))]
 		})
 	});
 }

package/dist/index.d.ts

@@ -43,7 +43,7 @@ import { LocalTime, LocalTimeProps } from "./components/siyahi/local-time.js";
 import { PriceChart, PriceChartProps } from "./components/siyahi/price-chart.js";
 import { SiyahiLocale, defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, SiyahiProviderProps, useLocale } from "./components/siyahi/siyahi-provider.js";
-import { Treemap, TreemapItem } from "./components/siyahi/treemap.js";
+import { Treemap, TreemapItem, TreemapProps } from "./components/siyahi/treemap.js";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/ui/alert.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./components/ui/avatar.js";
 import { Badge, badgeVariants } from "./components/ui/badge.js";
@@ -70,4 +70,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 { 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, 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 { 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 };

package/dist/lib/treemap.d.ts

@@ -0,0 +1,23 @@
+//#region src/lib/treemap.d.ts
+interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export interface Layout<T> {
+  groups: (Box & {
+    group: string;
+  })[];
+  tiles: (Box & {
+    item: T;
+  })[];
+}
+/** Squarified layout: items without a group are tiles of their own, the rest sit together under their group's label. */
+export declare function layout<T extends {
+  weight: number;
+  group?: string;
+}>(items: T[], width: number, height: number): Layout<T>;
+export declare function heat(change: number | null, range?: number): string;
+//#endregion
+export {};

package/dist/lib/treemap.js

@@ -0,0 +1,40 @@
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
+//#region src/lib/treemap.ts
+/** Height of a group's label row, above its tiles. */
+const GROUP_LABEL = 18;
+const box = ({ x0, y0, x1, y1 }) => ({
+	x: x0,
+	y: y0,
+	width: x1 - x0,
+	height: y1 - y0
+});
+const area = (weight) => weight !== void 0 && Number.isFinite(weight) && weight > 0 ? weight : 0;
+/** Squarified layout: items without a group are tiles of their own, the rest sit together under their group's label. */
+function layout(items, width, height) {
+	const nested = { children: [...Map.groupBy(items, (item) => item.group)].flatMap(([group, members]) => {
+		const tiles = members.map((item) => ({ item }));
+		return group === void 0 ? tiles : [{
+			group,
+			children: tiles
+		}];
+	}) };
+	const root = treemap().size([width, height]).paddingInner(2).paddingTop(({ data }) => data.group === void 0 ? 0 : GROUP_LABEL).tile(treemapSquarify)(hierarchy(nested).sum(({ item }) => area(item?.weight)));
+	return {
+		groups: (root.children ?? []).flatMap((node) => node.data.group === void 0 || !node.value ? [] : [{
+			...box(node),
+			height: GROUP_LABEL,
+			group: node.data.group
+		}]),
+		tiles: root.leaves().flatMap((node) => node.data.item === void 0 || !node.value ? [] : [{
+			...box(node),
+			item: node.data.item
+		}])
+	};
+}
+function heat(change, range = .05) {
+	if (!change) return "var(--muted)";
+	const mix = Math.min(5, Math.ceil(Math.abs(change) / (Number.isFinite(range) && range > 0 ? range : .05) * 5)) * 12;
+	return `color-mix(in oklab, var(${change > 0 ? "--positive" : "--negative"}) ${mix}%, var(--card))`;
+}
+//#endregion
+export { heat, layout };

package/package.json

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