@siyahi/ui 0.1.8-next.4 → 0.1.9-next.10

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

@@ -0,0 +1,118 @@
+import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
+import { pct } from "../../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/registry/dashboardcn/distribution-bar.tsx
+const defaultColors = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)"
+];
+function DistributionBar({ segments, valueFormatter, showLegend = true, showValues = false, max, min, markers = [], highlighted = null, onHover, className, "aria-label": ariaLabel, ...props }) {
+	const locale = useLocale();
+	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value));
+	const total = segments.reduce((sum, segment) => sum + Math.abs(segment.value), 0);
+	const gains = segments.reduce((sum, segment) => sum + Math.max(segment.value, 0), 0);
+	const losses = segments.reduce((sum, segment) => sum + Math.min(segment.value, 0), 0);
+	const bottom = min ?? losses;
+	const top = max ?? gains;
+	const span = top - bottom || 1;
+	const position = (value) => (value - bottom) / span * 100;
+	const shown = markers.filter((marker) => marker.at >= bottom && marker.at <= top).map((marker, index) => ({
+		...marker,
+		key: `${marker.at}:${marker.label ?? ""}:${index}`
+	}));
+	let above = 0;
+	let below = 0;
+	const resolved = segments.map((segment, index) => {
+		const key = segment.key ?? segment.name;
+		const size = Math.abs(segment.value);
+		const start = segment.value < 0 ? below -= size : (above += size) - size;
+		return {
+			...segment,
+			key,
+			color: segment.color ?? defaultColors[index % defaultColors.length],
+			share: total > 0 ? size / total : 0,
+			left: position(start),
+			width: size / span * 100
+		};
+	});
+	const figure = (segment) => max === void 0 ? pct(segment.share, locale) : format(segment.value);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "distribution-bar",
+		className: cn("flex flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				shown.some((m) => m.label) ? /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground relative h-4 font-mono text-xs",
+					children: shown.map((marker) => marker.label ? /* @__PURE__ */ jsx("span", {
+						className: cn("absolute top-0 whitespace-nowrap", position(marker.at) <= 5 ? "translate-x-0" : position(marker.at) >= 95 ? "-translate-x-full" : "-translate-x-1/2"),
+						style: { left: `${position(marker.at)}%` },
+						children: marker.label
+					}, marker.key) : null)
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": ariaLabel ?? resolved.map((segment) => `${segment.name} ${figure(segment)}`).join(", "),
+					className: "bg-muted relative h-2.5 w-full overflow-hidden rounded-full",
+					onMouseLeave: onHover ? () => onHover(null) : void 0,
+					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "distribution-segment",
+						className: "border-card absolute inset-y-0 border-x transition-[width,left,opacity] duration-300",
+						style: {
+							left: `${segment.left}%`,
+							width: `${segment.width}%`,
+							backgroundColor: segment.color,
+							opacity: highlighted === null || highlighted === segment.key ? 1 : .35
+						},
+						onMouseEnter: onHover ? () => onHover(segment) : void 0
+					}, segment.key) : null)
+				}),
+				shown.map((marker) => /* @__PURE__ */ jsx("div", {
+					"data-slot": "distribution-marker",
+					"aria-hidden": "true",
+					className: "bg-foreground absolute bottom-0 h-2.5 w-0.5 -translate-x-1/2",
+					style: { left: `${position(marker.at)}%` }
+				}, marker.key))
+			]
+		}), showLegend ? /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap gap-x-4 gap-y-1.5 text-sm",
+			children: resolved.map((segment) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-2.5 shrink-0 rounded-xs",
+						style: { backgroundColor: segment.color }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: segment.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: figure(segment)
+					}),
+					showValues && max === void 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground tabular-nums",
+						children: [
+							"(",
+							format(segment.value),
+							")"
+						]
+					}) : null
+				]
+			}, segment.key))
+		}) : null]
+	});
+}
+//#endregion
+export { DistributionBar };

package/dist/components/registry/dashboardcn/kpi-row-card.d.ts

