css-variants 2.2.2 → 2.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/dist/cv.cjs +2 -0
- package/dist/cv.cjs.map +1 -0
- package/dist/{esm/cv.d.ts → cv.d.cts} +13 -10
- package/dist/{cjs/cv.d.ts → cv.d.ts} +13 -10
- package/dist/cv.js +2 -0
- package/dist/cv.js.map +1 -0
- package/dist/cx.cjs +2 -0
- package/dist/cx.cjs.map +1 -0
- package/dist/cx.d.cts +6 -0
- package/dist/cx.d.ts +6 -0
- package/dist/cx.js +2 -0
- package/dist/cx.js.map +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/scv.cjs +2 -0
- package/dist/scv.cjs.map +1 -0
- package/dist/scv.d.cts +59 -0
- package/dist/scv.d.ts +59 -0
- package/dist/scv.js +2 -0
- package/dist/scv.js.map +1 -0
- package/dist/ssv.cjs +2 -0
- package/dist/ssv.cjs.map +1 -0
- package/dist/ssv.d.cts +54 -0
- package/dist/ssv.d.ts +54 -0
- package/dist/ssv.js +2 -0
- package/dist/ssv.js.map +1 -0
- package/dist/sv.cjs +2 -0
- package/dist/sv.cjs.map +1 -0
- package/dist/{cjs/sv.d.ts → sv.d.cts} +12 -9
- package/dist/{esm/sv.d.ts → sv.d.ts} +12 -9
- package/dist/sv.js +2 -0
- package/dist/sv.js.map +1 -0
- package/dist/types-BXKyjXhG.d.cts +16 -0
- package/dist/types-BXKyjXhG.d.ts +16 -0
- package/package.json +34 -13
- package/dist/cjs/cv.js +0 -75
- package/dist/cjs/cv.js.map +0 -1
- package/dist/cjs/cx.d.ts +0 -5
- package/dist/cjs/cx.js +0 -57
- package/dist/cjs/cx.js.map +0 -1
- package/dist/cjs/index.d.ts +0 -5
- package/dist/cjs/index.js +0 -22
- package/dist/cjs/index.js.map +0 -1
- package/dist/cjs/scv.d.ts +0 -56
- package/dist/cjs/scv.js +0 -107
- package/dist/cjs/scv.js.map +0 -1
- package/dist/cjs/ssv.d.ts +0 -51
- package/dist/cjs/ssv.js +0 -94
- package/dist/cjs/ssv.js.map +0 -1
- package/dist/cjs/sv.js +0 -74
- package/dist/cjs/sv.js.map +0 -1
- package/dist/cjs/utils/merge-props.d.ts +0 -1
- package/dist/cjs/utils/merge-props.js +0 -15
- package/dist/cjs/utils/merge-props.js.map +0 -1
- package/dist/cjs/utils/types.d.ts +0 -16
- package/dist/cjs/utils/types.js +0 -3
- package/dist/cjs/utils/types.js.map +0 -1
- package/dist/esm/cv.js +0 -71
- package/dist/esm/cv.js.map +0 -1
- package/dist/esm/cx.d.ts +0 -5
- package/dist/esm/cx.js +0 -54
- package/dist/esm/cx.js.map +0 -1
- package/dist/esm/index.d.ts +0 -5
- package/dist/esm/index.js +0 -6
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/scv.d.ts +0 -56
- package/dist/esm/scv.js +0 -103
- package/dist/esm/scv.js.map +0 -1
- package/dist/esm/ssv.d.ts +0 -51
- package/dist/esm/ssv.js +0 -90
- package/dist/esm/ssv.js.map +0 -1
- package/dist/esm/sv.js +0 -70
- package/dist/esm/sv.js.map +0 -1
- package/dist/esm/utils/merge-props.d.ts +0 -1
- package/dist/esm/utils/merge-props.js +0 -12
- package/dist/esm/utils/merge-props.js.map +0 -1
- package/dist/esm/utils/types.d.ts +0 -16
- package/dist/esm/utils/types.js +0 -2
- package/dist/esm/utils/types.js.map +0 -1
package/dist/esm/scv.js
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { cx } from './cx';
|
|
2
|
-
import { mergeProps } from './utils/merge-props';
|
|
3
|
-
/**
|
|
4
|
-
* Creates a slot-based class variant function that manages class names for multiple slots with variants.
|
|
5
|
-
*
|
|
6
|
-
* @param config - Configuration object for creating the variant function
|
|
7
|
-
* @returns A function that accepts variant props and returns class names for each slot
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```typescript
|
|
11
|
-
* const button = scv({
|
|
12
|
-
* slots: ['root', 'icon'],
|
|
13
|
-
* base: {
|
|
14
|
-
* root: 'btn',
|
|
15
|
-
* icon: 'btn-icon'
|
|
16
|
-
* },
|
|
17
|
-
* variants: {
|
|
18
|
-
* size: {
|
|
19
|
-
* sm: {
|
|
20
|
-
* root: 'btn-sm',
|
|
21
|
-
* icon: 'icon-sm'
|
|
22
|
-
* },
|
|
23
|
-
* lg: {
|
|
24
|
-
* root: 'btn-lg',
|
|
25
|
-
* icon: 'icon-lg'
|
|
26
|
-
* }
|
|
27
|
-
* }
|
|
28
|
-
* },
|
|
29
|
-
* defaultVariants: {
|
|
30
|
-
* size: 'sm'
|
|
31
|
-
* }
|
|
32
|
-
* })
|
|
33
|
-
*
|
|
34
|
-
* // Usage
|
|
35
|
-
* const classes = button({ size: 'lg' })
|
|
36
|
-
* // Result: { root: 'btn btn-lg', icon: 'btn-icon icon-lg' }
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
export const scv = (config) => {
|
|
40
|
-
const { slots, base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
|
|
41
|
-
if (!variants) {
|
|
42
|
-
return (props) => {
|
|
43
|
-
const result = {};
|
|
44
|
-
for (const slot of slots) {
|
|
45
|
-
result[slot] = classNameResolver(base?.[slot], props?.classNames?.[slot]);
|
|
46
|
-
}
|
|
47
|
-
return result;
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
return (props) => {
|
|
51
|
-
const mergedProps = mergeProps(defaultVariants, props, ['classNames']);
|
|
52
|
-
const slotClassValues = {};
|
|
53
|
-
for (const slot of slots) {
|
|
54
|
-
if (base?.[slot]) {
|
|
55
|
-
slotClassValues[slot] = Array.isArray(base[slot]) ? [...base[slot]] : [base[slot]];
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
slotClassValues[slot] = [];
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
for (const key in mergedProps) {
|
|
62
|
-
const cls = variants[key]?.[mergedProps[key]];
|
|
63
|
-
if (cls) {
|
|
64
|
-
for (const slot in cls) {
|
|
65
|
-
slotClassValues[slot]?.push(cls[slot]);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
if (compoundVariants) {
|
|
70
|
-
for (let i = 0; i < compoundVariants.length; i++) {
|
|
71
|
-
const compound = compoundVariants[i];
|
|
72
|
-
let matches = true;
|
|
73
|
-
for (const key in compound) {
|
|
74
|
-
if (key === 'classNames')
|
|
75
|
-
continue;
|
|
76
|
-
const value = compound[key];
|
|
77
|
-
const propValue = mergedProps[key];
|
|
78
|
-
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
79
|
-
matches = false;
|
|
80
|
-
break;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
if (matches && compound.classNames) {
|
|
84
|
-
for (const slot in compound.classNames) {
|
|
85
|
-
slotClassValues[slot]?.push(compound.classNames[slot]);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
if (props?.classNames) {
|
|
91
|
-
for (const slot in props.classNames) {
|
|
92
|
-
slotClassValues[slot]?.push(props.classNames[slot]);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
const result = {};
|
|
96
|
-
for (const slot in slotClassValues) {
|
|
97
|
-
result[slot] = classNameResolver(slotClassValues[slot]);
|
|
98
|
-
}
|
|
99
|
-
return result;
|
|
100
|
-
};
|
|
101
|
-
};
|
|
102
|
-
export default scv;
|
|
103
|
-
//# sourceMappingURL=scv.js.map
|
package/dist/esm/scv.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/ssv.d.ts
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
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 type SlotStyleVariantExtendProps<S extends string> = {
|
|
5
|
-
styles: SlotStyleRecord<S>;
|
|
6
|
-
};
|
|
7
|
-
export interface SlotStyleVariantDefinition<S extends string, T extends SlotStyleVariantRecord<S> | undefined> {
|
|
8
|
-
slots: S[];
|
|
9
|
-
base?: SlotStyleRecord<S>;
|
|
10
|
-
variants?: T;
|
|
11
|
-
compoundVariants?: (ObjectKeyArrayPicker<T> & SlotStyleVariantExtendProps<S>)[];
|
|
12
|
-
defaultVariants?: ObjectKeyPicker<T>;
|
|
13
|
-
}
|
|
14
|
-
export type SlotStyleVariantFnProps<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = T extends undefined ? Partial<SlotStyleVariantExtendProps<S>> : ObjectKeyPicker<T> & Partial<SlotStyleVariantExtendProps<S>>;
|
|
15
|
-
export type SlotStyleVariantFn<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = (props?: SlotStyleVariantFnProps<S, T>) => 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;
|
package/dist/esm/ssv.js
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { mergeProps } from './utils/merge-props';
|
|
2
|
-
/**
|
|
3
|
-
* Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
|
|
4
|
-
*
|
|
5
|
-
* @param config - Configuration object for creating style variants
|
|
6
|
-
* @returns A function that accepts variant props and returns composed styles for each slot
|
|
7
|
-
*
|
|
8
|
-
* @example
|
|
9
|
-
* ```ts
|
|
10
|
-
* const buttonStyles = csv({
|
|
11
|
-
* slots: ['root', 'icon'],
|
|
12
|
-
* base: {
|
|
13
|
-
* root: { padding: '8px' },
|
|
14
|
-
* icon: { size: '16px' }
|
|
15
|
-
* },
|
|
16
|
-
* variants: {
|
|
17
|
-
* size: {
|
|
18
|
-
* small: {
|
|
19
|
-
* root: { padding: '4px' },
|
|
20
|
-
* icon: { size: '12px' }
|
|
21
|
-
* },
|
|
22
|
-
* large: {
|
|
23
|
-
* root: { padding: '12px' },
|
|
24
|
-
* icon: { size: '20px' }
|
|
25
|
-
* }
|
|
26
|
-
* }
|
|
27
|
-
* }
|
|
28
|
-
* });
|
|
29
|
-
*
|
|
30
|
-
* // Usage
|
|
31
|
-
* const styles = buttonStyles({ size: 'small' });
|
|
32
|
-
* // => { root: { padding: '4px' }, icon: { size: '12px' } }
|
|
33
|
-
* ```
|
|
34
|
-
*/
|
|
35
|
-
export const ssv = (config) => {
|
|
36
|
-
const { slots, base, variants, compoundVariants, defaultVariants } = config;
|
|
37
|
-
if (!variants) {
|
|
38
|
-
return (props) => {
|
|
39
|
-
const result = {};
|
|
40
|
-
for (const slot of slots) {
|
|
41
|
-
result[slot] = { ...base?.[slot], ...props?.styles?.[slot] };
|
|
42
|
-
}
|
|
43
|
-
return result;
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
return (props) => {
|
|
47
|
-
const mergedProps = mergeProps(defaultVariants, props, ['styles']);
|
|
48
|
-
const result = {};
|
|
49
|
-
for (const slot of slots) {
|
|
50
|
-
result[slot] = { ...base?.[slot] };
|
|
51
|
-
}
|
|
52
|
-
for (const key in mergedProps) {
|
|
53
|
-
const slotStyle = variants[key]?.[mergedProps[key]];
|
|
54
|
-
if (slotStyle) {
|
|
55
|
-
for (const slot in slotStyle) {
|
|
56
|
-
Object.assign(result[slot], slotStyle[slot]);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
if (compoundVariants) {
|
|
61
|
-
for (let i = 0; i < compoundVariants.length; i++) {
|
|
62
|
-
const compound = compoundVariants[i];
|
|
63
|
-
let matches = true;
|
|
64
|
-
for (const key in compound) {
|
|
65
|
-
if (key === 'styles')
|
|
66
|
-
continue;
|
|
67
|
-
const value = compound[key];
|
|
68
|
-
const propValue = mergedProps[key];
|
|
69
|
-
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
70
|
-
matches = false;
|
|
71
|
-
break;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
if (matches && compound.styles) {
|
|
75
|
-
for (const slot in compound.styles) {
|
|
76
|
-
Object.assign(result[slot], compound.styles[slot]);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
if (props?.styles) {
|
|
82
|
-
for (const slot in props.styles) {
|
|
83
|
-
Object.assign(result[slot], props.styles[slot]);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
return result;
|
|
87
|
-
};
|
|
88
|
-
};
|
|
89
|
-
export default ssv;
|
|
90
|
-
//# sourceMappingURL=ssv.js.map
|
package/dist/esm/ssv.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/sv.js
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { mergeProps } from './utils/merge-props';
|
|
2
|
-
/**
|
|
3
|
-
* Creates a style variant function based on the provided configuration.
|
|
4
|
-
*
|
|
5
|
-
* @template T - The type of the style variant record.
|
|
6
|
-
* @param {StyleVariantDefinition<T>} config - The configuration object for style variants.
|
|
7
|
-
* @returns {StyleVariantFn<T>} A function that takes props and returns the computed CSS properties.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```typescript
|
|
11
|
-
*
|
|
12
|
-
* const makeStyle = sv({
|
|
13
|
-
* base: { color: 'black' },
|
|
14
|
-
* variants: {
|
|
15
|
-
* size: {
|
|
16
|
-
* small: { fontSize: '12px' },
|
|
17
|
-
* large: { fontSize: '24px' }
|
|
18
|
-
* }
|
|
19
|
-
* },
|
|
20
|
-
* compoundVariants: [
|
|
21
|
-
* { size: 'large', style: { fontWeight: 'bold' } }
|
|
22
|
-
* ],
|
|
23
|
-
* defaultVariants: { size: 'small' }
|
|
24
|
-
* });
|
|
25
|
-
*
|
|
26
|
-
* const style = makeStyle({ size: 'large' });
|
|
27
|
-
* // style = { color: 'black', fontSize: '24px', fontWeight: 'bold' }
|
|
28
|
-
* ```
|
|
29
|
-
*/
|
|
30
|
-
export const sv = (config) => {
|
|
31
|
-
const { base, variants, compoundVariants, defaultVariants } = config;
|
|
32
|
-
if (!variants) {
|
|
33
|
-
return (props) => ({ ...base, ...props?.style });
|
|
34
|
-
}
|
|
35
|
-
return (props) => {
|
|
36
|
-
const result = { ...base };
|
|
37
|
-
const mergedProps = mergeProps(defaultVariants, props, ['style']);
|
|
38
|
-
for (const key in mergedProps) {
|
|
39
|
-
const styleValue = variants[key]?.[mergedProps[key]];
|
|
40
|
-
if (styleValue) {
|
|
41
|
-
Object.assign(result, styleValue);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
if (compoundVariants) {
|
|
45
|
-
for (let i = 0; i < compoundVariants.length; i++) {
|
|
46
|
-
const compound = compoundVariants[i];
|
|
47
|
-
let matches = true;
|
|
48
|
-
for (const key in compound) {
|
|
49
|
-
if (key === 'style')
|
|
50
|
-
continue;
|
|
51
|
-
const value = compound[key];
|
|
52
|
-
const propValue = mergedProps[key];
|
|
53
|
-
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
54
|
-
matches = false;
|
|
55
|
-
break;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
if (matches && compound.style) {
|
|
59
|
-
Object.assign(result, compound.style);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
if (props?.style) {
|
|
64
|
-
Object.assign(result, props.style);
|
|
65
|
-
}
|
|
66
|
-
return result;
|
|
67
|
-
};
|
|
68
|
-
};
|
|
69
|
-
export default sv;
|
|
70
|
-
//# sourceMappingURL=sv.js.map
|
package/dist/esm/sv.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAuBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;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;IAEpE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;IAClD,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,MAAM,GAAkB,EAAE,GAAG,IAAI,EAAE,CAAA;QAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,eAAe,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;QAEjE,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC9D,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YACnC,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAA;gBACpC,IAAI,OAAO,GAAG,IAAI,CAAA;gBAClB,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;oBAC3B,IAAI,GAAG,KAAK,OAAO;wBAAE,SAAQ;oBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAA4B,CAAC,CAAA;oBACpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;oBAClC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC5E,OAAO,GAAG,KAAK,CAAA;wBACf,MAAK;oBACP,CAAC;gBACH,CAAC;gBACD,IAAI,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;oBAC9B,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACvC,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,KAAK,EAAE,KAAK,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function mergeProps<T extends Record<string, unknown>, P extends Record<string, unknown>>(defaultProps: T | undefined, props: P | undefined, omitKeys?: (keyof P)[]): Record<string, unknown>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export function mergeProps(defaultProps, props, omitKeys) {
|
|
2
|
-
const merged = { ...defaultProps };
|
|
3
|
-
if (props) {
|
|
4
|
-
for (const k in props) {
|
|
5
|
-
if (props[k] !== undefined && (!omitKeys || !omitKeys.includes(k))) {
|
|
6
|
-
merged[k] = props[k];
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
return merged;
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=merge-props.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"merge-props.js","sourceRoot":"","sources":["../../../src/utils/merge-props.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CACxB,YAA2B,EAC3B,KAAoB,EACpB,QAAsB;IAEtB,MAAM,MAAM,GAA4B,EAAE,GAAG,YAAY,EAAE,CAAA;IAE3D,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Properties } from 'csstype';
|
|
2
|
-
export type OneOrMore<T> = T | T[];
|
|
3
|
-
export type PartialRecord<S extends string, T> = Partial<Record<S, T>>;
|
|
4
|
-
export type RequireAtLeastOne<T> = {
|
|
5
|
-
[K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
|
|
6
|
-
}[keyof T];
|
|
7
|
-
export type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
|
|
8
|
-
export type ObjectKeyPicker<T> = [keyof T] extends [never] ? Record<string, unknown> : {
|
|
9
|
-
[K in keyof T]?: StringToBoolean<keyof T[K]> | undefined;
|
|
10
|
-
};
|
|
11
|
-
export type ObjectKeyArrayPicker<T> = [keyof T] extends [never] ? Record<string, unknown> : {
|
|
12
|
-
[K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined;
|
|
13
|
-
};
|
|
14
|
-
export type CssProperties = Properties<string | number> & {
|
|
15
|
-
[key: `--${string}`]: string | number;
|
|
16
|
-
};
|
package/dist/esm/utils/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":""}
|