responsive-class-variants 1.0.1 → 1.1.0

package/README.md

@@ -1,6 +1,14 @@
 # Responsive Class Variants
 
-rcv helps you create responsive class variants
+rcv helps you create responsive class variants. It handles the logic of generating the classes and prefixes them with the breakpoint name. You will still need to make sure, that the CSS is available for the breakpoints you use.
+
+## Features
+
+- Handles the logic of generating the classes and prefixes them with the breakpoint name.
+- You just need to provide the base classes, the variants and optionally compound variants.
+- **Slots support**: Create multiple class-generating functions for different parts of a component.
+- You can use the default breakpoints (sm, md, lg, xl) or provide your own.
+- You can pass an optional onComplete callback to the createRcv function. This callback will be called with the generated classes. Helpful if you want to pass your classes to a library like twMerge.
 
 ## Installation
 
@@ -10,6 +18,19 @@ pnpm add responsive-class-variants
 
 ## Usage
 
+rcv is a function that takes a config object and returns a function that takes a props object and returns a string of classes. The props object is an object with the keys of the variants and the values are the values of the variants.
+
+The config object has the following properties:
+
+- base: The base classes that are always applied.
+- variants: An object with the keys of the variants and the values are the values of the variants.
+- compoundVariants: An array of compound variants that apply additional classes when multiple variants have specific values.
+- onComplete: An optional callback function that receives the generated classes and returns the final classes.
+
+rcv works very well with tailwindcss but it can be used with any CSS solution.
+
+### Basic Usage (Single Component):
+
 ```ts
 const getButtonVariants = rcv({
   base: "px-4 py-2 rounded",
@@ -19,21 +40,236 @@ const getButtonVariants = rcv({
        secondary: "bg-gray-200 text-gray-800"
      },
      size: {
-       sm: "text-sm",
-       lg: "text-lg"
+       small: "text-sm",
+       large: "text-lg"
      },
      disabled: {
        true: "opacity-50 cursor-not-allowed"
+     },
+     error: {
+       true: "bg-red-500 text-white"
+     }
+   },
+   compoundVariants: [
+     {
+       disabled: true,
+       error: true,
+       className: "opacity-50 cursor-not-allowed"
      }
-   }
+   ]
  });
 
  // Usage:
- getButtonVariants({ intent: "primary", size: "lg", disabled: true })
+ getButtonVariants({ intent: "primary", size: "large", disabled: true })
  // Or with responsive values:
  getButtonVariants({ intent: { initial: "primary", md: "secondary" } })
+```
+
+### Slots (Multi-Part Components):
+
+When you need to style multiple parts of a component, you can use slots. This is perfect for complex components like cards, alerts, or modals.
+
+#### Simple Slots
+
+```ts
+const getCardVariants = rcv({
+  slots: {
+    base: "rounded-xl p-8 bg-white dark:bg-gray-900",
+    title: "text-xl font-bold text-gray-900 dark:text-white",
+    content: "text-gray-700 dark:text-gray-300"
+  }
+});
+
+// Usage - destructure the slot functions
+const { base, title, content } = getCardVariants;
+
+// Apply to your JSX - no arguments needed for simple slots!
+<div className={base()}>
+  <h2 className={title()}>Card Title</h2>
+  <p className={content()}>Card content goes here</p>
+</div>
+```
+
+#### Slots with Variants
+
+Variants can target specific slots by using objects instead of strings:
+
+```ts
+const getCardVariants = rcv({
+  slots: {
+    base: "rounded-xl p-8 bg-white dark:bg-gray-900",
+    title: "text-xl font-bold text-gray-900 dark:text-white",
+    content: "text-gray-700 dark:text-gray-300"
+  },
+  variants: {
+    shadow: {
+      none: {},
+      sm: { base: "shadow-sm" },
+      md: { base: "shadow-md" },
+      lg: { base: "shadow-lg" }
+    },
+    size: {
+      sm: { 
+        title: "text-lg",
+        content: "text-sm"
+      },
+      lg: { 
+        title: "text-2xl",
+        content: "text-lg"
+      }
+    }
+  }
+});
+
+const { base, title, content } = getCardVariants;
+
+// Usage with variants
+<div className={base({ shadow: "md", size: "lg" })}>
+  <h2 className={title({ shadow: "md", size: "lg" })}>Large Card Title</h2>
+  <p className={content({ shadow: "md", size: "lg" })}>Larger content text</p>
+</div>
+```
+
+#### Slots with Compound Variants
+
+Compound variants can also target specific slots using the `class` property:
+
+```ts
+const getAlertVariants = rcv({
+  slots: {
+    root: "rounded py-3 px-5 mb-4",
+    title: "font-bold mb-1",
+    message: "text-sm"
+  },
+  variants: {
+    variant: {
+      outlined: { root: "border" },
+      filled: {}
+    },
+    severity: {
+      error: {},
+      success: {},
+      warning: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "outlined",
+      severity: "error",
+      class: {
+        root: "border-red-700 dark:border-red-500",
+        title: "text-red-700 dark:text-red-500",
+        message: "text-red-600 dark:text-red-500"
+      }
+    },
+    {
+      variant: "filled",
+      severity: "success",
+      class: {
+        root: "bg-green-100 dark:bg-green-800",
+        title: "text-green-900 dark:text-green-50",
+        message: "text-green-700 dark:text-green-200"
+      }
+    }
+  ]
+});
+
+const { root, title, message } = getAlertVariants;
+
+// Usage
+<div className={root({ variant: "outlined", severity: "error" })}>
+  <h3 className={title({ variant: "outlined", severity: "error" })}>Error!</h3>
+  <p className={message({ variant: "outlined", severity: "error" })}>Something went wrong</p>
+</div>
+```
+
+#### Slots with Responsive Values
 
