cva 1.0.0-beta.0 → 1.0.0-beta.2
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/dist/index.d.ts +8 -1
- package/dist/index.js +109 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +85 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
- package/src/index.ts +0 -226
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
|
|
|
6
6
|
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
|
|
7
7
|
export type VariantProps<Component extends (...args: any) => any> = Omit<OmitUndefined<Parameters<Component>[0]>, "class" | "className">;
|
|
8
8
|
export interface Compose {
|
|
9
|
-
<T extends ReturnType<CVA>[]>(...components: [...T]): (props
|
|
9
|
+
<T extends ReturnType<CVA>[]>(...components: [...T]): (props?: (UnionToIntersection<{
|
|
10
10
|
[K in keyof T]: VariantProps<T[K]>;
|
|
11
11
|
}[number]> | undefined) & CVAClassProp) => string;
|
|
12
12
|
}
|
|
@@ -44,7 +44,14 @@ export interface CVA {
|
|
|
44
44
|
}
|
|
45
45
|
export interface DefineConfigOptions {
|
|
46
46
|
hooks?: {
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated please use `onComplete`
|
|
49
|
+
*/
|
|
47
50
|
"cx:done"?: (className: string) => string;
|
|
51
|
+
/**
|
|
52
|
+
* Returns the completed string of concatenated classes/classNames.
|
|
53
|
+
*/
|
|
54
|
+
onComplete?: (className: string) => string;
|
|
48
55
|
};
|
|
49
56
|
}
|
|
50
57
|
export interface DefineConfig {
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,111 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2022 Joe Bell. All rights reserved.
|
|
3
|
+
*
|
|
4
|
+
* This file is licensed to you under the Apache License, Version 2.0
|
|
5
|
+
* (the "License"); you may not use this file except in compliance with the
|
|
6
|
+
* License. You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
12
|
+
* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
|
|
13
|
+
* License for the specific language governing permissions and limitations under
|
|
14
|
+
* the License.
|
|
15
|
+
*/ "use strict";
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
function _export(target, all) {
|
|
20
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: all[name]
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
_export(exports, {
|
|
26
|
+
compose: function() {
|
|
27
|
+
return compose;
|
|
28
|
+
},
|
|
29
|
+
cva: function() {
|
|
30
|
+
return cva;
|
|
31
|
+
},
|
|
32
|
+
cx: function() {
|
|
33
|
+
return cx;
|
|
34
|
+
},
|
|
35
|
+
defineConfig: function() {
|
|
36
|
+
return defineConfig;
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const _clsx = require("clsx");
|
|
40
|
+
/* Exports
|
|
41
|
+
============================================ */ const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
|
|
42
|
+
const defineConfig = (options)=>{
|
|
43
|
+
const cx = function() {
|
|
44
|
+
for(var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++){
|
|
45
|
+
inputs[_key] = arguments[_key];
|
|
46
|
+
}
|
|
47
|
+
var _options_hooks, _options_hooks1;
|
|
48
|
+
if (typeof (options === null || options === void 0 ? void 0 : (_options_hooks = options.hooks) === null || _options_hooks === void 0 ? void 0 : _options_hooks["cx:done"]) !== "undefined") return options === null || options === void 0 ? void 0 : options.hooks["cx:done"]((0, _clsx.clsx)(inputs));
|
|
49
|
+
if (typeof (options === null || options === void 0 ? void 0 : (_options_hooks1 = options.hooks) === null || _options_hooks1 === void 0 ? void 0 : _options_hooks1.onComplete) !== "undefined") return options === null || options === void 0 ? void 0 : options.hooks.onComplete((0, _clsx.clsx)(inputs));
|
|
50
|
+
return (0, _clsx.clsx)(inputs);
|
|
51
|
+
};
|
|
52
|
+
const cva = (config)=>(props)=>{
|
|
53
|
+
var _config_compoundVariants;
|
|
54
|
+
if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(config === null || config === void 0 ? void 0 : config.base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
55
|
+
const { variants, defaultVariants } = config;
|
|
56
|
+
const getVariantClassNames = Object.keys(variants).map((variant)=>{
|
|
57
|
+
const variantProp = props === null || props === void 0 ? void 0 : props[variant];
|
|
58
|
+
const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
|
|
59
|
+
const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
|
|
60
|
+
return variants[variant][variantKey];
|
|
61
|
+
});
|
|
62
|
+
const defaultsAndProps = {
|
|
63
|
+
...defaultVariants,
|
|
64
|
+
// remove `undefined` props
|
|
65
|
+
...props && Object.entries(props).reduce((acc, param)=>{
|
|
66
|
+
let [key, value] = param;
|
|
67
|
+
return typeof value === "undefined" ? acc : {
|
|
68
|
+
...acc,
|
|
69
|
+
[key]: value
|
|
70
|
+
};
|
|
71
|
+
}, {})
|
|
72
|
+
};
|
|
73
|
+
const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
|
|
74
|
+
let { class: cvClass, className: cvClassName, ...cvConfig } = param;
|
|
75
|
+
return Object.entries(cvConfig).every((param)=>{
|
|
76
|
+
let [cvKey, cvSelector] = param;
|
|
77
|
+
const selector = defaultsAndProps[cvKey];
|
|
78
|
+
return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
|
|
79
|
+
}) ? [
|
|
80
|
+
...acc,
|
|
81
|
+
cvClass,
|
|
82
|
+
cvClassName
|
|
83
|
+
] : acc;
|
|
84
|
+
}, []);
|
|
85
|
+
return cx(config === null || config === void 0 ? void 0 : config.base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
86
|
+
};
|
|
87
|
+
const compose = function() {
|
|
88
|
+
for(var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++){
|
|
89
|
+
components[_key] = arguments[_key];
|
|
90
|
+
}
|
|
91
|
+
return (props)=>{
|
|
92
|
+
const propsWithoutClass = Object.fromEntries(Object.entries(props || {}).filter((param)=>{
|
|
93
|
+
let [key] = param;
|
|
94
|
+
return ![
|
|
95
|
+
"class",
|
|
96
|
+
"className"
|
|
97
|
+
].includes(key);
|
|
98
|
+
}));
|
|
99
|
+
return cx(components.map((component)=>component(propsWithoutClass)), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
return {
|
|
103
|
+
compose,
|
|
104
|
+
cva,
|
|
105
|
+
cx
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
const { compose, cva, cx } = defineConfig();
|
|
109
|
+
|
|
2
110
|
|
|
3
111
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\nimport { clsx } from \"clsx\";\n\n/* Types\n ============================================ */\n\n/* clsx\n ---------------------------------- */\n\n// When compiling with `declaration: true`, many projects experience the dreaded\n// TS2742 error. To combat this, we copy clsx's types manually.\n// Should this project move to JSDoc, this workaround would no longer be needed.\n\ntype ClassValue =\n | ClassArray\n | ClassDictionary\n | string\n | number\n | null\n | boolean\n | undefined;\ntype ClassDictionary = Record<string, any>;\ntype ClassArray = ClassValue[];\n\n/* Utils\n ---------------------------------- */\n\ntype OmitUndefined<T> = T extends undefined ? never : T;\ntype StringToBoolean<T> = T extends \"true\" | \"false\" ? boolean : T;\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never;\n\nexport type VariantProps<Component extends (...args: any) => any> = Omit<\n OmitUndefined<Parameters<Component>[0]>,\n \"class\" | \"className\"\n>;\n\n/* compose\n ---------------------------------- */\n\nexport interface Compose {\n <T extends ReturnType<CVA>[]>(\n ...components: [...T]\n ): (\n props?: (\n | UnionToIntersection<\n {\n [K in keyof T]: VariantProps<T[K]>;\n }[number]\n >\n | undefined\n ) &\n CVAClassProp,\n ) => string;\n}\n\n/* cx\n ---------------------------------- */\n\nexport interface CX {\n (...inputs: ClassValue[]): string;\n}\n\nexport type CXOptions = Parameters<CX>;\nexport type CXReturn = ReturnType<CX>;\n\n/* cva\n ============================================ */\n\ntype CVAConfigBase = { base?: ClassValue };\ntype CVAVariantShape = Record<string, Record<string, ClassValue>>;\ntype CVAVariantSchema<V extends CVAVariantShape> = {\n [Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;\n};\ntype CVAClassProp =\n | {\n class?: ClassValue;\n className?: never;\n }\n | {\n class?: never;\n className?: ClassValue;\n };\n\nexport interface CVA {\n <\n _ extends \"cva's generic parameters are restricted to internal use only.\",\n V,\n >(\n config: V extends CVAVariantShape\n ? CVAConfigBase & {\n variants?: V;\n compoundVariants?: (V extends CVAVariantShape\n ? (\n | CVAVariantSchema<V>\n | {\n [Variant in keyof V]?:\n | StringToBoolean<keyof V[Variant]>\n | StringToBoolean<keyof V[Variant]>[]\n | undefined;\n }\n ) &\n CVAClassProp\n : CVAClassProp)[];\n defaultVariants?: CVAVariantSchema<V>;\n }\n : CVAConfigBase & {\n variants?: never;\n compoundVariants?: never;\n defaultVariants?: never;\n },\n ): (\n props?: V extends CVAVariantShape\n ? CVAVariantSchema<V> & CVAClassProp\n : CVAClassProp,\n ) => string;\n}\n\n/* defineConfig\n ---------------------------------- */\n\nexport interface DefineConfigOptions {\n hooks?: {\n /**\n * @deprecated please use `onComplete`\n */\n \"cx:done\"?: (className: string) => string;\n /**\n * Returns the completed string of concatenated classes/classNames.\n */\n onComplete?: (className: string) => string;\n };\n}\n\nexport interface DefineConfig {\n (options?: DefineConfigOptions): {\n compose: Compose;\n cx: CX;\n cva: CVA;\n };\n}\n\n/* Exports\n ============================================ */\n\nconst falsyToString = <T extends unknown>(value: T) =>\n typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\n\nexport const defineConfig: DefineConfig = (options) => {\n const cx: CX = (...inputs) => {\n if (typeof options?.hooks?.[\"cx:done\"] !== \"undefined\")\n return options?.hooks[\"cx:done\"](clsx(inputs));\n\n if (typeof options?.hooks?.onComplete !== \"undefined\")\n return options?.hooks.onComplete(clsx(inputs));\n\n return clsx(inputs);\n };\n\n const cva: CVA = (config) => (props) => {\n if (config?.variants == null)\n return cx(config?.base, props?.class, props?.className);\n\n const { variants, defaultVariants } = config;\n\n const getVariantClassNames = Object.keys(variants).map(\n (variant: keyof typeof variants) => {\n const variantProp = props?.[variant as keyof typeof props];\n const defaultVariantProp = defaultVariants?.[variant];\n\n const variantKey = (falsyToString(variantProp) ||\n falsyToString(\n defaultVariantProp,\n )) as keyof (typeof variants)[typeof variant];\n\n return variants[variant][variantKey];\n },\n );\n\n const defaultsAndProps = {\n ...defaultVariants,\n // remove `undefined` props\n ...(props &&\n Object.entries(props).reduce<typeof props>(\n (acc, [key, value]) =>\n typeof value === \"undefined\" ? acc : { ...acc, [key]: value },\n {} as typeof props,\n )),\n };\n\n const getCompoundVariantClassNames = config?.compoundVariants?.reduce(\n (acc, { class: cvClass, className: cvClassName, ...cvConfig }) =>\n Object.entries(cvConfig).every(([cvKey, cvSelector]) => {\n const selector =\n defaultsAndProps[cvKey as keyof typeof defaultsAndProps];\n\n return Array.isArray(cvSelector)\n ? cvSelector.includes(selector)\n : selector === cvSelector;\n })\n ? [...acc, cvClass, cvClassName]\n : acc,\n [] as ClassValue[],\n );\n\n return cx(\n config?.base,\n getVariantClassNames,\n getCompoundVariantClassNames,\n props?.class,\n props?.className,\n );\n };\n\n const compose: Compose =\n (...components) =>\n (props) => {\n const propsWithoutClass = Object.fromEntries(\n Object.entries(props || {}).filter(\n ([key]) => ![\"class\", \"className\"].includes(key),\n ),\n );\n\n return cx(\n components.map((component) => component(propsWithoutClass)),\n props?.class,\n props?.className,\n );\n };\n\n return {\n compose,\n cva,\n cx,\n };\n};\n\nexport const { compose, cva, cx } = defineConfig();\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,87 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2022 Joe Bell. All rights reserved.
|
|
3
|
+
*
|
|
4
|
+
* This file is licensed to you under the Apache License, Version 2.0
|
|
5
|
+
* (the "License"); you may not use this file except in compliance with the
|
|
6
|
+
* License. You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
12
|
+
* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
|
|
13
|
+
* License for the specific language governing permissions and limitations under
|
|
14
|
+
* the License.
|
|
15
|
+
*/ import { clsx } from "clsx";
|
|
16
|
+
/* Exports
|
|
17
|
+
============================================ */ const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
|
|
18
|
+
export const defineConfig = (options)=>{
|
|
19
|
+
const cx = function() {
|
|
20
|
+
for(var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++){
|
|
21
|
+
inputs[_key] = arguments[_key];
|
|
22
|
+
}
|
|
23
|
+
var _options_hooks, _options_hooks1;
|
|
24
|
+
if (typeof (options === null || options === void 0 ? void 0 : (_options_hooks = options.hooks) === null || _options_hooks === void 0 ? void 0 : _options_hooks["cx:done"]) !== "undefined") return options === null || options === void 0 ? void 0 : options.hooks["cx:done"](clsx(inputs));
|
|
25
|
+
if (typeof (options === null || options === void 0 ? void 0 : (_options_hooks1 = options.hooks) === null || _options_hooks1 === void 0 ? void 0 : _options_hooks1.onComplete) !== "undefined") return options === null || options === void 0 ? void 0 : options.hooks.onComplete(clsx(inputs));
|
|
26
|
+
return clsx(inputs);
|
|
27
|
+
};
|
|
28
|
+
const cva = (config)=>(props)=>{
|
|
29
|
+
var _config_compoundVariants;
|
|
30
|
+
if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(config === null || config === void 0 ? void 0 : config.base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
31
|
+
const { variants, defaultVariants } = config;
|
|
32
|
+
const getVariantClassNames = Object.keys(variants).map((variant)=>{
|
|
33
|
+
const variantProp = props === null || props === void 0 ? void 0 : props[variant];
|
|
34
|
+
const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
|
|
35
|
+
const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
|
|
36
|
+
return variants[variant][variantKey];
|
|
37
|
+
});
|
|
38
|
+
const defaultsAndProps = {
|
|
39
|
+
...defaultVariants,
|
|
40
|
+
// remove `undefined` props
|
|
41
|
+
...props && Object.entries(props).reduce((acc, param)=>{
|
|
42
|
+
let [key, value] = param;
|
|
43
|
+
return typeof value === "undefined" ? acc : {
|
|
44
|
+
...acc,
|
|
45
|
+
[key]: value
|
|
46
|
+
};
|
|
47
|
+
}, {})
|
|
48
|
+
};
|
|
49
|
+
const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
|
|
50
|
+
let { class: cvClass, className: cvClassName, ...cvConfig } = param;
|
|
51
|
+
return Object.entries(cvConfig).every((param)=>{
|
|
52
|
+
let [cvKey, cvSelector] = param;
|
|
53
|
+
const selector = defaultsAndProps[cvKey];
|
|
54
|
+
return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
|
|
55
|
+
}) ? [
|
|
56
|
+
...acc,
|
|
57
|
+
cvClass,
|
|
58
|
+
cvClassName
|
|
59
|
+
] : acc;
|
|
60
|
+
}, []);
|
|
61
|
+
return cx(config === null || config === void 0 ? void 0 : config.base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
62
|
+
};
|
|
63
|
+
const compose = function() {
|
|
64
|
+
for(var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++){
|
|
65
|
+
components[_key] = arguments[_key];
|
|
66
|
+
}
|
|
67
|
+
return (props)=>{
|
|
68
|
+
const propsWithoutClass = Object.fromEntries(Object.entries(props || {}).filter((param)=>{
|
|
69
|
+
let [key] = param;
|
|
70
|
+
return ![
|
|
71
|
+
"class",
|
|
72
|
+
"className"
|
|
73
|
+
].includes(key);
|
|
74
|
+
}));
|
|
75
|
+
return cx(components.map((component)=>component(propsWithoutClass)), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
return {
|
|
79
|
+
compose,
|
|
80
|
+
cva,
|
|
81
|
+
cx
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
export const { compose, cva, cx } = defineConfig();
|
|
85
|
+
|
|
2
86
|
|
|
3
87
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;CAcC,GACD,SAAS,IAAI,QAAQ,OAAO;AAgJ5B;+CAC+C,GAE/C,MAAM,gBAAgB,CAAoB,QACxC,OAAO,UAAU,YAAY,CAAC,EAAE,MAAM,CAAC,GAAG,UAAU,IAAI,MAAM;AAEhE,OAAO,MAAM,eAA6B,CAAC;IACzC,MAAM,KAAS;yCAAI;YAAA;;YACN,gBAGA;QAHX,IAAI,QAAO,oBAAA,+BAAA,iBAAA,QAAS,KAAK,cAAd,qCAAA,cAAgB,CAAC,UAAU,MAAK,aACzC,OAAO,oBAAA,8BAAA,QAAS,KAAK,CAAC,UAAU,CAAC,KAAK;QAExC,IAAI,QAAO,oBAAA,+BAAA,kBAAA,QAAS,KAAK,cAAd,sCAAA,gBAAgB,UAAU,MAAK,aACxC,OAAO,oBAAA,8BAAA,QAAS,KAAK,CAAC,UAAU,CAAC,KAAK;QAExC,OAAO,KAAK;IACd;IAEA,MAAM,MAAW,CAAC,SAAW,CAAC;gBA+BS;YA9BrC,IAAI,CAAA,mBAAA,6BAAA,OAAQ,QAAQ,KAAI,MACtB,OAAO,GAAG,mBAAA,6BAAA,OAAQ,IAAI,EAAE,kBAAA,4BAAA,MAAO,KAAK,EAAE,kBAAA,4BAAA,MAAO,SAAS;YAExD,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG;YAEtC,MAAM,uBAAuB,OAAO,IAAI,CAAC,UAAU,GAAG,CACpD,CAAC;gBACC,MAAM,cAAc,kBAAA,4BAAA,KAAO,CAAC,QAA8B;gBAC1D,MAAM,qBAAqB,4BAAA,sCAAA,eAAiB,CAAC,QAAQ;gBAErD,MAAM,aAAc,cAAc,gBAChC,cACE;gBAGJ,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW;YACtC;YAGF,MAAM,mBAAmB;gBACvB,GAAG,eAAe;gBAClB,2BAA2B;gBAC3B,GAAI,SACF,OAAO,OAAO,CAAC,OAAO,MAAM,CAC1B,CAAC;wBAAK,CAAC,KAAK,MAAM;2BAChB,OAAO,UAAU,cAAc,MAAM;wBAAE,GAAG,GAAG;wBAAE,CAAC,IAAI,EAAE;oBAAM;mBAC9D,CAAC,EACF;YACL;YAEA,MAAM,+BAA+B,mBAAA,8BAAA,2BAAA,OAAQ,gBAAgB,cAAxB,+CAAA,yBAA0B,MAAM,CACnE,CAAC;oBAAK,EAAE,OAAO,OAAO,EAAE,WAAW,WAAW,EAAE,GAAG,UAAU;uBAC3D,OAAO,OAAO,CAAC,UAAU,KAAK,CAAC;wBAAC,CAAC,OAAO,WAAW;oBACjD,MAAM,WACJ,gBAAgB,CAAC,MAAuC;oBAE1D,OAAO,MAAM,OAAO,CAAC,cACjB,WAAW,QAAQ,CAAC,YACpB,aAAa;gBACnB,KACI;uBAAI;oBAAK;oBAAS;iBAAY,GAC9B;eACN,EAAE;YAGJ,OAAO,GACL,mBAAA,6BAAA,OAAQ,IAAI,EACZ,sBACA,8BACA,kBAAA,4BAAA,MAAO,KAAK,EACZ,kBAAA,4BAAA,MAAO,SAAS;QAEpB;IAEA,MAAM,UACJ;yCAAI;YAAA;;eACJ,CAAC;YACC,MAAM,oBAAoB,OAAO,WAAW,CAC1C,OAAO,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAChC;oBAAC,CAAC,IAAI;uBAAK,CAAC;oBAAC;oBAAS;iBAAY,CAAC,QAAQ,CAAC;;YAIhD,OAAO,GACL,WAAW,GAAG,CAAC,CAAC,YAAc,UAAU,qBACxC,kBAAA,4BAAA,MAAO,KAAK,EACZ,kBAAA,4BAAA,MAAO,SAAS;QAEpB;;IAEF,OAAO;QACL;QACA;QACA;IACF;AACF,EAAE;AAEF,OAAO,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,eAAe","file":"index.mjs","sourcesContent":["/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\nimport { clsx } from \"clsx\";\n\n/* Types\n ============================================ */\n\n/* clsx\n ---------------------------------- */\n\n// When compiling with `declaration: true`, many projects experience the dreaded\n// TS2742 error. To combat this, we copy clsx's types manually.\n// Should this project move to JSDoc, this workaround would no longer be needed.\n\ntype ClassValue =\n | ClassArray\n | ClassDictionary\n | string\n | number\n | null\n | boolean\n | undefined;\ntype ClassDictionary = Record<string, any>;\ntype ClassArray = ClassValue[];\n\n/* Utils\n ---------------------------------- */\n\ntype OmitUndefined<T> = T extends undefined ? never : T;\ntype StringToBoolean<T> = T extends \"true\" | \"false\" ? boolean : T;\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never;\n\nexport type VariantProps<Component extends (...args: any) => any> = Omit<\n OmitUndefined<Parameters<Component>[0]>,\n \"class\" | \"className\"\n>;\n\n/* compose\n ---------------------------------- */\n\nexport interface Compose {\n <T extends ReturnType<CVA>[]>(\n ...components: [...T]\n ): (\n props?: (\n | UnionToIntersection<\n {\n [K in keyof T]: VariantProps<T[K]>;\n }[number]\n >\n | undefined\n ) &\n CVAClassProp,\n ) => string;\n}\n\n/* cx\n ---------------------------------- */\n\nexport interface CX {\n (...inputs: ClassValue[]): string;\n}\n\nexport type CXOptions = Parameters<CX>;\nexport type CXReturn = ReturnType<CX>;\n\n/* cva\n ============================================ */\n\ntype CVAConfigBase = { base?: ClassValue };\ntype CVAVariantShape = Record<string, Record<string, ClassValue>>;\ntype CVAVariantSchema<V extends CVAVariantShape> = {\n [Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;\n};\ntype CVAClassProp =\n | {\n class?: ClassValue;\n className?: never;\n }\n | {\n class?: never;\n className?: ClassValue;\n };\n\nexport interface CVA {\n <\n _ extends \"cva's generic parameters are restricted to internal use only.\",\n V,\n >(\n config: V extends CVAVariantShape\n ? CVAConfigBase & {\n variants?: V;\n compoundVariants?: (V extends CVAVariantShape\n ? (\n | CVAVariantSchema<V>\n | {\n [Variant in keyof V]?:\n | StringToBoolean<keyof V[Variant]>\n | StringToBoolean<keyof V[Variant]>[]\n | undefined;\n }\n ) &\n CVAClassProp\n : CVAClassProp)[];\n defaultVariants?: CVAVariantSchema<V>;\n }\n : CVAConfigBase & {\n variants?: never;\n compoundVariants?: never;\n defaultVariants?: never;\n },\n ): (\n props?: V extends CVAVariantShape\n ? CVAVariantSchema<V> & CVAClassProp\n : CVAClassProp,\n ) => string;\n}\n\n/* defineConfig\n ---------------------------------- */\n\nexport interface DefineConfigOptions {\n hooks?: {\n /**\n * @deprecated please use `onComplete`\n */\n \"cx:done\"?: (className: string) => string;\n /**\n * Returns the completed string of concatenated classes/classNames.\n */\n onComplete?: (className: string) => string;\n };\n}\n\nexport interface DefineConfig {\n (options?: DefineConfigOptions): {\n compose: Compose;\n cx: CX;\n cva: CVA;\n };\n}\n\n/* Exports\n ============================================ */\n\nconst falsyToString = <T extends unknown>(value: T) =>\n typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\n\nexport const defineConfig: DefineConfig = (options) => {\n const cx: CX = (...inputs) => {\n if (typeof options?.hooks?.[\"cx:done\"] !== \"undefined\")\n return options?.hooks[\"cx:done\"](clsx(inputs));\n\n if (typeof options?.hooks?.onComplete !== \"undefined\")\n return options?.hooks.onComplete(clsx(inputs));\n\n return clsx(inputs);\n };\n\n const cva: CVA = (config) => (props) => {\n if (config?.variants == null)\n return cx(config?.base, props?.class, props?.className);\n\n const { variants, defaultVariants } = config;\n\n const getVariantClassNames = Object.keys(variants).map(\n (variant: keyof typeof variants) => {\n const variantProp = props?.[variant as keyof typeof props];\n const defaultVariantProp = defaultVariants?.[variant];\n\n const variantKey = (falsyToString(variantProp) ||\n falsyToString(\n defaultVariantProp,\n )) as keyof (typeof variants)[typeof variant];\n\n return variants[variant][variantKey];\n },\n );\n\n const defaultsAndProps = {\n ...defaultVariants,\n // remove `undefined` props\n ...(props &&\n Object.entries(props).reduce<typeof props>(\n (acc, [key, value]) =>\n typeof value === \"undefined\" ? acc : { ...acc, [key]: value },\n {} as typeof props,\n )),\n };\n\n const getCompoundVariantClassNames = config?.compoundVariants?.reduce(\n (acc, { class: cvClass, className: cvClassName, ...cvConfig }) =>\n Object.entries(cvConfig).every(([cvKey, cvSelector]) => {\n const selector =\n defaultsAndProps[cvKey as keyof typeof defaultsAndProps];\n\n return Array.isArray(cvSelector)\n ? cvSelector.includes(selector)\n : selector === cvSelector;\n })\n ? [...acc, cvClass, cvClassName]\n : acc,\n [] as ClassValue[],\n );\n\n return cx(\n config?.base,\n getVariantClassNames,\n getCompoundVariantClassNames,\n props?.class,\n props?.className,\n );\n };\n\n const compose: Compose =\n (...components) =>\n (props) => {\n const propsWithoutClass = Object.fromEntries(\n Object.entries(props || {}).filter(\n ([key]) => ![\"class\", \"className\"].includes(key),\n ),\n );\n\n return cx(\n components.map((component) => component(propsWithoutClass)),\n props?.class,\n props?.className,\n );\n };\n\n return {\n compose,\n cva,\n cx,\n };\n};\n\nexport const { compose, cva, cx } = defineConfig();\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cva",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.2",
|
|
4
4
|
"description": "Class Variance Authority 🧬",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Class Variance Authority",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"homepage": "https://github.com/joe-bell/cva#readme",
|
|
18
18
|
"bugs": "https://github.com/joe-bell/cva/issues",
|
|
19
19
|
"repository": "https://github.com/joe-bell/cva.git",
|
|
20
|
-
"funding": "https://
|
|
20
|
+
"funding": "https://polar.sh/cva",
|
|
21
21
|
"license": "Apache-2.0",
|
|
22
22
|
"author": "Joe Bell (https://joebell.co.uk)",
|
|
23
23
|
"exports": {
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
"dist/"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"clsx": "2.
|
|
35
|
+
"clsx": "^2.1.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@swc/cli": "0.
|
|
39
|
-
"@swc/core": "1.
|
|
40
|
-
"@types/node": "
|
|
41
|
-
"@types/react": "18.
|
|
42
|
-
"@types/react-dom": "18.
|
|
43
|
-
"bundlesize": "0.18.
|
|
38
|
+
"@swc/cli": "0.3.12",
|
|
39
|
+
"@swc/core": "1.4.16",
|
|
40
|
+
"@types/node": "20.12.7",
|
|
41
|
+
"@types/react": "18.2.79",
|
|
42
|
+
"@types/react-dom": "18.2.25",
|
|
43
|
+
"bundlesize": "0.18.2",
|
|
44
44
|
"npm-run-all": "4.1.5",
|
|
45
45
|
"react": "18.2.0",
|
|
46
46
|
"react-dom": "18.2.0",
|
|
47
|
-
"ts-node": "10.
|
|
48
|
-
"typescript": "5.
|
|
47
|
+
"ts-node": "10.9.2",
|
|
48
|
+
"typescript": "5.4.5"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"typescript": ">= 4.5.5 < 6"
|
|
@@ -62,6 +62,6 @@
|
|
|
62
62
|
"build:tsc": "tsc --project .config/tsconfig.build.json",
|
|
63
63
|
"check": "tsc --project tsconfig.json --noEmit",
|
|
64
64
|
"dev": "jest --config .config/jest.config.ts --watch",
|
|
65
|
-
"bundlesize": "pnpm build && bundlesize -f 'dist/*.js' -s 1.
|
|
65
|
+
"bundlesize": "pnpm build && bundlesize -f 'dist/*.js' -s 1.6KB"
|
|
66
66
|
}
|
|
67
67
|
}
|
package/src/index.ts
DELETED
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
import { clsx } from "clsx";
|
|
2
|
-
|
|
3
|
-
/* Types
|
|
4
|
-
============================================ */
|
|
5
|
-
|
|
6
|
-
/* clsx
|
|
7
|
-
---------------------------------- */
|
|
8
|
-
|
|
9
|
-
// When compiling with `declaration: true`, many projects experience the dreaded
|
|
10
|
-
// TS2742 error. To combat this, we copy clsx's types manually.
|
|
11
|
-
// Should this project move to JSDoc, this workaround would no longer be needed.
|
|
12
|
-
|
|
13
|
-
type ClassValue =
|
|
14
|
-
| ClassArray
|
|
15
|
-
| ClassDictionary
|
|
16
|
-
| string
|
|
17
|
-
| number
|
|
18
|
-
| null
|
|
19
|
-
| boolean
|
|
20
|
-
| undefined;
|
|
21
|
-
type ClassDictionary = Record<string, any>;
|
|
22
|
-
type ClassArray = ClassValue[];
|
|
23
|
-
|
|
24
|
-
/* Utils
|
|
25
|
-
---------------------------------- */
|
|
26
|
-
|
|
27
|
-
type OmitUndefined<T> = T extends undefined ? never : T;
|
|
28
|
-
type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
|
|
29
|
-
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
|
|
30
|
-
k: infer I
|
|
31
|
-
) => void
|
|
32
|
-
? I
|
|
33
|
-
: never;
|
|
34
|
-
|
|
35
|
-
export type VariantProps<Component extends (...args: any) => any> = Omit<
|
|
36
|
-
OmitUndefined<Parameters<Component>[0]>,
|
|
37
|
-
"class" | "className"
|
|
38
|
-
>;
|
|
39
|
-
|
|
40
|
-
/* compose
|
|
41
|
-
---------------------------------- */
|
|
42
|
-
|
|
43
|
-
export interface Compose {
|
|
44
|
-
<T extends ReturnType<CVA>[]>(...components: [...T]): (
|
|
45
|
-
props: (
|
|
46
|
-
| UnionToIntersection<
|
|
47
|
-
{
|
|
48
|
-
[K in keyof T]: VariantProps<T[K]>;
|
|
49
|
-
}[number]
|
|
50
|
-
>
|
|
51
|
-
| undefined
|
|
52
|
-
) &
|
|
53
|
-
CVAClassProp
|
|
54
|
-
) => string;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/* cx
|
|
58
|
-
---------------------------------- */
|
|
59
|
-
|
|
60
|
-
export interface CX {
|
|
61
|
-
(...inputs: ClassValue[]): string;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export type CXOptions = Parameters<CX>;
|
|
65
|
-
export type CXReturn = ReturnType<CX>;
|
|
66
|
-
|
|
67
|
-
/* cva
|
|
68
|
-
============================================ */
|
|
69
|
-
|
|
70
|
-
type CVAConfigBase = { base?: ClassValue };
|
|
71
|
-
type CVAVariantShape = Record<string, Record<string, ClassValue>>;
|
|
72
|
-
type CVAVariantSchema<V extends CVAVariantShape> = {
|
|
73
|
-
[Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;
|
|
74
|
-
};
|
|
75
|
-
type CVAClassProp =
|
|
76
|
-
| {
|
|
77
|
-
class?: ClassValue;
|
|
78
|
-
className?: never;
|
|
79
|
-
}
|
|
80
|
-
| {
|
|
81
|
-
class?: never;
|
|
82
|
-
className?: ClassValue;
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
export interface CVA {
|
|
86
|
-
<
|
|
87
|
-
_ extends "cva's generic parameters are restricted to internal use only.",
|
|
88
|
-
V
|
|
89
|
-
>(
|
|
90
|
-
config: V extends CVAVariantShape
|
|
91
|
-
? CVAConfigBase & {
|
|
92
|
-
variants?: V;
|
|
93
|
-
compoundVariants?: (V extends CVAVariantShape
|
|
94
|
-
? (
|
|
95
|
-
| CVAVariantSchema<V>
|
|
96
|
-
| {
|
|
97
|
-
[Variant in keyof V]?:
|
|
98
|
-
| StringToBoolean<keyof V[Variant]>
|
|
99
|
-
| StringToBoolean<keyof V[Variant]>[]
|
|
100
|
-
| undefined;
|
|
101
|
-
}
|
|
102
|
-
) &
|
|
103
|
-
CVAClassProp
|
|
104
|
-
: CVAClassProp)[];
|
|
105
|
-
defaultVariants?: CVAVariantSchema<V>;
|
|
106
|
-
}
|
|
107
|
-
: CVAConfigBase & {
|
|
108
|
-
variants?: never;
|
|
109
|
-
compoundVariants?: never;
|
|
110
|
-
defaultVariants?: never;
|
|
111
|
-
}
|
|
112
|
-
): (
|
|
113
|
-
props?: V extends CVAVariantShape
|
|
114
|
-
? CVAVariantSchema<V> & CVAClassProp
|
|
115
|
-
: CVAClassProp
|
|
116
|
-
) => string;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* defineConfig
|
|
120
|
-
---------------------------------- */
|
|
121
|
-
|
|
122
|
-
export interface DefineConfigOptions {
|
|
123
|
-
hooks?: {
|
|
124
|
-
"cx:done"?: (className: string) => string;
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export interface DefineConfig {
|
|
129
|
-
(options?: DefineConfigOptions): {
|
|
130
|
-
compose: Compose;
|
|
131
|
-
cx: CX;
|
|
132
|
-
cva: CVA;
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* Exports
|
|
137
|
-
============================================ */
|
|
138
|
-
|
|
139
|
-
const falsyToString = <T extends unknown>(value: T) =>
|
|
140
|
-
typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
|
|
141
|
-
|
|
142
|
-
export const defineConfig: DefineConfig = (options) => {
|
|
143
|
-
const cx: CX = (...inputs) =>
|
|
144
|
-
typeof options?.hooks?.["cx:done"] !== "undefined"
|
|
145
|
-
? options?.hooks["cx:done"](clsx(inputs))
|
|
146
|
-
: clsx(inputs);
|
|
147
|
-
|
|
148
|
-
const cva: CVA = (config) => (props) => {
|
|
149
|
-
if (config?.variants == null)
|
|
150
|
-
return cx(config?.base, props?.class, props?.className);
|
|
151
|
-
|
|
152
|
-
const { variants, defaultVariants } = config;
|
|
153
|
-
|
|
154
|
-
const getVariantClassNames = Object.keys(variants).map(
|
|
155
|
-
(variant: keyof typeof variants) => {
|
|
156
|
-
const variantProp = props?.[variant as keyof typeof props];
|
|
157
|
-
const defaultVariantProp = defaultVariants?.[variant];
|
|
158
|
-
|
|
159
|
-
const variantKey = (falsyToString(variantProp) ||
|
|
160
|
-
falsyToString(
|
|
161
|
-
defaultVariantProp
|
|
162
|
-
)) as keyof typeof variants[typeof variant];
|
|
163
|
-
|
|
164
|
-
return variants[variant][variantKey];
|
|
165
|
-
}
|
|
166
|
-
);
|
|
167
|
-
|
|
168
|
-
const defaultsAndProps = {
|
|
169
|
-
...defaultVariants,
|
|
170
|
-
// remove `undefined` props
|
|
171
|
-
...(props &&
|
|
172
|
-
Object.entries(props).reduce<typeof props>(
|
|
173
|
-
(acc, [key, value]) =>
|
|
174
|
-
typeof value === "undefined" ? acc : { ...acc, [key]: value },
|
|
175
|
-
{} as typeof props
|
|
176
|
-
)),
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
const getCompoundVariantClassNames = config?.compoundVariants?.reduce(
|
|
180
|
-
(acc, { class: cvClass, className: cvClassName, ...cvConfig }) =>
|
|
181
|
-
Object.entries(cvConfig).every(([cvKey, cvSelector]) => {
|
|
182
|
-
const selector =
|
|
183
|
-
defaultsAndProps[cvKey as keyof typeof defaultsAndProps];
|
|
184
|
-
|
|
185
|
-
return Array.isArray(cvSelector)
|
|
186
|
-
? cvSelector.includes(selector)
|
|
187
|
-
: selector === cvSelector;
|
|
188
|
-
})
|
|
189
|
-
? [...acc, cvClass, cvClassName]
|
|
190
|
-
: acc,
|
|
191
|
-
[] as ClassValue[]
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
return cx(
|
|
195
|
-
config?.base,
|
|
196
|
-
getVariantClassNames,
|
|
197
|
-
getCompoundVariantClassNames,
|
|
198
|
-
props?.class,
|
|
199
|
-
props?.className
|
|
200
|
-
);
|
|
201
|
-
};
|
|
202
|
-
|
|
203
|
-
const compose: Compose =
|
|
204
|
-
(...components) =>
|
|
205
|
-
(props) => {
|
|
206
|
-
const propsWithoutClass = Object.fromEntries(
|
|
207
|
-
Object.entries(props || {}).filter(
|
|
208
|
-
([key]) => !["class", "className"].includes(key)
|
|
209
|
-
)
|
|
210
|
-
);
|
|
211
|
-
|
|
212
|
-
return cx(
|
|
213
|
-
components.map((component) => component(propsWithoutClass)),
|
|
214
|
-
props?.class,
|
|
215
|
-
props?.className
|
|
216
|
-
);
|
|
217
|
-
};
|
|
218
|
-
|
|
219
|
-
return {
|
|
220
|
-
compose,
|
|
221
|
-
cva,
|
|
222
|
-
cx,
|
|
223
|
-
};
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
export const { compose, cva, cx } = defineConfig();
|