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

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/siyahi/data-list.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-list.d.ts
+/** Label and value pairs, such as a record's fields in a card. */
+export declare function DataList({ className, children }: {
+  className?: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export interface DataListItemProps {
+  /** A short muted label; may hold a badge beside the words. */
+  label: ReactNode;
+  children: ReactNode;
+}
+export declare function DataListItem({ label, children }: DataListItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-list.js

@@ -0,0 +1,25 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-list.tsx
+/** Label and value pairs, such as a record's fields in a card. */
+function DataList({ className, children }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn("flex flex-col gap-4", className),
+		children
+	});
+}
+function DataListItem({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-list-item",
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+//#endregion
+export { DataList, DataListItem };

package/dist/components/siyahi/data-table-row-count.d.ts

@@ -0,0 +1,11 @@
+import { RowData } from "@tanstack/react-table";
+//#region src/components/siyahi/data-table-row-count.d.ts
+export interface DataTableRowCountProps {
+  /** What a row is, plural: "positions" prints "48 positions" while nothing is filtered. */
+  unit: string;
+  /** Rows before any filter. Defaults to the table's data; pass it when the page narrowed the data before the table. */
+  total?: number;
+}
+/** How many rows the filters leave: "12 of 48", or "48 positions" when they leave all. For a table toolbar, at its end. */
+export declare function DataTableRowCount<TData extends RowData>({ unit, total }: DataTableRowCountProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-table-row-count.js

@@ -0,0 +1,18 @@
+import { useFormat } from "../../lib/format.js";
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-row-count.tsx
+/** How many rows the filters leave: "12 of 48", or "48 positions" when they leave all. For a table toolbar, at its end. */
+function DataTableRowCount({ unit, total }) {
+	const { table } = useDataTable();
+	const { count } = useFormat();
+	const all = total ?? table.getCoreRowModel().rows.length;
+	const shown = table.getFilteredRowModel().rows.length;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-row-count",
+		className: "ml-auto text-sm text-muted-foreground tabular-nums",
+		children: shown === all ? `${count(all)} ${unit}` : `${count(shown)} of ${count(all)}`
+	});
+}
+//#endregion
+export { DataTableRowCount };

package/dist/components/siyahi/data-table-sort-header.d.ts

@@ -0,0 +1,15 @@
+import { RowData } from "@tanstack/react-table";
+//#region src/components/siyahi/data-table-sort-header.d.ts
+/**
+ * A column header that sorts on one click, largest (or Z) first, as shadcn's
+ * data table guide draws it: a ghost button with the direction's arrow. The
+ * column menu takes two clicks for the same. Use it as a column's `header`:
+ * `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
+ */
+export declare function DataTableSortHeader<TData extends RowData>({ title }: {
+  title?: string;
+}): import("react").JSX.Element;
+export declare namespace DataTableSortHeader {
+  var displayName: string;
+}
+//#endregion

package/dist/components/siyahi/data-table-sort-header.js

@@ -0,0 +1,36 @@
+import { Button } from "../ui/button.js";
+import { DataTableColumnHeader, useColumnHeaderContext } from "../registry/niko-table/components/data-table-column-header.js";
+import { useDerivedColumnTitle } from "../registry/niko-table/hooks/use-derived-column-title.js";
+import { registerComponentFeatures } from "../registry/niko-table/config/feature-detection.js";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-sort-header.tsx
+/**
+* A column header that sorts on one click, largest (or Z) first, as shadcn's
+* data table guide draws it: a ghost button with the direction's arrow. The
+* column menu takes two clicks for the same. Use it as a column's `header`:
+* `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
+*/
+function DataTableSortHeader({ title }) {
+	const { column } = useColumnHeaderContext(true);
+	const label = useDerivedColumnTitle(column, column.id, title);
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ jsx(DataTableColumnHeader, { children: /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "-ml-2",
+		onClick: () => column.toggleSorting(sorted !== "desc"),
+		children: [
+			label,
+			/* @__PURE__ */ jsx(sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon, { "aria-hidden": "true" }),
+			sorted && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [", sorted ", sorted === "asc" ? "ascending" : "descending"]
+			})
+		]
+	}) });
+}
+DataTableSortHeader.displayName = "DataTableSortHeader";
+registerComponentFeatures(DataTableSortHeader.displayName, { enableSorting: true });
+//#endregion
+export { DataTableSortHeader };

package/dist/components/siyahi/inline-code.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/inline-code.d.ts
+/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+export declare function InlineCode({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/inline-code.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/inline-code.tsx
+/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+function InlineCode({ children }) {
+	return /* @__PURE__ */ jsx("code", {
+		className: "rounded-sm bg-muted px-1 font-mono",
+		children
+	});
+}
+//#endregion
+export { InlineCode };

package/dist/components/siyahi/page-section.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/page-section.d.ts
+export interface PageSectionProps {
+  /** Anchor for a table of contents; the section scrolls in with room above it. */
+  id?: string;
+  /** Small muted line above the title, such as "Part 2". */
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  /** Muted prose under the title: a sentence, or several paragraphs as elements. */
+  lead?: ReactNode;
+  /** A control for the whole section, such as a copy or mode toggle; it sits right, beside the heading. */
+  action?: ReactNode;
+  children?: ReactNode;
+}
+/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+export declare function PageSection({ id, eyebrow, title, lead, action, children }: PageSectionProps): import("react").JSX.Element;
+/** A heading inside a PageSection, one level under its title. */
+export declare function PageSubheading({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/page-section.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/page-section.tsx
+/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+function PageSection({ id, eyebrow, title, lead, action, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"data-slot": "page-section",
+		className: "flex scroll-mt-6 flex-col gap-6 border-t pt-10",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-end justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					eyebrow && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: eyebrow
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: title
+					}),
+					lead && /* @__PURE__ */ jsx("div", {
+						className: "flex max-w-prose flex-col gap-2 text-muted-foreground",
+						children: lead
+					})
+				]
+			}), action]
+		}), children]
+	});
+}
+/** A heading inside a PageSection, one level under its title. */
+function PageSubheading({ children }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: "text-lg font-semibold tracking-tight",
+		children
+	});
+}
+//#endregion
+export { PageSection, PageSubheading };