- ```
+Slots work seamlessly with responsive values:
+
+```ts
+const getCardVariants = rcv({
+  slots: {
+    base: "rounded-xl p-4 bg-white",
+    title: "font-bold text-gray-900"
+  },
+  variants: {
+    size: {
+      sm: { 
+        base: "p-2",
+        title: "text-sm"
+      },
+      lg: { 
+        base: "p-8",
+        title: "text-2xl"
+      }
+    }
+  }
+});
+
+const { base, title } = getCardVariants;
+
+// Responsive usage
+<div className={base({ size: { initial: "sm", md: "lg" } })}>
+  <h2 className={title({ size: { initial: "sm", md: "lg" } })}>Responsive Card</h2>
+</div>
+```
+
+### With css classes (like BEM or any other naming convention):
+
+```ts
+const getButtonVariants = rcv({
+  base: "btn",
+  variants: {
+    intent: {
+      primary: "btn--primary",
+      secondary: "btn--secondary"
+    },
+    size: {
+      small: "btn--sm",
+      large: "btn--lg"
+    },
+    disabled: {
+      true: "btn--disabled"
+    },
+    error: {
+      true: "btn--error"
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      error: true,
+      className: "btn--disabled--error"
+    }
+  ]
+});
+```
+
+Because of the tailwind JIT compiler, you need to make sure, that all possible classes are available with your component. Let's say you have a button component and you want to use the `size` variant responsively. You need to make sure, that the `small` and `large` classes are available with your component. You can e.g. define a `SIZES` object to define the classes for each size and breakpoints. This example assumes you have the default breakpoints (sm, md, lg, xl).
+
+```ts
+const SIZES = {
+ sm: {
+   sm: "sm:text-sm",
+   lg: "sm:text-lg"
+ },
+ md: {
+   sm: "md:text-sm",
+   lg: "md:text-lg"
+ },
+ lg: {
+   sm: "lg:text-sm",
+   lg: "lg:text-lg"
+ },
+ xl: {
+   sm: "xl:text-sm",
+   lg: "xl:text-lg"
+ }
+}
+```
+
+The structure doesn't really matter, the classes just need to be in the compiled javascript to be picked up by the JIT compiler.
 
 ## Custom breakpoints (via createRcv)
 
@@ -52,12 +288,55 @@ const getButtonVariants = rcv({
 
 // Usage with custom breakpoints:
 getButtonVariants({ intent: { initial: "primary", mobile: "secondary", desktop: "primary" } })
+
+// Works with slots too:
+const getCardVariants = rcv({
+  slots: {
+    base: "rounded-xl p-4 bg-white",
+    title: "font-bold text-gray-900"
+  },
+  variants: {
+    size: {
+      sm: { base: "p-2", title: "text-sm" },
+      lg: { base: "p-8", title: "text-2xl" }
+    }
+  }
+});
 ```
 
 ## onComplete callback (via createRcv)
 
-You can pass an optional onComplete callback to the createRcv function. This callback will be called with the generated classes. Helpful if you want to pass your classes to a library like tailwindMerge.
+You can pass an optional onComplete callback to the createRcv function. This callback will be called with the generated classes. Helpful if you want to pass your classes to a library like tailwind Merge.
 
 ```ts
 const rcv = createRcv(['mobile', 'tablet', 'desktop'], (classes) => twMerge(classes));
 ```
+
+## Typescript helpers
+
+rcv provides a helper type to make it easier to type your component props.
+
+If you use the default breakpoints (sm, md, lg, xl), you can use the `ResponsiveValue` type to make existing props responsive.
+
+```ts
+type ButtonProps = {
+  intent: "primary" | "secondary";
+  size: ResponsiveValue<"sm" | "lg">;
+  disabled: boolean;
+  error: boolean;
+};
+```
+
+If you use custom breakpoints you need to pass the breakpoints to the `ResponsiveValue` type.
+
+```ts
+import { createRcv, type ResponsiveValue as RcvResponsiveValue } from "responsive-class-variants";
+
+const breakpoints = ["tablet", "desktop", "wide"] as const;
+
+export const customRcv = createRcv(breakpoints);
+
+type Breakpoints = (typeof breakpoints)[number];
+
+export type ResponsiveValue<T> = RcvResponsiveValue<T, Breakpoints>;
+```

package/dist/index.d.ts

@@ -42,63 +42,36 @@ export declare const mapResponsiveValue: <V, T, B extends string = DefaultBreakp
 /**
  * Start of rcv and types
  */
-type VariantValue = Record<string, string>;
+type VariantValue = Record<string, string | Record<string, string>>;
 type VariantConfig = Record<string, VariantValue>;
 type StringBoolean = "true" | "false";
-type BooleanVariant = Partial<Record<StringBoolean, string>>;
+type BooleanVariant = Partial<Record<StringBoolean, string | Record<string, string>>>;
 type VariantPropValue<T, B extends string> = T extends BooleanVariant ? ResponsiveValue<boolean, B> | undefined : T extends Record<string, unknown> ? ResponsiveValue<keyof T, B> : never;
 type VariantProps<T extends VariantConfig, B extends string> = {
-    [K in keyof T]: VariantPropValue<T[K], B>;
+    [K in keyof T]?: VariantPropValue<T[K], B>;
 } & {
     className?: string;
 };
