@nextui-org/theme 2.1.12 → 2.1.14

package/dist/index.js

@@ -3769,7 +3769,7 @@ var circularProgress = tv({
 // src/components/input.ts
 var input = tv({
   slots: {
-    base: ["group flex relative flex-col", "data-[has-helper=true]:mb-4"],
+    base: "group flex flex-col",
     label: [
       "absolute",
       "z-10",
@@ -3805,7 +3805,7 @@ var input = tv({
       "rounded-full",
       ...dataFocusVisibleClasses
     ],
-    helperWrapper: "flex absolute -bottom-[calc(theme(fontSize.tiny)*1.5)] flex-col gap-1.5 px-1",
+    helperWrapper: "p-1 flex relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -3824,14 +3824,15 @@ var input = tv({
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400"
-        ]
+        ],
+        value: "group-data-[has-value=true]:text-default-foreground"
       },
       bordered: {
         inputWrapper: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "group-data-[focus=true]:border-foreground"
+          "group-data-[focus=true]:border-default-foreground"
         ]
       },
       underlined: {
@@ -3849,7 +3850,7 @@ var input = tv({
           "after:content-['']",
           "after:w-0",
           "after:origin-center",
-          "after:bg-foreground",
+          "after:bg-default-foreground",
           "after:absolute",
           "after:left-1/2",
           "after:-translate-x-1/2",
@@ -3857,7 +3858,8 @@ var input = tv({
           "after:h-[2px]",
           "group-data-[focus=true]:after:w-full"
         ],
-        innerWrapper: "pb-1"
+        innerWrapper: "pb-1",
+        label: "group-data-[filled-within=true]:text-foreground"
       }
     },
     color: {
@@ -3872,7 +3874,7 @@ var input = tv({
       sm: {
         label: "text-tiny",
         inputWrapper: "h-unit-8 min-h-unit-8 px-2 rounded-small",
-        input: "text-tiny",
+        input: "text-small",
         clearButton: "text-medium"
       },
       md: {
@@ -3905,7 +3907,6 @@ var input = tv({
     },
     labelPlacement: {
       outside: {
-        label: "text-foreground pb-1.5",
         mainWrapper: "flex flex-col"
       },
       "outside-left": {
@@ -3941,7 +3942,7 @@ var input = tv({
     isInvalid: {
       true: {
         label: "!text-danger",
-        input: "placeholder:text-danger text-danger"
+        input: "!placeholder:text-danger !text-danger"
       }
     },
     isRequired: {
@@ -3986,6 +3987,13 @@ var input = tv({
     disableAnimation: false
   },
   compoundVariants: [
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        input: "group-data-[has-value=true]:text-default-foreground"
+      }
+    },
     {
       variant: "flat",
       color: "primary",
@@ -4107,6 +4115,13 @@ var input = tv({
         inputWrapper: "data-[hover=true]:border-danger focus-within:border-danger"
       }
     },
+    {
+      variant: "underlined",
+      color: "default",
+      class: {
+        input: "group-data-[has-value=true]:text-foreground"
+      }
+    },
     {
       variant: "underlined",
       color: "primary",
@@ -4187,6 +4202,20 @@ var input = tv({
         label: "text-danger"
       }
     },
+    {
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled-within=true]:text-default-600"
+      }
+    },
+    {
+      labelPlacement: "outside",
+      color: "default",
+      class: {
+        label: "group-data-[filled-within=true]:text-foreground"
+      }
+    },
     {
       radius: "full",
       size: ["sm"],
@@ -4230,13 +4259,6 @@ var input = tv({
         ]
       }
     },
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled-within=true]:text-foreground-600"
-      }
-    },
     {
       isInvalid: true,
       variant: "flat",
@@ -4312,11 +4334,9 @@ var input = tv({
         label: [
           "pb-0",
           "z-20",
-          "opacity-60",
           "top-1/2",
           "-translate-y-1/2",
-          "group-data-[filled-within=true]:left-0",
-          "group-data-[filled-within=true]:opacity-100"
+          "group-data-[filled-within=true]:left-0"
         ]
       }
     },
@@ -4329,7 +4349,6 @@ var input = tv({
     {
       labelPlacement: ["inside"],
       variant: "flat",
-      size: ["md", "lg"],
       class: {
         innerWrapper: "pb-0.5"
       }
@@ -4527,6 +4546,12 @@ var input = tv({
       class: {
         input: "transition-height !duration-100 motion-reduce:transition-none"
       }
+    },
+    {
+      labelPlacement: ["inside", "outside"],
+      class: {
+        label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"]
+      }
     }
   ]
 });
@@ -6045,7 +6070,7 @@ var skeleton = tv({
 // src/components/select.ts
 var select = tv({
   slots: {
-    base: ["group inline-flex flex-col relative w-full", "data-[has-helper=true]:mb-4"],
+    base: ["group inline-flex flex-col relative w-full"],
     label: [
       "block",
       "absolute",
@@ -6061,11 +6086,11 @@ var select = tv({
     innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.unit-6))] min-h-unit-4 items-center gap-1.5 box-border",
     selectorIcon: "absolute right-3 w-unit-4 h-unit-4",
     spinner: "absolute right-3",
-    value: ["font-normal", "w-full", "text-left"],
+    value: ["text-foreground-500", "font-normal", "w-full", "text-left"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
-    helperWrapper: "flex absolute -bottom-[calc(theme(fontSize.tiny)*1.5)] flex-col gap-1.5 px-1",
+    helperWrapper: "p-1 flex relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -6084,15 +6109,17 @@ var select = tv({
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400"
-        ]
+        ],
+        value: "group-data-[has-value=true]:text-default-foreground"
       },
       bordered: {
         trigger: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "data-[open=true]:border-foreground",
-          "data-[focus=true]:border-foreground"
+          "data-[open=true]:border-default-foreground",
+          "data-[focus=true]:border-default-foreground",
+          "data-[focus=true]:border-default-foreground"
         ]
       },
       underlined: {
@@ -6110,7 +6137,7 @@ var select = tv({
           "after:content-['']",
           "after:w-0",
           "after:origin-center",
-          "after:bg-foreground",
+          "after:bg-default-foreground",
           "after:absolute",
           "after:left-1/2",
           "after:-translate-x-1/2",
@@ -6118,13 +6145,12 @@ var select = tv({
           "after:h-[2px]",
           "data-[open=true]:after:w-full",
           "data-[focus=true]:after:w-full"
-        ]
+        ],
+        label: "group-data-[filled=true]:text-foreground"
       }
     },
     color: {
-      default: {
-        value: ["text-foreground-500", "group-data-[has-value=true]:text-foreground"]
-      },
+      default: {},
       primary: {},
       secondary: {},
       success: {},
@@ -6135,7 +6161,7 @@ var select = tv({
       sm: {
         label: "text-tiny",
         trigger: "h-unit-8 min-h-unit-8 px-2 rounded-small",
-        value: "text-tiny"
+        value: "text-small"
       },
       md: {
         trigger: "h-unit-10 min-h-unit-10 rounded-medium",
@@ -6165,12 +6191,11 @@ var select = tv({
     },
     labelPlacement: {
       outside: {
-        base: "flex flex-col",
-        label: "text-foreground pb-1.5"
+        base: "flex flex-col"
       },
       "outside-left": {
         base: "flex-row items-center flex-nowrap items-start",
-        label: "relative text-foreground pr-2"
+        label: "relative pr-2 text-foreground"
       },
       inside: {
         label: "text-tiny cursor-pointer",
@@ -6248,6 +6273,13 @@ var select = tv({
     disableSelectorIconRotation: false
   },
   compoundVariants: [
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        value: "group-data-[has-value=true]:text-default-foreground"
+      }
+    },
     {
       variant: "flat",
       color: "primary",
@@ -6361,6 +6393,13 @@ var select = tv({
         label: "text-danger"
       }
     },
+    {
+      variant: "underlined",
+      color: "default",
+      class: {
+        value: "group-data-[has-value=true]:text-foreground"
+      }
+    },
     {
       variant: "underlined",
       color: "primary",
@@ -6441,6 +6480,20 @@ var select = tv({
         label: "text-danger"
       }
     },
+    {
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled=true]:text-default-600"
+      }
+    },
+    {
+      labelPlacement: "outside",
+      color: "default",
+      class: {
+        label: "group-data-[filled=true]:text-foreground"
+      }
+    },
     {
       radius: "full",
       size: ["sm"],
@@ -6484,13 +6537,6 @@ var select = tv({
         ]
       }
     },
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled=true]:text-foreground-600"
-      }
-    },
     {
       isInvalid: true,
       variant: "flat",
@@ -6549,15 +6595,7 @@ var select = tv({
       isMultiline: false,
       class: {
         base: "group relative justify-end",
-        label: [
-          "pb-0",
-          "z-20",
-          "opacity-60",
-          "top-1/2",
-          "-translate-y-1/2",
-          "group-data-[filled=true]:opacity-100",
-          "group-data-[filled=true]:left-0"
-        ]
+        label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:left-0"]
       }
     },
     {
@@ -6709,6 +6747,12 @@ var select = tv({
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
+    },
+    {
+      labelPlacement: ["inside", "outside"],
+      class: {
+        label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"]
+      }
     }
   ]
 });
@@ -7840,11 +7884,11 @@ var autocomplete = tv({
     selectorButton: "text-medium"
   },
   variants: {
-    disableClearable: {
-      true: {
+    isClearable: {
+      true: {},
+      false: {
         clearButton: "hidden"
-      },
-      false: {}
+      }
     },
     disableAnimation: {
       true: {
@@ -7863,7 +7907,7 @@ var autocomplete = tv({
   },
   defaultVariants: {
     disableAnimation: false,
-    disableClearable: false,
+    isClearable: true,
     disableSelectorIconRotation: false
   }
 });
@@ -8492,13 +8536,14 @@ var darkLayout = {
 
 // src/plugin.ts
 var DEFAULT_PREFIX = "nextui";
+var parsedColorsCache = {};
 var resolveConfig = (themes = {}, defaultTheme, prefix) => {
   const resolved = {
     variants: [],
     utilities: {},
     colors: {}
   };
-  (0, import_lodash3.default)(themes, ({ extend, layout, colors: colors2 }, themeName) => {
+  for (const [themeName, { extend, layout, colors: colors2 }] of Object.entries(themes)) {
     let cssSelector = `.${themeName},[data-theme="${themeName}"]`;
     const scheme = themeName === "light" || themeName === "dark" ? themeName : extend;
     if (themeName === defaultTheme) {
@@ -8513,11 +8558,13 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
       name: themeName,
       definition: [`&.${themeName}`, `&[data-theme='${themeName}']`]
     });
-    (0, import_lodash3.default)(flatColors, (colorValue, colorName) => {
+    for (const [colorName, colorValue] of Object.entries(flatColors)) {
       if (!colorValue)
         return;
       try {
-        const [h, s, l, defaultAlphaValue] = (0, import_color.default)(colorValue).hsl().round().array();
+        const parsedColor = parsedColorsCache[colorValue] || (0, import_color.default)(colorValue).hsl().round().array();
+        parsedColorsCache[colorValue] = parsedColor;
+        const [h, s, l, defaultAlphaValue] = parsedColor;
         const nextuiColorVariable = `--${prefix}-${colorName}`;
         const nextuiOpacityVariable = `--${prefix}-${colorName}-opacity`;
         resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
@@ -8536,32 +8583,31 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
       } catch (error) {
         console.log("error", error == null ? void 0 : error.message);
       }
-    });
-    (0, import_lodash3.default)(flatLayout, (value, key) => {
+    }
+    for (const [key, value] of Object.entries(flatLayout)) {
       if (!value)
         return;
+      const layoutVariablePrefix = `--${prefix}-${key}`;
       if (typeof value === "object") {
-        (0, import_lodash3.default)(value, (v, k) => {
-          const layoutVariable = `--${prefix}-${key}-${k}`;
-          resolved.utilities[cssSelector][layoutVariable] = v;
-        });
-      } else if (key === "spacing-unit") {
-        const layoutVariable = `--${prefix}-${key}`;
-        resolved.utilities[cssSelector][layoutVariable] = value;
-        const spacingScale = generateSpacingScale(Number(value));
-        (0, import_lodash3.default)(spacingScale, (v, k) => {
-          const layoutVariable2 = `--${prefix}-${key}-${k}`;
-          resolved.utilities[cssSelector][layoutVariable2] = v;
-        });
+        for (const [nestedKey, nestedValue] of Object.entries(value)) {
+          const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+          resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
+        }
       } else {
-        const layoutVariable = `--${prefix}-${key}`;
-        if (layoutVariable.includes("opacity") && typeof value === "number") {
-          value = value.toString().replace(/^0\./, ".");
+        if (key === "spacing-unit") {
+          resolved.utilities[cssSelector][layoutVariablePrefix] = value;
+          const spacingScale = generateSpacingScale(Number(value));
+          for (const [scaleKey, scaleValue] of Object.entries(spacingScale)) {
+            const spacingVariable = `${layoutVariablePrefix}-${scaleKey}`;
+            resolved.utilities[cssSelector][spacingVariable] = scaleValue;
+          }
+        } else {
+          const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number" ? value.toString().replace(/^0\./, ".") : value;
+          resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
         }
-        resolved.utilities[cssSelector][layoutVariable] = value;
       }
-    });
-  });
+    }
+  }
   return resolved;
 };
 var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
@@ -8591,8 +8637,8 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
           ...baseStyles(prefix)
         }
       });
-      addUtilities({ ...resolved.utilities, ...utilities });
-      resolved.variants.forEach((variant) => {
+      addUtilities({ ...resolved == null ? void 0 : resolved.utilities, ...utilities });
+      resolved == null ? void 0 : resolved.variants.forEach((variant) => {
         addVariant(variant.name, variant.definition);
       });
     },
@@ -8601,7 +8647,7 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
         extend: {
           colors: {
             ...addCommonColors ? commonColors : {},
-            ...resolved.colors
+            ...resolved == null ? void 0 : resolved.colors
           },
           scale: {
             "80": "0.8",

package/dist/index.mjs

@@ -44,7 +44,7 @@ import {
 } from "./chunk-VGHVBXXT.mjs";
 import {
   select
-} from "./chunk-TLWI2J7W.mjs";
+} from "./chunk-YUUGIQ6E.mjs";
 import {
   skeleton
 } from "./chunk-JX6O4KJS.mjs";
@@ -53,7 +53,7 @@ import {
 } from "./chunk-F36W5Y6O.mjs";
 import {
   input
-} from "./chunk-RNXUUR27.mjs";
+} from "./chunk-5IBYC42H.mjs";
 import {
   kbd
 } from "./chunk-J7FVLFSZ.mjs";
@@ -104,7 +104,7 @@ import {
 } from "./chunk-I5E37FAL.mjs";
 import {
   autocomplete
-} from "./chunk-WHT6K6RC.mjs";
+} from "./chunk-5Y7664AG.mjs";
 import {
   avatar,
   avatarGroup
@@ -130,7 +130,7 @@ import {
 } from "./chunk-WBUVHAJX.mjs";
 import {
   nextui
-} from "./chunk-6XG3Y4GM.mjs";
+} from "./chunk-5QVKTCUZ.mjs";
 import "./chunk-S7W5DQP2.mjs";
 import "./chunk-DI2L75XK.mjs";
 import "./chunk-4Z22WXZX.mjs";

package/dist/plugin.js

@@ -711,13 +711,14 @@ var baseStyles = (prefix) => ({
 
 // src/plugin.ts
 var DEFAULT_PREFIX = "nextui";
+var parsedColorsCache = {};
 var resolveConfig = (themes = {}, defaultTheme, prefix) => {
   const resolved = {
     variants: [],
     utilities: {},
     colors: {}
   };
-  (0, import_lodash3.default)(themes, ({ extend, layout, colors: colors2 }, themeName) => {
+  for (const [themeName, { extend, layout, colors: colors2 }] of Object.entries(themes)) {
     let cssSelector = `.${themeName},[data-theme="${themeName}"]`;
     const scheme = themeName === "light" || themeName === "dark" ? themeName : extend;
     if (themeName === defaultTheme) {
@@ -732,11 +733,13 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
       name: themeName,
       definition: [`&.${themeName}`, `&[data-theme='${themeName}']`]
     });
-    (0, import_lodash3.default)(flatColors, (colorValue, colorName) => {
+    for (const [colorName, colorValue] of Object.entries(flatColors)) {
       if (!colorValue)
         return;
       try {
-        const [h, s, l, defaultAlphaValue] = (0, import_color.default)(colorValue).hsl().round().array();
+        const parsedColor = parsedColorsCache[colorValue] || (0, import_color.default)(colorValue).hsl().round().array();
+        parsedColorsCache[colorValue] = parsedColor;
+        const [h, s, l, defaultAlphaValue] = parsedColor;
         const nextuiColorVariable = `--${prefix}-${colorName}`;
         const nextuiOpacityVariable = `--${prefix}-${colorName}-opacity`;
         resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
@@ -755,32 +758,31 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
       } catch (error) {
         console.log("error", error == null ? void 0 : error.message);
       }
-    });
-    (0, import_lodash3.default)(flatLayout, (value, key) => {
+    }
+    for (const [key, value] of Object.entries(flatLayout)) {
       if (!value)
         return;
+      const layoutVariablePrefix = `--${prefix}-${key}`;
       if (typeof value === "object") {
-        (0, import_lodash3.default)(value, (v, k) => {
-          const layoutVariable = `--${prefix}-${key}-${k}`;
-          resolved.utilities[cssSelector][layoutVariable] = v;
-        });
-      } else if (key === "spacing-unit") {
-        const layoutVariable = `--${prefix}-${key}`;
-        resolved.utilities[cssSelector][layoutVariable] = value;
-        const spacingScale = generateSpacingScale(Number(value));
-        (0, import_lodash3.default)(spacingScale, (v, k) => {
-          const layoutVariable2 = `--${prefix}-${key}-${k}`;
-          resolved.utilities[cssSelector][layoutVariable2] = v;
-        });
+        for (const [nestedKey, nestedValue] of Object.entries(value)) {
+          const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+          resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
+        }
       } else {
-        const layoutVariable = `--${prefix}-${key}`;
-        if (layoutVariable.includes("opacity") && typeof value === "number") {
-          value = value.toString().replace(/^0\./, ".");
+        if (key === "spacing-unit") {
+          resolved.utilities[cssSelector][layoutVariablePrefix] = value;
+          const spacingScale = generateSpacingScale(Number(value));
+          for (const [scaleKey, scaleValue] of Object.entries(spacingScale)) {
+            const spacingVariable = `${layoutVariablePrefix}-${scaleKey}`;
+            resolved.utilities[cssSelector][spacingVariable] = scaleValue;
+          }
+        } else {
+          const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number" ? value.toString().replace(/^0\./, ".") : value;
+          resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
         }
-        resolved.utilities[cssSelector][layoutVariable] = value;
       }
-    });
-  });
+    }
+  }
   return resolved;
 };
 var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
@@ -810,8 +812,8 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
           ...baseStyles(prefix)
         }
       });
-      addUtilities({ ...resolved.utilities, ...utilities });
-      resolved.variants.forEach((variant) => {
+      addUtilities({ ...resolved == null ? void 0 : resolved.utilities, ...utilities });
+      resolved == null ? void 0 : resolved.variants.forEach((variant) => {
         addVariant(variant.name, variant.definition);
       });
     },
@@ -820,7 +822,7 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
         extend: {
           colors: {
             ...addCommonColors ? commonColors : {},
-            ...resolved.colors
+            ...resolved == null ? void 0 : resolved.colors
           },
           scale: {
             "80": "0.8",

package/dist/plugin.mjs

@@ -1,6 +1,6 @@
 import {
   nextui
-} from "./chunk-6XG3Y4GM.mjs";
+} from "./chunk-5QVKTCUZ.mjs";
 import "./chunk-S7W5DQP2.mjs";
 import "./chunk-DI2L75XK.mjs";
 import "./chunk-4Z22WXZX.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "2.1.12",
+  "version": "2.1.14",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",