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

package/dist/components/registry/niko-table/lib/render-cell-content.js

@@ -0,0 +1,65 @@
+import { Button } from "../../../ui/button.js";
+import { cn } from "../../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { flexRender } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/lib/render-cell-content.tsx
+/**
+* Renders a body cell with TanStack grouping / aggregation awareness.
+*
+* - Grouped column cell: expand/collapse control + value + leaf count
+* - Aggregated cell: `aggregatedCell` (falls back to `cell`)
+* - Placeholder cell: empty (grouped columns leave gaps on leaf rows)
+* - Otherwise: normal `cell` render
+*
+* Used by every body structure so grouping works the same for regular,
+* virtualized, and DnD tables.
+*/
+function renderCellContent(cell) {
+	const context = cell.getContext();
+	if ((context.table.atoms.grouping?.get() ?? []).length === 0) return flexRender(cell.column.columnDef.cell, context);
+	if (cell.getIsPlaceholder()) return null;
+	if (cell.getIsAggregated()) return flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, context);
+	if (cell.getIsGrouped()) {
+		const row = cell.row;
+		const canExpand = row.getCanExpand();
+		const isExpanded = row.getIsExpanded();
+		const leafCount = row.subRows.length;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1",
+			children: [
+				canExpand ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					className: cn("size-7 shrink-0", "dark:text-muted-foreground"),
+					"aria-expanded": isExpanded,
+					"aria-label": isExpanded ? "Collapse group" : "Expand group",
+					onClick: row.getToggleExpandedHandler(),
+					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, {
+						className: "size-4",
+						"aria-hidden": true
+					}) : /* @__PURE__ */ jsx(ChevronRight, {
+						className: "size-4",
+						"aria-hidden": true
+					})
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: flexRender(cell.column.columnDef.cell, context)
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-muted-foreground tabular-nums",
+					children: [
+						"(",
+						leafCount,
+						")"
+					]
+				})
+			]
+		});
+	}
+	return flexRender(cell.column.columnDef.cell, context);
+}
+//#endregion
+export { renderCellContent };

package/dist/components/registry/niko-table/lib/row-click.d.ts

@@ -0,0 +1,67 @@
+import { DataTableInstance } from "../types/index.js";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/lib/row-click.d.ts
+/**
+ * Returns `true` when the click landed on (or inside) an interactive
+ * element that should suppress `onRowClick`.
+ *
+ * Also suppresses when the user has an active text selection — accidental
+ * row clicks while drag-selecting cell text are a common annoyance,
+ * especially on rows that navigate to a detail view on click.
+ */
+export declare function isInteractiveClickTarget(target: HTMLElement): boolean;
+/**
+ * For delegated `<tbody>` handlers. Returns the matched row, or `null`
+ * if the click should be ignored (interactive target or no row found).
+ */
+export declare function resolveRowFromClick<TData extends RowData>(target: HTMLElement, table: DataTableInstance<TData>): import("@tanstack/react-table").Row<{
+  columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+  columnPinningFeature: import("@tanstack/react-table").TableFeature;
+  columnResizingFeature: import("@tanstack/react-table").TableFeature;
+  columnSizingFeature: import("@tanstack/react-table").TableFeature;
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  columnFacetingFeature: import("@tanstack/react-table").TableFeature;
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  facetedRowModel: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<import("@tanstack/react-table").TableFeatures, any>;
+  facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+  facetedMinMaxValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => undefined | [number, number];
+  filteredRowModel: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>) => () => import("@tanstack/react-table").RowModel<import("@tanstack/react-table").TableFeatures, any>;
+  filterFns: {
+    readonly extended: import("@tanstack/react-table").FilterFn<import("@tanstack/react-table").TableFeatures, RowData>;
+    readonly numberRange: import("@tanstack/react-table").FilterFn<import("@tanstack/react-table").TableFeatures, RowData>;
+    readonly dateRange: import("@tanstack/react-table").FilterFn<import("@tanstack/react-table").TableFeatures, RowData>;
+  };
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, RowData>) => () => import("@tanstack/react-table").RowModel<import("@tanstack/react-table").TableFeatures, RowData>;
+  sortFns: {
+    readonly alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    readonly alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    readonly basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    readonly datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    readonly text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    readonly textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+  rowExpandingFeature: import("@tanstack/react-table").TableFeature;
+  expandedRowModel: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>) => () => import("@tanstack/react-table").RowModel<import("@tanstack/react-table").TableFeatures, any>;
+  columnGroupingFeature: import("@tanstack/react-table").TableFeature;
+  rowAggregationFeature: import("@tanstack/react-table").TableFeature;
+  groupedRowModel: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>) => () => import("@tanstack/react-table").RowModel<import("@tanstack/react-table").TableFeatures, any>;
+  aggregationFns: {
+    readonly count: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number>;
+    readonly extent: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, [(number | Date) | undefined, (number | Date) | undefined]>;
+    readonly first: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, unknown>;
+    readonly last: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, unknown>;
+    readonly max: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, (number | Date) | undefined>;
+    readonly mean: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number | undefined>;
+    readonly median: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number | undefined>;
+    readonly min: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, (number | Date) | undefined>;
+    readonly sum: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number>;
+    readonly unique: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, unknown[]>;
+    readonly uniqueCount: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number>;
+  };
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>) => () => import("@tanstack/react-table").RowModel<import("@tanstack/react-table").TableFeatures, any>;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+}, TData> | null;
+//#endregion