-type ResponsiveClassesConfig<T extends VariantConfig, B extends string> = {
+type SlotConfig = string;
+type SlotsConfig<S extends string> = Record<S, SlotConfig>;
+type CompoundVariantWithSlots<T extends VariantConfig, S extends string, B extends string> = Partial<VariantProps<T, B>> & {
+    class?: Partial<Record<S, string>>;
+    className?: string;
+};
+export declare function rcv<T extends VariantConfig, B extends string = DefaultBreakpoints>(config: {
+    slots: SlotsConfig<string>;
+    variants?: T;
+    compoundVariants?: CompoundVariantWithSlots<T, string, B>[];
+    onComplete?: (classes: string) => string;
+}): {
+    [K in keyof typeof config.slots]: (props?: VariantProps<T, B>) => string;
+};
+export declare function rcv<T extends VariantConfig, B extends string = DefaultBreakpoints>(config: {
     base: string;
     variants?: T;
     compoundVariants?: Partial<VariantProps<T, B>>[];
     onComplete?: (classes: string) => string;
-};
-/**
- * Creates a function that generates classes based on variant configurations and responsive props
- *
- * @template T - Type extending VariantConfig (Record of variant names to their possible values and corresponding classes)
- * @template B - The breakpoints type
- *
- * @param config - Configuration object for variants
- * @param config.base - Base classes that are always applied
- * @param config.variants - Object containing variant definitions where each key is a variant name
- *                         and value is either a string of class names, an object mapping variant values to class names,
- *                         or an object with true/false keys for boolean variants
- * @param config.compoundVariants - Optional array of compound variants that apply additional classes
- *                                 when multiple variants have specific values
- * @param config.onComplete - Optional callback function that receives the generated classes and returns the final classes
- *
- * @returns A function that accepts variant props and returns classes with twMerge
- *
- * @example
- * const getButtonVariants = rcv({
- *   base: "px-4 py-2 rounded",
- *   variants: {
- *     intent: {
- *       primary: "bg-blue-500 text-white",
- *       secondary: "bg-gray-200 text-gray-800"
- *     },
- *     size: {
- *       sm: "text-sm",
- *       lg: "text-lg"
- *     },
- *     disabled: {
- *       true: "opacity-50 cursor-not-allowed"
- *     }
- *   }
- * });
- *
- * // Usage:
- * getButtonVariants({ intent: "primary", size: "lg", disabled: true })
- * // Or with responsive values:
- * getButtonVariants({ intent: { initial: "primary", md: "secondary" } })
- */
-export declare const rcv: <T extends VariantConfig, B extends string = DefaultBreakpoints>({ base, variants, compoundVariants, onComplete, }: ResponsiveClassesConfig<T, B>) => ({ className, ...props }: VariantProps<T, B>) => string;
+}): (props: VariantProps<T, B>) => string;
 /**
  * Creates a custom rcv function with custom breakpoints and an optional onComplete callback
  *
@@ -123,5 +96,18 @@ export declare const rcv: <T extends VariantConfig, B extends string = DefaultBr
  * // Usage with custom breakpoints:
  * getButtonVariants({ intent: { initial: "primary", mobile: "secondary", desktop: "primary" } })
  */
-export declare const createRcv: <B extends string>(_breakpoints?: readonly B[], onComplete?: (classes: string) => string) => <T extends VariantConfig>(config: ResponsiveClassesConfig<T, B>) => ({ className, ...props }: VariantProps<T, B>) => string;
+export declare const createRcv: <B extends string>(_breakpoints?: readonly B[], onComplete?: (classes: string) => string) => {
+    <T extends VariantConfig>(config: {
+        slots: SlotsConfig<string>;
+        variants?: T;
+        compoundVariants?: CompoundVariantWithSlots<T, string, B>[];
+        onComplete?: (classes: string) => string;
+    }): { [K in keyof typeof config.slots]: (props?: VariantProps<T, B>) => string; };
+    <T extends VariantConfig>(config: {
+        base: string;
+        variants?: T;
+        compoundVariants?: Partial<VariantProps<T, B>>[];
+        onComplete?: (classes: string) => string;
+    }): (props: VariantProps<T, B>) => string;
+};
 export {};

package/dist/index.js

@@ -39,87 +39,121 @@ export const mapResponsiveValue = (value, mapper) => isSingularValue(value)
         breakpoint,
         mapper(value),
     ]));