package/dist/components/siyahi/tone-progress.d.ts

@@ -0,0 +1,15 @@
+import { Progress } from "../ui/progress.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/tone-progress.d.ts
+declare const TONE: {
+  readonly positive: "**:data-[slot=progress-indicator]:bg-positive";
+  readonly negative: "**:data-[slot=progress-indicator]:bg-negative";
+};
+export interface ToneProgressProps extends ComponentProps<typeof Progress> {
+  /** The meaning colour of the bar: a gain's share in --positive, a loss's in --negative. */
+  tone: keyof typeof TONE;
+}
+/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+export declare function ToneProgress({ tone, className, ...props }: ToneProgressProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/tone-progress.js

@@ -0,0 +1,18 @@
+import { Progress } from "../ui/progress.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/tone-progress.tsx
+const TONE = {
+	positive: "**:data-[slot=progress-indicator]:bg-positive",
+	negative: "**:data-[slot=progress-indicator]:bg-negative"
+};
+/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+function ToneProgress({ tone, className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress, {
+		"data-tone": tone,
+		className: cn(TONE[tone], className),
+		...props
+	});
+}
+//#endregion
+export { ToneProgress };

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

@@ -28,4 +28,11 @@ export interface TreemapProps<T extends TreemapItem> {
 }
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
+export interface TreemapLegendProps {
+  /** The Treemap's own range, so each swatch matches its tiles. */
+  range?: number;
+  className?: string;
+}
+/** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
+export declare function TreemapLegend({ range, className }: TreemapLegendProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/treemap.js

@@ -1,5 +1,6 @@
 import { useFormat } from "../../lib/format.js";
-import { heat, layout } from "../../lib/treemap.js";
+import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
+import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
@@ -96,5 +97,71 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
+function Swatch({ label, fill }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "treemap-legend-swatch",
+		className: "h-3 flex-1",
+		children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("rect", {
+			width: "100%",
+			height: "100%",
+			rx: 2,
+			style: { fill }
+		})]
+	});
+}
+/** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
+function TreemapLegend({ range, className }) {
+	const { pct } = useFormat();
+	const step = heatRange(range) / 5;
+	const digits = Number.isInteger(Math.round(step * 1e6) / 1e4) ? 0 : 1;
+	const over = pct(step * 4, digits);
+	const swatch = (side, n) => {
+		const word = side === "positive" ? "up" : "down";
+		const label = n === 5 ? `${word} over ${over}` : `${word} ${pct(step * (n - 1), digits)}–${pct(step * n, digits)}`;
+		return /* @__PURE__ */ jsx(Swatch, {
+			label,
+			fill: heatFill(side, n)
+		}, `${side}-${n}`);
+	};
+	const steps = Array.from({ length: 5 }, (_, i) => i + 1);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "treemap-legend",
+		className: cn("flex w-full max-w-xs flex-col gap-1 text-xs text-muted-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-0.5",
+				"aria-hidden": "true",
+				children: [
+					steps.toReversed().map((n) => swatch("negative", n)),
+					/* @__PURE__ */ jsx(Swatch, {
+						label: "no change, or unknown",
+						fill: heat(null)
+					}),
+					steps.map((n) => swatch("positive", n))
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between gap-2 tabular-nums",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["▼ over ", over] }),
+					/* @__PURE__ */ jsxs("span", { children: [pct(step, digits), " a step"] }),
+					/* @__PURE__ */ jsxs("span", { children: ["▲ over ", over] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "sr-only",
+				children: [
+					"Tile colours run in ",
+					5,
+					" steps of ",
+					pct(step, digits),
+					" each way, deepest over ",
+					over,
+					"; a muted tile is no change or unknown."
+				]
+			})
+		]
+	});
+}
 //#endregion
-export { Treemap };
+export { Treemap, TreemapLegend };

package/dist/components/ui/code-block.d.ts

@@ -0,0 +1,28 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/code-block.d.ts
+declare const codeBlockVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlock({ className, variant, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof codeBlockVariants> & {
+  size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function CodeBlockHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CodeBlockTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CodeBlockActions({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CodeBlockCopyButton({ value, variant, size, className, onClick, ...props }: React$1.ComponentProps<typeof Button> & {
+  value: string;
+}): React$1.JSX.Element;
+declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: React$1.ComponentProps<"pre"> & {
+  wrap?: boolean;
+  lineNumbers?: boolean;
+  startLine?: number;
+}): React$1.JSX.Element;
+declare const codeBlockLineVariants: (props?: ({
+  variant?: "added" | "default" | "highlighted" | "removed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CodeBlockLine({ className, variant, children, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>): React$1.JSX.Element;
+declare function CodeBlockFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };