@siyahi/ui 0.0.0-stage → 0.1.0-next.3

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

@@ -0,0 +1,489 @@
+import { cn } from "../../../lib/utils.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+//#region src/components/registry/heatmap/weekday-heatmap.tsx
+const colorStepCount = (levels, isNormalized) => Math.max(1, isNormalized ? levels : levels - 1);
+const calculateLevel = (value, minValue, maxValue, levels, isNormalized) => {
+	const steps = colorStepCount(levels, isNormalized);
+	if (!Number.isFinite(value)) return isNormalized ? 1 : 0;
+	if (isNormalized) {
+		if (maxValue <= minValue) return 1;
+		const percentage = (value - minValue) / (maxValue - minValue);
+		return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
+	}
+	if (value <= 0 || maxValue <= 0) return 0;
+	const percentage = value / maxValue;
+	return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
+};
+const getLevelFill = (level, levels, isNormalized, highlighted = false, colors) => {
+	const emptyColor = colors?.empty ?? "var(--color-secondary)";
+	const scaleColor = colors?.scale ?? "var(--color-chart-1)";
+	if (level === 0) return emptyColor;
+	const steps = colorStepCount(levels, isNormalized);
+	const opacity = steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1));
+	return `color-mix(in oklch, ${scaleColor} ${highlighted ? Math.round(opacity * .6) : opacity}%, transparent)`;
+};
+const DEFAULT_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0"));
+const TWELVE_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => {
+	if (i === 0) return "AM";
+	if (i < 12) return String(i);
+	if (i === 12) return "PM";
+	return String(i - 12);
+});
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const DEFAULT_WEEKDAY_LABELS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+const generateWeekdayLabels = (locale) => Array.from({ length: 7 }, (_, i) => {
+	const date = new Date(2e3, 0, 2 + i);
+	return format(date, "EEE", { locale });
+});
+const EMPTY_STYLE = {};
+const LABEL_MARGIN = 8;
+const WeekdayHeatmapContext = createContext(null);
+const useWeekdayHeatmap = () => {
+	const context = use(WeekdayHeatmapContext);
+	if (!context) throw new Error("WeekdayHeatmap components must be used within a WeekdayHeatmap");
+	return context;
+};
+/**
+* Weekday Heatmap
+*
+* A GitHub punch card style heatmap showing activity distribution by weekday (rows) and hour (columns).
+* Renders a 7 × 24 grid with optional extra row (aggregated per hour) and extra column (aggregated per weekday).
+*
+* @example
+* ```tsx
+* <WeekdayHeatmap data={data} weekStart={1} use12Hour>
+*   <WeekdayHeatmapBody>
+*     {({ activity }) => (
+*       <WeekdayHeatmapBlock activity={activity} />
+*     )}
+*   </WeekdayHeatmapBody>
+*   <WeekdayHeatmapFooter>
+*     <WeekdayHeatmapStat />
+*     <WeekdayHeatmapLegend />
+*   </WeekdayHeatmapFooter>
+* </WeekdayHeatmap>
+* ```
+*
+* @param data - Array of activities with weekday (0-6 for Sun-Sat), hour (0-23), and numeric value
+* @param weekStart - First day of week (0=Sunday, 1=Monday). Default: 0
+* @param use12Hour - Use 12-hour format for hour labels. Default: false
+* @param blockSize - Block height in pixels. Default: 24
+* @param blockAspectRatio - Block width/height ratio. Default: 1 (square)
+* @param levels - Total number of legend cells (including empty when not normalized). Default: 5
+* @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values like temperature). When false (default), treats 0 as empty and scales from 0 to max.
+* @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, 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 levels = Math.max(1, levelsProp);
+	const dataWithLevels = useMemo(() => {
+		if (data.length === 0) return [];
+		const maxRegular = data.reduce((m, d) => Math.max(m, d.value), 1);
+		const minRegular = isNormalized ? data.reduce((m, d) => Math.min(m, d.value), Infinity) : 0;
+		return data.map((activity) => ({
+			...activity,
+			level: calculateLevel(activity.value, minRegular, maxRegular, levels, isNormalized)
+		}));
+	}, [
+		data,
+		levels,
+		isNormalized
+	]);
+	const resolvedExtraRow = useMemo(() => {
+		if (!extraRow) return null;
+		const values = extraRow.compute(data);
+		const maxVal = values.reduce((m, v) => Math.max(m, v), 1);
+		const minVal = isNormalized ? values.reduce((m, v) => Math.min(m, v), Infinity) : 0;
+		return {
+			label: extraRow.label,
+			values: values.map((value, hour) => ({
+				hour,
+				value,
+				level: calculateLevel(value, minVal, maxVal, levels, isNormalized)
+			}))
+		};
+	}, [
+		extraRow,
+		data,
+		levels,
+		isNormalized
+	]);
+	const resolvedExtraColumn = useMemo(() => {
+		if (!extraColumn) return null;
+		const values = extraColumn.compute(data);
+		const maxVal = values.reduce((m, v) => Math.max(m, v), 1);
+		const minVal = isNormalized ? values.reduce((m, v) => Math.min(m, v), Infinity) : 0;
+		return {
+			label: extraColumn.label,
+			values: values.map((value, weekday) => ({
+				weekday,
+				value,
+				level: calculateLevel(value, minVal, maxVal, levels, isNormalized)
+			}))
+		};
+	}, [
+		extraColumn,
+		data,
+		levels,
+		isNormalized
+	]);
+	const labels = useMemo(() => {
+		const weekdayLabels = locale ? generateWeekdayLabels(locale) : DEFAULT_WEEKDAY_LABELS;
+		return {
+			hours: use12Hour ? TWELVE_HOUR_LABELS : DEFAULT_HOUR_LABELS,
+			endHour: use12Hour ? "12" : "00",
+			weekdays: weekdayLabels,
+			cellLabel: "{{weekday}} {{hour}}: {{value}}",
+			heatmapLabel: "Activity heatmap by weekday and hour",
+			legendLabel: "Activity intensity legend",
+			legendLevelLabel: "{{level}} contributions",
+			...labelsProp
+		};
+	}, [
+		locale,
+		use12Hour,
+		labelsProp
+	]);
+	const labelWidth = fontSize * 3.5 + LABEL_MARGIN;
+	const totalCount = typeof totalCountProp === "number" ? totalCountProp : dataWithLevels.reduce((sum, a) => sum + a.value, 0);
+	const blockWidth = blockSize * blockAspectRatio;
+	const labelHeight = fontSize + LABEL_MARGIN;
+	const hasExtraColumn = resolvedExtraColumn !== null;
+	const hasExtraRow = resolvedExtraRow !== null;
+	const width = 24 * (blockWidth + blockMargin) + (hasExtraColumn ? blockSize / 2 + (blockWidth + blockMargin) * 2 : 0) - blockMargin + labelWidth;
+	const rowCount = hasExtraRow ? 8 : 7;
+	const extraRowGap = hasExtraRow ? blockSize + blockMargin : 0;
+	const height = rowCount * (blockSize + blockMargin) + extraRowGap - blockMargin + labelHeight;
+	const contextValue = useMemo(() => ({
+		data: dataWithLevels,
+		extraRow: resolvedExtraRow,
+		extraColumn: resolvedExtraColumn,
+		blockMargin,
+		blockRadius,
+		blockSize,
+		blockAspectRatio,
+		blockWidth,
+		fontSize,
+		labels,
+		labelWidth,
+		labelHeight,
+		levels,
+		isNormalized,
+		totalCount,
+		width,
+		height,
+		weekStart,
+		colors
+	}), [
+		dataWithLevels,
+		resolvedExtraRow,
+		resolvedExtraColumn,
+		blockMargin,
+		blockRadius,
+		blockSize,
+		blockAspectRatio,
+		blockWidth,
+		fontSize,
+		labels,
+		labelWidth,
+		labelHeight,
+		levels,
+		isNormalized,
+		totalCount,
+		width,
+		height,
+		weekStart,
+		colors
+	]);
+	if (data.length === 0) return emptyState ? emptyState : null;
+	return /* @__PURE__ */ jsx(WeekdayHeatmapContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "weekday-heatmap",
+			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			style: {
+				fontSize,
+				...style
+			},
+			...props,
+			children
+		})
+	});
+};
+const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+	const { blockSize, blockWidth, blockMargin, blockRadius, labelWidth, labelHeight, levels, isNormalized, weekStart, labels, colors } = useWeekdayHeatmap();
+	const level = Math.max(0, Math.min(colorStepCount(levels, isNormalized), activity.level));
+	const isExtraRow = extra === "row";
+	const isExtraColumn = extra === "column";
+	const rowIndex = isExtraRow ? 7 : (activity.weekday - weekStart + 7) % 7;
+	const extraRowGap = isExtraRow ? blockSize + blockMargin : 0;
+	const yPosition = labelHeight + (blockSize + blockMargin) * rowIndex + extraRowGap;
+	const extraColumnGap = isExtraColumn ? blockWidth + blockMargin : 0;
+	const xPosition = isExtraColumn ? labelWidth + 24 * (blockWidth + blockMargin) + blockSize / 2 + extraColumnGap : labelWidth + (blockWidth + blockMargin) * activity.hour;
+	const weekdayToken = isExtraRow ? "extra" : labels.weekdays?.[activity.weekday] ?? String(activity.weekday);
+	const hourToken = isExtraColumn ? "extra" : `${String(activity.hour).padStart(2, "0")}:00`;
+	const ariaLabel = (labels.cellLabel ?? "{{weekday}} {{hour}}: {{value}}").replace("{{weekday}}", weekdayToken).replace("{{hour}}", hourToken).replace("{{value}}", String(activity.value));
+	return /* @__PURE__ */ jsx("rect", {
+		ref,
+		"data-slot": "weekday-heatmap-block",
+		role: onCellClick ? "button" : "img",
+		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),
+		"data-value": activity.value,
+		"data-weekday": isExtraRow ? "extra" : activity.weekday,
+		"data-hour": isExtraColumn ? "extra" : activity.hour,
+		"data-level": level,
+		"data-highlighted": highlighted || void 0,
+		height: blockSize,
+		rx: blockRadius,
+		ry: blockRadius,
+		width: blockWidth,
+		x: xPosition,
+		y: yPosition,
+		style: {
+			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			...styleProp
+		},
+		onClick: (event) => {
+			onCellClick?.(activity);
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (onCellClick && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				onCellClick(activity);
+			}
+			onKeyDown?.(event);
+		},
+		onMouseEnter: (event) => {
+			onCellHover?.(activity);
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			onCellHover?.(null);
+			onMouseLeave?.(event);
+		},
+		...props
+	});
+};
+WeekdayHeatmapBlock.displayName = "WeekdayHeatmapBlock";
+const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false, className, labelClassName, children, renderExtraRow, renderExtraColumn, ...props }) => {
+	const { data, extraRow, extraColumn, blockSize, blockWidth, blockMargin, labels, labelWidth, labelHeight, fontSize, weekStart } = useWeekdayHeatmap();
+	const hasExtraRow = extraRow !== null;
+	const hasExtraColumn = extraColumn !== null;
+	const activityMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		data.forEach((activity) => {
+			map.set(`${activity.weekday}-${activity.hour}`, activity);
+		});
+		return map;
+	}, [data]);
+	const extraColumnMap = useMemo(() => {
+		if (!extraColumn) return null;
+		const map = /* @__PURE__ */ new Map();
+		extraColumn.values.forEach((v) => {
+			map.set(v.weekday, v);
+		});
+		return map;
+	}, [extraColumn]);
+	const regularActivities = useMemo(() => {
+		const activities = [];
+		for (let di = 0; di < 7; di++) {
+			const weekday = (weekStart + di) % 7;
+			for (let hour = 0; hour < 24; hour++) activities.push({
+				activity: activityMap.get(`${weekday}-${hour}`) ?? {
+					weekday,
+					hour,
+					value: 0,
+					level: 0
+				},
+				weekdayIndex: di
+			});
+		}
+		return activities;
+	}, [activityMap, weekStart]);
+	const extraColumnActivities = useMemo(() => {
+		if (!extraColumnMap) return [];
+		return Array.from({ length: 7 }, (_, di) => {
+			const weekday = (weekStart + di) % 7;
+			const entry = extraColumnMap.get(weekday);
+			return entry ? {
+				activity: {
+					weekday,
+					hour: 0,
+					value: entry.value,
+					level: entry.level
+				},
+				weekdayIndex: di
+			} : null;
+		}).filter((a) => a !== null);
+	}, [extraColumnMap, weekStart]);
+	const extraRowActivities = useMemo(() => {
+		if (!extraRow) return [];
+		return extraRow.values.map(({ hour, value, level }) => ({
+			activity: {
+				weekday: 0,
+				hour,
+				value,
+				level
+			},
+			weekdayIndex: 7
+		}));
+	}, [extraRow]);
+	const rowCount = hasExtraRow ? 8 : 7;
+	const extraRowGap = hasExtraRow ? blockSize + blockMargin : 0;
+	const svgHeight = rowCount * (blockSize + blockMargin) + extraRowGap - blockMargin + labelHeight;
+	const extraColumnGap = hasExtraColumn ? blockWidth + blockMargin : 0;
+	const svgWidth = hasExtraColumn ? labelWidth + 24 * (blockWidth + blockMargin) + blockSize / 2 + (blockWidth + blockMargin) + extraColumnGap : labelWidth + 24 * (blockWidth + blockMargin) - blockMargin;
+	const orderedWeekdayIndices = Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "weekday-heatmap-body",
+		className: cn("max-w-full overflow-x-auto overflow-y-hidden", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			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,
+			children: [
+				!hideHourLabels && /* @__PURE__ */ jsxs("g", {
+					className: cn("fill-current font-mono", labelClassName),
+					children: [
+						HOURS.map((hour) => {
+							const label = labels.hours?.[hour] ?? "";
+							return /* @__PURE__ */ jsx("text", {
+								x: labelWidth + (blockWidth + blockMargin) * hour,
+								y: 0,
+								textAnchor: "middle",
+								dominantBaseline: "hanging",
+								style: { fontSize: `${fontSize * .75}px` },
+								children: label
+							}, `hour-${hour}`);
+						}),
+						labels.endHour != null && /* @__PURE__ */ jsx("text", {
+							x: labelWidth + (blockWidth + blockMargin) * 24,
+							y: 0,
+							textAnchor: "middle",
+							dominantBaseline: "hanging",
+							style: { fontSize: `${fontSize * .75}px` },
+							children: labels.endHour
+						}, "hour-end"),
+						hasExtraColumn && /* @__PURE__ */ jsx("text", {
+							x: labelWidth + 24 * (blockWidth + blockMargin) + blockSize / 2 + (blockWidth + blockMargin) + blockWidth / 2,
+							y: 0,
+							textAnchor: "middle",
+							dominantBaseline: "hanging",
+							style: { fontSize: `${fontSize * .75}px` },
+							children: extraColumn?.label
+						}, "extra-col-label")
+					]
+				}),
+				!hideWeekdayLabels && /* @__PURE__ */ jsxs("g", {
+					className: cn("fill-current font-mono", labelClassName),
+					children: [orderedWeekdayIndices.map((weekday, displayIndex) => {
+						const label = labels.weekdays?.[weekday] ?? "";
+						const yPosition = labelHeight + (blockSize + blockMargin) * displayIndex + blockSize / 2;
+						return /* @__PURE__ */ jsx("text", {
+							x: labelWidth - 8,
+							y: yPosition,
+							dominantBaseline: "middle",
+							textAnchor: "end",
+							style: { fontSize: `${fontSize * .75}px` },
+							children: label
+						}, `weekday-${weekday}`);
+					}), hasExtraRow && /* @__PURE__ */ jsx("text", {
+						x: labelWidth - 8,
+						y: labelHeight + (blockSize + blockMargin) * 7 + (blockSize + blockMargin) + blockSize / 2,
+						dominantBaseline: "middle",
+						textAnchor: "end",
+						style: { fontSize: `${fontSize * .75}px` },
+						children: extraRow?.label
+					}, "weekday-extra")]
+				}),
+				regularActivities.map(({ activity, weekdayIndex }) => /* @__PURE__ */ jsx(Fragment, { children: children({
+					activity,
+					weekdayIndex
+				}) }, `${activity.weekday}-${activity.hour}`)),
+				extraColumnActivities.map(({ activity, weekdayIndex }) => /* @__PURE__ */ jsx(Fragment, { children: (renderExtraColumn ?? children)({
+					activity,
+					weekdayIndex
+				}) }, `extra-column-${activity.weekday}`)),
+				extraRowActivities.map(({ activity, weekdayIndex }) => /* @__PURE__ */ jsx(Fragment, { children: (renderExtraRow ?? children)({
+					activity,
+					weekdayIndex
+				}) }, `extra-row-${activity.hour}`))
+			]
+		})
+	});
+};
+const WeekdayHeatmapFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "weekday-heatmap-footer",
+	className: cn("flex flex-wrap gap-1 whitespace-nowrap sm:gap-x-4", className),
+	...props
+});
+const WeekdayHeatmapStat = ({ compute, label, className, children, ...props }) => {
+	const { data, totalCount, labels } = useWeekdayHeatmap();
+	const value = compute ? compute(data) : totalCount;
+	if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		value,
+		data
+	}) });
+	const template = label ?? labels.stat ?? "{{value}} contributions";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "weekday-heatmap-stat",
+		className: cn("text-muted-foreground tabular-nums", className),
+		...props,
+		children: template.replace("{{value}}", String(value))
+	});
+};
+const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
+	const { levels, isNormalized, blockSize, blockWidth, 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);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-slot": "weekday-heatmap-legend",
+		"aria-label": labels.legendLabel ?? "Activity intensity legend",
+		className: cn("ml-auto flex items-center gap-1 text-muted-foreground", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "mr-1 font-medium text-xs",
+				children: lessLabel
+			}),
+			legendLevels.map((level) => children ? /* @__PURE__ */ jsx(Fragment, { 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,
+				children: /* @__PURE__ */ jsx("rect", {
+					"data-level": level,
+					height: blockSize,
+					rx: blockRadius,
+					ry: blockRadius,
+					width: blockWidth,
+					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
+				})
+			}, `legend-level-${level}`)),
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-1 font-medium text-xs",
+				children: moreLabel
+			})
+		]
+	});
+};
+//#endregion
+export { WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat };

package/dist/components/registry/niko-table/components/data-table-column-actions.d.ts

@@ -0,0 +1,26 @@
+import { TableColumnActions } from "../filters/table-column-actions.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/components/data-table-column-actions.d.ts
+/**
+ * Composable container for column actions.
+ *
+ * Uses column context to automatically detect active states (pinned, sorted, etc.).
+ *
+ * @example
+ * ```tsx
+ * <DataTableColumnActions>
+ *   <DataTableColumnSortOptions />
+ *   <DataTableColumnPinOptions />
+ *   <DataTableColumnHideOptions />
+ * </DataTableColumnActions>
+ * ```
+ */
+export declare function DataTableColumnActions<TData extends RowData, TValue>(props: Omit<React.ComponentProps<typeof TableColumnActions>, "isActive"> & {
+  /** Override to manually set active state */
+  isActive?: boolean;
+}): React.JSX.Element;
+export declare namespace DataTableColumnActions {
+  var displayName: string;
+}
+//#endregion

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

@@ -0,0 +1,32 @@
+"use client";
+import { TableColumnActions } from "../filters/table-column-actions.js";
+import { useColumnHeaderContext } from "./data-table-column-header.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/components/data-table-column-actions.tsx
+/**
+* Composable container for column actions.
+*
+* Uses column context to automatically detect active states (pinned, sorted, etc.).
+*
+* @example
+* ```tsx
+* <DataTableColumnActions>
+*   <DataTableColumnSortOptions />
+*   <DataTableColumnPinOptions />
+*   <DataTableColumnHideOptions />
+* </DataTableColumnActions>
+* ```
+*/
+function DataTableColumnActions(props) {
+	const context = useColumnHeaderContext(false);
+	const autoIsActive = context?.column ? !!(context.column.getIsSorted() || context.column.getIsPinned() || context.column.getIsFiltered()) : false;
+	const isActive = props.isActive ?? autoIsActive;
+	return /* @__PURE__ */ jsx(TableColumnActions, {
+		...props,
+		isActive
+	});
+}
+DataTableColumnActions.displayName = "DataTableColumnActions";
+//#endregion
+export { DataTableColumnActions };

