@nextui-org/theme 2.1.12 → 2.1.14

package/dist/components/input.js

@@ -129,7 +129,7 @@ var groupDataFocusVisibleClasses = [
 // 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",
@@ -165,7 +165,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"
   },
@@ -184,14 +184,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: {
@@ -209,7 +210,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",
@@ -217,7 +218,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: {
@@ -232,7 +234,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: {
@@ -265,7 +267,6 @@ var input = tv({
     },
     labelPlacement: {
       outside: {
-        label: "text-foreground pb-1.5",
         mainWrapper: "flex flex-col"
       },
       "outside-left": {
@@ -301,7 +302,7 @@ var input = tv({
     isInvalid: {
       true: {
         label: "!text-danger",
-        input: "placeholder:text-danger text-danger"
+        input: "!placeholder:text-danger !text-danger"
       }
     },
     isRequired: {
@@ -346,6 +347,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",
@@ -467,6 +475,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",
@@ -547,6 +562,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"],
@@ -590,13 +619,6 @@ var input = tv({
         ]
       }
     },
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled-within=true]:text-foreground-600"
-      }
-    },
     {
       isInvalid: true,
       variant: "flat",
@@ -672,11 +694,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"
         ]
       }
     },
@@ -689,7 +709,6 @@ var input = tv({
     {
       labelPlacement: ["inside"],
       variant: "flat",
-      size: ["md", "lg"],
       class: {
         innerWrapper: "pb-0.5"
       }
@@ -887,6 +906,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"]
+      }
     }
   ]
 });

package/dist/components/input.mjs

@@ -1,6 +1,6 @@
 import {
   input
-} from "../chunk-RNXUUR27.mjs";
+} from "../chunk-5IBYC42H.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-2PIR7DFM.mjs";

package/dist/components/select.d.ts

@@ -9,18 +9,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -62,7 +62,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;
@@ -146,18 +145,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -199,7 +198,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;
@@ -268,18 +266,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -321,7 +319,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;
@@ -390,18 +387,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -443,7 +440,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;
@@ -527,18 +523,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -580,7 +576,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;
@@ -664,18 +659,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -717,7 +712,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;
@@ -786,18 +780,18 @@ declare const select: tailwind_variants.TVReturnType<{
         };
         faded: {
             trigger: string[];
+            value: string;
         };
         bordered: {
             trigger: string[];
         };
         underlined: {
             trigger: string[];
+            label: string;
         };
     };
     color: {
-        default: {
-            value: string[];
-        };
+        default: {};
         primary: {};
         secondary: {};
         success: {};
@@ -839,7 +833,6 @@ declare const select: tailwind_variants.TVReturnType<{
     labelPlacement: {
         outside: {
             base: string;
-            label: string;
         };
         "outside-left": {
             base: string;

package/dist/components/select.js

@@ -121,7 +121,7 @@ var tv = (0, import_tailwind_variants.createTV)({
 // 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",
@@ -137,11 +137,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"
   },
@@ -160,15 +160,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: {
@@ -186,7 +188,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",
@@ -194,13 +196,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: {},
@@ -211,7 +212,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",
@@ -241,12 +242,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",
@@ -324,6 +324,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",
@@ -437,6 +444,13 @@ var select = tv({
         label: "text-danger"
       }
     },
+    {
+      variant: "underlined",
+      color: "default",
+      class: {
+        value: "group-data-[has-value=true]:text-foreground"
+      }
+    },
     {
       variant: "underlined",
       color: "primary",
@@ -517,6 +531,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"],
@@ -560,13 +588,6 @@ var select = tv({
         ]
       }
     },
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled=true]:text-foreground-600"
-      }
-    },
     {
       isInvalid: true,
       variant: "flat",
@@ -625,15 +646,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"]
       }
     },
     {
@@ -785,6 +798,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"]
+      }
     }
   ]
 });

package/dist/components/select.mjs

@@ -1,6 +1,6 @@
 import {
   select
-} from "../chunk-TLWI2J7W.mjs";
+} from "../chunk-YUUGIQ6E.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-2PIR7DFM.mjs";