package/dist/components/registry/niko-table/lib/row-click.js

@@ -0,0 +1,28 @@
+//#region src/components/registry/niko-table/lib/row-click.ts
+/**
+* Returns `true` when the click landed on (or inside) an interactive
+* element that should suppress `onRowClick`.
+*
+* Also suppresses when the user has an active text selection — accidental
+* row clicks while drag-selecting cell text are a common annoyance,
+* especially on rows that navigate to a detail view on click.
+*/
+function isInteractiveClickTarget(target) {
+	const selection = typeof window !== "undefined" ? window.getSelection?.() : null;
+	if (selection && !selection.isCollapsed && selection.toString().length > 0) return true;
+	return Boolean(target.closest("button") || target.closest("input") || target.closest("textarea") || target.closest("select") || target.closest("a") || target.closest("label") || target.closest("[contenteditable]") || target.closest("[role=\"button\"]") || target.closest("[role=\"checkbox\"]") || target.closest("[role=\"combobox\"]") || target.closest("[role=\"menuitem\"]") || target.closest("[role=\"textbox\"]") || target.closest("[data-radix-collection-item]") || target.closest("[data-slot=\"checkbox\"]") || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.tagName === "BUTTON" || target.tagName === "A");
+}
+/**
+* For delegated `<tbody>` handlers. Returns the matched row, or `null`
+* if the click should be ignored (interactive target or no row found).
+*/
+function resolveRowFromClick(target, table) {
+	if (isInteractiveClickTarget(target)) return null;
+	const rowEl = target.closest("tr[data-row-id]");
+	if (!rowEl) return null;
+	const rowId = rowEl.getAttribute("data-row-id");
+	if (rowId === null) return null;
+	return table.getRow(rowId) ?? null;
+}
+//#endregion
+export { isInteractiveClickTarget, resolveRowFromClick };

package/dist/components/registry/niko-table/lib/styles.d.ts

@@ -0,0 +1,6 @@
+import { DataTableFeatures } from "./data-table-features.js";
+import React from "react";
+import { Column, RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/lib/styles.d.ts
+export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean) => React.CSSProperties;
+//#endregion

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

