claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
78 lines • 2.72 kB
TypeScript
/**
* Svelte actions for ClarityKit components
* Provides reusable DOM interactions and behaviors
*/
/**
* Auto-theme action that applies theme management to an element
* Automatically initializes theme on mount and handles theme changes
*
* @param node - The DOM element to apply theming to
* @param options - Configuration options for theme behavior
* @returns Action object with destroy method
*/
export declare function autoTheme(node: HTMLElement, options?: {
/** Whether to apply theme classes to this element specifically */
applyToElement?: boolean;
/** Callback when theme changes */
onThemeChange?: (theme: 'light' | 'dark') => void;
}): {
destroy(): void;
};
/**
* Click outside action - triggers callback when clicking outside the element
* Useful for modals, dropdowns, and other overlay components
*
* @param node - The DOM element to watch for outside clicks
* @param callback - Function to call when clicking outside
* @returns Action object with destroy method
*/
export declare function clickOutside(node: HTMLElement, callback: () => void): {
destroy(): void;
};
/**
* Focus trap action - keeps focus within the element
* Useful for modals and other overlay components that need to manage focus
*
* @param node - The DOM element to trap focus within
* @param options - Configuration options
* @returns Action object with destroy method
*/
export declare function focusTrap(node: HTMLElement, options?: {
/** Whether the focus trap is currently active */
active?: boolean;
/** Element to focus initially */
initialFocus?: HTMLElement | string;
}): {
update(newOptions: typeof options): void;
destroy(): void;
};
/**
* Auto-resize action for textareas
* Automatically adjusts textarea height based on content
*
* @param node - The textarea element
* @param options - Configuration options
* @returns Action object with update and destroy methods
*/
export declare function autoResize(node: HTMLTextAreaElement, options?: {
/** Minimum height in pixels */
minHeight?: number;
/** Maximum height in pixels */
maxHeight?: number;
}): {
update(newOptions: typeof options): void;
destroy(): void;
};
/**
* Portal action - renders content in a different DOM location
* Useful for modals, tooltips, and other overlay components
*
* @param node - The element to portal
* @param target - Target element or selector where content should be rendered
* @returns Action object with update and destroy methods
*/
export declare function portal(node: HTMLElement, target?: HTMLElement | string): {
update(newTarget: HTMLElement | string): void;
destroy(): void;
};
//# sourceMappingURL=actions.d.ts.map