@refraction-ui/react 0.4.2 → 0.6.0

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

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