css-variants 1.1.3 → 2.0.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.
Files changed (70) hide show
  1. package/README.md +113 -153
  2. package/dist/cjs/cv.d.ts +48 -2
  3. package/dist/cjs/cv.js +49 -37
  4. package/dist/cjs/cv.js.map +1 -1
  5. package/dist/cjs/cx.d.ts +4 -2
  6. package/dist/cjs/cx.js +49 -34
  7. package/dist/cjs/cx.js.map +1 -1
  8. package/dist/cjs/index.d.ts +3 -2
  9. package/dist/cjs/index.js +3 -1
  10. package/dist/cjs/index.js.map +1 -1
  11. package/dist/cjs/scv.d.ts +56 -0
  12. package/dist/cjs/scv.js +90 -0
  13. package/dist/cjs/scv.js.map +1 -0
  14. package/dist/cjs/ssv.d.ts +51 -0
  15. package/dist/cjs/ssv.js +77 -0
  16. package/dist/cjs/ssv.js.map +1 -0
  17. package/dist/cjs/sv.d.ts +44 -0
  18. package/dist/cjs/sv.js +63 -0
  19. package/dist/cjs/sv.js.map +1 -0
  20. package/dist/cjs/utils/compact.d.ts +1 -0
  21. package/dist/cjs/utils/compact.js +13 -0
  22. package/dist/cjs/utils/compact.js.map +1 -0
  23. package/dist/cjs/utils/entries.d.ts +1 -0
  24. package/dist/cjs/utils/entries.js +7 -0
  25. package/dist/cjs/utils/entries.js.map +1 -0
  26. package/dist/cjs/utils/types.d.ts +14 -0
  27. package/dist/cjs/{types.js.map → utils/types.js.map} +1 -1
  28. package/dist/esm/cv.d.ts +48 -2
  29. package/dist/esm/cv.js +49 -37
  30. package/dist/esm/cv.js.map +1 -1
  31. package/dist/esm/cx.d.ts +4 -2
  32. package/dist/esm/cx.js +47 -31
  33. package/dist/esm/cx.js.map +1 -1
  34. package/dist/esm/index.d.ts +3 -2
  35. package/dist/esm/index.js +3 -1
  36. package/dist/esm/index.js.map +1 -1
  37. package/dist/esm/scv.d.ts +56 -0
  38. package/dist/esm/scv.js +86 -0
  39. package/dist/esm/scv.js.map +1 -0
  40. package/dist/esm/ssv.d.ts +51 -0
  41. package/dist/esm/ssv.js +73 -0
  42. package/dist/esm/ssv.js.map +1 -0
  43. package/dist/esm/sv.d.ts +44 -0
  44. package/dist/esm/sv.js +59 -0
  45. package/dist/esm/sv.js.map +1 -0
  46. package/dist/esm/utils/compact.d.ts +1 -0
  47. package/dist/esm/utils/compact.js +10 -0
  48. package/dist/esm/utils/compact.js.map +1 -0
  49. package/dist/esm/utils/entries.d.ts +1 -0
  50. package/dist/esm/utils/entries.js +4 -0
  51. package/dist/esm/utils/entries.js.map +1 -0
  52. package/dist/esm/utils/types.d.ts +14 -0
  53. package/dist/esm/{types.js.map → utils/types.js.map} +1 -1
  54. package/package.json +13 -10
  55. package/dist/cjs/csv.d.ts +0 -3
  56. package/dist/cjs/csv.js +0 -83
  57. package/dist/cjs/csv.js.map +0 -1
  58. package/dist/cjs/types.d.ts +0 -46
  59. package/dist/cjs/utils.d.ts +0 -6
  60. package/dist/cjs/utils.js +0 -42
  61. package/dist/cjs/utils.js.map +0 -1
  62. package/dist/esm/csv.d.ts +0 -3
  63. package/dist/esm/csv.js +0 -79
  64. package/dist/esm/csv.js.map +0 -1
  65. package/dist/esm/types.d.ts +0 -46
  66. package/dist/esm/utils.d.ts +0 -6
  67. package/dist/esm/utils.js +0 -35
  68. package/dist/esm/utils.js.map +0 -1
  69. /package/dist/cjs/{types.js → utils/types.js} +0 -0
  70. /package/dist/esm/{types.js → utils/types.js} +0 -0
