@nextui-org/theme 0.0.0-dev-v2-20230326032643 → 0.0.0-dev-v2-20230326130503
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-AOPFJ3A7.mjs +148 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +265 -0
- package/dist/index.mjs +6 -0
- package/dist/plugin.d.ts +3 -14
- package/dist/plugin.js +2 -7
- package/dist/plugin.mjs +9 -148
- package/package.json +1 -1
|
@@ -0,0 +1,148 @@
|
|
|
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
|
+
nextui
|
|
148
|
+
};
|
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, DefaultThemeType, NextUIConfig, nextui } 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,6 +47,7 @@ __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,
|
|
@@ -3600,6 +3601,17 @@ function swapColorValues(colors2) {
|
|
|
3600
3601
|
}
|
|
3601
3602
|
return swappedColors;
|
|
3602
3603
|
}
|
|
3604
|
+
function removeDefaultKeys(obj) {
|
|
3605
|
+
const newObj = {};
|
|
3606
|
+
for (const key in obj) {
|
|
3607
|
+
if (key.endsWith("-DEFAULT")) {
|
|
3608
|
+
newObj[key.replace("-DEFAULT", "")] = obj[key];
|
|
3609
|
+
continue;
|
|
3610
|
+
}
|
|
3611
|
+
newObj[key] = obj[key];
|
|
3612
|
+
}
|
|
3613
|
+
return newObj;
|
|
3614
|
+
}
|
|
3603
3615
|
|
|
3604
3616
|
// src/colors/semantic.ts
|
|
3605
3617
|
var base = {
|
|
@@ -3735,6 +3747,258 @@ var colors = {
|
|
|
3735
3747
|
...semanticColors
|
|
3736
3748
|
};
|
|
3737
3749
|
|
|
3750
|
+
// src/plugin.ts
|
|
3751
|
+
var import_color = __toESM(require("color"));
|
|
3752
|
+
var import_plugin = __toESM(require("tailwindcss/plugin"));
|
|
3753
|
+
var import_lodash = __toESM(require("lodash.foreach"));
|
|
3754
|
+
var import_flat = __toESM(require("flat"));
|
|
3755
|
+
var import_lodash2 = __toESM(require("lodash.get"));
|
|
3756
|
+
var import_deepmerge = __toESM(require("deepmerge"));
|
|
3757
|
+
|
|
3758
|
+
// src/animations/index.ts
|
|
3759
|
+
var animations = {
|
|
3760
|
+
animation: {
|
|
3761
|
+
"drip-expand": "drip-expand 350ms linear",
|
|
3762
|
+
"spinner-ease-spin": "spinner-spin 0.8s ease infinite",
|
|
3763
|
+
"spinner-linear-spin": "spinner-spin 0.8s linear infinite",
|
|
3764
|
+
"appearance-in": "appearance-in 250ms ease-out normal both",
|
|
3765
|
+
"appearance-out": "appearance-out 60ms ease-in normal both"
|
|
3766
|
+
},
|
|
3767
|
+
keyframes: {
|
|
3768
|
+
"spinner-spin": {
|
|
3769
|
+
"0%": {
|
|
3770
|
+
transform: "rotate(0deg)"
|
|
3771
|
+
},
|
|
3772
|
+
"100%": {
|
|
3773
|
+
transform: "rotate(360deg)"
|
|
3774
|
+
}
|
|
3775
|
+
},
|
|
3776
|
+
"drip-expand": {
|
|
3777
|
+
"0%": {
|
|
3778
|
+
opacity: "0.4",
|
|
3779
|
+
transform: "scale(0)"
|
|
3780
|
+
},
|
|
3781
|
+
"100%": {
|
|
3782
|
+
opacity: "0",
|
|
3783
|
+
transform: "scale(2)"
|
|
3784
|
+
}
|
|
3785
|
+
},
|
|
3786
|
+
"appearance-in": {
|
|
3787
|
+
"0%": {
|
|
3788
|
+
opacity: "0",
|
|
3789
|
+
transform: "translateZ(0) scale(0.95)"
|
|
3790
|
+
},
|
|
3791
|
+
"60%": {
|
|
3792
|
+
opacity: "0.75",
|
|
3793
|
+
backfaceVisibility: "hidden",
|
|
3794
|
+
webkitFontSmoothing: "antialiased",
|
|
3795
|
+
transform: "translateZ(0) scale(1.05)"
|
|
3796
|
+
},
|
|
3797
|
+
"100%": {
|
|
3798
|
+
opacity: "1",
|
|
3799
|
+
transform: "translateZ(0) scale(1)"
|
|
3800
|
+
}
|
|
3801
|
+
},
|
|
3802
|
+
"appearance-out": {
|
|
3803
|
+
"0%": {
|
|
3804
|
+
opacity: "1",
|
|
3805
|
+
transform: "scale(1)"
|
|
3806
|
+
},
|
|
3807
|
+
"100%": {
|
|
3808
|
+
opacity: "0",
|
|
3809
|
+
transform: "scale(0.85)"
|
|
3810
|
+
}
|
|
3811
|
+
}
|
|
3812
|
+
}
|
|
3813
|
+
};
|
|
3814
|
+
|
|
3815
|
+
// src/utilities/index.ts
|
|
3816
|
+
var DEFAULT_TRANSITION_DURATION = "250ms";
|
|
3817
|
+
var utilities = {
|
|
3818
|
+
".leading-inherit": {
|
|
3819
|
+
"line-height": "inherit"
|
|
3820
|
+
},
|
|
3821
|
+
".bg-img-inherit": {
|
|
3822
|
+
"background-image": "inherit"
|
|
3823
|
+
},
|
|
3824
|
+
".bg-clip-inherit": {
|
|
3825
|
+
"background-clip": "inherit"
|
|
3826
|
+
},
|
|
3827
|
+
".text-fill-inherit": {
|
|
3828
|
+
"-webkit-text-fill-color": "inherit"
|
|
3829
|
+
},
|
|
3830
|
+
".transition-background": {
|
|
3831
|
+
"transition-property": "background",
|
|
3832
|
+
"transition-timing-function": "ease",
|
|
3833
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3834
|
+
},
|
|
3835
|
+
".transition-all": {
|
|
3836
|
+
"transition-property": "all",
|
|
3837
|
+
"transition-timing-function": "ease",
|
|
3838
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3839
|
+
},
|
|
3840
|
+
".transition": {
|
|
3841
|
+
"transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
|
3842
|
+
"transition-timing-function": "ease",
|
|
3843
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3844
|
+
},
|
|
3845
|
+
".transition-colors": {
|
|
3846
|
+
"transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
|
|
3847
|
+
"transition-timing-function": "ease",
|
|
3848
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3849
|
+
},
|
|
3850
|
+
".transition-opacity": {
|
|
3851
|
+
"transition-property": "opacity",
|
|
3852
|
+
"transition-timing-function": "ease",
|
|
3853
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3854
|
+
},
|
|
3855
|
+
".transition-width": {
|
|
3856
|
+
"transition-property": "width",
|
|
3857
|
+
"transition-timing-function": "ease",
|
|
3858
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3859
|
+
},
|
|
3860
|
+
".transition-shadow": {
|
|
3861
|
+
"transition-property": "box-shadow",
|
|
3862
|
+
"transition-timing-function": "ease",
|
|
3863
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3864
|
+
},
|
|
3865
|
+
".transition-transform": {
|
|
3866
|
+
"transition-property": "transform",
|
|
3867
|
+
"transition-timing-function": "ease",
|
|
3868
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3869
|
+
},
|
|
3870
|
+
".transition-transform-opacity": {
|
|
3871
|
+
"transition-property": "transform, opacity",
|
|
3872
|
+
"transition-timing-function": "ease",
|
|
3873
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3874
|
+
},
|
|
3875
|
+
".transition-transform-background": {
|
|
3876
|
+
"transition-property": "transform, background",
|
|
3877
|
+
"transition-timing-function": "ease",
|
|
3878
|
+
"transition-duration": DEFAULT_TRANSITION_DURATION
|
|
3879
|
+
}
|
|
3880
|
+
};
|
|
3881
|
+
|
|
3882
|
+
// src/plugin.ts
|
|
3883
|
+
var SCHEME = Symbol("color-scheme");
|
|
3884
|
+
var VAR_PREFIX = "nextui";
|
|
3885
|
+
var dark = (colors2) => {
|
|
3886
|
+
return {
|
|
3887
|
+
[SCHEME]: "dark",
|
|
3888
|
+
...colors2
|
|
3889
|
+
};
|
|
3890
|
+
};
|
|
3891
|
+
var light2 = (colors2) => {
|
|
3892
|
+
return {
|
|
3893
|
+
[SCHEME]: "light",
|
|
3894
|
+
...colors2
|
|
3895
|
+
};
|
|
3896
|
+
};
|
|
3897
|
+
var resolveConfig = (config = {}, defaultTheme) => {
|
|
3898
|
+
const resolved = {
|
|
3899
|
+
variants: [],
|
|
3900
|
+
utilities: {},
|
|
3901
|
+
colors: {}
|
|
3902
|
+
};
|
|
3903
|
+
const configObject = typeof config === "function" ? config({ dark, light: light2 }) : config;
|
|
3904
|
+
(0, import_lodash.default)(configObject, (colors2, themeName) => {
|
|
3905
|
+
let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
|
|
3906
|
+
if (themeName === defaultTheme) {
|
|
3907
|
+
cssSelector = `:root,${cssSelector}`;
|
|
3908
|
+
}
|
|
3909
|
+
resolved.utilities[cssSelector] = colors2[SCHEME] ? {
|
|
3910
|
+
"color-scheme": colors2[SCHEME]
|
|
3911
|
+
} : {};
|
|
3912
|
+
const flatColors = removeDefaultKeys(
|
|
3913
|
+
(0, import_flat.default)(colors2, {
|
|
3914
|
+
safe: true,
|
|
3915
|
+
delimiter: "-"
|
|
3916
|
+
})
|
|
3917
|
+
);
|
|
3918
|
+
resolved.variants.push({
|
|
3919
|
+
name: `theme-${themeName}`,
|
|
3920
|
+
definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
|
|
3921
|
+
});
|
|
3922
|
+
(0, import_lodash.default)(flatColors, (colorValue, colorName) => {
|
|
3923
|
+
if (colorName === SCHEME || !colorValue)
|
|
3924
|
+
return;
|
|
3925
|
+
try {
|
|
3926
|
+
const [h, s, l, defaultAlphaValue] = (0, import_color.default)(colorValue).hsl().round().array();
|
|
3927
|
+
const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
|
|
3928
|
+
const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
|
|
3929
|
+
resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
|
|
3930
|
+
if (typeof defaultAlphaValue === "number") {
|
|
3931
|
+
resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
|
|
3932
|
+
}
|
|
3933
|
+
resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
|
|
3934
|
+
if (!isNaN(+opacityValue)) {
|
|
3935
|
+
return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
|
|
3936
|
+
}
|
|
3937
|
+
if (opacityVariable) {
|
|
3938
|
+
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
|
|
3939
|
+
}
|
|
3940
|
+
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
|
|
3941
|
+
};
|
|
3942
|
+
} catch (error) {
|
|
3943
|
+
console.log("error", error == null ? void 0 : error.message);
|
|
3944
|
+
}
|
|
3945
|
+
});
|
|
3946
|
+
});
|
|
3947
|
+
return resolved;
|
|
3948
|
+
};
|
|
3949
|
+
var corePlugin = (config = {}, defaultTheme) => {
|
|
3950
|
+
const resolved = resolveConfig(config, defaultTheme);
|
|
3951
|
+
return (0, import_plugin.default)(
|
|
3952
|
+
({ addBase, addUtilities, addVariant }) => {
|
|
3953
|
+
addBase({
|
|
3954
|
+
[":root, [data-theme]"]: {
|
|
3955
|
+
...baseStyles
|
|
3956
|
+
}
|
|
3957
|
+
});
|
|
3958
|
+
addUtilities({ ...resolved.utilities, ...utilities });
|
|
3959
|
+
resolved.variants.forEach((variant) => {
|
|
3960
|
+
addVariant(variant.name, variant.definition);
|
|
3961
|
+
});
|
|
3962
|
+
},
|
|
3963
|
+
{
|
|
3964
|
+
theme: {
|
|
3965
|
+
extend: {
|
|
3966
|
+
colors: {
|
|
3967
|
+
...commonColors,
|
|
3968
|
+
...resolved.colors
|
|
3969
|
+
},
|
|
3970
|
+
fontSize: {
|
|
3971
|
+
tiny: "0.625rem"
|
|
3972
|
+
},
|
|
3973
|
+
borderWidth: {
|
|
3974
|
+
1: "1px",
|
|
3975
|
+
1.5: "1.5px",
|
|
3976
|
+
3: "3px",
|
|
3977
|
+
5: "5px"
|
|
3978
|
+
},
|
|
3979
|
+
transitionDuration: {
|
|
3980
|
+
0: "0ms",
|
|
3981
|
+
250: "250ms"
|
|
3982
|
+
},
|
|
3983
|
+
...animations
|
|
3984
|
+
}
|
|
3985
|
+
}
|
|
3986
|
+
}
|
|
3987
|
+
);
|
|
3988
|
+
};
|
|
3989
|
+
var nextui = (config = {}) => {
|
|
3990
|
+
const userLightColors = (0, import_lodash2.default)(config.themes, "light", {});
|
|
3991
|
+
const userDarkColors = (0, import_lodash2.default)(config.themes, "dark", {});
|
|
3992
|
+
const defaultTheme = config.defaultTheme || "light";
|
|
3993
|
+
return corePlugin(
|
|
3994
|
+
{
|
|
3995
|
+
light: (0, import_deepmerge.default)(semanticColors.light, userLightColors),
|
|
3996
|
+
dark: (0, import_deepmerge.default)(semanticColors.dark, userDarkColors)
|
|
3997
|
+
},
|
|
3998
|
+
defaultTheme
|
|
3999
|
+
);
|
|
4000
|
+
};
|
|
4001
|
+
|
|
3738
4002
|
// src/index.ts
|
|
3739
4003
|
var import_tailwind_variants23 = require("tailwind-variants");
|
|
3740
4004
|
var import_tailwind_variants24 = require("tailwind-variants");
|
|
@@ -3762,6 +4026,7 @@ var cn = (...classes) => (0, import_tailwind_variants23.cn)(classes)();
|
|
|
3762
4026
|
drip,
|
|
3763
4027
|
focusVisibleClasses,
|
|
3764
4028
|
link,
|
|
4029
|
+
nextui,
|
|
3765
4030
|
pagination,
|
|
3766
4031
|
radio,
|
|
3767
4032
|
radioGroup,
|
package/dist/index.mjs
CHANGED
|
@@ -70,6 +70,10 @@ import "./chunk-K7LK7NCE.mjs";
|
|
|
70
70
|
import {
|
|
71
71
|
colorVariants
|
|
72
72
|
} from "./chunk-LGGZKBOO.mjs";
|
|
73
|
+
import {
|
|
74
|
+
nextui
|
|
75
|
+
} from "./chunk-AOPFJ3A7.mjs";
|
|
76
|
+
import "./chunk-45FXWIO6.mjs";
|
|
73
77
|
import {
|
|
74
78
|
absoluteFullClasses,
|
|
75
79
|
baseStyles,
|
|
@@ -86,6 +90,7 @@ import {
|
|
|
86
90
|
} from "./chunk-Y52EXP4A.mjs";
|
|
87
91
|
import "./chunk-37PIXVP4.mjs";
|
|
88
92
|
import "./chunk-M63AFAHO.mjs";
|
|
93
|
+
import "./chunk-QPN3H4E3.mjs";
|
|
89
94
|
import {
|
|
90
95
|
commonColors
|
|
91
96
|
} from "./chunk-CRCBVLUP.mjs";
|
|
@@ -123,6 +128,7 @@ export {
|
|
|
123
128
|
drip,
|
|
124
129
|
focusVisibleClasses,
|
|
125
130
|
link,
|
|
131
|
+
nextui,
|
|
126
132
|
pagination,
|
|
127
133
|
radio,
|
|
128
134
|
radioGroup,
|
package/dist/plugin.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ interface ColorsWithScheme<T> extends Colors {
|
|
|
14
14
|
[SCHEME]?: T;
|
|
15
15
|
}
|
|
16
16
|
type SchemerFn<T> = (colors: Colors) => ColorsWithScheme<T>;
|
|
17
|
-
type
|
|
17
|
+
type DefaultThemeType = "light" | "dark";
|
|
18
18
|
type ConfigObject = Record<string, ColorsWithScheme<"light" | "dark">>;
|
|
19
19
|
type ConfigFunction = ({ light, dark, }: {
|
|
20
20
|
light: SchemerFn<"light">;
|
|
@@ -29,22 +29,11 @@ type NextUIConfig = {
|
|
|
29
29
|
* The default theme to use.
|
|
30
30
|
* @default "light"
|
|
31
31
|
*/
|
|
32
|
-
defaultTheme?:
|
|
33
|
-
};
|
|
34
|
-
declare const resolveConfig: (config: ConfigObject | ConfigFunction | undefined, defaultTheme: DefaultTheme) => {
|
|
35
|
-
variants: {
|
|
36
|
-
name: string;
|
|
37
|
-
definition: string[];
|
|
38
|
-
}[];
|
|
39
|
-
utilities: Record<string, Record<string, any>>;
|
|
40
|
-
colors: Record<string, ({ opacityValue, opacityVariable }: {
|
|
41
|
-
opacityValue: string;
|
|
42
|
-
opacityVariable: string;
|
|
43
|
-
}) => string>;
|
|
32
|
+
defaultTheme?: DefaultThemeType;
|
|
44
33
|
};
|
|
45
34
|
declare const nextui: (config?: NextUIConfig) => {
|
|
46
35
|
handler: tailwindcss_types_config.PluginCreator;
|
|
47
36
|
config?: Partial<tailwindcss.Config> | undefined;
|
|
48
37
|
};
|
|
49
38
|
|
|
50
|
-
export { Colors, ColorsWithScheme, ConfigFunction, ConfigObject,
|
|
39
|
+
export { Colors, ColorsWithScheme, ConfigFunction, ConfigObject, DefaultThemeType, NextUIConfig, nextui };
|
package/dist/plugin.js
CHANGED
|
@@ -26,8 +26,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
26
26
|
// src/plugin.ts
|
|
27
27
|
var plugin_exports = {};
|
|
28
28
|
__export(plugin_exports, {
|
|
29
|
-
nextui: () => nextui
|
|
30
|
-
resolveConfig: () => resolveConfig
|
|
29
|
+
nextui: () => nextui
|
|
31
30
|
});
|
|
32
31
|
module.exports = __toCommonJS(plugin_exports);
|
|
33
32
|
var import_color = __toESM(require("color"));
|
|
@@ -564,11 +563,7 @@ var nextui = (config = {}) => {
|
|
|
564
563
|
defaultTheme
|
|
565
564
|
);
|
|
566
565
|
};
|
|
567
|
-
nextui({
|
|
568
|
-
defaultTheme: "light"
|
|
569
|
-
});
|
|
570
566
|
// Annotate the CommonJS export names for ESM import in node:
|
|
571
567
|
0 && (module.exports = {
|
|
572
|
-
nextui
|
|
573
|
-
resolveConfig
|
|
568
|
+
nextui
|
|
574
569
|
});
|
package/dist/plugin.mjs
CHANGED
|
@@ -1,24 +1,15 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
} from "./chunk-IJCHUO4J.mjs";
|
|
2
|
+
nextui
|
|
3
|
+
} from "./chunk-AOPFJ3A7.mjs";
|
|
4
|
+
import "./chunk-45FXWIO6.mjs";
|
|
5
|
+
import "./chunk-IJCHUO4J.mjs";
|
|
7
6
|
import "./chunk-WQEDQHKX.mjs";
|
|
8
7
|
import "./chunk-7MQD7UA2.mjs";
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
} from "./chunk-Y52EXP4A.mjs";
|
|
12
|
-
import {
|
|
13
|
-
removeDefaultKeys
|
|
14
|
-
} from "./chunk-37PIXVP4.mjs";
|
|
8
|
+
import "./chunk-Y52EXP4A.mjs";
|
|
9
|
+
import "./chunk-37PIXVP4.mjs";
|
|
15
10
|
import "./chunk-M63AFAHO.mjs";
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
} from "./chunk-QPN3H4E3.mjs";
|
|
19
|
-
import {
|
|
20
|
-
commonColors
|
|
21
|
-
} from "./chunk-CRCBVLUP.mjs";
|
|
11
|
+
import "./chunk-QPN3H4E3.mjs";
|
|
12
|
+
import "./chunk-CRCBVLUP.mjs";
|
|
22
13
|
import "./chunk-DCEG5LGX.mjs";
|
|
23
14
|
import "./chunk-L2OL7R23.mjs";
|
|
24
15
|
import "./chunk-YZYGFPNK.mjs";
|
|
@@ -26,136 +17,6 @@ import "./chunk-Y4YW5MKL.mjs";
|
|
|
26
17
|
import "./chunk-KZJBCC2H.mjs";
|
|
27
18
|
import "./chunk-T3GWIVAM.mjs";
|
|
28
19
|
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
20
|
export {
|
|
159
|
-
nextui
|
|
160
|
-
resolveConfig
|
|
21
|
+
nextui
|
|
161
22
|
};
|