tailwind-variants 3.2.2 → 3.3.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 +91 -80
- package/dist/chunk-2BFDQGZN.cjs +160 -0
- package/dist/chunk-AUQ4UGQK.js +673 -0
- package/dist/chunk-ICHZ2N3R.cjs +677 -0
- package/dist/chunk-OYFAXDFZ.js +147 -0
- package/dist/config-bO3A8WhU.d.cts +112 -0
- package/dist/config-bO3A8WhU.d.ts +112 -0
- package/dist/config.cjs +2 -0
- package/dist/config.d.cts +1 -0
- package/dist/config.d.ts +1 -23
- package/dist/config.js +1 -0
- package/dist/index.cjs +3312 -32
- package/dist/index.d.cts +35 -0
- package/dist/index.d.ts +17 -121
- package/dist/index.js +3309 -25
- package/dist/lite.cjs +17 -12
- package/dist/lite.d.cts +10 -0
- package/dist/lite.d.ts +8 -11
- package/dist/lite.js +15 -8
- package/dist/types.cjs +2 -0
- package/dist/types.d.cts +168 -0
- package/dist/types.d.ts +122 -291
- package/dist/types.js +1 -0
- package/dist/utils.cjs +12 -12
- package/dist/utils.d.cts +16 -0
- package/dist/utils.d.ts +16 -32
- package/dist/utils.js +1 -1
- package/package.json +62 -66
- package/dist/chunk-2JY7EID6.cjs +0 -124
- package/dist/chunk-52Z2HSI4.cjs +0 -273
- package/dist/chunk-LQJYWU4O.js +0 -112
- package/dist/chunk-RZF76H2U.js +0 -269
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { CnOptions, CnReturn, TV } from './types.cjs';
|
|
2
|
+
export { ClassProp, OmitUndefined, StringToBoolean, TVCompoundSlots, TVCompoundVariants, TVDefaultVariants, TVLite, TVProps, TVReturnProps, TVReturnType, TVReturnTypeLike, TVScreenPropsValue, TVVariantKeys, TVVariants, VariantProps, WithInitialScreen, isTrueOrArray } from './types.cjs';
|
|
3
|
+
import { T as TWMConfig, a as TVConfig } from './config-bO3A8WhU.cjs';
|
|
4
|
+
export { C as ClassValue, b as TWMergeConfig } from './config-bO3A8WhU.cjs';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Combines class names and merges conflicting Tailwind classes (default config).
|
|
8
|
+
*/
|
|
9
|
+
declare const cn: <T extends CnOptions>(...classnames: T) => CnReturn;
|
|
10
|
+
/**
|
|
11
|
+
* Combines class names and merges conflicting Tailwind classes.
|
|
12
|
+
* Pass optional `twMerge` / `twMergeConfig` on the second call.
|
|
13
|
+
*/
|
|
14
|
+
declare const cnMerge: <T extends CnOptions>(...classnames: T) => ((config?: TWMConfig) => CnReturn);
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Creates a variant-aware component function with Tailwind CSS classes.
|
|
18
|
+
* Supports variants, slots, compound variants, and component composition.
|
|
19
|
+
* @see https://www.tailwind-variants.org/docs/getting-started
|
|
20
|
+
*/
|
|
21
|
+
declare const tv: TV;
|
|
22
|
+
/**
|
|
23
|
+
* Creates a configured `tv` instance with custom default configuration.
|
|
24
|
+
*/
|
|
25
|
+
declare const createTV: (config: TVConfig) => TV;
|
|
26
|
+
/**
|
|
27
|
+
* Default configuration object for tailwind-variants.
|
|
28
|
+
*/
|
|
29
|
+
declare const defaultConfig: TVConfig;
|
|
30
|
+
/**
|
|
31
|
+
* Combines class names without merging conflicting Tailwind CSS classes.
|
|
32
|
+
*/
|
|
33
|
+
declare const cx: <T extends CnOptions>(...classnames: T) => CnReturn;
|
|
34
|
+
|
|
35
|
+
export { CnOptions, CnReturn, TV, TVConfig, TWMConfig, cn, cnMerge, createTV, cx, defaultConfig, tv };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,139 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export
|
|
1
|
+
import { CnOptions, CnReturn, TV } from './types.js';
|
|
2
|
+
export { ClassProp, OmitUndefined, StringToBoolean, TVCompoundSlots, TVCompoundVariants, TVDefaultVariants, TVLite, TVProps, TVReturnProps, TVReturnType, TVReturnTypeLike, TVScreenPropsValue, TVVariantKeys, TVVariants, VariantProps, WithInitialScreen, isTrueOrArray } from './types.js';
|
|
3
|
+
import { T as TWMConfig, a as TVConfig } from './config-bO3A8WhU.js';
|
|
4
|
+
export { C as ClassValue, b as TWMergeConfig } from './config-bO3A8WhU.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* Combines class names
|
|
8
|
-
* @param classes - Class names to combine. Accepts strings, numbers, arrays, objects, and nested structures.
|
|
9
|
-
* @returns A space-separated string of class names, or `undefined` if no valid classes are provided
|
|
10
|
-
* @example
|
|
11
|
-
* ```ts
|
|
12
|
-
* // Simple concatenation
|
|
13
|
-
* cx('text-xl', 'font-bold') // => 'text-xl font-bold'
|
|
14
|
-
*
|
|
15
|
-
* // Handles arrays and objects
|
|
16
|
-
* cx(['px-4', 'py-2'], { 'bg-blue-500': true, 'text-white': false }) // => 'px-4 py-2 bg-blue-500'
|
|
17
|
-
*
|
|
18
|
-
* // Ignores falsy values (except 0)
|
|
19
|
-
* cx('text-xl', false && 'font-bold', null, undefined) // => 'text-xl'
|
|
20
|
-
* ```
|
|
7
|
+
* Combines class names and merges conflicting Tailwind classes (default config).
|
|
21
8
|
*/
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Combines class names and merges conflicting Tailwind CSS classes using `tailwind-merge`.
|
|
26
|
-
* Uses default twMerge config. For custom config, use `cnMerge` instead.
|
|
27
|
-
* @param classes - Class names to combine (strings, arrays, objects, etc.)
|
|
28
|
-
* @returns A merged class string, or `undefined` if no valid classes are provided
|
|
29
|
-
* @example
|
|
30
|
-
* ```ts
|
|
31
|
-
* // Simple usage with default twMerge config
|
|
32
|
-
* cn('bg-red-500', 'bg-blue-500') // => 'bg-blue-500'
|
|
33
|
-
* cn('px-2', 'px-4', 'py-2') // => 'px-4 py-2'
|
|
34
|
-
*
|
|
35
|
-
* // For custom twMerge config, use cnMerge instead
|
|
36
|
-
* cnMerge('px-2', 'px-4')({twMerge: false}) // => 'px-2 px-4'
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
export declare const cn: <T extends CnOptions>(...classes: T) => CnReturn;
|
|
40
|
-
|
|
9
|
+
declare const cn: <T extends CnOptions>(...classnames: T) => CnReturn;
|
|
41
10
|
/**
|
|
42
|
-
* Combines class names and merges conflicting Tailwind
|
|
43
|
-
*
|
|
44
|
-
* @param classes - Class names to combine (strings, arrays, objects, etc.)
|
|
45
|
-
* @returns A function that accepts optional twMerge config and returns the merged class string
|
|
46
|
-
* @example
|
|
47
|
-
* ```ts
|
|
48
|
-
* // With custom config
|
|
49
|
-
* cnMerge('bg-red-500', 'bg-blue-500')({twMerge: true}) // => 'bg-blue-500'
|
|
50
|
-
* cnMerge('px-2', 'px-4')({twMerge: false}) // => 'px-2 px-4'
|
|
51
|
-
*
|
|
52
|
-
* // With twMergeConfig
|
|
53
|
-
* cnMerge('px-2', 'px-4')({twMergeConfig: {...}}) // => merged with custom config
|
|
54
|
-
* ```
|
|
11
|
+
* Combines class names and merges conflicting Tailwind classes.
|
|
12
|
+
* Pass optional `twMerge` / `twMergeConfig` on the second call.
|
|
55
13
|
*/
|
|
56
|
-
|
|
57
|
-
...classes: T
|
|
58
|
-
) => (config?: TWMConfig) => CnReturn;
|
|
14
|
+
declare const cnMerge: <T extends CnOptions>(...classnames: T) => ((config?: TWMConfig) => CnReturn);
|
|
59
15
|
|
|
60
16
|
/**
|
|
61
17
|
* Creates a variant-aware component function with Tailwind CSS classes.
|
|
62
18
|
* Supports variants, slots, compound variants, and component composition.
|
|
63
|
-
* @example
|
|
64
|
-
* ```ts
|
|
65
|
-
* const button = tv({
|
|
66
|
-
* base: "font-medium rounded-full",
|
|
67
|
-
* variants: {
|
|
68
|
-
* color: {
|
|
69
|
-
* primary: "bg-blue-500 text-white",
|
|
70
|
-
* secondary: "bg-purple-500 text-white",
|
|
71
|
-
* },
|
|
72
|
-
* size: {
|
|
73
|
-
* sm: "text-sm px-3 py-1",
|
|
74
|
-
* md: "text-base px-4 py-2",
|
|
75
|
-
* },
|
|
76
|
-
* },
|
|
77
|
-
* defaultVariants: {
|
|
78
|
-
* color: "primary",
|
|
79
|
-
* size: "md",
|
|
80
|
-
* },
|
|
81
|
-
* });
|
|
82
|
-
*
|
|
83
|
-
* button({ color: "secondary", size: "sm" }) // => 'font-medium rounded-full bg-purple-500 text-white text-sm px-3 py-1'
|
|
84
|
-
* ```
|
|
85
19
|
* @see https://www.tailwind-variants.org/docs/getting-started
|
|
86
20
|
*/
|
|
87
|
-
|
|
88
|
-
|
|
21
|
+
declare const tv: TV;
|
|
89
22
|
/**
|
|
90
23
|
* Creates a configured `tv` instance with custom default configuration.
|
|
91
|
-
* Useful when you want to set default `twMerge` or `twMergeConfig` options for all components.
|
|
92
|
-
* @param config - Configuration object with default settings for `twMerge` and `twMergeConfig`
|
|
93
|
-
* @returns A configured `tv` function that uses the provided defaults
|
|
94
|
-
* @example
|
|
95
|
-
* ```ts
|
|
96
|
-
* // Create a tv instance with twMerge disabled by default
|
|
97
|
-
* const tv = createTV({ twMerge: false });
|
|
98
|
-
*
|
|
99
|
-
* const button = tv({
|
|
100
|
-
* base: "px-4 py-2",
|
|
101
|
-
* variants: {
|
|
102
|
-
* color: {
|
|
103
|
-
* primary: "bg-blue-500",
|
|
104
|
-
* },
|
|
105
|
-
* },
|
|
106
|
-
* });
|
|
107
|
-
*
|
|
108
|
-
* // Can still override config per component
|
|
109
|
-
* const buttonWithMerge = tv(
|
|
110
|
-
* {
|
|
111
|
-
* base: "px-4 py-2",
|
|
112
|
-
* variants: { color: { primary: "bg-blue-500" } },
|
|
113
|
-
* },
|
|
114
|
-
* { twMerge: true }
|
|
115
|
-
* );
|
|
116
|
-
* ```
|
|
117
24
|
*/
|
|
118
|
-
|
|
119
|
-
|
|
25
|
+
declare const createTV: (config: TVConfig) => TV;
|
|
120
26
|
/**
|
|
121
27
|
* Default configuration object for tailwind-variants.
|
|
122
|
-
* Can be modified to set global defaults for all components.
|
|
123
|
-
* @example
|
|
124
|
-
* ```ts
|
|
125
|
-
* import { defaultConfig } from "tailwind-variants";
|
|
126
|
-
*
|
|
127
|
-
* defaultConfig.twMergeConfig = {
|
|
128
|
-
* extend: {
|
|
129
|
-
* theme: {
|
|
130
|
-
* spacing: ["medium", "large"],
|
|
131
|
-
* },
|
|
132
|
-
* },
|
|
133
|
-
* };
|
|
134
|
-
* ```
|
|
135
28
|
*/
|
|
136
|
-
|
|
29
|
+
declare const defaultConfig: TVConfig;
|
|
30
|
+
/**
|
|
31
|
+
* Combines class names without merging conflicting Tailwind CSS classes.
|
|
32
|
+
*/
|
|
33
|
+
declare const cx: <T extends CnOptions>(...classnames: T) => CnReturn;
|
|
137
34
|
|
|
138
|
-
|
|
139
|
-
export type {TVConfig, TWMConfig, TWMergeConfig};
|
|
35
|
+
export { CnOptions, CnReturn, TV, TVConfig, TWMConfig, cn, cnMerge, createTV, cx, defaultConfig, tv };
|