@refraction-ui/react 0.4.2 → 0.6.0

package/dist/internal/breadcrumbs/index.d.ts

@@ -0,0 +1,38 @@
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbsProps {
+    /** Current pathname to auto-generate from */
+    pathname?: string;
+    /** Manual items (overrides pathname) */
+    items?: BreadcrumbItem[];
+    /** Custom label map for pathname segments */
+    labels?: Record<string, string>;
+    /** Separator character */
+    separator?: string;
+    /** Max items to show before truncating */
+    maxItems?: number;
+}
+interface BreadcrumbsAPI {
+    items: BreadcrumbItem[];
+    ariaProps: Record<string, string>;
+    separator: string;
+    isLast: (index: number) => boolean;
+    itemAriaProps: (index: number) => Record<string, string>;
+}
+declare function createBreadcrumbs(props?: BreadcrumbsProps): BreadcrumbsAPI;
+
+declare const breadcrumbsVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const breadcrumbItemVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const breadcrumbSeparatorStyles = "text-muted-foreground/50 select-none";
+
+export { type BreadcrumbItem, type BreadcrumbsAPI, type BreadcrumbsProps, breadcrumbItemVariants, breadcrumbSeparatorStyles, breadcrumbsVariants, createBreadcrumbs };

package/dist/internal/button/index.d.cts

@@ -0,0 +1,34 @@
+import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared/index.cjs';
+
+type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon';
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    asChild?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+interface ButtonAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Keyboard handlers to attach */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Whether interaction should be blocked */
+    isInteractive: boolean;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createButton(props?: ButtonProps): ButtonAPI;
+declare function getButtonType(props: ButtonProps): string;
+
+declare const buttonTokens: TokenContract;
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ButtonAPI, type ButtonProps, type ButtonSize, type ButtonVariant, buttonTokens, buttonVariants, createButton, getButtonType };

package/dist/internal/button/index.d.ts

@@ -0,0 +1,34 @@
+import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared/index.js';
+
+type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon';
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    asChild?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+interface ButtonAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Keyboard handlers to attach */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Whether interaction should be blocked */
+    isInteractive: boolean;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createButton(props?: ButtonProps): ButtonAPI;
+declare function getButtonType(props: ButtonProps): string;
+
+declare const buttonTokens: TokenContract;
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ButtonAPI, type ButtonProps, type ButtonSize, type ButtonVariant, buttonTokens, buttonVariants, createButton, getButtonType };

package/dist/internal/calendar/index.d.cts

