responsive-class-variants 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# Responsive Class Variants
+
+rcv helps you create responsive class variants
+
+## Installation
+
+```bash
+pnpm add responsive-class-variants
+```
+
+## Usage
+
+```ts
+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" } })
+
+ ```
+
+## Custom breakpoints (via createRcv)
+
+```ts
+const rcv = createRcv(['mobile', 'tablet', 'desktop']);
+
+const getButtonVariants = rcv({
+  base: "px-4 py-2 rounded",
+  variants: {
+    intent: {
+      primary: "bg-blue-500 text-white",
+      secondary: "bg-gray-200 text-gray-800"
+    }
+  }
+});
+
+// Usage with custom breakpoints:
+getButtonVariants({ intent: { initial: "primary", mobile: "secondary", desktop: "primary" } })
+```
+
+## 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.
+
+```ts
+const rcv = createRcv(['mobile', 'tablet', 'desktop'], (classes) => twMerge(classes));
+```

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+export type DefaultBreakpoints = "sm" | "md" | "lg" | "xl";
+export type Breakpoints = DefaultBreakpoints;
+export type BreakpointsMap<V, B extends string = DefaultBreakpoints> = {
+    initial: V;
+} & Partial<{
+    [breakpoint in B]: V;
+}>;
+export type ResponsiveValue<T, B extends string = DefaultBreakpoints> = T | BreakpointsMap<T, B>;
+/**
+ * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.
+ *
+ * @template V The type of the original value
+ * @template T The type of the mapped value
+ * @template B The type of breakpoints
+ * @param {ResponsiveValue<V, B>} value - The original ResponsiveValue to be mapped
+ * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue
+ * @returns {ResponsiveValue<T, B>} A new ResponsiveValue with the mapped values
+ *
+ *
+ * @example
+ * const sizes = {
+ *  initial: 'md',
+ *  sm: 'lg',
+ * }
+ *
+ * const output = mapResponsiveValue(sizes, size => {
+ *	switch (size) {
+ *		case 'initial':
+ *		return 'sm';
+ *		case 'sm':
+ *			return 'md';
+ *		}
+ *	});
+ *
+ * // console.log(output)
+ * {
+ *	initial: 'sm',
+ *	sm: 'md',
+ * }
+ */
+export declare const mapResponsiveValue: <V, T, B extends string = DefaultBreakpoints>(value: ResponsiveValue<V, B>, mapper: (value: V) => T) => ResponsiveValue<T, B>;
+/**
+ * Start of rcv and types
+ */
+type VariantValue = Record<string, string>;
+type VariantConfig = Record<string, VariantValue>;
+type StringBoolean = "true" | "false";
+type BooleanVariant = Partial<Record<StringBoolean, 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>;
+} & {
+    className?: string;
+};
+type ResponsiveClassesConfig<T extends VariantConfig, B extends string> = {
+    base: string;
+    variants?: T;
+    compoundVariants?: Partial<VariantProps<T, B>>[];
+    onComplete?: (classes: string) => void;
+};
+/**
+ * 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
+ *
+ * @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 | void;
+/**
+ * Creates a custom rcv function with custom breakpoints and an optional onComplete callback
+ *
+ * @template B - The custom breakpoints type
+ * @param breakpoints - Array of custom breakpoint names
+ * @param onComplete - Optional callback function that receives the generated classes
+ * @returns A function that creates rcv with custom breakpoints
+ *
+ * @example
+ * const customRcv = createRcv(['mobile', 'tablet', 'desktop']);
+ *
+ * const getButtonVariants = customRcv({
+ *   base: "px-4 py-2 rounded",
+ *   variants: {
+ *     intent: {
+ *       primary: "bg-blue-500 text-white",
+ *       secondary: "bg-gray-200 text-gray-800"
+ *     }
+ *   }
+ * });
+ *
+ * // 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) => void) => <T extends VariantConfig>(config: ResponsiveClassesConfig<T, B>) => ({ className, ...props }: VariantProps<T, B>) => string | void;
+export {};

package/dist/index.js

@@ -0,0 +1,150 @@
+import { clsx } from "clsx";
+const isSingularValue = (value) => !isBreakpointsMap(value);
+const isBreakpointsMap = (value) => typeof value === "object" && value != null && !Array.isArray(value);
+/**
+ * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.
+ *
+ * @template V The type of the original value
+ * @template T The type of the mapped value
+ * @template B The type of breakpoints
+ * @param {ResponsiveValue<V, B>} value - The original ResponsiveValue to be mapped
+ * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue
+ * @returns {ResponsiveValue<T, B>} A new ResponsiveValue with the mapped values
+ *
+ *
+ * @example
+ * const sizes = {
+ *  initial: 'md',
+ *  sm: 'lg',
+ * }
+ *
+ * const output = mapResponsiveValue(sizes, size => {
+ *	switch (size) {
+ *		case 'initial':
+ *		return 'sm';
+ *		case 'sm':
+ *			return 'md';
+ *		}
+ *	});
+ *
+ * // console.log(output)
+ * {
+ *	initial: 'sm',
+ *	sm: 'md',
+ * }
+ */
+export const mapResponsiveValue = (value, mapper) => isSingularValue(value)
+    ? mapper(value)
+    : Object.fromEntries(Object.entries(value).map(([breakpoint, 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
+ *
+ * @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)
+        .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 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(" ");
+    })
+        .filter(Boolean)
+        .join(" ");
+    const compoundClasses = compoundVariants
+        ?.map(({ className, ...compound }) => {
+        if (Object.entries(compound).every(([key, value]) => props[key] === String(value) || props[key] === value)) {
+            return className;
+        }
+        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
+ *
+ * @template B - The custom breakpoints type
+ * @param breakpoints - Array of custom breakpoint names
+ * @param onComplete - Optional callback function that receives the generated classes
+ * @returns A function that creates rcv with custom breakpoints
+ *
+ * @example
+ * const customRcv = createRcv(['mobile', 'tablet', 'desktop']);
+ *
+ * const getButtonVariants = customRcv({
+ *   base: "px-4 py-2 rounded",
+ *   variants: {
+ *     intent: {
+ *       primary: "bg-blue-500 text-white",
+ *       secondary: "bg-gray-200 text-gray-800"
+ *     }
+ *   }
+ * });
+ *
+ * // Usage with custom breakpoints:
+ * getButtonVariants({ intent: { initial: "primary", mobile: "secondary", desktop: "primary" } })
+ */
+export const createRcv = (_breakpoints, onComplete) => {
+    return (config) => rcv({ ...config, onComplete });
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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) => void;\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\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 - Array of custom breakpoint names\n * @param onComplete - Optional callback function that receives the generated 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) => void,\n) => {\n\treturn <T extends VariantConfig>(config: ResponsiveClassesConfig<T, B>) =>\n\t\trcv<T, B>({ ...config, onComplete });\n};\n"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "responsive-class-variants",
+	"version": "1.0.0",
+	"description": "rcv helps you create responsive class variants",
+	"main": "dist/index.js",
+	"type": "module",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/benebene84/responsive-class-variants"
+	},
+	"keywords": [
+		"responsive",
+		"class",
+		"variants",
+		"tailwind",
+		"tailwindcss"
+	],
+	"scripts": {
+		"build": "tsc",
+		"test": "vitest",
+		"test:ci": "vitest run",
+		"lint": "biome check .",
+		"lint:fix": "biome check . --write"
+	},
+	"author": "Benedikt Sperl",
+	"license": "ISC",
+	"packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387",
+	"devDependencies": {
+		"@biomejs/biome": "2.0.6",
+		"clsx": "^2.1.1",
+		"lefthook": "^1.11.14",
+		"typescript": "^5.8.3",
+		"vitest": "^3.2.4"
+	}
+}