@refraction-ui/react 0.4.1 → 0.5.0

package/dist/internal/date-picker/index.d.cts

@@ -0,0 +1,98 @@
+import { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.cjs';
+
+type DatePickerView = 'calendar' | 'time';
+interface DatePickerProps {
+    /** Selected date (controlled) */
+    value?: Date;
+    /** Callback when value changes */
+    onChange?: (date: Date) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Show time selection */
+    showTime?: boolean;
+    /** Display format string */
+    format?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the picker is open (controlled) */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface DatePickerState {
+    open: boolean;
+    selectedDate: Date | undefined;
+    view: DatePickerView;
+    hours: number;
+    minutes: number;
+    currentMonth: Date;
+}
+interface CalendarDay {
+    date: Date;
+    isToday: boolean;
+    isSelected: boolean;
+    isCurrentMonth: boolean;
+    isDisabled: boolean;
+}
+interface DatePickerAPI {
+    /** Current state */
+    state: DatePickerState;
+    /** Calendar days grid (42 cells) */
+    days: CalendarDay[];
+    /** Open the picker */
+    openPicker(): void;
+    /** Close the picker */
+    closePicker(): void;
+    /** Toggle the picker */
+    togglePicker(): void;
+    /** Select a date from calendar */
+    selectDate(date: Date): void;
+    /** Set hours */
+    setHours(hours: number): void;
+    /** Set minutes */
+    setMinutes(minutes: number): void;
+    /** Navigate to previous month */
+    prevMonth(): void;
+    /** Navigate to next month */
+    nextMonth(): void;
+    /** Switch between calendar and time views */
+    setView(view: DatePickerView): void;
+    /** Format the selected date for display */
+    formatDisplay(): string;
+    /** ARIA attributes for the trigger input */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the dropdown */
+    dropdownProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the calendar grid */
+    gridProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get ARIA props for a day cell */
+    getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Keyboard handlers */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs */
+    ids: {
+        trigger: string;
+        dropdown: string;
+        grid: string;
+        label: string;
+    };
+}
+declare function formatDate(date: Date | undefined, format: string, showTime: boolean): string;
+declare function createDatePicker(props?: DatePickerProps): DatePickerAPI;
+
+declare const datePickerTriggerStyles = "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer";
+declare const datePickerDropdownStyles = "absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
+declare const datePickerGridStyles = "w-full border-collapse";
+declare const datePickerDayVariants: (props?: ({
+    state?: "default" | "selected" | "today" | "disabled" | "outside" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const datePickerTimeStyles = "flex items-center gap-2 mt-3 pt-3 border-t";
+declare const datePickerTimeInputStyles = "w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center";
+
+export { type CalendarDay, type DatePickerAPI, type DatePickerProps, type DatePickerState, type DatePickerView, createDatePicker, datePickerDayVariants, datePickerDropdownStyles, datePickerGridStyles, datePickerTimeInputStyles, datePickerTimeStyles, datePickerTriggerStyles, formatDate };

package/dist/internal/date-picker/index.d.ts

@@ -0,0 +1,98 @@
+import { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.js';
+
+type DatePickerView = 'calendar' | 'time';
+interface DatePickerProps {
+    /** Selected date (controlled) */
+    value?: Date;
+    /** Callback when value changes */
+    onChange?: (date: Date) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Show time selection */
+    showTime?: boolean;
+    /** Display format string */
+    format?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the picker is open (controlled) */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface DatePickerState {
+    open: boolean;
+    selectedDate: Date | undefined;
+    view: DatePickerView;
+    hours: number;
+    minutes: number;
+    currentMonth: Date;
+}
+interface CalendarDay {
+    date: Date;
+    isToday: boolean;
+    isSelected: boolean;
+    isCurrentMonth: boolean;
+    isDisabled: boolean;
+}
+interface DatePickerAPI {
+    /** Current state */
+    state: DatePickerState;
+    /** Calendar days grid (42 cells) */
+    days: CalendarDay[];
+    /** Open the picker */
+    openPicker(): void;
+    /** Close the picker */
+    closePicker(): void;
+    /** Toggle the picker */
+    togglePicker(): void;
+    /** Select a date from calendar */
+    selectDate(date: Date): void;
+    /** Set hours */
+    setHours(hours: number): void;
+    /** Set minutes */
+    setMinutes(minutes: number): void;
+    /** Navigate to previous month */
+    prevMonth(): void;
+    /** Navigate to next month */
+    nextMonth(): void;
+    /** Switch between calendar and time views */
+    setView(view: DatePickerView): void;
+    /** Format the selected date for display */
+    formatDisplay(): string;
+    /** ARIA attributes for the trigger input */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the dropdown */
+    dropdownProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the calendar grid */
+    gridProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get ARIA props for a day cell */
+    getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Keyboard handlers */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs */
+    ids: {
+        trigger: string;
+        dropdown: string;
+        grid: string;
+        label: string;
+    };
+}
+declare function formatDate(date: Date | undefined, format: string, showTime: boolean): string;
+declare function createDatePicker(props?: DatePickerProps): DatePickerAPI;
+
+declare const datePickerTriggerStyles = "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer";
+declare const datePickerDropdownStyles = "absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
+declare const datePickerGridStyles = "w-full border-collapse";
+declare const datePickerDayVariants: (props?: ({
+    state?: "default" | "selected" | "today" | "disabled" | "outside" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const datePickerTimeStyles = "flex items-center gap-2 mt-3 pt-3 border-t";
+declare const datePickerTimeInputStyles = "w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center";
+
+export { type CalendarDay, type DatePickerAPI, type DatePickerProps, type DatePickerState, type DatePickerView, createDatePicker, datePickerDayVariants, datePickerDropdownStyles, datePickerGridStyles, datePickerTimeInputStyles, datePickerTimeStyles, datePickerTriggerStyles, formatDate };

package/dist/internal/device-frame/index.d.cts

@@ -0,0 +1,40 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type DeviceType = 'iphone' | 'ipad' | 'android-phone' | 'android-tablet';
+type DeviceOrientation = 'portrait' | 'landscape';
+interface DeviceFrameProps {
+    /** The type of device to display */
+    device: DeviceType;
+    /** The orientation of the device */
+    orientation?: DeviceOrientation;
+}
+interface DeviceDimensions {
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+    /** Border radius in pixels */
+    radius: number;
+    /** Whether the device has a notch */
+    notch: boolean;
+    /** Whether the device has a home indicator bar */
+    homeIndicator: boolean;
+}
+interface DeviceFrameAPI {
+    /** Computed dimensions for the device */
+    dimensions: DeviceDimensions;
+    /** ARIA attributes for the device frame */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createDeviceFrame(props: DeviceFrameProps): DeviceFrameAPI;
+
+declare const deviceFrameVariants: (props?: ({
+    device?: "iphone" | "ipad" | "android-phone" | "android-tablet" | undefined;
+    orientation?: "portrait" | "landscape" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DeviceDimensions, type DeviceFrameAPI, type DeviceFrameProps, type DeviceOrientation, type DeviceType, createDeviceFrame, deviceFrameVariants };

package/dist/internal/device-frame/index.d.ts

@@ -0,0 +1,40 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type DeviceType = 'iphone' | 'ipad' | 'android-phone' | 'android-tablet';
+type DeviceOrientation = 'portrait' | 'landscape';
+interface DeviceFrameProps {
+    /** The type of device to display */
+    device: DeviceType;
+    /** The orientation of the device */
+    orientation?: DeviceOrientation;
+}
+interface DeviceDimensions {
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+    /** Border radius in pixels */
+    radius: number;
+    /** Whether the device has a notch */
+    notch: boolean;
+    /** Whether the device has a home indicator bar */
+    homeIndicator: boolean;
+}
+interface DeviceFrameAPI {
+    /** Computed dimensions for the device */
+    dimensions: DeviceDimensions;
+    /** ARIA attributes for the device frame */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createDeviceFrame(props: DeviceFrameProps): DeviceFrameAPI;
+
+declare const deviceFrameVariants: (props?: ({
+    device?: "iphone" | "ipad" | "android-phone" | "android-tablet" | undefined;
+    orientation?: "portrait" | "landscape" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DeviceDimensions, type DeviceFrameAPI, type DeviceFrameProps, type DeviceOrientation, type DeviceType, createDeviceFrame, deviceFrameVariants };

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

@@ -0,0 +1,54 @@
+import { AccessibilityProps, KeyboardHandlerMap, FocusTrapConfig } from '../shared/index.cjs';
+
+interface DialogProps {
+    /** Whether the dialog is open (controlled) */
+    open?: boolean;
+    /** Whether the dialog starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the dialog is modal (default: true) */
+    modal?: boolean;
+}
+interface DialogState {
+    open: boolean;
+}
+interface DialogAPI {
+    /** Current dialog state */
+    state: DialogState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the dialog content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for the overlay */
+    overlayProps: Record<string, string>;
+    /** Open the dialog */
+    open(): void;
+    /** Close the dialog */
+    close(): void;
+    /** Toggle the dialog */
+    toggle(): void;
+    /** Keyboard handlers (Escape to close) */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+        title: string;
+        description: string;
+    };
+    /**
+     * Focus trap configuration for framework wrappers.
+     * Pass this to createFocusTrap() with a container element.
+     */
+    focusTrapConfig: Omit<FocusTrapConfig, 'container'>;
+}
+declare function createDialog(props?: DialogProps): DialogAPI;
+
+declare const overlayStyles = "fixed inset-0 z-50 bg-black/80";
+declare const dialogContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DialogAPI, type DialogProps, type DialogState, createDialog, dialogContentVariants, overlayStyles };

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

@@ -0,0 +1,54 @@
+import { AccessibilityProps, KeyboardHandlerMap, FocusTrapConfig } from '../shared/index.js';
+
+interface DialogProps {
+    /** Whether the dialog is open (controlled) */
+    open?: boolean;
+    /** Whether the dialog starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the dialog is modal (default: true) */
+    modal?: boolean;
+}
+interface DialogState {
+    open: boolean;
+}
+interface DialogAPI {
+    /** Current dialog state */
+    state: DialogState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the dialog content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for the overlay */
+    overlayProps: Record<string, string>;
+    /** Open the dialog */
+    open(): void;
+    /** Close the dialog */
+    close(): void;
+    /** Toggle the dialog */
+    toggle(): void;
+    /** Keyboard handlers (Escape to close) */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+        title: string;
+        description: string;
+    };
+    /**
+     * Focus trap configuration for framework wrappers.
+     * Pass this to createFocusTrap() with a container element.
+     */
+    focusTrapConfig: Omit<FocusTrapConfig, 'container'>;
+}
+declare function createDialog(props?: DialogProps): DialogAPI;
+
+declare const overlayStyles = "fixed inset-0 z-50 bg-black/80";
+declare const dialogContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DialogAPI, type DialogProps, type DialogState, createDialog, dialogContentVariants, overlayStyles };

package/dist/internal/dropdown-menu/index.d.cts

@@ -0,0 +1,55 @@
+import { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.cjs';
+
+interface DropdownMenuProps {
+    /** Whether the menu is open (controlled) */
+    open?: boolean;
+    /** Whether the menu starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface MenuItemProps {
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Callback when the item is selected */
+    onSelect?: () => void;
+}
+interface DropdownMenuState {
+    open: boolean;
+}
+interface DropdownMenuAPI {
+    /** Current menu state */
+    state: DropdownMenuState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the menu content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Factory for menu item props */
+    getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Open the menu */
+    open(): void;
+    /** Close the menu */
+    close(): void;
+    /** Toggle the menu */
+    toggle(): void;
+    /** Keyboard handlers for the menu */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+    };
+}
+declare function createDropdownMenu(props?: DropdownMenuProps): DropdownMenuAPI;
+
+declare const menuContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const menuItemVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DropdownMenuAPI, type DropdownMenuProps, type DropdownMenuState, type MenuItemProps, createDropdownMenu, menuContentVariants, menuItemVariants };

package/dist/internal/dropdown-menu/index.d.ts

@@ -0,0 +1,55 @@
+import { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.js';
+
+interface DropdownMenuProps {
+    /** Whether the menu is open (controlled) */
+    open?: boolean;
+    /** Whether the menu starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface MenuItemProps {
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Callback when the item is selected */
+    onSelect?: () => void;
+}
+interface DropdownMenuState {
+    open: boolean;
+}
+interface DropdownMenuAPI {
+    /** Current menu state */
+    state: DropdownMenuState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the menu content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Factory for menu item props */
+    getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Open the menu */
+    open(): void;
+    /** Close the menu */
+    close(): void;
+    /** Toggle the menu */
+    toggle(): void;
+    /** Keyboard handlers for the menu */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+    };
+}
+declare function createDropdownMenu(props?: DropdownMenuProps): DropdownMenuAPI;
+
+declare const menuContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const menuItemVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DropdownMenuAPI, type DropdownMenuProps, type DropdownMenuState, type MenuItemProps, createDropdownMenu, menuContentVariants, menuItemVariants };

package/dist/internal/emoji-picker/index.d.cts

@@ -0,0 +1,77 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type EmojiCategory = 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols' | 'flags';
+interface EmojiEntry {
+    emoji: string;
+    name: string;
+    category: EmojiCategory;
+    keywords: string[];
+}
+declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
+/** All categories in display order */
+declare const EMOJI_CATEGORIES: EmojiCategory[];
+/** Category display labels */
+declare const CATEGORY_LABELS: Record<EmojiCategory, string>;
+/** Get all emojis as a flat array */
+declare function getAllEmojis(): EmojiEntry[];
+
+interface EmojiPickerProps {
+    /** Callback when an emoji is selected */
+    onSelect?: (emoji: EmojiEntry) => void;
+    /** Initial search query */
+    search?: string;
+    /** List of recently used emojis */
+    recentEmojis?: EmojiEntry[];
+    /** Maximum recent emojis to show */
+    maxRecent?: number;
+}
+interface EmojiPickerState {
+    search: string;
+    activeCategory: EmojiCategory;
+    filteredEmojis: EmojiEntry[];
+    recentEmojis: EmojiEntry[];
+}
+interface EmojiPickerAPI {
+    /** Current state */
+    state: EmojiPickerState;
+    /** Set search query */
+    setSearch(query: string): void;
+    /** Select an emoji */
+    select(emoji: EmojiEntry): void;
+    /** Set active category tab */
+    setCategory(category: EmojiCategory): void;
+    /** Category tabs with labels */
+    categoryTabs: {
+        category: EmojiCategory;
+        label: string;
+        emoji: string;
+    }[];
+    /** ARIA props for the picker container */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the search input */
+    searchInputProps: Record<string, unknown>;
+    /** Get ARIA props for an emoji button */
+    getEmojiAriaProps(emoji: EmojiEntry): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        container: string;
+        search: string;
+        grid: string;
+        label: string;
+    };
+}
+declare function createEmojiPicker(props?: EmojiPickerProps): EmojiPickerAPI;
+
+declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md";
+declare const emojiPickerSearchStyles = "w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground";
+declare const emojiPickerCategoryBarStyles = "flex border-b px-1";
+declare const emojiPickerCategoryTabVariants: (props?: ({
+    state?: "active" | "inactive" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const emojiPickerGridStyles = "grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto";
+declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors";
+declare const emojiPickerSectionLabelStyles = "px-2 py-1 text-xs font-medium text-muted-foreground";
+
+export { CATEGORY_LABELS, EMOJI_CATEGORIES, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, getAllEmojis };

package/dist/internal/emoji-picker/index.d.ts

@@ -0,0 +1,77 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type EmojiCategory = 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols' | 'flags';
+interface EmojiEntry {
+    emoji: string;
+    name: string;
+    category: EmojiCategory;
+    keywords: string[];
+}
+declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
+/** All categories in display order */
+declare const EMOJI_CATEGORIES: EmojiCategory[];
+/** Category display labels */
+declare const CATEGORY_LABELS: Record<EmojiCategory, string>;
+/** Get all emojis as a flat array */
+declare function getAllEmojis(): EmojiEntry[];
+
+interface EmojiPickerProps {
+    /** Callback when an emoji is selected */
+    onSelect?: (emoji: EmojiEntry) => void;
+    /** Initial search query */
+    search?: string;
+    /** List of recently used emojis */
+    recentEmojis?: EmojiEntry[];
+    /** Maximum recent emojis to show */
+    maxRecent?: number;
+}
+interface EmojiPickerState {
+    search: string;
+    activeCategory: EmojiCategory;
+    filteredEmojis: EmojiEntry[];
+    recentEmojis: EmojiEntry[];
+}
+interface EmojiPickerAPI {
+    /** Current state */
+    state: EmojiPickerState;
+    /** Set search query */
+    setSearch(query: string): void;
+    /** Select an emoji */
+    select(emoji: EmojiEntry): void;
+    /** Set active category tab */
+    setCategory(category: EmojiCategory): void;
+    /** Category tabs with labels */
+    categoryTabs: {
+        category: EmojiCategory;
+        label: string;
+        emoji: string;
+    }[];
+    /** ARIA props for the picker container */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the search input */
+    searchInputProps: Record<string, unknown>;
+    /** Get ARIA props for an emoji button */
+    getEmojiAriaProps(emoji: EmojiEntry): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        container: string;
+        search: string;
+        grid: string;
+        label: string;
+    };
+}
+declare function createEmojiPicker(props?: EmojiPickerProps): EmojiPickerAPI;
+
+declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md";
+declare const emojiPickerSearchStyles = "w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground";
+declare const emojiPickerCategoryBarStyles = "flex border-b px-1";
+declare const emojiPickerCategoryTabVariants: (props?: ({
+    state?: "active" | "inactive" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const emojiPickerGridStyles = "grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto";
+declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors";
+declare const emojiPickerSectionLabelStyles = "px-2 py-1 text-xs font-medium text-muted-foreground";
+
+export { CATEGORY_LABELS, EMOJI_CATEGORIES, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, getAllEmojis };