@nextui-org/theme 0.0.0-dev-v2-20230326024632 → 0.0.0-dev-v2-20230326125142
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/{chunk-OSARGUKT.mjs → chunk-BD2KW4ZD.mjs} +32 -2
- package/dist/chunk-ONURTFN3.mjs +149 -0
- package/dist/components/button.d.ts +6 -0
- package/dist/components/button.js +32 -2
- package/dist/components/button.mjs +1 -1
- package/dist/components/index.js +32 -2
- package/dist/components/index.mjs +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +299 -2
- package/dist/index.mjs +9 -1
- package/dist/plugin.js +0 -3
- package/dist/plugin.mjs +9 -146
- package/package.json +1 -1
|
@@ -22,7 +22,9 @@ var button = tv({
|
|
|
22
22
|
"subpixel-antialiased",
|
|
23
23
|
"active:scale-95",
|
|
24
24
|
"overflow-hidden",
|
|
25
|
-
"gap-3"
|
|
25
|
+
"gap-3",
|
|
26
|
+
"[&>svg]:fill-current",
|
|
27
|
+
"[&>svg]:max-w-[2em]"
|
|
26
28
|
],
|
|
27
29
|
variants: {
|
|
28
30
|
variant: {
|
|
@@ -72,9 +74,12 @@ var button = tv({
|
|
|
72
74
|
isInGroup: {
|
|
73
75
|
true: "[&:not(:first-child):not(:last-child)]:rounded-none"
|
|
74
76
|
},
|
|
77
|
+
isIconButton: {
|
|
78
|
+
true: "p-0 gap-0"
|
|
79
|
+
},
|
|
75
80
|
disableAnimation: {
|
|
76
81
|
true: "!transition-none",
|
|
77
|
-
false: "transition-transform-background"
|
|
82
|
+
false: "transition-transform-background motion-reduce:transition-none"
|
|
78
83
|
}
|
|
79
84
|
},
|
|
80
85
|
defaultVariants: {
|
|
@@ -317,6 +322,31 @@ var button = tv({
|
|
|
317
322
|
isInGroup: true,
|
|
318
323
|
variant: "bordered",
|
|
319
324
|
class: "[&:not(:first-child)]:border-l-0"
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
isIconButton: true,
|
|
328
|
+
size: "xs",
|
|
329
|
+
class: "w-6 h-6"
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
isIconButton: true,
|
|
333
|
+
size: "sm",
|
|
334
|
+
class: "w-8 h-8"
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
isIconButton: true,
|
|
338
|
+
size: "md",
|
|
339
|
+
class: "w-10 h-10"
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
isIconButton: true,
|
|
343
|
+
size: "lg",
|
|
344
|
+
class: "w-12 h-12"
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
isIconButton: true,
|
|
348
|
+
size: "xl",
|
|
349
|
+
class: "w-14 h-14"
|
|
320
350
|
}
|
|
321
351
|
]
|
|
322
352
|
});
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import {
|
|
2
|
+
utilities
|
|
3
|
+
} from "./chunk-45FXWIO6.mjs";
|
|
4
|
+
import {
|
|
5
|
+
baseStyles
|
|
6
|
+
} from "./chunk-IJCHUO4J.mjs";
|
|
7
|
+
import {
|
|
8
|
+
semanticColors
|
|
9
|
+
} from "./chunk-Y52EXP4A.mjs";
|
|
10
|
+
import {
|
|
11
|
+
removeDefaultKeys
|
|
12
|
+
} from "./chunk-37PIXVP4.mjs";
|
|
13
|
+
import {
|
|
14
|
+
animations
|
|
15
|
+
} from "./chunk-QPN3H4E3.mjs";
|
|
16
|
+
import {
|
|
17
|
+
commonColors
|
|
18
|
+
} from "./chunk-CRCBVLUP.mjs";
|
|
19
|
+
|
|
20
|
+
// src/plugin.ts
|
|
21
|
+
import Color from "color";
|
|
22
|
+
import plugin from "tailwindcss/plugin";
|
|
23
|
+
import forEach from "lodash.foreach";
|
|
24
|
+
import flatten from "flat";
|
|
25
|
+
import get from "lodash.get";
|
|
26
|
+
import deepMerge from "deepmerge";
|
|
27
|
+
var SCHEME = Symbol("color-scheme");
|
|
28
|
+
var VAR_PREFIX = "nextui";
|
|
29
|
+
var dark = (colors) => {
|
|
30
|
+
return {
|
|
31
|
+
[SCHEME]: "dark",
|
|
32
|
+
...colors
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
var light = (colors) => {
|
|
36
|
+
return {
|
|
37
|
+
[SCHEME]: "light",
|
|
38
|
+
...colors
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
var resolveConfig = (config = {}, defaultTheme) => {
|
|
42
|
+
const resolved = {
|
|
43
|
+
variants: [],
|
|
44
|
+
utilities: {},
|
|
45
|
+
colors: {}
|
|
46
|
+
};
|
|
47
|
+
const configObject = typeof config === "function" ? config({ dark, light }) : config;
|
|
48
|
+
forEach(configObject, (colors, themeName) => {
|
|
49
|
+
let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
|
|
50
|
+
if (themeName === defaultTheme) {
|
|
51
|
+
cssSelector = `:root,${cssSelector}`;
|
|
52
|
+
}
|
|
53
|
+
resolved.utilities[cssSelector] = colors[SCHEME] ? {
|
|
54
|
+
"color-scheme": colors[SCHEME]
|
|
55
|
+
} : {};
|
|
56
|
+
const flatColors = removeDefaultKeys(
|
|
57
|
+
flatten(colors, {
|
|
58
|
+
safe: true,
|
|
59
|
+
delimiter: "-"
|
|
60
|
+
})
|
|
61
|
+
);
|
|
62
|
+
resolved.variants.push({
|
|
63
|
+
name: `theme-${themeName}`,
|
|
64
|
+
definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
|
|
65
|
+
});
|
|
66
|
+
forEach(flatColors, (colorValue, colorName) => {
|
|
67
|
+
if (colorName === SCHEME || !colorValue)
|
|
68
|
+
return;
|
|
69
|
+
try {
|
|
70
|
+
const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
|
|
71
|
+
const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
|
|
72
|
+
const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
|
|
73
|
+
resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
|
|
74
|
+
if (typeof defaultAlphaValue === "number") {
|
|
75
|
+
resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
|
|
76
|
+
}
|
|
77
|
+
resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
|
|
78
|
+
if (!isNaN(+opacityValue)) {
|
|
79
|
+
return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
|
|
80
|
+
}
|
|
81
|
+
if (opacityVariable) {
|
|
82
|
+
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
|
|
83
|
+
}
|
|
84
|
+
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
|
|
85
|
+
};
|
|
86
|
+
} catch (error) {
|
|
87
|
+
console.log("error", error == null ? void 0 : error.message);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
return resolved;
|
|
92
|
+
};
|
|
93
|
+
var corePlugin = (config = {}, defaultTheme) => {
|
|
94
|
+
const resolved = resolveConfig(config, defaultTheme);
|
|
95
|
+
return plugin(
|
|
96
|
+
({ addBase, addUtilities, addVariant }) => {
|
|
97
|
+
addBase({
|
|
98
|
+
[":root, [data-theme]"]: {
|
|
99
|
+
...baseStyles
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
addUtilities({ ...resolved.utilities, ...utilities });
|
|
103
|
+
resolved.variants.forEach((variant) => {
|
|
104
|
+
addVariant(variant.name, variant.definition);
|
|
105
|
+
});
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
theme: {
|
|
109
|
+
extend: {
|
|
110
|
+
colors: {
|
|
111
|
+
...commonColors,
|
|
112
|
+
...resolved.colors
|
|
113
|
+
},
|
|
114
|
+
fontSize: {
|
|
115
|
+
tiny: "0.625rem"
|
|
116
|
+
},
|
|
117
|
+
borderWidth: {
|
|
118
|
+
1: "1px",
|
|
119
|
+
1.5: "1.5px",
|
|
120
|
+
3: "3px",
|
|
121
|
+
5: "5px"
|
|
122
|
+
},
|
|
123
|
+
transitionDuration: {
|
|
124
|
+
0: "0ms",
|
|
125
|
+
250: "250ms"
|
|
126
|
+
},
|
|
127
|
+
...animations
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
};
|
|
133
|
+
var nextui = (config = {}) => {
|
|
134
|
+
const userLightColors = get(config.themes, "light", {});
|
|
135
|
+
const userDarkColors = get(config.themes, "dark", {});
|
|
136
|
+
const defaultTheme = config.defaultTheme || "light";
|
|
137
|
+
return corePlugin(
|
|
138
|
+
{
|
|
139
|
+
light: deepMerge(semanticColors.light, userLightColors),
|
|
140
|
+
dark: deepMerge(semanticColors.dark, userDarkColors)
|
|
141
|
+
},
|
|
142
|
+
defaultTheme
|
|
143
|
+
);
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
export {
|
|
147
|
+
resolveConfig,
|
|
148
|
+
nextui
|
|
149
|
+
};
|
|
@@ -60,6 +60,9 @@ declare const button: tailwind_variants.TVReturnType<{
|
|
|
60
60
|
isInGroup: {
|
|
61
61
|
true: string;
|
|
62
62
|
};
|
|
63
|
+
isIconButton: {
|
|
64
|
+
true: string;
|
|
65
|
+
};
|
|
63
66
|
disableAnimation: {
|
|
64
67
|
true: string;
|
|
65
68
|
false: string;
|
|
@@ -112,6 +115,9 @@ declare const button: tailwind_variants.TVReturnType<{
|
|
|
112
115
|
isInGroup: {
|
|
113
116
|
true: string;
|
|
114
117
|
};
|
|
118
|
+
isIconButton: {
|
|
119
|
+
true: string;
|
|
120
|
+
};
|
|
115
121
|
disableAnimation: {
|
|
116
122
|
true: string;
|
|
117
123
|
false: string;
|
|
@@ -125,7 +125,9 @@ var button = (0, import_tailwind_variants.tv)({
|
|
|
125
125
|
"subpixel-antialiased",
|
|
126
126
|
"active:scale-95",
|
|
127
127
|
"overflow-hidden",
|
|
128
|
-
"gap-3"
|
|
128
|
+
"gap-3",
|
|
129
|
+
"[&>svg]:fill-current",
|
|
130
|
+
"[&>svg]:max-w-[2em]"
|
|
129
131
|
],
|
|
130
132
|
variants: {
|
|
131
133
|
variant: {
|
|
@@ -175,9 +177,12 @@ var button = (0, import_tailwind_variants.tv)({
|
|
|
175
177
|
isInGroup: {
|
|
176
178
|
true: "[&:not(:first-child):not(:last-child)]:rounded-none"
|
|
177
179
|
},
|
|
180
|
+
isIconButton: {
|
|
181
|
+
true: "p-0 gap-0"
|
|
182
|
+
},
|
|
178
183
|
disableAnimation: {
|
|
179
184
|
true: "!transition-none",
|
|
180
|
-
false: "transition-transform-background"
|
|
185
|
+
false: "transition-transform-background motion-reduce:transition-none"
|
|
181
186
|
}
|
|
182
187
|
},
|
|
183
188
|
defaultVariants: {
|
|
@@ -420,6 +425,31 @@ var button = (0, import_tailwind_variants.tv)({
|
|
|
420
425
|
isInGroup: true,
|
|
421
426
|
variant: "bordered",
|
|
422
427
|
class: "[&:not(:first-child)]:border-l-0"
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
isIconButton: true,
|
|
431
|
+
size: "xs",
|
|
432
|
+
class: "w-6 h-6"
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
isIconButton: true,
|
|
436
|
+
size: "sm",
|
|
437
|
+
class: "w-8 h-8"
|
|
438
|
+
},
|
|
439
|
+
{
|
|
440
|
+
isIconButton: true,
|
|
441
|
+
size: "md",
|
|
442
|
+
class: "w-10 h-10"
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
isIconButton: true,
|
|
446
|
+
size: "lg",
|
|
447
|
+
class: "w-12 h-12"
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
isIconButton: true,
|
|
451
|
+
size: "xl",
|
|
452
|
+
class: "w-14 h-14"
|
|
423
453
|
}
|
|
424
454
|
]
|
|
425
455
|
});
|
package/dist/components/index.js
CHANGED
|
@@ -648,7 +648,9 @@ var button = (0, import_tailwind_variants6.tv)({
|
|
|
648
648
|
"subpixel-antialiased",
|
|
649
649
|
"active:scale-95",
|
|
650
650
|
"overflow-hidden",
|
|
651
|
-
"gap-3"
|
|
651
|
+
"gap-3",
|
|
652
|
+
"[&>svg]:fill-current",
|
|
653
|
+
"[&>svg]:max-w-[2em]"
|
|
652
654
|
],
|
|
653
655
|
variants: {
|
|
654
656
|
variant: {
|
|
@@ -698,9 +700,12 @@ var button = (0, import_tailwind_variants6.tv)({
|
|
|
698
700
|
isInGroup: {
|
|
699
701
|
true: "[&:not(:first-child):not(:last-child)]:rounded-none"
|
|
700
702
|
},
|
|
703
|
+
isIconButton: {
|
|
704
|
+
true: "p-0 gap-0"
|
|
705
|
+
},
|
|
701
706
|
disableAnimation: {
|
|
702
707
|
true: "!transition-none",
|
|
703
|
-
false: "transition-transform-background"
|
|
708
|
+
false: "transition-transform-background motion-reduce:transition-none"
|
|
704
709
|
}
|
|
705
710
|
},
|
|
706
711
|
defaultVariants: {
|
|
@@ -943,6 +948,31 @@ var button = (0, import_tailwind_variants6.tv)({
|
|
|
943
948
|
isInGroup: true,
|
|
944
949
|
variant: "bordered",
|
|
945
950
|
class: "[&:not(:first-child)]:border-l-0"
|
|
951
|
+
},
|
|
952
|
+
{
|
|
953
|
+
isIconButton: true,
|
|
954
|
+
size: "xs",
|
|
955
|
+
class: "w-6 h-6"
|
|
956
|
+
},
|
|
957
|
+
{
|
|
958
|
+
isIconButton: true,
|
|
959
|
+
size: "sm",
|
|
960
|
+
class: "w-8 h-8"
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
isIconButton: true,
|
|
964
|
+
size: "md",
|
|
965
|
+
class: "w-10 h-10"
|
|
966
|
+
},
|
|
967
|
+
{
|
|
968
|
+
isIconButton: true,
|
|
969
|
+
size: "lg",
|
|
970
|
+
class: "w-12 h-12"
|
|
971
|
+
},
|
|
972
|
+
{
|
|
973
|
+
isIconButton: true,
|
|
974
|
+
size: "xl",
|
|
975
|
+
class: "w-14 h-14"
|
|
946
976
|
}
|
|
947
977
|
]
|
|
948
978
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -24,11 +24,14 @@ export { absoluteFullClasses, baseStyles, focusVisibleClasses, ringClasses, tran
|
|
|
24
24
|
export { SlotsToClasses } from './utils/types.js';
|
|
25
25
|
export { colorVariants } from './utils/variants.js';
|
|
26
26
|
export { colors } from './colors/index.js';
|
|
27
|
+
export { Colors, ColorsWithScheme, ConfigFunction, ConfigObject, DefaultTheme, NextUIConfig, nextui, resolveConfig } from './plugin.js';
|
|
27
28
|
export { VariantProps, tv } from 'tailwind-variants';
|
|
28
29
|
export { BaseColors, ColorScale, SemanticBaseColors, SemanticColors } from './colors/types.js';
|
|
29
30
|
export { commonColors } from './colors/common.js';
|
|
30
31
|
export { semanticColors } from './colors/semantic.js';
|
|
31
32
|
import 'tailwind-variants/dist/config';
|
|
33
|
+
import 'tailwindcss';
|
|
34
|
+
import 'tailwindcss/types/config';
|
|
32
35
|
|
|
33
36
|
declare const cn: (...classes: any) => string;
|
|
34
37
|
|
package/dist/index.js
CHANGED
|
@@ -47,9 +47,11 @@ __export(src_exports, {
|
|
|
47
47
|
drip: () => drip,
|
|
48
48
|
focusVisibleClasses: () => focusVisibleClasses,
|
|
49
49
|
link: () => link,
|
|
50
|
+
nextui: () => nextui,
|
|
50
51
|
pagination: () => pagination,
|
|
51
52
|
radio: () => radio,
|
|
52
53
|
radioGroup: () => radioGroup,
|
|
54
|
+
resolveConfig: () => resolveConfig,
|
|
53
55
|
ringClasses: () => ringClasses,
|
|
54
56
|
semanticColors: () => semanticColors,
|
|
55
57
|
snippet: () => snippet,
|
|
@@ -670,7 +672,9 @@ var button = (0, import_tailwind_variants6.tv)({
|
|
|
670
672
|
"subpixel-antialiased",
|
|
671
673
|
"active:scale-95",
|
|
672
674
|
"overflow-hidden",
|
|
673
|
-
"gap-3"
|
|
675
|
+
"gap-3",
|
|
676
|
+
"[&>svg]:fill-current",
|
|
677
|
+
"[&>svg]:max-w-[2em]"
|
|
674
678
|
],
|
|
675
679
|
variants: {
|
|
676
680
|
variant: {
|
|
@@ -720,9 +724,12 @@ var button = (0, import_tailwind_variants6.tv)({
|
|
|
720
724
|
isInGroup: {
|
|
721
725
|
true: "[&:not(:first-child):not(:last-child)]:rounded-none"
|
|
722
726
|
},
|
|
727
|
+
isIconButton: {
|
|
728
|
+
true: "p-0 gap-0"
|
|
729
|
+
},
|
|
723
730
|
disableAnimation: {
|
|
724
731
|
true: "!transition-none",
|
|
725
|
-
false: "transition-transform-background"
|
|
732
|
+
false: "transition-transform-background motion-reduce:transition-none"
|
|
726
733
|
}
|
|
727
734
|
},
|
|
728
735
|
defaultVariants: {
|
|
@@ -965,6 +972,31 @@ var button = (0, import_tailwind_variants6.tv)({
|
|
|
965
972
|
isInGroup: true,
|
|
966
973
|
variant: "bordered",
|
|
967
974
|
class: "[&:not(:first-child)]:border-l-0"
|
|
975
|
+
},
|
|
976
|
+
{
|
|
977
|
+
isIconButton: true,
|
|
978
|
+
size: "xs",
|
|
979
|
+
class: "w-6 h-6"
|
|
980
|
+
},
|
|
981
|
+
{
|
|
982
|
+
isIconButton: true,
|
|
983
|
+
size: "sm",
|
|
984
|
+
class: "w-8 h-8"
|
|
985
|
+
},
|
|
986
|
+
{
|
|
987
|
+
isIconButton: true,
|
|
988
|
+
size: "md",
|
|
989
|
+
class: "w-10 h-10"
|
|
990
|
+
},
|
|
991
|
+
{
|
|
992
|
+
isIconButton: true,
|
|
993
|
+
size: "lg",
|
|
994
|
+
class: "w-12 h-12"
|
|
995
|
+
},
|
|
996
|
+
{
|
|
997
|
+
isIconButton: true,
|
|
998
|
+
size: "xl",
|
|
999
|
+
class: "w-14 h-14"
|
|
968
1000
|
}
|
|
969
1001
|
]
|
|
970
1002
|
});
|
|
@@ -3570,6 +3602,17 @@ function swapColorValues(colors2) {
|
|
|
3570
3602
|
}
|
|
3571
3603
|
return swappedColors;
|
|
3572
3604
|
}
|
|
3605
|
+
function removeDefaultKeys(obj) {
|
|
3606
|
+
const newObj = {};
|
|
3607
|
+
for (const key in obj) {
|
|
3608
|
+
if (key.endsWith("-DEFAULT")) {
|
|
3609
|
+
newObj[key.replace("-DEFAULT", "")] = obj[key];
|
|
3610
|
+
continue;
|
|
3611
|
+
}
|
|
3612
|
+
newObj[key] = obj[key];
|
|
3613
|
+
}
|
|
3614
|
+
return newObj;
|
|
3615
|
+
}
|
|
3573
3616
|
|
|
3574
3617
|
// src/colors/semantic.ts
|
|
3575
3618
|
var base = {
|
|
@@ -3705,6 +3748,258 @@ var colors = {
|
|
|
3705
3748
|
...semanticColors
|
|
3706
3749
|
};
|
|
3707
3750
|
|
|
3751
|
+
// src/plugin.ts
|
|
3752
|
+
var import_color = __toESM(require("color"));
|
|
3753
|
+
var import_plugin = __toESM(require("tailwindcss/plugin"));
|
|
3754
|
+
var import_lodash = __toESM(require("lodash.foreach"));
|
|
3755
|
+
var import_flat = __toESM(require("flat"));
|
|
3756
|
+
var import_lodash2 = __toESM(require("lodash.get"));
|
|
3757
|
+
var import_deepmerge = __toESM(require("deepmerge"));
|
|
3758
|
+
|
|
3759
|
+
// src/animations/index.ts
|
|
3760
|
+
var animations = {
|
|
3761
|
+
animation: {
|
|
3762
|
+
"drip-expand": "drip-expand 350ms linear",
|
|
3763
|
+
"spinner-ease-spin": "spinner-spin 0.8s ease infinite",
|
|
3764
|
+
"spinner-linear-spin": "spinner-spin 0.8s linear infinite",
|
|
3765
|
+
"appearance-in": "appearance-in 250ms ease-out normal both",
|
|
3766
|
+
"appearance-out": "appearance-out 60ms ease-in normal both"
|
|
3767
|
+
},
|
|
3768
|
+
keyframes: {
|
|
3769
|
+
"spinner-spin": {
|
|
3770
|
+
"0%": {
|
|
3771
|
+
transform: "rotate(0deg)"
|
|
3772
|
+
},
|
|
3773
|
+
"100%": {
|
|
3774
|
+
transform: "rotate(360deg)"
|
|
3775
|
+
}
|
|
3776
|
+
},
|
|
3777
|
+
"drip-expand": {
|
|
3778
|
+
"0%": {
|
|
3779
|
+
opacity: "0.4",
|
|
3780
|
+
transform: "scale(0)"
|
|
3781
|
+
},
|
|
3782
|
+
"100%": {
|
|
3783
|
+
opacity: "0",
|
|
3784
|
+
transform: "scale(2)"
|
|
3785
|
+
}
|
|
3786
|
+
},
|
|
3787
|
+
"appearance-in": {
|
|
3788
|
+
"0%": {
|
|
3789
|
+
opacity: "0",
|
|
3790
|
+
transform: "translateZ(0) scale(0.95)"
|
|
3791
|
+
},
|
|
3792
|
+
"60%": {
|
|
3793
|
+
opacity: "0.75",
|
|
3794
|
+
backfaceVisibility: "hidden",
|
|
3795
|
+
webkitFontSmoothing: "antialiased",
|
|
3796
|
+
transform: "translateZ(0) scale(1.05)"
|
|
3797
|
+
},
|
|
3798
|
+
"100%": {
|
|
3799
|
+
opacity: "1",
|
|
3800
|
+
transform: "translateZ(0) scale(1)"
|
|
3801
|
+
}
|
|
3802
|
+
},
|
|
3803
|
+
"appearance-out": {
|
|
3804
|
+
"0%": {
|
|
3805
|
+
opacity: "1",
|
|
3806
|
+
transform: "scale(1)"
|
|
3807
|
+
},
|
|
3808
|
+
"100%": {
|
|
3809
|
+
opacity: "0",
|
|
3810
|
+
transform: "scale(0.85)"
|
|
3811
|
+
}
|
|
3812
|
+
}
|
|
3813
|
+
}
|
|
3814
|
+
};
|
|
3815
|
+
|
|
3816
|
+
// src/utilities/index.ts
|
|
3817
|
+
var DEFAULT_TRANSITION_DURATION = "250ms";
|
|
3818
|
+
var utilities = {
|
|
3819
|
+
".leading-inherit": {
|
|
3820
|
+
"line-height": "inherit"
|
|
3821
|
+
},
|
|
3822
|
+
".bg-img-inherit": {
|
|
3823
|
+
"background-image": "inherit"
|
|
3824
|
+
},
|
|
3825
|
+
".bg-clip-inherit": {
|
|
3826
|
+
"background-clip": "inherit"
|
|
3827
|
+
},
|
|
3828
|
+
".text-fill-inherit": {
|
|
3829
|
+
"-webkit-text-fill-color": "inherit"
|
|
3830
|
+
},
|
|
3831
|
+
".transition-background": {
|
|
3832
|
+
"transition-property": "background",
|
|
3833
|
+
"transition-timing-function": "ease",
|
|
3834
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3835
|
+
},
|
|
3836
|
+
".transition-all": {
|
|
3837
|
+
"transition-property": "all",
|
|
3838
|
+
"transition-timing-function": "ease",
|
|
3839
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3840
|
+
},
|
|
3841
|
+
".transition": {
|
|
3842
|
+
"transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
|
3843
|
+
"transition-timing-function": "ease",
|
|
3844
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3845
|
+
},
|
|
3846
|
+
".transition-colors": {
|
|
3847
|
+
"transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
|
|
3848
|
+
"transition-timing-function": "ease",
|
|
3849
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3850
|
+
},
|
|
3851
|
+
".transition-opacity": {
|
|
3852
|
+
"transition-property": "opacity",
|
|
3853
|
+
"transition-timing-function": "ease",
|
|
3854
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3855
|
+
},
|
|
3856
|
+
".transition-width": {
|
|
3857
|
+
"transition-property": "width",
|
|
3858
|
+
"transition-timing-function": "ease",
|
|
3859
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3860
|
+
},
|
|
3861
|
+
".transition-shadow": {
|
|
3862
|
+
"transition-property": "box-shadow",
|
|
3863
|
+
"transition-timing-function": "ease",
|
|
3864
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3865
|
+
},
|
|
3866
|
+
".transition-transform": {
|
|
3867
|
+
"transition-property": "transform",
|
|
3868
|
+
"transition-timing-function": "ease",
|
|
3869
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3870
|
+
},
|
|
3871
|
+
".transition-transform-opacity": {
|
|
3872
|
+
"transition-property": "transform, opacity",
|
|
3873
|
+
"transition-timing-function": "ease",
|
|
3874
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3875
|
+
},
|
|
3876
|
+
".transition-transform-background": {
|
|
3877
|
+
"transition-property": "transform, background",
|
|
3878
|
+
"transition-timing-function": "ease",
|
|
3879
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3880
|
+
}
|
|
3881
|
+
};
|
|
3882
|
+
|
|
3883
|
+
// src/plugin.ts
|
|
3884
|
+
var SCHEME = Symbol("color-scheme");
|
|
3885
|
+
var VAR_PREFIX = "nextui";
|
|
3886
|
+
var dark = (colors2) => {
|
|
3887
|
+
return {
|
|
3888
|
+
[SCHEME]: "dark",
|
|
3889
|
+
...colors2
|
|
3890
|
+
};
|
|
3891
|
+
};
|
|
3892
|
+
var light2 = (colors2) => {
|
|
3893
|
+
return {
|
|
3894
|
+
[SCHEME]: "light",
|
|
3895
|
+
...colors2
|
|
3896
|
+
};
|
|
3897
|
+
};
|
|
3898
|
+
var resolveConfig = (config = {}, defaultTheme) => {
|
|
3899
|
+
const resolved = {
|
|
3900
|
+
variants: [],
|
|
3901
|
+
utilities: {},
|
|
3902
|
+
colors: {}
|
|
3903
|
+
};
|
|
3904
|
+
const configObject = typeof config === "function" ? config({ dark, light: light2 }) : config;
|
|
3905
|
+
(0, import_lodash.default)(configObject, (colors2, themeName) => {
|
|
3906
|
+
let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
|
|
3907
|
+
if (themeName === defaultTheme) {
|
|
3908
|
+
cssSelector = `:root,${cssSelector}`;
|
|
3909
|
+
}
|
|
3910
|
+
resolved.utilities[cssSelector] = colors2[SCHEME] ? {
|
|
3911
|
+
"color-scheme": colors2[SCHEME]
|
|
3912
|
+
} : {};
|
|
3913
|
+
const flatColors = removeDefaultKeys(
|
|
3914
|
+
(0, import_flat.default)(colors2, {
|
|
3915
|
+
safe: true,
|
|
3916
|
+
delimiter: "-"
|
|
3917
|
+
})
|
|
3918
|
+
);
|
|
3919
|
+
resolved.variants.push({
|
|
3920
|
+
name: `theme-${themeName}`,
|
|
3921
|
+
definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
|
|
3922
|
+
});
|
|
3923
|
+
(0, import_lodash.default)(flatColors, (colorValue, colorName) => {
|
|
3924
|
+
if (colorName === SCHEME || !colorValue)
|
|
3925
|
+
return;
|
|
3926
|
+
try {
|
|
3927
|
+
const [h, s, l, defaultAlphaValue] = (0, import_color.default)(colorValue).hsl().round().array();
|
|
3928
|
+
const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
|
|
3929
|
+
const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
|
|
3930
|
+
resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
|
|
3931
|
+
if (typeof defaultAlphaValue === "number") {
|
|
3932
|
+
resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
|
|
3933
|
+
}
|
|
3934
|
+
resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
|
|
3935
|
+
if (!isNaN(+opacityValue)) {
|
|
3936
|
+
return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
|
|
3937
|
+
}
|
|
3938
|
+
if (opacityVariable) {
|
|
3939
|
+
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
|
|
3940
|
+
}
|
|
3941
|
+
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
|
|
3942
|
+
};
|
|
3943
|
+
} catch (error) {
|
|
3944
|
+
console.log("error", error == null ? void 0 : error.message);
|
|
3945
|
+
}
|
|
3946
|
+
});
|
|
3947
|
+
});
|
|
3948
|
+
return resolved;
|
|
3949
|
+
};
|
|
3950
|
+
var corePlugin = (config = {}, defaultTheme) => {
|
|
3951
|
+
const resolved = resolveConfig(config, defaultTheme);
|
|
3952
|
+
return (0, import_plugin.default)(
|
|
3953
|
+
({ addBase, addUtilities, addVariant }) => {
|
|
3954
|
+
addBase({
|
|
3955
|
+
[":root, [data-theme]"]: {
|
|
3956
|
+
...baseStyles
|
|
3957
|
+
}
|
|
3958
|
+
});
|
|
3959
|
+
addUtilities({ ...resolved.utilities, ...utilities });
|
|
3960
|
+
resolved.variants.forEach((variant) => {
|
|
3961
|
+
addVariant(variant.name, variant.definition);
|
|
3962
|
+
});
|
|
3963
|
+
},
|
|
3964
|
+
{
|
|
3965
|
+
theme: {
|
|
3966
|
+
extend: {
|
|
3967
|
+
colors: {
|
|
3968
|
+
...commonColors,
|
|
3969
|
+
...resolved.colors
|
|
3970
|
+
},
|
|
3971
|
+
fontSize: {
|
|
3972
|
+
tiny: "0.625rem"
|
|
3973
|
+
},
|
|
3974
|
+
borderWidth: {
|
|
3975
|
+
1: "1px",
|
|
3976
|
+
1.5: "1.5px",
|
|
3977
|
+
3: "3px",
|
|
3978
|
+
5: "5px"
|
|
3979
|
+
},
|
|
3980
|
+
transitionDuration: {
|
|
3981
|
+
0: "0ms",
|
|
3982
|
+
250: "250ms"
|
|
3983
|
+
},
|
|
3984
|
+
...animations
|
|
3985
|
+
}
|
|
3986
|
+
}
|
|
3987
|
+
}
|
|
3988
|
+
);
|
|
3989
|
+
};
|
|
3990
|
+
var nextui = (config = {}) => {
|
|
3991
|
+
const userLightColors = (0, import_lodash2.default)(config.themes, "light", {});
|
|
3992
|
+
const userDarkColors = (0, import_lodash2.default)(config.themes, "dark", {});
|
|
3993
|
+
const defaultTheme = config.defaultTheme || "light";
|
|
3994
|
+
return corePlugin(
|
|
3995
|
+
{
|
|
3996
|
+
light: (0, import_deepmerge.default)(semanticColors.light, userLightColors),
|
|
3997
|
+
dark: (0, import_deepmerge.default)(semanticColors.dark, userDarkColors)
|
|
3998
|
+
},
|
|
3999
|
+
defaultTheme
|
|
4000
|
+
);
|
|
4001
|
+
};
|
|
4002
|
+
|
|
3708
4003
|
// src/index.ts
|
|
3709
4004
|
var import_tailwind_variants23 = require("tailwind-variants");
|
|
3710
4005
|
var import_tailwind_variants24 = require("tailwind-variants");
|
|
@@ -3732,9 +4027,11 @@ var cn = (...classes) => (0, import_tailwind_variants23.cn)(classes)();
|
|
|
3732
4027
|
drip,
|
|
3733
4028
|
focusVisibleClasses,
|
|
3734
4029
|
link,
|
|
4030
|
+
nextui,
|
|
3735
4031
|
pagination,
|
|
3736
4032
|
radio,
|
|
3737
4033
|
radioGroup,
|
|
4034
|
+
resolveConfig,
|
|
3738
4035
|
ringClasses,
|
|
3739
4036
|
semanticColors,
|
|
3740
4037
|
snippet,
|
package/dist/index.mjs
CHANGED
|
@@ -55,7 +55,7 @@ import {
|
|
|
55
55
|
} from "./chunk-VKFQ7EZN.mjs";
|
|
56
56
|
import {
|
|
57
57
|
button
|
|
58
|
-
} from "./chunk-
|
|
58
|
+
} from "./chunk-BD2KW4ZD.mjs";
|
|
59
59
|
import {
|
|
60
60
|
card
|
|
61
61
|
} from "./chunk-Z5OKZPNV.mjs";
|
|
@@ -70,6 +70,11 @@ import "./chunk-K7LK7NCE.mjs";
|
|
|
70
70
|
import {
|
|
71
71
|
colorVariants
|
|
72
72
|
} from "./chunk-LGGZKBOO.mjs";
|
|
73
|
+
import {
|
|
74
|
+
nextui,
|
|
75
|
+
resolveConfig
|
|
76
|
+
} from "./chunk-ONURTFN3.mjs";
|
|
77
|
+
import "./chunk-45FXWIO6.mjs";
|
|
73
78
|
import {
|
|
74
79
|
absoluteFullClasses,
|
|
75
80
|
baseStyles,
|
|
@@ -86,6 +91,7 @@ import {
|
|
|
86
91
|
} from "./chunk-Y52EXP4A.mjs";
|
|
87
92
|
import "./chunk-37PIXVP4.mjs";
|
|
88
93
|
import "./chunk-M63AFAHO.mjs";
|
|
94
|
+
import "./chunk-QPN3H4E3.mjs";
|
|
89
95
|
import {
|
|
90
96
|
commonColors
|
|
91
97
|
} from "./chunk-CRCBVLUP.mjs";
|
|
@@ -123,9 +129,11 @@ export {
|
|
|
123
129
|
drip,
|
|
124
130
|
focusVisibleClasses,
|
|
125
131
|
link,
|
|
132
|
+
nextui,
|
|
126
133
|
pagination,
|
|
127
134
|
radio,
|
|
128
135
|
radioGroup,
|
|
136
|
+
resolveConfig,
|
|
129
137
|
ringClasses,
|
|
130
138
|
semanticColors,
|
|
131
139
|
snippet,
|
package/dist/plugin.js
CHANGED
package/dist/plugin.mjs
CHANGED
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
nextui,
|
|
3
|
+
resolveConfig
|
|
4
|
+
} from "./chunk-ONURTFN3.mjs";
|
|
5
|
+
import "./chunk-45FXWIO6.mjs";
|
|
6
|
+
import "./chunk-IJCHUO4J.mjs";
|
|
7
7
|
import "./chunk-WQEDQHKX.mjs";
|
|
8
8
|
import "./chunk-7MQD7UA2.mjs";
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
} from "./chunk-Y52EXP4A.mjs";
|
|
12
|
-
import {
|
|
13
|
-
removeDefaultKeys
|
|
14
|
-
} from "./chunk-37PIXVP4.mjs";
|
|
9
|
+
import "./chunk-Y52EXP4A.mjs";
|
|
10
|
+
import "./chunk-37PIXVP4.mjs";
|
|
15
11
|
import "./chunk-M63AFAHO.mjs";
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
} from "./chunk-QPN3H4E3.mjs";
|
|
19
|
-
import {
|
|
20
|
-
commonColors
|
|
21
|
-
} from "./chunk-CRCBVLUP.mjs";
|
|
12
|
+
import "./chunk-QPN3H4E3.mjs";
|
|
13
|
+
import "./chunk-CRCBVLUP.mjs";
|
|
22
14
|
import "./chunk-DCEG5LGX.mjs";
|
|
23
15
|
import "./chunk-L2OL7R23.mjs";
|
|
24
16
|
import "./chunk-YZYGFPNK.mjs";
|
|
@@ -26,135 +18,6 @@ import "./chunk-Y4YW5MKL.mjs";
|
|
|
26
18
|
import "./chunk-KZJBCC2H.mjs";
|
|
27
19
|
import "./chunk-T3GWIVAM.mjs";
|
|
28
20
|
import "./chunk-OR5PUD24.mjs";
|
|
29
|
-
|
|
30
|
-
// src/plugin.ts
|
|
31
|
-
import Color from "color";
|
|
32
|
-
import plugin from "tailwindcss/plugin";
|
|
33
|
-
import forEach from "lodash.foreach";
|
|
34
|
-
import flatten from "flat";
|
|
35
|
-
import get from "lodash.get";
|
|
36
|
-
import deepMerge from "deepmerge";
|
|
37
|
-
var SCHEME = Symbol("color-scheme");
|
|
38
|
-
var VAR_PREFIX = "nextui";
|
|
39
|
-
var dark = (colors) => {
|
|
40
|
-
return {
|
|
41
|
-
[SCHEME]: "dark",
|
|
42
|
-
...colors
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
var light = (colors) => {
|
|
46
|
-
return {
|
|
47
|
-
[SCHEME]: "light",
|
|
48
|
-
...colors
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
var resolveConfig = (config = {}, defaultTheme) => {
|
|
52
|
-
const resolved = {
|
|
53
|
-
variants: [],
|
|
54
|
-
utilities: {},
|
|
55
|
-
colors: {}
|
|
56
|
-
};
|
|
57
|
-
const configObject = typeof config === "function" ? config({ dark, light }) : config;
|
|
58
|
-
forEach(configObject, (colors, themeName) => {
|
|
59
|
-
let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
|
|
60
|
-
if (themeName === defaultTheme) {
|
|
61
|
-
cssSelector = `:root,${cssSelector}`;
|
|
62
|
-
}
|
|
63
|
-
resolved.utilities[cssSelector] = colors[SCHEME] ? {
|
|
64
|
-
"color-scheme": colors[SCHEME]
|
|
65
|
-
} : {};
|
|
66
|
-
const flatColors = removeDefaultKeys(
|
|
67
|
-
flatten(colors, {
|
|
68
|
-
safe: true,
|
|
69
|
-
delimiter: "-"
|
|
70
|
-
})
|
|
71
|
-
);
|
|
72
|
-
resolved.variants.push({
|
|
73
|
-
name: `theme-${themeName}`,
|
|
74
|
-
definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
|
|
75
|
-
});
|
|
76
|
-
forEach(flatColors, (colorValue, colorName) => {
|
|
77
|
-
if (colorName === SCHEME || !colorValue)
|
|
78
|
-
return;
|
|
79
|
-
try {
|
|
80
|
-
const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
|
|
81
|
-
const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
|
|
82
|
-
const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
|
|
83
|
-
resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
|
|
84
|
-
if (typeof defaultAlphaValue === "number") {
|
|
85
|
-
resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
|
|
86
|
-
}
|
|
87
|
-
resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
|
|
88
|
-
if (!isNaN(+opacityValue)) {
|
|
89
|
-
return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
|
|
90
|
-
}
|
|
91
|
-
if (opacityVariable) {
|
|
92
|
-
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
|
|
93
|
-
}
|
|
94
|
-
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
|
|
95
|
-
};
|
|
96
|
-
} catch (error) {
|
|
97
|
-
console.log("error", error == null ? void 0 : error.message);
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
});
|
|
101
|
-
return resolved;
|
|
102
|
-
};
|
|
103
|
-
var corePlugin = (config = {}, defaultTheme) => {
|
|
104
|
-
const resolved = resolveConfig(config, defaultTheme);
|
|
105
|
-
return plugin(
|
|
106
|
-
({ addBase, addUtilities, addVariant }) => {
|
|
107
|
-
addBase({
|
|
108
|
-
[":root, [data-theme]"]: {
|
|
109
|
-
...baseStyles
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
addUtilities({ ...resolved.utilities, ...utilities });
|
|
113
|
-
resolved.variants.forEach((variant) => {
|
|
114
|
-
addVariant(variant.name, variant.definition);
|
|
115
|
-
});
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
theme: {
|
|
119
|
-
extend: {
|
|
120
|
-
colors: {
|
|
121
|
-
...commonColors,
|
|
122
|
-
...resolved.colors
|
|
123
|
-
},
|
|
124
|
-
fontSize: {
|
|
125
|
-
tiny: "0.625rem"
|
|
126
|
-
},
|
|
127
|
-
borderWidth: {
|
|
128
|
-
1: "1px",
|
|
129
|
-
1.5: "1.5px",
|
|
130
|
-
3: "3px",
|
|
131
|
-
5: "5px"
|
|
132
|
-
},
|
|
133
|
-
transitionDuration: {
|
|
134
|
-
0: "0ms",
|
|
135
|
-
250: "250ms"
|
|
136
|
-
},
|
|
137
|
-
...animations
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
);
|
|
142
|
-
};
|
|
143
|
-
var nextui = (config = {}) => {
|
|
144
|
-
const userLightColors = get(config.themes, "light", {});
|
|
145
|
-
const userDarkColors = get(config.themes, "dark", {});
|
|
146
|
-
const defaultTheme = config.defaultTheme || "light";
|
|
147
|
-
return corePlugin(
|
|
148
|
-
{
|
|
149
|
-
light: deepMerge(semanticColors.light, userLightColors),
|
|
150
|
-
dark: deepMerge(semanticColors.dark, userDarkColors)
|
|
151
|
-
},
|
|
152
|
-
defaultTheme
|
|
153
|
-
);
|
|
154
|
-
};
|
|
155
|
-
nextui({
|
|
156
|
-
defaultTheme: "light"
|
|
157
|
-
});
|
|
158
21
|
export {
|
|
159
22
|
nextui,
|
|
160
23
|
resolveConfig
|