@refraction-ui/react 0.13.0 → 0.15.0

package/dist/internal/graph-view/index.d.ts

@@ -0,0 +1,107 @@
+/** Visual mastery state of a node in the knowledge graph. */
+type GraphNodeState = 'mastered' | 'in-progress' | 'not-started' | 'highlight';
+/** A concept node in the knowledge / dependency graph. */
+interface GraphNode {
+    /** Unique identifier. */
+    id: string;
+    /** X position in the graph canvas (pixels). */
+    x: number;
+    /** Y position in the graph canvas (pixels). */
+    y: number;
+    /** Human-readable label shown in the node chip. */
+    label: string;
+    /** Visual mastery state. Defaults to `'not-started'`. */
+    state?: GraphNodeState;
+}
+/** A directed edge connecting two nodes. */
+interface GraphEdge {
+    /** Unique identifier. */
+    id: string;
+    /** ID of the source node. */
+    source: string;
+    /** ID of the target node. */
+    target: string;
+}
+/** Axis-aligned bounding box of a set of nodes. */
+interface GraphBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+}
+/** Per-state counts returned by {@link summarizeStates}. */
+type GraphStateSummary = Record<GraphNodeState, number>;
+interface GraphViewAPI {
+    /** ARIA/role attributes to spread on the graph container. */
+    ariaProps: {
+        role: string;
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build framework-agnostic container props for a GraphView.
+ *
+ * The graph is a read-only knowledge / dependency visualisation. It uses
+ * `role="group"` (not `role="img"`) so that interactive node chips inside it
+ * remain in the accessibility tree and keyboard reachable.
+ */
+declare function createGraphView(): GraphViewAPI;
+/**
+ * Look up a node by id. Returns `undefined` when not found.
+ */
+declare function nodeById(nodes: GraphNode[], id: string): GraphNode | undefined;
+/**
+ * Build an SVG cubic-bezier path `d` string between two node positions.
+ *
+ * The control points bend the curve vertically so edges arc gracefully between
+ * horizontally or vertically offset nodes. Works for any pair of positions.
+ */
+declare function graphEdgePath(source: GraphNode, target: GraphNode): string;
+/**
+ * Compute the axis-aligned bounding box of a set of nodes.
+ *
+ * Returns zero-area bounds centred at the origin when the array is empty.
+ */
+declare function graphBounds(nodes: GraphNode[]): GraphBounds;
+/**
+ * Count nodes per mastery state.
+ *
+ * Nodes without an explicit `state` are counted as `'not-started'`.
+ */
+declare function summarizeStates(nodes: GraphNode[]): GraphStateSummary;
+
+/** Outer wrapper for the graph canvas area. */
+declare const graphViewVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Node chip: a positioned, clickable concept node colored by mastery state.
+ *
+ * `state` variant drives the visual treatment:
+ * - mastered      → filled primary (bg-primary / text-primary-foreground)
+ * - in-progress   → accent ring (ring-2 ring-ring bg-accent text-accent-foreground)
+ * - not-started   → muted (bg-muted text-muted-foreground)
+ * - highlight     → border-primary accent outline (border-primary bg-background text-foreground)
+ */
+declare const graphNodeVariants: (props?: ({
+    state?: "mastered" | "in-progress" | "not-started" | "highlight" | undefined;
+    interactive?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Label text rendered inside each node chip (already embedded in the chip). */
+declare const graphNodeLabelClass = "pointer-events-none whitespace-nowrap";
+/** SVG edge line/path classes. */
+declare const graphEdgeClass = "fill-none stroke-border stroke-[1.5] opacity-60";
+/** Legend chip: a small colored indicator + label for a single mastery state. */
+declare const graphLegendChipVariants: (props?: ({
+    state?: "mastered" | "in-progress" | "not-started" | "highlight" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type GraphBounds, type GraphEdge, type GraphNode, type GraphNodeState, type GraphStateSummary, type GraphViewAPI, createGraphView, graphBounds, graphEdgeClass, graphEdgePath, graphLegendChipVariants, graphNodeLabelClass, graphNodeVariants, graphViewVariants, nodeById, summarizeStates };

package/dist/internal/infinite-canvas/index.d.ts

@@ -0,0 +1,74 @@
+/** Transform state for an infinite canvas viewport. */
+type CanvasTransform = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+/** Axis-aligned bounding box of canvas content. */
+interface Bounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/**
+ * Clamp a zoom level to [min, max].
+ *
+ * Defaults match common design-tool conventions: 25 % (0.25) to 400 % (4).
+ */
+declare function clampZoom(zoom: number, min?: number, max?: number): number;
+/**
+ * Compute the transform that centers `bounds` inside a viewport of size
+ * `viewportW × viewportH` with optional uniform `padding` (default 32 px).
+ *
+ * Returns a `CanvasTransform` clamped to [0.25, 4].
+ */
+declare function fitTransform(bounds: Bounds, viewportW: number, viewportH: number, padding?: number): CanvasTransform;
+/**
+ * Convert a `CanvasTransform` to a CSS `transform` string suitable for the
+ * content layer (`transformOrigin: '0 0'`).
+ */
+declare function transformToCss(t: CanvasTransform): string;
+interface CreateInfiniteCanvasOptions {
+    zoom?: number;
+}
+interface InfiniteCanvasAPI {
+    /** ARIA attributes to spread on the viewport element. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string | number | boolean>;
+}
+/**
+ * Build the framework-agnostic props for an infinite canvas viewport.
+ *
+ * Returns `role="group"` plus data attributes; adapters spread these onto
+ * their container element.
+ */
+declare function createInfiniteCanvas(options?: CreateInfiniteCanvasOptions): InfiniteCanvasAPI;
+
+/**
+ * The outer viewport container. `overflow-hidden` clips panned content;
+ * `relative` anchors the absolute controls overlay.
+ *
+ * The `grid` variant adds a subtle dot-grid background rendered with a radial
+ * gradient using the `--border` semantic token so it respects the active theme.
+ */
+declare const infiniteCanvasVariants: (props?: ({
+    grid?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * The transformed content layer that wraps children.
+ * `transform-gpu` promotes the layer for smooth panning/zooming.
+ * `origin-top-left` matches `transformOrigin: '0 0'` in the React adapter.
+ */
+declare const canvasContentClass = "absolute inset-0 origin-top-left will-change-transform";
+/** Zoom-controls cluster — pinned to the bottom-right of the viewport. */
+declare const canvasControlsClass = "absolute bottom-4 right-4 z-10 flex items-center gap-1";
+/** Individual zoom button (+ / − / fit). */
+declare const canvasZoomButtonVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type Bounds, type CanvasTransform, type CreateInfiniteCanvasOptions, type InfiniteCanvasAPI, canvasContentClass, canvasControlsClass, canvasZoomButtonVariants, clampZoom, createInfiniteCanvas, fitTransform, infiniteCanvasVariants, transformToCss };

package/dist/internal/live-captions/index.d.ts

@@ -0,0 +1,59 @@
+/** A single caption cue — may be interim (non-final) while speech is in flight. */
+interface CaptionCue {
+    /** Unique identifier for this cue. */
+    id: string;
+    /** Speaker name, shown as a prefix when present. */
+    speaker?: string;
+    /** The caption text. */
+    text: string;
+    /** Whether this cue is finalised (true) or still being transcribed (false/absent). */
+    final?: boolean;
+}
+/**
+ * Return the last `maxLines` cues to display in the caption overlay.
+ * Preserves ordering (oldest first within the slice) so the overlay reads top-to-bottom.
+ */
+declare function visibleCues(cues: CaptionCue[], maxLines?: number): CaptionCue[];
+/**
+ * Format a single cue for display.
+ * When `speaker` is present the result is `'Maya: the bottleneck is review capacity'`.
+ * Without a speaker it is just the text.
+ */
+declare function formatCue(cue: CaptionCue): string;
+interface LiveCaptionsAPI {
+    /** ARIA attributes to spread on the caption container element. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic accessibility props for a live-caption overlay.
+ *
+ * Returns `role="log"` with `aria-live="polite"` and `aria-atomic=false` so
+ * screen readers announce individual cues as they arrive without re-reading the
+ * whole log. Adapters spread these onto the container element.
+ */
+declare function createLiveCaptions(): LiveCaptionsAPI;
+
+/**
+ * Caption overlay container — an absolute-friendly, translucent dark surface
+ * centred over its positioned ancestor (e.g. a video element).
+ */
+declare const liveCaptionsVariants: (props?: ({
+    position?: "static" | "absolute" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single cue line inside the overlay.
+ * Non-final (interim) cues get a dimmed italic treatment to signal they may change.
+ */
+declare const liveCaptionsCueVariants: (props?: ({
+    interim?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Speaker-name prefix — rendered slightly muted to distinguish it from the speech text. */
+declare const liveCaptionsSpeakerClass = "font-medium text-muted-foreground";
+
+export { type CaptionCue, type LiveCaptionsAPI, createLiveCaptions, formatCue, liveCaptionsCueVariants, liveCaptionsSpeakerClass, liveCaptionsVariants, visibleCues };

package/dist/internal/live-cursors/index.d.ts

@@ -0,0 +1,65 @@
+/** Data for a single collaborator cursor. */
+type CursorData = {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    color?: string;
+};
+/**
+ * A fixed palette of 8 hex colors for distinguishing collaborator cursors.
+ * Each color is vivid enough to be visible against both light and dark surfaces.
+ */
+declare const CURSOR_COLORS: string[];
+/**
+ * Assign a stable color to a cursor.
+ *
+ * When `index` is supplied the color is simply `CURSOR_COLORS[index % length]`
+ * (deterministic for ordered participant lists). Otherwise a lightweight
+ * djb2-style hash of the `id` string is used so the same id always maps to the
+ * same color across renders without using Math.random or Date.now.
+ */
+declare function assignCursorColor(id: string, index?: number): string;
+interface LiveCursorsAPI {
+    /** ARIA attributes to spread on the overlay container. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic props for the live-cursors overlay.
+ *
+ * Cursors are purely decorative real-time presence indicators — aria-hidden
+ * true keeps them out of the accessibility tree. The group role is present for
+ * semantic correctness should a developer choose to un-hide it.
+ */
+declare function createLiveCursors(): LiveCursorsAPI;
+
+/**
+ * Full-bleed overlay that contains all cursor elements.
+ * `pointer-events-none` and `overflow-hidden` ensure cursors are decorative
+ * and don't interfere with the underlying canvas interactions.
+ */
+declare const liveCursorsVariants: (props?: ({
+    hidden?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Wrapper for a single cursor (SVG + label). Absolutely positioned via inline
+ * `left`/`top` style; the transition provides smooth movement when coordinates
+ * update.
+ */
+declare const cursorWrapperClass = "absolute flex flex-col items-start transition-[left,top] duration-100 ease-linear";
+/**
+ * The SVG cursor arrow container. Fill is applied via inline style (per
+ * collaborator color) so no utility class is needed here.
+ */
+declare const cursorArrowClass = "h-5 w-5 drop-shadow-sm";
+/**
+ * Name-label chip that appears below the cursor arrow. Background is applied
+ * via inline style (per collaborator color); text is always white for contrast.
+ */
+declare const cursorLabelClass = "mt-0.5 ml-2 rounded px-1.5 py-0.5 text-xs font-medium text-white shadow-sm whitespace-nowrap";
+
+export { CURSOR_COLORS, type CursorData, type LiveCursorsAPI, assignCursorColor, createLiveCursors, cursorArrowClass, cursorLabelClass, cursorWrapperClass, liveCursorsVariants };

package/dist/internal/live-transcript/index.d.ts

@@ -0,0 +1,73 @@
+/** A single transcript entry from one speaker at a point in time. */
+interface TranscriptEntry {
+    /** Unique identifier for this entry. */
+    id: string;
+    /** Display name of the speaker. */
+    speaker: string;
+    /** The spoken text. */
+    text: string;
+    /** Optional formatted timestamp string (e.g. "0:42"). */
+    timestamp?: string;
+    /** Optional CSS color for the speaker's name (e.g. "#3b82f6"). */
+    speakerColor?: string;
+}
+/** A merged block of consecutive entries from the same speaker. */
+interface TranscriptBlock {
+    /** Speaker display name. */
+    speaker: string;
+    /** Timestamp of the first entry in the run (if present). */
+    timestamp?: string;
+    /** Optional CSS color for the speaker name. */
+    speakerColor?: string;
+    /** All text segments from the consecutive run, in order. */
+    texts: string[];
+}
+/**
+ * Merge consecutive `TranscriptEntry` items from the same speaker into
+ * `TranscriptBlock` objects. A new block is started whenever the speaker
+ * changes; the block uses the timestamp of the *first* entry in that run.
+ */
+declare function groupConsecutiveBySpeaker(entries: TranscriptEntry[]): TranscriptBlock[];
+interface LiveTranscriptAPI {
+    /**
+     * ARIA attributes to spread on the scroll container.
+     * Typed as a plain record so frameworks can spread without fighting their
+     * aria-* type narrowing.
+     */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic container props for a live transcript panel.
+ *
+ * Returns `role="log"` and `aria-live="polite"` so screen readers announce
+ * new transcript entries without interrupting the user.
+ */
+declare function createLiveTranscript(): LiveTranscriptAPI;
+
+/**
+ * Scroll container that wraps all speaker blocks.
+ * The `compact` variant tightens the gap between blocks.
+ */
+declare const liveTranscriptVariants: (props?: ({
+    compact?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** A single grouped speaker block (header + text lines). */
+declare const transcriptBlockVariants: (props?: ({
+    compact?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The row containing the speaker name and optional timestamp. */
+declare const transcriptSpeakerRowClass = "flex items-baseline gap-2";
+/** Speaker name badge / label. */
+declare const transcriptSpeakerNameClass = "text-sm font-semibold text-foreground leading-snug";
+/** Timestamp displayed beside the speaker name. */
+declare const transcriptTimestampClass = "text-xs text-muted-foreground tabular-nums";
+/** A single line of transcript text. */
+declare const transcriptTextLineClass = "text-sm text-foreground/80 leading-relaxed";
+
+export { type LiveTranscriptAPI, type TranscriptBlock, type TranscriptEntry, createLiveTranscript, groupConsecutiveBySpeaker, liveTranscriptVariants, transcriptBlockVariants, transcriptSpeakerNameClass, transcriptSpeakerRowClass, transcriptTextLineClass, transcriptTimestampClass };

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/mini-map/index.d.ts

@@ -0,0 +1,81 @@
+/** A rectangle in 2-D space. */
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** A single item to be represented as a dot on the minimap. */
+interface MiniMapItem {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+interface MiniMapAPI {
+    /** ARIA attributes to spread on the minimap container element. */
+    ariaProps: {
+        role: 'img';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Compute the bounding box that encloses all items (using their x/y + optional
+ * width/height). Returns a zero-size rect at the origin when `items` is empty.
+ */
+declare function contentBounds(items: MiniMapItem[]): Rect;
+/**
+ * Compute the uniform scale factor that fits `contentRect` into the minimap
+ * box (after subtracting `padding` on each side). Returns 1 when the content
+ * has zero area (nothing to scale).
+ */
+declare function miniScale(contentRect: Rect, miniW: number, miniH: number, padding?: number): number;
+/**
+ * Map a world-space point `{ x, y }` to minimap pixel coordinates.
+ *
+ * @param point       World coordinate
+ * @param contentRect Bounding box of all content (from `contentBounds`)
+ * @param scale       Scale factor (from `miniScale`)
+ * @param padding     Padding inset in px (must match the value passed to `miniScale`)
+ */
+declare function worldToMini(point: {
+    x: number;
+    y: number;
+}, contentRect: Rect, scale: number, padding?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Compute the position and size of the viewport indicator rectangle in
+ * minimap coordinates, ready to be applied as CSS `left/top/width/height`.
+ */
+declare function viewportRectInMini(viewport: Rect, contentRect: Rect, scale: number, padding?: number): Rect;
+/**
+ * Build the framework-agnostic ARIA props for the minimap container.
+ *
+ * Every adapter spreads `ariaProps` onto its outermost element; `dataAttributes`
+ * are available for CSS hooks.
+ */
+declare function createMiniMap(): MiniMapAPI;
+
+/**
+ * The outer minimap box: small, rounded, bordered, card background.
+ * The `interactive` variant switches to grab cursor for clickable minimaps.
+ */
+declare const miniMapVariants: (props?: ({
+    interactive?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** A single node dot in the minimap (represents one `MiniMapItem`). */
+declare const miniMapDotClass = "absolute rounded-sm bg-muted";
+/**
+ * The draggable viewport indicator rectangle.
+ * Uses a semi-transparent primary fill with a primary ring/border.
+ */
+declare const miniMapViewportClass = "absolute rounded-sm border border-primary ring-1 ring-primary bg-primary/10";
+
+export { type MiniMapAPI, type MiniMapItem, type Rect, contentBounds, createMiniMap, miniMapDotClass, miniMapVariants, miniMapViewportClass, miniScale, viewportRectInMini, worldToMini };

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