@@ -0,0 +1,24 @@
+import "@tanstack/react-table";
+//#region src/components/registry/niko-table/lib/styles.ts
+const getCommonPinningStyles = (column, isHeader = false) => {
+	const isPinned = column.getIsPinned();
+	if (!isPinned) return {};
+	const isLeft = isPinned === "start";
+	const columnSize = column.getSize();
+	return {
+		position: "sticky",
+		top: isHeader ? 0 : void 0,
+		left: isLeft ? `${column.getStart("start")}px` : void 0,
+		right: !isLeft ? `${column.getAfter("end")}px` : void 0,
+		opacity: 1,
+		width: columnSize,
+		minWidth: columnSize,
+		maxWidth: columnSize,
+		flexShrink: 0,
+		zIndex: isHeader ? 20 : 10,
+		backgroundColor: "var(--background)",
+		...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)" }
+	};
+};
+//#endregion
+export { getCommonPinningStyles };

package/dist/components/registry/niko-table/lib/use-header-min-widths.d.ts

@@ -0,0 +1,17 @@
+import { DataTableInstance } from "../types/index.js";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/lib/use-header-min-widths.d.ts
+/**
+ * Measure the natural width each column's header needs so a column is never
+ * rendered so narrow that its label truncates on load (header-fit).
+ *
+ * Returns `columnId -> minimum width in px` (label width + header chrome). The
+ * caller floors each un-resized column at this width; a column the user has
+ * explicitly resized is left alone. Pure measurement — nothing is written to
+ * `columnSizing`, so it never persists or goes stale.
+ *
+ * Recomputes only when the visible columns, their labels, or the header font
+ * change — measurement itself is O(columns) with zero reflow.
+ */
+export declare function useHeaderMinWidths<TData extends RowData>(table: DataTableInstance<TData>, scrollElement: HTMLElement | null, enabled: boolean): ReadonlyMap<string, number>;
+//#endregion

package/dist/components/registry/niko-table/lib/use-header-min-widths.js

@@ -0,0 +1,82 @@
+import { formatLabel } from "./format.js";
+import * as React$1 from "react";
+//#region src/components/registry/niko-table/lib/use-header-min-widths.ts
+const BASE_HEADER_CHROME_PX = 28;
+const SORT_AFFORDANCE_PX = 24;
+const EMPTY_MIN_WIDTHS = /* @__PURE__ */ new Map();
+let measureCanvas = null;
+function getMeasureContext() {
+	if (typeof document === "undefined") return null;
+	if (!measureCanvas) measureCanvas = document.createElement("canvas");
+	return measureCanvas.getContext("2d");
+}
+/**
+* The label text a column renders in its header. Mirrors the composable
+* title's precedence (`useDerivedColumnTitle`): `meta.label`, else a plain
+* string `header`, else the formatted column id — the same fallback
+* `DataTableColumnTitle` renders when nothing else is set. One gap this can't
+* see: a JSX `<DataTableColumnTitle title="..." />` override lives in rendered
+* output, not the column def — mirror such overrides into `meta.label` so
+* header-fit measures the right string.
+*/
+function headerLabel(column) {
+	const columnDef = column.columnDef;
+	if (columnDef.meta?.label) return columnDef.meta.label;
+	if (typeof columnDef.header === "string") return columnDef.header;
+	return formatLabel(column.id);
+}
+/** Content equality so a re-measure with identical results keeps identity. */
+function minWidthsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const [id, width] of b) if (a.get(id) !== width) return false;
+	return true;
+}
+/**
+* Measure the natural width each column's header needs so a column is never
+* rendered so narrow that its label truncates on load (header-fit).
+*
+* Returns `columnId -> minimum width in px` (label width + header chrome). The
+* caller floors each un-resized column at this width; a column the user has
+* explicitly resized is left alone. Pure measurement — nothing is written to
+* `columnSizing`, so it never persists or goes stale.
+*
+* Recomputes only when the visible columns, their labels, or the header font
+* change — measurement itself is O(columns) with zero reflow.
+*/
+function useHeaderMinWidths(table, scrollElement, enabled) {
+	const [minWidths, setMinWidths] = React$1.useState(EMPTY_MIN_WIDTHS);
+	const leafColumns = table.getVisibleLeafColumns();
+	const signature = leafColumns.map((c) => `${c.id}:${headerLabel(c) ?? ""}:${c.getCanSort() ? 1 : 0}`).join("|");
+	React$1.useLayoutEffect(() => {
+		const store = (next) => setMinWidths((prev) => minWidthsEqual(prev, next) ? prev : next);
+		if (!enabled || !scrollElement) {
+			store(EMPTY_MIN_WIDTHS);
+			return;
+		}
+		const ctx = getMeasureContext();
+		const fontEl = scrollElement.querySelector("thead [data-slot=\"column-title\"]") ?? scrollElement.querySelector("thead th[data-col-id]");
+		if (!ctx || !fontEl) {
+			store(EMPTY_MIN_WIDTHS);
+			return;
+		}
+		const cs = getComputedStyle(fontEl);
+		ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+		const next = /* @__PURE__ */ new Map();
+		for (const column of leafColumns) {
+			if (!column.getCanResize()) continue;
+			const label = headerLabel(column);
+			if (!label) continue;
+			const textWidth = ctx.measureText(label).width;
+			const chrome = BASE_HEADER_CHROME_PX + (column.getCanSort() ? SORT_AFFORDANCE_PX : 0);
+			next.set(column.id, Math.ceil(textWidth) + chrome);
+		}
+		store(next);
+	}, [
+		enabled,
+		scrollElement,
+		signature
+	]);
+	return minWidths;
+}
+//#endregion
+export { useHeaderMinWidths };

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

