@siyahi/ui 0.1.9-next.20 → 0.1.9-next.21

package/dist/components/registry/heatmap/weekday-heatmap.d.ts

@@ -90,8 +90,10 @@ export type WeekdayHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
  * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
  */
-export declare const WeekdayHeatmap: ({ data, weekStart, hours, weekdays: displayedWeekdays, use12Hour, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare const WeekdayHeatmap: ({ data, weekStart, hours, weekdays: displayedWeekdays, use12Hour, blockSize: blockSizeProp, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: WeekdayHourlyActivityWithLevel;
   extra?: "row" | "column";
   highlighted?: boolean;
@@ -99,7 +101,7 @@ export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellHover?: (activity: WeekdayHourlyActivityWithLevel | null) => void;
   className?: string;
 };
-export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
+export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element | null;
 export declare namespace WeekdayHeatmapBlock {

package/dist/components/registry/heatmap/weekday-heatmap.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 import { format } from "date-fns";
@@ -48,6 +49,10 @@ const generateWeekdayLabels = (locale) => Array.from({ length: 7 }, (_, i) => {
 });
 const EMPTY_STYLE = {};
 const LABEL_MARGIN = 8;
+const LEGEND_SWATCH = 12;
+const MIN_FITTED_BLOCK = 14;
+const MAX_FITTED_BLOCK = 44;
+const DEFAULT_BLOCK = 24;
 const WeekdayHeatmapContext = createContext(null);
 const useWeekdayHeatmap = () => {
 	const context = use(WeekdayHeatmapContext);
@@ -85,8 +90,9 @@ const useWeekdayHeatmap = () => {
 * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
 * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
 */
-const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize = 24, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
+const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
+	const [rootRef, rootWidth] = useElementWidth();
 	const weekdays = useMemo(() => displayedWeekdays ?? Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7), [displayedWeekdays, weekStart]);
 	const dataWithLevels = useMemo(() => {
 		if (data.length === 0) return [];
@@ -159,9 +165,12 @@ const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displaye
 	]);
 	const labelWidth = fontSize * 3.5 + LABEL_MARGIN;
 	const totalCount = typeof totalCountProp === "number" ? totalCountProp : dataWithLevels.reduce((sum, a) => sum + a.value, 0);
+	const hasExtraColumn = resolvedExtraColumn !== null;
+	const columns = hours.length + (hasExtraColumn ? 2 : 0);
+	const fitted = (rootWidth - 24 - labelWidth - columns * blockMargin + (hasExtraColumn ? 0 : blockMargin)) / (columns + (hasExtraColumn ? 1 / (2 * blockAspectRatio) : 0));
+	const blockSize = blockSizeProp ?? (rootWidth > 0 ? Math.min(MAX_FITTED_BLOCK, Math.max(MIN_FITTED_BLOCK, fitted)) / blockAspectRatio : DEFAULT_BLOCK);
 	const blockWidth = blockSize * blockAspectRatio;
 	const labelHeight = fontSize + LABEL_MARGIN;
-	const hasExtraColumn = resolvedExtraColumn !== null;
 	const hasExtraRow = resolvedExtraRow !== null;
 	const width = hours.length * (blockWidth + blockMargin) + (hasExtraColumn ? blockSize / 2 + (blockWidth + blockMargin) * 2 : 0) - blockMargin + labelWidth;
 	const rowCount = weekdays.length + (hasExtraRow ? 1 : 0);
@@ -216,8 +225,9 @@ const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displaye
 	return /* @__PURE__ */ jsx(WeekdayHeatmapContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
 			"data-slot": "weekday-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2", className),
+			className: cn("flex flex-col gap-2", blockSizeProp === void 0 ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -227,7 +237,7 @@ const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displaye
 		})
 	});
 };
-const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
 	const { blockSize, blockWidth, blockMargin, blockRadius, labelWidth, labelHeight, levels, isNormalized, hours, weekdays, labels, colors } = useWeekdayHeatmap();
 	const level = Math.max(0, Math.min(colorStepCount(levels, isNormalized), activity.level));
 	const isExtraRow = extra === "row";
@@ -246,6 +256,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		ref,
 		"data-slot": "weekday-heatmap-block",
 		role: onCellClick ? "button" : "img",
+		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
 		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
@@ -254,6 +265,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		"data-hour": isExtraColumn ? "extra" : activity.hour,
 		"data-level": level,
 		"data-highlighted": highlighted || void 0,
+		"data-selected": selected || void 0,
 		height: blockSize,
 		rx: blockRadius,
 		ry: blockRadius,
@@ -262,6 +274,10 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		y: yPosition,
 		style: {
 			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			...selected ? {
+				stroke: "var(--foreground)",
+				strokeWidth: 2
+			} : {},
 			...styleProp
 		},
 		onClick: (event) => {
@@ -374,9 +390,9 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 			role: "img",
 			"aria-label": labels.heatmapLabel ?? "Activity heatmap by weekday and hour",
 			className: "block overflow-visible rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-			height: svgHeight + 40,
-			viewBox: `-20 -20 ${svgWidth + 40} ${svgHeight + 40}`,
-			width: svgWidth + 40,
+			height: svgHeight + 24,
+			viewBox: `-12 -12 ${svgWidth + 24} ${svgHeight + 24}`,
+			width: svgWidth + 24,
 			children: [
 				!hideHourLabels && /* @__PURE__ */ jsxs("g", {
 					className: cn("fill-current font-mono", labelClassName),
@@ -469,7 +485,7 @@ const WeekdayHeatmapStat = ({ compute, label, className, children, ...props }) =
 	});
 };
 const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { levels, isNormalized, blockSize, blockWidth, blockRadius, colors, labels } = useWeekdayHeatmap();
+	const { levels, isNormalized, blockRadius, colors, labels } = useWeekdayHeatmap();
 	const lessLabel = labelsProp?.less ?? "Less";
 	const moreLabel = labelsProp?.more ?? "More";
 	const legendLevels = Array.from({ length: levels }, (_, i) => isNormalized ? i + 1 : i);
@@ -486,14 +502,14 @@ const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...prop
 			legendLevels.map((level) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({ level }) }, `legend-level-${level}`) : /* @__PURE__ */ jsx("svg", {
 				role: "img",
 				"aria-label": (labels.legendLevelLabel ?? "{{level}} contributions").replace("{{level}}", String(level)),
-				height: blockSize,
-				width: blockWidth,
+				height: LEGEND_SWATCH,
+				width: LEGEND_SWATCH,
 				children: /* @__PURE__ */ jsx("rect", {
 					"data-level": level,
-					height: blockSize,
+					height: LEGEND_SWATCH,
 					rx: blockRadius,
 					ry: blockRadius,
-					width: blockWidth,
+					width: LEGEND_SWATCH,
 					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
 				})
 			}, `legend-level-${level}`)),

