responsive-class-variants 1.3.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -27
- package/dist/rcv.d.ts +18 -4
- package/dist/rcv.js +7 -4
- package/dist/rcv.js.map +1 -1
- package/dist/types.d.ts +7 -0
- package/dist/types.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ rcv helps you create responsive class variants. It handles the logic of generati
|
|
|
8
8
|
- You just need to provide the base classes, the variants and optionally compound variants.
|
|
9
9
|
- **Slots support**: Create multiple class-generating functions for different parts of a component.
|
|
10
10
|
- **Framework agnostic**: Supports both `className` (React) and `class` (Svelte, Vue, SolidJS) props.
|
|
11
|
-
- You can use the default breakpoints (sm
|
|
11
|
+
- You can use the default breakpoints (`sm`, `md`, `lg`, `xl`) or teach TypeScript your own names with an optional **`breakpoints`** tuple on the config (type-only) or with **`createRcv`**.
|
|
12
12
|
- 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.
|
|
13
13
|
|
|
14
14
|
## Installation
|
|
@@ -23,10 +23,12 @@ rcv is a function that takes a config object and returns a function that takes a
|
|
|
23
23
|
|
|
24
24
|
The config object has the following properties:
|
|
25
25
|
|
|
26
|
-
- base: The base classes that are always applied.
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
26
|
+
- **base** (non-slots): The base classes that are always applied.
|
|
27
|
+
- **slots** (slots API): An object mapping slot names to their base classes.
|
|
28
|
+
- **variants**: An object with the keys of the variants and the values are the values of the variants.
|
|
29
|
+
- **compoundVariants**: An array of compound variants that apply additional classes when multiple variants have specific values.
|
|
30
|
+
- **breakpoints** (optional): A `const` tuple of breakpoint names used **only for TypeScript** so responsive props are typed with your names (e.g. `mobile`, `tablet`). Not read at runtime. Omit to use the defaults `sm`, `md`, `lg`, `xl`.
|
|
31
|
+
- **onComplete**: An optional callback function that receives the generated classes and returns the final classes.
|
|
30
32
|
|
|
31
33
|
rcv works very well with tailwindcss but it can be used with any CSS solution.
|
|
32
34
|
|
|
@@ -282,13 +284,18 @@ const SIZES = {
|
|
|
282
284
|
|
|
283
285
|
The structure doesn't really matter, the classes just need to be in the compiled javascript to be picked up by the JIT compiler.
|
|
284
286
|
|
|
285
|
-
## Custom breakpoints
|
|
287
|
+
## Custom breakpoints
|
|
286
288
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
+
Runtime behavior is unchanged: class names are still prefixed with whatever breakpoint key you use (e.g. `mobile:`, `md:`). You only need to tell TypeScript which names are valid.
|
|
290
|
+
|
|
291
|
+
### Option A: `breakpoints` on `rcv` (recommended)
|
|
289
292
|
|
|
293
|
+
Pass a `const` tuple so responsive props are inferred for `initial` plus those keys only:
|
|
294
|
+
|
|
295
|
+
```ts
|
|
290
296
|
const getButtonVariants = rcv({
|
|
291
297
|
base: "px-4 py-2 rounded",
|
|
298
|
+
breakpoints: ["mobile", "tablet", "desktop"] as const,
|
|
292
299
|
variants: {
|
|
293
300
|
intent: {
|
|
294
301
|
primary: "bg-blue-500 text-white",
|
|
@@ -297,24 +304,37 @@ const getButtonVariants = rcv({
|
|
|
297
304
|
}
|
|
298
305
|
});
|
|
299
306
|
|
|
300
|
-
|
|
301
|
-
|
|
307
|
+
getButtonVariants({
|
|
308
|
+
intent: { initial: "primary", mobile: "secondary", desktop: "primary" }
|
|
309
|
+
});
|
|
310
|
+
```
|
|
302
311
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
312
|
+
The `breakpoints` field is **not** read at runtime; it exists so the compiler can infer the breakpoint union.
|
|
313
|
+
|
|
314
|
+
### Option B: `createRcv`
|
|
315
|
+
|
|
316
|
+
Same typing effect by passing the tuple to `createRcv` once (also type-only for the first argument):
|
|
317
|
+
|
|
318
|
+
```ts
|
|
319
|
+
const rcv = createRcv(["mobile", "tablet", "desktop"]);
|
|
320
|
+
|
|
321
|
+
const getButtonVariants = rcv({
|
|
322
|
+
base: "px-4 py-2 rounded",
|
|
309
323
|
variants: {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
324
|
+
intent: {
|
|
325
|
+
primary: "bg-blue-500 text-white",
|
|
326
|
+
secondary: "bg-gray-200 text-gray-800"
|
|
313
327
|
}
|
|
314
328
|
}
|
|
315
329
|
});
|
|
330
|
+
|
|
331
|
+
getButtonVariants({
|
|
332
|
+
intent: { initial: "primary", mobile: "secondary", desktop: "primary" }
|
|
333
|
+
});
|
|
316
334
|
```
|
|
317
335
|
|
|
336
|
+
Custom breakpoints work with the slots API as well—add `breakpoints: [...] as const` next to `slots` / `variants`, or use `createRcv` as above.
|
|
337
|
+
|
|
318
338
|
## onComplete callback (via createRcv)
|
|
319
339
|
|
|
320
340
|
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.
|
|
@@ -363,7 +383,7 @@ compoundVariants: [
|
|
|
363
383
|
|
|
364
384
|
rcv provides a helper type to make it easier to type your component props.
|
|
365
385
|
|
|
366
|
-
If you use the default breakpoints (sm
|
|
386
|
+
If you use the default breakpoints (`sm`, `md`, `lg`, `xl`), you can use the `ResponsiveValue` type to make existing props responsive.
|
|
367
387
|
|
|
368
388
|
```ts
|
|
369
389
|
type ButtonProps = {
|
|
@@ -374,16 +394,15 @@ type ButtonProps = {
|
|
|
374
394
|
};
|
|
375
395
|
```
|
|
376
396
|
|
|
377
|
-
If you use custom
|
|
397
|
+
If you use **custom** breakpoint names, pass the same union as the second generic parameter, or derive it once from your `const` tuple:
|
|
378
398
|
|
|
379
399
|
```ts
|
|
380
|
-
import {
|
|
400
|
+
import { type ResponsiveValue as RcvResponsiveValue } from "responsive-class-variants";
|
|
381
401
|
|
|
382
402
|
const breakpoints = ["tablet", "desktop", "wide"] as const;
|
|
403
|
+
type CustomBreakpoint = (typeof breakpoints)[number];
|
|
383
404
|
|
|
384
|
-
export
|
|
385
|
-
|
|
386
|
-
type Breakpoints = (typeof breakpoints)[number];
|
|
387
|
-
|
|
388
|
-
export type ResponsiveValue<T> = RcvResponsiveValue<T, Breakpoints>;
|
|
405
|
+
export type ResponsiveValue<T> = RcvResponsiveValue<T, CustomBreakpoint>;
|
|
389
406
|
```
|
|
407
|
+
|
|
408
|
+
When you define variants with `rcv({ breakpoints: [...] as const, ... })` or `createRcv(breakpoints)`, the returned function’s props are already inferred; you only need the snippet above for **separate** prop types (e.g. wrapping a design-system component).
|
package/dist/rcv.d.ts
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
import type { CompoundVariantWithSlots, DefaultBreakpoints, SlotConfig, VariantConfig, VariantProps, VariantValue } from "./types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Builds responsive class strings from a config object.
|
|
4
|
+
*
|
|
5
|
+
* Pass **`breakpoints`** as a `const` tuple (e.g. `['mobile', 'tablet'] as const`) only when you want
|
|
6
|
+
* TypeScript to infer custom breakpoint names for responsive props. It is not read at runtime.
|
|
7
|
+
* Omit it to use the default `sm` / `md` / `lg` / `xl` breakpoints.
|
|
8
|
+
*/
|
|
2
9
|
export declare function rcv<T extends VariantConfig = Record<never, VariantValue>, S extends Record<string, SlotConfig> = Record<string, SlotConfig>, B extends string = DefaultBreakpoints>(config: {
|
|
3
10
|
slots: S;
|
|
4
11
|
variants?: T;
|
|
5
12
|
compoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];
|
|
13
|
+
breakpoints?: readonly B[];
|
|
6
14
|
onComplete?: (classes: string) => string;
|
|
7
15
|
}): () => {
|
|
8
16
|
[K in keyof S]: (props?: VariantProps<T, B>) => string;
|
|
@@ -11,15 +19,19 @@ export declare function rcv<T extends VariantConfig = Record<never, VariantValue
|
|
|
11
19
|
base: string;
|
|
12
20
|
variants?: T;
|
|
13
21
|
compoundVariants?: Partial<VariantProps<T, B>>[];
|
|
22
|
+
breakpoints?: readonly B[];
|
|
14
23
|
onComplete?: (classes: string) => string;
|
|
15
24
|
}): (props?: VariantProps<T, B>) => string;
|
|
16
25
|
/**
|
|
17
|
-
*
|
|
26
|
+
* Returns an `rcv` that uses custom breakpoint names for typing.
|
|
27
|
+
*
|
|
28
|
+
* The first argument is **type-only** (not read at runtime): it lets TypeScript infer `B`.
|
|
29
|
+
* You can get the same effect with {@link rcv} by passing `breakpoints: ['mobile', 'tablet'] as const` on the config object.
|
|
18
30
|
*
|
|
19
31
|
* @template B - The custom breakpoints type
|
|
20
|
-
* @param breakpoints - Optional
|
|
21
|
-
* @param onComplete - Optional callback
|
|
22
|
-
* @returns
|
|
32
|
+
* @param breakpoints - Optional tuple of custom breakpoint names (for inference only)
|
|
33
|
+
* @param onComplete - Optional callback applied to the merged class string
|
|
34
|
+
* @returns An `rcv` function whose props use `B` for responsive keys
|
|
23
35
|
*
|
|
24
36
|
* @example
|
|
25
37
|
* const customRcv = createRcv(['mobile', 'tablet', 'desktop']);
|
|
@@ -42,12 +54,14 @@ export declare const createRcv: <B extends string>(_breakpoints?: readonly B[],
|
|
|
42
54
|
slots: S;
|
|
43
55
|
variants?: T;
|
|
44
56
|
compoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];
|
|
57
|
+
breakpoints?: readonly B[];
|
|
45
58
|
onComplete?: (classes: string) => string;
|
|
46
59
|
}): () => { [K in keyof S]: (props?: VariantProps<T, B>) => string; };
|
|
47
60
|
<T extends VariantConfig = Record<never, VariantValue>>(config: {
|
|
48
61
|
base: string;
|
|
49
62
|
variants?: T;
|
|
50
63
|
compoundVariants?: Partial<VariantProps<T, B>>[];
|
|
64
|
+
breakpoints?: readonly B[];
|
|
51
65
|
onComplete?: (classes: string) => string;
|
|
52
66
|
}): (props?: VariantProps<T, B>) => string;
|
|
53
67
|
};
|
package/dist/rcv.js
CHANGED
|
@@ -29,12 +29,15 @@ export function rcv(config) {
|
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
32
|
+
* Returns an `rcv` that uses custom breakpoint names for typing.
|
|
33
|
+
*
|
|
34
|
+
* The first argument is **type-only** (not read at runtime): it lets TypeScript infer `B`.
|
|
35
|
+
* You can get the same effect with {@link rcv} by passing `breakpoints: ['mobile', 'tablet'] as const` on the config object.
|
|
33
36
|
*
|
|
34
37
|
* @template B - The custom breakpoints type
|
|
35
|
-
* @param breakpoints - Optional
|
|
36
|
-
* @param onComplete - Optional callback
|
|
37
|
-
* @returns
|
|
38
|
+
* @param breakpoints - Optional tuple of custom breakpoint names (for inference only)
|
|
39
|
+
* @param onComplete - Optional callback applied to the merged class string
|
|
40
|
+
* @returns An `rcv` function whose props use `B` for responsive keys
|
|
38
41
|
*
|
|
39
42
|
* @example
|
|
40
43
|
* const customRcv = createRcv(['mobile', 'tablet', 'desktop']);
|
package/dist/rcv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rcv.js","sourceRoot":"/","sources":["rcv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EACN,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,mBAAmB,GACnB,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"rcv.js","sourceRoot":"/","sources":["rcv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EACN,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,mBAAmB,GACnB,MAAM,WAAW,CAAC;AA4CnB,MAAM,UAAU,GAAG,CAKlB,MAQI;IAEJ,oCAAoC;IACpC,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;QAC3B,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;QACjE,OAAO,GAAG,EAAE;YACX,MAAM,aAAa,GAAG,EAErB,CAAC;YAEF,4EAA4E;YAC5E,KAAK,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5D,MAAM,YAAY,GAAG,kBAAkB,CACtC,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,QAAQ,CACR,CAAC;gBAEF,aAAa,CAAC,QAAmB,CAAC,GAAG,YAAY,CAAC;YACnD,CAAC;YAED,OAAO,aAAa,CAAC;QACtB,CAAC,CAAC;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;IAChE,OAAO,CACN,EACC,SAAS,EACT,KAAK,EAAE,cAAc,EACrB,GAAG,KAAK,KACe,EAAwB,EAC/C,EAAE;QACH,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAE/D,MAAM,eAAe,GAAG,gBAAgB,EAAE,GAAG,CAC5C,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,QAAQ,EAAE,EAAE,EAAE;YACjD,IACC,sBAAsB,CACrB,QAGC,EACD,KAAK,CACL,EACA,CAAC;gBACF,OAAO,iBAAiB,CAAC;YAC1B,CAAC;YACD,OAAO,SAAS,CAAC;QAClB,CAAC,CACD,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CACnB,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,cAAc,CACd,CAAC;QACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,CAAC,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,CACxB,YAA2B,EAC3B,UAAwC,EACvC,EAAE;IAwBH,SAAS,SAAS,CAIjB,MAQI;QAEJ,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3B,OAAO,GAAG,CAAU;gBACnB,GAAG,MAAM;gBACT,UAAU,EAAE,UAAU,IAAI,MAAM,CAAC,UAAU;aAM3C,CAAC,CAAC;QACJ,CAAC;aAAM,CAAC;YACP,OAAO,GAAG,CAAO;gBAChB,GAAG,MAAM;gBACT,UAAU,EAAE,UAAU,IAAI,MAAM,CAAC,UAAU;aAC3C,CAAC,CAAC;QACJ,CAAC;IACF,CAAC;IAED,OAAO,SAAS,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import { clsx } from \"clsx\";\nimport {\n\tcreateSlotFunction,\n\tisSlotsConfig,\n\tmatchesCompoundVariant,\n\tprocessVariantProps,\n} from \"./helpers\";\nimport type {\n\tCompoundVariantWithSlots,\n\tDefaultBreakpoints,\n\tResponsiveClassesConfig,\n\tSlotConfig,\n\tVariantConfig,\n\tVariantProps,\n\tVariantValue,\n} from \"./types\";\n\n/**\n * Builds responsive class strings from a config object.\n *\n * Pass **`breakpoints`** as a `const` tuple (e.g. `['mobile', 'tablet'] as const`) only when you want\n * TypeScript to infer custom breakpoint names for responsive props. It is not read at runtime.\n * Omit it to use the default `sm` / `md` / `lg` / `xl` breakpoints.\n */\n// Function overloads for rcv\nexport function rcv<\n\tT extends VariantConfig = Record<never, VariantValue>,\n\tS extends Record<string, SlotConfig> = Record<string, SlotConfig>,\n\tB extends string = DefaultBreakpoints,\n>(config: {\n\tslots: S;\n\tvariants?: T;\n\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];\n\tbreakpoints?: readonly B[];\n\tonComplete?: (classes: string) => string;\n}): () => {\n\t[K in keyof S]: (props?: VariantProps<T, B>) => string;\n};\n\nexport function rcv<\n\tT extends VariantConfig = Record<never, VariantValue>,\n\tB extends string = DefaultBreakpoints,\n>(config: {\n\tbase: string;\n\tvariants?: T;\n\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\tbreakpoints?: readonly B[];\n\tonComplete?: (classes: string) => string;\n}): (props?: VariantProps<T, B>) => string;\n\nexport function rcv<\n\tT extends VariantConfig = Record<never, VariantValue>,\n\tS extends Record<string, SlotConfig> = Record<string, SlotConfig>,\n\tB extends string = DefaultBreakpoints,\n>(\n\tconfig:\n\t\t| ResponsiveClassesConfig<T, B>\n\t\t| {\n\t\t\t\tslots: S;\n\t\t\t\tvariants?: T;\n\t\t\t\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];\n\t\t\t\tbreakpoints?: readonly B[];\n\t\t\t\tonComplete?: (classes: string) => string;\n\t\t },\n) {\n\t// Check if config is a slots config\n\tif (isSlotsConfig(config)) {\n\t\tconst { slots, variants, compoundVariants, onComplete } = config;\n\t\treturn () => {\n\t\t\tconst slotFunctions = {} as {\n\t\t\t\t[K in keyof S]: (props?: VariantProps<T, B>) => string;\n\t\t\t};\n\n\t\t\t// Create slot functions for each slot - ensure all slots are always present\n\t\t\tfor (const [slotName, slotConfig] of Object.entries(slots)) {\n\t\t\t\tconst slotFunction = createSlotFunction<T, B>(\n\t\t\t\t\tslotConfig,\n\t\t\t\t\tvariants,\n\t\t\t\t\tcompoundVariants,\n\t\t\t\t\tonComplete,\n\t\t\t\t\tslotName,\n\t\t\t\t);\n\n\t\t\t\tslotFunctions[slotName as keyof S] = slotFunction;\n\t\t\t}\n\n\t\t\treturn slotFunctions;\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 (\n\t\t{\n\t\t\tclassName,\n\t\t\tclass: classFromProps,\n\t\t\t...props\n\t\t}: VariantProps<T, B> = {} as VariantProps<T, B>,\n\t) => {\n\t\tconst responsiveClasses = processVariantProps(props, variants);\n\n\t\tconst compoundClasses = compoundVariants?.map(\n\t\t\t({ 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);\n\n\t\tconst classes = clsx(\n\t\t\tbase,\n\t\t\tresponsiveClasses,\n\t\t\tcompoundClasses,\n\t\t\tclassName,\n\t\t\tclassFromProps,\n\t\t);\n\t\treturn onComplete ? onComplete(classes) : classes;\n\t};\n}\n\n/**\n * Returns an `rcv` that uses custom breakpoint names for typing.\n *\n * The first argument is **type-only** (not read at runtime): it lets TypeScript infer `B`.\n * You can get the same effect with {@link rcv} by passing `breakpoints: ['mobile', 'tablet'] as const` on the config object.\n *\n * @template B - The custom breakpoints type\n * @param breakpoints - Optional tuple of custom breakpoint names (for inference only)\n * @param onComplete - Optional callback applied to the merged class string\n * @returns An `rcv` function whose props use `B` for responsive keys\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<\n\t\tT extends VariantConfig = Record<never, VariantValue>,\n\t\tS extends Record<string, SlotConfig> = Record<string, SlotConfig>,\n\t>(config: {\n\t\tslots: S;\n\t\tvariants?: T;\n\t\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];\n\t\tbreakpoints?: readonly B[];\n\t\tonComplete?: (classes: string) => string;\n\t}): () => {\n\t\t[K in keyof S]: (props?: VariantProps<T, B>) => string;\n\t};\n\n\tfunction customRcv<\n\t\tT extends VariantConfig = Record<never, VariantValue>,\n\t>(config: {\n\t\tbase: string;\n\t\tvariants?: T;\n\t\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\t\tbreakpoints?: readonly B[];\n\t\tonComplete?: (classes: string) => string;\n\t}): (props?: VariantProps<T, B>) => string;\n\n\tfunction customRcv<\n\t\tT extends VariantConfig = Record<never, VariantValue>,\n\t\tS extends Record<string, SlotConfig> = Record<string, SlotConfig>,\n\t>(\n\t\tconfig:\n\t\t\t| ResponsiveClassesConfig<T, B>\n\t\t\t| {\n\t\t\t\t\tslots: S;\n\t\t\t\t\tvariants?: T;\n\t\t\t\t\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];\n\t\t\t\t\tbreakpoints?: readonly B[];\n\t\t\t\t\tonComplete?: (classes: string) => string;\n\t\t\t },\n\t) {\n\t\tif (isSlotsConfig(config)) {\n\t\t\treturn rcv<T, S, B>({\n\t\t\t\t...config,\n\t\t\t\tonComplete: onComplete || config.onComplete,\n\t\t\t} as {\n\t\t\t\tslots: S;\n\t\t\t\tvariants?: T;\n\t\t\t\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];\n\t\t\t\tonComplete?: (classes: string) => string;\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/dist/types.d.ts
CHANGED
|
@@ -27,16 +27,23 @@ type CompoundVariantWithSlots<T extends VariantConfig, S extends string, B exten
|
|
|
27
27
|
class?: CompoundVariantClassValue<S>;
|
|
28
28
|
className?: CompoundVariantClassValue<S>;
|
|
29
29
|
};
|
|
30
|
+
/**
|
|
31
|
+
* Optional tuple of breakpoint names, used only so TypeScript can infer `B`.
|
|
32
|
+
* It is not read at runtime; omit it to use {@link DefaultBreakpoints}.
|
|
33
|
+
*/
|
|
34
|
+
type BreakpointsInference<B extends string> = readonly B[];
|
|
30
35
|
type ResponsiveClassesConfigBase<T extends VariantConfig, B extends string> = {
|
|
31
36
|
base: string;
|
|
32
37
|
variants?: T;
|
|
33
38
|
compoundVariants?: Partial<VariantProps<T, B>>[];
|
|
39
|
+
breakpoints?: BreakpointsInference<B>;
|
|
34
40
|
onComplete?: (classes: string) => string;
|
|
35
41
|
};
|
|
36
42
|
type ResponsiveClassesConfigSlots<T extends VariantConfig, S extends Record<string, SlotConfig>, B extends string> = {
|
|
37
43
|
slots: SlotsConfig<S>;
|
|
38
44
|
variants?: T;
|
|
39
45
|
compoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];
|
|
46
|
+
breakpoints?: BreakpointsInference<B>;
|
|
40
47
|
onComplete?: (classes: string) => string;
|
|
41
48
|
};
|
|
42
49
|
type ResponsiveClassesConfig<T extends VariantConfig, B extends string> = ResponsiveClassesConfigBase<T, B> | ResponsiveClassesConfigSlots<T, Record<string, SlotConfig>, B>;
|
package/dist/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export 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\ntype ClassValue = string | ReadonlyArray<string>;\n\ntype ValueType = ClassValue | Record<string, ClassValue>;\n\ntype VariantValue = Record<string, ValueType>;\ntype VariantConfig = Record<string, VariantValue>;\n\ntype StringBoolean = \"true\" | \"false\";\ntype BooleanVariant = Partial<\n\tRecord<StringBoolean, ClassValue | Record<string, ClassValue>>\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 VariantPropsBase<T extends VariantConfig, B extends string> = {\n\t[K in keyof T]?: VariantPropValue<T[K], B>;\n};\n\ntype VariantProps<T extends VariantConfig, B extends string> = VariantPropsBase<\n\tT,\n\tB\n> & {\n\tclassName?: string;\n\tclass?: string;\n};\n\n// Slot configuration types\ntype SlotConfig = ClassValue;\n\ntype SlotsConfig<S extends Record<string, SlotConfig>> = S;\n\ntype CompoundVariantClassValue<S extends string> =\n\t| string\n\t| Partial<Record<S, ClassValue>>;\n\ntype CompoundVariantWithSlots<\n\tT extends VariantConfig,\n\tS extends string,\n\tB extends string,\n> = Partial<Omit<VariantProps<T, B>, \"class\" | \"className\">> & {\n\tclass?: CompoundVariantClassValue<S>;\n\tclassName?: CompoundVariantClassValue<S>;\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<\n\tT extends VariantConfig,\n\tS extends Record<string, SlotConfig>,\n\tB extends string,\n> = {\n\tslots: SlotsConfig<S>;\n\tvariants?: T;\n\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & 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, Record<string, SlotConfig>, B>;\n\nexport type {\n\tClassValue,\n\tCompoundVariantClassValue,\n\tCompoundVariantWithSlots,\n\tResponsiveClassesConfig,\n\tResponsiveClassesConfigSlots,\n\tSlotConfig,\n\tSlotsConfig,\n\tVariantConfig,\n\tVariantProps,\n\tVariantPropValue,\n\tVariantValue,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export 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\ntype ClassValue = string | ReadonlyArray<string>;\n\ntype ValueType = ClassValue | Record<string, ClassValue>;\n\ntype VariantValue = Record<string, ValueType>;\ntype VariantConfig = Record<string, VariantValue>;\n\ntype StringBoolean = \"true\" | \"false\";\ntype BooleanVariant = Partial<\n\tRecord<StringBoolean, ClassValue | Record<string, ClassValue>>\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 VariantPropsBase<T extends VariantConfig, B extends string> = {\n\t[K in keyof T]?: VariantPropValue<T[K], B>;\n};\n\ntype VariantProps<T extends VariantConfig, B extends string> = VariantPropsBase<\n\tT,\n\tB\n> & {\n\tclassName?: string;\n\tclass?: string;\n};\n\n// Slot configuration types\ntype SlotConfig = ClassValue;\n\ntype SlotsConfig<S extends Record<string, SlotConfig>> = S;\n\ntype CompoundVariantClassValue<S extends string> =\n\t| string\n\t| Partial<Record<S, ClassValue>>;\n\ntype CompoundVariantWithSlots<\n\tT extends VariantConfig,\n\tS extends string,\n\tB extends string,\n> = Partial<Omit<VariantProps<T, B>, \"class\" | \"className\">> & {\n\tclass?: CompoundVariantClassValue<S>;\n\tclassName?: CompoundVariantClassValue<S>;\n};\n\n/**\n * Optional tuple of breakpoint names, used only so TypeScript can infer `B`.\n * It is not read at runtime; omit it to use {@link DefaultBreakpoints}.\n */\ntype BreakpointsInference<B extends string> = readonly B[];\n\ntype ResponsiveClassesConfigBase<T extends VariantConfig, B extends string> = {\n\tbase: string;\n\tvariants?: T;\n\tcompoundVariants?: Partial<VariantProps<T, B>>[];\n\tbreakpoints?: BreakpointsInference<B>;\n\tonComplete?: (classes: string) => string;\n};\n\ntype ResponsiveClassesConfigSlots<\n\tT extends VariantConfig,\n\tS extends Record<string, SlotConfig>,\n\tB extends string,\n> = {\n\tslots: SlotsConfig<S>;\n\tvariants?: T;\n\tcompoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];\n\tbreakpoints?: BreakpointsInference<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, Record<string, SlotConfig>, B>;\n\nexport type {\n\tClassValue,\n\tCompoundVariantClassValue,\n\tCompoundVariantWithSlots,\n\tResponsiveClassesConfig,\n\tResponsiveClassesConfigSlots,\n\tSlotConfig,\n\tSlotsConfig,\n\tVariantConfig,\n\tVariantProps,\n\tVariantPropValue,\n\tVariantValue,\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "responsive-class-variants",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "rcv helps you create responsive class variants",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
"clsx": "^2.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@biomejs/biome": "2.4.
|
|
37
|
-
"lefthook": "^2.1.
|
|
38
|
-
"tsc-alias": "^1.8.
|
|
39
|
-
"typescript": "^
|
|
40
|
-
"vitest": "^4.
|
|
36
|
+
"@biomejs/biome": "2.4.15",
|
|
37
|
+
"lefthook": "^2.1.8",
|
|
38
|
+
"tsc-alias": "^1.8.17",
|
|
39
|
+
"typescript": "^6.0.3",
|
|
40
|
+
"vitest": "^4.1.7"
|
|
41
41
|
}
|
|
42
42
|
}
|