@refraction-ui/react 0.21.0 → 0.23.0

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';
@@ -124,3 +125,9 @@ export * from './internal/react-audience-feature-card/index.cjs';
 export * from './internal/react-sortable-list/index.cjs';
 export * from './internal/react-kanban-board/index.cjs';
 export * from './internal/react-slot-picker/index.cjs';
+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';
@@ -124,3 +125,9 @@ export * from './internal/react-audience-feature-card/index.js';
 export * from './internal/react-sortable-list/index.js';
 export * from './internal/react-kanban-board/index.js';
 export * from './internal/react-slot-picker/index.js';
+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 '@refraction-ui/shared';
 export * from './react-accordion.js';
 export * from './react-ai.js';
 export * from './react-animated-text.js';
@@ -125,3 +126,9 @@ export * from './react-audience-feature-card.js';
 export * from './react-sortable-list.js';
 export * from './react-kanban-board.js';
 export * from './react-slot-picker.js';
+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/action-list/index.d.ts

@@ -0,0 +1,39 @@
+/** Row padding. */
+type ActionListDensity = 'default' | 'compact';
+interface ActionListItemProps {
+    disabled?: boolean;
+    density?: ActionListDensity;
+}
+interface ActionListItemAPI {
+    /** ARIA attributes for the row button. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic props for one ActionList row. Each row is ONE
+ * action (open, select, go to) rendered as a native button, so it is reachable
+ * by Tab and activated by Enter / Space — unlike a clickable table row.
+ */
+declare function createActionListItem(props?: ActionListItemProps): ActionListItemAPI;
+
+/** The list: rows separated by hairlines, no bullets. */
+declare const actionListClass = "m-0 flex list-none flex-col divide-y divide-border-subtle p-0";
+/** A row button: full width, whole row is the hit target. */
+declare const actionListItemVariants: (props?: ({
+    density?: "default" | "compact" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Leading text column (title, description, meta). */
+declare const actionListItemBodyClass = "flex min-w-0 flex-1 flex-col gap-0.5";
+/** Primary line. */
+declare const actionListItemTitleClass = "break-words font-semibold text-foreground";
+/** Supporting line under the title. */
+declare const actionListItemDescriptionClass = "break-words text-xs text-muted-foreground";
+/** Tertiary line (owner, tags, ids). */
+declare const actionListItemMetaClass = "break-words text-xs text-muted-foreground";
+/** Trailing column (dates, sizes, counts). */
+declare const actionListItemTrailingClass = "flex flex-none items-center gap-4 text-xs tabular-nums text-muted-foreground";
+
+export { type ActionListDensity, type ActionListItemAPI, type ActionListItemProps, actionListClass, actionListItemBodyClass, actionListItemDescriptionClass, actionListItemMetaClass, actionListItemTitleClass, actionListItemTrailingClass, actionListItemVariants, createActionListItem };

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/button/index.d.cts

@@ -10,7 +10,7 @@ type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'second
 declare const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>>;
 /** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */
 declare function resolveButtonVariant(variant: ButtonVariant | undefined): ButtonVariant | undefined;
-type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon';
+type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs';
 interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -35,7 +35,7 @@ declare function getButtonType(props: ButtonProps): string;
 declare const buttonTokens: TokenContract;
 declare const buttonVariants: (props?: ({
     variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "soft" | "tertiary" | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;

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

@@ -10,7 +10,7 @@ type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'second
 declare const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>>;
 /** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */
 declare function resolveButtonVariant(variant: ButtonVariant | undefined): ButtonVariant | undefined;
-type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon';
+type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs';
 interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -35,7 +35,7 @@ declare function getButtonType(props: ButtonProps): string;
 declare const buttonTokens: TokenContract;
 declare const buttonVariants: (props?: ({
     variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "soft" | "tertiary" | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;

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

@@ -7,6 +7,10 @@ import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
  * - `tertiary` — a tinted second-brand-accent card.
  */
 type CardVariant = 'default' | 'subtle' | 'tertiary';
+/** Built-in inner padding of the Card container. */
+type CardPadding = 'none' | 'default' | 'compact';
+/** Heading element for CardTitle. */
+type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface CardProps {
     /** Optional accessible role override */
     role?: string;
@@ -67,4 +71,4 @@ declare const cardFooterVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type CardAPI, type CardProps, type CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };
+export { type CardAPI, type CardPadding, type CardProps, type CardTitleLevel, type CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };

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

@@ -7,6 +7,10 @@ import { AccessibilityProps, TokenContract } from '../shared/index.js';
  * - `tertiary` — a tinted second-brand-accent card.
  */
 type CardVariant = 'default' | 'subtle' | 'tertiary';
+/** Built-in inner padding of the Card container. */
+type CardPadding = 'none' | 'default' | 'compact';
+/** Heading element for CardTitle. */
+type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface CardProps {
     /** Optional accessible role override */
     role?: string;
@@ -67,4 +71,4 @@ declare const cardFooterVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type CardAPI, type CardProps, type CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };
+export { type CardAPI, type CardPadding, type CardProps, type CardTitleLevel, type CardVariant, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };

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

@@ -0,0 +1,60 @@
+interface FunnelChartStep {
+    /** Stable key. */
+    id: string;
+    /** Step name. */
+    label: string;
+    /** Secondary line under the label. */
+    description?: string;
+    /** Count at this step. */
+    value: number;
+}
+interface FunnelChartTransition {
+    /** Percent (0–100) of this step that reached the next one. */
+    conversion: number;
+    /** Absolute count lost between this step and the next. */
+    dropped: number;
+}
+interface FunnelChartRow {
+    step: FunnelChartStep;
+    /** Percent (0–100) of the first step's value. */
+    shareOfTop: number;
+    /** Width the bar draws at, in percent — never below `minBarPercent`. */
+    barPercent: number;
+    /** Transition to the following step; absent on the last step. */
+    next?: FunnelChartTransition;
+}
+/** Smallest bar width in percent, so a tiny step stays visible. */
+declare const DEFAULT_FUNNEL_MIN_BAR_PERCENT = 6;
+/**
+ * Derive every row of a stepped conversion funnel: each step's share of the top
+ * step, the bar width it draws at, and between two steps the continue-rate and
+ * how many were lost. Pure and deterministic.
+ */
+declare function computeFunnel(steps: FunnelChartStep[], minBarPercent?: number): FunnelChartRow[];
+/** Default copy + number formatting; every one is overridable by a prop. */
+declare const funnelChartDefaults: {
+    formatValue: (value: number) => string;
+    formatPercent: (percent: number) => string;
+    shareLabel: (share: string) => string;
+    conversionLabel: (percent: string) => string;
+    droppedLabel: (count: string) => string;
+};
+
+/** Token-class styles for FunnelChart; no colour literals. */
+declare const funnelChartClasses: {
+    readonly root: "m-0 grid list-none p-0";
+    readonly bar: "relative flex items-center gap-3 overflow-hidden rounded-lg border border-border bg-background px-3.5 py-3";
+    readonly fill: "absolute inset-y-0 left-0 border-r-2 border-primary bg-accent";
+    readonly chevron: "relative shrink-0 text-primary";
+    readonly text: "relative grid min-w-0 flex-1";
+    readonly label: "text-[13px] font-bold text-foreground";
+    readonly description: "text-[11px] text-muted-foreground";
+    readonly figure: "relative grid text-right";
+    readonly value: "text-[15px] font-bold tabular-nums text-foreground";
+    readonly share: "text-[10.5px] text-muted-foreground";
+    readonly transition: "flex items-center gap-2 py-1.5 pl-[18px] text-[11px] text-muted-foreground";
+    readonly conversion: "font-semibold text-success";
+    readonly dropped: "font-semibold text-destructive";
+};
+
+export { DEFAULT_FUNNEL_MIN_BAR_PERCENT, type FunnelChartRow, type FunnelChartStep, type FunnelChartTransition, computeFunnel, funnelChartClasses, funnelChartDefaults };

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

@@ -0,0 +1,124 @@
+interface LineChartSeries {
+    /** Stable key for the series. */
+    id: string;
+    /** Legend / tooltip name. */
+    name: string;
+    /**
+     * Any CSS colour (a token `hsl(var(--…))` or a data colour). Defaults to the
+     * theme's chart palette (`--chart-1` … `--chart-5`) by series position.
+     */
+    color?: string;
+    /** One value per label, in label order. */
+    data: number[];
+}
+interface LineChartPadding {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+interface LineChartOptions {
+    series: LineChartSeries[];
+    labels: string[];
+    /** viewBox width — the SVG scales to its container's width. */
+    width: number;
+    /** viewBox height. */
+    height: number;
+    padding?: Partial<LineChartPadding>;
+    /** 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). Defaults to
+     * thinning so labels are at least ~48 viewBox units apart.
+     */
+    labelEvery?: number;
+}
+interface LineChartTick {
+    value: number;
+    y: number;
+}
+interface LineChartXLabel {
+    index: number;
+    label: string;
+    x: number;
+}
+interface LineChartPath {
+    id: string;
+    /** Resolved stroke colour. */
+    color: string;
+    /** The stroke path. */
+    line: string;
+    /** The line closed down to the zero baseline, for an area fill. */
+    area: string;
+}
+interface LineChartColumn {
+    index: number;
+    x: number;
+    width: number;
+}
+interface LineChartGeometry {
+    width: number;
+    height: number;
+    padding: LineChartPadding;
+    /** Top of the shared y-scale. */
+    max: number;
+    ticks: LineChartTick[];
+    xLabels: LineChartXLabel[];
+    paths: LineChartPath[];
+    /** One hover/focus column per category. */
+    columns: LineChartColumn[];
+    x: (index: number) => number;
+    y: (value: number) => number;
+    /** Top and bottom of the plot area, for a crosshair. */
+    plotTop: number;
+    plotBottom: number;
+}
+declare const DEFAULT_LINE_CHART_PADDING: LineChartPadding;
+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
+ * comparable. Coordinates are in viewBox units; the SVG scales to its container.
+ */
+declare function computeLineChart(options: LineChartOptions): LineChartGeometry;
+/** Where a tooltip for `index` sits horizontally, as a percent of the chart width. */
+declare function tooltipLeftPercent(geometry: LineChartGeometry, index: number): number;
+/**
+ * The category index a keyboard key moves to from `current` (null = nothing
+ * active yet). Returns `current` unchanged for keys the chart doesn't handle.
+ */
+declare function nextLineChartIndex(current: number | null, key: string, count: number): number | null;
+
+/** Token-class styles for LineChart; no colour literals. */
+declare const lineChartClasses: {
+    readonly root: "relative";
+    readonly svg: "block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+    readonly gridline: "stroke-border";
+    readonly axis: "fill-muted-foreground text-[9px]";
+    readonly crosshair: "stroke-border";
+    readonly marker: "stroke-card";
+    readonly tooltip: "pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg";
+    readonly tooltipLabel: "mb-1 opacity-60";
+    readonly tooltipRow: "flex justify-between gap-2";
+    readonly legend: "mt-2.5 flex flex-wrap gap-3.5";
+    readonly legendItem: "inline-flex items-center gap-1.5 text-[11px] text-muted-foreground";
+    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, 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/page-header/index.d.ts

@@ -0,0 +1,35 @@
+/** Heading element used for the page title. */
+type PageHeaderTitleLevel = 'h1' | 'h2' | 'h3';
+interface PageHeaderProps {
+    /** Whether an actions slot will be rendered. */
+    hasActions?: boolean;
+}
+interface PageHeaderAPI {
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic data attributes for a PageHeader — the heading
+ * cluster at the top of an application page (kicker, title, description and a
+ * trailing actions row). Unlike SectionHead (a centred marketing heading) it is
+ * sized for dense app chrome and never centres.
+ */
+declare function createPageHeader(props?: PageHeaderProps): PageHeaderAPI;
+
+/**
+ * Root: text cluster on the leading edge, actions on the trailing edge; wraps
+ * on narrow screens. Carries no outer margin — the page layout spaces it.
+ */
+declare const pageHeaderClass = "flex flex-wrap items-start justify-between gap-4";
+/** Text cluster (kicker, title, description). */
+declare const pageHeaderTextClass = "flex min-w-0 flex-1 flex-col gap-1";
+/** Small uppercase eyebrow above the title. */
+declare const pageHeaderKickerClass = "break-words text-[11px] uppercase tracking-wider text-muted-foreground";
+/** Title — app-sized, not a marketing display size. */
+declare const pageHeaderTitleClass = "break-words text-xl font-semibold text-foreground";
+/** Supporting copy under the title, capped at a readable measure. */
+declare const pageHeaderDescriptionClass = "max-w-prose text-sm text-muted-foreground";
+/** Trailing actions row. */
+declare const pageHeaderActionsClass = "flex flex-none flex-wrap items-center gap-2";
+
+export { type PageHeaderAPI, type PageHeaderProps, type PageHeaderTitleLevel, createPageHeader, pageHeaderActionsClass, pageHeaderClass, pageHeaderDescriptionClass, pageHeaderKickerClass, pageHeaderTextClass, pageHeaderTitleClass };

package/dist/internal/react-action-list/index.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ActionListDensity } from '../action-list/index.js';
+export { ActionListDensity } from '../action-list/index.js';
+
+interface ActionListProps extends React.HTMLAttributes<HTMLUListElement> {
+}
+/** ActionList — a vertical list whose rows are each one action. Renders a `<ul>`. */
+declare const ActionList: React.ForwardRefExoticComponent<ActionListProps & React.RefAttributes<HTMLUListElement>>;
+interface ActionListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'type'> {
+    /** Primary line (required). */
+    title: React.ReactNode;
+    /** Optional supporting line under the title. */
+    description?: React.ReactNode;
+    /** Optional tertiary line (owner, tags, ids). */
+    meta?: React.ReactNode;
+    /** Optional trailing column (dates, sizes, counts). */
+    trailing?: React.ReactNode;
+    /** Row padding. Defaults to `default`. */
+    density?: ActionListDensity;
+}
+/**
+ * ActionListItem — one row: an `<li>` holding a full-width native button with
+ * a title, optional supporting lines and a trailing column. The ref and all
+ * button props go to the button.
+ */
+declare const ActionListItem: React.ForwardRefExoticComponent<ActionListItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { ActionList, ActionListItem, type ActionListItemProps, type ActionListProps };

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.