@refraction-ui/react 0.21.0 → 0.23.0

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { CardVariant } from '../card/index.cjs';
-export { CardAPI, CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants } from '../card/index.cjs';
+import { CardVariant, CardPadding, CardTitleLevel } from '../card/index.cjs';
+export { CardAPI, CardPadding, CardProps, CardTitleLevel, CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants } from '../card/index.cjs';
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Visual tone of the card. Defaults to `'default'` (issue #485). */
     variant?: CardVariant;
+    /** Built-in inner padding. Defaults to `'none'` (compose CardHeader/CardContent for spacing). */
+    padding?: CardPadding;
     /** Merge the card's classes/props onto the single child element instead of
      * rendering a `<div>` (Radix-style `asChild`) — e.g.
      * `<Card asChild><a href="/x">…</a></Card>` for a clickable card. Expects
@@ -22,7 +24,11 @@ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<H
 /**
  * CardTitle -- heading within a card header.
  */
-declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Heading element. Defaults to `h3`; pick the level that fits the page outline. */
+    as?: CardTitleLevel;
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * CardDescription -- subtext within a card header.
  */
@@ -36,4 +42,4 @@ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<
  */
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps };

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { CardVariant } from '../card/index.js';
-export { CardAPI, CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants } from '../card/index.js';
+import { CardVariant, CardPadding, CardTitleLevel } from '../card/index.js';
+export { CardAPI, CardPadding, CardProps, CardTitleLevel, CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants } from '../card/index.js';
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Visual tone of the card. Defaults to `'default'` (issue #485). */
     variant?: CardVariant;
+    /** Built-in inner padding. Defaults to `'none'` (compose CardHeader/CardContent for spacing). */
+    padding?: CardPadding;
     /** Merge the card's classes/props onto the single child element instead of
      * rendering a `<div>` (Radix-style `asChild`) — e.g.
      * `<Card asChild><a href="/x">…</a></Card>` for a clickable card. Expects
@@ -22,7 +24,11 @@ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<H
 /**
  * CardTitle -- heading within a card header.
  */
-declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Heading element. Defaults to `h3`; pick the level that fits the page outline. */
+    as?: CardTitleLevel;
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * CardDescription -- subtext within a card header.
  */
@@ -36,4 +42,4 @@ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<
  */
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps };

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-funnel-chart/index.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FunnelChartStep } from '../funnel-chart/index.js';
+export { FunnelChartStep } from '../funnel-chart/index.js';
+
+interface FunnelChartProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'children'> {
+    /** The funnel steps, top first. */
+    steps: FunnelChartStep[];
+    /** Formats a count. */
+    formatValue?: (value: number) => string;
+    /** Formats a percent (already 0–100). */
+    formatPercent?: (percent: number) => string;
+    /** Smallest bar width in percent, so a tiny step stays visible. Defaults to 6. */
+    minBarPercent?: number;
+    /** Copy — a step's share of the top step. */
+    shareLabel?: (share: string) => string;
+    /** Copy — continue-rate between two steps. */
+    conversionLabel?: (percent: string) => string;
+    /** Copy — count lost between two steps. */
+    droppedLabel?: (count: string) => string;
+}
+/**
+ * FunnelChart — a vertical conversion funnel: one bar per step, filled to its
+ * share of the first step, with the continue-rate and drop-off between steps.
+ * Renders an ordered list, so the figures are real text for assistive tech.
+ */
+declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLOListElement>>;
+
+export { FunnelChart, type FunnelChartProps };

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { LineChartSeries } from '../line-chart/index.js';
+export { LineChartSeries } from '../line-chart/index.js';
+
+interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The series to plot, all on one shared y-scale. */
+    series: LineChartSeries[];
+    /** One category label per data point. */
+    labels: string[];
+    /** Accessible name of the chart image (required). */
+    ariaLabel: string;
+    /** Rendered height in px (also the viewBox height). Defaults to 230. */
+    height?: number;
+    /**
+     * 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;
+    /** Formats a y-axis tick. Defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Fill the area under each line. Defaults to on for a single series only. */
+    area?: boolean;
+    /** Show the series legend under the chart. Defaults to true. */
+    showLegend?: boolean;
+}
+/**
+ * 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. 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>>;
+
+export { LineChart, type LineChartProps };

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 };

package/dist/internal/react-page-header/index.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { PageHeaderTitleLevel } from '../page-header/index.js';
+export { PageHeaderTitleLevel } from '../page-header/index.js';
+
+interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Optional eyebrow rendered above the title. */
+    kicker?: React.ReactNode;
+    /** The page title (required). */
+    title: React.ReactNode;
+    /** Optional supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Optional actions (buttons, menus) on the trailing edge. */
+    actions?: React.ReactNode;
+    /** Heading element for the title. Defaults to `h1`. */
+    as?: PageHeaderTitleLevel;
+}
+/**
+ * PageHeader — the heading cluster at the top of an application page: kicker,
+ * title, description and a trailing actions row. Renders a `<header>`.
+ */
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+
+export { PageHeader, type PageHeaderProps };

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

