@siyahi/ui 0.1.9-next.31 → 0.1.9-next.33

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

@@ -27,7 +27,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 	const flexColumnIds = resolveFlexColumnIds(table, !isCompact);
 	const columnSizing = table.state.columnSizing;
 	return /* @__PURE__ */ jsx(TableHeader, {
-		className: cn(sticky && "sticky top-0 z-30 bg-card", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
+		className: cn(sticky && "sticky top-0 z-30 bg-(--table-fill)", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
 		children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
 			const isFlex = flexColumnIds.has(header.column.id);
 			const headerStyle = {
@@ -62,7 +62,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 DataTableHeader.displayName = "DataTableHeader";
 /** Fade-pulse animation applied to a flashing cell (keyframe in the provider). */
 const FLASH_ANIMATION = "niko-row-flash 1.2s ease-out";
-const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isCompact, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu }) {
+const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isCompact, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu, tone }) {
 	const expandCell = isExpanded && expandColumnId ? row.getAllCells().find((c) => c.column.id === expandColumnId) : void 0;
 	const visibleCells = row.getVisibleCells();
 	const rowElement = /* @__PURE__ */ jsx(TableRow, {
@@ -72,8 +72,10 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 		"data-parity": displayIndex % 2 === 0 ? "even" : "odd",
 		"data-expanded": isExpanded ? "true" : void 0,
 		"data-state": isSelected ? "selected" : void 0,
+		"data-tone": tone,
 		className: cn(isClickable && "cursor-pointer", "group data-[context-menu-open]:bg-muted/50"),
 		children: visibleCells.map((cell) => {
+			const pinned = !isCompact && cell.column.getIsPinned();
 			const flashing = isRowFlashing || flashingCellKeys.has(flashCellKey(row.id, cell.column.id));
 			const cellStyle = {
 				width: columnWidths.get(cell.column.id),
@@ -84,8 +86,9 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 				"data-flash": flashing ? "true" : void 0,
 				"data-col-id": cell.column.id,
 				"data-numeric": cell.column.columnDef.meta?.variant === "number" || void 0,
+				"data-pinned": pinned || void 0,
 				style: cellStyle,
-				className: cn(!cell.getIsGrouped() && "truncate", !isCompact && cell.column.getIsPinned() && "bg-linear-to-r group-hover:from-muted/50 group-hover:to-muted/50 group-data-[context-menu-open]:from-muted/50 group-data-[context-menu-open]:to-muted/50 group-data-[state=selected]:from-muted group-data-[state=selected]:to-muted"),
+				className: cn(!cell.getIsGrouped() && "truncate", pinned && "bg-linear-to-r group-hover:from-muted/50 group-hover:to-muted/50 group-data-[context-menu-open]:from-muted/50 group-data-[context-menu-open]:to-muted/50 group-data-[state=selected]:from-muted group-data-[state=selected]:to-muted"),
 				children: renderCellContent(cell)
 			}, cell.id);
 		})
@@ -102,7 +105,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 	}) })] });
 });
 BodyRow.displayName = "BodyRow";
-function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold = 50, onRowClick, getRowMemoKey, renderRowContextMenu }) {
+function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold = 50, onRowClick, getRowMemoKey, renderRowContextMenu, getRowTone }) {
 	const { table, columns, isLoading, flashingRowIds, flashingCellKeys, registerRowScroller, headerMinWidths, isCompact } = useDataTable();
 	const { rows } = table.getRowModel();
 	const containerRef = React.useRef(null);
@@ -245,7 +248,8 @@ function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolle
 			rowMemoKey: getRowMemoKey ? getRowMemoKey(row.original) : "",
 			isRowFlashing: flashingRowIds.has(row.id),
 			flashingCellKeys,
-			renderRowContextMenu: resolvedRenderRowContextMenu
+			renderRowContextMenu: resolvedRenderRowContextMenu,
+			tone: getRowTone?.(row.original)
 		}, row.id)) : null, children]
 	});
 }

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

