@nikkory/vibe-engine 4.0.0

package/dist/styling/types.d.ts

@@ -0,0 +1,400 @@
+/**
+ * Style Generator Types
+ *
+ * Type definitions for the style generation system.
+ * These types are used by StyleGenerator to create component styles from design tokens.
+ *
+ * @packageDocumentation
+ * @module generator/types
+ * @since 2.0.0
+ */
+/**
+ * Supported component types for style generation.
+ *
+ * @since 2.0.0
+ */
+export type ComponentType = 'button' | 'input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'radioGroup' | 'switch' | 'slider' | 'numberInput' | 'rangeSlider' | 'rating' | 'pinInput' | 'inputOtp' | 'inputPassword' | 'inputSearch' | 'inputPhone' | 'inputCurrency' | 'inputGroup' | 'tagInput' | 'multiSelect' | 'combobox' | 'autocomplete' | 'richTextEditor' | 'datePicker' | 'dateRangePicker' | 'dateTimePicker' | 'timePicker' | 'calendar' | 'fileUpload' | 'fileDropzone' | 'imageUpload' | 'card' | 'modal' | 'drawer' | 'popover' | 'tooltip' | 'sheet' | 'box' | 'flex' | 'grid' | 'gridItem' | 'stack' | 'hstack' | 'vstack' | 'center' | 'container' | 'simpleGrid' | 'wrap' | 'aspectRatio' | 'spacer' | 'resizablePanel' | 'alert' | 'toast' | 'badge' | 'chip' | 'progress' | 'progressCircle' | 'progressSteps' | 'spinner' | 'skeleton' | 'notification' | 'notificationBadge' | 'loadingOverlay' | 'loadingState' | 'emptyState' | 'errorState' | 'resultState' | 'callout' | 'banner' | 'meter' | 'statusBadge' | 'statusDot' | 'tabs' | 'menu' | 'dropdown' | 'accordion' | 'breadcrumb' | 'pagination' | 'stepper' | 'link' | 'navLink' | 'navbar' | 'navGroup' | 'navItem' | 'sidebar' | 'sidebarGroup' | 'sidebarItem' | 'commandPalette' | 'avatar' | 'table' | 'dataTable' | 'list' | 'divider' | 'stat' | 'timeline' | 'virtualList' | 'infiniteScroll' | 'confirmationModal' | 'alertDialog' | 'portal' | 'focusTrap' | 'closeButton' | 'iconButton' | 'linkOverlay' | 'icon' | 'colorPicker' | 'colorSwatch' | 'collapse' | 'scrollArea' | 'scrollToTop' | 'show' | 'hide' | 'visuallyHidden' | 'transition' | 'scaleFade' | 'slideFade' | 'formControl' | 'textareaAutosize';
+/**
+ * Button variants.
+ *
+ * @since 2.0.0
+ */
+export type ButtonVariant = 'filled' | 'outlined' | 'ghost' | 'soft' | 'link';
+/**
+ * Input variants.
+ *
+ * @since 2.0.0
+ */
+export type InputVariant = 'outlined' | 'filled' | 'underlined' | 'unstyled';
+/**
+ * Card variants.
+ *
+ * @since 2.0.0
+ */
+export type CardVariant = 'elevated' | 'outlined' | 'filled' | 'ghost';
+/**
+ * Alert variants.
+ *
+ * @since 2.0.0
+ */
+export type AlertVariant = 'filled' | 'outlined' | 'soft' | 'ghost';
+/**
+ * Badge variants.
+ *
+ * @since 2.0.0
+ */
+export type BadgeVariant = 'solid' | 'soft' | 'outlined' | 'ghost';
+/**
+ * Component sizes.
+ *
+ * @since 2.0.0
+ */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+/**
+ * Color schemes for components.
+ *
+ * @since 2.0.0
+ */
+export type ColorScheme = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'surface' | 'glass' | 'inverse' | 'transparent';
+/**
+ * Factor 4: Shape options.
+ * Controls border radius and aspect ratio of components.
+ *
+ * @since 2.0.0
+ */
+export type FactorShape = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'pill' | 'square' | 'circle';
+/**
+ * Factor 5: Position options.
+ * Controls layout positioning of elements.
+ *
+ * @since 2.0.0
+ */
+export type FactorPosition = 'left' | 'center' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+/**
+ * Factor 6: Icon position options.
+ * Controls icon placement relative to content.
+ *
+ * @since 2.0.0
+ */
+export type FactorIconPosition = 'left' | 'right' | 'top' | 'bottom' | 'only' | 'start' | 'end';
+/**
+ * Factor 7: State options.
+ * @since 2.0.0
+ */
+export type FactorState = 'default' | 'hover' | 'focus' | 'active' | 'disabled' | 'loading' | 'error' | 'success';
+/**
+ * Factor 8: Animation options.
+ * @since 2.0.0
+ */
+export type FactorAnimation = 'none' | 'subtle' | 'standard' | 'smooth' | 'bounce' | 'pulse' | 'spin' | 'ping';
+/**
+ * Factor 9: Elevation options.
+ * @since 2.0.0
+ */
+export type FactorElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'neumorphic';
+/**
+ * Factor 10: Accessibility level options.
+ * @since 2.0.0
+ */
+export type FactorA11y = 'standard' | 'enhanced' | 'maximum';
+/**
+ * Factor 11: Alignment options.
+ * @since 2.0.0
+ */
+export type FactorAlignment = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline';
+/**
+ * Factor 12: Orientation options.
+ * Controls layout direction of components.
+ *
+ * @since 2.0.0
+ */
+export type FactorOrientation = 'horizontal' | 'vertical';
+/**
+ * Factor 13: Density options.
+ * Controls spacing and padding density.
+ *
+ * @since 2.0.0
+ */
+export type FactorDensity = 'compact' | 'default' | 'comfortable' | 'spacious';
+/**
+ * Factor 14: Loading state options.
+ * Controls visual loading state feedback.
+ *
+ * @since 2.0.0
+ */
+export type FactorLoadingState = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * Factor 15: Responsive breakpoint options.
+ * @since 2.0.0
+ */
+export type FactorResponsiveBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Factor 15: Responsive configuration.
+ * Maps breakpoints to visibility or size values.
+ *
+ * @since 2.0.0
+ */
+export interface FactorResponsiveConfig {
+    /** Show/hide or size at sm breakpoint (640px) */
+    sm?: string | boolean;
+    /** Show/hide or size at md breakpoint (768px) */
+    md?: string | boolean;
+    /** Show/hide or size at lg breakpoint (1024px) */
+    lg?: string | boolean;
+    /** Show/hide or size at xl breakpoint (1280px) */
+    xl?: string | boolean;
+    /** Show/hide or size at 2xl breakpoint (1536px) */
+    '2xl'?: string | boolean;
+}
+/**
+ * Factor 16: Theme options.
+ * Controls light/dark mode appearance.
+ *
+ * @since 2.0.0
+ */
+export type FactorTheme = 'light' | 'dark' | 'system';
+/**
+ * Factor 17: Spacing options.
+ * Controls internal spacing and margins.
+ *
+ * @since 2.1.0
+ */
+export type FactorSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+/**
+ * Factor 18: Typography options.
+ * Controls text styling presets.
+ *
+ * @since 2.1.0
+ */
+export type FactorTypography = 'body' | 'bodyLarge' | 'bodySm' | 'heading' | 'headingLg' | 'headingSm' | 'display' | 'displayLg' | 'displaySm' | 'caption' | 'overline' | 'mono' | 'label' | 'labelLg' | 'labelSm';
+/**
+ * Factor 19: Border options.
+ * Controls border style and width.
+ *
+ * @since 2.1.0
+ */
+export type FactorBorder = 'none' | 'subtle' | 'solid' | 'bold' | 'dashed' | 'dotted' | 'double' | 'ring' | 'ringBold';
+/**
+ * Factor 20: Opacity options.
+ * Controls transparency levels.
+ *
+ * @since 2.1.0
+ */
+export type FactorOpacity = 'transparent' | 'dim' | 'light' | 'low' | 'medium' | 'high' | 'full';
+/**
+ * Factor 21: Overflow options.
+ * Controls content overflow behavior.
+ *
+ * @since 2.1.0
+ */
+export type FactorOverflow = 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip' | 'scrollX' | 'scrollY' | 'hiddenX' | 'hiddenY';
+/**
+ * Factor 22: Cursor options.
+ * Controls cursor style on hover.
+ *
+ * @since 2.1.0
+ */
+export type FactorCursor = 'default' | 'pointer' | 'grab' | 'grabbing' | 'move' | 'notAllowed' | 'wait' | 'progress' | 'text' | 'crosshair' | 'help' | 'zoomIn' | 'zoomOut' | 'none';
+/**
+ * Factor 23: Z-Index options.
+ * Controls stacking order.
+ *
+ * @since 2.1.0
+ */
+export type FactorZIndex = 'auto' | 'base' | 'docked' | 'dropdown' | 'sticky' | 'banner' | 'overlay' | 'modal' | 'drawer' | 'popover' | 'skipLink' | 'toast' | 'tooltip' | 'max';
+/**
+ * Factor 24: Transition options.
+ * Controls transition timing and duration.
+ *
+ * @since 2.1.0
+ */
+export type FactorTransition = 'none' | 'instant' | 'fast' | 'default' | 'slow' | 'slower' | 'smooth' | 'spring' | 'bounce' | 'easeIn' | 'easeOut' | 'easeInOut';
+/**
+ * Style configuration for component generation.
+ *
+ * @since 2.0.0
+ */
+export interface StyleConfig {
+    /** Component variant (component-specific) */
+    variant?: string;
+    /** Component size */
+    size?: ComponentSize;
+    /** Color scheme */
+    colorScheme?: ColorScheme;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Rounded corners (override token default) */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Custom class names to merge */
+    className?: string;
+    /** Factor 4: Shape - Border radius and aspect ratio */
+    factorShape?: FactorShape;
+    /** Factor 5: Position - Layout positioning */
+    factorPosition?: FactorPosition;
+    /** Factor 6: IconPosition - Icon placement relative to content */
+    factorIconPosition?: FactorIconPosition;
+    /** Factor 7: State - Component interaction state */
+    factorState?: FactorState;
+    /** Factor 8: Animation - Transition and animation preset */
+    factorAnimation?: FactorAnimation;
+    /** Factor 9: Elevation - Shadow/depth level */
+    factorElevation?: FactorElevation;
+    /** Factor 10: A11y - Accessibility enhancement level */
+    factorA11y?: FactorA11y;
+    /** Factor 11: Justify - Main axis alignment */
+    factorJustify?: FactorAlignment;
+    /** Factor 11: Align - Cross axis alignment */
+    factorAlign?: FactorAlignment;
+    /** Factor 12: Orientation - Layout direction */
+    factorOrientation?: FactorOrientation;
+    /** Factor 13: Density - Spacing and padding density */
+    factorDensity?: FactorDensity;
+    /** Factor 14: LoadingState - Visual loading feedback */
+    factorLoadingState?: FactorLoadingState;
+    /** Factor 15: Responsive - Breakpoint-based configuration */
+    factorResponsive?: FactorResponsiveConfig;
+    /** Factor 16: Theme - Light/dark mode appearance */
+    factorTheme?: FactorTheme;
+    /** Factor 17: Spacing - Internal spacing and margins */
+    factorSpacing?: FactorSpacing;
+    /** Factor 18: Typography - Text styling preset */
+    factorTypography?: FactorTypography;
+    /** Factor 19: Border - Border style and width */
+    factorBorder?: FactorBorder;
+    /** Factor 20: Opacity - Transparency level */
+    factorOpacity?: FactorOpacity;
+    /** Factor 21: Overflow - Content overflow behavior */
+    factorOverflow?: FactorOverflow;
+    /** Factor 22: Cursor - Cursor style on hover */
+    factorCursor?: FactorCursor;
+    /** Factor 23: ZIndex - Stacking order */
+    factorZIndex?: FactorZIndex;
+    /** Factor 24: Transition - Transition timing and duration */
+    factorTransition?: FactorTransition;
+    /** Additional component-specific config */
+    [key: string]: unknown;
+}
+/**
+ * Generated styles output from StyleGenerator.
+ *
+ * @since 2.0.0
+ */
+export interface GeneratedStyles {
+    /** Base classes (always applied) */
+    base: string;
+    /** Variant-specific classes */
+    variant: string;
+    /** Size-specific classes */
+    size: string;
+    /** State classes (disabled, loading, etc.) */
+    state: string;
+    /** Color scheme classes */
+    colorScheme: string;
+    /** Combined class string (all above merged) */
+    className: string;
+    /** CSS variables for dynamic styling (optional) */
+    cssVars?: Record<string, string>;
+}
+/**
+ * Style generator function signature.
+ *
+ * @since 2.0.0
+ */
+export type StyleGeneratorFn<T = unknown> = (tokens: T, config: StyleConfig) => Omit<GeneratedStyles, 'className'>;
+/**
+ * Style generator registry type.
+ *
+ * @since 2.0.0
+ */
+export type StyleGeneratorRegistry<T = unknown> = Record<ComponentType, StyleGeneratorFn<T>>;
+/**
+ * Button-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface ButtonStyleConfig extends StyleConfig {
+    variant?: ButtonVariant;
+    leftIcon?: boolean;
+    rightIcon?: boolean;
+    iconOnly?: boolean;
+}
+/**
+ * Input-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface InputStyleConfig extends StyleConfig {
+    variant?: InputVariant;
+    hasError?: boolean;
+    hasSuccess?: boolean;
+    hasPrefix?: boolean;
+    hasSuffix?: boolean;
+}
+/**
+ * Card-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface CardStyleConfig extends StyleConfig {
+    variant?: CardVariant;
+    hoverable?: boolean;
+    clickable?: boolean;
+    noPadding?: boolean;
+}
+/**
+ * Alert-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface AlertStyleConfig extends StyleConfig {
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    hasIcon?: boolean;
+}
+/**
+ * Badge-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface BadgeStyleConfig extends StyleConfig {
+    variant?: BadgeVariant;
+    dot?: boolean;
+    pill?: boolean;
+}
+/**
+ * Modal-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface ModalStyleConfig extends Omit<StyleConfig, 'size'> {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    centered?: boolean;
+    scrollBehavior?: 'inside' | 'outside';
+}
+/**
+ * Tabs-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface TabsStyleConfig extends StyleConfig {
+    variant?: 'line' | 'enclosed' | 'soft' | 'solid';
+    orientation?: 'horizontal' | 'vertical';
+    fitted?: boolean;
+}
+/**
+ * Progress-specific style configuration.
+ *
+ * @since 2.0.0
+ */
+export interface ProgressStyleConfig extends StyleConfig {
+    variant?: 'linear' | 'circular';
+    indeterminate?: boolean;
+    showValue?: boolean;
+    striped?: boolean;
+    animated?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map