@@ -0,0 +1,73 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+interface CalendarProps {
+    /** Selected date (controlled) */
+    value?: Date;
+    /** Default selected date (uncontrolled) */
+    defaultValue?: Date;
+    /** Callback when a date is selected */
+    onSelect?: (date: Date) => void;
+    /** Displayed month (controlled) */
+    month?: Date;
+    /** Callback when the displayed month changes */
+    onMonthChange?: (month: Date) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Specific dates to disable */
+    disabledDates?: Date[];
+}
+interface CalendarDay {
+    /** The date this cell represents */
+    date: Date;
+    /** Whether the date is today */
+    isToday: boolean;
+    /** Whether the date is currently selected */
+    isSelected: boolean;
+    /** Whether the date belongs to the currently displayed month */
+    isCurrentMonth: boolean;
+    /** Whether the date is disabled */
+    isDisabled: boolean;
+}
+interface CalendarState {
+    /** The currently displayed month */
+    currentMonth: Date;
+    /** The currently selected date, if any */
+    selectedDate: Date | undefined;
+}
+interface CalendarAPI {
+    /** Current calendar state */
+    state: CalendarState;
+    /** Array of day objects for the current month grid (always 42: 6 weeks x 7 days) */
+    days: CalendarDay[];
+    /** Navigate to the previous month */
+    prevMonth(): void;
+    /** Navigate to the next month */
+    nextMonth(): void;
+    /** Select a date */
+    select(date: Date): void;
+    /** ARIA attributes for the calendar grid */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get ARIA attributes for a specific day cell */
+    getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        grid: string;
+        label: string;
+    };
+}
+declare function createCalendar(props?: CalendarProps): CalendarAPI;
+
+declare const calendarVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const dayVariants: (props?: ({
+    state?: "default" | "selected" | "today" | "disabled" | "outside" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CalendarAPI, type CalendarDay, type CalendarProps, type CalendarState, calendarVariants, createCalendar, dayVariants };

package/dist/internal/calendar/index.d.ts

@@ -0,0 +1,73 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+interface CalendarProps {
+    /** Selected date (controlled) */
+    value?: Date;
+    /** Default selected date (uncontrolled) */
+    defaultValue?: Date;
+    /** Callback when a date is selected */
+    onSelect?: (date: Date) => void;
+    /** Displayed month (controlled) */
+    month?: Date;
+    /** Callback when the displayed month changes */
+    onMonthChange?: (month: Date) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Specific dates to disable */
+    disabledDates?: Date[];
+}
+interface CalendarDay {
+    /** The date this cell represents */
+    date: Date;
+    /** Whether the date is today */
+    isToday: boolean;
+    /** Whether the date is currently selected */
+    isSelected: boolean;
+    /** Whether the date belongs to the currently displayed month */
+    isCurrentMonth: boolean;
+    /** Whether the date is disabled */
+    isDisabled: boolean;
+}
+interface CalendarState {
+    /** The currently displayed month */
+    currentMonth: Date;
+    /** The currently selected date, if any */
+    selectedDate: Date | undefined;
+}
+interface CalendarAPI {
+    /** Current calendar state */
+    state: CalendarState;
+    /** Array of day objects for the current month grid (always 42: 6 weeks x 7 days) */
+    days: CalendarDay[];
+    /** Navigate to the previous month */
+    prevMonth(): void;
+    /** Navigate to the next month */
+    nextMonth(): void;
+    /** Select a date */
+    select(date: Date): void;
+    /** ARIA attributes for the calendar grid */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get ARIA attributes for a specific day cell */
+    getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        grid: string;
+        label: string;
+    };
+}
+declare function createCalendar(props?: CalendarProps): CalendarAPI;
+
+declare const calendarVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const dayVariants: (props?: ({
+    state?: "default" | "selected" | "today" | "disabled" | "outside" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CalendarAPI, type CalendarDay, type CalendarProps, type CalendarState, calendarVariants, createCalendar, dayVariants };

package/dist/internal/card/index.d.cts

@@ -0,0 +1,62 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
+
+interface CardProps {
+    /** Optional accessible role override */
+    role?: string;
+}
+interface CardAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createCard(props?: CardProps): CardAPI;
+declare function createCardHeader(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardTitle(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardDescription(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardContent(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardFooter(): {
+    dataAttributes: Record<string, string>;
+};
+
+declare const cardTokens: TokenContract;
+declare const cardVariants: (props?: ({
+    padding?: "none" | "default" | "compact" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardHeaderVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardTitleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardDescriptionVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardFooterVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CardAPI, type CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };

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

@@ -0,0 +1,62 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.js';
+
+interface CardProps {
+    /** Optional accessible role override */
+    role?: string;
+}
+interface CardAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createCard(props?: CardProps): CardAPI;
+declare function createCardHeader(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardTitle(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardDescription(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardContent(): {
+    dataAttributes: Record<string, string>;
+};
+declare function createCardFooter(): {
+    dataAttributes: Record<string, string>;
+};
+
+declare const cardTokens: TokenContract;
+declare const cardVariants: (props?: ({
+    padding?: "none" | "default" | "compact" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardHeaderVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardTitleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardDescriptionVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cardFooterVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CardAPI, type CardProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, createCard, createCardContent, createCardDescription, createCardFooter, createCardHeader, createCardTitle };

package/dist/internal/card-grid/index.d.cts

@@ -0,0 +1,10 @@
+interface CardGridProps {
+    columns?: number;
+}
+declare function createCardGrid(_props?: CardGridProps): {
+    dataAttributes: {
+        'data-slot': string;
+    };
+};
+
+export { type CardGridProps, createCardGrid };

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

@@ -0,0 +1,10 @@
+interface CardGridProps {
+    columns?: number;
+}
+declare function createCardGrid(_props?: CardGridProps): {
+    dataAttributes: {
+        'data-slot': string;
+    };
+};
+
+export { type CardGridProps, createCardGrid };

package/dist/internal/checkbox/index.d.cts

@@ -0,0 +1,40 @@
+import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared/index.cjs';
+
+type CheckedState = boolean | 'indeterminate';
+interface CheckboxProps {
+    checked?: CheckedState;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+}
+interface CheckboxAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Keyboard handlers to attach */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Whether interaction should be blocked */
+    isInteractive: boolean;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+    /** Current state */
+    state: {
+        checked: CheckedState;
+        disabled: boolean;
+    };
+}
+declare function createCheckbox(props?: CheckboxProps): CheckboxAPI;
+/** SVG path data for the check icon */
+declare const checkIconPath = "M20 6L9 17l-5-5";
+/** SVG path data for the indeterminate/minus icon */
+declare const indeterminateIconPath = "M5 12h14";
+
+declare const checkboxTokens: TokenContract;
+declare const checkboxVariants: (props?: ({
+    checked?: "indeterminate" | "true" | "false" | undefined;
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CheckboxAPI, type CheckboxProps, type CheckedState, checkIconPath, checkboxTokens, checkboxVariants, createCheckbox, indeterminateIconPath };

package/dist/internal/checkbox/index.d.ts

@@ -0,0 +1,40 @@
+import { AccessibilityProps, KeyboardHandlerMap, TokenContract } from '../shared/index.js';
+
+type CheckedState = boolean | 'indeterminate';
+interface CheckboxProps {
+    checked?: CheckedState;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+}
+interface CheckboxAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Keyboard handlers to attach */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Whether interaction should be blocked */
+    isInteractive: boolean;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+    /** Current state */
+    state: {
+        checked: CheckedState;
+        disabled: boolean;
+    };
+}
+declare function createCheckbox(props?: CheckboxProps): CheckboxAPI;
+/** SVG path data for the check icon */
+declare const checkIconPath = "M20 6L9 17l-5-5";
+/** SVG path data for the indeterminate/minus icon */
+declare const indeterminateIconPath = "M5 12h14";
+
+declare const checkboxTokens: TokenContract;
+declare const checkboxVariants: (props?: ({
+    checked?: "indeterminate" | "true" | "false" | undefined;
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CheckboxAPI, type CheckboxProps, type CheckedState, checkIconPath, checkboxTokens, checkboxVariants, createCheckbox, indeterminateIconPath };

package/dist/internal/code-editor/index.d.cts

@@ -0,0 +1,47 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
+
+type CodeEditorTheme = 'light' | 'dark';
+interface CodeEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    language?: string;
+    readOnly?: boolean;
+    theme?: CodeEditorTheme;
+}
+interface CodeEditorState {
+    value: string;
+    language: string;
+    theme: CodeEditorTheme;
+}
+interface CodeEditorAPI {
+    /** Current editor state */
+    state: CodeEditorState;
+    /** ARIA attributes for the editor element */
+    ariaProps: Partial<AccessibilityProps> & {
+        'aria-multiline'?: boolean;
+    };
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+    /** Update the editor value */
+    setValue: (value: string) => void;
+    /** Get a human-readable label for the current language */
+    getLanguageLabel: () => string;
+}
+/**
+ * Create a headless code editor API.
+ *
+ * This provides the headless interface for a code editor — state management,
+ * ARIA props, and data attributes. Actual rendering (Monaco, CodeMirror, or
+ * a simple textarea) is handled by framework-specific wrappers.
+ */
+declare function createCodeEditor(props?: CodeEditorProps): CodeEditorAPI;
+
+declare const codeEditorTokens: TokenContract;
+declare const codeEditorVariants: (props?: ({
+    theme?: "light" | "dark" | undefined;
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CodeEditorAPI, type CodeEditorProps, type CodeEditorState, type CodeEditorTheme, codeEditorTokens, codeEditorVariants, createCodeEditor };

package/dist/internal/code-editor/index.d.ts

@@ -0,0 +1,47 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.js';
+
+type CodeEditorTheme = 'light' | 'dark';
+interface CodeEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    language?: string;
+    readOnly?: boolean;
+    theme?: CodeEditorTheme;
+}
+interface CodeEditorState {
+    value: string;
+    language: string;
+    theme: CodeEditorTheme;
+}
+interface CodeEditorAPI {
+    /** Current editor state */
+    state: CodeEditorState;
+    /** ARIA attributes for the editor element */
+    ariaProps: Partial<AccessibilityProps> & {
+        'aria-multiline'?: boolean;
+    };
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+    /** Update the editor value */
+    setValue: (value: string) => void;
+    /** Get a human-readable label for the current language */
+    getLanguageLabel: () => string;
+}
+/**
+ * Create a headless code editor API.
+ *
+ * This provides the headless interface for a code editor — state management,
+ * ARIA props, and data attributes. Actual rendering (Monaco, CodeMirror, or
+ * a simple textarea) is handled by framework-specific wrappers.
+ */
+declare function createCodeEditor(props?: CodeEditorProps): CodeEditorAPI;
+
+declare const codeEditorTokens: TokenContract;
+declare const codeEditorVariants: (props?: ({
+    theme?: "light" | "dark" | undefined;
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CodeEditorAPI, type CodeEditorProps, type CodeEditorState, type CodeEditorTheme, codeEditorTokens, codeEditorVariants, createCodeEditor };

package/dist/internal/collapsible/index.d.cts

@@ -0,0 +1,43 @@
+interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+interface CollapsibleAPI {
+    /** Current open state */
+    state: {
+        open: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'data-state': 'open' | 'closed';
+        'data-disabled': string | undefined;
+    };
+    /** Props to spread on the content element */
+    contentProps: {
+        id: string;
+        role: 'region';
+        'data-state': 'open' | 'closed';
+        hidden: boolean;
+    };
+    /** Toggle the open state */
+    toggle: () => void;
+    /** Open the collapsible */
+    open: () => void;
+    /** Close the collapsible */
+    close: () => void;
+    /** Keyboard event handler for Enter/Space toggle */
+    keyboardHandler: (event: KeyboardEvent) => void;
+}
+declare function createCollapsible(props?: CollapsibleProps): CollapsibleAPI;
+
+declare const collapsibleContentVariants: (props?: ({
+    state?: "open" | "closed" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CollapsibleAPI, type CollapsibleProps, collapsibleContentVariants, createCollapsible };

package/dist/internal/collapsible/index.d.ts

@@ -0,0 +1,43 @@
+interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+interface CollapsibleAPI {
+    /** Current open state */
+    state: {
+        open: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'data-state': 'open' | 'closed';
+        'data-disabled': string | undefined;
+    };
+    /** Props to spread on the content element */
+    contentProps: {
+        id: string;
+        role: 'region';
+        'data-state': 'open' | 'closed';
+        hidden: boolean;
+    };
+    /** Toggle the open state */
+    toggle: () => void;
+    /** Open the collapsible */
+    open: () => void;
+    /** Close the collapsible */
+    close: () => void;
+    /** Keyboard event handler for Enter/Space toggle */
+    keyboardHandler: (event: KeyboardEvent) => void;
+}
+declare function createCollapsible(props?: CollapsibleProps): CollapsibleAPI;
+
+declare const collapsibleContentVariants: (props?: ({
+    state?: "open" | "closed" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CollapsibleAPI, type CollapsibleProps, collapsibleContentVariants, createCollapsible };