@@ -0,0 +1,29 @@
+import { Card } from "../../ui/card.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/kpi-row-card.d.ts
+export interface MetricStripItem {
+  /** Muted label above the figure. */
+  label: string;
+  /** The figure, formatted by the page: money(4512300). */
+  value: React$1.ReactNode;
+  /** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
+  change?: number;
+  changeFormat?: "pct" | "money";
+  /** Muted words after the change, such as "vs last month". */
+  note?: React$1.ReactNode;
+  /** Recent values, oldest first, drawn as a sparkline beside the figure. */
+  trend?: number[];
+}
+export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
+  title?: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  /** A range toggle, top right, that changes every figure. */
+  action?: React$1.ReactNode;
+  items: MetricStripItem[];
+  /** Lines under the strip, such as what the figures cover. */
+  footer?: React$1.ReactNode;
+}
+/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
+declare function MetricStrip({ title, description, action, items, footer, className, ...props }: MetricStripProps): React$1.JSX.Element;
+//#endregion
+export { MetricStrip };

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -0,0 +1,81 @@
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { cn } from "../../../lib/utils.js";
+import { Delta } from "../../siyahi/delta.js";
+import { Sparkline } from "./sparkline.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/registry/dashboardcn/kpi-row-card.tsx
+const COLUMNS = {
+	1: "basis-full",
+	2: "basis-full @2xs/strip:basis-1/2",
+	3: "basis-full @lg/strip:basis-1/3",
+	4: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4",
+	5: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/5",
+	6: "basis-full @2xs/strip:basis-1/2 @xl/strip:basis-1/3 @5xl/strip:basis-1/6",
+	8: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4 @7xl/strip:basis-1/8"
+};
+function trendColor(change) {
+	if (change === void 0) return "var(--chart-1)";
+	if (change > 0) return "var(--positive)";
+	if (change < 0) return "var(--negative)";
+	return "var(--muted-foreground)";
+}
+/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
+function MetricStrip({ title, description, action, items, footer, className, ...props }) {
+	const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("gap-4", className),
+		...props,
+		children: [
+			(title || description || action) && /* @__PURE__ */ jsxs(CardHeader, { children: [
+				title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
+				description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+				action && /* @__PURE__ */ jsx(CardAction, { children: action })
+			] }),
+			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "metric-strip",
+				className: "@container/strip -mx-4 -my-3 overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "-mt-px -ml-px flex flex-wrap",
+					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+						"data-slot": "metric-strip-item",
+						className: cn("flex min-w-0 flex-col gap-1 border-t border-l px-4 py-3", columns),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: item.label
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-0.5",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xl font-semibold tracking-tight tabular-nums",
+									children: item.value
+								}), (item.change !== void 0 || item.note) && /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-wrap items-center gap-x-1.5 text-xs",
+									children: [item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
+										value: item.change,
+										format: item.changeFormat
+									}), item.note && /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: item.note
+									})]
+								})]
+							}), item.trend && item.trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
+								data: item.trend,
+								variant: "line",
+								color: trendColor(item.change),
+								className: "h-8 w-16 shrink-0"
+							})]
+						})]
+					}, item.label))
+				})
+			}) }),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: "flex-col items-start gap-2 text-sm",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+export { MetricStrip };

package/dist/components/registry/dashboardcn/sparkline.d.ts

@@ -0,0 +1,18 @@
+import { ChartColor } from "../../../lib/chart-series.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/sparkline.d.ts
+export interface SparklineProps extends React$1.ComponentProps<"div"> {
+  /** Series to plot, oldest first. */
+  data: number[];
+  variant?: "area" | "line";
+  /** A chart slot, or var(--positive) or var(--negative) for a gain or a loss. Defaults to var(--chart-1). */
+  color?: ChartColor;
+  curve?: "monotone" | "linear" | "step";
+  strokeWidth?: number;
+  /** Animate after hydration and when data changes. Respects reduced motion. */
+  animate?: boolean;
+  animationDuration?: number;
+}
+declare function Sparkline({ data, variant, color, curve, strokeWidth, animate, animationDuration, className, ...props }: SparklineProps): React$1.JSX.Element;
+//#endregion
+export { Sparkline };