package/dist/esm/cv.js CHANGED
@@ -1,53 +1,65 @@
1
- import { compact, entries, match } from './utils';
2
- const push = (data, value) => {
3
- if (typeof value === 'string') {
4
- data.className && (data.className += ' ');
5
- data.className += value.trim();
6
- }
7
- else {
8
- if (value?.className) {
9
- data.className && (data.className += ' ');
10
- data.className += value.className.trim();
11
- }
12
- if (value?.style) {
13
- data.style = { ...data.style, ...value.style };
14
- }
15
- }
16
- };
1
+ import { compact } from './utils/compact';
2
+ import { entries } from './utils/entries';
3
+ import { cx } from './cx';
4
+ /**
5
+ * Creates a class variant function that combines base classes, variants, compound variants, and default variants.
6
+ *
7
+ * @template T - Type of the variant record
8
+ * @param config - Configuration object for creating class variants
9
+ * @returns A function that accepts variant props and returns a combined class string
10
+ *
11
+ * @example
12
+ * ```typescript
13
+ * const button = cv({
14
+ * base: 'px-4 py-2 rounded',
15
+ * variants: {
16
+ * color: {
17
+ * primary: 'bg-blue-500 text-white',
18
+ * secondary: 'bg-gray-500 text-white'
19
+ * },
20
+ * size: {
21
+ * sm: 'text-sm',
22
+ * lg: 'text-lg'
23
+ * }
24
+ * },
25
+ * defaultVariants: {
26
+ * color: 'primary',
27
+ * size: 'sm'
28
+ * }
29
+ * });
30
+ *
31
+ * button(); // => 'px-4 py-2 rounded bg-blue-500 text-white text-sm'
32
+ * button({ color: 'secondary' }); // => 'px-4 py-2 rounded bg-gray-500 text-white text-sm'
33
+ * ```
34
+ */
17
35
  export const cv = (config) => {
18
- const { base, variants, compoundVariants, defaultVariants, onDone } = config;
36
+ const { base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
19
37
  return (props) => {
20
- const { className: propClassName, style: propStyle, ...rest } = props ?? {};
21
- const variantProps = { ...defaultVariants, ...compact(rest) };
22
- const css = { className: '', style: {} };
23
- let tmp;
38
+ const { className, ...rest } = props ?? {};
39
+ const mergedProps = { ...defaultVariants, ...compact(rest) };
40
+ const classValues = [];
24
41
  if (base) {
25
- push(css, base);
42
+ classValues.push(base);
26
43
  }
27
44
  if (variants) {
28
- for (const [key, variant] of entries(variants)) {
29
- if ((tmp = variant[variantProps[key]])) {
30
- push(css, tmp);
45
+ for (const [key, value] of entries(mergedProps)) {
46
+ const classValue = variants[key][value];
47
+ if (classValue) {
48
+ classValues.push(classValue);
31
49
  }
32
50
  }
33
51
  }
34
52
  if (compoundVariants) {
35
- for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants) {
36
- if (match(compoundVariant, variantProps)) {
37
- push(css, { className: cvClassName, style: cvStyle });
53
+ for (const { className: classValue, ...compoundVariant } of compoundVariants) {
54
+ if (entries(compoundVariant).every(([key, value]) => Array.isArray(value) ? value.includes(mergedProps[key]) : value === mergedProps[key])) {
55
+ classValues.push(classValue);
38
56
  }
39
57
  }
40
58
  }
41
- if (propClassName) {
42
- css.className && (css.className += ' ');
43
- css.className += propClassName;
44
- }
45
- if (propStyle) {
46
- css.style = { ...css.style, ...propStyle };
59
+ if (className) {
60
+ classValues.push(className);
47
61
  }
48
- if (onDone)
49
- return onDone(css);
50
- return css;
62
+ return classNameResolver(...classValues);
51
63
  };
52
64
  };
53
65
  export default cv;
@@ -1 +1 @@
1
- {"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,EAAE,EAAc,MAAM,MAAM,CAAA;AAoBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,GAAG,EAAE,EAAE,GAAG,MAAM,CAAA;IAC5F,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAE1C,MAAM,WAAW,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;QAE5D,MAAM,WAAW,GAAiB,EAAE,CAAA;QAEpC,IAAI,IAAI,EAAE,CAAC;YACT,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;gBAChD,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAe,CAAC,CAAA;gBACjD,IAAI,UAAU,EAAE,CAAC;oBACf,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAC7E,IACE,OAAO,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAC9C,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,CACrF,EACD,CAAC;oBACD,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACd,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAC7B,CAAC;QAED,OAAO,iBAAiB,CAAC,GAAG,WAAW,CAAC,CAAA;IAC1C,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
package/dist/esm/cx.d.ts CHANGED
@@ -1,3 +1,5 @@
1
- type Arg = string | number | null | undefined | Record<string, boolean>;
2
- export declare const cx: (...args: (Arg | Arg[])[]) => string;
1
+ export type ClassDictionary = Record<string, boolean | string | number>;
2
+ export type ClassValue = ClassValue[] | string | number | bigint | ClassDictionary | null | boolean | undefined;
3
+ export type ClassArray = ClassValue[];
4
+ export declare function cx(...args: ClassValue[]): string;
3
5
  export default cx;
package/dist/esm/cx.js CHANGED
@@ -1,37 +1,53 @@
1
- export const cx = (...args) => {
2
- let className = '';
3
- let i = 0;
4
- let arg;
5
- let next;
6
- for (i = 0; i < args.length; i++) {
7
- if ((arg = args[i])) {
8
- if (typeof arg === 'string') {
9
- className && (className += ' ');
10
- className += arg;
11
- }
12
- else if (typeof arg === 'number') {
13
- className && (className += ' ');
14
- className += arg;
15
- }
16
- else if (typeof arg === 'object') {
17
- if (Array.isArray(arg)) {
18
- if ((next = cx(...arg))) {
19
- className && (className += ' ');
20
- className += next;
21
- }
22
- }
23
- else {
24
- for (const key in arg) {
25
- if (arg[key]) {
26
- className && (className += ' ');
27
- className += key;
28
- }
29
- }
1
+ // credit: https://github.com/lukeed/clsx
2
+ function toVal(input) {
3
+ if (typeof input === 'string') {
4
+ return input;
5
+ }
6
+ if (typeof input === 'number' || typeof input === 'bigint') {
7
+ return String(input);
8
+ }
9
+ if (input === null || input === undefined || typeof input === 'boolean') {
10
+ return '';
11
+ }
12
+ let result = '';
13
+ if (Array.isArray(input)) {
14
+ let i = 0;
15
+ let tmpClassValue;
16
+ let tmpClassName;
17
+ for (; i < input.length; i++) {
18
+ if ((tmpClassValue = input[i])) {
19
+ if ((tmpClassName = toVal(tmpClassValue))) {
20
+ if (result)
21
+ result += ' ';
22
+ result += tmpClassName;
30
23
  }
31
24
  }
32
25
  }
26
+ return result;
27
+ }
28
+ for (const key in input) {
29
+ if (input[key]) {
30
+ result && (result += ' ');
31
+ result += key;
32
+ }
33
+ }
34
+ return result;
35
+ }
36
+ export function cx(...args) {
37
+ let result = '';
38
+ let i = 0;
39
+ let tmpClassValue;
40
+ let tmpClassName;
41
+ for (; i < args.length; i++) {
42
+ if ((tmpClassValue = args[i])) {
43
+ if ((tmpClassName = toVal(tmpClassValue))) {
44
+ if (result)
45
+ result += ' ';
46
+ result += tmpClassName;
47
+ }
48
+ }
33
49
  }
34
- return className;
35
- };
50
+ return result;
51
+ }
36
52
  export default cx;
37
53
  //# sourceMappingURL=cx.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAClB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,GAAgB,CAAA;IACpB,IAAI,IAAY,CAAA;IAEhB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;wBACxB,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;wBAC/B,SAAS,IAAI,IAAI,CAAA;oBACnB,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;wBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;4BACb,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;4BAC/B,SAAS,IAAI,GAAG,CAAA;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
1
+ {"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAMzC,SAAS,KAAK,CAAC,KAAiB;IAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;IACtB,CAAC;IAED,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QACxE,OAAO,EAAE,CAAA;IACX,CAAC;IAED,IAAI,MAAM,GAAG,EAAE,CAAA;IAEf,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,CAAA;QACT,IAAI,aAAyB,CAAA;QAC7B,IAAI,YAAoB,CAAA;QACxB,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;oBAC1C,IAAI,MAAM;wBAAE,MAAM,IAAI,GAAG,CAAA;oBACzB,MAAM,IAAI,YAAY,CAAA;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;IAED,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACf,MAAM,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAA;YACzB,MAAM,IAAI,GAAG,CAAA;QACf,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,GAAG,IAAkB;IACtC,IAAI,MAAM,GAAG,EAAE,CAAA;IACf,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,aAAyB,CAAA;IAC7B,IAAI,YAAoB,CAAA;IAExB,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;gBAC1C,IAAI,MAAM;oBAAE,MAAM,IAAI,GAAG,CAAA;gBACzB,MAAM,IAAI,YAAY,CAAA;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,EAAE,CAAA"}
@@ -1,4 +1,5 @@
1
1
  export * from './cx';
2
2
  export * from './cv';
3
- export * from './csv';
4
- export { VariantProps } from './types';
3
+ export * from './scv';
4
+ export * from './sv';
5
+ export * from './ssv';
package/dist/esm/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  export * from './cx';
2
2
  export * from './cv';
3
- export * from './csv';
3
+ export * from './scv';
4
+ export * from './sv';
5
+ export * from './ssv';
4
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAA;AACpB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAA;AACpB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA;AACrB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA"}
@@ -0,0 +1,56 @@
1
+ import { ObjectKeyPicker, ObjectKeyArrayPicker, PartialRecord } from './utils/types';
2
+ import { cx, ClassValue } from './cx';
3
+ export type SlotClassRecord<S extends string> = PartialRecord<S, ClassValue>;
4
+ export type SlotClassVariantRecord<S extends string> = Record<string, Record<string, SlotClassRecord<S>>>;
5
+ export interface SlotClassVariantDefinition<S extends string, T extends SlotClassVariantRecord<S> | undefined> {
6
+ slots: S[];
7
+ base?: SlotClassRecord<S>;
8
+ variants?: T;
9
+ compoundVariants?: (ObjectKeyArrayPicker<T> & {
10
+ classNames: SlotClassRecord<S>;
11
+ })[];
12
+ defaultVariants?: ObjectKeyPicker<T>;
13
+ classNameResolver?: typeof cx;
14
+ }
15
+ export type SlotClassVariantFn<S extends string, T extends SlotClassVariantRecord<S> | undefined> = (props?: ObjectKeyPicker<T> & {
16
+ classNames?: SlotClassRecord<S>;
17
+ }) => Record<S, string>;
18
+ export type SlotClassVariantCreatorFn = <S extends string, T extends SlotClassVariantRecord<S> | undefined>(config: SlotClassVariantDefinition<S, T>) => SlotClassVariantFn<S, T>;
19
+ /**
20
+ * Creates a slot-based class variant function that manages class names for multiple slots with variants.
21
+ *
22
+ * @param config - Configuration object for creating the variant function
23
+ * @returns A function that accepts variant props and returns class names for each slot
24
+ *
25
+ * @example
26
+ * ```typescript
27
+ * const button = scv({
28
+ * slots: ['root', 'icon'],
29
+ * base: {
30
+ * root: 'btn',
31
+ * icon: 'btn-icon'
32
+ * },
33
+ * variants: {
34
+ * size: {
35
+ * sm: {
36
+ * root: 'btn-sm',
37
+ * icon: 'icon-sm'
38
+ * },
39
+ * lg: {
40
+ * root: 'btn-lg',
41
+ * icon: 'icon-lg'
42
+ * }
43
+ * }
44
+ * },
45
+ * defaultVariants: {
46
+ * size: 'sm'
47
+ * }
48
+ * })
49
+ *
50
+ * // Usage
51
+ * const classes = button({ size: 'lg' })
52
+ * // Result: { root: 'btn btn-lg', icon: 'btn-icon icon-lg' }
53
+ * ```
54
+ */
55
+ export declare const scv: SlotClassVariantCreatorFn;
56
+ export default scv;
@@ -0,0 +1,86 @@
1
+ import { cx } from './cx';
2
+ import { compact } from './utils/compact';
3
+ import { entries } from './utils/entries';
4
+ /**
5
+ * Creates a slot-based class variant function that manages class names for multiple slots with variants.
6
+ *
7
+ * @param config - Configuration object for creating the variant function
8
+ * @returns A function that accepts variant props and returns class names for each slot
9
+ *
10
+ * @example
11
+ * ```typescript
12
+ * const button = scv({
13
+ * slots: ['root', 'icon'],
14
+ * base: {
15
+ * root: 'btn',
16
+ * icon: 'btn-icon'
17
+ * },
18
+ * variants: {
19
+ * size: {
20
+ * sm: {
21
+ * root: 'btn-sm',
22
+ * icon: 'icon-sm'
23
+ * },
24
+ * lg: {
25
+ * root: 'btn-lg',
26
+ * icon: 'icon-lg'
27
+ * }
28
+ * }
29
+ * },
30
+ * defaultVariants: {
31
+ * size: 'sm'
32
+ * }
33
+ * })
34
+ *
35
+ * // Usage
36
+ * const classes = button({ size: 'lg' })
37
+ * // Result: { root: 'btn btn-lg', icon: 'btn-icon icon-lg' }
38
+ * ```
39
+ */
40
+ export const scv = (config) => {
41
+ const { slots, base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
42
+ return (props) => {
43
+ const { classNames, ...rest } = props ?? {};
44
+ const mergedProps = { ...defaultVariants, ...compact(rest) };
45
+ const slotClassValues = {};
46
+ for (const slot of slots) {
47
+ if (base?.[slot]) {
48
+ slotClassValues[slot] = Array.isArray(base[slot]) ? base[slot] : [base[slot]];
49
+ }
50
+ else {
51
+ slotClassValues[slot] = [];
52
+ }
53
+ }
54
+ if (variants) {
55
+ for (const [key, value] of entries(mergedProps)) {
56
+ const slotClassValue = variants[key]?.[value];
57
+ if (slotClassValue) {
58
+ for (const [slot, slotValue] of entries(slotClassValue)) {
59
+ slotClassValues[slot].push(slotValue);
60
+ }
61
+ }
62
+ }
63
+ }
64
+ if (compoundVariants) {
65
+ for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
66
+ if (entries(compoundVariant).every(([key, value]) => Array.isArray(value) ? value.includes(mergedProps[key]) : value === mergedProps[key])) {
67
+ for (const [slot, slotValue] of entries(slotClassValue)) {
68
+ slotClassValues[slot].push(slotValue);
69
+ }
70
+ }
71
+ }
72
+ }
73
+ if (classNames) {
74
+ for (const [slot, slotValue] of entries(classNames)) {
75
+ slotClassValues[slot].push(slotValue);
76
+ }
77
+ }
78
+ const result = {};
79
+ for (const [slot, classValues] of entries(slotClassValues)) {
80
+ result[slot] = classNameResolver(...classValues);
81
+ }
82
+ return result;
83
+ };
84
+ };
85
+ export default scv;
86
+ //# sourceMappingURL=scv.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,51 @@
1
+ import { ObjectKeyPicker, ObjectKeyArrayPicker, PartialRecord, CssProperties } from './utils/types';
2
+ export type SlotStyleRecord<S extends string> = PartialRecord<S, CssProperties>;
3
+ export type SlotStyleVariantRecord<S extends string> = Record<string, Record<string, SlotStyleRecord<S>>>;
4
+ export interface SlotStyleVariantDefinition<S extends string, T extends SlotStyleVariantRecord<S> | undefined> {
5
+ slots: S[];
6
+ base?: SlotStyleRecord<S>;
7
+ variants?: T;
8
+ compoundVariants?: (ObjectKeyArrayPicker<T> & {
9
+ styles: SlotStyleRecord<S>;
10
+ })[];
11
+ defaultVariants?: ObjectKeyPicker<T>;
12
+ }
13
+ export type SlotStyleVariantFn<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = (props?: ObjectKeyPicker<T> & {
14
+ styles?: SlotStyleRecord<S>;
15
+ }) => Record<S, CssProperties>;
16
+ export type SlotStyleVariantCreatorFn = <S extends string, T extends SlotStyleVariantRecord<S> | undefined>(config: SlotStyleVariantDefinition<S, T>) => SlotStyleVariantFn<S, T>;
17
+ /**
18
+ * Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
19
+ *
20
+ * @param config - Configuration object for creating style variants
21
+ * @returns A function that accepts variant props and returns composed styles for each slot
22
+ *
23
+ * @example
24
+ * ```ts
25
+ * const buttonStyles = csv({
26
+ * slots: ['root', 'icon'],
27
+ * base: {
28
+ * root: { padding: '8px' },
29
+ * icon: { size: '16px' }
30
+ * },
31
+ * variants: {
32
+ * size: {
33
+ * small: {
34
+ * root: { padding: '4px' },
35
+ * icon: { size: '12px' }
36
+ * },
37
+ * large: {
38
+ * root: { padding: '12px' },
39
+ * icon: { size: '20px' }
40
+ * }
41
+ * }
42
+ * }
43
+ * });
44
+ *
45
+ * // Usage
46
+ * const styles = buttonStyles({ size: 'small' });
47
+ * // => { root: { padding: '4px' }, icon: { size: '12px' } }
48
+ * ```
49
+ */
50
+ export declare const ssv: SlotStyleVariantCreatorFn;
51
+ export default ssv;
@@ -0,0 +1,73 @@
1
+ import { compact } from './utils/compact';
2
+ import { entries } from './utils/entries';
3
+ /**
4
+ * Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
5
+ *
6
+ * @param config - Configuration object for creating style variants
7
+ * @returns A function that accepts variant props and returns composed styles for each slot
8
+ *
9
+ * @example
10
+ * ```ts
11
+ * const buttonStyles = csv({
12
+ * slots: ['root', 'icon'],
13
+ * base: {
14
+ * root: { padding: '8px' },
15
+ * icon: { size: '16px' }
16
+ * },
17
+ * variants: {
18
+ * size: {
19
+ * small: {
20
+ * root: { padding: '4px' },
21
+ * icon: { size: '12px' }
22
+ * },
23
+ * large: {
24
+ * root: { padding: '12px' },
25
+ * icon: { size: '20px' }
26
+ * }
27
+ * }
28
+ * }
29
+ * });
30
+ *
31
+ * // Usage
32
+ * const styles = buttonStyles({ size: 'small' });
33
+ * // => { root: { padding: '4px' }, icon: { size: '12px' } }
34
+ * ```
35
+ */
36
+ export const ssv = (config) => {
37
+ const { slots, base, variants, compoundVariants, defaultVariants } = config;
38
+ return (props) => {
39
+ const { styles, ...rest } = props ?? {};
40
+ const mergedProps = { ...defaultVariants, ...compact(rest) };
41
+ const result = {};
42
+ for (const slot of slots) {
43
+ result[slot] = base?.[slot] ?? {};
44
+ }
45
+ if (variants) {
46
+ for (const [key, value] of entries(mergedProps)) {
47
+ const slotStyle = variants[key]?.[value];
48
+ if (slotStyle) {
49
+ for (const [slot, slotValue] of entries(slotStyle)) {
50
+ result[slot] = { ...result[slot], ...slotValue };
51
+ }
52
+ }
53
+ }
54
+ }
55
+ if (compoundVariants) {
56
+ for (const { styles: slotStyle, ...compoundVariant } of compoundVariants) {
57
+ if (entries(compoundVariant).every(([key, value]) => Array.isArray(value) ? value.includes(mergedProps[key]) : value === mergedProps[key])) {
58
+ for (const [slot, slotValue] of entries(slotStyle)) {
59
+ result[slot] = { ...result[slot], ...slotValue };
60
+ }
61
+ }
62
+ }
63
+ }
64
+ if (styles) {
65
+ for (const [slot, slotValue] of entries(styles)) {
66
+ result[slot] = { ...result[slot], ...slotValue };
67
+ }
68
+ }
69
+ return result;
70
+ };
71
+ };
72
+ export default ssv;
73
+ //# sourceMappingURL=ssv.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAsBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,GAAG,GAA8B,CAAC,MAAM,EAAE,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAA;IAE3E,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAEvC,MAAM,WAAW,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;QAE5D,MAAM,MAAM,GAAG,EAAmD,CAAA;QAElE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,IAAK,EAAoB,CAAA;QACtD,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;gBAChD,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,KAAe,CAAC,CAAA;gBAElD,IAAI,SAAS,EAAE,CAAC;oBACd,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;wBACnD,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAA;oBAClD,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBACzE,IACE,OAAO,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAC9C,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,CACrF,EACD,CAAC;oBACD,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;wBACnD,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAA;oBAClD,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;gBAChD,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAA;YAClD,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}
@@ -0,0 +1,44 @@
1
+ import { CssProperties, ObjectKeyArrayPicker, ObjectKeyPicker } from './utils/types';
2
+ export type StyleVariantRecord = Record<string, Record<string, CssProperties>>;
3
+ export interface StyleVariantDefinition<T extends StyleVariantRecord | undefined> {
4
+ base?: CssProperties;
5
+ variants?: T;
6
+ compoundVariants?: (ObjectKeyArrayPicker<T> & {
7
+ style: CssProperties;
8
+ })[];
9
+ defaultVariants?: ObjectKeyPicker<T>;
10
+ }
11
+ export type StyleVariantFn<T extends StyleVariantRecord | undefined> = (props?: ObjectKeyPicker<T> & {
12
+ style?: CssProperties;
13
+ }) => CssProperties;
14
+ export type StyleVariantCreatorFn = <T extends StyleVariantRecord | undefined>(config: StyleVariantDefinition<T>) => StyleVariantFn<T>;
15
+ /**
16
+ * Creates a style variant function based on the provided configuration.
17
+ *
18
+ * @template T - The type of the style variant record.
19
+ * @param {StyleVariantDefinition<T>} config - The configuration object for style variants.
20
+ * @returns {StyleVariantFn<T>} A function that takes props and returns the computed CSS properties.
21
+ *
22
+ * @example
23
+ * ```typescript
24
+ *
25
+ * const makeStyle = sv({
26
+ * base: { color: 'black' },
27
+ * variants: {
28
+ * size: {
29
+ * small: { fontSize: '12px' },
30
+ * large: { fontSize: '24px' }
31
+ * }
32
+ * },
33
+ * compoundVariants: [
34
+ * { size: 'large', style: { fontWeight: 'bold' } }
35
+ * ],
36
+ * defaultVariants: { size: 'small' }
37
+ * });
38
+ *
39
+ * const style = makeStyle({ size: 'large' });
40
+ * // style = { color: 'black', fontSize: '24px', fontWeight: 'bold' }
41
+ * ```
42
+ */
43
+ export declare const sv: StyleVariantCreatorFn;
44
+ export default sv;
package/dist/esm/sv.js ADDED
@@ -0,0 +1,59 @@
1
+ import { compact } from './utils/compact';
2
+ import { entries } from './utils/entries';
3
+ /**
4
+ * Creates a style variant function based on the provided configuration.
5
+ *
6
+ * @template T - The type of the style variant record.
7
+ * @param {StyleVariantDefinition<T>} config - The configuration object for style variants.
8
+ * @returns {StyleVariantFn<T>} A function that takes props and returns the computed CSS properties.
9
+ *
10
+ * @example
11
+ * ```typescript
12
+ *
13
+ * const makeStyle = sv({
14
+ * base: { color: 'black' },
15
+ * variants: {
16
+ * size: {
17
+ * small: { fontSize: '12px' },
18
+ * large: { fontSize: '24px' }
19
+ * }
20
+ * },
21
+ * compoundVariants: [
22
+ * { size: 'large', style: { fontWeight: 'bold' } }
23
+ * ],
24
+ * defaultVariants: { size: 'small' }
25
+ * });
26
+ *
27
+ * const style = makeStyle({ size: 'large' });
28
+ * // style = { color: 'black', fontSize: '24px', fontWeight: 'bold' }
29
+ * ```
30
+ */
31
+ export const sv = (config) => {
32
+ const { base, variants, compoundVariants, defaultVariants } = config;
33
+ return (props) => {
34
+ const { style, ...rest } = props ?? {};
35
+ let result = { ...base };
36
+ const mergedProps = { ...defaultVariants, ...compact(rest) };
37
+ if (variants) {
38
+ for (const [key, variant] of entries(variants)) {
39
+ const s = variant[mergedProps[key]];
40
+ if (s) {
41
+ result = { ...result, ...s };
42
+ }
43
+ }
44
+ }
45
+ if (compoundVariants) {
46
+ for (const { style: s, ...compoundVariant } of compoundVariants) {
47
+ if (entries(compoundVariant).every(([key, value]) => Array.isArray(value) ? value.includes(mergedProps[key]) : value === mergedProps[key])) {
48
+ result = { ...result, ...s };
49
+ }
50
+ }
51
+ }
52
+ if (style) {
53
+ result = { ...result, ...style };
54
+ }
55
+ return result;
56
+ };
57
+ };
58
+ export default sv;
59
+ //# sourceMappingURL=sv.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAmBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAA;IACpE,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAEtC,IAAI,MAAM,GAAkB,EAAE,GAAG,IAAI,EAAE,CAAA;QAEvC,MAAM,WAAW,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC/C,MAAM,CAAC,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;gBAC7C,IAAI,CAAC,EAAE,CAAC;oBACN,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,CAAC,EAAE,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAChE,IACE,OAAO,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAC9C,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,CACrF,EACD,CAAC;oBACD,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,CAAC,EAAE,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;QAClC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
@@ -0,0 +1 @@
1
+ export declare function compact<T extends Record<string, unknown>>(obj: T): T;