@refraction-ui/react 0.4.2 → 0.5.0

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

@@ -0,0 +1,249 @@
+/**
+ * Framework-agnostic base prop types for all refraction-ui components.
+ * These are headless core types — no React, Angular, or Astro imports.
+ * Framework wrappers extend these with framework-specific types.
+ */
+/** Base props shared by all components */
+interface BaseProps {
+    id?: string;
+    className?: string;
+    style?: Record<string, string | number>;
+    [dataAttr: `data-${string}`]: string | undefined;
+}
+/** Accessibility props */
+interface AccessibilityProps {
+    role?: string;
+    tabIndex?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-selected'?: boolean;
+    'aria-hidden'?: boolean;
+    'aria-disabled'?: boolean;
+    'aria-pressed'?: boolean | 'mixed';
+    'aria-checked'?: boolean | 'mixed';
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-live'?: 'off' | 'assertive' | 'polite';
+    'aria-atomic'?: boolean;
+}
+/** Theme customization props (framework-agnostic) */
+interface ThemeProps {
+    variant?: string;
+    size?: string;
+    colorScheme?: string;
+    disabled?: boolean;
+}
+/** Composition props (framework-agnostic) */
+interface CompositionProps {
+    asChild?: boolean;
+}
+
+/** Standard size scale */
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Standard component variants */
+type Variant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+/** Layout orientation */
+type Orientation = 'horizontal' | 'vertical';
+/** Positioning side */
+type Side = 'top' | 'right' | 'bottom' | 'left';
+/** Alignment */
+type Align = 'start' | 'center' | 'end';
+/** Data state attribute values */
+type DataState = 'open' | 'closed' | 'active' | 'inactive';
+
+/** Defines the CSS custom properties a component reads */
+interface TokenContract {
+    /** Component name */
+    name: string;
+    /** Map of token name → CSS custom property info */
+    tokens: Record<string, TokenDefinition>;
+}
+interface TokenDefinition {
+    /** CSS custom property name (e.g., '--rfr-button-bg') */
+    variable: string;
+    /** Fallback value when the variable is not set */
+    fallback: string;
+    /** Description of what this token controls */
+    description?: string;
+}
+
+/** Standard keyboard key constants */
+declare const Keys: {
+    readonly Enter: "Enter";
+    readonly Space: " ";
+    readonly Escape: "Escape";
+    readonly Tab: "Tab";
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowRight: "ArrowRight";
+    readonly Home: "Home";
+    readonly End: "End";
+    readonly PageUp: "PageUp";
+    readonly PageDown: "PageDown";
+    readonly Backspace: "Backspace";
+    readonly Delete: "Delete";
+};
+type KeyboardKey = (typeof Keys)[keyof typeof Keys];
+/** Map of key → handler function */
+type KeyboardHandlerMap = Partial<Record<string, (event: KeyboardEvent) => void>>;
+/** Create a keyboard event handler from a handler map */
+declare function createKeyboardHandler(handlers: KeyboardHandlerMap): (event: KeyboardEvent) => void;
+
+/**
+ * Minimal state machine — zero dependencies, < 1KB.
+ * Inspired by XState concepts but dramatically simpler.
+ */
+interface MachineConfig<TState extends string, TEvent extends string> {
+    initial: TState;
+    states: Record<TState, {
+        on?: Partial<Record<TEvent, TState>>;
+    }>;
+}
+interface Machine<TState extends string, TEvent extends string> {
+    /** Current state */
+    state: TState;
+    /** Send an event to transition */
+    send(event: TEvent): void;
+    /** Subscribe to state changes. Returns unsubscribe function. */
+    subscribe(fn: (state: TState) => void): () => void;
+    /** Check if machine is in a given state */
+    matches(state: TState): boolean;
+}
+declare function createMachine<TState extends string, TEvent extends string>(config: MachineConfig<TState, TEvent>): Machine<TState, TEvent>;
+
+/**
+ * Focus trap utilities — keeps keyboard focus within a container.
+ * Used by Dialog, DropdownMenu, and other overlay components.
+ * Pure TypeScript, no DOM dependency (accepts element via parameter).
+ */
+/** Selector for all natively focusable elements */
+declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** Get all focusable elements within a container */
+declare function getFocusableElements(container: Element): Element[];
+/** Configuration for creating a focus trap */
+interface FocusTrapConfig {
+    /** The container element */
+    container: Element;
+    /** Called to get the initial focus target */
+    initialFocus?: () => Element | null;
+    /** Called when Escape is pressed */
+    onEscape?: () => void;
+    /** Whether to return focus to trigger on deactivate */
+    returnFocusOnDeactivate?: boolean;
+}
+/** A focus trap instance */
+interface FocusTrap {
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+}
+/** Create a focus trap that keeps Tab/Shift+Tab within a container */
+declare function createFocusTrap(config: FocusTrapConfig): FocusTrap;
+
+/**
+ * Screen reader announcement utility.
+ * Creates and manages an aria-live region for dynamic content updates.
+ */
+interface LiveRegionConfig {
+    /** 'polite' (default) or 'assertive' */
+    politeness?: 'polite' | 'assertive';
+    /** Clear the announcement after this many ms. Default: 5000 */
+    clearAfterMs?: number;
+}
+interface LiveRegion {
+    announce(message: string): void;
+    clear(): void;
+    destroy(): void;
+}
+/** Create a live region that announces messages to screen readers */
+declare function createLiveRegion(config?: LiveRegionConfig): LiveRegion;
+
+interface EngineAdapter<TState = Record<string, unknown>, TMethods = Record<string, unknown>, TReturnProps = Record<string, unknown>> {
+    name: string;
+    state: TState;
+    methods: TMethods;
+    getProps: (elementName: string, props?: Record<string, unknown>) => TReturnProps;
+}
+
+/**
+ * Skip-to-content link utility.
+ * Provides a keyboard-accessible link that is visually hidden until focused.
+ */
+/** Props for a skip-to-content link */
+interface SkipLinkProps {
+    /** ID of the target element. Default: 'main-content' */
+    targetId?: string;
+    /** Label text for the link. Default: 'Skip to main content' */
+    label?: string;
+}
+/** Create props for a skip-to-content link */
+declare function createSkipLink(props?: SkipLinkProps): {
+    ariaProps: Record<string, string>;
+    href: string;
+    label: string;
+    /** CSS classes — visually hidden until focused */
+    className: string;
+};
+
+/** Merge multiple ARIA prop objects, later values override earlier ones */
+declare function mergeAriaProps(...propSets: Array<Record<string, unknown>>): Record<string, unknown>;
+/**
+ * Generate a unique ID, safe for SSR (deterministic within a render pass).
+ * In browsers, uses crypto.randomUUID when available.
+ */
+declare function generateId(prefix?: string): string;
+/** Reset the ID counter (useful for tests) */
+declare function resetIdCounter(): void;
+
+/**
+ * Lightweight class name utility — our own implementation.
+ * Handles conditional classes, arrays, and falsy values.
+ * No external dependencies (no clsx, no tailwind-merge).
+ *
+ * For Tailwind class conflict resolution (e.g., 'p-2 p-4' → 'p-4'),
+ * consumers can use @refraction-ui/tailwind-config which provides
+ * a tw-merge-aware variant of this function.
+ */
+type ClassValue = string | number | boolean | undefined | null | ClassValue[];
+type ClassRecord = Record<string, boolean | undefined | null>;
+declare function cn(...inputs: Array<ClassValue | ClassRecord>): string;
+
+/**
+ * Lightweight class-variance-authority alternative — zero dependencies.
+ * Creates variant-driven class name functions for components.
+ */
+interface VariantConfig {
+    [variant: string]: Record<string, string>;
+}
+interface CVAConfig<V extends VariantConfig> {
+    base?: string;
+    variants?: V;
+    defaultVariants?: {
+        [K in keyof V]?: keyof V[K];
+    };
+    compoundVariants?: Array<{
+        [K in keyof V]?: keyof V[K];
+    } & {
+        class: string;
+    }>;
+}
+type VariantProps<V extends VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+};
+declare function cva<V extends VariantConfig>(config: CVAConfig<V>): (props?: VariantProps<V> & {
+    className?: string;
+}) => string;
+
+/**
+ * Reduced motion utilities.
+ * Respects user preferences for reduced motion.
+ */
+/** Check if user prefers reduced motion */
+declare function prefersReducedMotion(): boolean;
+/** Get animation duration — returns '0ms' if reduced motion preferred */
+declare function getAnimationDuration(normalDuration: string): string;
+
+export { type AccessibilityProps, type Align, type BaseProps, type CompositionProps, type DataState, type EngineAdapter, FOCUSABLE_SELECTOR, type FocusTrap, type FocusTrapConfig, type KeyboardHandlerMap, type KeyboardKey, Keys, type LiveRegion, type LiveRegionConfig, type Machine, type MachineConfig, type Orientation, type Side, type Size, type SkipLinkProps, type ThemeProps, type TokenContract, type TokenDefinition, type Variant, cn, createFocusTrap, createKeyboardHandler, createLiveRegion, createMachine, createSkipLink, cva, generateId, getAnimationDuration, getFocusableElements, mergeAriaProps, prefersReducedMotion, resetIdCounter };

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

