@refraction-ui/react 0.4.2 → 0.6.0

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

@@ -0,0 +1,30 @@
+interface SocialLink {
+    label: string;
+    href: string;
+    icon?: string;
+}
+interface FooterColumn {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+interface FooterProps {
+    copyright?: string;
+    socialLinks?: SocialLink[];
+    columns?: FooterColumn[];
+}
+interface FooterAPI {
+    ariaProps: Record<string, string>;
+    copyrightText: string;
+}
+declare function createFooter(props?: FooterProps): FooterAPI;
+
+declare const footerVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type FooterAPI, type FooterColumn, type FooterProps, type SocialLink, createFooter, footerVariants };

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

@@ -0,0 +1,30 @@
+interface SocialLink {
+    label: string;
+    href: string;
+    icon?: string;
+}
+interface FooterColumn {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+interface FooterProps {
+    copyright?: string;
+    socialLinks?: SocialLink[];
+    columns?: FooterColumn[];
+}
+interface FooterAPI {
+    ariaProps: Record<string, string>;
+    copyrightText: string;
+}
+declare function createFooter(props?: FooterProps): FooterAPI;
+
+declare const footerVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type FooterAPI, type FooterColumn, type FooterProps, type SocialLink, createFooter, footerVariants };

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

@@ -0,0 +1,52 @@
+interface InlineEditorProps {
+    /** Current value */
+    value: string;
+    /** Callback when saving */
+    onSave?: (value: string) => void;
+    /** Callback when cancelling */
+    onCancel?: () => void;
+}
+interface ToolbarAction {
+    name: string;
+    syntax: string;
+}
+interface InlineEditorState {
+    isEditing: boolean;
+    value: string;
+    preview: string;
+}
+interface InlineEditorAPI {
+    /** Current editor state */
+    state: InlineEditorState;
+    /** Enter editing mode */
+    startEditing(): void;
+    /** Cancel editing, revert to original value */
+    cancel(): void;
+    /** Save the current value */
+    save(): void;
+    /** Update the editing value */
+    updateValue(value: string): void;
+    /** Insert syntax at cursor position */
+    insertAtCursor(syntax: string): void;
+    /** Available toolbar actions */
+    toolbarActions: ToolbarAction[];
+}
+declare function createInlineEditor(props: InlineEditorProps): InlineEditorAPI;
+
+declare const editorVariants: (props?: ({
+    state?: "viewing" | "editing" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const toolbarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const previewVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InlineEditorAPI, type InlineEditorProps, type InlineEditorState, type ToolbarAction, createInlineEditor, editorVariants, previewVariants, toolbarVariants };

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

@@ -0,0 +1,52 @@
+interface InlineEditorProps {
+    /** Current value */
+    value: string;
+    /** Callback when saving */
+    onSave?: (value: string) => void;
+    /** Callback when cancelling */
+    onCancel?: () => void;
+}
+interface ToolbarAction {
+    name: string;
+    syntax: string;
+}
+interface InlineEditorState {
+    isEditing: boolean;
+    value: string;
+    preview: string;
+}
+interface InlineEditorAPI {
+    /** Current editor state */
+    state: InlineEditorState;
+    /** Enter editing mode */
+    startEditing(): void;
+    /** Cancel editing, revert to original value */
+    cancel(): void;
+    /** Save the current value */
+    save(): void;
+    /** Update the editing value */
+    updateValue(value: string): void;
+    /** Insert syntax at cursor position */
+    insertAtCursor(syntax: string): void;
+    /** Available toolbar actions */
+    toolbarActions: ToolbarAction[];
+}
+declare function createInlineEditor(props: InlineEditorProps): InlineEditorAPI;
+
+declare const editorVariants: (props?: ({
+    state?: "viewing" | "editing" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const toolbarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const previewVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InlineEditorAPI, type InlineEditorProps, type InlineEditorState, type ToolbarAction, createInlineEditor, editorVariants, previewVariants, toolbarVariants };

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

@@ -0,0 +1,38 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+interface InputProps {
+    type?: InputType;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    'aria-invalid'?: boolean;
+}
+interface InputAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps> & {
+        'aria-invalid'?: boolean;
+        'aria-required'?: boolean;
+    };
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createInput(props?: InputProps): InputAPI;
+declare function getInputAriaProps(state: {
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+}): Partial<AccessibilityProps> & {
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+};
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InputAPI, type InputProps, type InputType, createInput, getInputAriaProps, inputVariants };

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

@@ -0,0 +1,38 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+interface InputProps {
+    type?: InputType;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    'aria-invalid'?: boolean;
+}
+interface InputAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps> & {
+        'aria-invalid'?: boolean;
+        'aria-required'?: boolean;
+    };
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createInput(props?: InputProps): InputAPI;
+declare function getInputAriaProps(state: {
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+}): Partial<AccessibilityProps> & {
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+};
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InputAPI, type InputProps, type InputType, createInput, getInputAriaProps, inputVariants };

package/dist/internal/input-group/index.d.cts

@@ -0,0 +1,35 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
+
+type InputGroupOrientation = 'horizontal' | 'vertical';
+interface InputGroupProps {
+    orientation?: InputGroupOrientation;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+interface InputGroupAPI {
+    /** ARIA attributes to spread on the group container */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createInputGroup(props?: InputGroupProps): InputGroupAPI;
+
+declare const inputGroupTokens: TokenContract;
+declare const inputGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const inputGroupAddonVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const inputGroupButtonVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InputGroupAPI, type InputGroupOrientation, type InputGroupProps, createInputGroup, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupTokens, inputGroupVariants };

package/dist/internal/input-group/index.d.ts

@@ -0,0 +1,35 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.js';
+
+type InputGroupOrientation = 'horizontal' | 'vertical';
+interface InputGroupProps {
+    orientation?: InputGroupOrientation;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+interface InputGroupAPI {
+    /** ARIA attributes to spread on the group container */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createInputGroup(props?: InputGroupProps): InputGroupAPI;
+
+declare const inputGroupTokens: TokenContract;
+declare const inputGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const inputGroupAddonVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const inputGroupButtonVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InputGroupAPI, type InputGroupOrientation, type InputGroupProps, createInputGroup, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupTokens, inputGroupVariants };

package/dist/internal/install-prompt/index.d.cts

@@ -0,0 +1,36 @@
+interface StorageAdapter {
+    get(key: string): string | null;
+    set(key: string, value: string): void;
+}
+interface InstallPromptProps {
+    /** Delay in ms before showing prompt. Default: 3000 */
+    delay?: number;
+    /** Key used to persist dismissed state. Default: 'rfr-install-dismissed' */
+    storageKey?: string;
+}
+interface InstallPromptState {
+    canShow: boolean;
+    isDismissed: boolean;
+}
+interface InstallPromptAPI {
+    state: InstallPromptState;
+    /** Mark the prompt as showable (call after delay + event fire) */
+    show(): void;
+    /** Dismiss and persist */
+    dismiss(): void;
+    /** Trigger the browser install prompt */
+    install(promptEvent?: {
+        prompt(): void;
+    }): void;
+    /** ARIA attributes for the banner */
+    ariaProps: Record<string, string>;
+}
+declare function createInstallPrompt(props?: InstallPromptProps, storage?: StorageAdapter): InstallPromptAPI;
+
+declare const installPromptVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InstallPromptAPI, type InstallPromptProps, type InstallPromptState, type StorageAdapter, createInstallPrompt, installPromptVariants };

package/dist/internal/install-prompt/index.d.ts

@@ -0,0 +1,36 @@
+interface StorageAdapter {
+    get(key: string): string | null;
+    set(key: string, value: string): void;
+}
+interface InstallPromptProps {
+    /** Delay in ms before showing prompt. Default: 3000 */
+    delay?: number;
+    /** Key used to persist dismissed state. Default: 'rfr-install-dismissed' */
+    storageKey?: string;
+}
+interface InstallPromptState {
+    canShow: boolean;
+    isDismissed: boolean;
+}
+interface InstallPromptAPI {
+    state: InstallPromptState;
+    /** Mark the prompt as showable (call after delay + event fire) */
+    show(): void;
+    /** Dismiss and persist */
+    dismiss(): void;
+    /** Trigger the browser install prompt */
+    install(promptEvent?: {
+        prompt(): void;
+    }): void;
+    /** ARIA attributes for the banner */
+    ariaProps: Record<string, string>;
+}
+declare function createInstallPrompt(props?: InstallPromptProps, storage?: StorageAdapter): InstallPromptAPI;
+
+declare const installPromptVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type InstallPromptAPI, type InstallPromptProps, type InstallPromptState, type StorageAdapter, createInstallPrompt, installPromptVariants };

package/dist/internal/keyboard-shortcut/index.d.cts

@@ -0,0 +1,49 @@
+interface ShortcutProps {
+    /** Key combination (e.g., ['Ctrl', 'K'] or ['Meta', 'Shift', 'P']) */
+    keys: string[];
+    /** Callback when the shortcut is triggered */
+    onTrigger: () => void;
+    /** Whether the shortcut is enabled */
+    enabled?: boolean;
+    /** Prevent default browser behavior */
+    preventDefault?: boolean;
+}
+interface KeyboardShortcutAPI {
+    /** Handle a keyboard event (returns true if it matched) */
+    handler(event: KeyboardEvent): boolean;
+    /** Human-readable display of the shortcut */
+    display: string;
+    /** Platform-aware display (uses command symbol on Mac) */
+    platformDisplay: string;
+    /** Whether the shortcut is currently enabled */
+    enabled: boolean;
+    /** The key combination */
+    keys: string[];
+    /** ARIA props for a visual shortcut badge */
+    badgeAriaProps: Record<string, unknown>;
+}
+declare function formatShortcut(keys: string[], mac?: boolean): string;
+declare function createKeyboardShortcut(props: ShortcutProps): KeyboardShortcutAPI;
+declare const SANE_DEFAULTS: Record<string, string[]>;
+declare class ShortcutRegistry {
+    private shortcuts;
+    register(keys: string[], handler: () => void): void;
+    unregister(keys: string[]): void;
+}
+declare const globalShortcutRegistry: ShortcutRegistry;
+declare class AltHintState {
+    private showHints;
+    private listeners;
+    private initialized;
+    init(): void;
+    private setShowHints;
+    subscribe(listener: (show: boolean) => void): () => void;
+    get snapshot(): boolean;
+}
+declare const altHintState: AltHintState;
+
+declare const shortcutBadgeStyles = "inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground";
+declare const shortcutKeyStyles = "inline-flex items-center justify-center min-w-[1.25rem] rounded bg-background px-1 py-0.5 text-xs font-mono border shadow-sm";
+declare const shortcutSeparatorStyles = "text-muted-foreground text-xs";
+
+export { AltHintState, type KeyboardShortcutAPI, SANE_DEFAULTS, type ShortcutProps, ShortcutRegistry, altHintState, createKeyboardShortcut, formatShortcut, globalShortcutRegistry, shortcutBadgeStyles, shortcutKeyStyles, shortcutSeparatorStyles };

package/dist/internal/keyboard-shortcut/index.d.ts

@@ -0,0 +1,49 @@
+interface ShortcutProps {
+    /** Key combination (e.g., ['Ctrl', 'K'] or ['Meta', 'Shift', 'P']) */
+    keys: string[];
+    /** Callback when the shortcut is triggered */
+    onTrigger: () => void;
+    /** Whether the shortcut is enabled */
+    enabled?: boolean;
+    /** Prevent default browser behavior */
+    preventDefault?: boolean;
+}
+interface KeyboardShortcutAPI {
+    /** Handle a keyboard event (returns true if it matched) */
+    handler(event: KeyboardEvent): boolean;
+    /** Human-readable display of the shortcut */
+    display: string;
+    /** Platform-aware display (uses command symbol on Mac) */
+    platformDisplay: string;
+    /** Whether the shortcut is currently enabled */
+    enabled: boolean;
+    /** The key combination */
+    keys: string[];
+    /** ARIA props for a visual shortcut badge */
+    badgeAriaProps: Record<string, unknown>;
+}
+declare function formatShortcut(keys: string[], mac?: boolean): string;
+declare function createKeyboardShortcut(props: ShortcutProps): KeyboardShortcutAPI;
+declare const SANE_DEFAULTS: Record<string, string[]>;
+declare class ShortcutRegistry {
+    private shortcuts;
+    register(keys: string[], handler: () => void): void;
+    unregister(keys: string[]): void;
+}
+declare const globalShortcutRegistry: ShortcutRegistry;
+declare class AltHintState {
+    private showHints;
+    private listeners;
+    private initialized;
+    init(): void;
+    private setShowHints;
+    subscribe(listener: (show: boolean) => void): () => void;
+    get snapshot(): boolean;
+}
+declare const altHintState: AltHintState;
+
+declare const shortcutBadgeStyles = "inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground";
+declare const shortcutKeyStyles = "inline-flex items-center justify-center min-w-[1.25rem] rounded bg-background px-1 py-0.5 text-xs font-mono border shadow-sm";
+declare const shortcutSeparatorStyles = "text-muted-foreground text-xs";
+
+export { AltHintState, type KeyboardShortcutAPI, SANE_DEFAULTS, type ShortcutProps, ShortcutRegistry, altHintState, createKeyboardShortcut, formatShortcut, globalShortcutRegistry, shortcutBadgeStyles, shortcutKeyStyles, shortcutSeparatorStyles };

package/dist/internal/language-selector/index.d.cts

@@ -0,0 +1,63 @@
+import { KeyboardHandlerMap } from '../shared/index.cjs';
+
+interface LanguageOption {
+    value: string;
+    label: string;
+    group?: string;
+}
+interface LanguageSelectorProps {
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    options: LanguageOption[];
+    multiple?: boolean;
+}
+interface LanguageSelectorAPI {
+    /** Current state */
+    state: {
+        selectedValues: string[];
+        isOpen: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-haspopup': 'listbox';
+        role: 'combobox';
+    };
+    /** Props to spread on the content/dropdown element */
+    contentProps: {
+        role: 'listbox';
+        id: string;
+        'aria-multiselectable'?: boolean;
+    };
+    /** Get props for an individual option */
+    getOptionProps: (value: string) => {
+        role: 'option';
+        'aria-selected': boolean;
+        'data-value': string;
+    };
+    /** Toggle an option's selection */
+    toggle: (value: string) => void;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Keyboard handler map */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Pre-built keyboard event handler */
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+declare function createLanguageSelector(props: LanguageSelectorProps): LanguageSelectorAPI;
+
+declare const selectorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const optionVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type LanguageOption, type LanguageSelectorAPI, type LanguageSelectorProps, createLanguageSelector, optionVariants, selectorVariants };

package/dist/internal/language-selector/index.d.ts

@@ -0,0 +1,63 @@
+import { KeyboardHandlerMap } from '../shared/index.js';
+
+interface LanguageOption {
+    value: string;
+    label: string;
+    group?: string;
+}
+interface LanguageSelectorProps {
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    options: LanguageOption[];
+    multiple?: boolean;
+}
+interface LanguageSelectorAPI {
+    /** Current state */
+    state: {
+        selectedValues: string[];
+        isOpen: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-haspopup': 'listbox';
+        role: 'combobox';
+    };
+    /** Props to spread on the content/dropdown element */
+    contentProps: {
+        role: 'listbox';
+        id: string;
+        'aria-multiselectable'?: boolean;
+    };
+    /** Get props for an individual option */
+    getOptionProps: (value: string) => {
+        role: 'option';
+        'aria-selected': boolean;
+        'data-value': string;
+    };
+    /** Toggle an option's selection */
+    toggle: (value: string) => void;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Keyboard handler map */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Pre-built keyboard event handler */
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+declare function createLanguageSelector(props: LanguageSelectorProps): LanguageSelectorAPI;
+
+declare const selectorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const optionVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type LanguageOption, type LanguageSelectorAPI, type LanguageSelectorProps, createLanguageSelector, optionVariants, selectorVariants };