@@ -0,0 +1,141 @@
+import { FILTER_OPERATORS, FILTER_VARIANTS, FilterOperator as FilterOperator$1, FilterVariant as FilterVariant$1, JOIN_OPERATORS, JoinOperator as JoinOperator$1 } from "../lib/constants.js";
+import { DataTableFeatures } from "../lib/data-table-features.js";
+import * as React$1 from "react";
+import { Cell, Column, ColumnDef, Header, ReactTable, Row, RowData, TableFeatures } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/types/index.d.ts
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue> {
+    label?: string;
+    placeholder?: string;
+    /**
+     * Which column absorbs the leftover row width when column resizing is on
+     * (needs `<DataTableColumnResize />`). Filling is ON BY DEFAULT — the first
+     * non-pinned data column flexes automatically — so you rarely set this.
+     *
+     * - `true` overrides the default to flex THIS column instead (use when the
+     *   first column isn't the one that should grow).
+     * - `false` opts this column out of being auto-picked.
+     *
+     * The flex column renders with no width and absorbs the surplus, so every
+     * other column keeps its `size` and a trailing actions/menu column pins to
+     * the right edge. Pure layout — never touches `columnSizing`, so no
+     * persistence side effects. Turn filling off for a whole table with
+     * `TableMeta.disableFlexFill`.
+     */
+    flex?: boolean;
+    variant?: FilterVariant;
+    options?: Option[];
+    range?: [number, number];
+    /**
+     * Automatically generate options for select/multiSelect columns if not provided.
+     * When true and no static `options` exist, generation logic (wrappers / hooks) may supply them.
+     */
+    autoOptions?: boolean;
+    /** Whether to automatically rename option labels using formatLabel. When false, uses raw value as label. */
+    autoOptionsFormat?: boolean;
+    /**
+     * Per-column label formatter applied when options are auto-derived from
+     * row data. Receives the stringified row value and returns the display
+     * label. Wins over `autoOptionsFormat` when present. Ignored when the
+     * caller passes explicit `options`.
+     */
+    formatOptionLabel?: (value: string) => string;
+    /** Per-column override for showing counts (falls back to wrapper prop). */
+    showCounts?: boolean;
+    /** Per-column override for using filtered rows for counts (falls back to wrapper prop). */
+    dynamicCounts?: boolean;
+    /** Merge strategy override: preserve | augment | replace (falls back to wrapper prop). */
+    mergeStrategy?: "preserve" | "augment" | "replace";
+    unit?: string;
+    icon?: React$1.ComponentType<{
+      className?: string;
+    }>;
+    expandedContent?: (row: TData) => React$1.ReactNode;
+  }
+  interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
+    joinOperator?: JoinOperator;
+    hasIndividualJoinOperators?: boolean;
+    /**
+     * Turn off default flex fill for the whole table, so columns size to their
+     * own widths and the table scrolls horizontally instead of stretching to
+     * fill. Use for wide, many-column tables meant to scroll.
+     *
+     * Set it statically via `<DataTableRoot meta={{ disableFlexFill: true }}>`
+     * — it's read when table options are built, so toggling it at runtime
+     * alone won't re-apply until another table state change rebuilds them.
+     */
+    disableFlexFill?: boolean;
+  }
+}
+export interface Option {
+  label: string;
+  value: string;
+  count?: number;
+  icon?: React$1.ComponentType<{
+    className?: string;
+  }>;
+}
+export type FilterVariant = FilterVariant$1;
+export type FilterOperator = FilterOperator$1;
+export type JoinOperator = JoinOperator$1;
+/**
+ * Extended column filter with additional metadata
+ */
+export interface ExtendedColumnFilter<TData> {
+  id: Extract<keyof TData, string>;
+  value: string | string[];
+  variant: FilterVariant;
+  operator: FilterOperator;
+  filterId: string;
+  joinOperator?: JoinOperator;
+}
+/** Global filter type */
+export type GlobalFilter = string | Record<string, unknown>;
+/**
+ * Extended column sort (for URL state management)
+ */
+export interface ExtendedColumnSort<TData> {
+  id: Extract<keyof TData, string>;
+  desc: boolean;
+}
+/**
+ * Query keys for URL state management
+ */
+export interface QueryKeys {
+  page?: string;
+  perPage?: string;
+  sort?: string;
+  filters?: string;
+  joinOperator?: string;
+}
+/**
+ * Extended column definition for data table
+ * Inherits all TanStack Table ColumnDef properties
+ */
+export type DataTableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue> & {};
+/**
+ * Mixed column arrays (plain objects and `createDataTableColumnHelper` results).
+ * Per-column `TValue` varies, so the array uses `any` the same way TanStack's
+ * `columns` option does.
+ */
+export type DataTableColumns<TData extends RowData> = DataTableColumnDef<TData, any>[];
+/**
+ * Data table row type
+ * Alias for TanStack Table Row
+ */
+export type DataTableRow<TData extends RowData> = Row<DataTableFeatures, TData> & {};
+export type DataTableColumn<TData extends RowData, TValue = unknown> = Column<DataTableFeatures, TData, TValue>;
+export type DataTableHeader<TData extends RowData, TValue = unknown> = Header<DataTableFeatures, TData, TValue>;
+export type DataTableCell<TData extends RowData, TValue = unknown> = Cell<DataTableFeatures, TData, TValue>;
+export type DataTableInstance<TData extends RowData> = ReactTable<DataTableFeatures, TData> & {};
+/**
+ * Convenience type for accessing constant values with better type safety
+ */
+export type JoinOperatorValues = typeof JOIN_OPERATORS;
+export type FilterOperatorValues = typeof FILTER_OPERATORS;
+export type FilterVariantValues = typeof FILTER_VARIANTS;
+/**
+ * Utility type to get the literal values from constant objects
+ */
+export type ValueOf<T> = T[keyof T];
+//#endregion