package/dist/components/registry/niko-table/core/data-table-context.d.ts

@@ -93,6 +93,11 @@ type DataTableContextProps<TData extends RowData> = DataTableContextState & {
   scrollContainer: HTMLElement | null;
   /** True below 40rem of table space; use for compact toolbar and record layouts. */
   isCompact: boolean;
+  /**
+   * Set while some columns do not fit and the table has `meta.compact`
+   * columns: they hide, rightmost first, until the reader asks for all.
+   */
+  compactColumns: CompactColumns | null;
   /** Internal: `<DataTable>` registers its scroll container element here. */
   registerScrollContainer: (el: HTMLElement | null) => void;
   /**
@@ -148,12 +153,22 @@ export declare enum DataTableActions {
   SET = 0,
   SET_IS_LOADING = 1
 }
+export interface CompactColumns {
+  /** True while columns are hidden to fit; false once the reader shows them all. */
+  collapsed: boolean;
+  /** The columns hidden to fit right now, for a cell to fold one under a kept figure. */
+  hidden: ReadonlySet<string>;
+  setCollapsed: (collapsed: boolean) => void;
+}
 interface DataTableProviderProps<TData extends RowData> {
   children: React.ReactNode;
   table: DataTableInstance<TData>;
   columns?: DataTableColumnDef<TData>[];
   isLoading?: boolean;
+  isCompact: boolean;
+  onWidthChange: (width: number) => void;
+  compactColumns: CompactColumns | null;
 }
-export declare function DataTableProvider<TData extends RowData>({ children, table, columns, isLoading: externalIsLoading }: DataTableProviderProps<TData>): React.JSX.Element;
+export declare function DataTableProvider<TData extends RowData>({ children, table, columns, isLoading: externalIsLoading, isCompact, onWidthChange, compactColumns }: DataTableProviderProps<TData>): React.JSX.Element;
 //#endregion
 export { DataTableContext };

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

@@ -1,4 +1,5 @@
 "use client";
