@refraction-ui/react 0.14.0 → 0.15.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/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-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 };

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export { StatItem, statColumns } from '../stat-grid/index.js';
+
+interface StatGridItem {
+    /** The primary value displayed prominently. Allows rich content in React. */
+    value: React.ReactNode;
+    /** The descriptive label shown below the value. */
+    label: React.ReactNode;
+}
+interface StatGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** The stat items to display in the grid. */
+    items: StatGridItem[];
+    /**
+     * Number of columns. Defaults to `statColumns(items.length)`:
+     * 1 item → 1, 2 items → 2, 3+ items → 3.
+     */
+    columns?: number;
+}
+/**
+ * StatGrid — a marketing-style grid of stat callouts.
+ *
+ * Each item shows a large bold value and a small muted label. The grid
+ * automatically computes the column count from the number of items, or you can
+ * override it with `columns`. Uses `role="list"` / `role="listitem"` for
+ * accessible enumeration.
+ */
+declare const StatGrid: React.ForwardRefExoticComponent<StatGridProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StatGrid, type StatGridItem, type StatGridProps };

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

@@ -0,0 +1,36 @@
+/** Horizontal alignment of the section head cluster. */
+type SectionHeadAlign = 'center' | 'left';
+interface SectionHeadProps {
+    /** Alignment of the kicker, title, and lede. */
+    align?: SectionHeadAlign;
+}
+interface SectionHeadAPI {
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic data attributes for a SectionHead.
+ *
+ * Returns data-align so adapters can apply styles via CSS or Tailwind
+ * variants. All visual logic (classes, cva) lives in `section-head.styles.ts`.
+ */
+declare function createSectionHead(props?: SectionHeadProps): SectionHeadAPI;
+
+/**
+ * Container variant that controls the alignment of the whole cluster.
+ * Center: auto-margins + text-center + constrained max-width for comfortable
+ * line length. Left: no margin constraint, flush left.
+ */
+declare const sectionHeadVariants: (props?: ({
+    align?: "center" | "left" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Small-caps eyebrow label above the title. */
+declare const sectionHeadKickerClass = "text-[11px] uppercase tracking-widest text-primary font-semibold";
+/** Primary h2 heading. */
+declare const sectionHeadTitleClass = "text-3xl sm:text-4xl font-bold tracking-tight text-foreground";
+/** Optional lede paragraph below the title. */
+declare const sectionHeadLedeClass = "mt-3 text-muted-foreground leading-relaxed";
+
+export { type SectionHeadAPI, type SectionHeadAlign, type SectionHeadProps, createSectionHead, sectionHeadKickerClass, sectionHeadLedeClass, sectionHeadTitleClass, sectionHeadVariants };

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

@@ -0,0 +1,45 @@
+/** A single stat callout displayed in the grid. */
+type StatItem = {
+    /** The primary value displayed prominently (e.g. "10k+", "$4.2M"). */
+    value: string;
+    /** The descriptive label shown below the value. */
+    label: string;
+};
+interface StatGridAPI {
+    /** ARIA attributes to spread on the grid container element (`role="list"`). */
+    ariaProps: {
+        role: 'list';
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Compute the number of grid columns for a stat grid.
+ *
+ * - 1 item  → 1 column
+ * - 2 items → 2 columns
+ * - 3 or more items → capped at `max` (default 3)
+ */
+declare function statColumns(count: number, max?: number): number;
+/**
+ * Build the framework-agnostic container props for a stat grid.
+ *
+ * Returns `role="list"` and data attributes; adapters spread these onto their
+ * container element and render the items themselves.
+ */
+declare function createStatGrid(): StatGridAPI;
+
+/** Grid container that lays out stat items. */
+declare const statGridVariants: (props?: ({
+    columns?: "1" | "2" | "3" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Individual stat item container (role="listitem"). */
+declare const statItemClass = "flex flex-col";
+/** The large bold value of the stat. */
+declare const statValueClass = "text-xl sm:text-2xl font-bold text-primary";
+/** The descriptive label below the value. */
+declare const statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
+
+export { type StatGridAPI, type StatItem, createStatGrid, statColumns, statGridVariants, statItemClass, statLabelClass, statValueClass };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,13 +54,16 @@
     "@refraction-ui/react-analytics": "workspace:*",
     "@refraction-ui/react-animated-text": "workspace:*",
     "@refraction-ui/react-app-shell": "workspace:*",
+    "@refraction-ui/react-audience-feature-card": "workspace:*",
     "@refraction-ui/react-audio-room": "workspace:*",
     "@refraction-ui/react-auth": "workspace:*",
     "@refraction-ui/react-avatar": "workspace:*",
     "@refraction-ui/react-avatar-group": "workspace:*",
     "@refraction-ui/react-badge": "workspace:*",
     "@refraction-ui/react-bottom-nav": "workspace:*",
+    "@refraction-ui/react-brand-network-cell": "workspace:*",
     "@refraction-ui/react-breadcrumbs": "workspace:*",
+    "@refraction-ui/react-browser-chrome-mock": "workspace:*",
     "@refraction-ui/react-button": "workspace:*",
     "@refraction-ui/react-calendar": "workspace:*",
     "@refraction-ui/react-call-controls": "workspace:*",
@@ -112,9 +115,12 @@
     "@refraction-ui/react-live-transcript": "workspace:*",
     "@refraction-ui/react-logger": "workspace:*",
     "@refraction-ui/react-markdown-renderer": "workspace:*",
+    "@refraction-ui/react-marquee-strip": "workspace:*",
+    "@refraction-ui/react-mastery-bar": "workspace:*",
     "@refraction-ui/react-mini-map": "workspace:*",
     "@refraction-ui/react-mobile-nav": "workspace:*",
     "@refraction-ui/react-navbar": "workspace:*",
+    "@refraction-ui/react-numbered-steps": "workspace:*",
     "@refraction-ui/react-otp-input": "workspace:*",
     "@refraction-ui/react-pagination": "workspace:*",
     "@refraction-ui/react-password-input": "workspace:*",
@@ -122,6 +128,7 @@
     "@refraction-ui/react-popover": "workspace:*",
     "@refraction-ui/react-pre-call-lobby": "workspace:*",
     "@refraction-ui/react-presence-indicator": "workspace:*",
+    "@refraction-ui/react-pricing-card": "workspace:*",
     "@refraction-ui/react-progress-display": "workspace:*",
     "@refraction-ui/react-radial-gauge": "workspace:*",
     "@refraction-ui/react-radio": "workspace:*",
@@ -130,6 +137,7 @@
     "@refraction-ui/react-resizable-layout": "workspace:*",
     "@refraction-ui/react-rich-editor": "workspace:*",
     "@refraction-ui/react-search-bar": "workspace:*",
+    "@refraction-ui/react-section-head": "workspace:*",
     "@refraction-ui/react-segmented-control": "workspace:*",
     "@refraction-ui/react-select": "workspace:*",
     "@refraction-ui/react-separator": "workspace:*",
@@ -140,6 +148,7 @@
     "@refraction-ui/react-slide-viewer": "workspace:*",
     "@refraction-ui/react-slider": "workspace:*",
     "@refraction-ui/react-social-auth-button": "workspace:*",
+    "@refraction-ui/react-stat-grid": "workspace:*",
     "@refraction-ui/react-status-indicator": "workspace:*",
     "@refraction-ui/react-steps": "workspace:*",
     "@refraction-ui/react-sticky-note": "workspace:*",