@senka-ai/ui
Version:
A modern, type-safe Svelte 5 UI component library with full theme support, accessibility standards, and robust state management patterns
105 lines • 4.3 kB
TypeScript
/**
* Unified state management utilities for Svelte 5 components
* Provides consistent patterns for controlled/uncontrolled components
*/
/**
* Creates a controlled state pattern for components that can be either controlled or uncontrolled
* @param initialValue - The initial value for uncontrolled mode
* @param controlledValue - The controlled value (undefined for uncontrolled)
* @param onChange - Callback for value changes
* @returns Object with current value and change handler
*/
export declare function useControlledState<T>(initialValue: T, controlledValue: T | undefined, onChange?: (value: T) => void): {
value: () => T | undefined;
setValue: (newValue: T) => void;
isControlled: () => boolean;
};
/**
* Creates a focus state manager with consistent focus/blur handling
* @param onFocus - Optional callback when element gains focus
* @param onBlur - Optional callback when element loses focus
* @param disabled - Whether focus handling is disabled
* @returns Object with focus state and handlers
*/
export declare function useFocusState(onFocus?: (event: FocusEvent) => void, onBlur?: (event: FocusEvent) => void, disabled?: boolean): {
focused: () => boolean;
handleFocus: (event: FocusEvent) => void;
handleBlur: (event: FocusEvent) => void;
};
/**
* Creates a toggle state manager for boolean values
* @param initialValue - Initial boolean value
* @param controlled - Controlled value (undefined for uncontrolled)
* @param onChange - Callback for changes
* @returns Object with toggle state and handlers
*/
export declare function useToggleState(initialValue: boolean, controlled: boolean | undefined, onChange?: (value: boolean) => void): {
value: () => boolean | undefined;
setValue: (newValue: boolean) => void;
toggle: () => void;
isControlled: () => boolean;
};
/**
* Creates a dropdown/select state manager
* @param initialValue - Initial selected value
* @param controlled - Controlled value (undefined for uncontrolled)
* @param onChange - Callback for selection changes
* @returns Object with selection state and handlers
*/
export declare function useSelectState<T>(initialValue: T, controlled: T | undefined, onChange?: (value: T) => void): {
value: () => T | undefined;
setValue: (newValue: T) => void;
select: (newValue: T) => void;
isOpen: () => boolean;
open: () => void;
close: () => void;
toggle: () => void;
isControlled: () => boolean;
};
/**
* Creates a text input state manager with validation support
* @param initialValue - Initial text value
* @param controlled - Controlled value (undefined for uncontrolled)
* @param onChange - Callback for text changes
* @param validator - Optional validation function
* @returns Object with text state and handlers
*/
export declare function useTextState(initialValue: string, controlled: string | undefined, onChange?: (value: string) => void, validator?: (value: string) => string | null): {
value: () => string | undefined;
setValue: (newValue: string) => void;
validationError: () => string | null;
clearError: () => void;
isControlled: () => boolean;
hasError: () => boolean;
};
/**
* Creates a loading state manager for async operations
* @param initialLoading - Initial loading state
* @returns Object with loading state and handlers
*/
export declare function useLoadingState(initialLoading?: boolean): {
loading: () => boolean;
error: () => string | null;
setLoading: (isLoading: boolean) => void;
setError: (errorMessage: string | null) => void;
reset: () => void;
hasError: () => boolean;
};
/**
* Creates a counter state manager with bounds
* @param initialValue - Initial counter value
* @param min - Minimum allowed value
* @param max - Maximum allowed value
* @param onChange - Callback for value changes
* @returns Object with counter state and handlers
*/
export declare function useCounterState(initialValue: number, min?: number, max?: number, onChange?: (value: number) => void): {
value: () => number;
setValue: (newValue: number) => void;
increment: () => void;
decrement: () => void;
reset: () => void;
canIncrement: () => boolean;
canDecrement: () => boolean;
};
//# sourceMappingURL=state.svelte.d.ts.map