package/dist/components/registry/dashboardcn/sparkline.js

@@ -0,0 +1,95 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Area, AreaChart, Line, LineChart, ResponsiveContainer, YAxis } from "recharts";
+//#region src/components/registry/dashboardcn/sparkline.tsx
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onChange) {
+	const query = window.matchMedia(reducedMotionQuery);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function getReducedMotionSnapshot() {
+	return window.matchMedia(reducedMotionQuery).matches;
+}
+function getReducedMotionServerSnapshot() {
+	return true;
+}
+function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "monotone", strokeWidth = 1.5, animate = true, animationDuration = 500, className, ...props }) {
+	const id = React$1.useId();
+	const reducedMotion = React$1.useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
+	const animationActive = animate && !reducedMotion;
+	const points = React$1.useMemo(() => data.map((y, i) => ({
+		i,
+		y
+	})), [data]);
+	const margin = {
+		top: 2,
+		right: 0,
+		bottom: 2,
+		left: 0
+	};
+	const axis = /* @__PURE__ */ jsx(YAxis, {
+		hide: true,
+		domain: ["dataMin", "dataMax"]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sparkline",
+		"aria-hidden": "true",
+		className: cn("h-10 w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+				data: points,
+				margin,
+				children: [axis, /* @__PURE__ */ jsx(Line, {
+					type: curve,
+					dataKey: "y",
+					stroke: color,
+					strokeWidth,
+					dot: false,
+					isAnimationActive: animationActive,
+					animationDuration,
+					animationEasing: "ease-out"
+				})]
+			}) : /* @__PURE__ */ jsxs(AreaChart, {
+				data: points,
+				margin,
+				children: [
+					axis,
+					/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: color,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: color,
+							stopOpacity: 0
+						})]
+					}) }),
+					/* @__PURE__ */ jsx(Area, {
+						type: curve,
+						dataKey: "y",
+						stroke: color,
+						strokeWidth,
+						fill: `url(#${id})`,
+						dot: false,
+						isAnimationActive: animationActive,
+						animationDuration,
+						animationEasing: "ease-out"
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { Sparkline };

package/dist/components/registry/minidev/copy-button.d.ts

@@ -0,0 +1,11 @@
+import { buttonVariants } from "../../ui/button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/registry/minidev/copy-button.d.ts
+declare function CopyButton({ value, className, variant, size, label, copiedLabel, ...props }: {
+  value: string;
+  label?: string;
+  copiedLabel?: string;
+} & React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants>): React$1.JSX.Element;
+//#endregion
+export { CopyButton };

package/dist/components/registry/minidev/copy-button.js

@@ -0,0 +1,34 @@
+"use client";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import "class-variance-authority";
+//#region src/components/registry/minidev/copy-button.tsx
+function CopyButton({ value, className, variant = "outline", size = "sm", label = "Copy", copiedLabel = "Copied", ...props }) {
+	const [copied, setCopied] = React$1.useState(false);
+	React$1.useEffect(() => {
+		if (!copied) return;
+		const timeout = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timeout);
+	}, [copied]);
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant,
+		size,
+		"data-slot": "copy-button",
+		className: cn(className),
+		"aria-label": copied ? copiedLabel : label,
+		onClick: async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+				setCopied(true);
+			} catch {}
+		},
+		...props,
+		children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { "data-icon": "inline-start" }) : /* @__PURE__ */ jsx(CopyIcon, { "data-icon": "inline-start" }), copied ? copiedLabel : label]
+	});
+}
+//#endregion
+export { CopyButton };

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

