@nikkory/vibe-engine 4.0.0

package/dist/styling/factors-1-6.d.ts

@@ -0,0 +1,674 @@
+/**
+ * 16-Factor Variant System - Factors 1-6
+ *
+ * Factor 1: Color - Color scheme options
+ * Factor 2: Size - Component size options
+ * Factor 3: Variant - Visual style variants
+ * Factor 4: Shape - Border radius and shape options
+ * Factor 5: Position - Layout position options
+ * Factor 6: IconPosition - Icon placement options
+ *
+ * @packageDocumentation
+ * @module generator/factors-1-6
+ * @since 2.0.0
+ *
+ * Powered by Nikkory
+ */
+/**
+ * Color scheme options for components.
+ * Maps to semantic color tokens in design systems.
+ */
+export declare const COLORS: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly accent: "accent";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+    readonly info: "info";
+    readonly neutral: "neutral";
+};
+export type Color = keyof typeof COLORS;
+/**
+ * Color-specific Tailwind class prefixes.
+ * These are used with shade values (e.g., bg-primary-500).
+ */
+export declare const colorVariants: {
+    readonly primary: {
+        readonly bg: "bg-primary";
+        readonly text: "text-primary";
+        readonly border: "border-primary";
+        readonly ring: "ring-primary";
+    };
+    readonly secondary: {
+        readonly bg: "bg-secondary";
+        readonly text: "text-secondary";
+        readonly border: "border-secondary";
+        readonly ring: "ring-secondary";
+    };
+    readonly accent: {
+        readonly bg: "bg-accent";
+        readonly text: "text-accent";
+        readonly border: "border-accent";
+        readonly ring: "ring-accent";
+    };
+    readonly success: {
+        readonly bg: "bg-success";
+        readonly text: "text-success";
+        readonly border: "border-success";
+        readonly ring: "ring-success";
+    };
+    readonly warning: {
+        readonly bg: "bg-warning";
+        readonly text: "text-warning";
+        readonly border: "border-warning";
+        readonly ring: "ring-warning";
+    };
+    readonly error: {
+        readonly bg: "bg-error";
+        readonly text: "text-error";
+        readonly border: "border-error";
+        readonly ring: "ring-error";
+    };
+    readonly info: {
+        readonly bg: "bg-info";
+        readonly text: "text-info";
+        readonly border: "border-info";
+        readonly ring: "ring-info";
+    };
+    readonly neutral: {
+        readonly bg: "bg-neutral";
+        readonly text: "text-neutral";
+        readonly border: "border-neutral";
+        readonly ring: "ring-neutral";
+    };
+};
+/**
+ * Build color classes for a given color and shade.
+ *
+ * @param color - Color scheme
+ * @param shade - Color shade (50-900)
+ * @param property - CSS property (bg, text, border, ring)
+ * @returns Tailwind class string
+ */
+export declare function buildColorClass(color: Color, shade: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, property: 'bg' | 'text' | 'border' | 'ring'): string;
+/**
+ * Component size options.
+ */
+export declare const SIZES: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly '2xl': "2xl";
+    readonly full: "full";
+};
+export type Size = keyof typeof SIZES;
+/**
+ * Size-specific Tailwind classes for common properties.
+ */
+export declare const sizeVariants: {
+    readonly xs: {
+        readonly height: "h-6";
+        readonly padding: "px-2 py-0.5";
+        readonly text: "text-xs";
+        readonly gap: "gap-1";
+        readonly icon: "w-3 h-3";
+    };
+    readonly sm: {
+        readonly height: "h-8";
+        readonly padding: "px-3 py-1";
+        readonly text: "text-sm";
+        readonly gap: "gap-1.5";
+        readonly icon: "w-4 h-4";
+    };
+    readonly md: {
+        readonly height: "h-10";
+        readonly padding: "px-4 py-2";
+        readonly text: "text-sm";
+        readonly gap: "gap-2";
+        readonly icon: "w-5 h-5";
+    };
+    readonly lg: {
+        readonly height: "h-11";
+        readonly padding: "px-5 py-2.5";
+        readonly text: "text-base";
+        readonly gap: "gap-2.5";
+        readonly icon: "w-5 h-5";
+    };
+    readonly xl: {
+        readonly height: "h-12";
+        readonly padding: "px-6 py-3";
+        readonly text: "text-base";
+        readonly gap: "gap-3";
+        readonly icon: "w-6 h-6";
+    };
+    readonly '2xl': {
+        readonly height: "h-14";
+        readonly padding: "px-8 py-4";
+        readonly text: "text-lg";
+        readonly gap: "gap-4";
+        readonly icon: "w-7 h-7";
+    };
+    readonly full: {
+        readonly height: "h-full";
+        readonly padding: "p-0";
+        readonly text: "text-base";
+        readonly gap: "gap-0";
+        readonly icon: "w-full h-full";
+    };
+};
+/**
+ * Build size classes for a component.
+ *
+ * @param size - Size option
+ * @param includeHeight - Whether to include height class
+ * @returns Combined size classes
+ */
+export declare function buildSizeClasses(size: Size, includeHeight?: boolean): string;
+/**
+ * Visual style variants.
+ */
+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;
+/**
+ * Variant-specific Tailwind classes.
+ * These define the visual style without color.
+ */
+export declare const variantClasses: {
+    readonly solid: {
+        readonly base: "border-transparent";
+        readonly interactive: "hover:brightness-95 active:brightness-90";
+    };
+    readonly outline: {
+        readonly base: "bg-transparent border-2";
+        readonly interactive: "hover:bg-opacity-10 active:bg-opacity-20";
+    };
+    readonly ghost: {
+        readonly base: "bg-transparent border-transparent";
+        readonly interactive: "hover:bg-opacity-10 active:bg-opacity-20";
+    };
+    readonly soft: {
+        readonly base: "border-transparent";
+        readonly interactive: "hover:brightness-95 active:brightness-90";
+    };
+    readonly link: {
+        readonly base: "bg-transparent border-transparent underline-offset-4";
+        readonly interactive: "hover:underline";
+    };
+};
+/**
+ * Build variant classes for a component.
+ *
+ * @param variant - Variant option
+ * @param includeInteractive - Whether to include hover/active states
+ * @returns Combined variant classes
+ */
+export declare function buildVariantClasses(variant: Variant, includeInteractive?: boolean): string;
+/**
+ * Shape/border radius options.
+ */
+export declare const SHAPES: {
+    readonly none: "none";
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly full: "full";
+    readonly pill: "pill";
+    readonly square: "square";
+    readonly circle: "circle";
+};
+export type Shape = keyof typeof SHAPES;
+/**
+ * Shape-specific Tailwind classes.
+ */
+export declare const shapeVariants: {
+    readonly none: "rounded-none";
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly full: "rounded-full";
+    readonly pill: "rounded-full";
+    readonly square: "rounded-none aspect-square";
+    readonly circle: "rounded-full aspect-square";
+};
+/**
+ * Get shape class for a given shape option.
+ *
+ * @param shape - Shape option
+ * @returns Tailwind class string
+ */
+export declare function getShapeClass(shape: Shape): string;
+/**
+ * Layout position options.
+ */
+export declare const POSITIONS: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly topLeft: "topLeft";
+    readonly topRight: "topRight";
+    readonly bottomLeft: "bottomLeft";
+    readonly bottomRight: "bottomRight";
+    readonly relative: "relative";
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+    readonly sticky: "sticky";
+};
+export type Position = keyof typeof POSITIONS;
+/**
+ * Position-specific Tailwind classes for absolute positioning.
+ */
+export declare const positionVariants: {
+    readonly left: "left-0";
+    readonly center: "left-1/2 -translate-x-1/2";
+    readonly right: "right-0";
+    readonly top: "top-0";
+    readonly bottom: "bottom-0";
+    readonly topLeft: "top-0 left-0";
+    readonly topRight: "top-0 right-0";
+    readonly bottomLeft: "bottom-0 left-0";
+    readonly bottomRight: "bottom-0 right-0";
+    readonly relative: "relative";
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+    readonly sticky: "sticky";
+};
+/**
+ * Position classes for flex/grid layout alignment.
+ */
+export declare const layoutPositionVariants: {
+    readonly left: "justify-start";
+    readonly center: "justify-center";
+    readonly right: "justify-end";
+    readonly top: "items-start";
+    readonly bottom: "items-end";
+    readonly topLeft: "items-start justify-start";
+    readonly topRight: "items-start justify-end";
+    readonly bottomLeft: "items-end justify-start";
+    readonly bottomRight: "items-end justify-end";
+    readonly relative: "relative";
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+    readonly sticky: "sticky";
+};
+/**
+ * Get position class for a given position option.
+ *
+ * @param position - Position option
+ * @param absolute - Whether to use absolute positioning classes
+ * @returns Tailwind class string
+ */
+export declare function getPositionClass(position: Position, absolute?: boolean): string;
+/**
+ * Icon placement options.
+ */
+export declare const ICON_POSITIONS: {
+    readonly left: "left";
+    readonly right: "right";
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly only: "only";
+    readonly start: "start";
+    readonly end: "end";
+};
+export type IconPosition = keyof typeof ICON_POSITIONS;
+/**
+ * Icon position-specific flex classes.
+ */
+export declare const iconPositionVariants: {
+    readonly left: {
+        readonly container: "flex-row";
+        readonly iconOrder: "order-first";
+        readonly textOrder: "order-last";
+    };
+    readonly right: {
+        readonly container: "flex-row";
+        readonly iconOrder: "order-last";
+        readonly textOrder: "order-first";
+    };
+    readonly top: {
+        readonly container: "flex-col";
+        readonly iconOrder: "order-first";
+        readonly textOrder: "order-last";
+    };
+    readonly bottom: {
+        readonly container: "flex-col";
+        readonly iconOrder: "order-last";
+        readonly textOrder: "order-first";
+    };
+    readonly only: {
+        readonly container: "flex-row";
+        readonly iconOrder: "";
+        readonly textOrder: "sr-only";
+    };
+    readonly start: {
+        readonly container: "flex-row";
+        readonly iconOrder: "order-first";
+        readonly textOrder: "order-last";
+    };
+    readonly end: {
+        readonly container: "flex-row";
+        readonly iconOrder: "order-last";
+        readonly textOrder: "order-first";
+    };
+};
+/**
+ * Build icon position classes.
+ *
+ * @param position - Icon position option
+ * @returns Object with container, icon, and text classes
+ */
+export declare function buildIconPositionClasses(position: IconPosition): {
+    container: string;
+    iconClass: string;
+    textClass: string;
+};
+/**
+ * Factor 1-6 configuration.
+ */
+export interface Factors1to6Config {
+    /** Factor 1: Color scheme */
+    color?: Color;
+    /** Factor 2: Size */
+    size?: Size;
+    /** Factor 3: Variant */
+    variant?: Variant;
+    /** Factor 4: Shape */
+    shape?: Shape;
+    /** Factor 5: Position */
+    position?: Position;
+    /** Factor 6: Icon position */
+    iconPosition?: IconPosition;
+}
+/**
+ * Apply all Factor 1-6 configurations to generate classes.
+ *
+ * @param config - Factor configuration
+ * @returns Combined class string
+ */
+export declare function applyFactors1to6(config: Factors1to6Config): string;
+export declare const Factors1to6: {
+    COLORS: {
+        readonly primary: "primary";
+        readonly secondary: "secondary";
+        readonly accent: "accent";
+        readonly success: "success";
+        readonly warning: "warning";
+        readonly error: "error";
+        readonly info: "info";
+        readonly neutral: "neutral";
+    };
+    colorVariants: {
+        readonly primary: {
+            readonly bg: "bg-primary";
+            readonly text: "text-primary";
+            readonly border: "border-primary";
+            readonly ring: "ring-primary";
+        };
+        readonly secondary: {
+            readonly bg: "bg-secondary";
+            readonly text: "text-secondary";
+            readonly border: "border-secondary";
+            readonly ring: "ring-secondary";
+        };
+        readonly accent: {
+            readonly bg: "bg-accent";
+            readonly text: "text-accent";
+            readonly border: "border-accent";
+            readonly ring: "ring-accent";
+        };
+        readonly success: {
+            readonly bg: "bg-success";
+            readonly text: "text-success";
+            readonly border: "border-success";
+            readonly ring: "ring-success";
+        };
+        readonly warning: {
+            readonly bg: "bg-warning";
+            readonly text: "text-warning";
+            readonly border: "border-warning";
+            readonly ring: "ring-warning";
+        };
+        readonly error: {
+            readonly bg: "bg-error";
+            readonly text: "text-error";
+            readonly border: "border-error";
+            readonly ring: "ring-error";
+        };
+        readonly info: {
+            readonly bg: "bg-info";
+            readonly text: "text-info";
+            readonly border: "border-info";
+            readonly ring: "ring-info";
+        };
+        readonly neutral: {
+            readonly bg: "bg-neutral";
+            readonly text: "text-neutral";
+            readonly border: "border-neutral";
+            readonly ring: "ring-neutral";
+        };
+    };
+    buildColorClass: typeof buildColorClass;
+    SIZES: {
+        readonly xs: "xs";
+        readonly sm: "sm";
+        readonly md: "md";
+        readonly lg: "lg";
+        readonly xl: "xl";
+        readonly '2xl': "2xl";
+        readonly full: "full";
+    };
+    sizeVariants: {
+        readonly xs: {
+            readonly height: "h-6";
+            readonly padding: "px-2 py-0.5";
+            readonly text: "text-xs";
+            readonly gap: "gap-1";
+            readonly icon: "w-3 h-3";
+        };
+        readonly sm: {
+            readonly height: "h-8";
+            readonly padding: "px-3 py-1";
+            readonly text: "text-sm";
+            readonly gap: "gap-1.5";
+            readonly icon: "w-4 h-4";
+        };
+        readonly md: {
+            readonly height: "h-10";
+            readonly padding: "px-4 py-2";
+            readonly text: "text-sm";
+            readonly gap: "gap-2";
+            readonly icon: "w-5 h-5";
+        };
+        readonly lg: {
+            readonly height: "h-11";
+            readonly padding: "px-5 py-2.5";
+            readonly text: "text-base";
+            readonly gap: "gap-2.5";
+            readonly icon: "w-5 h-5";
+        };
+        readonly xl: {
+            readonly height: "h-12";
+            readonly padding: "px-6 py-3";
+            readonly text: "text-base";
+            readonly gap: "gap-3";
+            readonly icon: "w-6 h-6";
+        };
+        readonly '2xl': {
+            readonly height: "h-14";
+            readonly padding: "px-8 py-4";
+            readonly text: "text-lg";
+            readonly gap: "gap-4";
+            readonly icon: "w-7 h-7";
+        };
+        readonly full: {
+            readonly height: "h-full";
+            readonly padding: "p-0";
+            readonly text: "text-base";
+            readonly gap: "gap-0";
+            readonly icon: "w-full h-full";
+        };
+    };
+    buildSizeClasses: typeof buildSizeClasses;
+    VARIANTS: {
+        readonly solid: "solid";
+        readonly outline: "outline";
+        readonly ghost: "ghost";
+        readonly soft: "soft";
+        readonly link: "link";
+    };
+    variantClasses: {
+        readonly solid: {
+            readonly base: "border-transparent";
+            readonly interactive: "hover:brightness-95 active:brightness-90";
+        };
+        readonly outline: {
+            readonly base: "bg-transparent border-2";
+            readonly interactive: "hover:bg-opacity-10 active:bg-opacity-20";
+        };
+        readonly ghost: {
+            readonly base: "bg-transparent border-transparent";
+            readonly interactive: "hover:bg-opacity-10 active:bg-opacity-20";
+        };
+        readonly soft: {
+            readonly base: "border-transparent";
+            readonly interactive: "hover:brightness-95 active:brightness-90";
+        };
+        readonly link: {
+            readonly base: "bg-transparent border-transparent underline-offset-4";
+            readonly interactive: "hover:underline";
+        };
+    };
+    buildVariantClasses: typeof buildVariantClasses;
+    SHAPES: {
+        readonly none: "none";
+        readonly sm: "sm";
+        readonly md: "md";
+        readonly lg: "lg";
+        readonly xl: "xl";
+        readonly full: "full";
+        readonly pill: "pill";
+        readonly square: "square";
+        readonly circle: "circle";
+    };
+    shapeVariants: {
+        readonly none: "rounded-none";
+        readonly sm: "rounded-sm";
+        readonly md: "rounded-md";
+        readonly lg: "rounded-lg";
+        readonly xl: "rounded-xl";
+        readonly full: "rounded-full";
+        readonly pill: "rounded-full";
+        readonly square: "rounded-none aspect-square";
+        readonly circle: "rounded-full aspect-square";
+    };
+    getShapeClass: typeof getShapeClass;
+    POSITIONS: {
+        readonly left: "left";
+        readonly center: "center";
+        readonly right: "right";
+        readonly top: "top";
+        readonly bottom: "bottom";
+        readonly topLeft: "topLeft";
+        readonly topRight: "topRight";
+        readonly bottomLeft: "bottomLeft";
+        readonly bottomRight: "bottomRight";
+        readonly relative: "relative";
+        readonly absolute: "absolute";
+        readonly fixed: "fixed";
+        readonly sticky: "sticky";
+    };
+    positionVariants: {
+        readonly left: "left-0";
+        readonly center: "left-1/2 -translate-x-1/2";
+        readonly right: "right-0";
+        readonly top: "top-0";
+        readonly bottom: "bottom-0";
+        readonly topLeft: "top-0 left-0";
+        readonly topRight: "top-0 right-0";
+        readonly bottomLeft: "bottom-0 left-0";
+        readonly bottomRight: "bottom-0 right-0";
+        readonly relative: "relative";
+        readonly absolute: "absolute";
+        readonly fixed: "fixed";
+        readonly sticky: "sticky";
+    };
+    layoutPositionVariants: {
+        readonly left: "justify-start";
+        readonly center: "justify-center";
+        readonly right: "justify-end";
+        readonly top: "items-start";
+        readonly bottom: "items-end";
+        readonly topLeft: "items-start justify-start";
+        readonly topRight: "items-start justify-end";
+        readonly bottomLeft: "items-end justify-start";
+        readonly bottomRight: "items-end justify-end";
+        readonly relative: "relative";
+        readonly absolute: "absolute";
+        readonly fixed: "fixed";
+        readonly sticky: "sticky";
+    };
+    getPositionClass: typeof getPositionClass;
+    ICON_POSITIONS: {
+        readonly left: "left";
+        readonly right: "right";
+        readonly top: "top";
+        readonly bottom: "bottom";
+        readonly only: "only";
+        readonly start: "start";
+        readonly end: "end";
+    };
+    iconPositionVariants: {
+        readonly left: {
+            readonly container: "flex-row";
+            readonly iconOrder: "order-first";
+            readonly textOrder: "order-last";
+        };
+        readonly right: {
+            readonly container: "flex-row";
+            readonly iconOrder: "order-last";
+            readonly textOrder: "order-first";
+        };
+        readonly top: {
+            readonly container: "flex-col";
+            readonly iconOrder: "order-first";
+            readonly textOrder: "order-last";
+        };
+        readonly bottom: {
+            readonly container: "flex-col";
+            readonly iconOrder: "order-last";
+            readonly textOrder: "order-first";
+        };
+        readonly only: {
+            readonly container: "flex-row";
+            readonly iconOrder: "";
+            readonly textOrder: "sr-only";
+        };
+        readonly start: {
+            readonly container: "flex-row";
+            readonly iconOrder: "order-first";
+            readonly textOrder: "order-last";
+        };
+        readonly end: {
+            readonly container: "flex-row";
+            readonly iconOrder: "order-last";
+            readonly textOrder: "order-first";
+        };
+    };
+    buildIconPositionClasses: typeof buildIconPositionClasses;
+    applyFactors1to6: typeof applyFactors1to6;
+};
+export default Factors1to6;
+//# sourceMappingURL=factors-1-6.d.ts.map