package/dist/components/registry/niko-table/types/index.js

@@ -0,0 +1,2 @@
+import "react";
+import "@tanstack/react-table";

package/dist/components/registry/niko-table/ui/table.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+//#region src/components/registry/niko-table/ui/table.d.ts
+declare function TableComponent({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableComponent, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/registry/niko-table/ui/table.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "../../../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/ui/table.tsx
+function TableComponent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("table", {
+		"data-slot": "table",
+		className: cn("w-full caption-bottom text-sm", className),
+		...props
+	});
+}
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		tabIndex: 0,
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsx(TableComponent, {
+			className,
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-sm text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableComponent, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/registry/sidebar-07/app-sidebar.d.ts

@@ -0,0 +1,18 @@
+import { NavMain } from "./nav-main.js";
+import { NavProjects } from "./nav-projects.js";
+import { NavUser } from "./nav-user.js";
+import { TeamSwitcher } from "./team-switcher.js";
+import { Sidebar } from "../../ui/sidebar.js";
+import * as React$1 from "react";
+//#region src/components/registry/sidebar-07/app-sidebar.d.ts
+export interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
+  navMain: React$1.ComponentProps<typeof NavMain>["items"];
+  navLabel?: string;
+  /** Shown at the top instead of the team switcher. */
+  header?: React$1.ReactNode;
+  teams?: React$1.ComponentProps<typeof TeamSwitcher>["teams"];
+  projects?: React$1.ComponentProps<typeof NavProjects>["projects"];
+  user?: React$1.ComponentProps<typeof NavUser>["user"];
+}
+export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, ...props }: AppSidebarProps): React$1.JSX.Element;
+//#endregion

package/dist/components/registry/sidebar-07/app-sidebar.js

@@ -0,0 +1,26 @@
+"use client";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "../../ui/sidebar.js";
+import { NavMain } from "./nav-main.js";
+import { NavProjects } from "./nav-projects.js";
+import { NavUser } from "./nav-user.js";
+import { TeamSwitcher } from "./team-switcher.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/registry/sidebar-07/app-sidebar.tsx
+function AppSidebar({ navMain, navLabel, header, teams, projects, user, ...props }) {
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		collapsible: "icon",
+		...props,
+		children: [
+			(header || teams) && /* @__PURE__ */ jsx(SidebarHeader, { children: header ?? (teams && /* @__PURE__ */ jsx(TeamSwitcher, { teams })) }),
+			/* @__PURE__ */ jsxs(SidebarContent, { children: [/* @__PURE__ */ jsx(NavMain, {
+				items: navMain,
+				label: navLabel
+			}), projects && /* @__PURE__ */ jsx(NavProjects, { projects })] }),
+			user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) }),
+			/* @__PURE__ */ jsx(SidebarRail, {})
+		]
+	});
+}
+//#endregion
+export { AppSidebar };

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

@@ -0,0 +1,15 @@
+//#region src/components/registry/sidebar-07/nav-main.d.ts
+export declare function NavMain({ items, label }: {
+  label?: string | undefined;
+  items: {
+    title: string;
+    url: string;
+    icon?: React.ReactNode;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,25 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/collapsible.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "../../ui/sidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+//#region src/components/registry/sidebar-07/nav-main.tsx
+function NavMain({ items, label = "Navigation" }) {
+	return /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }), /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsxs(Collapsible, {
+		defaultOpen: item.isActive,
+		className: "group/collapsible",
+		render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			render: /* @__PURE__ */ jsx(SidebarMenuButton, { tooltip: item.title }),
+			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 }),
+			children: /* @__PURE__ */ jsx("span", { children: subItem.title })
+		}) }, subItem.title)) }) })]
+	}, item.title)) })] });
+}
+//#endregion
+export { NavMain };

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

@@ -0,0 +1,9 @@
+//#region src/components/registry/sidebar-07/nav-projects.d.ts
+export declare function NavProjects({ projects }: {
+  projects: {
+    name: string;
+    url: string;
+    icon: React.ReactNode;
+  }[];
+}): import("react").JSX.Element;
+//#endregion