@refraction-ui/react 0.14.0 → 0.16.0

package/dist/internal/react-slot-picker/index.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SlotDay, SlotSelection } from '../slot-picker/index.js';
+export { SlotDay, SlotSelection } from '../slot-picker/index.js';
+
+interface SlotPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'results' | 'color' | 'content' | 'defaultValue' | 'onChange'> {
+    /** The list of days to show as chips. */
+    days: SlotDay[];
+    /** Map of dayId → available time slot strings. */
+    slotsByDay: Record<string, string[]>;
+    /** Controlled selection value. */
+    value?: SlotSelection;
+    /** Initial selection for uncontrolled usage. */
+    defaultValue?: SlotSelection;
+    /** Called when the user picks a day + slot. */
+    onChange?: (selection: SlotSelection) => void;
+    /** Label shown beside the "Pick a time" heading (e.g. "Eastern Time"). */
+    timezoneLabel?: string;
+    /** Slot strings that should be rendered as disabled. */
+    disabledSlots?: string[];
+}
+/**
+ * SlotPicker — a Calendly-style day + time-slot booking picker.
+ *
+ * Renders a row of day chips (radiogroup) and a grid of time-slot buttons
+ * (radiogroup) for the currently-selected day. Supports controlled (`value`)
+ * and uncontrolled (`defaultValue`) usage. Selecting a day clears the slot
+ * when the previously-chosen slot is not available on the new day.
+ */
+declare const SlotPicker: React.ForwardRefExoticComponent<SlotPickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SlotPicker, type SlotPickerProps };

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+/** Props injected into each rendered row via renderItem. */
+interface DragHandleProps {
+    /** Must be spread onto the grip element (button). */
+    'aria-label': string;
+    /** Role is already set inside the component; exposed for convenience. */
+    role: 'button';
+    tabIndex: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onDragStart: (event: React.DragEvent<HTMLButtonElement>) => void;
+}
+interface SortableListProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'results' | 'color' | 'content' | 'children'> {
+    /** The ordered list of items to render. */
+    items: T[];
+    /** Return a stable key for each item. */
+    getKey: (item: T, index: number) => string | number;
+    /**
+     * Render the content of a single row.
+     * Spread `dragHandleProps` onto your grip button so keyboard + DnD work.
+     */
+    renderItem: (item: T, meta: {
+        index: number;
+        dragHandleProps: DragHandleProps;
+    }) => React.ReactNode;
+    /** Called when the user reorders an item. Receives the new items array. */
+    onReorder?: (items: T[]) => void;
+    /** Disables all drag and keyboard reordering. */
+    disabled?: boolean;
+}
+declare const SortableList: <T>(props: SortableListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement | null;
+
+export { type DragHandleProps, SortableList, type SortableListProps };

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/slot-picker/index.d.ts

@@ -0,0 +1,77 @@
+/** A single day chip shown in the day-selector row. */
+type SlotDay = {
+    /** Unique identifier for the day (e.g. "2024-06-14"). */
+    id: string;
+    /** Short weekday label (e.g. "Fri"). */
+    weekday: string;
+    /** Day-of-month label (e.g. "14" or 14). */
+    dayNum: string | number;
+};
+/** The currently-selected day + time slot pair. */
+type SlotSelection = {
+    /** The `id` of the selected day. */
+    dayId: string;
+    /** The selected time slot string (e.g. "10:00 AM"). */
+    slot: string;
+};
+/**
+ * Return the list of available time slots for a given day.
+ * Returns an empty array when `dayId` has no entry in `slotsByDay`.
+ */
+declare function slotsForDay(slotsByDay: Record<string, string[]>, dayId: string): string[];
+/**
+ * Check whether a specific slot in a specific day is currently selected.
+ */
+declare function isSlotSelected(value: SlotSelection | undefined, dayId: string, slot: string): boolean;
+interface SlotPickerAPI {
+    /** ARIA attributes to spread on the root group element. */
+    ariaProps: {
+        role: 'group';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic root props for a slot picker.
+ *
+ * Returns `role="group"` with an accessible label and data attributes.
+ * Adapters spread these onto their container element.
+ */
+declare function createSlotPicker(): SlotPickerAPI;
+
+/** Root wrapper for the entire slot picker (day row + slots grid). */
+declare const slotPickerVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/** Scrollable row of day chips. */
+declare const slotPickerDayRowClass = "flex items-center gap-2 overflow-x-auto pb-1";
+/**
+ * Individual day chip.
+ *
+ * `selected` → primary treatment; `unselected` → card with border.
+ */
+declare const slotPickerDayVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Grid that holds the time-slot buttons. */
+declare const slotPickerGridClass = "grid grid-cols-3 gap-2 sm:grid-cols-4";
+/**
+ * Individual time-slot button.
+ *
+ * `selected` → primary; `disabled` → dimmed regardless of selection.
+ */
+declare const slotPickerSlotVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+    disabled?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Section label above the day row or slot grid (e.g. "Pick a day"). */
+declare const slotPickerSectionLabelClass = "text-sm font-semibold text-foreground";
+/** Timezone label rendered beside the "Pick a time" heading. */
+declare const slotPickerTimezoneClass = "text-xs text-muted-foreground ml-2";
+
+export { type SlotDay, type SlotPickerAPI, type SlotSelection, createSlotPicker, isSlotSelected, slotPickerDayRowClass, slotPickerDayVariants, slotPickerGridClass, slotPickerSectionLabelClass, slotPickerSlotVariants, slotPickerTimezoneClass, slotPickerVariants, slotsForDay };

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.16.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:*",
@@ -104,6 +107,7 @@
     "@refraction-ui/react-input": "workspace:*",
     "@refraction-ui/react-input-group": "workspace:*",
     "@refraction-ui/react-install-prompt": "workspace:*",
+    "@refraction-ui/react-kanban-board": "workspace:*",
     "@refraction-ui/react-keyboard-shortcut": "workspace:*",
     "@refraction-ui/react-language-selector": "workspace:*",
     "@refraction-ui/react-link-card": "workspace:*",
@@ -112,9 +116,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 +129,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 +138,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:*",
@@ -139,7 +148,10 @@
     "@refraction-ui/react-skip-to-content": "workspace:*",
     "@refraction-ui/react-slide-viewer": "workspace:*",
     "@refraction-ui/react-slider": "workspace:*",
+    "@refraction-ui/react-slot-picker": "workspace:*",
     "@refraction-ui/react-social-auth-button": "workspace:*",
+    "@refraction-ui/react-sortable-list": "workspace:*",
+    "@refraction-ui/react-stat-grid": "workspace:*",
     "@refraction-ui/react-status-indicator": "workspace:*",
     "@refraction-ui/react-steps": "workspace:*",
     "@refraction-ui/react-sticky-note": "workspace:*",