@refraction-ui/react 0.15.0 → 0.16.0

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/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-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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -107,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:*",
@@ -147,7 +148,9 @@
     "@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:*",