@nikkory/vibe-engine 4.0.0

package/dist/styling/factors-12-16.d.ts

@@ -0,0 +1,700 @@
+/**
+ * 16-Factor Variant System - Factors 12-16
+ *
+ * Factor 12: Orientation - Layout direction options
+ * Factor 13: Density - Spacing and padding density
+ * Factor 14: LoadingState - Visual loading feedback
+ * Factor 15: Responsive - Breakpoint-based configuration
+ * Factor 16: Theme - Light/dark mode appearance
+ *
+ * @packageDocumentation
+ * @module generator/factors-12-16
+ * @since 2.0.0
+ *
+ * Powered by Nikkory
+ */
+import type { FactorOrientation, FactorDensity, FactorLoadingState, FactorResponsiveConfig, FactorResponsiveBreakpoint, FactorTheme } from './types';
+/**
+ * Orientation options constant.
+ * @since 2.0.0
+ */
+export declare const ORIENTATIONS: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/**
+ * Orientation-specific Tailwind classes for different component contexts.
+ * @since 2.0.0
+ */
+export declare const orientationVariants: {
+    /** Flex container orientation */
+    readonly flex: {
+        readonly horizontal: "flex-row";
+        readonly vertical: "flex-col";
+    };
+    /** Tabs component orientation */
+    readonly tabs: {
+        readonly horizontal: "flex-row border-b";
+        readonly vertical: "flex-col border-r";
+    };
+    /** Divider orientation */
+    readonly divider: {
+        readonly horizontal: "w-full h-px";
+        readonly vertical: "h-full w-px";
+    };
+    /** Stepper orientation */
+    readonly stepper: {
+        readonly horizontal: "flex-row space-x-4";
+        readonly vertical: "flex-col space-y-4";
+    };
+    /** Button group orientation */
+    readonly buttonGroup: {
+        readonly horizontal: "flex-row";
+        readonly vertical: "flex-col";
+    };
+    /** List orientation */
+    readonly list: {
+        readonly horizontal: "flex-row flex-wrap gap-2";
+        readonly vertical: "flex-col gap-1";
+    };
+    /** Slider orientation */
+    readonly slider: {
+        readonly horizontal: "w-full h-2";
+        readonly vertical: "h-full w-2";
+    };
+    /** Stack orientation */
+    readonly stack: {
+        readonly horizontal: "flex-row";
+        readonly vertical: "flex-col";
+    };
+    /** Radio/Checkbox group */
+    readonly radioGroup: {
+        readonly horizontal: "flex-row gap-4";
+        readonly vertical: "flex-col gap-2";
+    };
+};
+export type OrientationVariantKey = keyof typeof orientationVariants;
+/**
+ * Build orientation classes for a specific component context.
+ *
+ * @param context - Component context (flex, tabs, divider, etc.)
+ * @param orientation - Orientation value
+ * @returns Tailwind classes for orientation
+ *
+ * @example
+ * ```typescript
+ * buildOrientationClasses('tabs', 'vertical')
+ * // => "flex-col border-r"
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function buildOrientationClasses(context: OrientationVariantKey, orientation: FactorOrientation): string;
+/**
+ * Density options constant.
+ * @since 2.0.0
+ */
+export declare const DENSITIES: {
+    readonly compact: "compact";
+    readonly default: "default";
+    readonly comfortable: "comfortable";
+    readonly spacious: "spacious";
+};
+/**
+ * Density-specific Tailwind classes for different component contexts.
+ * @since 2.0.0
+ */
+export declare const densityVariants: {
+    /** Generic padding density */
+    readonly padding: {
+        readonly compact: "p-1";
+        readonly default: "p-2";
+        readonly comfortable: "p-4";
+        readonly spacious: "p-6";
+    };
+    /** Button density */
+    readonly button: {
+        readonly compact: "px-2 py-0.5 text-xs";
+        readonly default: "px-4 py-2 text-sm";
+        readonly comfortable: "px-6 py-3 text-base";
+        readonly spacious: "px-8 py-4 text-lg";
+    };
+    /** Input density */
+    readonly input: {
+        readonly compact: "px-2 py-1 text-xs h-7";
+        readonly default: "px-3 py-2 text-sm h-10";
+        readonly comfortable: "px-4 py-3 text-base h-12";
+        readonly spacious: "px-5 py-4 text-lg h-14";
+    };
+    /** Table row density */
+    readonly tableRow: {
+        readonly compact: "py-1 px-2";
+        readonly default: "py-2 px-4";
+        readonly comfortable: "py-3 px-6";
+        readonly spacious: "py-4 px-8";
+    };
+    /** List item density */
+    readonly listItem: {
+        readonly compact: "py-1 px-2";
+        readonly default: "py-2 px-3";
+        readonly comfortable: "py-3 px-4";
+        readonly spacious: "py-4 px-6";
+    };
+    /** Card density */
+    readonly card: {
+        readonly compact: "p-2";
+        readonly default: "p-4";
+        readonly comfortable: "p-6";
+        readonly spacious: "p-8";
+    };
+    /** Menu item density */
+    readonly menu: {
+        readonly compact: "px-2 py-1 text-xs";
+        readonly default: "px-3 py-2 text-sm";
+        readonly comfortable: "px-4 py-3 text-base";
+        readonly spacious: "px-6 py-4 text-lg";
+    };
+    /** Gap/spacing density */
+    readonly gap: {
+        readonly compact: "gap-1";
+        readonly default: "gap-2";
+        readonly comfortable: "gap-4";
+        readonly spacious: "gap-6";
+    };
+    /** Icon size density */
+    readonly icon: {
+        readonly compact: "w-3 h-3";
+        readonly default: "w-4 h-4";
+        readonly comfortable: "w-5 h-5";
+        readonly spacious: "w-6 h-6";
+    };
+};
+export type DensityVariantKey = keyof typeof densityVariants;
+/**
+ * Build density classes for a specific component context.
+ *
+ * @param context - Component context (button, input, card, etc.)
+ * @param density - Density value
+ * @returns Tailwind classes for density
+ *
+ * @example
+ * ```typescript
+ * buildDensityClasses('button', 'compact')
+ * // => "px-2 py-0.5 text-xs"
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function buildDensityClasses(context: DensityVariantKey, density: FactorDensity): string;
+/**
+ * Loading state options constant.
+ * @since 2.0.0
+ */
+export declare const LOADING_STATES: {
+    readonly idle: "idle";
+    readonly loading: "loading";
+    readonly success: "success";
+    readonly error: "error";
+};
+/**
+ * Loading state-specific Tailwind classes for different contexts.
+ * @since 2.0.0
+ */
+export declare const loadingStateVariants: {
+    /** Visual indicator classes */
+    readonly visual: {
+        readonly idle: "";
+        readonly loading: "opacity-70 cursor-wait";
+        readonly success: "border-success-500 bg-success-50";
+        readonly error: "border-error-500 bg-error-50";
+    };
+    /** Button loading states */
+    readonly button: {
+        readonly idle: "";
+        readonly loading: "opacity-70 cursor-wait pointer-events-none";
+        readonly success: "bg-success-500 text-white";
+        readonly error: "bg-error-500 text-white";
+    };
+    /** Input loading states */
+    readonly input: {
+        readonly idle: "";
+        readonly loading: "bg-neutral-50 cursor-wait";
+        readonly success: "border-success-500 focus:ring-success-500";
+        readonly error: "border-error-500 focus:ring-error-500";
+    };
+    /** Card loading states */
+    readonly card: {
+        readonly idle: "";
+        readonly loading: "animate-pulse";
+        readonly success: "ring-2 ring-success-500";
+        readonly error: "ring-2 ring-error-500";
+    };
+    /** Form loading states */
+    readonly form: {
+        readonly idle: "";
+        readonly loading: "pointer-events-none opacity-60";
+        readonly success: "";
+        readonly error: "";
+    };
+};
+export type LoadingStateVariantKey = keyof typeof loadingStateVariants;
+/**
+ * Build loading state classes for a specific component context.
+ *
+ * @param context - Component context (button, input, card, etc.)
+ * @param state - Loading state value
+ * @returns Tailwind classes for loading state
+ *
+ * @example
+ * ```typescript
+ * buildLoadingStateClasses('button', 'loading')
+ * // => "opacity-70 cursor-wait pointer-events-none"
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function buildLoadingStateClasses(context: LoadingStateVariantKey, state: FactorLoadingState): string;
+/**
+ * Responsive breakpoint options constant.
+ * @since 2.0.0
+ */
+export declare const RESPONSIVE_BREAKPOINTS: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly '2xl': "2xl";
+};
+/**
+ * Breakpoint pixel values for reference.
+ * @since 2.0.0
+ */
+export declare const BREAKPOINT_VALUES: Record<FactorResponsiveBreakpoint, number>;
+/**
+ * Responsive visibility classes.
+ * @since 2.0.0
+ */
+export declare const responsiveVisibility: {
+    /** Hide at breakpoint and above */
+    readonly hideUp: {
+        readonly sm: "sm:hidden";
+        readonly md: "md:hidden";
+        readonly lg: "lg:hidden";
+        readonly xl: "xl:hidden";
+        readonly '2xl': "2xl:hidden";
+    };
+    /** Show at breakpoint and above */
+    readonly showUp: {
+        readonly sm: "hidden sm:block";
+        readonly md: "hidden md:block";
+        readonly lg: "hidden lg:block";
+        readonly xl: "hidden xl:block";
+        readonly '2xl': "hidden 2xl:block";
+    };
+    /** Hide below breakpoint */
+    readonly hideDown: {
+        readonly sm: "max-sm:hidden";
+        readonly md: "max-md:hidden";
+        readonly lg: "max-lg:hidden";
+        readonly xl: "max-xl:hidden";
+        readonly '2xl': "max-2xl:hidden";
+    };
+};
+/**
+ * Apply responsive prefix to a class.
+ *
+ * @param breakpoint - Responsive breakpoint
+ * @param className - Class to prefix
+ * @returns Prefixed class string
+ *
+ * @example
+ * ```typescript
+ * applyResponsivePrefix('md', 'text-lg')
+ * // => "md:text-lg"
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function applyResponsivePrefix(breakpoint: FactorResponsiveBreakpoint, className: string): string;
+/**
+ * Build responsive classes from configuration.
+ *
+ * @param config - Responsive configuration object
+ * @returns Combined responsive classes
+ *
+ * @example
+ * ```typescript
+ * buildResponsiveClasses({ sm: 'hidden', md: 'block', lg: 'flex' })
+ * // => "sm:hidden md:block lg:flex"
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function buildResponsiveClasses(config: FactorResponsiveConfig): string;
+/**
+ * Theme options constant.
+ * @since 2.0.0
+ */
+export declare const THEMES: {
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly system: "system";
+};
+/**
+ * Theme-specific Tailwind classes for different properties.
+ * @since 2.0.0
+ */
+export declare const themeVariants: {
+    /** Background colors */
+    readonly background: {
+        readonly light: "bg-white";
+        readonly dark: "dark:bg-neutral-900";
+        readonly system: "bg-white dark:bg-neutral-900";
+    };
+    /** Primary text colors */
+    readonly textPrimary: {
+        readonly light: "text-neutral-900";
+        readonly dark: "dark:text-white";
+        readonly system: "text-neutral-900 dark:text-white";
+    };
+    /** Secondary text colors */
+    readonly textSecondary: {
+        readonly light: "text-neutral-600";
+        readonly dark: "dark:text-neutral-400";
+        readonly system: "text-neutral-600 dark:text-neutral-400";
+    };
+    /** Border colors */
+    readonly border: {
+        readonly light: "border-neutral-200";
+        readonly dark: "dark:border-neutral-700";
+        readonly system: "border-neutral-200 dark:border-neutral-700";
+    };
+    /** Surface/card backgrounds */
+    readonly surface: {
+        readonly light: "bg-neutral-50";
+        readonly dark: "dark:bg-neutral-800";
+        readonly system: "bg-neutral-50 dark:bg-neutral-800";
+    };
+    /** Hover backgrounds */
+    readonly hoverBg: {
+        readonly light: "hover:bg-neutral-100";
+        readonly dark: "dark:hover:bg-neutral-700";
+        readonly system: "hover:bg-neutral-100 dark:hover:bg-neutral-700";
+    };
+};
+export type ThemeVariantKey = keyof typeof themeVariants;
+/**
+ * Build theme classes for a specific property.
+ *
+ * @param property - Property to theme (background, text, border, etc.)
+ * @param theme - Theme value
+ * @returns Tailwind classes for theme
+ *
+ * @example
+ * ```typescript
+ * buildThemeClasses('background', 'system')
+ * // => "bg-white dark:bg-neutral-900"
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function buildThemeClasses(property: ThemeVariantKey, theme: FactorTheme): string;
+/**
+ * Get all theme classes for a complete component theme.
+ *
+ * @param theme - Theme value
+ * @returns Object with all themed property classes
+ *
+ * @since 2.0.0
+ */
+export declare function getThemeClasses(theme: FactorTheme): Record<ThemeVariantKey, string>;
+/**
+ * Factor 12-16 configuration interface.
+ * @since 2.0.0
+ */
+export interface Factors12to16Config {
+    /** Factor 12: Orientation */
+    orientation?: FactorOrientation;
+    /** Factor 13: Density */
+    density?: FactorDensity;
+    /** Factor 14: Loading state */
+    loadingState?: FactorLoadingState;
+    /** Factor 15: Responsive config */
+    responsive?: FactorResponsiveConfig;
+    /** Factor 16: Theme */
+    theme?: FactorTheme;
+}
+/**
+ * Apply all Factor 12-16 configurations to generate classes.
+ *
+ * @param componentType - Type of component for context-aware classes
+ * @param config - Factor 12-16 configuration
+ * @returns Combined class string
+ *
+ * @example
+ * ```typescript
+ * applyFactors12to16('button', {
+ *   orientation: 'horizontal',
+ *   density: 'compact',
+ *   loadingState: 'loading',
+ *   theme: 'system'
+ * })
+ * ```
+ *
+ * @since 2.0.0
+ */
+export declare function applyFactors12to16(componentType: string, config: Factors12to16Config): string;
+export declare const Factors12to16: {
+    ORIENTATIONS: {
+        readonly horizontal: "horizontal";
+        readonly vertical: "vertical";
+    };
+    orientationVariants: {
+        /** Flex container orientation */
+        readonly flex: {
+            readonly horizontal: "flex-row";
+            readonly vertical: "flex-col";
+        };
+        /** Tabs component orientation */
+        readonly tabs: {
+            readonly horizontal: "flex-row border-b";
+            readonly vertical: "flex-col border-r";
+        };
+        /** Divider orientation */
+        readonly divider: {
+            readonly horizontal: "w-full h-px";
+            readonly vertical: "h-full w-px";
+        };
+        /** Stepper orientation */
+        readonly stepper: {
+            readonly horizontal: "flex-row space-x-4";
+            readonly vertical: "flex-col space-y-4";
+        };
+        /** Button group orientation */
+        readonly buttonGroup: {
+            readonly horizontal: "flex-row";
+            readonly vertical: "flex-col";
+        };
+        /** List orientation */
+        readonly list: {
+            readonly horizontal: "flex-row flex-wrap gap-2";
+            readonly vertical: "flex-col gap-1";
+        };
+        /** Slider orientation */
+        readonly slider: {
+            readonly horizontal: "w-full h-2";
+            readonly vertical: "h-full w-2";
+        };
+        /** Stack orientation */
+        readonly stack: {
+            readonly horizontal: "flex-row";
+            readonly vertical: "flex-col";
+        };
+        /** Radio/Checkbox group */
+        readonly radioGroup: {
+            readonly horizontal: "flex-row gap-4";
+            readonly vertical: "flex-col gap-2";
+        };
+    };
+    buildOrientationClasses: typeof buildOrientationClasses;
+    DENSITIES: {
+        readonly compact: "compact";
+        readonly default: "default";
+        readonly comfortable: "comfortable";
+        readonly spacious: "spacious";
+    };
+    densityVariants: {
+        /** Generic padding density */
+        readonly padding: {
+            readonly compact: "p-1";
+            readonly default: "p-2";
+            readonly comfortable: "p-4";
+            readonly spacious: "p-6";
+        };
+        /** Button density */
+        readonly button: {
+            readonly compact: "px-2 py-0.5 text-xs";
+            readonly default: "px-4 py-2 text-sm";
+            readonly comfortable: "px-6 py-3 text-base";
+            readonly spacious: "px-8 py-4 text-lg";
+        };
+        /** Input density */
+        readonly input: {
+            readonly compact: "px-2 py-1 text-xs h-7";
+            readonly default: "px-3 py-2 text-sm h-10";
+            readonly comfortable: "px-4 py-3 text-base h-12";
+            readonly spacious: "px-5 py-4 text-lg h-14";
+        };
+        /** Table row density */
+        readonly tableRow: {
+            readonly compact: "py-1 px-2";
+            readonly default: "py-2 px-4";
+            readonly comfortable: "py-3 px-6";
+            readonly spacious: "py-4 px-8";
+        };
+        /** List item density */
+        readonly listItem: {
+            readonly compact: "py-1 px-2";
+            readonly default: "py-2 px-3";
+            readonly comfortable: "py-3 px-4";
+            readonly spacious: "py-4 px-6";
+        };
+        /** Card density */
+        readonly card: {
+            readonly compact: "p-2";
+            readonly default: "p-4";
+            readonly comfortable: "p-6";
+            readonly spacious: "p-8";
+        };
+        /** Menu item density */
+        readonly menu: {
+            readonly compact: "px-2 py-1 text-xs";
+            readonly default: "px-3 py-2 text-sm";
+            readonly comfortable: "px-4 py-3 text-base";
+            readonly spacious: "px-6 py-4 text-lg";
+        };
+        /** Gap/spacing density */
+        readonly gap: {
+            readonly compact: "gap-1";
+            readonly default: "gap-2";
+            readonly comfortable: "gap-4";
+            readonly spacious: "gap-6";
+        };
+        /** Icon size density */
+        readonly icon: {
+            readonly compact: "w-3 h-3";
+            readonly default: "w-4 h-4";
+            readonly comfortable: "w-5 h-5";
+            readonly spacious: "w-6 h-6";
+        };
+    };
+    buildDensityClasses: typeof buildDensityClasses;
+    LOADING_STATES: {
+        readonly idle: "idle";
+        readonly loading: "loading";
+        readonly success: "success";
+        readonly error: "error";
+    };
+    loadingStateVariants: {
+        /** Visual indicator classes */
+        readonly visual: {
+            readonly idle: "";
+            readonly loading: "opacity-70 cursor-wait";
+            readonly success: "border-success-500 bg-success-50";
+            readonly error: "border-error-500 bg-error-50";
+        };
+        /** Button loading states */
+        readonly button: {
+            readonly idle: "";
+            readonly loading: "opacity-70 cursor-wait pointer-events-none";
+            readonly success: "bg-success-500 text-white";
+            readonly error: "bg-error-500 text-white";
+        };
+        /** Input loading states */
+        readonly input: {
+            readonly idle: "";
+            readonly loading: "bg-neutral-50 cursor-wait";
+            readonly success: "border-success-500 focus:ring-success-500";
+            readonly error: "border-error-500 focus:ring-error-500";
+        };
+        /** Card loading states */
+        readonly card: {
+            readonly idle: "";
+            readonly loading: "animate-pulse";
+            readonly success: "ring-2 ring-success-500";
+            readonly error: "ring-2 ring-error-500";
+        };
+        /** Form loading states */
+        readonly form: {
+            readonly idle: "";
+            readonly loading: "pointer-events-none opacity-60";
+            readonly success: "";
+            readonly error: "";
+        };
+    };
+    buildLoadingStateClasses: typeof buildLoadingStateClasses;
+    RESPONSIVE_BREAKPOINTS: {
+        readonly sm: "sm";
+        readonly md: "md";
+        readonly lg: "lg";
+        readonly xl: "xl";
+        readonly '2xl': "2xl";
+    };
+    BREAKPOINT_VALUES: Record<FactorResponsiveBreakpoint, number>;
+    responsiveVisibility: {
+        /** Hide at breakpoint and above */
+        readonly hideUp: {
+            readonly sm: "sm:hidden";
+            readonly md: "md:hidden";
+            readonly lg: "lg:hidden";
+            readonly xl: "xl:hidden";
+            readonly '2xl': "2xl:hidden";
+        };
+        /** Show at breakpoint and above */
+        readonly showUp: {
+            readonly sm: "hidden sm:block";
+            readonly md: "hidden md:block";
+            readonly lg: "hidden lg:block";
+            readonly xl: "hidden xl:block";
+            readonly '2xl': "hidden 2xl:block";
+        };
+        /** Hide below breakpoint */
+        readonly hideDown: {
+            readonly sm: "max-sm:hidden";
+            readonly md: "max-md:hidden";
+            readonly lg: "max-lg:hidden";
+            readonly xl: "max-xl:hidden";
+            readonly '2xl': "max-2xl:hidden";
+        };
+    };
+    applyResponsivePrefix: typeof applyResponsivePrefix;
+    buildResponsiveClasses: typeof buildResponsiveClasses;
+    THEMES: {
+        readonly light: "light";
+        readonly dark: "dark";
+        readonly system: "system";
+    };
+    themeVariants: {
+        /** Background colors */
+        readonly background: {
+            readonly light: "bg-white";
+            readonly dark: "dark:bg-neutral-900";
+            readonly system: "bg-white dark:bg-neutral-900";
+        };
+        /** Primary text colors */
+        readonly textPrimary: {
+            readonly light: "text-neutral-900";
+            readonly dark: "dark:text-white";
+            readonly system: "text-neutral-900 dark:text-white";
+        };
+        /** Secondary text colors */
+        readonly textSecondary: {
+            readonly light: "text-neutral-600";
+            readonly dark: "dark:text-neutral-400";
+            readonly system: "text-neutral-600 dark:text-neutral-400";
+        };
+        /** Border colors */
+        readonly border: {
+            readonly light: "border-neutral-200";
+            readonly dark: "dark:border-neutral-700";
+            readonly system: "border-neutral-200 dark:border-neutral-700";
+        };
+        /** Surface/card backgrounds */
+        readonly surface: {
+            readonly light: "bg-neutral-50";
+            readonly dark: "dark:bg-neutral-800";
+            readonly system: "bg-neutral-50 dark:bg-neutral-800";
+        };
+        /** Hover backgrounds */
+        readonly hoverBg: {
+            readonly light: "hover:bg-neutral-100";
+            readonly dark: "dark:hover:bg-neutral-700";
+            readonly system: "hover:bg-neutral-100 dark:hover:bg-neutral-700";
+        };
+    };
+    buildThemeClasses: typeof buildThemeClasses;
+    getThemeClasses: typeof getThemeClasses;
+    applyFactors12to16: typeof applyFactors12to16;
+};
+export default Factors12to16;
+//# sourceMappingURL=factors-12-16.d.ts.map