-/**
- * Creates a function that generates classes based on variant configurations and responsive props
- *
- * @template T - Type extending VariantConfig (Record of variant names to their possible values and corresponding classes)
- * @template B - The breakpoints type
- *
- * @param config - Configuration object for variants
- * @param config.base - Base classes that are always applied
- * @param config.variants - Object containing variant definitions where each key is a variant name
- *                         and value is either a string of class names, an object mapping variant values to class names,
- *                         or an object with true/false keys for boolean variants
- * @param config.compoundVariants - Optional array of compound variants that apply additional classes
- *                                 when multiple variants have specific values
- * @param config.onComplete - Optional callback function that receives the generated classes and returns the final classes
- *
- * @returns A function that accepts variant props and returns classes with twMerge
- *
- * @example
- * const getButtonVariants = rcv({
- *   base: "px-4 py-2 rounded",
- *   variants: {
- *     intent: {
- *       primary: "bg-blue-500 text-white",
- *       secondary: "bg-gray-200 text-gray-800"
- *     },
- *     size: {
- *       sm: "text-sm",
- *       lg: "text-lg"
- *     },
- *     disabled: {
- *       true: "opacity-50 cursor-not-allowed"
- *     }
- *   }
- * });
- *
- * // Usage:
- * getButtonVariants({ intent: "primary", size: "lg", disabled: true })
- * // Or with responsive values:
- * getButtonVariants({ intent: { initial: "primary", md: "secondary" } })
- */
-export const rcv = ({ base, variants, compoundVariants, onComplete, }) => ({ className, ...props }) => {
-    const responsiveClasses = Object.entries(props)
+// Helper functions for slots
+const isSlotsConfig = (config) => {
+    return "slots" in config;
+};
+const prefixClasses = (classes, prefix) => classes
+    .split(" ")
+    .map((className) => `${prefix}:${className}`)
+    .join(" ");
+// Helper function to get variant value for a specific slot or base
+const getVariantValue = (variants, key, value, slotName) => {
+    const variant = variants?.[key];
+    const variantValue = variant?.[value];
+    // Handle string values
+    if (typeof variantValue === "string") {
+        return variantValue;
+    }
+    // Handle object values (slot-specific classes)
+    if (typeof variantValue === "object" &&
+        variantValue !== null &&
+        slotName &&
+        slotName in variantValue) {
+        const slotSpecificValue = variantValue[slotName];
+        if (typeof slotSpecificValue === "string") {
+            return slotSpecificValue;
+        }
+    }
+    return undefined;
+};
+// Helper function to process responsive values
+const processResponsiveValue = (variants, key, value, slotName) => {
+    return Object.entries(value)
+        .map(([breakpoint, breakpointValue]) => {
+        const variantValue = getVariantValue(variants, key, breakpointValue, slotName);
+        if (!variantValue)
+            return undefined;
+        // If the breakpoint is initial, return without prefix
+        if (breakpoint === "initial") {
+            return variantValue;
+        }
+        // Otherwise, return with breakpoint prefix
+        return prefixClasses(variantValue, breakpoint);
+    })
+        .filter(Boolean)
+        .join(" ");
+};
+// Helper function to process variant props into classes
+const processVariantProps = (props, variants, slotName) => {
+    return Object.entries(props)
         .map(([key, propValue]) => {
-        const variant = variants?.[key];
         const value = typeof propValue === "boolean" ? String(propValue) : propValue;
         // Handle undefined values
         if (!value)
             return undefined;
-        const variantValue = variant?.[value];
-        // Handle string values
-        if (typeof variantValue === "string") {
-            return variantValue;
+        // Handle singular values
+        if (typeof value === "string") {
+            return getVariantValue(variants, key, value, slotName);
         }
         // Handle responsive values
-        return Object.entries(value)
-            .map(([breakpoint, value]) => {
-            // If the breakpoint is initial, return the variant value without breakpoint prefix
-            if (breakpoint === "initial") {
-                return variants?.[key]?.[value];
-            }
-            // Otherwise, return the variant value with the breakpoint prefix
-            return variants?.[key]?.[value]
-                ?.split(" ")
-                .map((className) => `${breakpoint}:${className}`)
-                .join(" ");
-        })
-            .join(" ");
+        return processResponsiveValue(variants, key, value, slotName);
     })
         .filter(Boolean)
         .join(" ");
+};
+// Helper function to match compound variants
+const matchesCompoundVariant = (compound, props) => {
+    return Object.entries(compound).every(([key, value]) => props[key] === String(value) ||
+        props[key] === value);
+};
+const createSlotFunction = (slotConfig, variants, compoundVariants, onComplete, slotName) => ({ className, ...props } = {}) => {
+    const responsiveClasses = processVariantProps(props, variants, slotName);
     const compoundClasses = compoundVariants
-        ?.map(({ className, ...compound }) => {
-        if (Object.entries(compound).every(([key, value]) => props[key] === String(value) || props[key] === value)) {
-            return className;
+        ?.map(({ class: slotClasses, className: compoundClassName, ...compound }) => {
+        if (matchesCompoundVariant(compound, props)) {
+            // If compound variant has slot-specific classes, use those for this slot
+            if (slotClasses &&
+                typeof slotClasses === "object" &&
+                slotClasses[slotName]) {
+                return slotClasses[slotName];
+            }
+            // Otherwise use the general className
+            return compoundClassName;
         }
         return undefined;
     })
         .filter(Boolean);
-    const classes = clsx(base, responsiveClasses, compoundClasses, className);
+    const classes = clsx(slotConfig, responsiveClasses, compoundClasses, className);
     return onComplete ? onComplete(classes) : classes;
 };
+export function rcv(config) {
+    // Check if config is a slots config
+    if (isSlotsConfig(config)) {
+        const { slots, variants, compoundVariants, onComplete } = config;
+        const slotFunctions = {};
+        // Create slot functions for each slot
+        for (const [slotName, slotConfig] of Object.entries(slots)) {
+            slotFunctions[slotName] = createSlotFunction(slotConfig, variants, compoundVariants, onComplete, slotName);
+        }
+        return slotFunctions;
+    }
+    // If config is not a slots config, create a base function
+    const { base, variants, compoundVariants, onComplete } = config;
+    return ({ className, ...props }) => {
+        const responsiveClasses = processVariantProps(props, variants);
+        const compoundClasses = compoundVariants
+            ?.map(({ className: compoundClassName, ...compound }) => {
+            if (matchesCompoundVariant(compound, props)) {
+                return compoundClassName;
+            }
+            return undefined;
+        })
+            .filter(Boolean);
+        const classes = clsx(base, responsiveClasses, compoundClasses, className);
+        return onComplete ? onComplete(classes) : classes;
+    };
+}
 /**
  * Creates a custom rcv function with custom breakpoints and an optional onComplete callback
  *
@@ -145,6 +179,20 @@ export const rcv = ({ base, variants, compoundVariants, onComplete, }) => ({ cla
  * getButtonVariants({ intent: { initial: "primary", mobile: "secondary", desktop: "primary" } })
  */
 export const createRcv = (_breakpoints, onComplete) => {
-    return (config) => rcv({ ...config, onComplete });
+    function customRcv(config) {
+        if (isSlotsConfig(config)) {
+            return rcv({
+                ...config,
+                onComplete: onComplete || config.onComplete,
+            });
+        }
+        else {
+            return rcv({
+                ...config,
+                onComplete: onComplete || config.onComplete,
+            });
+        }
+    }
+    return customRcv;
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["import { clsx } from \"clsx\";\n\nexport type DefaultBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type Breakpoints = DefaultBreakpoints;\n\nexport type BreakpointsMap<V, B extends string = DefaultBreakpoints> = {\n\tinitial: V;\n} & Partial<{\n\t[breakpoint in B]: V;\n}>;\n\nexport type ResponsiveValue<T, B extends string = DefaultBreakpoints> =\n\t| T\n\t| BreakpointsMap<T, B>;\n\nconst isSingularValue = <A, B extends string>(\n\tvalue: ResponsiveValue<A, B>,\n): value is A => !isBreakpointsMap(value);\n\nconst isBreakpointsMap = <A, B extends string>(\n\tvalue: ResponsiveValue<A, B>,\n): value is BreakpointsMap<A, B> =>\n\ttypeof value === \"object\" && value != null && !Array.isArray(value);\n\n/**\n * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.\n *\n * @template V The type of the original value\n * @template T The type of the mapped value\n * @template B The type of breakpoints\n * @param {ResponsiveValue<V, B>} value - The original ResponsiveValue to be mapped\n * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue\n * @returns {ResponsiveValue<T, B>} A new ResponsiveValue with the mapped values\n *\n *\n * @example\n * const sizes = {\n *  initial: 'md',\n *  sm: 'lg',\n * }\n *\n * const output = mapResponsiveValue(sizes, size => {\n *\tswitch (size) {\n *\t\tcase 'initial':\n *\t\treturn 'sm';\n *\t\tcase 'sm':\n *\t\t\treturn 'md';\n *\t\t}\n *\t});\n *\n * // console.log(output)\n * {\n *\tinitial: 'sm',\n *\tsm: 'md',\n * }\n */\nexport const mapResponsiveValue = <V, T, B extends string = DefaultBreakpoints>(\n\tvalue: ResponsiveValue<V, B>,\n\tmapper: (value: V) => T,\n): ResponsiveValue<T, B> =>\n\tisSingularValue(value)\n\t\t? mapper(value)\n\t\t: (Object.fromEntries(\n\t\t\t\tObject.entries(value).map(([breakpoint, value]) => [\n\t\t\t\t\tbreakpoint,\n\t\t\t\t\tmapper(value),\n\t\t\t\t]),\n\t\t\t) as BreakpointsMap<T, B>);\n\n/**\n * Start of rcv and types\n */\n\ntype VariantValue = Record<string, string>;\ntype VariantConfig = Record<string, VariantValue>;\n\ntype StringBoolean = \"true\" | \"false\";\ntype BooleanVariant = Partial<Record<StringBoolean, string>>;\n\ntype VariantPropValue<T, B extends string> = T extends BooleanVariant\n\t? ResponsiveValue<boolean, B> | undefined\n\t: T extends Record<string, unknown>\n\t\t? ResponsiveValue<keyof T, B>\n\t\t: never;\n\ntype VariantProps<T extends VariantConfig, B extends string> = {\n\t[K in keyof T]: VariantPropValue<T[K], B>;\n} & {\n\tclassName?: string;\n};\n\ntype ResponsiveClassesConfig<T extends VariantConfig, B extends string> = {\n\tbase: string;\n\tvariants?: T;\n\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\tonComplete?: (classes: string) => string;\n};\n\n/**\n * Creates a function that generates classes based on variant configurations and responsive props\n *\n * @template T - Type extending VariantConfig (Record of variant names to their possible values and corresponding classes)\n * @template B - The breakpoints type\n *\n * @param config - Configuration object for variants\n * @param config.base - Base classes that are always applied\n * @param config.variants - Object containing variant definitions where each key is a variant name\n *                         and value is either a string of class names, an object mapping variant values to class names,\n *                         or an object with true/false keys for boolean variants\n * @param config.compoundVariants - Optional array of compound variants that apply additional classes\n *                                 when multiple variants have specific values\n * @param config.onComplete - Optional callback function that receives the generated classes and returns the final classes\n *\n * @returns A function that accepts variant props and returns classes with twMerge\n *\n * @example\n * const getButtonVariants = rcv({\n *   base: \"px-4 py-2 rounded\",\n *   variants: {\n *     intent: {\n *       primary: \"bg-blue-500 text-white\",\n *       secondary: \"bg-gray-200 text-gray-800\"\n *     },\n *     size: {\n *       sm: \"text-sm\",\n *       lg: \"text-lg\"\n *     },\n *     disabled: {\n *       true: \"opacity-50 cursor-not-allowed\"\n *     }\n *   }\n * });\n *\n * // Usage:\n * getButtonVariants({ intent: \"primary\", size: \"lg\", disabled: true })\n * // Or with responsive values:\n * getButtonVariants({ intent: { initial: \"primary\", md: \"secondary\" } })\n */\nexport const rcv =\n\t<T extends VariantConfig, B extends string = DefaultBreakpoints>({\n\t\tbase,\n\t\tvariants,\n\t\tcompoundVariants,\n\t\tonComplete,\n\t}: ResponsiveClassesConfig<T, B>) =>\n\t({ className, ...props }: VariantProps<T, B>) => {\n\t\tconst responsiveClasses = Object.entries(props)\n\t\t\t.map(([key, propValue]: [keyof T, VariantPropValue<T[keyof T], B>]) => {\n\t\t\t\tconst variant = variants?.[key];\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof propValue === \"boolean\" ? String(propValue) : propValue;\n\n\t\t\t\t// Handle undefined values\n\t\t\t\tif (!value) return undefined;\n\n\t\t\t\tconst variantValue = variant?.[value as keyof VariantValue];\n\n\t\t\t\t// Handle string values\n\t\t\t\tif (typeof variantValue === \"string\") {\n\t\t\t\t\treturn variantValue;\n\t\t\t\t}\n\n\t\t\t\t// Handle responsive values\n\t\t\t\treturn Object.entries(value as Partial<BreakpointsMap<T, B>>)\n\t\t\t\t\t.map(([breakpoint, value]) => {\n\t\t\t\t\t\t// If the breakpoint is initial, return the variant value without breakpoint prefix\n\t\t\t\t\t\tif (breakpoint === \"initial\") {\n\t\t\t\t\t\t\treturn variants?.[key]?.[value as keyof typeof variant];\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Otherwise, return the variant value with the breakpoint prefix\n\t\t\t\t\t\treturn variants?.[key]?.[value as keyof typeof variant]\n\t\t\t\t\t\t\t?.split(\" \")\n\t\t\t\t\t\t\t.map((className) => `${breakpoint}:${className}`)\n\t\t\t\t\t\t\t.join(\" \");\n\t\t\t\t\t})\n\t\t\t\t\t.join(\" \");\n\t\t\t})\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\n\t\tconst compoundClasses = compoundVariants\n\t\t\t?.map(({ className, ...compound }) => {\n\t\t\t\tif (\n\t\t\t\t\tObject.entries(compound).every(\n\t\t\t\t\t\t([key, value]) =>\n\t\t\t\t\t\t\tprops[key] === String(value) || props[key] === value,\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn className;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\tconst classes = clsx(base, responsiveClasses, compoundClasses, className);\n\t\treturn onComplete ? onComplete(classes) : classes;\n\t};\n\n/**\n * Creates a custom rcv function with custom breakpoints and an optional onComplete callback\n *\n * @template B - The custom breakpoints type\n * @param breakpoints - Optional array of custom breakpoint names\n * @param onComplete - Optional callback function that receives the generated classes and returns the final classes\n * @returns A function that creates rcv with custom breakpoints\n *\n * @example\n * const customRcv = createRcv(['mobile', 'tablet', 'desktop']);\n *\n * const getButtonVariants = customRcv({\n *   base: \"px-4 py-2 rounded\",\n *   variants: {\n *     intent: {\n *       primary: \"bg-blue-500 text-white\",\n *       secondary: \"bg-gray-200 text-gray-800\"\n *     }\n *   }\n * });\n *\n * // Usage with custom breakpoints:\n * getButtonVariants({ intent: { initial: \"primary\", mobile: \"secondary\", desktop: \"primary\" } })\n */\n\nexport const createRcv = <B extends string>(\n\t_breakpoints?: readonly B[],\n\tonComplete?: (classes: string) => string,\n) => {\n\treturn <T extends VariantConfig>(config: ResponsiveClassesConfig<T, B>) =>\n\t\trcv<T, B>({ ...config, onComplete });\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["import { clsx } from \"clsx\";\n\nexport type DefaultBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type Breakpoints = DefaultBreakpoints;\n\nexport type BreakpointsMap<V, B extends string = DefaultBreakpoints> = {\n\tinitial: V;\n} & Partial<{\n\t[breakpoint in B]: V;\n}>;\n\nexport type ResponsiveValue<T, B extends string = DefaultBreakpoints> =\n\t| T\n\t| BreakpointsMap<T, B>;\n\nconst isSingularValue = <A, B extends string>(\n\tvalue: ResponsiveValue<A, B>,\n): value is A => !isBreakpointsMap(value);\n\nconst isBreakpointsMap = <A, B extends string>(\n\tvalue: ResponsiveValue<A, B>,\n): value is BreakpointsMap<A, B> =>\n\ttypeof value === \"object\" && value != null && !Array.isArray(value);\n\n/**\n * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.\n *\n * @template V The type of the original value\n * @template T The type of the mapped value\n * @template B The type of breakpoints\n * @param {ResponsiveValue<V, B>} value - The original ResponsiveValue to be mapped\n * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue\n * @returns {ResponsiveValue<T, B>} A new ResponsiveValue with the mapped values\n *\n *\n * @example\n * const sizes = {\n *  initial: 'md',\n *  sm: 'lg',\n * }\n *\n * const output = mapResponsiveValue(sizes, size => {\n *\tswitch (size) {\n *\t\tcase 'initial':\n *\t\treturn 'sm';\n *\t\tcase 'sm':\n *\t\t\treturn 'md';\n *\t\t}\n *\t});\n *\n * // console.log(output)\n * {\n *\tinitial: 'sm',\n *\tsm: 'md',\n * }\n */\nexport const mapResponsiveValue = <V, T, B extends string = DefaultBreakpoints>(\n\tvalue: ResponsiveValue<V, B>,\n\tmapper: (value: V) => T,\n): ResponsiveValue<T, B> =>\n\tisSingularValue(value)\n\t\t? mapper(value)\n\t\t: (Object.fromEntries(\n\t\t\t\tObject.entries(value).map(([breakpoint, value]) => [\n\t\t\t\t\tbreakpoint,\n\t\t\t\t\tmapper(value),\n\t\t\t\t]),\n\t\t\t) as BreakpointsMap<T, B>);\n\n/**\n * Start of rcv and types\n */\n\ntype VariantValue = Record<string, string | Record<string, string>>;\ntype VariantConfig = Record<string, VariantValue>;\n\ntype StringBoolean = \"true\" | \"false\";\ntype BooleanVariant = Partial<\n\tRecord<StringBoolean, string | Record<string, string>>\n>;\n\ntype VariantPropValue<T, B extends string> = T extends BooleanVariant\n\t? ResponsiveValue<boolean, B> | undefined\n\t: T extends Record<string, unknown>\n\t\t? ResponsiveValue<keyof T, B>\n\t\t: never;\n\ntype VariantProps<T extends VariantConfig, B extends string> = {\n\t[K in keyof T]?: VariantPropValue<T[K], B>;\n} & {\n\tclassName?: string;\n};\n\n// Slot configuration types\ntype SlotConfig = string;\n\ntype SlotsConfig<S extends string> = Record<S, SlotConfig>;\n\ntype CompoundVariantWithSlots<\n\tT extends VariantConfig,\n\tS extends string,\n\tB extends string,\n> = Partial<VariantProps<T, B>> & {\n\tclass?: Partial<Record<S, string>>;\n\tclassName?: string;\n};\n\ntype ResponsiveClassesConfigBase<T extends VariantConfig, B extends string> = {\n\tbase: string;\n\tvariants?: T;\n\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\tonComplete?: (classes: string) => string;\n};\n\ntype ResponsiveClassesConfigSlots<T extends VariantConfig, B extends string> = {\n\tslots: SlotsConfig<string>;\n\tvariants?: T;\n\tcompoundVariants?: CompoundVariantWithSlots<T, string, B>[];\n\tonComplete?: (classes: string) => string;\n};\n\ntype ResponsiveClassesConfig<T extends VariantConfig, B extends string> =\n\t| ResponsiveClassesConfigBase<T, B>\n\t| ResponsiveClassesConfigSlots<T, B>;\n\n// Helper functions for slots\nconst isSlotsConfig = <T extends VariantConfig, B extends string>(\n\tconfig: ResponsiveClassesConfig<T, B>,\n): config is {\n\tslots: SlotsConfig<string>;\n\tvariants?: T;\n\tcompoundVariants?: CompoundVariantWithSlots<T, string, B>[];\n\tonComplete?: (classes: string) => string;\n} => {\n\treturn \"slots\" in config;\n};\n\nconst prefixClasses = (classes: string, prefix: string) =>\n\tclasses\n\t\t.split(\" \")\n\t\t.map((className) => `${prefix}:${className}`)\n\t\t.join(\" \");\n\n// Helper function to get variant value for a specific slot or base\nconst getVariantValue = <T extends VariantConfig>(\n\tvariants: T | undefined,\n\tkey: keyof T,\n\tvalue: string,\n\tslotName?: string,\n) => {\n\tconst variant = variants?.[key];\n\tconst variantValue = variant?.[value as keyof VariantValue];\n\n\t// Handle string values\n\tif (typeof variantValue === \"string\") {\n\t\treturn variantValue;\n\t}\n\n\t// Handle object values (slot-specific classes)\n\tif (\n\t\ttypeof variantValue === \"object\" &&\n\t\tvariantValue !== null &&\n\t\tslotName &&\n\t\tslotName in variantValue\n\t) {\n\t\tconst slotSpecificValue = variantValue[slotName];\n\t\tif (typeof slotSpecificValue === \"string\") {\n\t\t\treturn slotSpecificValue;\n\t\t}\n\t}\n\n\treturn undefined;\n};\n\n// Helper function to process responsive values\nconst processResponsiveValue = <T extends VariantConfig, B extends string>(\n\tvariants: T | undefined,\n\tkey: keyof T,\n\tvalue: Partial<BreakpointsMap<T, B>>,\n\tslotName?: string,\n) => {\n\treturn Object.entries(value)\n\t\t.map(([breakpoint, breakpointValue]) => {\n\t\t\tconst variantValue = getVariantValue(\n\t\t\t\tvariants,\n\t\t\t\tkey,\n\t\t\t\tbreakpointValue as string,\n\t\t\t\tslotName,\n\t\t\t);\n\n\t\t\tif (!variantValue) return undefined;\n\n\t\t\t// If the breakpoint is initial, return without prefix\n\t\t\tif (breakpoint === \"initial\") {\n\t\t\t\treturn variantValue;\n\t\t\t}\n\n\t\t\t// Otherwise, return with breakpoint prefix\n\t\t\treturn prefixClasses(variantValue, breakpoint);\n\t\t})\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n};\n\n// Helper function to process variant props into classes\nconst processVariantProps = <T extends VariantConfig, B extends string>(\n\tprops: Omit<VariantProps<T, B>, \"className\">,\n\tvariants: T | undefined,\n\tslotName?: string,\n) => {\n\treturn Object.entries(props)\n\t\t.map(([key, propValue]: [keyof T, VariantPropValue<T[keyof T], B>]) => {\n\t\t\tconst value =\n\t\t\t\ttypeof propValue === \"boolean\" ? String(propValue) : propValue;\n\n\t\t\t// Handle undefined values\n\t\t\tif (!value) return undefined;\n\n\t\t\t// Handle singular values\n\t\t\tif (typeof value === \"string\") {\n\t\t\t\treturn getVariantValue(variants, key, value, slotName);\n\t\t\t}\n\n\t\t\t// Handle responsive values\n\t\t\treturn processResponsiveValue(\n\t\t\t\tvariants,\n\t\t\t\tkey,\n\t\t\t\tvalue as Partial<BreakpointsMap<T, B>>,\n\t\t\t\tslotName,\n\t\t\t);\n\t\t})\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n};\n\n// Helper function to match compound variants\nconst matchesCompoundVariant = <T extends VariantConfig, B extends string>(\n\tcompound: Omit<CompoundVariantWithSlots<T, string, B>, \"className\" | \"class\">,\n\tprops: Omit<VariantProps<T, B>, \"className\">,\n) => {\n\treturn Object.entries(compound).every(\n\t\t([key, value]) =>\n\t\t\tprops[key as keyof typeof props] === String(value) ||\n\t\t\tprops[key as keyof typeof props] === value,\n\t);\n};\n\nconst createSlotFunction =\n\t<T extends VariantConfig, B extends string>(\n\t\tslotConfig: SlotConfig,\n\t\tvariants: T | undefined,\n\t\tcompoundVariants: CompoundVariantWithSlots<T, string, B>[] | undefined,\n\t\tonComplete: ((classes: string) => string) | undefined,\n\t\tslotName: string,\n\t) =>\n\t({ className, ...props }: VariantProps<T, B> = {} as VariantProps<T, B>) => {\n\t\tconst responsiveClasses = processVariantProps(props, variants, slotName);\n\n\t\tconst compoundClasses = compoundVariants\n\t\t\t?.map(\n\t\t\t\t({ class: slotClasses, className: compoundClassName, ...compound }) => {\n\t\t\t\t\tif (matchesCompoundVariant(compound, props)) {\n\t\t\t\t\t\t// If compound variant has slot-specific classes, use those for this slot\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tslotClasses &&\n\t\t\t\t\t\t\ttypeof slotClasses === \"object\" &&\n\t\t\t\t\t\t\tslotClasses[slotName]\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn slotClasses[slotName];\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Otherwise use the general className\n\t\t\t\t\t\treturn compoundClassName;\n\t\t\t\t\t}\n\t\t\t\t\treturn undefined;\n\t\t\t\t},\n\t\t\t)\n\t\t\t.filter(Boolean);\n\n\t\tconst classes = clsx(\n\t\t\tslotConfig,\n\t\t\tresponsiveClasses,\n\t\t\tcompoundClasses,\n\t\t\tclassName,\n\t\t);\n\t\treturn onComplete ? onComplete(classes) : classes;\n\t};\n\n// Function overloads for rcv\nexport function rcv<\n\tT extends VariantConfig,\n\tB extends string = DefaultBreakpoints,\n>(config: {\n\tslots: SlotsConfig<string>;\n\tvariants?: T;\n\tcompoundVariants?: CompoundVariantWithSlots<T, string, B>[];\n\tonComplete?: (classes: string) => string;\n}): {\n\t[K in keyof typeof config.slots]: (props?: VariantProps<T, B>) => string;\n};\n\nexport function rcv<\n\tT extends VariantConfig,\n\tB extends string = DefaultBreakpoints,\n>(config: {\n\tbase: string;\n\tvariants?: T;\n\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\tonComplete?: (classes: string) => string;\n}): (props: VariantProps<T, B>) => string;\n\nexport function rcv<\n\tT extends VariantConfig,\n\tB extends string = DefaultBreakpoints,\n>(config: ResponsiveClassesConfig<T, B>) {\n\t// Check if config is a slots config\n\tif (isSlotsConfig(config)) {\n\t\tconst { slots, variants, compoundVariants, onComplete } = config;\n\t\tconst slotFunctions: Record<string, (props: VariantProps<T, B>) => string> =\n\t\t\t{};\n\n\t\t// Create slot functions for each slot\n\t\tfor (const [slotName, slotConfig] of Object.entries(slots)) {\n\t\t\tslotFunctions[slotName] = createSlotFunction<T, B>(\n\t\t\t\tslotConfig,\n\t\t\t\tvariants,\n\t\t\t\tcompoundVariants,\n\t\t\t\tonComplete,\n\t\t\t\tslotName,\n\t\t\t);\n\t\t}\n\n\t\treturn slotFunctions as {\n\t\t\t[K in keyof typeof slots]: (props?: VariantProps<T, B>) => string;\n\t\t};\n\t}\n\n\t// If config is not a slots config, create a base function\n\tconst { base, variants, compoundVariants, onComplete } = config;\n\treturn ({ className, ...props }: VariantProps<T, B>) => {\n\t\tconst responsiveClasses = processVariantProps(props, variants);\n\n\t\tconst compoundClasses = compoundVariants\n\t\t\t?.map(({ className: compoundClassName, ...compound }) => {\n\t\t\t\tif (\n\t\t\t\t\tmatchesCompoundVariant(\n\t\t\t\t\t\tcompound as Omit<\n\t\t\t\t\t\t\tCompoundVariantWithSlots<T, string, B>,\n\t\t\t\t\t\t\t\"className\" | \"class\"\n\t\t\t\t\t\t>,\n\t\t\t\t\t\tprops,\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn compoundClassName;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\tconst classes = clsx(base, responsiveClasses, compoundClasses, className);\n\t\treturn onComplete ? onComplete(classes) : classes;\n\t};\n}\n\n/**\n * Creates a custom rcv function with custom breakpoints and an optional onComplete callback\n *\n * @template B - The custom breakpoints type\n * @param breakpoints - Optional array of custom breakpoint names\n * @param onComplete - Optional callback function that receives the generated classes and returns the final classes\n * @returns A function that creates rcv with custom breakpoints\n *\n * @example\n * const customRcv = createRcv(['mobile', 'tablet', 'desktop']);\n *\n * const getButtonVariants = customRcv({\n *   base: \"px-4 py-2 rounded\",\n *   variants: {\n *     intent: {\n *       primary: \"bg-blue-500 text-white\",\n *       secondary: \"bg-gray-200 text-gray-800\"\n *     }\n *   }\n * });\n *\n * // Usage with custom breakpoints:\n * getButtonVariants({ intent: { initial: \"primary\", mobile: \"secondary\", desktop: \"primary\" } })\n */\n\nexport const createRcv = <B extends string>(\n\t_breakpoints?: readonly B[],\n\tonComplete?: (classes: string) => string,\n) => {\n\tfunction customRcv<T extends VariantConfig>(config: {\n\t\tslots: SlotsConfig<string>;\n\t\tvariants?: T;\n\t\tcompoundVariants?: CompoundVariantWithSlots<T, string, B>[];\n\t\tonComplete?: (classes: string) => string;\n\t}): {\n\t\t[K in keyof typeof config.slots]: (props?: VariantProps<T, B>) => string;\n\t};\n\n\tfunction customRcv<T extends VariantConfig>(config: {\n\t\tbase: string;\n\t\tvariants?: T;\n\t\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\t\tonComplete?: (classes: string) => string;\n\t}): (props: VariantProps<T, B>) => string;\n\n\tfunction customRcv<T extends VariantConfig>(\n\t\tconfig: ResponsiveClassesConfig<T, B>,\n\t) {\n\t\tif (isSlotsConfig(config)) {\n\t\t\treturn rcv<T, B>({\n\t\t\t\t...config,\n\t\t\t\tonComplete: onComplete || config.onComplete,\n\t\t\t});\n\t\t} else {\n\t\t\treturn rcv<T, B>({\n\t\t\t\t...config,\n\t\t\t\tonComplete: onComplete || config.onComplete,\n\t\t\t});\n\t\t}\n\t}\n\n\treturn customRcv;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "responsive-class-variants",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "rcv helps you create responsive class variants",
 	"main": "dist/index.js",
 	"type": "module",