@nikkory/vibe-engine 4.0.0

package/dist/ui-studio/presets/variants.d.ts

@@ -0,0 +1,1038 @@
+/**
+ * Nikkory Vibe - 16-Factor Variant System
+ *
+ * Each component is built from a base structure + 16 customizable factors.
+ * Change any factor → instant new UI variation.
+ *
+ * Factors 1-10: Original system
+ * Factors 11-16: Extended system (Position+, Alignment, Orientation, Density, Loading, Responsive)
+ *
+ * @packageDocumentation
+ * Powered by Nikkory
+ */
+export declare const COLORS: {
+    readonly primary: "blue";
+    readonly secondary: "purple";
+    readonly success: "green";
+    readonly warning: "yellow";
+    readonly error: "red";
+    readonly info: "cyan";
+    readonly red: "red";
+    readonly orange: "orange";
+    readonly amber: "amber";
+    readonly yellow: "yellow";
+    readonly lime: "lime";
+    readonly green: "green";
+    readonly emerald: "emerald";
+    readonly teal: "teal";
+    readonly cyan: "cyan";
+    readonly sky: "sky";
+    readonly blue: "blue";
+    readonly indigo: "indigo";
+    readonly violet: "violet";
+    readonly purple: "purple";
+    readonly fuchsia: "fuchsia";
+    readonly pink: "pink";
+    readonly rose: "rose";
+    readonly slate: "slate";
+    readonly gray: "gray";
+    readonly zinc: "zinc";
+    readonly neutral: "neutral";
+    readonly stone: "stone";
+};
+export type Color = keyof typeof COLORS;
+export declare const colorVariants: {
+    solid: (color: Color) => string;
+    outline: (color: Color) => string;
+    ghost: (color: Color) => string;
+    soft: (color: Color) => string;
+    link: (color: Color) => string;
+};
+export declare const SIZES: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly '2xl': "2xl";
+};
+export type Size = keyof typeof SIZES;
+export declare const sizeVariants: {
+    button: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    input: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    icon: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    avatar: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    padding: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    gap: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+};
+export declare const VARIANTS: {
+    readonly solid: "solid";
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+    readonly soft: "soft";
+    readonly link: "link";
+};
+export type Variant = keyof typeof VARIANTS;
+export declare const SHAPES: {
+    readonly square: "rounded-none";
+    readonly rounded: "rounded-md";
+    readonly pill: "rounded-full";
+    readonly circle: "rounded-full aspect-square";
+};
+export type Shape = keyof typeof SHAPES;
+export declare const POSITIONS: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+    readonly top: "top";
+    readonly middle: "middle";
+    readonly bottom: "bottom";
+    readonly 'top-left': "top-left";
+    readonly 'top-center': "top-center";
+    readonly 'top-right': "top-right";
+    readonly 'bottom-left': "bottom-left";
+    readonly 'bottom-center': "bottom-center";
+    readonly 'bottom-right': "bottom-right";
+    readonly 'left-start': "left-start";
+    readonly 'left-center': "left-center";
+    readonly 'left-end': "left-end";
+    readonly 'right-start': "right-start";
+    readonly 'right-center': "right-center";
+    readonly 'right-end': "right-end";
+    readonly 'top-start': "top-start";
+    readonly 'top-end': "top-end";
+    readonly 'bottom-start': "bottom-start";
+    readonly 'bottom-end': "bottom-end";
+};
+export type Position = keyof typeof POSITIONS;
+/**
+ * Position-specific classes for different component types.
+ * Each component type uses positions differently based on its layout needs.
+ */
+export declare const positionVariants: {
+    /** Tooltip positioning relative to trigger element */
+    tooltip: {
+        top: string;
+        'top-start': string;
+        'top-center': string;
+        'top-end': string;
+        bottom: string;
+        'bottom-start': string;
+        'bottom-center': string;
+        'bottom-end': string;
+        left: string;
+        'left-start': string;
+        'left-center': string;
+        'left-end': string;
+        right: string;
+        'right-start': string;
+        'right-center': string;
+        'right-end': string;
+    };
+    /** Popover positioning (similar to tooltip but larger content) */
+    popover: {
+        top: string;
+        'top-start': string;
+        'top-center': string;
+        'top-end': string;
+        bottom: string;
+        'bottom-start': string;
+        'bottom-center': string;
+        'bottom-end': string;
+        left: string;
+        'left-start': string;
+        'left-center': string;
+        'left-end': string;
+        right: string;
+        'right-start': string;
+        'right-center': string;
+        'right-end': string;
+    };
+    /** Dropdown menu positioning */
+    dropdown: {
+        'bottom-start': string;
+        'bottom-end': string;
+        'bottom-center': string;
+        'top-start': string;
+        'top-end': string;
+        'top-center': string;
+    };
+    /** Toast notification positioning (fixed to viewport) */
+    toast: {
+        'top-left': string;
+        'top-center': string;
+        'top-right': string;
+        'bottom-left': string;
+        'bottom-center': string;
+        'bottom-right': string;
+    };
+    /** Modal dialog positioning */
+    modal: {
+        center: string;
+        top: string;
+        bottom: string;
+    };
+    /** Drawer/Sidebar positioning */
+    drawer: {
+        left: string;
+        right: string;
+        top: string;
+        bottom: string;
+    };
+    /** Text/content alignment */
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+};
+export declare const ICON_POSITIONS: {
+    readonly none: "none";
+    readonly left: "left";
+    readonly right: "right";
+    readonly both: "both";
+    readonly only: "only";
+};
+export type IconPosition = keyof typeof ICON_POSITIONS;
+export declare const STATES: {
+    readonly default: "default";
+    readonly hover: "hover";
+    readonly focus: "focus";
+    readonly active: "active";
+    readonly disabled: "disabled";
+    readonly loading: "loading";
+    readonly error: "error";
+    readonly success: "success";
+};
+export type State = keyof typeof STATES;
+export declare const stateVariants: {
+    disabled: string;
+    loading: string;
+    error: string;
+    success: string;
+};
+export declare const ANIMATIONS: {
+    readonly none: "";
+    readonly subtle: "transition-all duration-150 ease-out";
+    readonly standard: "transition-all duration-200 ease-in-out";
+    readonly smooth: "transition-all duration-300 ease-out";
+    readonly bounce: "transition-all duration-200 ease-out hover:scale-105 active:scale-95";
+    readonly pulse: "animate-pulse";
+    readonly spin: "animate-spin";
+    readonly ping: "animate-ping";
+};
+export type Animation = keyof typeof ANIMATIONS;
+export declare const enterAnimations: {
+    fade: {
+        initial: string;
+        animate: string;
+    };
+    scale: {
+        initial: string;
+        animate: string;
+    };
+    slideUp: {
+        initial: string;
+        animate: string;
+    };
+    slideDown: {
+        initial: string;
+        animate: string;
+    };
+    slideLeft: {
+        initial: string;
+        animate: string;
+    };
+    slideRight: {
+        initial: string;
+        animate: string;
+    };
+};
+export declare const ELEVATIONS: {
+    readonly none: "";
+    readonly xs: "shadow-xs";
+    readonly sm: "shadow-sm";
+    readonly md: "shadow-md";
+    readonly lg: "shadow-lg";
+    readonly xl: "shadow-xl";
+    readonly '2xl': "shadow-2xl";
+    readonly inner: "shadow-inner";
+    readonly glow: (color: Color) => string;
+};
+export type Elevation = keyof Omit<typeof ELEVATIONS, 'glow'> | 'glow';
+export declare const A11Y_LEVELS: {
+    readonly standard: "standard";
+    readonly enhanced: "enhanced";
+    readonly maximum: "maximum";
+};
+export type A11yLevel = keyof typeof A11Y_LEVELS;
+export declare const a11yVariants: {
+    focusRing: {
+        standard: string;
+        enhanced: string;
+        maximum: string;
+    };
+    contrast: {
+        standard: string;
+        enhanced: string;
+        maximum: string;
+    };
+    motion: {
+        standard: string;
+        enhanced: string;
+        maximum: string;
+    };
+};
+/**
+ * Alignment values for flex/grid layouts.
+ * Used for both main axis (justify) and cross axis (items) alignment.
+ */
+export declare const ALIGNMENTS: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+    readonly between: "between";
+    readonly around: "around";
+    readonly evenly: "evenly";
+    readonly stretch: "stretch";
+    readonly baseline: "baseline";
+};
+export type Alignment = keyof typeof ALIGNMENTS;
+/**
+ * Alignment classes for different layout contexts.
+ */
+export declare const alignmentVariants: {
+    /** Flex justify-content */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    /** Flex align-items */
+    items: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+        baseline: string;
+    };
+    /** Text alignment */
+    text: {
+        start: string;
+        center: string;
+        end: string;
+    };
+    /** Self alignment (for individual flex/grid items) */
+    self: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+    };
+    /** Content alignment (for multi-line flex containers) */
+    content: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+    /** Place alignment (combined justify + items) */
+    place: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+    };
+};
+/**
+ * Build alignment classes for flex/grid layouts.
+ *
+ * @param justify - Main axis alignment (justify-content)
+ * @param items - Cross axis alignment (align-items)
+ * @returns Combined Tailwind classes
+ *
+ * @example
+ * ```typescript
+ * buildAlignmentClasses('center', 'center')
+ * // Returns: 'justify-center items-center'
+ *
+ * buildAlignmentClasses('between')
+ * // Returns: 'justify-between'
+ * ```
+ */
+export declare function buildAlignmentClasses(justify?: Alignment, items?: Alignment): string;
+/**
+ * Layout orientation for directional components.
+ */
+export declare const ORIENTATIONS: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+export type Orientation = keyof typeof ORIENTATIONS;
+/**
+ * Orientation-specific classes for different component types.
+ */
+export declare const orientationVariants: {
+    /** Basic flex direction */
+    flex: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Stack components (flex with explicit display) */
+    stack: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Tabs component orientation */
+    tabs: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Divider/separator orientation */
+    divider: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Stepper component orientation */
+    stepper: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Button group orientation */
+    buttonGroup: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Radio/Checkbox group orientation */
+    group: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** List orientation */
+    list: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Slider/range orientation */
+    slider: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Toolbar orientation */
+    toolbar: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Navigation menu orientation */
+    nav: {
+        horizontal: string;
+        vertical: string;
+    };
+};
+/**
+ * Build orientation classes for a specific component type.
+ *
+ * @param component - The component type
+ * @param orientation - The orientation ('horizontal' or 'vertical')
+ * @returns Tailwind classes for the specified orientation
+ *
+ * @example
+ * ```typescript
+ * buildOrientationClasses('tabs', 'vertical')
+ * // Returns: 'flex-col border-r'
+ *
+ * buildOrientationClasses('buttonGroup', 'horizontal')
+ * // Returns: 'flex flex-row [&>*:first-child]:rounded-r-none ...'
+ * ```
+ */
+export declare function buildOrientationClasses(component: keyof typeof orientationVariants, orientation?: Orientation): string;
+export interface VariantConfig {
+    color?: Color;
+    size?: Size;
+    variant?: Variant;
+    shape?: Shape;
+    position?: Position;
+    iconPosition?: IconPosition;
+    state?: State;
+    animation?: Animation;
+    elevation?: Elevation;
+    a11y?: A11yLevel;
+    alignment?: Alignment;
+    justifyContent?: Alignment;
+    alignItems?: Alignment;
+    orientation?: Orientation;
+    density?: Density;
+    loadingState?: LoadingState;
+    responsive?: ResponsiveConfig;
+}
+/**
+ * Build component classes from variant config.
+ * Supports all 16 factors for maximum customization.
+ *
+ * @param component - The component type ('button', 'input', 'avatar')
+ * @param config - Configuration object with any of the 16 factors
+ * @returns Combined Tailwind class string
+ *
+ * @example
+ * ```typescript
+ * const classes = buildVariants('button', {
+ *   color: 'blue',
+ *   size: 'md',
+ *   variant: 'solid',
+ *   shape: 'rounded',
+ *   animation: 'bounce',
+ *   density: 'comfortable',
+ *   loadingState: 'idle',
+ * });
+ * ```
+ */
+export declare function buildVariants(component: 'button' | 'input' | 'avatar', config: VariantConfig): string;
+export declare const PRESETS: {
+    'button-primary': {
+        color: Color;
+        size: Size;
+        variant: Variant;
+        shape: Shape;
+        animation: Animation;
+        elevation: Elevation;
+        a11y: A11yLevel;
+    };
+    'button-secondary': {
+        color: Color;
+        size: Size;
+        variant: Variant;
+        shape: Shape;
+        animation: Animation;
+        elevation: Elevation;
+        a11y: A11yLevel;
+    };
+    'button-danger': {
+        color: Color;
+        size: Size;
+        variant: Variant;
+        shape: Shape;
+        animation: Animation;
+        elevation: Elevation;
+        a11y: A11yLevel;
+    };
+    'button-ghost': {
+        color: Color;
+        size: Size;
+        variant: Variant;
+        shape: Shape;
+        animation: Animation;
+        elevation: Elevation;
+        a11y: A11yLevel;
+    };
+    'button-pill': {
+        color: Color;
+        size: Size;
+        variant: Variant;
+        shape: Shape;
+        animation: Animation;
+        elevation: Elevation;
+        a11y: A11yLevel;
+    };
+    'toast-success': {
+        color: Color;
+        position: Position;
+        animation: Animation;
+        elevation: Elevation;
+    };
+    'toast-error': {
+        color: Color;
+        position: Position;
+        animation: Animation;
+        elevation: Elevation;
+    };
+    'toast-center': {
+        color: Color;
+        position: Position;
+        animation: Animation;
+        elevation: Elevation;
+    };
+};
+export type PresetName = keyof typeof PRESETS;
+/**
+ * Density levels control spacing and padding throughout components.
+ * Use compact for data-dense UIs, spacious for marketing/landing pages.
+ */
+export declare const DENSITIES: {
+    readonly compact: "compact";
+    readonly default: "default";
+    readonly comfortable: "comfortable";
+    readonly spacious: "spacious";
+};
+export type Density = keyof typeof DENSITIES;
+/**
+ * Density-specific classes for different component types.
+ * Each component type has tailored spacing for each density level.
+ */
+export declare const densityVariants: {
+    /** Padding scale for general containers */
+    padding: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Gap scale for flex/grid layouts */
+    gap: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Table row density */
+    tableRow: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** List item density */
+    listItem: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Form field vertical spacing */
+    formField: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Card content density */
+    card: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Menu item density */
+    menu: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Button density (affects height and padding) */
+    button: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+    /** Input density */
+    input: {
+        compact: string;
+        default: string;
+        comfortable: string;
+        spacious: string;
+    };
+};
+/**
+ * Build density classes for a specific component type.
+ *
+ * @param component - The component type to get density classes for
+ * @param density - The density level (defaults to 'default')
+ * @returns Tailwind classes for the specified density
+ *
+ * @example
+ * ```typescript
+ * buildDensityClasses('tableRow', 'compact')
+ * // Returns: 'h-8 px-2 py-1 text-xs'
+ * ```
+ */
+export declare function buildDensityClasses(component: keyof typeof densityVariants, density?: Density): string;
+/**
+ * Loading states for async operations.
+ * Components can show different visual feedback based on operation status.
+ */
+export declare const LOADING_STATES: {
+    readonly idle: "idle";
+    readonly loading: "loading";
+    readonly success: "success";
+    readonly error: "error";
+};
+export type LoadingState = keyof typeof LOADING_STATES;
+/**
+ * Visual classes for different loading states.
+ */
+export declare const loadingStateVariants: {
+    /** Base visual indicators */
+    visual: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    /** Background colors for states */
+    background: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    /** Text colors for states */
+    text: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    /** Icon display classes */
+    icon: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    /** Button-specific state classes */
+    button: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    /** Input-specific state classes */
+    input: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    /** Card-specific state classes */
+    card: {
+        idle: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+};
+/**
+ * Loading spinner utility classes.
+ */
+export declare const loadingSpinner: {
+    /** Wrapper for centering spinner */
+    wrapper: string;
+    /** Spinner animation */
+    spinner: string;
+    /** Semi-transparent overlay */
+    overlay: string;
+    /** Spinner sizes */
+    sizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+/**
+ * Build loading state classes for a specific component type.
+ *
+ * @param component - The component type
+ * @param state - The loading state (defaults to 'idle')
+ * @returns Tailwind classes for the specified state
+ *
+ * @example
+ * ```typescript
+ * buildLoadingStateClasses('button', 'loading')
+ * // Returns: 'relative pointer-events-none'
+ *
+ * buildLoadingStateClasses('input', 'error')
+ * // Returns: 'border-red-500 focus:border-red-500 focus:ring-red-500'
+ * ```
+ */
+export declare function buildLoadingStateClasses(component: keyof typeof loadingStateVariants, state?: LoadingState): string;
+/**
+ * Tailwind breakpoints for responsive design.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+};
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Configuration for responsive classes.
+ * Each breakpoint can have its own class string.
+ */
+export interface ResponsiveConfig {
+    /** Base classes (no breakpoint prefix) */
+    base?: string;
+    /** Small screens (640px+) */
+    sm?: string;
+    /** Medium screens (768px+) */
+    md?: string;
+    /** Large screens (1024px+) */
+    lg?: string;
+    /** Extra large screens (1280px+) */
+    xl?: string;
+    /** 2X large screens (1536px+) */
+    '2xl'?: string;
+}
+/**
+ * Pre-built responsive patterns for common use cases.
+ */
+export declare const responsiveVariants: {
+    /** Visibility utilities */
+    visibility: {
+        hiddenOnMobile: string;
+        hiddenOnDesktop: string;
+        showOnlyMobile: string;
+        showOnlyDesktop: string;
+        showOnlyTablet: string;
+    };
+    /** Stack direction changes */
+    stack: {
+        mobileVertical: string;
+        mobileHorizontal: string;
+        tabletVertical: string;
+    };
+    /** Grid column patterns */
+    gridCols: {
+        responsive: string;
+        responsiveTwo: string;
+        responsiveThree: string;
+        responsiveSidebar: string;
+    };
+    /** Text size scaling */
+    textSize: {
+        responsive: string;
+        heading: string;
+        subheading: string;
+        caption: string;
+    };
+    /** Padding scaling */
+    padding: {
+        responsive: string;
+        responsiveX: string;
+        responsiveY: string;
+    };
+    /** Width utilities */
+    width: {
+        container: string;
+        modal: string;
+        modalWide: string;
+        drawer: string;
+        sidebar: string;
+    };
+    /** Gap scaling */
+    gap: {
+        responsive: string;
+        responsiveLarge: string;
+    };
+};
+/**
+ * Build responsive class string from configuration.
+ *
+ * @param config - Responsive configuration with classes for each breakpoint
+ * @returns Combined class string with breakpoint prefixes
+ *
+ * @example
+ * ```typescript
+ * buildResponsiveClasses({
+ *   base: 'text-sm',
+ *   md: 'text-base',
+ *   lg: 'text-lg',
+ * })
+ * // Returns: 'text-sm md:text-base lg:text-lg'
+ * ```
+ */
+export declare function buildResponsiveClasses(config: ResponsiveConfig): string;
+/**
+ * Build responsive size classes for components.
+ * Applies different sizes at different breakpoints.
+ *
+ * @param component - The component type ('button', 'input', 'avatar')
+ * @param sizes - Object mapping breakpoints to size values
+ * @returns Combined class string with responsive size classes
+ *
+ * @example
+ * ```typescript
+ * buildResponsiveSize('button', { base: 'sm', lg: 'md', xl: 'lg' })
+ * // Returns size classes that change based on screen width
+ * ```
+ */
+export declare function buildResponsiveSize(component: 'button' | 'input' | 'avatar', sizes: Partial<Record<Breakpoint | 'base', Size>>): string;
+/**
+ * Theme modes for components.
+ * Components adapt their styling based on light/dark/system preference.
+ */
+export declare const THEMES: {
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly system: "system";
+};
+export type Theme = keyof typeof THEMES;
+/**
+ * Theme-specific class patterns for different component aspects.
+ * These classes use Tailwind's dark: prefix for dark mode.
+ */
+export declare const themeVariants: {
+    /** Background colors */
+    background: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Surface/card backgrounds */
+    surface: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Primary text colors */
+    textPrimary: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Secondary text colors */
+    textSecondary: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Border colors */
+    border: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Divider colors */
+    divider: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Input backgrounds */
+    input: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Hover states */
+    hover: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Active states */
+    active: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Ring/focus colors */
+    ring: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+    /** Shadow styles */
+    shadow: {
+        light: string;
+        dark: string;
+        system: string;
+    };
+};
+/**
+ * Build theme classes for a specific component aspect.
+ *
+ * @param aspect - The aspect to get theme classes for (background, text, border, etc.)
+ * @param theme - The theme mode ('light', 'dark', or 'system')
+ * @returns Tailwind classes for the specified theme aspect
+ *
+ * @example
+ * ```typescript
+ * buildThemeClasses('background', 'system')
+ * // Returns: 'bg-white dark:bg-gray-900'
+ *
+ * buildThemeClasses('textPrimary', 'dark')
+ * // Returns: 'text-gray-100 dark:text-gray-100'
+ * ```
+ */
+export declare function buildThemeClasses(aspect: keyof typeof themeVariants, theme?: Theme): string;
+/**
+ * Build complete theme class set for a component.
+ * Combines multiple theme aspects into a single class string.
+ *
+ * @param options - Theme options specifying which aspects to include
+ * @returns Combined Tailwind classes for all specified theme aspects
+ *
+ * @example
+ * ```typescript
+ * buildComponentTheme({
+ *   theme: 'system',
+ *   background: true,
+ *   text: true,
+ *   border: true,
+ * })
+ * // Returns combined classes for system theme
+ * ```
+ */
+export declare function buildComponentTheme(options: {
+    theme?: Theme;
+    background?: boolean;
+    surface?: boolean;
+    text?: boolean;
+    border?: boolean;
+    input?: boolean;
+    hover?: boolean;
+}): string;
+//# sourceMappingURL=variants.d.ts.map