import { roundeClasses } from "./rounded"; import { padding2marginClasses } from "./padding2margin"; import { borderClasses } from "./border"; import { ShadowColorsClasses } from "./shadow"; type IVariantFactoryMutator, ResultType = string> = (value: InputType[keyof InputType], variantName: keyof InputType) => ResultType; export declare const VariantsFactory: { /** * Creates a new variants object by applying a mutator function to each value in the input object. * * This utility is useful for generating style or class variants in a type-safe way, such as for Tailwind or NativeWind. * You can provide a custom mutator function to transform each variant value, or omit it to return the original values. * * @typeParam InputType - The type of the input object, where each key is a variant name and each value is the variant value. * @typeParam ResultType - The type of the result values after applying the mutator (defaults to `string`). * * @param input - The input object containing variant definitions. * @param variantMutator - Optional. A function that receives each value and its key, and returns a transformed value. * If not provided, the identity function is used (returns the value as-is). * * @returns A new object with the same keys as `input`, where each value is the result of the `variantMutator`. * * @example * ```typescript * // Basic usage with default mutator (identity) * const variants = VariantsFactory.create({ primary: "bg-blue-500", secondary: "bg-gray-500" }); * // Result: { primary: "bg-blue-500", secondary: "bg-gray-500" } * * // Using a custom mutator to append a prefix * const variantsWithPrefix = VariantsFactory.create( * { small: "p-2", large: "p-6" }, * (value, key) => `tw-${value}` * ); * // Result: { small: "tw-p-2", large: "tw-p-6" } * * // Using with a type-safe input and custom result type * const input = { rounded: "rounded-full", square: "rounded-none" } as const; * const result = VariantsFactory.create( * input, * (value, key) => value.length * ); * // Result: { rounded: 12, square: 12 } * ``` * * @remarks * - This function is generic and works with any object shape. * - The mutator function receives both the value and the key for maximum flexibility. * - Useful for generating design system variants, utility classes, or mapping values. */ create: , ResultType = string>(input: InputType, variantMutator?: IVariantFactoryMutator) => Record; createRoundedVariants: (variantMutator?: IVariantFactoryMutator) => Record<"none" | "true" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "xs" | "full", ResultType>; createPadding2MarginVariants: (variantMutator?: IVariantFactoryMutator) => Record<"marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingX" | "paddingY" | "marginX" | "marginY", ResultType>; createBorderVariants: (variantMutator?: IVariantFactoryMutator) => Record<"none" | "thin" | "medium" | "thick" | "extra", ResultType>; createShadowColorsVariants: (variantMutator?: IVariantFactoryMutator) => Record; createAll: (variantMutator?: IVariantFactoryMutator<(typeof allVariantClasses)[keyof typeof allVariantClasses], ResultType>) => IVariantFactoryAll; }; declare const allVariantClasses: { padding: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; paddingX: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; paddingY: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; paddingLeft: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; paddingRight: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; paddingTop: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; paddingBottom: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; marginX: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; marginY: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; marginLeft: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; marginRight: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; marginTop: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; marginBottom: { "1": string; "2": string; "3": string; "4": string; "5": string; "6": string; "8": string; "10": string; "12": string; "16": string; "20": string; "24": string; none: string; px: string; auto: string; "5px": string; "10px": string; "15px": string; "20px": string; "25px": string; "30px": string; "35px": string; "40px": string; "45px": string; "50px": string; "55px": string; "60px": string; "65px": string; "70px": string; "75px": string; "80px": string; "85px": string; "90px": string; "95px": string; "100px": string; "105px": string; "110px": string; "115px": string; "120px": string; "125px": string; "130px": string; "135px": string; "140px": string; "145px": string; "150px": string; "155px": string; "160px": string; "165px": string; "170px": string; "175px": string; "180px": string; "185px": string; "190px": string; "195px": string; "200px": string; }; border: { none: string; thin: string; medium: string; thick: string; extra: string; }; rounded: { true: string; none: string; sm: string; xs: string; md: string; lg: string; xl: string; full: string; "2xl": string; "3xl": string; }; shadowColor: Record; }; type IVariantFactoryAll = { [key in keyof typeof allVariantClasses]: Record; }; export {};