@nextui-org/theme 2.1.12 → 2.1.14

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.
@@ -9,7 +9,7 @@ import {
9
9
  // src/components/input.ts
10
10
  var input = tv({
11
11
  slots: {
12
- base: ["group flex relative flex-col", "data-[has-helper=true]:mb-4"],
12
+ base: "group flex flex-col",
13
13
  label: [
14
14
  "absolute",
15
15
  "z-10",
@@ -45,7 +45,7 @@ var input = tv({
45
45
  "rounded-full",
46
46
  ...dataFocusVisibleClasses
47
47
  ],
48
- helperWrapper: "flex absolute -bottom-[calc(theme(fontSize.tiny)*1.5)] flex-col gap-1.5 px-1",
48
+ helperWrapper: "p-1 flex relative flex-col gap-1.5",
49
49
  description: "text-tiny text-foreground-400",
50
50
  errorMessage: "text-tiny text-danger"
51
51
  },
@@ -64,14 +64,15 @@ var input = tv({
64
64
  "border-medium",
65
65
  "border-default-200",
66
66
  "data-[hover=true]:border-default-400"
67
- ]
67
+ ],
68
+ value: "group-data-[has-value=true]:text-default-foreground"
68
69
  },
69
70
  bordered: {
70
71
  inputWrapper: [
71
72
  "border-medium",
72
73
  "border-default-200",
73
74
  "data-[hover=true]:border-default-400",
74
- "group-data-[focus=true]:border-foreground"
75
+ "group-data-[focus=true]:border-default-foreground"
75
76
  ]
76
77
  },
77
78
  underlined: {
@@ -89,7 +90,7 @@ var input = tv({
89
90
  "after:content-['']",
90
91
  "after:w-0",
91
92
  "after:origin-center",
92
- "after:bg-foreground",
93
+ "after:bg-default-foreground",
93
94
  "after:absolute",
94
95
  "after:left-1/2",
95
96
  "after:-translate-x-1/2",
@@ -97,7 +98,8 @@ var input = tv({
97
98
  "after:h-[2px]",
98
99
  "group-data-[focus=true]:after:w-full"
99
100
  ],
100
- innerWrapper: "pb-1"
101
+ innerWrapper: "pb-1",
102
+ label: "group-data-[filled-within=true]:text-foreground"
101
103
  }
102
104
  },
103
105
  color: {
@@ -112,7 +114,7 @@ var input = tv({
112
114
  sm: {
113
115
  label: "text-tiny",
114
116
  inputWrapper: "h-unit-8 min-h-unit-8 px-2 rounded-small",
115
- input: "text-tiny",
117
+ input: "text-small",
116
118
  clearButton: "text-medium"
117
119
  },
118
120
  md: {
@@ -145,7 +147,6 @@ var input = tv({
145
147
  },
146
148
  labelPlacement: {
147
149
  outside: {
148
- label: "text-foreground pb-1.5",
149
150
  mainWrapper: "flex flex-col"
150
151
  },
151
152
  "outside-left": {
@@ -181,7 +182,7 @@ var input = tv({
181
182
  isInvalid: {
182
183
  true: {
183
184
  label: "!text-danger",
184
- input: "placeholder:text-danger text-danger"
185
+ input: "!placeholder:text-danger !text-danger"
185
186
  }
186
187
  },
187
188
  isRequired: {
@@ -226,6 +227,13 @@ var input = tv({
226
227
  disableAnimation: false
227
228
  },
228
229
  compoundVariants: [
230
+ {
231
+ variant: "flat",
232
+ color: "default",
233
+ class: {
234
+ input: "group-data-[has-value=true]:text-default-foreground"
235
+ }
236
+ },
229
237
  {
230
238
  variant: "flat",
231
239
  color: "primary",
@@ -347,6 +355,13 @@ var input = tv({
347
355
  inputWrapper: "data-[hover=true]:border-danger focus-within:border-danger"
348
356
  }
349
357
  },
358
+ {
359
+ variant: "underlined",
360
+ color: "default",
361
+ class: {
362
+ input: "group-data-[has-value=true]:text-foreground"
363
+ }
364
+ },
350
365
  {
351
366
  variant: "underlined",
352
367
  color: "primary",
@@ -427,6 +442,20 @@ var input = tv({
427
442
  label: "text-danger"
428
443
  }
429
444
  },
445
+ {
446
+ labelPlacement: "inside",
447
+ color: "default",
448
+ class: {
449
+ label: "group-data-[filled-within=true]:text-default-600"
450
+ }
451
+ },
452
+ {
453
+ labelPlacement: "outside",
454
+ color: "default",
455
+ class: {
456
+ label: "group-data-[filled-within=true]:text-foreground"
457
+ }
458
+ },
430
459
  {
431
460
  radius: "full",
432
461
  size: ["sm"],
@@ -470,13 +499,6 @@ var input = tv({
470
499
  ]
471
500
  }
472
501
  },
473
- {
474
- labelPlacement: "inside",
475
- color: "default",
476
- class: {
477
- label: "group-data-[filled-within=true]:text-foreground-600"
478
- }
479
- },
480
502
  {
481
503
  isInvalid: true,
482
504
  variant: "flat",
@@ -552,11 +574,9 @@ var input = tv({
552
574
  label: [
553
575
  "pb-0",
554
576
  "z-20",
555
- "opacity-60",
556
577
  "top-1/2",
557
578
  "-translate-y-1/2",
558
- "group-data-[filled-within=true]:left-0",
559
- "group-data-[filled-within=true]:opacity-100"
579
+ "group-data-[filled-within=true]:left-0"
560
580
  ]
561
581
  }
562
582
  },
@@ -569,7 +589,6 @@ var input = tv({
569
589
  {
570
590
  labelPlacement: ["inside"],
571
591
  variant: "flat",
572
- size: ["md", "lg"],
573
592
  class: {
574
593
  innerWrapper: "pb-0.5"
575
594
  }
@@ -767,6 +786,12 @@ var input = tv({
767
786
  class: {
768
787
  input: "transition-height !duration-100 motion-reduce:transition-none"
769
788
  }
789
+ },
790
+ {
791
+ labelPlacement: ["inside", "outside"],
792
+ class: {
793
+ label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"]
794
+ }
770
795
  }
771
796
  ]
772
797
  });
@@ -37,13 +37,14 @@ import mapKeys from "lodash.mapkeys";
37
37
  import kebabCase from "lodash.kebabcase";
38
38
  import deepMerge from "deepmerge";
39
39
  var DEFAULT_PREFIX = "nextui";
40
+ var parsedColorsCache = {};
40
41
  var resolveConfig = (themes = {}, defaultTheme, prefix) => {
41
42
  const resolved = {
42
43
  variants: [],
43
44
  utilities: {},
44
45
  colors: {}
45
46
  };
46
- forEach(themes, ({ extend, layout, colors }, themeName) => {
47
+ for (const [themeName, { extend, layout, colors }] of Object.entries(themes)) {
47
48
  let cssSelector = `.${themeName},[data-theme="${themeName}"]`;
48
49
  const scheme = themeName === "light" || themeName === "dark" ? themeName : extend;
49
50
  if (themeName === defaultTheme) {
@@ -58,11 +59,13 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
58
59
  name: themeName,
59
60
  definition: [`&.${themeName}`, `&[data-theme='${themeName}']`]
60
61
  });
61
- forEach(flatColors, (colorValue, colorName) => {
62
+ for (const [colorName, colorValue] of Object.entries(flatColors)) {
62
63
  if (!colorValue)
63
64
  return;
64
65
  try {
65
- const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
66
+ const parsedColor = parsedColorsCache[colorValue] || Color(colorValue).hsl().round().array();
67
+ parsedColorsCache[colorValue] = parsedColor;
68
+ const [h, s, l, defaultAlphaValue] = parsedColor;
66
69
  const nextuiColorVariable = `--${prefix}-${colorName}`;
67
70
  const nextuiOpacityVariable = `--${prefix}-${colorName}-opacity`;
68
71
  resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
@@ -81,32 +84,31 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
81
84
  } catch (error) {
82
85
  console.log("error", error == null ? void 0 : error.message);
83
86
  }
84
- });
85
- forEach(flatLayout, (value, key) => {
87
+ }
88
+ for (const [key, value] of Object.entries(flatLayout)) {
86
89
  if (!value)
87
90
  return;
91
+ const layoutVariablePrefix = `--${prefix}-${key}`;
88
92
  if (typeof value === "object") {
89
- forEach(value, (v, k) => {
90
- const layoutVariable = `--${prefix}-${key}-${k}`;
91
- resolved.utilities[cssSelector][layoutVariable] = v;
92
- });
93
- } else if (key === "spacing-unit") {
94
- const layoutVariable = `--${prefix}-${key}`;
95
- resolved.utilities[cssSelector][layoutVariable] = value;
96
- const spacingScale = generateSpacingScale(Number(value));
97
- forEach(spacingScale, (v, k) => {
98
- const layoutVariable2 = `--${prefix}-${key}-${k}`;
99
- resolved.utilities[cssSelector][layoutVariable2] = v;
100
- });
93
+ for (const [nestedKey, nestedValue] of Object.entries(value)) {
94
+ const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
95
+ resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
96
+ }
101
97
  } else {
102
- const layoutVariable = `--${prefix}-${key}`;
103
- if (layoutVariable.includes("opacity") && typeof value === "number") {
104
- value = value.toString().replace(/^0\./, ".");
98
+ if (key === "spacing-unit") {
99
+ resolved.utilities[cssSelector][layoutVariablePrefix] = value;
100
+ const spacingScale = generateSpacingScale(Number(value));
101
+ for (const [scaleKey, scaleValue] of Object.entries(spacingScale)) {
102
+ const spacingVariable = `${layoutVariablePrefix}-${scaleKey}`;
103
+ resolved.utilities[cssSelector][spacingVariable] = scaleValue;
104
+ }
105
+ } else {
106
+ const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number" ? value.toString().replace(/^0\./, ".") : value;
107
+ resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
105
108
  }
106
- resolved.utilities[cssSelector][layoutVariable] = value;
107
109
  }
108
- });
109
- });
110
+ }
111
+ }
110
112
  return resolved;
111
113
  };
112
114
  var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
@@ -136,8 +138,8 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
136
138
  ...baseStyles(prefix)
137
139
  }
138
140
  });
139
- addUtilities({ ...resolved.utilities, ...utilities });
140
- resolved.variants.forEach((variant) => {
141
+ addUtilities({ ...resolved == null ? void 0 : resolved.utilities, ...utilities });
142
+ resolved == null ? void 0 : resolved.variants.forEach((variant) => {
141
143
  addVariant(variant.name, variant.definition);
142
144
  });
143
145
  },
@@ -146,7 +148,7 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
146
148
  extend: {
147
149
  colors: {
148
150
  ...addCommonColors ? commonColors : {},
149
- ...resolved.colors
151
+ ...resolved == null ? void 0 : resolved.colors
150
152
  },
151
153
  scale: {
152
154
  "80": "0.8",
@@ -25,11 +25,11 @@ var autocomplete = tv({
25
25
  selectorButton: "text-medium"
26
26
  },
27
27
  variants: {
28
- disableClearable: {
29
- true: {
28
+ isClearable: {
29
+ true: {},
30
+ false: {
30
31
  clearButton: "hidden"
31
- },
32
- false: {}
32
+ }
33
33
  },
34
34
  disableAnimation: {
35
35
  true: {
@@ -48,7 +48,7 @@ var autocomplete = tv({
48
48
  },
49
49
  defaultVariants: {
50
50
  disableAnimation: false,
51
- disableClearable: false,
51
+ isClearable: true,
52
52
  disableSelectorIconRotation: false
53
53
  }
54
54
  });
@@ -8,7 +8,7 @@ import {
8
8
  // src/components/select.ts
9
9
  var select = tv({
10
10
  slots: {
11
- base: ["group inline-flex flex-col relative w-full", "data-[has-helper=true]:mb-4"],
11
+ base: ["group inline-flex flex-col relative w-full"],
12
12
  label: [
13
13
  "block",
14
14
  "absolute",
@@ -24,11 +24,11 @@ var select = tv({
24
24
  innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.unit-6))] min-h-unit-4 items-center gap-1.5 box-border",
25
25
  selectorIcon: "absolute right-3 w-unit-4 h-unit-4",
26
26
  spinner: "absolute right-3",
27
- value: ["font-normal", "w-full", "text-left"],
27
+ value: ["text-foreground-500", "font-normal", "w-full", "text-left"],
28
28
  listboxWrapper: "scroll-py-6 max-h-64 w-full",
29
29
  listbox: "",
30
30
  popoverContent: "w-full p-1 overflow-hidden",
31
- helperWrapper: "flex absolute -bottom-[calc(theme(fontSize.tiny)*1.5)] flex-col gap-1.5 px-1",
31
+ helperWrapper: "p-1 flex relative flex-col gap-1.5",
32
32
  description: "text-tiny text-foreground-400",
33
33
  errorMessage: "text-tiny text-danger"
34
34
  },
@@ -47,15 +47,17 @@ var select = tv({
47
47
  "border-medium",
48
48
  "border-default-200",
49
49
  "data-[hover=true]:border-default-400"
50
- ]
50
+ ],
51
+ value: "group-data-[has-value=true]:text-default-foreground"
51
52
  },
52
53
  bordered: {
53
54
  trigger: [
54
55
  "border-medium",
55
56
  "border-default-200",
56
57
  "data-[hover=true]:border-default-400",
57
- "data-[open=true]:border-foreground",
58
- "data-[focus=true]:border-foreground"
58
+ "data-[open=true]:border-default-foreground",
59
+ "data-[focus=true]:border-default-foreground",
60
+ "data-[focus=true]:border-default-foreground"
59
61
  ]
60
62
  },
61
63
  underlined: {
@@ -73,7 +75,7 @@ var select = tv({
73
75
  "after:content-['']",
74
76
  "after:w-0",
75
77
  "after:origin-center",
76
- "after:bg-foreground",
78
+ "after:bg-default-foreground",
77
79
  "after:absolute",
78
80
  "after:left-1/2",
79
81
  "after:-translate-x-1/2",
@@ -81,13 +83,12 @@ var select = tv({
81
83
  "after:h-[2px]",
82
84
  "data-[open=true]:after:w-full",
83
85
  "data-[focus=true]:after:w-full"
84
- ]
86
+ ],
87
+ label: "group-data-[filled=true]:text-foreground"
85
88
  }
86
89
  },
87
90
  color: {
88
- default: {
89
- value: ["text-foreground-500", "group-data-[has-value=true]:text-foreground"]
90
- },
91
+ default: {},
91
92
  primary: {},
92
93
  secondary: {},
93
94
  success: {},
@@ -98,7 +99,7 @@ var select = tv({
98
99
  sm: {
99
100
  label: "text-tiny",
100
101
  trigger: "h-unit-8 min-h-unit-8 px-2 rounded-small",
101
- value: "text-tiny"
102
+ value: "text-small"
102
103
  },
103
104
  md: {
104
105
  trigger: "h-unit-10 min-h-unit-10 rounded-medium",
@@ -128,12 +129,11 @@ var select = tv({
128
129
  },
129
130
  labelPlacement: {
130
131
  outside: {
131
- base: "flex flex-col",
132
- label: "text-foreground pb-1.5"
132
+ base: "flex flex-col"
133
133
  },
134
134
  "outside-left": {
135
135
  base: "flex-row items-center flex-nowrap items-start",
136
- label: "relative text-foreground pr-2"
136
+ label: "relative pr-2 text-foreground"
137
137
  },
138
138
  inside: {
139
139
  label: "text-tiny cursor-pointer",
@@ -211,6 +211,13 @@ var select = tv({
211
211
  disableSelectorIconRotation: false
212
212
  },
213
213
  compoundVariants: [
214
+ {
215
+ variant: "flat",
216
+ color: "default",
217
+ class: {
218
+ value: "group-data-[has-value=true]:text-default-foreground"
219
+ }
220
+ },
214
221
  {
215
222
  variant: "flat",
216
223
  color: "primary",
@@ -324,6 +331,13 @@ var select = tv({
324
331
  label: "text-danger"
325
332
  }
326
333
  },
334
+ {
335
+ variant: "underlined",
336
+ color: "default",
337
+ class: {
338
+ value: "group-data-[has-value=true]:text-foreground"
339
+ }
340
+ },
327
341
  {
328
342
  variant: "underlined",
329
343
  color: "primary",
@@ -404,6 +418,20 @@ var select = tv({
404
418
  label: "text-danger"
405
419
  }
406
420
  },
421
+ {
422
+ labelPlacement: "inside",
423
+ color: "default",
424
+ class: {
425
+ label: "group-data-[filled=true]:text-default-600"
426
+ }
427
+ },
428
+ {
429
+ labelPlacement: "outside",
430
+ color: "default",
431
+ class: {
432
+ label: "group-data-[filled=true]:text-foreground"
433
+ }
434
+ },
407
435
  {
408
436
  radius: "full",
409
437
  size: ["sm"],
@@ -447,13 +475,6 @@ var select = tv({
447
475
  ]
448
476
  }
449
477
  },
450
- {
451
- labelPlacement: "inside",
452
- color: "default",
453
- class: {
454
- label: "group-data-[filled=true]:text-foreground-600"
455
- }
456
- },
457
478
  {
458
479
  isInvalid: true,
459
480
  variant: "flat",
@@ -512,15 +533,7 @@ var select = tv({
512
533
  isMultiline: false,
513
534
  class: {
514
535
  base: "group relative justify-end",
515
- label: [
516
- "pb-0",
517
- "z-20",
518
- "opacity-60",
519
- "top-1/2",
520
- "-translate-y-1/2",
521
- "group-data-[filled=true]:opacity-100",
522
- "group-data-[filled=true]:left-0"
523
- ]
536
+ label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:left-0"]
524
537
  }
525
538
  },
526
539
  {
@@ -672,6 +685,12 @@ var select = tv({
672
685
  ],
673
686
  base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
674
687
  }
688
+ },
689
+ {
690
+ labelPlacement: ["inside", "outside"],
691
+ class: {
692
+ label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"]
693
+ }
675
694
  }
676
695
  ]
677
696
  });
@@ -3,11 +3,11 @@ import { VariantProps } from 'tailwind-variants';
3
3
  import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
4
4
 
5
5
  declare const autocomplete: tailwind_variants.TVReturnType<{
6
- disableClearable: {
7
- true: {
6
+ isClearable: {
7
+ true: {};
8
+ false: {
8
9
  clearButton: string;
9
10
  };
10
- false: {};
11
11
  };
12
12
  disableAnimation: {
13
13
  true: {
@@ -32,11 +32,11 @@ declare const autocomplete: tailwind_variants.TVReturnType<{
32
32
  clearButton: string[];
33
33
  selectorButton: string;
34
34
  }, undefined, tailwind_variants_dist_config.TVConfig<{
35
- disableClearable: {
36
- true: {
35
+ isClearable: {
36
+ true: {};
37
+ false: {
37
38
  clearButton: string;
38
39
  };
39
- false: {};
40
40
  };
41
41
  disableAnimation: {
42
42
  true: {
@@ -53,11 +53,11 @@ declare const autocomplete: tailwind_variants.TVReturnType<{
53
53
  };
54
54
  };
55
55
  }, {
56
- disableClearable: {
57
- true: {
56
+ isClearable: {
57
+ true: {};
58
+ false: {
58
59
  clearButton: string;
59
60
  };
60
- false: {};
61
61
  };
62
62
  disableAnimation: {
63
63
  true: {
@@ -74,11 +74,11 @@ declare const autocomplete: tailwind_variants.TVReturnType<{
74
74
  };
75
75
  };
76
76
  }>, {
77
- disableClearable: {
78
- true: {
77
+ isClearable: {
78
+ true: {};
79
+ false: {
79
80
  clearButton: string;
80
81
  };
81
- false: {};
82
82
  };
83
83
  disableAnimation: {
84
84
  true: {
@@ -103,11 +103,11 @@ declare const autocomplete: tailwind_variants.TVReturnType<{
103
103
  clearButton: string[];
104
104
  selectorButton: string;
105
105
  }, tailwind_variants.TVReturnType<{
106
- disableClearable: {
107
- true: {
106
+ isClearable: {
107
+ true: {};
108
+ false: {
108
109
  clearButton: string;
109
110
  };
110
- false: {};
111
111
  };
112
112
  disableAnimation: {
113
113
  true: {
@@ -132,11 +132,11 @@ declare const autocomplete: tailwind_variants.TVReturnType<{
132
132
  clearButton: string[];
133
133
  selectorButton: string;
134
134
  }, undefined, tailwind_variants_dist_config.TVConfig<{
135
- disableClearable: {
136
- true: {
135
+ isClearable: {
136
+ true: {};
137
+ false: {
137
138
  clearButton: string;
138
139
  };
139
- false: {};
140
140
  };
141
141
  disableAnimation: {
142
142
  true: {
@@ -153,11 +153,11 @@ declare const autocomplete: tailwind_variants.TVReturnType<{
153
153
  };
154
154
  };
155
155
  }, {
156
- disableClearable: {
157
- true: {
156
+ isClearable: {
157
+ true: {};
158
+ false: {
158
159
  clearButton: string;
159
160
  };
160
- false: {};
161
161
  };
162
162
  disableAnimation: {
163
163
  true: {
@@ -132,11 +132,11 @@ var autocomplete = tv({
132
132
  selectorButton: "text-medium"
133
133
  },
134
134
  variants: {
135
- disableClearable: {
136
- true: {
135
+ isClearable: {
136
+ true: {},
137
+ false: {
137
138
  clearButton: "hidden"
138
- },
139
- false: {}
139
+ }
140
140
  },
141
141
  disableAnimation: {
142
142
  true: {
@@ -155,7 +155,7 @@ var autocomplete = tv({
155
155
  },
156
156
  defaultVariants: {
157
157
  disableAnimation: false,
158
- disableClearable: false,
158
+ isClearable: true,
159
159
  disableSelectorIconRotation: false
160
160
  }
161
161
  });
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  autocomplete
3
- } from "../chunk-WHT6K6RC.mjs";
3
+ } from "../chunk-5Y7664AG.mjs";
4
4
  import "../chunk-WBUVHAJX.mjs";
5
5
  import "../chunk-WA5F6AED.mjs";
6
6
  export {