claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
37 lines • 1.59 kB
TypeScript
import type { Snippet } from 'svelte';
import type { EnergyLevel, EnergyStyle, EnergySize } from './types.js';
interface Props {
level: EnergyLevel;
variant?: EnergyStyle;
size?: EnergySize;
interactive?: boolean;
showLabel?: boolean;
showPercentage?: boolean;
label?: string;
reducedMotion?: boolean;
class?: string;
onLevelChange?: (level: EnergyLevel) => void;
children?: Snippet;
}
/**
* EnergyLevelIndicator
*
* ADHD-friendly energy level indicator with multiple visual styles and accessibility features.
* Designed with therapeutic principles for neurodivergent users.
*
* @prop {EnergyLevel} level - Current energy level ('low', 'medium', 'high', 'very-high')
* @prop {EnergyStyle} [variant='battery'] - Visual style ('battery', 'gauge', 'wave', 'dots')
* @prop {EnergySize} [size='md'] - Size variant ('sm', 'md', 'lg')
* @prop {boolean} [interactive=false] - Whether the indicator is interactive
* @prop {boolean} [showLabel=true] - Whether to show text label
* @prop {boolean} [showPercentage=false] - Whether to show percentage
* @prop {string} [label] - Custom label text
* @prop {boolean} [reducedMotion=false] - Whether to use reduced motion
* @prop {string} [class] - Additional CSS classes
*
* @event levelchange - Dispatched when energy level changes (interactive mode)
*/
declare const EnergyLevelIndicator: import("svelte").Component<Props, {}, "">;
type EnergyLevelIndicator = ReturnType<typeof EnergyLevelIndicator>;
export default EnergyLevelIndicator;
//# sourceMappingURL=EnergyLevelIndicator.svelte.d.ts.map