@@ -0,0 +1,35 @@
+import { TableSearchFilterProps } from "../filters/table-search-filter.js";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/components/data-table-search-filter.d.ts
+type DataTableSearchFilterProps<TData extends RowData> = Omit<TableSearchFilterProps<TData>, "table">;
+/**
+ * A search filter component for DataTable.
+ * Can be used in controlled or uncontrolled mode.
+ *
+ * @example
+ * // Uncontrolled (manages its own state)
+ * <DataTableSearchFilter placeholder="Search products..." />
+ *
+ * @example
+ * // Controlled (you manage the state)
+ * const [search, setSearch] = useState("")
+ * <DataTableSearchFilter
+ *   value={search}
+ *   onChange={setSearch}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // With nuqs for URL state
+ * const [search, setSearch] = useQueryState('search')
+ * <DataTableSearchFilter
+ *   value={search ?? ""}
+ *   onChange={setSearch}
+ * />
+ */
+export declare function DataTableSearchFilter<TData extends RowData>(props: DataTableSearchFilterProps<TData>): import("react").JSX.Element;
+export declare namespace DataTableSearchFilter {
+  var displayName: string;
+}
+//#endregion
+export {};

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

@@ -0,0 +1,44 @@
+"use client";
+import { useDataTable } from "../core/data-table-context.js";
+import { TableSearchFilter } from "../filters/table-search-filter.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/registry/niko-table/components/data-table-search-filter.tsx
+/**
+* A search filter component for DataTable.
+* Can be used in controlled or uncontrolled mode.
+*
+* @example
+* // Uncontrolled (manages its own state)
+* <DataTableSearchFilter placeholder="Search products..." />
+*
+* @example
+* // Controlled (you manage the state)
+* const [search, setSearch] = useState("")
+* <DataTableSearchFilter
+*   value={search}
+*   onChange={setSearch}
+*   placeholder="Search..."
+* />
+*
+* @example
+* // With nuqs for URL state
+* const [search, setSearch] = useQueryState('search')
+* <DataTableSearchFilter
+*   value={search ?? ""}
+*   onChange={setSearch}
+* />
+*/
+function DataTableSearchFilter(props) {
+	const { table } = useDataTable();
+	return /* @__PURE__ */ jsx(TableSearchFilter, {
+		table,
+		...props
+	});
+}
+/**
+* @required displayName is required for auto feature detection
+* @see "feature-detection.ts"
+*/
+DataTableSearchFilter.displayName = "DataTableSearchFilter";
+//#endregion
+export { DataTableSearchFilter };

package/dist/components/registry/niko-table/filters/table-search-filter.d.ts

@@ -0,0 +1,38 @@
+import { DataTableInstance } from "../types/index.js";
+import * as React$1 from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/filters/table-search-filter.d.ts
+export interface TableSearchFilterProps<TData extends RowData> {
+  table: DataTableInstance<TData>;
+  className?: string;
+  placeholder?: string;
+  /** The field's accessible name, such as "Filter holdings". */
+  label?: string;
+  showClearButton?: boolean;
+  onChange?: (value: string) => void;
+  value?: string;
+  /**
+   * Debounce ms before pushing the typed value into table state. The
+   * input reflects keystrokes immediately; only the call to
+   * `table.setGlobalFilter` (and the supplied `onChange`) is delayed.
+   * Useful for client-side filtering of larger fully-loaded datasets
+   * (e.g. 1k+ rows) where each keystroke would otherwise re-walk the
+   * row model synchronously.
+   *
+   * Server-driven search (small `data` array, infinite-query-backed)
+   * usually wants this OFF because the network request is already
+   * the natural rate limiter — keep at the default.
+   *
+   * Only applies in uncontrolled mode (when neither `value` nor
+   * `onChange` is supplied). In controlled mode, debounce in the
+   * consumer's `onChange` instead.
+   *
+   * @default 0
+   */
+  debounceMs?: number;
+}
+export declare function TableSearchFilter<TData extends RowData>({ table, className, placeholder, label, showClearButton, onChange, value, debounceMs }: TableSearchFilterProps<TData>): React$1.JSX.Element;
+export declare namespace TableSearchFilter {
+  var displayName: string;
+}
+//#endregion

package/dist/components/registry/niko-table/filters/table-search-filter.js