@@ -0,0 +1,249 @@
+/**
+ * Framework-agnostic base prop types for all refraction-ui components.
+ * These are headless core types — no React, Angular, or Astro imports.
+ * Framework wrappers extend these with framework-specific types.
+ */
+/** Base props shared by all components */
+interface BaseProps {
+    id?: string;
+    className?: string;
+    style?: Record<string, string | number>;
+    [dataAttr: `data-${string}`]: string | undefined;
+}
+/** Accessibility props */
+interface AccessibilityProps {
+    role?: string;
+    tabIndex?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-selected'?: boolean;
+    'aria-hidden'?: boolean;
+    'aria-disabled'?: boolean;
+    'aria-pressed'?: boolean | 'mixed';
+    'aria-checked'?: boolean | 'mixed';
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-live'?: 'off' | 'assertive' | 'polite';
+    'aria-atomic'?: boolean;
+}
+/** Theme customization props (framework-agnostic) */
+interface ThemeProps {
+    variant?: string;
+    size?: string;
+    colorScheme?: string;
+    disabled?: boolean;
+}
+/** Composition props (framework-agnostic) */
+interface CompositionProps {
+    asChild?: boolean;
+}
+
+/** Standard size scale */
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Standard component variants */
+type Variant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+/** Layout orientation */
+type Orientation = 'horizontal' | 'vertical';
+/** Positioning side */
+type Side = 'top' | 'right' | 'bottom' | 'left';
+/** Alignment */
+type Align = 'start' | 'center' | 'end';
+/** Data state attribute values */
+type DataState = 'open' | 'closed' | 'active' | 'inactive';
+
+/** Defines the CSS custom properties a component reads */
+interface TokenContract {
+    /** Component name */
+    name: string;
+    /** Map of token name → CSS custom property info */
+    tokens: Record<string, TokenDefinition>;
+}
+interface TokenDefinition {
+    /** CSS custom property name (e.g., '--rfr-button-bg') */
+    variable: string;
+    /** Fallback value when the variable is not set */
+    fallback: string;
+    /** Description of what this token controls */
+    description?: string;
+}
+
+/** Standard keyboard key constants */
+declare const Keys: {
+    readonly Enter: "Enter";
+    readonly Space: " ";
+    readonly Escape: "Escape";
+    readonly Tab: "Tab";
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowRight: "ArrowRight";
+    readonly Home: "Home";
+    readonly End: "End";
+    readonly PageUp: "PageUp";
+    readonly PageDown: "PageDown";
+    readonly Backspace: "Backspace";
+    readonly Delete: "Delete";
+};
+type KeyboardKey = (typeof Keys)[keyof typeof Keys];
+/** Map of key → handler function */
+type KeyboardHandlerMap = Partial<Record<string, (event: KeyboardEvent) => void>>;
+/** Create a keyboard event handler from a handler map */
+declare function createKeyboardHandler(handlers: KeyboardHandlerMap): (event: KeyboardEvent) => void;
+
+/**
+ * Minimal state machine — zero dependencies, < 1KB.
+ * Inspired by XState concepts but dramatically simpler.
+ */
+interface MachineConfig<TState extends string, TEvent extends string> {
+    initial: TState;
+    states: Record<TState, {
+        on?: Partial<Record<TEvent, TState>>;
+    }>;
+}
+interface Machine<TState extends string, TEvent extends string> {
+    /** Current state */
+    state: TState;
+    /** Send an event to transition */
+    send(event: TEvent): void;
+    /** Subscribe to state changes. Returns unsubscribe function. */
+    subscribe(fn: (state: TState) => void): () => void;
+    /** Check if machine is in a given state */
+    matches(state: TState): boolean;
+}
+declare function createMachine<TState extends string, TEvent extends string>(config: MachineConfig<TState, TEvent>): Machine<TState, TEvent>;
+
+/**
+ * Focus trap utilities — keeps keyboard focus within a container.
+ * Used by Dialog, DropdownMenu, and other overlay components.
+ * Pure TypeScript, no DOM dependency (accepts element via parameter).
+ */
+/** Selector for all natively focusable elements */
+declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** Get all focusable elements within a container */
+declare function getFocusableElements(container: Element): Element[];
+/** Configuration for creating a focus trap */
+interface FocusTrapConfig {
+    /** The container element */
+    container: Element;
+    /** Called to get the initial focus target */
+    initialFocus?: () => Element | null;
+    /** Called when Escape is pressed */
+    onEscape?: () => void;
+    /** Whether to return focus to trigger on deactivate */
+    returnFocusOnDeactivate?: boolean;
+}
+/** A focus trap instance */
+interface FocusTrap {
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+}
+/** Create a focus trap that keeps Tab/Shift+Tab within a container */
+declare function createFocusTrap(config: FocusTrapConfig): FocusTrap;
+
+/**
+ * Screen reader announcement utility.
+ * Creates and manages an aria-live region for dynamic content updates.
+ */
+interface LiveRegionConfig {
+    /** 'polite' (default) or 'assertive' */
+    politeness?: 'polite' | 'assertive';
+    /** Clear the announcement after this many ms. Default: 5000 */
+    clearAfterMs?: number;
+}
+interface LiveRegion {
+    announce(message: string): void;
+    clear(): void;
+    destroy(): void;
+}
+/** Create a live region that announces messages to screen readers */
+declare function createLiveRegion(config?: LiveRegionConfig): LiveRegion;
+
+interface EngineAdapter<TState = Record<string, unknown>, TMethods = Record<string, unknown>, TReturnProps = Record<string, unknown>> {
+    name: string;
+    state: TState;
+    methods: TMethods;
+    getProps: (elementName: string, props?: Record<string, unknown>) => TReturnProps;
+}
+
+/**
+ * Skip-to-content link utility.
+ * Provides a keyboard-accessible link that is visually hidden until focused.
+ */
+/** Props for a skip-to-content link */
+interface SkipLinkProps {
+    /** ID of the target element. Default: 'main-content' */
+    targetId?: string;
+    /** Label text for the link. Default: 'Skip to main content' */
+    label?: string;
+}
+/** Create props for a skip-to-content link */
+declare function createSkipLink(props?: SkipLinkProps): {
+    ariaProps: Record<string, string>;
+    href: string;
+    label: string;
+    /** CSS classes — visually hidden until focused */
+    className: string;
+};
+
+/** Merge multiple ARIA prop objects, later values override earlier ones */
+declare function mergeAriaProps(...propSets: Array<Record<string, unknown>>): Record<string, unknown>;
+/**
+ * Generate a unique ID, safe for SSR (deterministic within a render pass).
+ * In browsers, uses crypto.randomUUID when available.
+ */
+declare function generateId(prefix?: string): string;
+/** Reset the ID counter (useful for tests) */
+declare function resetIdCounter(): void;
+
+/**
+ * Lightweight class name utility — our own implementation.
+ * Handles conditional classes, arrays, and falsy values.
+ * No external dependencies (no clsx, no tailwind-merge).
+ *
+ * For Tailwind class conflict resolution (e.g., 'p-2 p-4' → 'p-4'),
+ * consumers can use @refraction-ui/tailwind-config which provides
+ * a tw-merge-aware variant of this function.
+ */
+type ClassValue = string | number | boolean | undefined | null | ClassValue[];
+type ClassRecord = Record<string, boolean | undefined | null>;
+declare function cn(...inputs: Array<ClassValue | ClassRecord>): string;
+
+/**
+ * Lightweight class-variance-authority alternative — zero dependencies.
+ * Creates variant-driven class name functions for components.
+ */
+interface VariantConfig {
+    [variant: string]: Record<string, string>;
+}
+interface CVAConfig<V extends VariantConfig> {
+    base?: string;
+    variants?: V;
+    defaultVariants?: {
+        [K in keyof V]?: keyof V[K];
+    };
+    compoundVariants?: Array<{
+        [K in keyof V]?: keyof V[K];
+    } & {
+        class: string;
+    }>;
+}
+type VariantProps<V extends VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+};
+declare function cva<V extends VariantConfig>(config: CVAConfig<V>): (props?: VariantProps<V> & {
+    className?: string;
+}) => string;
+
+/**
+ * Reduced motion utilities.
+ * Respects user preferences for reduced motion.
+ */
+/** Check if user prefers reduced motion */
+declare function prefersReducedMotion(): boolean;
+/** Get animation duration — returns '0ms' if reduced motion preferred */
+declare function getAnimationDuration(normalDuration: string): string;
+
+export { type AccessibilityProps, type Align, type BaseProps, type CompositionProps, type DataState, type EngineAdapter, FOCUSABLE_SELECTOR, type FocusTrap, type FocusTrapConfig, type KeyboardHandlerMap, type KeyboardKey, Keys, type LiveRegion, type LiveRegionConfig, type Machine, type MachineConfig, type Orientation, type Side, type Size, type SkipLinkProps, type ThemeProps, type TokenContract, type TokenDefinition, type Variant, cn, createFocusTrap, createKeyboardHandler, createLiveRegion, createMachine, createSkipLink, cva, generateId, getAnimationDuration, getFocusableElements, mergeAriaProps, prefersReducedMotion, resetIdCounter };

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

