@refraction-ui/react 0.22.0 → 0.23.1

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+export { cn, cva } from './internal/shared/index.cjs';
 export * from './internal/react-accordion/index.cjs';
 export * from './internal/react-ai/index.cjs';
 export * from './internal/react-animated-text/index.cjs';
@@ -128,3 +129,5 @@ export * from './internal/react-action-list/index.cjs';
 export * from './internal/react-funnel-chart/index.cjs';
 export * from './internal/react-line-chart/index.cjs';
 export * from './internal/react-page-header/index.cjs';
+export * from './internal/react-table/index.cjs';
+export * from './internal/react-native-select/index.cjs';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { cn, cva } from './internal/shared/index.js';
 export * from './internal/react-accordion/index.js';
 export * from './internal/react-ai/index.js';
 export * from './internal/react-animated-text/index.js';
@@ -128,3 +129,5 @@ export * from './internal/react-action-list/index.js';
 export * from './internal/react-funnel-chart/index.js';
 export * from './internal/react-line-chart/index.js';
 export * from './internal/react-page-header/index.js';
+export * from './internal/react-table/index.js';
+export * from './internal/react-native-select/index.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 'use client';
+export { cn, cva } from './shared.js';
 export * from './react-accordion.js';
 export * from './react-ai.js';
 export * from './react-animated-text.js';
@@ -129,3 +130,5 @@ export * from './react-action-list.js';
 export * from './react-funnel-chart.js';
 export * from './react-line-chart.js';
 export * from './react-page-header.js';
+export * from './react-table.js';
+export * from './react-native-select.js';

package/dist/internal/avatar/index.d.cts

@@ -1,6 +1,8 @@
 import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Outline of the avatar. */