@@ -0,0 +1,103 @@
+import { Button } from "../../../ui/button.js";
+import { Input } from "../../../ui/input.js";
+import { cn } from "../../../../lib/utils.js";
+import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/registry/niko-table/filters/table-search-filter.tsx
+function TableSearchFilter({ table, className, placeholder = "Search...", label = "Search table", showClearButton = true, onChange, value, debounceMs = 0 }) {
+	const isControlled = value !== void 0;
+	const tableGlobalFilter = table.state.globalFilter;
+	const globalFilterValue = typeof tableGlobalFilter === "string" ? tableGlobalFilter : "";
+	const debounceEnabled = !isControlled && debounceMs > 0;
+	const [pendingValue, setPendingValue] = React$1.useState(globalFilterValue);
+	const debounceTimerRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (debounceTimerRef.current) {
+			clearTimeout(debounceTimerRef.current);
+			debounceTimerRef.current = null;
+		}
+		if (!debounceEnabled) return;
+		setPendingValue(globalFilterValue);
+	}, [globalFilterValue, debounceEnabled]);
+	React$1.useEffect(() => {
+		return () => {
+			if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		};
+	}, []);
+	const currentValue = isControlled ? value : debounceEnabled ? pendingValue : globalFilterValue;
+	const handleClear = React$1.useCallback(() => {
+		const emptyValue = "";
+		if (debounceTimerRef.current) {
+			clearTimeout(debounceTimerRef.current);
+			debounceTimerRef.current = null;
+		}
+		if (debounceEnabled) setPendingValue(emptyValue);
+		table.setGlobalFilter(emptyValue);
+		onChange?.(emptyValue);
+	}, [
+		table,
+		onChange,
+		debounceEnabled
+	]);
+	const handleChange = React$1.useCallback((event) => {
+		const newValue = event.target.value;
+		if (!debounceEnabled) {
+			table.setGlobalFilter(newValue);
+			onChange?.(newValue);
+			return;
+		}
+		setPendingValue(newValue);
+		if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		debounceTimerRef.current = setTimeout(() => {
+			debounceTimerRef.current = null;
+			table.setGlobalFilter(newValue);
+			onChange?.(newValue);
+		}, debounceMs);
+	}, [
+		table,
+		onChange,
+		debounceEnabled,
+		debounceMs
+	]);
+	const hasValue = currentValue.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-1 items-center", className),
+		role: "search",
+		children: [
+			/* @__PURE__ */ jsx(Search, {
+				className: "absolute left-3 h-4 w-4 text-muted-foreground",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				placeholder,
+				value: currentValue,
+				onChange: handleChange,
+				className: "pr-9 pl-9",
+				"aria-label": label
+			}),
+			hasValue && showClearButton && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: handleClear,
+				className: "absolute right-1 h-7 w-7 p-0 hover:bg-muted",
+				type: "button",
+				"aria-label": "Clear search",
+				children: [/* @__PURE__ */ jsx(X, {
+					className: "h-3 w-3",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Clear search"
+				})]
+			})
+		]
+	});
+}
+/**
+* @required displayName is required for auto feature detection
+* @see src/components/niko-table/config/feature-detection.ts
+*/
+TableSearchFilter.displayName = "TableSearchFilter";
+//#endregion
+export { TableSearchFilter };

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

@@ -52,14 +52,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		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-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }

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

@@ -4,7 +4,7 @@ export declare function NavMain({ items, label }: {
   items: {
     title: string;
     url: string;
-    icon?: React.ReactNode;
+    icon: React.ReactNode;
     isActive?: boolean;
     linkProps?: Omit<React.ComponentProps<"a">, "href">;
     items?: {

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

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-bar.d.ts
+export interface DataBarProps {
+  value: number;
+  /** The value a full bar stands for, usually the column's largest: Math.max(...rows.map((row) => row.value)). */
+  max: number;
+  /** "sign" draws a gain in --positive and a loss in --negative; by default every bar is --chart-1. */
+  tone?: "chart" | "sign";
+  /** The figure, as the page formats it. */
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
+ * The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
+ * keeps its height.
+ */
+export declare function DataBar({ value, max, tone, children, className }: DataBarProps): import("react").JSX.Element;
+//#endregion