@senka-ai/ui/dist/utils/styles.d.ts

A modern, type-safe Svelte 5 UI component library with full theme support, accessibility standards, and robust state management patterns

/**
 * Style composition utilities for consistent CSS class management
 *
 * These utilities help components compose CSS classes in a standardized way,
 * reducing repetition and ensuring consistent patterns across all components.
 */
export type ClassValue = string | undefined | null | false | 0 | '';
export type VariantMap<T extends string> = Record<T, string>;
export type SizeMap<T extends string> = Record<T, string>;
/**
 * Compose CSS classes with base, variants, and conditional modifiers
 * Filters out falsy values and joins with spaces
 */
export declare function composeClasses(...classes: ClassValue[]): string;
/**
 * Create a style composition function for a component with variants and sizes
 * This is the main utility for component class composition
 */
export declare function createStyleComposer<TVariant extends string = string, TSize extends string = string>(config: {
    base: string;
    variants?: VariantMap<TVariant>;
    sizes?: SizeMap<TSize>;
}): (options: {
    variant?: TVariant;
    size?: TSize;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Standard button style composer
 * Updated to match Button component's original design
 */
export declare const createButtonStyles: (options: {
    variant?: "primary" | "secondary" | "tertiary" | undefined;
    size?: "small" | "medium" | "large" | "xs" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Standard input/form field style composer
 * Updated to match TextField component's original design
 */
export declare const createInputStyles: (options: {
    variant?: "disabled" | "error" | "default" | "focused" | undefined;
    size?: "small" | "medium" | "large" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Filter style composer - combines button appearance with form input border styling
 * Default variant uses thin border like form inputs, other variants use button styling
 */
export declare const createFilterStyles: (options: {
    variant?: "primary" | "secondary" | "tertiary" | undefined;
    size?: "small" | "medium" | "large" | "xs" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Card style composer that matches the original Card component design exactly
 */
export declare function createCardStyles(options: {
    variant: 'default' | 'compact';
    interactive?: boolean;
    disabled?: boolean;
    className?: string;
}): string;
/**
 * Card content style composer for consistent content area styling
 */
export declare function createCardContentStyles(options: {
    variant: 'default' | 'compact';
}): string;
/**
 * Standard avatar style composer
 */
export declare const createAvatarStyles: (options: {
    variant?: "default" | "bordered" | undefined;
    size?: "small" | "medium" | "large" | "xs" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Badge style composer that handles different badge types
 * Updated to match Badge component's original design exactly
 */
export declare function createBadgeStyles(options: {
    variant: 'default' | 'success' | 'warning' | 'error';
    size: 'xs' | 'small' | 'medium' | 'large';
    type: 'dot' | 'number' | 'icon';
    isText?: boolean;
    className?: string;
}): string;
/**
 * List item style composer that matches the original ListItem component design exactly
 */
export declare function createListItemStyles(options: {
    compact?: boolean;
    interactive?: boolean;
    disabled?: boolean;
    className?: string;
}): string;
/**
 * Tag style composer that matches the original Tag component design exactly
 */
export declare function createTagStyles(options: {
    variant: 'primary' | 'secondary' | 'tertiary';
    interactive?: boolean;
    disabled?: boolean;
    className?: string;
}): string;
/**
 * Divider style composer that matches the original Divider component design exactly
 */
export declare function createDividerStyles(options: {
    orientation: 'horizontal' | 'vertical';
    variant: 'solid' | 'dashed' | 'dotted';
    spacing: 'none' | 'small' | 'medium' | 'large';
    className?: string;
}): string;
/**
 * Standard navigation item style composer
 */
export declare const createNavItemStyles: (options: {
    variant?: "disabled" | "default" | "active" | undefined;
    size?: "small" | "medium" | "large" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Utility for conditional classes
 * Useful for inline conditional styling
 */
export declare function conditionalClass(condition: boolean, trueClass: string, falseClass?: string): string;
/**
 * Utility for focus ring classes
 * Standardizes focus styling across components
 */
export declare function focusRing(color?: 'highlight' | 'error' | 'success' | 'warning'): string;
/**
 * Utility for transition classes
 * Standardizes transitions across components
 */
export declare function transition(type?: 'colors' | 'transform' | 'all' | 'opacity'): string;
/**
 * Utility for disabled states
 * Standardizes disabled styling across components
 */
export declare function disabledState(): string;
/**
 * Utility for interactive states
 * Standardizes hover/active states across components
 */
export declare function interactiveState(): string;
/**
 * Media container style composer for Image and Video components
 * Updated to match original Image/Video component designs exactly
 */
export declare function createMediaContainerStyles(options: {
    aspectRatio: 'square' | '16:9' | '4:3' | '3:2' | 'auto';
    rounded: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
    className?: string;
}): string;
/**
 * Image style composer that matches the original Image component design exactly
 */
export declare function createImageStyles(options: {
    fit: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none';
    loading: boolean;
    hasSize?: boolean;
}): string;
/**
 * Video style composer that matches the original Video component design exactly
 */
export declare function createVideoStyles(options: {
    loading: boolean;
}): string;
/**
 * Standard checkbox style composer
 */
export declare const createCheckboxStyles: (options: {
    variant?: "unchecked" | "checked" | undefined;
    size?: "small" | "medium" | "large" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Standard toggle/switch style composer
 * Updated to match Toggle component's original design
 */
export declare const createToggleStyles: (options: {
    variant?: "unchecked" | "checked" | undefined;
    size?: "small" | "medium" | "large" | "xs" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Standard radio button style composer
 * Updated to match RadioButton component's original design
 */
export declare const createRadioStyles: (options: {
    variant?: "unchecked" | "checked" | undefined;
    size?: "small" | "medium" | "large" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Banner style composer for informative banner components
 * Provides consistent styling for informational banners with different variants
 */
export declare function createBannerStyles(options: {
    variant: 'default' | 'info' | 'success' | 'warning' | 'error';
    disabled?: boolean;
    clickable?: boolean;
    className?: string;
}): string;
/**
 * Toast style composer for notification/feedback toasts
 * Provides consistent styling for informational toasts with different variants
 */
export declare function createToastStyles(options: {
    variant: 'info' | 'success' | 'warning' | 'error';
    dismissible?: boolean;
    showBorder?: boolean;
    singleLine?: boolean;
    className?: string;
}): string;
/**
 * Progress Bar style composer for progress indication components
 * Provides consistent styling for progress bars with different variants
 */
export declare function createProgressBarStyles(options: {
    size: 'small' | 'medium' | 'large';
    color: 'primary' | 'success' | 'warning' | 'error';
    animated?: boolean;
    disabled?: boolean;
    className?: string;
}): {
    container: string;
    label: string;
    track: string;
    fill: string;
};
/**
 * Dialog style composer for modal dialog components
 * Provides consistent styling for modal dialogs with backdrop and content areas
 */
export declare function createDialogStyles(options: {
    disabled?: boolean;
    className?: string;
}): {
    backdrop: string;
    container: string;
    closeButton: string;
    content: string;
    title: string;
    description: string;
    actions: string;
};
/**
 * Loader style composer for loading indicator components
 * Provides consistent styling for circular progress and spinner loaders
 */
export declare function createLoaderStyles(options: {
    variant: 'progress' | 'spinner';
    size: 'small' | 'medium' | 'large';
    color: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
    speed: 'slow' | 'normal' | 'fast';
    disabled?: boolean;
    className?: string;
}): {
    container: string;
    svg: string;
    background: string;
    foreground: string;
    progressText: string;
    label: string;
    spinAnimation: string;
};
/**
 * IconButton style composer for icon-only button components
 * Provides consistent styling for different icon button variants, colors, and sizes
 */
export declare function createIconButtonStyles(options: {
    variant?: 'ghost' | 'outlined' | 'filled';
    color?: 'default' | 'neutral' | 'success' | 'warning' | 'error';
    size?: 'small' | 'medium' | 'large';
    disabled?: boolean;
    className?: string;
}): string;
/**
 * NumberInput button style composer for increment/decrement buttons
 * Provides consistent styling for button variants and layouts
 */
export declare function createNumberInputButtonStyles(options: {
    layout: 'stacked' | 'horizontal' | 'split';
    position?: 'increment' | 'decrement' | 'left' | 'right';
    disabled?: boolean;
    className?: string;
}): string;
/**
 * Slider style composer for custom slider components
 * Provides consistent styling for track, fill, and thumb elements
 */
export declare function createSliderStyles(options: {
    focused?: boolean;
    disabled?: boolean;
    className?: string;
}): {
    track: string;
    fill: string;
    thumb: string;
};
/**
 * ActionSheet style composer for modal action sheet components
 * Provides consistent styling for overlay, positioning, and animations
 */
export declare function createActionSheetStyles(options: {
    open: boolean;
    position: 'bottom' | 'top';
    animationSpeed: 'slow' | 'normal' | 'fast';
    disabled?: boolean;
    className?: string;
}): {
    backdrop: string;
    container: string;
    header: string;
    title: string;
    content: string;
};
/**
 * Star Rating style composer for rating input components
 * Provides consistent styling for star rating container with different sizes and states
 */
export declare const createStarRatingStyles: (options: {
    variant?: "default" | "focused" | undefined;
    size?: "small" | "medium" | "large" | "xs" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * Tooltip style composer
 */
export declare const createTooltipStyles: (options: {
    variant?: "visible" | "hidden" | undefined;
    size?: "small" | "medium" | "large" | "auto" | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string;
    modifiers?: Record<string, boolean>;
}) => string;
/**
 * LocationPin style composer for location pin and current location indicators
 * Provides consistent styling for different variants and sizes with optional pulse animations
 */
export declare function createLocationPinStyles(options: {
    variant: 'pin' | 'current';
    size: 'small' | 'medium' | 'large';
    interactive?: boolean;
    disabled?: boolean;
    pulse?: boolean;
    className?: string;
}): string;
/**
 * LocationPin current location inner dot styles
 * Provides consistent styling for the inner solid dot of current location indicators
 */
export declare function createLocationPinInnerDotStyles(size: 'small' | 'medium' | 'large'): string;
/**
 * LocationPin current location outer ring styles for pulse animation
 * Provides consistent styling for the outer pulsing ring of current location indicators
 */
export declare function createLocationPinOuterRingStyles(size: 'small' | 'medium' | 'large'): string;
/**
 * LocationPin current location outer circle styles (static border)
 * Provides consistent styling for the outer circle border of current location indicators
 */
export declare function createLocationPinOuterCircleStyles(size: 'small' | 'medium' | 'large'): string;
/**
 * Container style composer for generic container components
 * Provides consistent styling for simple containers without the complexity of Card
 */
export declare function createContainerStyles(options: {
    variant: 'default' | 'elevated' | 'bordered';
    padding: 'none' | 'tight' | 'normal' | 'comfortable' | 'spacious';
    radius: 'none' | 'small' | 'normal' | 'large';
    background?: boolean;
    color?: 'neutral' | 'highlight' | 'success' | 'warning' | 'error';
    fullWidth?: boolean;
    disabled?: boolean;
    minHeight?: 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'preview';
    height?: 'auto' | 'full' | 'screen' | 'xs' | 'small' | 'medium' | 'large' | 'xl';
    minWidth?: 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl';
    width?: 'auto' | 'full';
    className?: string;
}): string;
//# sourceMappingURL=styles.d.ts.map