@@ -3,17 +3,25 @@ import * as React from 'react';
 export { SelectAPI, SelectOption, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants } from '../select/index.cjs';
 
 interface SelectProps {
+    /** Selected value (controlled). */
     value?: string;
+    /** Initially selected value (uncontrolled). */
+    defaultValue?: string;
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     children?: React.ReactNode;
+    /** Shown by `SelectValue` while nothing is selected. */
     placeholder?: string;
+    /** Class for the positioning wrapper the select renders around its parts. */
+    className?: string;
 }
 /**
  * Select -- dropdown select with accessible keyboard and ARIA support.
- * Compound component: Select > SelectTrigger + SelectContent > SelectItem.
+ * Compound component: Select > SelectTrigger (> SelectValue) + SelectContent > SelectItem.
+ * Renders a `relative` wrapper so the listbox floats under the trigger, and
+ * closes on a pointer press outside it.
  */
-declare function Select({ value, onValueChange, disabled, children, placeholder, }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, placeholder, className, }: SelectProps): react_jsx_runtime.JSX.Element;
 interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'sm' | 'default' | 'lg';
 }
@@ -26,5 +34,15 @@ interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Shown while nothing is selected. Defaults to the `Select` placeholder. */
+    placeholder?: React.ReactNode;
+}
+/**
+ * SelectValue -- place inside `SelectTrigger` to show the selected item's
+ * label (its `SelectItem` children), or the placeholder when nothing is
+ * selected. Pass `children` to render the value yourself.
+ */
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 
-export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps };
+export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

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

@@ -3,17 +3,25 @@ import * as React from 'react';
 export { SelectAPI, SelectOption, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants } from '../select/index.js';
 
 interface SelectProps {
+    /** Selected value (controlled). */
     value?: string;
+    /** Initially selected value (uncontrolled). */
+    defaultValue?: string;
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     children?: React.ReactNode;
+    /** Shown by `SelectValue` while nothing is selected. */
     placeholder?: string;
+    /** Class for the positioning wrapper the select renders around its parts. */
+    className?: string;
 }
 /**
  * Select -- dropdown select with accessible keyboard and ARIA support.
- * Compound component: Select > SelectTrigger + SelectContent > SelectItem.
+ * Compound component: Select > SelectTrigger (> SelectValue) + SelectContent > SelectItem.
+ * Renders a `relative` wrapper so the listbox floats under the trigger, and
+ * closes on a pointer press outside it.
  */
-declare function Select({ value, onValueChange, disabled, children, placeholder, }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ value: controlledValue, defaultValue, onValueChange, disabled, children, placeholder, className, }: SelectProps): react_jsx_runtime.JSX.Element;
 interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'sm' | 'default' | 'lg';
 }