@@ -0,0 +1,40 @@
+interface SidebarItem {
+    label: string;
+    href: string;
+    icon?: string;
+    /** Roles required to see this item */
+    roles?: string[];
+    /** Nested items */
+    children?: SidebarItem[];
+}
+interface SidebarSection {
+    title?: string;
+    items: SidebarItem[];
+}
+interface SidebarProps {
+    sections?: SidebarSection[];
+    currentPath?: string;
+    collapsed?: boolean;
+    userRoles?: string[];
+}
+interface SidebarAPI {
+    ariaProps: Record<string, string>;
+    isActive: (href: string) => boolean;
+    isVisible: (item: SidebarItem) => boolean;
+    itemAriaProps: (href: string) => Record<string, string>;
+    visibleSections: SidebarSection[];
+}
+declare function createSidebar(props?: SidebarProps): SidebarAPI;
+
+declare const sidebarVariants: (props?: ({
+    collapsed?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const sidebarItemVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SidebarAPI, type SidebarItem, type SidebarProps, type SidebarSection, createSidebar, sidebarItemVariants, sidebarVariants };

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

@@ -0,0 +1,40 @@
+interface SidebarItem {
+    label: string;
+    href: string;
+    icon?: string;
+    /** Roles required to see this item */
+    roles?: string[];
+    /** Nested items */
+    children?: SidebarItem[];
+}
+interface SidebarSection {
+    title?: string;
+    items: SidebarItem[];
+}
+interface SidebarProps {
+    sections?: SidebarSection[];
+    currentPath?: string;
+    collapsed?: boolean;
+    userRoles?: string[];
+}
+interface SidebarAPI {
+    ariaProps: Record<string, string>;
+    isActive: (href: string) => boolean;
+    isVisible: (item: SidebarItem) => boolean;
+    itemAriaProps: (href: string) => Record<string, string>;
+    visibleSections: SidebarSection[];
+}
+declare function createSidebar(props?: SidebarProps): SidebarAPI;
+
+declare const sidebarVariants: (props?: ({
+    collapsed?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const sidebarItemVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SidebarAPI, type SidebarItem, type SidebarProps, type SidebarSection, createSidebar, sidebarItemVariants, sidebarVariants };

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

@@ -0,0 +1,27 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type SkeletonShape = 'text' | 'circular' | 'rectangular' | 'rounded';
+interface SkeletonProps {
+    shape?: SkeletonShape;
+    width?: string | number;
+    height?: string | number;
+    /** Number of lines to render for the text shape variant */
+    lines?: number;
+    /** Whether to animate the skeleton pulse. Defaults to true */
+    animate?: boolean;
+}
+interface SkeletonAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createSkeleton(props?: SkeletonProps): SkeletonAPI;
+
+declare const skeletonVariants: (props?: ({
+    shape?: "text" | "circular" | "rectangular" | "rounded" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SkeletonAPI, type SkeletonProps, type SkeletonShape, createSkeleton, skeletonVariants };

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

@@ -0,0 +1,27 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type SkeletonShape = 'text' | 'circular' | 'rectangular' | 'rounded';
+interface SkeletonProps {
+    shape?: SkeletonShape;
+    width?: string | number;
+    height?: string | number;
+    /** Number of lines to render for the text shape variant */
+    lines?: number;
+    /** Whether to animate the skeleton pulse. Defaults to true */
+    animate?: boolean;
+}
+interface SkeletonAPI {
+    /** ARIA attributes to spread on the element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+}
+declare function createSkeleton(props?: SkeletonProps): SkeletonAPI;
+
+declare const skeletonVariants: (props?: ({
+    shape?: "text" | "circular" | "rectangular" | "rounded" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SkeletonAPI, type SkeletonProps, type SkeletonShape, createSkeleton, skeletonVariants };