@refraction-ui/react 0.20.1 → 0.22.0

package/dist/index.d.cts

@@ -124,3 +124,7 @@ 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';

package/dist/index.d.ts

@@ -124,3 +124,7 @@ 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';

package/dist/index.js

@@ -125,3 +125,7 @@ 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';

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

@@ -1,6 +1,6 @@
 import { AccessibilityProps } from '../shared/index.cjs';
 
-type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'tertiary' | 'positive' | 'caution' | 'done';
 type BadgeSize = 'sm' | 'md';
 interface BadgeProps {
     variant?: BadgeVariant;
@@ -17,7 +17,7 @@ declare function getBadgeIcon(variant: BadgeVariant): string | undefined;
 declare function createBadge(props?: BadgeProps): BadgeAPI;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | undefined;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | "tertiary" | "positive" | "caution" | "done" | undefined;
     size?: "sm" | "md" | undefined;
 } & {
     className?: string;

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

@@ -1,6 +1,6 @@
 import { AccessibilityProps } from '../shared/index.js';
 
-type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'tertiary' | 'positive' | 'caution' | 'done';
 type BadgeSize = 'sm' | 'md';
 interface BadgeProps {
     variant?: BadgeVariant;
@@ -17,7 +17,7 @@ declare function getBadgeIcon(variant: BadgeVariant): string | undefined;
 declare function createBadge(props?: BadgeProps): BadgeAPI;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | undefined;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "success" | "warning" | "tertiary" | "positive" | "caution" | "done" | undefined;
     size?: "sm" | "md" | undefined;
 } & {
     className?: string;

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

@@ -5,12 +5,12 @@ import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared
  * muscle-memory (`<Button variant="primary">`) renders as the most-emphasized
  * button instead of falling through to the unstyled base. See issue #201.
  */
-type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'soft' | 'tertiary';
 /** Variants that map to the same visual style as `default`. */
 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;
@@ -34,8 +34,8 @@ declare function getButtonType(props: ButtonProps): string;
 
 declare const buttonTokens: TokenContract;
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "soft" | "tertiary" | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;

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

@@ -5,12 +5,12 @@ import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared
  * muscle-memory (`<Button variant="primary">`) renders as the most-emphasized
  * button instead of falling through to the unstyled base. See issue #201.
  */
-type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'soft' | 'tertiary';
 /** Variants that map to the same visual style as `default`. */
 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;
@@ -34,8 +34,8 @@ declare function getButtonType(props: ButtonProps): string;
 
 declare const buttonTokens: TokenContract;
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "soft" | "tertiary" | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;

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

@@ -1,5 +1,16 @@
 import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
 
+/**
+ * Visual tone of a card (issue #485).
+ * - `default` — the standard surface (activates the `--rfr-card-*` contract).
+ * - `subtle` — a lower-emphasis container on the subtle surface token.
+ * - `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;
@@ -29,7 +40,8 @@ declare function createCardFooter(): {
 
 declare const cardTokens: TokenContract;
 declare const cardVariants: (props?: ({
-    padding?: "none" | "default" | "compact" | undefined;
+    variant?: "default" | "subtle" | "tertiary" | undefined;
+    padding?: "default" | "none" | "compact" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
@@ -59,4 +71,4 @@ declare const cardFooterVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type CardAPI, type CardProps, 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

@@ -1,5 +1,16 @@
 import { AccessibilityProps, TokenContract } from '../shared/index.js';
 
+/**
+ * Visual tone of a card (issue #485).
+ * - `default` — the standard surface (activates the `--rfr-card-*` contract).
+ * - `subtle` — a lower-emphasis container on the subtle surface token.
+ * - `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;
@@ -29,7 +40,8 @@ declare function createCardFooter(): {
 
 declare const cardTokens: TokenContract;
 declare const cardVariants: (props?: ({
-    padding?: "none" | "default" | "compact" | undefined;
+    variant?: "default" | "subtle" | "tertiary" | undefined;
+    padding?: "default" | "none" | "compact" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
@@ -59,4 +71,4 @@ declare const cardFooterVariants: (props?: ({
     className?: string;
 }) | undefined) => string;
 
-export { type CardAPI, type CardProps, 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/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,110 @@
+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>;
+    /** Number of gridline intervals on the y-axis. */
+    tickCount?: number;
+    /** Headroom multiplier above the largest value. */
+    headroom?: number;
+    /** Show every n-th x label (the last label is always shown). */
+    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;
+/**
+ * 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, tooltipLeftPercent };

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
-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
@@ -19,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.
  */
@@ -33,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,7 +1,12 @@
 import * as React from 'react';
-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
@@ -19,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.
  */
@@ -33,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-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,33 @@
+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;
+    /** viewBox width; the chart always stretches to its container. 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. The SVG uses a viewBox, so it stretches to its container's width.
+ * 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-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 };