@@ -26,5 +34,15 @@ interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Shown while nothing is selected. Defaults to the `Select` placeholder. */
+    placeholder?: React.ReactNode;
+}
+/**
+ * SelectValue -- place inside `SelectTrigger` to show the selected item's
+ * label (its `SelectItem` children), or the placeholder when nothing is
+ * selected. Pass `children` to render the value yourself.
+ */
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 
-export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps };
+export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/internal/react-stat-grid/index.d.ts

@@ -1,28 +1,39 @@
 import * as React from 'react';
-export { StatItem, statColumns } from '../stat-grid/index.js';
+import { StatTone, StatGridColumns, StatGridVariant, StatGridLayout } from '../stat-grid/index.js';
+export { StatGridColumns, StatGridLayout, StatGridVariant, StatItem, StatTone, statColumns } from '../stat-grid/index.js';
 
 interface StatGridItem {
     /** The primary value displayed prominently. Allows rich content in React. */
     value: React.ReactNode;
-    /** The descriptive label shown below the value. */
+    /** The descriptive label. */
     label: React.ReactNode;
+    /** Stable key; defaults to the index. */
+    id?: string;
+    /** Optional line explaining the figure (how it was computed, a delta). */
+    description?: React.ReactNode;
+    /** Colour of the value. Defaults to `default`. */
+    tone?: StatTone;
+    /** Extra attributes for this item's element (`data-*`, `aria-*`, `title`, className). */
+    props?: React.HTMLAttributes<HTMLDivElement>;
 }
 interface StatGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
     /** The stat items to display in the grid. */
     items: StatGridItem[];
     /**
-     * Number of columns. Defaults to `statColumns(items.length)`:
-     * 1 item → 1, 2 items → 2, 3+ items → 3.
+     * Maximum columns (reflows to fewer on narrow screens), or `auto` to fit as
+     * many ~12rem items as the width allows. Defaults to
+     * `statColumns(items.length)`: 1 → 1, 2 → 2, 3+ → 3.
      */
-    columns?: number;
+    columns?: StatGridColumns;
+    /** `plain` marketing callouts (default) or bordered `card` KPIs. */
+    variant?: StatGridVariant;
+    /** `value-first` (default) or `label-first` (dashboard KPI order). */
+    layout?: StatGridLayout;
 }
 /**
- * StatGrid — a marketing-style grid of stat callouts.
- *
- * Each item shows a large bold value and a small muted label. The grid
- * automatically computes the column count from the number of items, or you can
- * override it with `columns`. Uses `role="list"` / `role="listitem"` for
- * accessible enumeration.
+ * StatGrid — a responsive grid of stats: marketing callouts (`plain`) or
+ * dashboard KPI cards (`card`), value- or label-first, with an optional
+ * description and a tone per item. Uses `role="list"` / `role="listitem"`.
  */
 declare const StatGrid: React.ForwardRefExoticComponent<StatGridProps & React.RefAttributes<HTMLDivElement>>;
 

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TableDensity, TableHeadTone, TableAlign } from '../table/index.js';
+export { TableAlign, TableDensity, TableHeadTone } from '../table/index.js';
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Cell padding for every cell. Defaults to `default`. */
+    density?: TableDensity;
+    /** Look of every header cell. Defaults to `default`. */
+    headTone?: TableHeadTone;
+    /** Fixed layout: column widths come from the header row. */
+    fixed?: boolean;
+    /** Class for the horizontal scroll container around the table. */
+    containerClassName?: string;
+}
+/**
+ * Table — composable, semantic table primitives for cells that hold
+ * components (badges, buttons, links). The parts map one-to-one to the HTML
+ * table elements. For a data-driven table with sorting/filtering use DataTable.
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Horizontal alignment. Defaults to `start`. */
+    align?: TableAlign;
+}
+/** Header cell. `scope` defaults to `col`. */
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Horizontal alignment. Defaults to `start`. */
+    align?: TableAlign;
+    /** Tabular figures, no wrapping — for numbers. */
+    numeric?: boolean;
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Table, TableBody, TableCaption, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow };