@refraction-ui/react 0.14.0 → 0.16.0

package/dist/internal/browser-chrome-mock/index.d.ts

@@ -0,0 +1,57 @@
+/** Recording or live stream status for the browser chrome mock. */
+type BrowserChromeStatus = 'live' | 'rec';
+interface BrowserChromeMockProps {
+    /** URL to display in the address bar. */
+    url: string;
+    /** Optional status badge shown in the chrome bar. */
+    status?: BrowserChromeStatus;
+}
+interface BrowserChromeMockAPI {
+    /** ARIA attributes to spread on the group element. */
+    ariaProps: {
+        role: 'group';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/** Split a URL into bold domain and normal path segments. */
+declare function splitUrl(url: string): {
+    domain: string;
+    path: string;
+};
+/**
+ * Build the framework-agnostic props for a BrowserChromeMock.
+ *
+ * Returns a `role="group"` aria label plus optional `data-status` so adapters
+ * can hook CSS without duplicating logic.
+ */
+declare function createBrowserChromeMock(props?: Pick<BrowserChromeMockProps, 'status'>): BrowserChromeMockAPI;
+
+/** Outer frame wrapping the chrome bar and content. */
+declare const browserChromeMockVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/** The chrome toolbar row containing dots, URL bar, and optional badge. */
+declare const chromeBarClass = "flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2";
+/** A single traffic-light dot. */
+declare const trafficDotClass = "size-2.5 rounded-full border border-border";
+/** Centered URL bar. */
+declare const urlBarClass = "flex-1 text-center font-mono text-[11px] text-muted-foreground";
+/** Bold domain segment inside the URL bar. */
+declare const urlDomainClass = "font-semibold text-foreground";
+/**
+ * Status badge shown in the chrome bar.
+ *
+ * live  → emerald tint (approved exception to semantic tokens)
+ * rec   → destructive tint with a pulsing dot
+ */
+declare const statusBadgeVariants: (props?: ({
+    status?: "live" | "rec" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Inner content area that receives slotted/children content. */
+declare const contentAreaClass = "p-0";
+
+export { type BrowserChromeMockAPI, type BrowserChromeMockProps, type BrowserChromeStatus, browserChromeMockVariants, chromeBarClass, contentAreaClass, createBrowserChromeMock, splitUrl, statusBadgeVariants, trafficDotClass, urlBarClass, urlDomainClass };

package/dist/internal/kanban-board/index.d.ts

@@ -0,0 +1,98 @@
+/** A single column definition for the Kanban board. */
+type KanbanColumnDef = {
+    /** Unique identifier for this column (matches cards' column id). */
+    id: string;
+    /** Display title of the column (e.g. stage name). */
+    title: string;
+    /** Optional accent color applied via CSS var `--kanban-accent`. */
+    accent?: string;
+    /** Optional note or gate description shown below the column header. */
+    note?: string;
+};
+interface KanbanBoardAPI {
+    /** ARIA attributes to spread on the board container. */
+    ariaProps: {
+        role: 'group';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic board props.
+ *
+ * Returns `role="group"` with a fixed accessible label and data attributes
+ * so adapters can style based on state without inlining logic.
+ */
+declare function createKanbanBoard(): KanbanBoardAPI;
+/**
+ * Bucket cards into a Map keyed by column id, preserving column order.
+ * Columns that have no cards get an empty array entry so callers can always
+ * iterate `columns` and look up their bucket safely.
+ *
+ * @param cards - All cards to distribute.
+ * @param getColumnId - Selector that reads the column id from a card.
+ * @param columns - Column definitions (determines output order).
+ */
+declare function cardsByColumn<T>(cards: T[], getColumnId: (c: T) => string, columns: KanbanColumnDef[]): Map<string, T[]>;
+/**
+ * Split a card list into a visible slice and an overflow count.
+ *
+ * @param cards - Full list of cards in the column.
+ * @param cap - Maximum visible cards. Defaults to 5.
+ */
+declare function visibleAndOverflow<T>(cards: T[], cap?: number): {
+    visible: T[];
+    overflow: number;
+};
+
+/** The outer board: horizontal scroll, flex row, gap between columns. */
+declare const kanbanBoardVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/** A single column: muted background, rounded, fixed minimum width. */
+declare const kanbanColumnVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/** Column header row: icon slot + title + count badge. */
+declare const kanbanColumnHeaderClass = "flex items-center gap-2 px-4 pt-4 pb-2";
+/** Column title text. */
+declare const kanbanColumnTitleClass = "flex-1 text-sm font-semibold text-foreground truncate";
+/**
+ * Column count badge: a compact pill to the right of the title.
+ * Uses muted tokens so it sits quietly against any column accent.
+ */
+declare const kanbanColumnCountClass = "ml-auto inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground";
+/**
+ * Thin accent bar directly below the header.
+ * Callers apply `style={{ '--kanban-accent': def.accent }}` on the column
+ * element; this bar reads `var(--kanban-accent)` via an inline style.
+ * When no accent is supplied the bar is invisible (transparent).
+ */
+declare const kanbanAccentBarClass = "h-0.5 w-full";
+/**
+ * Note/gate bar shown beneath the accent bar.
+ * Displays brief stage notes (e.g. "Technical screen required").
+ */
+declare const kanbanNoteBarClass = "mx-4 mb-2 rounded-md bg-muted px-3 py-1.5 text-xs text-muted-foreground";
+/** Column body: card stack with gap, padded sides and bottom. */
+declare const kanbanColumnBodyClass = "flex flex-col gap-2 px-3 pb-3";
+/**
+ * "+N more" overflow button.
+ * Styled as a subtle full-width ghost button inside the column.
+ */
+declare const kanbanOverflowButtonClass: string;
+/**
+ * Default card surface.
+ *
+ * Variants:
+ * - `clickable: 'true'`  — adds hover treatment for interactive cards.
+ * - `clickable: 'false'` — static (default).
+ */
+declare const kanbanCardVariants: (props?: ({
+    clickable?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type KanbanBoardAPI, type KanbanColumnDef, cardsByColumn, createKanbanBoard, kanbanAccentBarClass, kanbanBoardVariants, kanbanCardVariants, kanbanColumnBodyClass, kanbanColumnCountClass, kanbanColumnHeaderClass, kanbanColumnTitleClass, kanbanColumnVariants, kanbanNoteBarClass, kanbanOverflowButtonClass, visibleAndOverflow };

package/dist/internal/mastery-bar/index.d.ts

@@ -0,0 +1,60 @@
+/** Visual size of a mastery bar. */
+type MasteryBarSize = 'sm' | 'md' | 'lg';
+interface MasteryBarProps {
+    /** Progress value (0–100). Values outside this range are clamped. */
+    value: number;
+    /** Label shown on the right side of the header row. */
+    label?: string;
+    /** Label shown on the left side of the header row. */
+    leadingLabel?: string;
+    /** Visual size of the track. */
+    size?: MasteryBarSize;
+    /** Renders the fill at reduced opacity to indicate a muted/secondary state. */
+    muted?: boolean;
+}
+interface MasteryBarAPI {
+    /** ARIA attributes to spread on the progressbar element. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Clamp a raw numeric value to the [0, 100] range.
+ *
+ * Values below 0 become 0; values above 100 become 100; NaN is treated as 0.
+ */
+declare function clampPercent(value: number): number;
+/**
+ * Build the framework-agnostic progressbar props for a mastery bar.
+ *
+ * Returns `role="progressbar"` ARIA attributes plus data attributes; adapters
+ * spread these onto their track element.
+ */
+declare function createMasteryBar({ value }: Pick<MasteryBarProps, 'value'>): MasteryBarAPI;
+
+/**
+ * Track (outer container): rounded, muted background.
+ * `size` variant controls the track height.
+ */
+declare const masteryBarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Fill (inner bar): rounded, primary background.
+ * `muted` variant renders at reduced opacity for secondary/inactive states.
+ */
+declare const masteryBarFillVariants: (props?: ({
+    muted?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Class applied to each text label (leading or trailing). */
+declare const masteryBarLabelClass = "text-xs text-muted-foreground";
+/** Class for the leading (left-side) label. */
+declare const masteryBarLeadingLabelClass = "text-xs text-muted-foreground";
+/** Header row above the track: leading label on the left, label on the right. */
+declare const masteryBarHeaderClass = "flex justify-between items-baseline mb-1";
+
+export { type MasteryBarAPI, type MasteryBarProps, type MasteryBarSize, clampPercent, createMasteryBar, masteryBarFillVariants, masteryBarHeaderClass, masteryBarLabelClass, masteryBarLeadingLabelClass, masteryBarVariants };

package/dist/internal/numbered-steps/index.d.ts

@@ -0,0 +1,71 @@
+/** A single step item in the numbered steps grid. */
+type NumberedStepItem = {
+    /** Step title displayed prominently below the ordinal badge. */
+    title: string;
+    /** Step body copy displayed below the title. */
+    body: string;
+};
+interface NumberedStepsProps {
+    /** The step items to display. */
+    items: NumberedStepItem[];
+    /**
+     * Number of grid columns. When omitted, defaults to clamping the item count
+     * to the 2–5 range via {@link stepColumns}.
+     */
+    columns?: number;
+}
+interface NumberedStepsAPI {
+    /** ARIA attributes to spread on the container element (`role="list"`). */
+    ariaProps: {
+        role: 'list';
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Zero-pad a 1-indexed ordinal to at least two digits.
+ *
+ * @example
+ * padOrdinal(1)  // '01'
+ * padOrdinal(10) // '10'
+ */
+declare function padOrdinal(n: number): string;
+/**
+ * Derive the number of grid columns from the item count.
+ * Clamps the count to the 2–5 range.
+ *
+ * @example
+ * stepColumns(3) // 3
+ * stepColumns(1) // 2
+ * stepColumns(6) // 5
+ */
+declare function stepColumns(count: number): number;
+/**
+ * Build the framework-agnostic container props for a numbered-steps grid.
+ *
+ * Returns `role="list"` plus data attributes; adapters spread these onto their
+ * container and render each step as a `role="listitem"`.
+ */
+declare function createNumberedSteps(): NumberedStepsAPI;
+
+/**
+ * Container grid for the numbered steps. The `columns` variant maps to a
+ * fixed Tailwind grid-cols class; adapters that need a dynamic column count
+ * use `gridTemplateColumns` inline style via {@link stepColumns} instead and
+ * omit this variant.
+ */
+declare const numberedStepsVariants: (props?: ({
+    columns?: "2" | "3" | "4" | "5" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Individual step card. */
+declare const numberedStepsItemClass = "rounded-xl border border-border bg-card p-5";
+/** Zero-padded ordinal badge above each step title. */
+declare const numberedStepsOrdinalClass = "font-mono text-sm text-primary";
+/** Step title. */
+declare const numberedStepsTitleClass = "mt-2 text-sm font-bold text-foreground";
+/** Step body copy. */
+declare const numberedStepsBodyClass = "mt-1 text-xs text-muted-foreground leading-relaxed";
+
+export { type NumberedStepItem, type NumberedStepsAPI, type NumberedStepsProps, createNumberedSteps, numberedStepsBodyClass, numberedStepsItemClass, numberedStepsOrdinalClass, numberedStepsTitleClass, numberedStepsVariants, padOrdinal, stepColumns };

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

@@ -0,0 +1,61 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+/** CTA button/link visual variant. */
+type PricingCtaVariant = 'default' | 'outline';
+interface PricingCardOptions {
+    /** Whether this card is highlighted as the featured / recommended plan. */
+    featured?: boolean;
+}
+interface PricingCardAPI {
+    /** ARIA props to spread on the card container. */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for styling hooks and CSS selectors. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic props for a pricing plan card.
+ *
+ * Returns `role="group"` (semantically groups the plan's content without
+ * imposing listitem semantics on a standalone card) and a `data-featured`
+ * attribute that adapters can use for conditional ring/highlight styling.
+ */
+declare function createPricingCard(options?: PricingCardOptions): PricingCardAPI;
+
+/**
+ * Root pricing card container. The `featured` variant adds a primary-coloured
+ * ring to draw the eye to the recommended plan.
+ */
+declare const pricingCardVariants: (props?: ({
+    featured?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** "Best value" / "Most popular" badge above the plan name. */
+declare const pricingCardBadgeClass = "mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary";
+/** Plan name (e.g. "Pro", "Starter"). */
+declare const pricingCardNameClass = "text-lg font-bold text-foreground";
+/** Main price figure (e.g. "$29", "Free"). */
+declare const pricingCardPriceClass = "text-3xl font-bold text-foreground";
+/** Billing period or qualifier (e.g. "/ month", "forever"). */
+declare const pricingCardPeriodClass = "text-sm text-muted-foreground";
+/** Short marketing description beneath the price. */
+declare const pricingCardDescriptionClass = "text-sm text-muted-foreground";
+/** Unordered list of included features. */
+declare const pricingCardFeatureListClass = "flex flex-col gap-2";
+/** A single feature row — tick icon + text. */
+declare const pricingCardFeatureRowClass = "flex items-start gap-2 text-sm text-foreground";
+/** Inline check SVG rendered before each feature string. */
+declare const pricingCardFeatureTickClass = "mt-0.5 size-4 shrink-0 text-primary";
+/**
+ * CTA button/link that appears at the bottom of the card.
+ *
+ * `default` — filled primary style (call to action on featured plans).
+ * `outline` — bordered secondary style (for non-featured plans).
+ */
+declare const pricingCtaVariants: (props?: ({
+    variant?: "default" | "outline" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type PricingCardAPI, type PricingCardOptions, type PricingCtaVariant, createPricingCard, pricingCardBadgeClass, pricingCardDescriptionClass, pricingCardFeatureListClass, pricingCardFeatureRowClass, pricingCardFeatureTickClass, pricingCardNameClass, pricingCardPeriodClass, pricingCardPriceClass, pricingCardVariants, pricingCtaVariants };

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface AudienceFeatureCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Kicker text displayed above the title (e.g. "For teams"). */
+    kicker?: React.ReactNode;
+    /** Main title — required. */
+    title: React.ReactNode;
+    /** Body copy. */
+    body: React.ReactNode;
+    /** Footer slot — pushed to bottom of the card. */
+    footer?: React.ReactNode;
+}
+/**
+ * AudienceFeatureCard — a marketing feature/audience card.
+ *
+ * Full-height flex-col layout so footers align across a row of cards.
+ * Accepts kicker, title, body, and an optional footer slot.
+ * Spreads `role="group"` from the headless core for accessibility.
+ */
+declare const AudienceFeatureCard: React.ForwardRefExoticComponent<AudienceFeatureCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { AudienceFeatureCard, type AudienceFeatureCardProps };

package/dist/internal/react-brand-network-cell/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface BrandNetworkCellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Single character or short string used as the brand monogram. */
+    glyph: string;
+    /** CSS colour value for the glyph box background (brand tint). Applied via inline style. */
+    glyphBg?: string;
+    /** CSS colour value for the glyph text (brand tint). Applied via inline style. */
+    glyphColor?: string;
+    /** Primary identifier shown below the glyph (product domain or name). */
+    domain: string;
+    /** Supporting description text. */
+    body: string;
+    /** When provided, renders a link at the bottom of the card. */
+    href?: string;
+    /** Label for the link. Defaults to "Visit →". */
+    linkLabel?: string;
+    /** Marks this cell as the current/active product in the network. */
+    current?: boolean;
+}
+/**
+ * BrandNetworkCell — a card for surfacing related products in a brand network.
+ *
+ * Renders a glyph monogram (brand tint via inline style), the product domain,
+ * a "You are here" badge when `current`, body copy, and an optional visit link.
+ * The `current` variant adds `ring-1 ring-primary` to the card border.
+ */
+declare const BrandNetworkCell: React.ForwardRefExoticComponent<BrandNetworkCellProps & React.RefAttributes<HTMLDivElement>>;
+
+export { BrandNetworkCell, type BrandNetworkCellProps };

package/dist/internal/react-browser-chrome-mock/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { BrowserChromeStatus } from '../browser-chrome-mock/index.js';
+export { BrowserChromeStatus } from '../browser-chrome-mock/index.js';
+
+interface BrowserChromeMockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** URL to display in the address bar. Bold domain + normal path. */
+    url: string;
+    /** Optional status badge shown in the chrome bar. */
+    status?: BrowserChromeStatus;
+}
+/**
+ * BrowserChromeMock — a decorative browser window frame.
+ *
+ * Renders a mock browser chrome with traffic-light dots, a monospace URL bar
+ * (bold domain + normal path), an optional live/rec status badge, and a
+ * content area for arbitrary children. Logic and styles come from the headless
+ * `@refraction-ui/browser-chrome-mock` core.
+ */
+declare const BrowserChromeMock: React.ForwardRefExoticComponent<BrowserChromeMockProps & React.RefAttributes<HTMLDivElement>>;
+
+export { BrowserChromeMock, type BrowserChromeMockProps };

package/dist/internal/react-kanban-board/index.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { KanbanColumnDef } from '../kanban-board/index.js';
+export { KanbanColumnDef } from '../kanban-board/index.js';
+
+interface KanbanCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Optional accent color for a top border treatment (CSS color value). */
+    accent?: string;
+    /** Whether the card should show hover/click affordance. */
+    clickable?: boolean;
+}
+/**
+ * KanbanCard — the card surface inside a column.
+ *
+ * Renders a bordered `bg-card` block. Pass `clickable` for hover treatment and
+ * an `onClick` handler for interaction. Children define the card content.
+ */
+declare const KanbanCard: React.ForwardRefExoticComponent<KanbanCardProps & React.RefAttributes<HTMLDivElement>>;
+interface KanbanColumnProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Column definition (id, title, accent, note). */
+    def: KanbanColumnDef;
+    /** Card count shown in the header badge. If omitted, derived from children. */
+    count?: number;
+}
+/**
+ * KanbanColumn — a single stage column with a header and optional note bar.
+ *
+ * Place `<KanbanCard>` elements as children. The count badge is derived from
+ * `React.Children.count(children)` when `count` is not provided.
+ */
+declare const KanbanColumn: React.ForwardRefExoticComponent<KanbanColumnProps & React.RefAttributes<HTMLDivElement>>;
+interface KanbanBoardProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'onSelect' | 'results'> {
+    /** Column definitions (order determines left-to-right render order). */
+    columns: KanbanColumnDef[];
+    /** All cards to distribute into columns. */
+    cards: T[];
+    /** Selector returning the column id for a card. */
+    getCardColumnId: (card: T) => string;
+    /** Selector returning a unique React key for a card. */
+    getCardKey: (card: T) => string;
+    /** Render a single card inside a column. */
+    renderCard: (card: T, columnDef: KanbanColumnDef) => React.ReactNode;
+    /** Max visible cards per column before showing "+N more". Defaults to 5. */
+    cardCap?: number;
+    /** Called when the user clicks a card (passed through to renderCard context). */
+    onCardClick?: (card: T) => void;
+    /** Override the column header render. Receives the def and card count. */
+    columnHeader?: (def: KanbanColumnDef, count: number) => React.ReactNode;
+    /** Called when the user taps "+N more" for a column. */
+    onShowMore?: (columnId: string) => void;
+}
+/**
+ * KanbanBoard — a generic multi-column stage board.
+ *
+ * Distributes `cards` into columns defined by `columns` using `getCardColumnId`.
+ * Each column caps at `cardCap` (default 5) visible cards and shows a
+ * "+N more" button for the overflow.
+ *
+ * @example
+ * ```tsx
+ * <KanbanBoard
+ *   columns={stages}
+ *   cards={candidates}
+ *   getCardColumnId={(c) => c.stageId}
+ *   getCardKey={(c) => c.id}
+ *   renderCard={(c) => <KanbanCard clickable>{c.name}</KanbanCard>}
+ * />
+ * ```
+ */
+declare function KanbanBoard<T>({ columns, cards, getCardColumnId, getCardKey, renderCard, cardCap, onCardClick: _onCardClick, columnHeader, onShowMore, className, ...props }: KanbanBoardProps<T>): React.ReactElement;
+
+export { KanbanBoard, type KanbanBoardProps, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps };

package/dist/internal/react-marquee-strip/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface MarqueeStripProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Eyebrow label shown before the items. */
+    label?: string;
+    /** List of text items to display. */
+    items: string[];
+    /**
+     * When `true` the items scroll continuously using a CSS `marquee` keyframe.
+     * The keyframe must be defined in the consuming app's global CSS:
+     *
+     * ```css
+     * @keyframes marquee {
+     *   from { transform: translateX(0); }
+     *   to   { transform: translateX(-50%); }
+     * }
+     * ```
+     *
+     * @default false
+     */
+    scroll?: boolean;
+}
+/**
+ * MarqueeStrip — a full-width label + tag strip, optionally scrolling.
+ *
+ * Static mode (`scroll={false}`, default): items flex-wrap in a row after the
+ * label. Scroll mode: items loop continuously via a CSS marquee animation;
+ * items are duplicated once internally for a seamless loop. Logic and
+ * data attributes come from the headless `@refraction-ui/marquee-strip` core.
+ */
+declare const MarqueeStrip: React.ForwardRefExoticComponent<MarqueeStripProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MarqueeStrip, type MarqueeStripProps };

package/dist/internal/react-mastery-bar/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MasteryBarSize } from '../mastery-bar/index.js';
+export { MasteryBarSize } from '../mastery-bar/index.js';
+
+interface MasteryBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'results'> {
+    /** Progress value (0–100). Values outside this range are clamped. */
+    value: number;
+    /** Label shown on the right side of the header row. */
+    label?: string;
+    /** Label shown on the left side of the header row. */
+    leadingLabel?: string;
+    /** Visual size of the track. */
+    size?: MasteryBarSize;
+    /** Renders the fill at reduced opacity to indicate a muted/secondary state. */
+    muted?: boolean;
+}
+/**
+ * MasteryBar — a labelled linear progress bar for skill/concept mastery.
+ *
+ * Renders `role="progressbar"` with aria-valuenow/min/max. Optionally renders
+ * a header row with a leading label (left) and a trailing label (right). Logic
+ * and styles come from the headless `@refraction-ui/mastery-bar` core.
+ */
+declare const MasteryBar: React.ForwardRefExoticComponent<MasteryBarProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MasteryBar, type MasteryBarProps };

package/dist/internal/react-numbered-steps/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { NumberedStepItem } from '../numbered-steps/index.js';
+export { NumberedStepItem } from '../numbered-steps/index.js';
+
+interface NumberedStepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** The step items to display (3–5 recommended). */
+    items: NumberedStepItem[];
+    /**
+     * Override the number of grid columns. Defaults to clamping item count to
+     * 2–5 via `stepColumns`.
+     */
+    columns?: number;
+}
+/**
+ * NumberedSteps — a static how-it-works step grid.
+ *
+ * Renders a CSS grid of step cards, each with a zero-padded ordinal badge
+ * (01, 02…), a title, and body copy. Not a stateful stepper — use the `Steps`
+ * component for that. Exposes `role="list"` semantics with each card as
+ * `role="listitem"`.
+ */
+declare const NumberedSteps: React.ForwardRefExoticComponent<NumberedStepsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { NumberedSteps, type NumberedStepsProps };

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { PricingCtaVariant } from '../pricing-card/index.js';
+export { PricingCtaVariant } from '../pricing-card/index.js';
+
+interface PricingCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Optional badge label shown above the plan name (e.g. "Most popular"). */
+    badge?: string;
+    /** Plan name (e.g. "Pro", "Starter"). */
+    name: string;
+    /** Price string (e.g. "$29", "Free"). */
+    price: string;
+    /** Billing period or qualifier (e.g. "/ month"). */
+    period?: string;
+    /** Short marketing description. */
+    description?: string;
+    /** List of included features to render as a checklist. */
+    features: string[];
+    /** CTA button/link label. */
+    cta: string;
+    /** Visual variant for the CTA. */
+    ctaVariant?: PricingCtaVariant;
+    /** When provided, the CTA renders as an `<a>` tag. */
+    ctaHref?: string;
+    /** Click handler for the CTA button (ignored when `ctaHref` is provided). */
+    onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Highlights the card with a primary ring. */
+    featured?: boolean;
+}
+/**
+ * PricingCard — a self-contained pricing plan card.
+ *
+ * Renders an optional badge, the plan name, price + optional period, optional
+ * description, a feature checklist, and a full-width CTA (anchor when
+ * `ctaHref` is set, button otherwise). The `featured` prop adds a primary-
+ * colour ring to highlight the recommended plan. Logic and styles come from
+ * the headless `@refraction-ui/pricing-card` core.
+ */
+declare const PricingCard: React.ForwardRefExoticComponent<PricingCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { PricingCard, type PricingCardProps };

package/dist/internal/react-section-head/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { SectionHeadAlign } from '../section-head/index.js';
+export { SectionHeadAlign } from '../section-head/index.js';
+
+interface SectionHeadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional eyebrow / kicker rendered above the title. */
+    kicker?: React.ReactNode;
+    /** Primary heading content (required). */
+    title: React.ReactNode;
+    /** Optional lede paragraph rendered below the title. */
+    lede?: React.ReactNode;
+    /** Horizontal alignment of the cluster. */
+    align?: SectionHeadAlign;
+    /** Override the heading element rendered for the title. Defaults to `h2`. */
+    as?: 'h1' | 'h2' | 'h3';
+}
+/**
+ * SectionHead — marketing section heading cluster.
+ *
+ * Renders an optional small-caps kicker above an `<h2>` title (configurable
+ * via `as`) with an optional lede paragraph below. Alignment is controlled via
+ * the `align` prop; layout classes come from the headless
+ * `@refraction-ui/section-head` core.
+ */
+declare const SectionHead: React.ForwardRefExoticComponent<SectionHeadProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SectionHead, type SectionHeadProps };