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.
@@ -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 type {TVConfig, TWMConfig, TWMergeConfig} from "./config.d.ts";
2
- import type {CnOptions, CnReturn, TV} from "./types.d.ts";
3
-
4
- export type * from "./types.d.ts";
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 into a single string. Similar to `clsx` - simple concatenation without merging conflicting classes.
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
- export declare const cx: <T extends CnOptions>(...classes: T) => CnReturn;
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 CSS classes using `tailwind-merge`.
43
- * Supports custom twMerge config via the second function call.
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
- export declare const cnMerge: <T extends CnOptions>(
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
- export declare const tv: TV;
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
- export declare function createTV(config: TVConfig): TV;
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
- export declare const defaultConfig: TVConfig;
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
- // types
139
- export type {TVConfig, TWMConfig, TWMergeConfig};
35
+ export { CnOptions, CnReturn, TV, TVConfig, TWMConfig, cn, cnMerge, createTV, cx, defaultConfig, tv };