package/dist/components/registry/niko-table/components/data-table-column-filter.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+//#region src/components/registry/niko-table/components/data-table-column-filter.d.ts
+/**
+ * Wrapper for groups of column filters.
+ */
+export declare function DataTableColumnFilter({ children, className }: {
+  children?: React.ReactNode;
+  className?: string;
+}): React.JSX.Element | null;
+export declare namespace DataTableColumnFilter {
+  var displayName: string;
+}
+//#endregion

package/dist/components/registry/niko-table/components/data-table-column-filter.js

@@ -0,0 +1,17 @@
+import { cn } from "../../../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/components/data-table-column-filter.tsx
+/**
+* Wrapper for groups of column filters.
+*/
+function DataTableColumnFilter({ children, className }) {
+	if (children) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", className),
+		children
+	});
+	return null;
+}
+DataTableColumnFilter.displayName = "DataTableColumnFilter";
+//#endregion
+export { DataTableColumnFilter };

package/dist/components/registry/niko-table/components/data-table-column-header.d.ts

@@ -0,0 +1,30 @@
+import { DataTableColumn } from "../types/index.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/components/data-table-column-header.d.ts
+interface TableColumnHeaderContextValue<TData extends RowData, TValue> {
+  column: DataTableColumn<TData, TValue>;
+}
+export declare function useColumnHeaderContext<TData extends RowData, TValue>(required: true): TableColumnHeaderContextValue<TData, TValue>;
+export declare function useColumnHeaderContext<TData extends RowData, TValue>(required: false): TableColumnHeaderContextValue<TData, TValue> | undefined;
+/**
+ * Provider for column header context.
+ * Used internally by DataTableHeader to provide context to composable header components.
+ */
+export declare function DataTableColumnHeaderRoot<TData extends RowData, TValue>({ column, children }: {
+  column: DataTableColumn<TData, TValue>;
+  children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace DataTableColumnHeaderRoot {
+  var displayName: string;
+}
+export type DataTableColumnHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Composable Column Header container.
+ */
+export declare function DataTableColumnHeader({ className, children, ...props }: DataTableColumnHeaderProps): React.JSX.Element;
+export declare namespace DataTableColumnHeader {
+  var displayName: string;
+}
+//#endregion
+export {};

package/dist/components/registry/niko-table/components/data-table-column-header.js

@@ -0,0 +1,35 @@
+import { cn } from "../../../../lib/utils.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/components/data-table-column-header.tsx
+const TableColumnHeaderContext = React.createContext(void 0);
+function useColumnHeaderContext(required = true) {
+	const context = React.useContext(TableColumnHeaderContext);
+	if (required && !context) throw new Error("useColumnHeaderContext must be used within DataTableColumnHeaderRoot");
+	return context;
+}
+/**
+* Provider for column header context.
+* Used internally by DataTableHeader to provide context to composable header components.
+*/
+function DataTableColumnHeaderRoot({ column, children }) {
+	const contextValue = React.useMemo(() => ({ column }), [column]);
+	return /* @__PURE__ */ jsx(TableColumnHeaderContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+/**
+* Composable Column Header container.
+*/
+function DataTableColumnHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group flex w-full min-w-0 items-center justify-between gap-1", className),
+		...props,
+		children
+	});
+}
+DataTableColumnHeaderRoot.displayName = "DataTableColumnHeaderRoot";
+DataTableColumnHeader.displayName = "DataTableColumnHeader";
+//#endregion
+export { DataTableColumnHeader, DataTableColumnHeaderRoot, useColumnHeaderContext };

package/dist/components/registry/niko-table/components/data-table-column-sort.d.ts

@@ -0,0 +1,21 @@
+import { TableColumnSortMenu, TableColumnSortOptions } from "../filters/table-column-sort.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/components/data-table-column-sort.d.ts
+/**
+ * Sorting options for column header menu using context.
+ */
+export declare function DataTableColumnSortOptions<TData extends RowData, TValue>(props: Omit<React.ComponentProps<typeof TableColumnSortOptions>, "column" | "table">): React.JSX.Element;
+export declare namespace DataTableColumnSortOptions {
+  var displayName: string;
+}
+/**
+ * Sorting menu for column header using context.
+ *
+ * Standalone button variant for inline use outside dropdown menus.
+ */
+export declare function DataTableColumnSortMenu<TData extends RowData, TValue>(props: Omit<React.ComponentProps<typeof TableColumnSortMenu>, "column" | "table">): React.JSX.Element;
+export declare namespace DataTableColumnSortMenu {
+  var displayName: string;
+}
+//#endregion