+import { useTableWidth } from "../../../../lib/compact-columns.js";
 import { useGeneratedOptions } from "../hooks/use-generated-options.js";
 import { useHeaderMinWidths } from "../lib/use-header-min-widths.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -113,7 +114,7 @@ function useFlashSet() {
 		}
 	}, [])];
 }
-function DataTableProvider({ children, table, columns, isLoading: externalIsLoading }) {
+function DataTableProvider({ children, table, columns, isLoading: externalIsLoading, isCompact, onWidthChange, compactColumns }) {
 	const [state, dispatch] = useReducer(dataTableReducer, deriveInitialState(externalIsLoading));
 	const setIsLoading = useCallback((value) => {
 		dispatch({
@@ -127,25 +128,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 	}, []);
 	const [scrollContainer, setScrollContainer] = React.useState(null);
 	const registerScrollContainer = useCallback((el) => setScrollContainer(el), []);
-	const [isCompact, setIsCompact] = React.useState(false);
-	React.useLayoutEffect(() => {
-		if (!scrollContainer) return;
-		const measure = () => {
-			const width = scrollContainer.clientWidth;
-			if (width > 0) {
-				const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-				setIsCompact(width < 40 * rem);
-			}
-		};
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(scrollContainer);
-		window.addEventListener("resize", measure);
-		return () => {
-			observer.disconnect();
-			window.removeEventListener("resize", measure);
-		};
-	}, [scrollContainer]);
+	useTableWidth(scrollContainer, onWidthChange);
 	const scrollRowIntoView = useCallback((index, opts) => {
 		if (rowScrollerRef.current) {
 			rowScrollerRef.current(index, opts);
@@ -289,6 +272,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		registerRowScroller,
 		scrollContainer,
 		isCompact,
+		compactColumns,
 		registerScrollContainer,
 		headerMinWidths,
 		setColumnResizePreview: setManualResizePreview,
@@ -307,6 +291,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		registerRowScroller,
 		scrollContainer,
 		isCompact,
+		compactColumns,
 		registerScrollContainer,
 		headerMinWidths,
 		setManualResizePreview,

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

@@ -1,5 +1,6 @@
 import { TooltipProvider } from "../../../ui/tooltip.js";
 import { cn } from "../../../../lib/utils.js";
+import { fitColumns, isCompactWidth } from "../../../../lib/compact-columns.js";
 import { FILTER_VARIANTS, SYSTEM_COLUMN_IDS, SYSTEM_COLUMN_ID_LIST } from "../lib/constants.js";
 import { DataTableProvider } from "./data-table-context.js";
 import { detectFeaturesFromChildren } from "../config/feature-detection.js";
@@ -216,7 +217,23 @@ function DataTableRootInternal({ columns, data, children, className, config, get
 		...detectFeatures.enableColumnResizing ? { minSize: 40 } : {}
 	}), [detectFeatures.enableColumnResizing, detectFeatures.enableSorting]);
 	const controlledSorting = restState?.sorting ?? sorting;
-	const controlledColumnVisibility = restState?.columnVisibility ?? columnVisibility;
+	const [tableWidth, setTableWidth] = React.useState(0);
+	const isCompact = isCompactWidth(tableWidth);
+	const [showAllColumns, setShowAllColumns] = React.useState(false);
+	const requestedColumnVisibility = restState?.columnVisibility ?? columnVisibility;
+	const requestedColumnOrder = restState?.columnOrder ?? columnOrder;
+	const fitted = React.useMemo(() => fitColumns(columns, requestedColumnOrder, requestedColumnVisibility, tableWidth), [
+		columns,
+		requestedColumnOrder,
+		requestedColumnVisibility,
+		tableWidth
+	]);
+	const controlledColumnVisibility = fitted && !showAllColumns ? fitted.visibility : requestedColumnVisibility;
+	const compactColumns = React.useMemo(() => fitted && fitted.hidden.size > 0 ? {
+		collapsed: !showAllColumns,
+		hidden: showAllColumns ? NOTHING_HIDDEN : fitted.hidden,
+		setCollapsed: (value) => setShowAllColumns(!value)
+	} : null, [fitted, showAllColumns]);
 	const controlledRowSelection = restState?.rowSelection ?? rowSelection;
 	const controlledColumnFilters = restState?.columnFilters ?? columnFilters;
 	const controlledGlobalFilter = restState?.globalFilter !== void 0 ? restState.globalFilter : globalFilter$1;
@@ -369,6 +386,9 @@ function DataTableRootInternal({ columns, data, children, className, config, get
 		table,
 		columns: processedColumns,
 		isLoading,
+		isCompact,
+		onWidthChange: setTableWidth,
+		compactColumns,
 		children: /* @__PURE__ */ jsx(TooltipProvider, {
 			...tooltipProviderDelay,
 			children: /* @__PURE__ */ jsx("div", {
@@ -378,11 +398,16 @@ function DataTableRootInternal({ columns, data, children, className, config, get
 		})
 	});
 }
-function DataTableRoot({ table: externalTable, columns, data, children, className, isLoading, ...rest }) {
-	if (externalTable) return /* @__PURE__ */ jsx(DataTableProvider, {
-		table: externalTable,
+function ExternalTableRoot({ table, columns, children, className, isLoading }) {
+	const [tableWidth, setTableWidth] = React.useState(0);
+	const isCompact = isCompactWidth(tableWidth);
+	return /* @__PURE__ */ jsx(DataTableProvider, {
+		table,
 		columns,
 		isLoading,
+		isCompact,
+		onWidthChange: setTableWidth,
+		compactColumns: null,
 		children: /* @__PURE__ */ jsx(TooltipProvider, {
 			...tooltipProviderDelay,
 			children: /* @__PURE__ */ jsx("div", {
@@ -391,6 +416,16 @@ function DataTableRoot({ table: externalTable, columns, data, children, classNam
 			})
 		})
 	});
+}
+const NOTHING_HIDDEN = /* @__PURE__ */ new Set();
+function DataTableRoot({ table: externalTable, columns, data, children, className, isLoading, ...rest }) {
+	if (externalTable) return /* @__PURE__ */ jsx(ExternalTableRoot, {
+		table: externalTable,
+		columns,
+		className,
+		isLoading,
+		children
+	});
 	if (!columns || !data) throw new Error("DataTableRoot: Either provide a 'table' prop or both 'columns' and 'data' props");
 	return /* @__PURE__ */ jsx(DataTableRootInternal, {
 		columns,

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

@@ -41,6 +41,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 			};
 			return /* @__PURE__ */ jsxs(TableHead, {
 				"data-col-id": header.column.id,
+				"data-numeric": header.column.columnDef.meta?.variant === "number" || void 0,
 				style: headerStyle,
 				className: cn(!isCompact && header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),
 				children: [header.isPlaceholder ? null : /* @__PURE__ */ jsx(DataTableColumnHeaderRoot, {
@@ -82,6 +83,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 			return /* @__PURE__ */ jsx(TableCell, {
 				"data-flash": flashing ? "true" : void 0,
 				"data-col-id": cell.column.id,
+				"data-numeric": cell.column.columnDef.meta?.variant === "number" || void 0,
 				style: cellStyle,
 				className: cn(!cell.getIsGrouped() && "truncate", !isCompact && 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)

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

@@ -17,7 +17,7 @@ const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true)
 		flexShrink: 0,
 		zIndex: isHeader ? 20 : 10,
 		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)" }
+		boxShadow: isLeft ? "inset -1px 0 0 0 var(--border)" : "inset 1px 0 0 0 var(--border)"
 	};
 };
 //#endregion

package/dist/components/registry/niko-table/types/index.d.ts

@@ -23,6 +23,15 @@ declare module "@tanstack/react-table" {
      * `TableMeta.disableFlexFill`.
      */
     flex?: boolean;
+    /**
+     * Never hide this column to fit. Once any column sets it, a table whose
+     * columns do not fit its width hides the others, rightmost first, until
+     * they do, and `<DataTableCompactColumnsToggle />` shows them all again.
+     * Mark the few a reader needs to answer the table's question: the name and
+     * its result. Read `useDataTable().compactColumns?.hidden` in a cell to
+     * fold a hidden figure under a kept one.
+     */
+    compact?: boolean;
     variant?: FilterVariant;
     options?: Option[];
     range?: [number, number];

package/dist/components/registry/sidebar-07/nav-main.d.ts

@@ -10,6 +10,7 @@ export declare function NavMain({ items, label }: {
     items?: {
       title: string;
       url: string;
+      isActive?: boolean;
     }[];
   }[];
 }): import("react").JSX.Element;

package/dist/components/registry/sidebar-07/nav-main.js

@@ -29,14 +29,21 @@ function NavMain({ items, label = "Navigation" }) {
 		className: "group/collapsible",
 		render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-			render: /* @__PURE__ */ jsx(SidebarMenuButton, { tooltip: item.title }),
+			render: /* @__PURE__ */ jsx(SidebarMenuButton, {
+				tooltip: item.title,
+				isActive: item.isActive && !item.items?.some((subItem) => subItem.isActive)
+			}),
 			children: [
 				item.icon,
 				/* @__PURE__ */ jsx("span", { children: item.title }),
 				/* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })
 			]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
-			render: /* @__PURE__ */ jsx("a", { href: subItem.url }),
+			isActive: subItem.isActive,
+			render: /* @__PURE__ */ jsx("a", {
+				href: subItem.url,
+				"aria-current": subItem.isActive ? "page" : void 0
+			}),
 			onClick: closeDrawer,
 			children: /* @__PURE__ */ jsx("span", { children: subItem.title })
 		}) }, subItem.title)) }) })]

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

@@ -0,0 +1,24 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/siyahi/callout.d.ts
+declare const TONES: {
+  readonly neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground";
+  readonly accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link";
+  readonly warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning";
+  readonly positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive";
+  readonly negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative";
+};
+export interface CalloutProps extends Omit<ComponentProps<"aside">, "title"> {
+  /** neutral for an aside, accent for a key point, warning for a caution, positive or negative for a gain or a loss. */
+  tone?: keyof typeof TONES;
+  /** A lucide icon, drawn in the tone's colour. */
+  icon?: ReactNode;
+  title?: ReactNode;
+}
+/**
+ * A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
+ * inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use Alert or
+ * WarningAlert instead.
+ */
+export declare function Callout({ tone, icon, title, className, children, ...props }: CalloutProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/callout.js

@@ -0,0 +1,40 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/callout.tsx
+const TONES = {
+	neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground",
+	accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link",
+	warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning",
+	positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive",
+	negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative"
+};
+/**
+* A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
+* inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use Alert or
+* WarningAlert instead.
+*/
+function Callout({ tone = "neutral", icon, title, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		"data-slot": "callout",
+		"data-tone": tone,
+		className: cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", TONES[tone], className),
+		...props,
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			"data-slot": "callout-icon",
+			"aria-hidden": true,
+			className: "mt-0.5 shrink-0 [&>svg]:size-4",
+			children: icon
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1",
+			children: [title && /* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: title
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-pretty text-muted-foreground [&_strong]:text-foreground",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+export { Callout };

package/dist/components/siyahi/change-bar.d.ts

@@ -0,0 +1,21 @@
+import { DeltaProps } from "./delta.js";
+//#region src/components/siyahi/change-bar.d.ts
+export interface ChangeBarProps {
+  /** The signed change, as Delta takes it. */
+  value: number;
+  /** The column's largest change by size: Math.max(...rows.map((row) => Math.abs(row.change))). */
+  max: number;
+  /**
+   * Draws the bar from a centre line, losses leftward and gains rightward. Pass it when the column holds both signs:
+   * rows.some((row) => row.change < 0) && rows.some((row) => row.change > 0).
+   */
+  diverging?: boolean;
+  format?: DeltaProps["format"];
+  className?: string;
+}
+/**
+ * A table cell's change as a Delta over a 3px bar whose length is the change's size against the column's largest, so
+ * the rows rank by eye. The bar is neutral because it shows size; the Delta above it carries the gain or loss colour.
+ */
+export declare function ChangeBar({ value, max, diverging, format, className }: ChangeBarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/change-bar.js

@@ -0,0 +1,35 @@
+import { Delta } from "./delta.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/change-bar.tsx
+/**
+* A table cell's change as a Delta over a 3px bar whose length is the change's size against the column's largest, so
+* the rows rank by eye. The bar is neutral because it shows size; the Delta above it carries the gain or loss colour.
+*/
+function ChangeBar({ value, max, diverging = false, format, className }) {
+	const share = max > 0 ? Math.min(1, Math.abs(value) / max) : 0;
+	const half = diverging ? 50 : 100;
+	const side = diverging && value < 0 ? "right" : "left";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "change-bar",
+		className: cn("flex w-full flex-col items-end gap-1.5", className),
+		children: [/* @__PURE__ */ jsx(Delta, {
+			value,
+			format,
+			className: "font-medium"
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "relative h-0.75 w-full rounded-full bg-muted",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "change-bar-fill",
+				className: "absolute inset-y-0 rounded-full bg-foreground",
+				style: {
+					[side]: diverging ? "50%" : 0,
+					width: `${share * half}%`
+				}
+			}), diverging && /* @__PURE__ */ jsx("div", { className: "absolute -inset-y-1 left-1/2 w-px -translate-x-1/2 bg-muted-foreground" })]
+		})]
+	});
+}
+//#endregion
+export { ChangeBar };

package/dist/components/siyahi/data-table-compact-columns-toggle.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/siyahi/data-table-compact-columns-toggle.d.ts
+/** Renders only while some columns are hidden to fit, or the reader has shown them all. */
+export declare function DataTableCompactColumnsToggle(): import("react").JSX.Element | null;
+//#endregion

package/dist/components/siyahi/data-table-compact-columns-toggle.js

@@ -0,0 +1,19 @@
+import { Button } from "../ui/button.js";
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-compact-columns-toggle.tsx
+/** Renders only while some columns are hidden to fit, or the reader has shown them all. */
+function DataTableCompactColumnsToggle() {
+	const { compactColumns } = useDataTable();
+	if (!compactColumns) return null;
+	const { collapsed, setCollapsed } = compactColumns;
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm",
+		"aria-pressed": !collapsed,
+		onClick: () => setCollapsed(!collapsed),
+		children: collapsed ? `All columns (+${compactColumns.hidden.size})` : "Key columns"
+	});
+}
+//#endregion
+export { DataTableCompactColumnsToggle };

package/dist/components/siyahi/data-table-footnote.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-table-footnote.d.ts
+export interface DataTableFootnoteProps {
+  /** One sentence on how to read the table, such as what each bar measures. */
+  children: ReactNode;
+}
+/**
+ * A full-width last row, inside `DataTable` after its body, that explains the table's encoding. On a table wider than
+ * its card the note stays put at the card's width while the columns scroll under it.
+ */
+export declare function DataTableFootnote({ children }: DataTableFootnoteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-table-footnote.js

@@ -0,0 +1,35 @@
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/siyahi/data-table-footnote.tsx
+/**
+* A full-width last row, inside `DataTable` after its body, that explains the table's encoding. On a table wider than
+* its card the note stays put at the card's width while the columns scroll under it.
+*/
+function DataTableFootnote({ children }) {
+	const { table, scrollContainer } = useDataTable();
+	const [viewport, setViewport] = useState();
+	useEffect(() => {
+		if (!scrollContainer) return;
+		const observer = new ResizeObserver(() => setViewport(scrollContainer.clientWidth));
+		observer.observe(scrollContainer);
+		return () => observer.disconnect();
+	}, [scrollContainer]);
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "data-table-footnote",
+		children: /* @__PURE__ */ jsx("tr", {
+			className: "border-t",
+			children: /* @__PURE__ */ jsx("td", {
+				colSpan: table.getVisibleLeafColumns().length,
+				className: "p-0",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "sticky left-0 px-2 py-3 text-sm whitespace-normal text-muted-foreground",
+					style: { maxWidth: viewport },
+					children
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { DataTableFootnote };

package/dist/components/siyahi/default-sidebar-open.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/siyahi/default-sidebar-open.d.ts
+/**
+ * SidebarProvider's `defaultOpen` for an app shell: the reader's last choice, which the provider keeps in the
+ * `sidebar_state` cookie, else open — except on a short landscape screen, a phone held sideways, where an open
+ * sidebar leaves no room for the page. There it starts as the icon rail.
+ */
+export declare function defaultSidebarOpen(): boolean;
+//#endregion

package/dist/components/siyahi/default-sidebar-open.js

@@ -0,0 +1,13 @@
+//#region src/components/siyahi/default-sidebar-open.ts
+/**
+* SidebarProvider's `defaultOpen` for an app shell: the reader's last choice, which the provider keeps in the
+* `sidebar_state` cookie, else open — except on a short landscape screen, a phone held sideways, where an open
+* sidebar leaves no room for the page. There it starts as the icon rail.
+*/
+function defaultSidebarOpen() {
+	const saved = document.cookie.split("; ").find((entry) => entry.startsWith("sidebar_state="))?.slice(14);
+	if (saved !== void 0) return saved === "true";
+	return !matchMedia("(orientation: landscape) and (max-height: 30rem)").matches;
+}
+//#endregion
+export { defaultSidebarOpen };