@refraction-ui/react 0.4.1 → 0.5.0

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

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

@@ -0,0 +1,80 @@
+import { KeyboardHandlerMap } from '../shared/index.cjs';
+
+interface CommandProps {
+    /** Whether the command palette is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Custom filter function — receives item value and search query, returns true to include */
+    filter?: (value: string, search: string) => boolean;
+}
+interface CommandItemData {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Searchable value */
+    value: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Optional group the item belongs to */
+    group?: string;
+}
+interface CommandState {
+    /** Current search query */
+    search: string;
+    /** Items after filtering */
+    filteredItems: CommandItemData[];
+    /** Index of the currently highlighted item in filteredItems */
+    selectedIndex: number;
+    /** Whether the palette is open */
+    open: boolean;
+}
+interface CommandAPI {
+    /** Current command state */
+    state: CommandState;
+    /** Update the search query and re-filter items */
+    search(query: string): void;
+    /** Select the item at the given index (or the currently highlighted item) */
+    select(index?: number): CommandItemData | undefined;
+    /** Keyboard handlers for the command palette */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** ARIA attributes for the command root */
+    ariaProps: Record<string, unknown>;
+    /** ARIA attributes for the input */
+    inputAriaProps: Record<string, unknown>;
+    /** ARIA attributes for the list */
+    listAriaProps: Record<string, unknown>;
+    /** Get ARIA attributes for a specific item */
+    getItemAriaProps(item: CommandItemData, index: number): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        root: string;
+        input: string;
+        list: string;
+    };
+}
+declare function createCommand(props?: CommandProps, items?: CommandItemData[]): CommandAPI;
+
+declare const commandVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const commandInputVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const commandItemVariants: (props?: ({
+    state?: "default" | "selected" | "disabled" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const commandGroupVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CommandAPI, type CommandItemData, type CommandProps, type CommandState, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants, createCommand };

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

@@ -0,0 +1,80 @@
+import { KeyboardHandlerMap } from '../shared/index.js';
+
+interface CommandProps {
+    /** Whether the command palette is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Custom filter function — receives item value and search query, returns true to include */
+    filter?: (value: string, search: string) => boolean;
+}
+interface CommandItemData {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Searchable value */
+    value: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Optional group the item belongs to */
+    group?: string;
+}
+interface CommandState {
+    /** Current search query */
+    search: string;
+    /** Items after filtering */
+    filteredItems: CommandItemData[];
+    /** Index of the currently highlighted item in filteredItems */
+    selectedIndex: number;
+    /** Whether the palette is open */
+    open: boolean;
+}
+interface CommandAPI {
+    /** Current command state */
+    state: CommandState;
+    /** Update the search query and re-filter items */
+    search(query: string): void;
+    /** Select the item at the given index (or the currently highlighted item) */
+    select(index?: number): CommandItemData | undefined;
+    /** Keyboard handlers for the command palette */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** ARIA attributes for the command root */
+    ariaProps: Record<string, unknown>;
+    /** ARIA attributes for the input */
+    inputAriaProps: Record<string, unknown>;
+    /** ARIA attributes for the list */
+    listAriaProps: Record<string, unknown>;
+    /** Get ARIA attributes for a specific item */
+    getItemAriaProps(item: CommandItemData, index: number): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        root: string;
+        input: string;
+        list: string;
+    };
+}
+declare function createCommand(props?: CommandProps, items?: CommandItemData[]): CommandAPI;
+
+declare const commandVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const commandInputVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const commandItemVariants: (props?: ({
+    state?: "default" | "selected" | "disabled" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const commandGroupVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type CommandAPI, type CommandItemData, type CommandProps, type CommandState, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants, createCommand };

package/dist/internal/content-protection/index.d.cts

@@ -0,0 +1,47 @@
+interface ContentProtectionProps {
+    /** Enable content protection. Default: true */
+    enabled?: boolean;
+    /** Disable copy/cut. Default: true */
+    disableCopy?: boolean;
+    /** Disable right-click context menu. Default: true */
+    disableContextMenu?: boolean;
+    /** Watermark text overlay */
+    watermarkText?: string;
+}
+interface WatermarkConfig {
+    text: string;
+    opacity: number;
+    angle: number;
+}
+interface ContentProtectionAPI {
+    eventHandlers: {
+        onCopy?: (e: {
+            preventDefault(): void;
+        }) => void;
+        onCut?: (e: {
+            preventDefault(): void;
+        }) => void;
+        onContextMenu?: (e: {
+            preventDefault(): void;
+        }) => void;
+        onSelectStart?: (e: {
+            preventDefault(): void;
+        }) => void;
+    };
+    watermarkConfig: WatermarkConfig | null;
+    dataAttributes: Record<string, string>;
+}
+declare function createContentProtection(props?: ContentProtectionProps): ContentProtectionAPI;
+
+declare const contentProtectionVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const watermarkVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ContentProtectionAPI, type ContentProtectionProps, type WatermarkConfig, contentProtectionVariants, createContentProtection, watermarkVariants };

package/dist/internal/content-protection/index.d.ts

@@ -0,0 +1,47 @@
+interface ContentProtectionProps {
+    /** Enable content protection. Default: true */
+    enabled?: boolean;
+    /** Disable copy/cut. Default: true */
+    disableCopy?: boolean;
+    /** Disable right-click context menu. Default: true */
+    disableContextMenu?: boolean;
+    /** Watermark text overlay */
+    watermarkText?: string;
+}
+interface WatermarkConfig {
+    text: string;
+    opacity: number;
+    angle: number;
+}
+interface ContentProtectionAPI {
+    eventHandlers: {
+        onCopy?: (e: {
+            preventDefault(): void;
+        }) => void;
+        onCut?: (e: {
+            preventDefault(): void;
+        }) => void;
+        onContextMenu?: (e: {
+            preventDefault(): void;
+        }) => void;
+        onSelectStart?: (e: {
+            preventDefault(): void;
+        }) => void;
+    };
+    watermarkConfig: WatermarkConfig | null;
+    dataAttributes: Record<string, string>;
+}
+declare function createContentProtection(props?: ContentProtectionProps): ContentProtectionAPI;
+
+declare const contentProtectionVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const watermarkVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ContentProtectionAPI, type ContentProtectionProps, type WatermarkConfig, contentProtectionVariants, createContentProtection, watermarkVariants };

package/dist/internal/data-table/index.d.cts

@@ -0,0 +1,73 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+interface ColumnDef<T = Record<string, unknown>> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header text */
+    header: string;
+    /** Accessor function to get cell value from row */
+    accessor: (row: T) => unknown;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Whether this column is filterable */
+    filterable?: boolean;
+}
+type SortDirection = 'asc' | 'desc';
+interface DataTableProps<T = Record<string, unknown>> {
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Data rows */
+    data: T[];
+    /** Current sort column */
+    sortBy?: string;
+    /** Current sort direction */
+    sortDir?: SortDirection;
+    /** Callback when sort changes */
+    onSort?: (columnId: string, direction: SortDirection) => void;
+    /** Active filters: columnId -> filter value */
+    filters?: Record<string, string>;
+}
+interface DataTableState<T = Record<string, unknown>> {
+    sortedData: T[];
+    sortBy: string | null;
+    sortDir: SortDirection;
+    filters: Record<string, string>;
+}
+interface DataTableAPI<T = Record<string, unknown>> {
+    /** Current table state */
+    state: DataTableState<T>;
+    /** Toggle sort for a column */
+    sort(columnId: string): void;
+    /** Set a filter value for a column */
+    setFilter(columnId: string, value: string): void;
+    /** Get ARIA and role props for a header cell */
+    getHeaderProps(col: ColumnDef<T>): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get props for a data cell */
+    getCellProps(col: ColumnDef<T>, row: T): Record<string, unknown>;
+    /** Get props for a data row */
+    getRowProps(row: T, index: number): Record<string, unknown>;
+}
+declare function createDataTable<T = Record<string, unknown>>(props: DataTableProps<T>): DataTableAPI<T>;
+
+declare const tableVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const headerVariants: (props?: ({
+    sortable?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cellVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const rowVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ColumnDef, type DataTableAPI, type DataTableProps, type DataTableState, type SortDirection, cellVariants, createDataTable, headerVariants, rowVariants, tableVariants };

package/dist/internal/data-table/index.d.ts

@@ -0,0 +1,73 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+interface ColumnDef<T = Record<string, unknown>> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header text */
+    header: string;
+    /** Accessor function to get cell value from row */
+    accessor: (row: T) => unknown;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Whether this column is filterable */
+    filterable?: boolean;
+}
+type SortDirection = 'asc' | 'desc';
+interface DataTableProps<T = Record<string, unknown>> {
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Data rows */
+    data: T[];
+    /** Current sort column */
+    sortBy?: string;
+    /** Current sort direction */
+    sortDir?: SortDirection;
+    /** Callback when sort changes */
+    onSort?: (columnId: string, direction: SortDirection) => void;
+    /** Active filters: columnId -> filter value */
+    filters?: Record<string, string>;
+}
+interface DataTableState<T = Record<string, unknown>> {
+    sortedData: T[];
+    sortBy: string | null;
+    sortDir: SortDirection;
+    filters: Record<string, string>;
+}
+interface DataTableAPI<T = Record<string, unknown>> {
+    /** Current table state */
+    state: DataTableState<T>;
+    /** Toggle sort for a column */
+    sort(columnId: string): void;
+    /** Set a filter value for a column */
+    setFilter(columnId: string, value: string): void;
+    /** Get ARIA and role props for a header cell */
+    getHeaderProps(col: ColumnDef<T>): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get props for a data cell */
+    getCellProps(col: ColumnDef<T>, row: T): Record<string, unknown>;
+    /** Get props for a data row */
+    getRowProps(row: T, index: number): Record<string, unknown>;
+}
+declare function createDataTable<T = Record<string, unknown>>(props: DataTableProps<T>): DataTableAPI<T>;
+
+declare const tableVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const headerVariants: (props?: ({
+    sortable?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const cellVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const rowVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ColumnDef, type DataTableAPI, type DataTableProps, type DataTableState, type SortDirection, cellVariants, createDataTable, headerVariants, rowVariants, tableVariants };