+type AvatarShape = 'circle' | 'square';
 type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 interface AvatarProps {
     src?: string;
@@ -35,6 +37,7 @@ declare function createAvatar(props?: AvatarProps): AvatarAPI;
 
 declare const avatarTokens: TokenContract;
 declare const avatarVariants: (props?: ({
+    shape?: "circle" | "square" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & {
     className?: string;
@@ -50,4 +53,4 @@ declare const avatarFallbackVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type AvatarAPI, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, createAvatar, getInitials };
+export { type AvatarAPI, type AvatarLoadingStatus, type AvatarProps, type AvatarShape, type AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, createAvatar, getInitials };

package/dist/internal/avatar/index.d.ts

@@ -1,6 +1,8 @@
 import { AccessibilityProps, TokenContract } from '../shared/index.js';
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Outline of the avatar. */
+type AvatarShape = 'circle' | 'square';
 type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 interface AvatarProps {
     src?: string;
@@ -35,6 +37,7 @@ declare function createAvatar(props?: AvatarProps): AvatarAPI;
 
 declare const avatarTokens: TokenContract;
 declare const avatarVariants: (props?: ({
+    shape?: "circle" | "square" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & {
     className?: string;
@@ -50,4 +53,4 @@ declare const avatarFallbackVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type AvatarAPI, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, createAvatar, getInitials };
+export { type AvatarAPI, type AvatarLoadingStatus, type AvatarProps, type AvatarShape, type AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, createAvatar, getInitials };

package/dist/internal/data-table/index.d.cts

@@ -5,14 +5,47 @@ interface ColumnDef<T = Record<string, unknown>> {
     id: string;
     /** Column header text */
     header: string;
-    /** Accessor function to get cell value from row */
-    accessor: (row: T) => unknown;
+    /**
+     * Value of this column for a row. Drives sorting, filtering and — when no
+     * `cell` renderer is given — the rendered text. Optional for display-only
+     * columns that set `cell`.
+     */
+    accessor?: (row: T) => unknown;
+    /**
+     * Custom cell renderer. Framework adapters narrow the return type (React:
+     * `ReactNode`). When omitted the cell renders `String(accessor(row))`.
+     */
+    cell?: (row: T, index: number) => unknown;
+    /** Horizontal alignment of header and cells. Defaults to `start`. */
+    align?: DataTableAlign;
+    /** Numeric column: tabular figures, no wrapping, aligned to `end` unless `align` says otherwise. */
+    numeric?: boolean;
+    /** Extra class for this column's data cells. */
+    className?: string;
+    /** Extra class for this column's header cell. */
+    headerClassName?: string;
     /** Whether this column is sortable */
     sortable?: boolean;
     /** Whether this column is filterable */
     filterable?: boolean;
 }
 type SortDirection = 'asc' | 'desc';
+/** Horizontal alignment of a column (logical, RTL-safe). */
+type DataTableAlign = 'start' | 'center' | 'end';
+/** A column's effective alignment: explicit `align`, else `end` for numeric columns. */
+declare function resolveColumnAlign(col: {
+    align?: DataTableAlign;
+    numeric?: boolean;
+}): DataTableAlign;
+/** The raw value of a column for a row (`undefined` without an accessor). */
+declare function getColumnValue<T>(col: {
+    accessor?: (row: T) => unknown;
+}, row: T): unknown;
+/**
+ * Stable React/DOM key for a row: `getRowKey` when given, else the row's
+ * index. Prefer a `getRowKey` — index keys break row state on sort/filter.
+ */
+declare function resolveRowKey<T>(row: T, index: number, getRowKey?: (row: T, index: number) => string | number): string | number;
 interface DataTableProps<T = Record<string, unknown>> {
     /** Column definitions */
     columns: ColumnDef<T>[];
@@ -69,5 +102,17 @@ declare const rowVariants: (props?: ({
 } & {
     className?: string;
 }) | undefined) => string;
+/** Logical text alignment per column alignment. */
+declare const dataTableAlignClass: {
+    readonly start: "text-start";
+    readonly center: "text-center";
+    readonly end: "text-end";
+};
+/** Numeric cells: tabular figures, no wrapping. */
+declare const dataTableNumericClass = "tabular-nums whitespace-nowrap";
+/** Button inside a sortable header: the keyboard-reachable sort control. */
+declare const dataTableSortButtonClass = "inline-flex items-center gap-1 rounded-sm font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+/** Rows with a row action: pointer + keyboard focus ring. */
+declare const dataTableActionRowClass = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
 
-export { type ColumnDef, type DataTableAPI, type DataTableProps, type DataTableState, type SortDirection, cellVariants, createDataTable, headerVariants, rowVariants, tableVariants };
+export { type ColumnDef, type DataTableAPI, type DataTableAlign, type DataTableProps, type DataTableState, type SortDirection, cellVariants, createDataTable, dataTableActionRowClass, dataTableAlignClass, dataTableNumericClass, dataTableSortButtonClass, getColumnValue, headerVariants, resolveColumnAlign, resolveRowKey, rowVariants, tableVariants };

package/dist/internal/data-table/index.d.ts

@@ -5,14 +5,47 @@ interface ColumnDef<T = Record<string, unknown>> {
     id: string;
     /** Column header text */
     header: string;
-    /** Accessor function to get cell value from row */
-    accessor: (row: T) => unknown;
+    /**
+     * Value of this column for a row. Drives sorting, filtering and — when no
+     * `cell` renderer is given — the rendered text. Optional for display-only
+     * columns that set `cell`.
+     */
+    accessor?: (row: T) => unknown;
+    /**
+     * Custom cell renderer. Framework adapters narrow the return type (React:
+     * `ReactNode`). When omitted the cell renders `String(accessor(row))`.
+     */
+    cell?: (row: T, index: number) => unknown;
+    /** Horizontal alignment of header and cells. Defaults to `start`. */
+    align?: DataTableAlign;
+    /** Numeric column: tabular figures, no wrapping, aligned to `end` unless `align` says otherwise. */
+    numeric?: boolean;
+    /** Extra class for this column's data cells. */
+    className?: string;
+    /** Extra class for this column's header cell. */
+    headerClassName?: string;
     /** Whether this column is sortable */
     sortable?: boolean;
     /** Whether this column is filterable */
     filterable?: boolean;
 }
 type SortDirection = 'asc' | 'desc';
+/** Horizontal alignment of a column (logical, RTL-safe). */
+type DataTableAlign = 'start' | 'center' | 'end';
+/** A column's effective alignment: explicit `align`, else `end` for numeric columns. */
+declare function resolveColumnAlign(col: {
+    align?: DataTableAlign;
+    numeric?: boolean;
+}): DataTableAlign;
+/** The raw value of a column for a row (`undefined` without an accessor). */
+declare function getColumnValue<T>(col: {
+    accessor?: (row: T) => unknown;
+}, row: T): unknown;
+/**
+ * Stable React/DOM key for a row: `getRowKey` when given, else the row's
+ * index. Prefer a `getRowKey` — index keys break row state on sort/filter.
+ */
+declare function resolveRowKey<T>(row: T, index: number, getRowKey?: (row: T, index: number) => string | number): string | number;
 interface DataTableProps<T = Record<string, unknown>> {
     /** Column definitions */
     columns: ColumnDef<T>[];
@@ -69,5 +102,17 @@ declare const rowVariants: (props?: ({
 } & {
     className?: string;
 }) | undefined) => string;
+/** Logical text alignment per column alignment. */
+declare const dataTableAlignClass: {
+    readonly start: "text-start";
+    readonly center: "text-center";
+    readonly end: "text-end";
+};
+/** Numeric cells: tabular figures, no wrapping. */
+declare const dataTableNumericClass = "tabular-nums whitespace-nowrap";
+/** Button inside a sortable header: the keyboard-reachable sort control. */
+declare const dataTableSortButtonClass = "inline-flex items-center gap-1 rounded-sm font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+/** Rows with a row action: pointer + keyboard focus ring. */
+declare const dataTableActionRowClass = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
 
-export { type ColumnDef, type DataTableAPI, type DataTableProps, type DataTableState, type SortDirection, cellVariants, createDataTable, headerVariants, rowVariants, tableVariants };
+export { type ColumnDef, type DataTableAPI, type DataTableAlign, type DataTableProps, type DataTableState, type SortDirection, cellVariants, createDataTable, dataTableActionRowClass, dataTableAlignClass, dataTableNumericClass, dataTableSortButtonClass, getColumnValue, headerVariants, resolveColumnAlign, resolveRowKey, rowVariants, tableVariants };

package/dist/internal/line-chart/index.d.ts

@@ -25,11 +25,14 @@ interface LineChartOptions {
     /** viewBox height. */
     height: number;
     padding?: Partial<LineChartPadding>;
-    /** Number of gridline intervals on the y-axis. */
+    /** Target number of gridline intervals on the y-axis (the nice scale may use fewer). */
     tickCount?: number;
     /** Headroom multiplier above the largest value. */
     headroom?: number;
-    /** Show every n-th x label (the last label is always shown). */
+    /**
+     * Show every n-th x label (the last label is always shown). Defaults to
+     * thinning so labels are at least ~48 viewBox units apart.
+     */
     labelEvery?: number;
 }
 interface LineChartTick {
@@ -77,6 +80,17 @@ declare const DEFAULT_LINE_CHART_WIDTH = 760;
 declare const DEFAULT_LINE_CHART_HEIGHT = 230;
 /** The theme chart colour for the series at `index` (wraps around). */
 declare function lineChartColor(index: number): string;
+/**
+ * A "nice" y-scale: a 1-2-5 × 10^k step so there are at most `tickCount`
+ * intervals up to `rawMax`, and the max rounded up to a whole step. Tick
+ * values are therefore round numbers by construction (0, 2000, 4000, …) —
+ * never 5999.9999 — so any tick formatter prints clean labels.
+ */
+declare function niceScale(rawMax: number, tickCount: number): {
+    max: number;
+    step: number;
+    ticks: number[];
+};
 /**
  * Pure geometry for a responsive multi-series line chart. Every series shares
  * ONE y-scale (zero baseline to the largest value plus headroom), so series are
@@ -107,4 +121,4 @@ declare const lineChartClasses: {
     readonly legendSwatch: "h-[3px] w-2.5 rounded-sm";
 };
 
-export { DEFAULT_LINE_CHART_HEIGHT, DEFAULT_LINE_CHART_PADDING, DEFAULT_LINE_CHART_WIDTH, type LineChartColumn, type LineChartGeometry, type LineChartOptions, type LineChartPadding, type LineChartPath, type LineChartSeries, type LineChartTick, type LineChartXLabel, computeLineChart, lineChartClasses, lineChartColor, nextLineChartIndex, tooltipLeftPercent };
+export { DEFAULT_LINE_CHART_HEIGHT, DEFAULT_LINE_CHART_PADDING, DEFAULT_LINE_CHART_WIDTH, type LineChartColumn, type LineChartGeometry, type LineChartOptions, type LineChartPadding, type LineChartPath, type LineChartSeries, type LineChartTick, type LineChartXLabel, computeLineChart, lineChartClasses, lineChartColor, nextLineChartIndex, niceScale, tooltipLeftPercent };

package/dist/internal/native-select/index.d.ts

@@ -0,0 +1,21 @@
+/** Visual size of a NativeSelect. */
+type NativeSelectSize = 'sm' | 'default' | 'lg';
+/** The chevron's path (a down chevron), so adapters ship no icon dependency. */
+declare const nativeSelectChevronPath = "m6 9 6 6 6-6";
+
+/** Wrapper that positions the chevron over the select. */
+declare const nativeSelectWrapperClass = "relative inline-flex min-w-0 items-center";
+/**
+ * The `<select>`: the platform's own listbox (mobile pickers, type-to-select,
+ * form submission, `change` events) with the input look. Size-owned utilities
+ * live only in the size variants so `size` always wins.
+ */
+declare const nativeSelectVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The chevron: decorative, and never eats the click meant for the select. */
+declare const nativeSelectIconClass = "pointer-events-none absolute right-2.5 h-4 w-4 shrink-0 text-muted-foreground";
+
+export { type NativeSelectSize, nativeSelectChevronPath, nativeSelectIconClass, nativeSelectVariants, nativeSelectWrapperClass };

package/dist/internal/react-avatar/index.d.cts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { AvatarSize } from '../avatar/index.cjs';
-export { AvatarAPI, AvatarLoadingStatus, AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, getInitials } from '../avatar/index.cjs';
+import { AvatarSize, AvatarShape } from '../avatar/index.cjs';
+export { AvatarAPI, AvatarLoadingStatus, AvatarShape, AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, getInitials } from '../avatar/index.cjs';
 
 interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: AvatarSize;
+    /** `circle` (default) or `square` (rounded corners) — e.g. for teams and organisations. */
+    shape?: AvatarShape;
 }
 /**
  * Avatar -- circular image with fallback support.

package/dist/internal/react-avatar/index.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { AvatarSize } from '../avatar/index.js';
-export { AvatarAPI, AvatarLoadingStatus, AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, getInitials } from '../avatar/index.js';
+import { AvatarSize, AvatarShape } from '../avatar/index.js';
+export { AvatarAPI, AvatarLoadingStatus, AvatarShape, AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, getInitials } from '../avatar/index.js';
 
 interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: AvatarSize;
+    /** `circle` (default) or `square` (rounded corners) — e.g. for teams and organisations. */
+    shape?: AvatarShape;
 }
 /**
  * Avatar -- circular image with fallback support.

package/dist/internal/react-command/index.d.cts

@@ -2,6 +2,12 @@ import * as React from 'react';
 import { CommandItemData } from '../command/index.cjs';
 export { CommandAPI, CommandItemData, CommandState, CommandProps as CoreCommandProps, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants } from '../command/index.cjs';
 
+/** What a mounted CommandItem tells the root about itself. */
+interface RegisteredItem {
+    domId: string;
+    disabled: boolean;
+    select: () => void;
+}
 interface CommandContextValue {
     search: string;
     onSearch: (query: string) => void;
@@ -9,14 +15,19 @@ interface CommandContextValue {
     onSelect: (index: number) => void;
     items: CommandItemData[];
     filteredItems: CommandItemData[];
-    registerItem: (item: CommandItemData) => void;
-    unregisterItem: (id: string) => void;
+    /** Whether a value passes the current search. */
+    matches: (value: string) => boolean;
+    registerItem: (value: string, item: RegisteredItem) => void;
+    unregisterItem: (value: string) => void;
+    /** DOM id of the highlighted item, for aria-activedescendant. */
+    activeDescendant: string | undefined;
     listId: string;
     inputId: string;
 }
 interface CommandProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Custom filter — receives an item value and the search, returns true to keep it. */
     filter?: (value: string, search: string) => boolean;
     className?: string;
     children?: React.ReactNode;

package/dist/internal/react-command/index.d.ts

@@ -2,6 +2,12 @@ import * as React from 'react';
 import { CommandItemData } from '../command/index.js';
 export { CommandAPI, CommandItemData, CommandState, CommandProps as CoreCommandProps, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants } from '../command/index.js';
 
+/** What a mounted CommandItem tells the root about itself. */
+interface RegisteredItem {
+    domId: string;
+    disabled: boolean;
+    select: () => void;
+}
 interface CommandContextValue {
     search: string;
     onSearch: (query: string) => void;
@@ -9,14 +15,19 @@ interface CommandContextValue {
     onSelect: (index: number) => void;
     items: CommandItemData[];
     filteredItems: CommandItemData[];
-    registerItem: (item: CommandItemData) => void;
-    unregisterItem: (id: string) => void;
+    /** Whether a value passes the current search. */
+    matches: (value: string) => boolean;
+    registerItem: (value: string, item: RegisteredItem) => void;
+    unregisterItem: (value: string) => void;
+    /** DOM id of the highlighted item, for aria-activedescendant. */
+    activeDescendant: string | undefined;
     listId: string;
     inputId: string;
 }
 interface CommandProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Custom filter — receives an item value and the search, returns true to keep it. */
     filter?: (value: string, search: string) => boolean;
     className?: string;
     children?: React.ReactNode;

package/dist/internal/react-data-table/index.d.cts

@@ -1,19 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ColumnDef, SortDirection } from '../data-table/index.cjs';
-export { ColumnDef, DataTableProps as CoreDataTableProps, DataTableAPI, DataTableState, SortDirection, cellVariants, headerVariants, rowVariants, tableVariants } from '../data-table/index.cjs';
+export { ColumnDef, DataTableProps as CoreDataTableProps, DataTableAPI, DataTableAlign, DataTableState, SortDirection, cellVariants, headerVariants, rowVariants, tableVariants } from '../data-table/index.cjs';
 
-interface DataTableProps<T = Record<string, unknown>> {
-    columns: ColumnDef<T>[];
+interface DataTableColumn<T = Record<string, unknown>> extends Omit<ColumnDef<T>, 'header' | 'cell'> {
+    /** Header content. A string is also used for the filter input's label. */
+    header: React.ReactNode;
+    /** Render the cell. Defaults to `String(accessor(row))`. */
+    cell?: (row: T, index: number) => React.ReactNode;
+}
+interface DataTableProps<T = Record<string, unknown>> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'children'> {
+    columns: DataTableColumn<T>[];
     data: T[];
     sortBy?: string;
     sortDir?: SortDirection;
     onSort?: (columnId: string, direction: SortDirection) => void;
     filters?: Record<string, string>;
-    className?: string;
-    emptyMessage?: string;
+    emptyMessage?: React.ReactNode;
+    /** Stable key per row. Defaults to the row index — pass one when rows can reorder. */
+    getRowKey?: (row: T, index: number) => string | number;
+    /** Extra attributes for a row (`data-*`, `aria-*`, className, handlers). */
+    getRowProps?: (row: T, index: number) => React.HTMLAttributes<HTMLTableRowElement>;
+    /**
+     * Row action. Makes each row focusable (Tab) and activatable with click,
+     * Enter or Space. Keep a real link/button in the row too when the action
+     * needs an accessible name beyond the row's text.
+     */
+    onRowClick?: (row: T, index: number) => void;
+    /** Table caption (rendered as `<caption>`). */
+    caption?: React.ReactNode;
+    /** Class for the horizontal scroll wrapper. */
+    wrapperClassName?: string;
 }
-declare function DataTable<T = Record<string, unknown>>({ columns, data, sortBy: controlledSortBy, sortDir: controlledSortDir, onSort, filters: controlledFilters, className, emptyMessage, }: DataTableProps<T>): React.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
+declare function DataTable<T = Record<string, unknown>>({ columns, data, sortBy: controlledSortBy, sortDir: controlledSortDir, onSort, filters: controlledFilters, className, emptyMessage, getRowKey, getRowProps, onRowClick, caption, wrapperClassName, ...tableProps }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
-export { DataTable, type DataTableProps };
+export { DataTable, type DataTableColumn, type DataTableProps };

package/dist/internal/react-data-table/index.d.ts

@@ -1,19 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ColumnDef, SortDirection } from '../data-table/index.js';
-export { ColumnDef, DataTableProps as CoreDataTableProps, DataTableAPI, DataTableState, SortDirection, cellVariants, headerVariants, rowVariants, tableVariants } from '../data-table/index.js';
+export { ColumnDef, DataTableProps as CoreDataTableProps, DataTableAPI, DataTableAlign, DataTableState, SortDirection, cellVariants, headerVariants, rowVariants, tableVariants } from '../data-table/index.js';
 
-interface DataTableProps<T = Record<string, unknown>> {
-    columns: ColumnDef<T>[];
+interface DataTableColumn<T = Record<string, unknown>> extends Omit<ColumnDef<T>, 'header' | 'cell'> {
+    /** Header content. A string is also used for the filter input's label. */
+    header: React.ReactNode;
+    /** Render the cell. Defaults to `String(accessor(row))`. */
+    cell?: (row: T, index: number) => React.ReactNode;
+}
+interface DataTableProps<T = Record<string, unknown>> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'children'> {
+    columns: DataTableColumn<T>[];
     data: T[];
     sortBy?: string;
     sortDir?: SortDirection;
     onSort?: (columnId: string, direction: SortDirection) => void;
     filters?: Record<string, string>;
-    className?: string;
-    emptyMessage?: string;
+    emptyMessage?: React.ReactNode;
+    /** Stable key per row. Defaults to the row index — pass one when rows can reorder. */
+    getRowKey?: (row: T, index: number) => string | number;
+    /** Extra attributes for a row (`data-*`, `aria-*`, className, handlers). */
+    getRowProps?: (row: T, index: number) => React.HTMLAttributes<HTMLTableRowElement>;
+    /**
+     * Row action. Makes each row focusable (Tab) and activatable with click,
+     * Enter or Space. Keep a real link/button in the row too when the action
+     * needs an accessible name beyond the row's text.
+     */
+    onRowClick?: (row: T, index: number) => void;
+    /** Table caption (rendered as `<caption>`). */
+    caption?: React.ReactNode;
+    /** Class for the horizontal scroll wrapper. */
+    wrapperClassName?: string;
 }
-declare function DataTable<T = Record<string, unknown>>({ columns, data, sortBy: controlledSortBy, sortDir: controlledSortDir, onSort, filters: controlledFilters, className, emptyMessage, }: DataTableProps<T>): React.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
+declare function DataTable<T = Record<string, unknown>>({ columns, data, sortBy: controlledSortBy, sortDir: controlledSortDir, onSort, filters: controlledFilters, className, emptyMessage, getRowKey, getRowProps, onRowClick, caption, wrapperClassName, ...tableProps }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
-export { DataTable, type DataTableProps };
+export { DataTable, type DataTableColumn, type DataTableProps };

package/dist/internal/react-dialog/index.d.cts

@@ -8,6 +8,11 @@ interface DialogContextValue {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether a DialogTitle / DialogDescription is mounted — only then is it referenced. */
+    hasTitle: boolean;
+    hasDescription: boolean;
+    setHasTitle: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
 }
 interface DialogProps {
     open?: boolean;

package/dist/internal/react-dialog/index.d.ts

@@ -8,6 +8,11 @@ interface DialogContextValue {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether a DialogTitle / DialogDescription is mounted — only then is it referenced. */
+    hasTitle: boolean;
+    hasDescription: boolean;
+    setHasTitle: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
 }
 interface DialogProps {
     open?: boolean;

package/dist/internal/react-dropdown-menu/index.d.cts

@@ -5,6 +5,8 @@ interface DropdownMenuContextValue {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     contentId: string;
+    /** The trigger element, so the portalled content can anchor to it. */
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
 }
 interface DropdownMenuProps {
     open?: boolean;
@@ -21,7 +23,23 @@ interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
     asChild?: boolean;
 }
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type DropdownMenuAlign = 'start' | 'center' | 'end';
+/**
+ * Fixed-position coordinates that place a menu under its trigger, aligned to
+ * the trigger's start, centre or end edge. Pure, so it is unit-testable.
+ */
+declare function computeMenuPosition(trigger: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+}, contentWidth: number, align: DropdownMenuAlign, sideOffset: number): React.CSSProperties;
 interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Horizontal alignment to the trigger. Defaults to `start`. */
+    align?: DropdownMenuAlign;
+    /** Gap between trigger and menu in px. Defaults to 4. */
+    sideOffset?: number;
 }
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
 interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
@@ -36,4 +54,4 @@ interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
 
-export { DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps };
+export { DropdownMenu, type DropdownMenuAlign, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, computeMenuPosition };

package/dist/internal/react-dropdown-menu/index.d.ts

@@ -5,6 +5,8 @@ interface DropdownMenuContextValue {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     contentId: string;
+    /** The trigger element, so the portalled content can anchor to it. */
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
 }
 interface DropdownMenuProps {
     open?: boolean;
@@ -21,7 +23,23 @@ interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
     asChild?: boolean;
 }
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type DropdownMenuAlign = 'start' | 'center' | 'end';
+/**
+ * Fixed-position coordinates that place a menu under its trigger, aligned to
+ * the trigger's start, centre or end edge. Pure, so it is unit-testable.
+ */
+declare function computeMenuPosition(trigger: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+}, contentWidth: number, align: DropdownMenuAlign, sideOffset: number): React.CSSProperties;
 interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Horizontal alignment to the trigger. Defaults to `start`. */
+    align?: DropdownMenuAlign;
+    /** Gap between trigger and menu in px. Defaults to 4. */
+    sideOffset?: number;
 }
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
 interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
@@ -36,4 +54,4 @@ interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
 
-export { DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps };
+export { DropdownMenu, type DropdownMenuAlign, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, computeMenuPosition };

package/dist/internal/react-line-chart/index.d.ts

@@ -11,7 +11,11 @@ interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'chi
     ariaLabel: string;
     /** Rendered height in px (also the viewBox height). Defaults to 230. */
     height?: number;
-    /** viewBox width; the chart always stretches to its container. Defaults to 760. */
+    /**
+     * Fallback width, used for the server render and before the container is
+     * measured. On the client the chart measures its container and draws at that
+     * width, so text and strokes stay at their authored size. Defaults to 760.
+     */
     width?: number;
     /** Formats a value in the tooltip. */
     formatValue?: (value: number) => string;
@@ -25,7 +29,8 @@ interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'chi
 /**
  * LineChart — a responsive multi-series line chart on one shared y-scale, with
  * gridlines, category x-labels, a hover/keyboard crosshair + tooltip and a
- * legend. The SVG uses a viewBox, so it stretches to its container's width.
+ * legend. It measures its container and draws at that width (1:1 viewBox), so
+ * axis text keeps its authored size in narrow panels.
  * Keyboard: focus the chart, then ←/→/Home/End move between categories.
  */
 declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;

package/dist/internal/react-native-select/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { NativeSelectSize } from '../native-select/index.js';
+export { NativeSelectSize } from '../native-select/index.js';
+
+interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Visual size; shadows the native `size` (visible rows), which a dropdown never wants. */
+    size?: NativeSelectSize;
+    /** Classes for the positioning wrapper (width, margins); `className` styles the select. */
+    containerClassName?: string;
+}
+/**
+ * NativeSelect — a native `<select>` with the input look and a chevron.
+ * Children are ordinary `<option>`/`<optgroup>` elements; every native
+ * attribute and event passes through, and the ref is the select itself. Use it
+ * for forms and filter bars; use `Select` for a custom listbox.
+ */
+declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { NativeSelect, type NativeSelectProps };