@@ -8,20 +8,20 @@ export interface DataTableContainerProps extends React.AriaAttributes {
    * and applied as inline styles to ensure scroll event callbacks work reliably.
    * For other height utilities, use the height/maxHeight props directly.
    */
-  className?: string;
+  className?: string | undefined;
   /**
    * Sets the height of the table container.
    * When provided, enables vertical scrolling and allows DataTableBody/DataTableVirtualizedBody
    * to use onScroll, onScrolledTop, and onScrolledBottom callbacks.
    * Takes precedence over height utilities in className.
    */
-  height?: number | string;
+  height?: number | string | undefined;
   /**
    * Sets the maximum height of the table container.
    * Defaults to the height value if not specified.
    * Takes precedence over max-height utilities in className.
    */
-  maxHeight?: number | string;
+  maxHeight?: number | string | undefined;
 }
 export declare function DataTable({ children, className, height, maxHeight, "aria-label": label, "aria-labelledby": labelledBy }: DataTableContainerProps): React.JSX.Element;
 export declare namespace DataTable {

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

@@ -2,25 +2,25 @@ import React from "react";
 //#region src/components/registry/niko-table/filters/table-column-actions.d.ts
 export interface TableColumnActionsProps {
   children: React.ReactNode;
-  className?: string;
+  className?: string | undefined;
   /**
    * Optional label shown at the top of the dropdown.
    * @default "Column Actions"
    */
-  label?: string;
+  label?: string | undefined;
   /**
    * Whether to show a visual indicator when actions are active.
    */
-  isActive?: boolean;
+  isActive?: boolean | undefined;
   /**
    * Custom trigger element. If not provided, uses a MoreVertical icon button.
    */
-  trigger?: React.ReactElement;
+  trigger?: React.ReactElement | undefined;
   /**
    * Alignment of the dropdown content.
    * @default "end"
    */
-  align?: "start" | "center" | "end";
+  align?: "start" | "center" | "end" | undefined;
 }
 /**
  * A simple dropdown container for composing column actions.

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

@@ -15,10 +15,10 @@ import { RowData } from "@tanstack/react-table";
  */
 export declare function TableColumnSortOptions<TData extends RowData, TValue>({ column, table: propTable, variant: propVariant, withSeparator }: {
   column: DataTableColumn<TData, TValue>;
-  table?: DataTableInstance<TData>;
-  variant?: SortIconVariant;
+  table?: DataTableInstance<TData> | undefined;
+  variant?: SortIconVariant | undefined;
   /** Whether to render a separator before the options. @default true */
-  withSeparator?: boolean;
+  withSeparator?: boolean | undefined;
 }): React.JSX.Element;
 export declare namespace TableColumnSortOptions {
   var displayName: string;
@@ -41,9 +41,9 @@ export declare namespace TableColumnSortOptions {
  */
 export declare function TableColumnSortMenu<TData extends RowData, TValue>({ column, table: propTable, variant: propVariant, className }: {
   column: DataTableColumn<TData, TValue>;
-  table?: DataTableInstance<TData>;
-  variant?: SortIconVariant;
-  className?: string;
+  table?: DataTableInstance<TData> | undefined;
+  variant?: SortIconVariant | undefined;
+  className?: string | undefined;
 }): React.JSX.Element | null;
 export declare namespace TableColumnSortMenu {
   var displayName: string;

package/dist/components/registry/niko-table/filters/table-column-title.d.ts

@@ -7,8 +7,8 @@ import { RowData } from "@tanstack/react-table";
  */
 export declare function TableColumnTitle<TData extends RowData, TValue>({ column, title, className, children }: {
   column: DataTableColumn<TData, TValue>;
-  title?: string;
-  className?: string;
+  title?: string | undefined;
+  className?: string | undefined;
   children?: React.ReactNode;
 }): React.JSX.Element;
 export declare namespace TableColumnTitle {

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

@@ -3,24 +3,24 @@ import * as React$1 from "react";
 import { RowData } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/filters/table-faceted-filter.d.ts
 export interface TableFacetedFilterProps<TData extends RowData, TValue> {
-  column?: DataTableColumn<TData, TValue>;
-  title?: string;
+  column?: DataTableColumn<TData, TValue> | undefined;
+  title?: string | undefined;
   options: Option[];
-  multiple?: boolean;
+  multiple?: boolean | undefined;
   /**
    * Callback fired when filter value changes
    * Useful for server-side filtering or external state management
    */
-  onValueChange?: (value: string[] | undefined) => void;
+  onValueChange?: ((value: string[] | undefined) => void) | undefined;
   /**
    * Optional custom trigger element
    */
-  trigger?: React$1.ReactElement;
+  trigger?: React$1.ReactElement | undefined;
 }
 export declare function useTableFacetedFilter<TData extends RowData, TValue = unknown>({ column, onValueChange, multiple }: {
-  column?: DataTableColumn<TData, TValue>;
-  onValueChange?: (value: string[] | undefined) => void;
-  multiple?: boolean;
+  column?: DataTableColumn<TData, TValue> | undefined;
+  onValueChange?: ((value: string[] | undefined) => void) | undefined;
+  multiple?: boolean | undefined;
 }): {
   selectedValues: Set<any>;
   onItemSelect: (option: Option, isSelected: boolean) => void;
@@ -31,7 +31,7 @@ export declare namespace TableFacetedFilter {
   var displayName: string;
 }
 export declare function TableFacetedFilterContent({ title, options, selectedValues, onItemSelect, onReset }: {
-  title?: string;
+  title?: string | undefined;
   options: Option[];
   selectedValues: Set<string>;
   onItemSelect: (option: Option, isSelected: boolean) => void;

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

@@ -4,13 +4,13 @@ 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;
+  className?: string | undefined;
+  placeholder?: string | undefined;
   /** The field's accessible name, such as "Filter holdings". */
-  label?: string;
-  showClearButton?: boolean;
-  onChange?: (value: string) => void;
-  value?: string;
+  label?: string | undefined;
+  showClearButton?: boolean | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  value?: string | undefined;
   /**
    * Debounce ms before pushing the typed value into table state. The
    * input reflects keystrokes immediately; only the call to
@@ -29,7 +29,7 @@ export interface TableSearchFilterProps<TData extends RowData> {
    *
    * @default 0
    */
-  debounceMs?: number;
+  debounceMs?: number | undefined;
 }
 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 {

package/dist/components/registry/niko-table/hooks/use-generated-options.d.ts

@@ -6,36 +6,36 @@ export interface GenerateOptionsConfig {
    * Whether to include counts for each option label
    * @default true
    */
-  showCounts?: boolean;
+  showCounts?: boolean | undefined;
   /**
    * If true, recompute counts based on the filtered rows; otherwise use all core rows
    * @default true
    */
-  dynamicCounts?: boolean;
+  dynamicCounts?: boolean | undefined;
   /**
    * If true, only generate options from filtered rows. If false, generate from all rows.
    * This controls which rows are used to generate the option list itself.
    * Note: This is separate from dynamicCounts which controls count calculation.
    * @default true
    */
-  limitToFilteredRows?: boolean;
+  limitToFilteredRows?: boolean | undefined;
   /**
    * Only generate options for these column ids (if provided)
    */
-  includeColumns?: string[];
+  includeColumns?: string[] | undefined;
   /**
    * Exclude these column ids from option generation
    */
-  excludeColumns?: string[];
+  excludeColumns?: string[] | undefined;
   /**
    * Optional cap on number of options per column (after sorting)
    */
-  limitPerColumn?: number;
+  limitPerColumn?: number | undefined;
   /**
    * Default merge strategy when a column does not provide meta.mergeStrategy.
    * Column-level mergeStrategy still takes precedence.
    */
-  mergeStrategy?: "preserve" | "augment" | "replace";
+  mergeStrategy?: "preserve" | "augment" | "replace" | undefined;
 }
 /**
  * Generate a map of options for select/multiSelect columns based on table data.

package/dist/components/registry/niko-table/lib/build-faceted-options.d.ts

@@ -11,7 +11,7 @@ export interface BuildFacetedOptionsConfig {
    * columns that are not declared as `select`/`multiSelect` variants but are
    * still being used with a faceted filter (boolean, text, etc.).
    */
-  staticOptions?: Option[];
+  staticOptions?: Option[] | undefined;
   /**
    * Narrow the returned options to values that exist in rows passing every
    * *other* active filter (the current column's own filter is excluded).
@@ -37,7 +37,7 @@ export interface BuildFacetedOptionsConfig {
    * present. Receives the stringified row value, returns the display label.
    * Ignored when `staticOptions` is provided.
    */
-  formatOptionLabel?: (value: string) => string;
+  formatOptionLabel?: ((value: string) => string) | undefined;
 }
 /**
  * Pure builder for the option list surfaced by a faceted filter. Handles

package/dist/components/registry/niko-table/lib/column-resize-handle.d.ts

@@ -17,16 +17,16 @@ export interface DataTableColumnResizeHandleProps<TData extends RowData> {
    * from the rendered width (no jump) and, on release, writes an explicit width
    * — which pins the column and hands the fill to the next eligible column.
    */
-  isFlex?: boolean;
+  isFlex?: boolean | undefined;
   /**
    * Drive the resize preview line during a flex drag (from the DataTable
    * context). Passed `{ resizingColumnId, deltaOffset }` while dragging, `null`
    * on release.
    */
-  setResizePreview?: (info: {
+  setResizePreview?: ((info: {
     resizingColumnId: string | null;
     deltaOffset: number;
-  } | null) => void;
+  } | null) => void) | undefined;
 }
 export declare function DataTableColumnResizeHandle<TData extends RowData>({ header, isFlex, setResizePreview }: DataTableColumnResizeHandleProps<TData>): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/niko-table/lib/create-scroll-handler.d.ts

@@ -27,9 +27,9 @@ export interface ScrollEvent {
  * a `useEffect` already key on those callbacks via their own deps.
  */
 export declare function createScrollHandler({ onScroll, onScrolledTop, onScrolledBottom, scrollThreshold }: {
-  onScroll?: (event: ScrollEvent) => void;
-  onScrolledTop?: () => void;
-  onScrolledBottom?: () => void;
-  scrollThreshold?: number;
+  onScroll?: ((event: ScrollEvent) => void) | undefined;
+  onScrolledTop?: (() => void) | undefined;
+  onScrolledBottom?: (() => void) | undefined;
+  scrollThreshold?: number | undefined;
 }): (event: Event) => void;
 //#endregion

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

@@ -16,7 +16,7 @@ const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true)
 		maxWidth: columnSize,
 		flexShrink: 0,
 		zIndex: isHeader ? 20 : 10,
-		backgroundColor: "var(--card)",
+		backgroundColor: "var(--table-fill)",
 		boxShadow: isLeft ? "inset -1px 0 0 0 var(--border)" : "inset 1px 0 0 0 var(--border)"
 	};
 };

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

@@ -5,8 +5,8 @@ import { Cell, Column, ColumnDef, Header, ReactTable, Row, RowData, TableFeature
 //#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;
+    label?: string | undefined;
+    placeholder?: string | undefined;
     /**
      * Which column absorbs the leftover row width when column resizing is on
      * (needs `<DataTableColumnResize />`). Filling is ON BY DEFAULT — the first
@@ -22,7 +22,7 @@ declare module "@tanstack/react-table" {
      * persistence side effects. Turn filling off for a whole table with
      * `TableMeta.disableFlexFill`.
      */
-    flex?: boolean;
+    flex?: boolean | undefined;
     /**
      * Never hide this column to fit. Once any column sets it, a table whose
      * columns do not fit its width hides the others, rightmost first, until
@@ -31,39 +31,39 @@ declare module "@tanstack/react-table" {
      * its result. Read `useDataTable().compactColumns?.hidden` in a cell to
      * fold a hidden figure under a kept one.
      */
-    compact?: boolean;
-    variant?: FilterVariant;
-    options?: Option[];
-    range?: [number, number];
+    compact?: boolean | undefined;
+    variant?: FilterVariant | undefined;
+    options?: Option[] | undefined;
+    range?: [number, number] | undefined;
     /**
      * 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;
+    autoOptions?: boolean | undefined;
     /** Whether to automatically rename option labels using formatLabel. When false, uses raw value as label. */
-    autoOptionsFormat?: boolean;
+    autoOptionsFormat?: boolean | undefined;
     /**
      * 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;
+    formatOptionLabel?: ((value: string) => string) | undefined;
     /** Per-column override for showing counts (falls back to wrapper prop). */
-    showCounts?: boolean;
+    showCounts?: boolean | undefined;
     /** Per-column override for using filtered rows for counts (falls back to wrapper prop). */
-    dynamicCounts?: boolean;
+    dynamicCounts?: boolean | undefined;
     /** Merge strategy override: preserve | augment | replace (falls back to wrapper prop). */
-    mergeStrategy?: "preserve" | "augment" | "replace";
-    unit?: string;
+    mergeStrategy?: "preserve" | "augment" | "replace" | undefined;
+    unit?: string | undefined;
     icon?: React$1.ComponentType<{
-      className?: string;
-    }>;
-    expandedContent?: (row: TData) => React$1.ReactNode;
+      className?: string | undefined;
+    }> | undefined;
+    expandedContent?: ((row: TData) => React$1.ReactNode) | undefined;
   }
   interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
-    joinOperator?: JoinOperator;
-    hasIndividualJoinOperators?: boolean;
+    joinOperator?: JoinOperator | undefined;
+    hasIndividualJoinOperators?: boolean | undefined;
     /**
      * 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
@@ -73,16 +73,16 @@ declare module "@tanstack/react-table" {
      * — 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;
+    disableFlexFill?: boolean | undefined;
   }
 }
 export interface Option {
   label: string;
   value: string;
-  count?: number;
+  count?: number | undefined;
   icon?: React$1.ComponentType<{
-    className?: string;
-  }>;
+    className?: string | undefined;
+  }> | undefined;
 }
 export type FilterVariant = FilterVariant$1;
 export type FilterOperator = FilterOperator$1;
@@ -96,7 +96,7 @@ export interface ExtendedColumnFilter<TData> {
   variant: FilterVariant;
   operator: FilterOperator;
   filterId: string;
-  joinOperator?: JoinOperator;
+  joinOperator?: JoinOperator | undefined;
 }
 /** Global filter type */
 export type GlobalFilter = string | Record<string, unknown>;
@@ -111,11 +111,11 @@ export interface ExtendedColumnSort<TData> {
  * Query keys for URL state management
  */
 export interface QueryKeys {
-  page?: string;
-  perPage?: string;
-  sort?: string;
-  filters?: string;
-  joinOperator?: string;
+  page?: string | undefined;
+  perPage?: string | undefined;
+  sort?: string | undefined;
+  filters?: string | undefined;
+  joinOperator?: string | undefined;
 }
 /**
  * Extended column definition for data table

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

@@ -1,3 +1,4 @@
+import { Optional } from "../../../lib/optional.js";
 import { NavMain } from "./nav-main.js";
 import { NavProjects } from "./nav-projects.js";
 import { NavUser } from "./nav-user.js";
@@ -5,14 +6,14 @@ 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> {
+export interface AppSidebarProps extends Optional<React$1.ComponentProps<typeof Sidebar>> {
   navMain: React$1.ComponentProps<typeof NavMain>["items"];
-  navLabel?: string;
+  navLabel?: string | undefined;
   /** 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"];
+  teams?: React$1.ComponentProps<typeof TeamSwitcher>["teams"] | undefined;
+  projects?: React$1.ComponentProps<typeof NavProjects>["projects"] | undefined;
+  user?: React$1.ComponentProps<typeof NavUser>["user"] | undefined;
 }
 export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible, className, ...props }: AppSidebarProps): React$1.JSX.Element;
 //#endregion

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

@@ -5,13 +5,13 @@ export declare function NavMain({ items, label }: {
     title: string;
     url: string;
     icon: React.ReactNode;
-    isActive?: boolean;
-    linkProps?: Omit<React.ComponentProps<"a">, "href">;
+    isActive?: boolean | undefined;
+    linkProps?: Omit<React.ComponentProps<"a">, "href"> | undefined;
     items?: {
       title: string;
       url: string;
-      isActive?: boolean;
-    }[];
+      isActive?: boolean | undefined;
+    }[] | undefined;
   }[];
 }): import("react").JSX.Element;
 //#endregion

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

@@ -3,7 +3,7 @@ import { ComponentProps, ReactNode } from "react";
 //#region src/components/siyahi/callout.d.ts
 export interface CalloutProps extends Omit<ComponentProps<"aside">, "title"> {
   /** neutral for an aside, accent for a key point, warning for a caution, positive or negative for a gain or a loss. */
-  tone?: Tone;
+  tone?: Tone | undefined;
   /** A lucide icon, drawn in the tone's colour. */
   icon?: ReactNode;
   title?: ReactNode;

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

@@ -9,9 +9,9 @@ export interface ChangeBarProps {
    * Draws the bar from a centre line, losses leftward and gains rightward. Pass it when the column holds both signs:
    * rows.some((row) => row.change < 0) && rows.some((row) => row.change > 0).
    */
-  diverging?: boolean;
-  format?: DeltaProps["format"];
-  className?: string;
+  diverging?: boolean | undefined;
+  format?: DeltaProps["format"] | undefined;
+  className?: string | undefined;
 }
 /**
  * A table cell's change as a Delta over a 3px bar whose length is the change's size against the column's largest, so

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

@@ -4,23 +4,23 @@ export interface ChangeGridRow {
   /** One figure per column, in column order; null where there is none, such as a month still to come. NaN counts as none. */
   values: readonly (number | null)[];
   /** The row's total as the page works it out: monthly returns compound rather than add. Leave it out for no total. */
-  total?: number | null;
+  total?: number | null | undefined;
   /** Unique key when labels repeat. Defaults to `label`. */
-  key?: string;
+  key?: string | undefined;
 }
 export interface ChangeGridProps {
   /** The column heads, such as the months of a financial year. */
   columns: readonly string[];
   rows: readonly ChangeGridRow[];
   /** "pct" takes fractions, 0.025 for 2.5%; "money" takes amounts, written short in one unit. */
-  format?: "pct" | "money";
+  format?: "pct" | "money" | undefined;
   /** The change that takes the deepest tint, as a size. Defaults to the grid's largest, totals aside. */
-  range?: number;
+  range?: number | undefined;
   /** Heads the total column, which draws when any row has a total. */
-  totalLabel?: string;
+  totalLabel?: string | undefined;
   /** Names the table for a screen reader, such as "Monthly sales growth by year". */
   label: string;
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * Signed changes laid out rows by columns, such as each month of each year, every cell tinted by its sign and size

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

@@ -5,10 +5,10 @@ export interface DataBarProps {
   /** 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";
+  tone?: "chart" | "sign" | undefined;
   /** The figure, as the page formats it. */
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
 }
 /**
  * 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.

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

@@ -2,7 +2,7 @@ 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;
+  className?: string | undefined;
   children: ReactNode;
 }): import("react").JSX.Element;
 export interface DataListItemProps {

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

@@ -4,7 +4,7 @@ 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;
+  total?: number | undefined;
 }
 /** 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;

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

@@ -7,7 +7,7 @@ import { RowData } from "@tanstack/react-table";
  * `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
  */
 export declare function DataTableSortHeader<TData extends RowData>({ title }: {
-  title?: string;
+  title?: string | undefined;
 }): import("react").JSX.Element;
 export declare namespace DataTableSortHeader {
   var displayName: string;

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

@@ -2,8 +2,8 @@
 export interface DeltaProps {
   /** The signed change. For `pct`, a fraction: 0.025 is 2.5%. */
   value: number;
-  format?: "pct" | "money";
-  className?: string;
+  format?: "pct" | "money" | undefined;
+  className?: string | undefined;
 }
 /**
  * A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or

package/dist/components/siyahi/drawdown-chart.d.ts

@@ -21,9 +21,9 @@ export interface DrawdownChartCardProps<T extends object, K extends keyof T> ext
   /** The field holding the level, such as the day's cash balance or a fund's value. */
   levelKey: NumericKey<T>;
   /** Writes the level and the peak in the tooltip. Defaults to useFormat().money. */
-  levelFormatter?: (value: number) => string;
+  levelFormatter?: ((value: number) => string) | undefined;
   /** Names the fall in the legend and tooltip. */
-  label?: string;
+  label?: string | undefined;
 }
 /**
  * How far a level sits below the highest it had reached, over time: a fund's or a cash balance's fall from its