@nextui-org/theme 2.1.9 → 2.1.11

package/dist/components/select.d.ts

@@ -18,7 +18,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -76,11 +78,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -101,6 +98,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {
@@ -127,17 +125,17 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: string;
-    label: string;
+    base: string[];
+    label: string[];
     mainWrapper: string;
     trigger: string;
     innerWrapper: string;
     selectorIcon: string;
     spinner: string;
-    value: string;
+    value: string[];
     listboxWrapper: string;
     listbox: string;
-    popover: string;
+    popoverContent: string;
     helperWrapper: string;
     description: string;
     errorMessage: string;
@@ -157,7 +155,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -215,11 +215,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -240,6 +235,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {
@@ -281,7 +277,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -339,11 +337,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -364,6 +357,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {
@@ -405,7 +399,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -463,11 +459,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -488,6 +479,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {
@@ -514,17 +506,17 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: string;
-    label: string;
+    base: string[];
+    label: string[];
     mainWrapper: string;
     trigger: string;
     innerWrapper: string;
     selectorIcon: string;
     spinner: string;
-    value: string;
+    value: string[];
     listboxWrapper: string;
     listbox: string;
-    popover: string;
+    popoverContent: string;
     helperWrapper: string;
     description: string;
     errorMessage: string;
@@ -544,7 +536,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -602,11 +596,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -627,6 +616,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {
@@ -653,17 +643,17 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
 }, {
-    base: string;
-    label: string;
+    base: string[];
+    label: string[];
     mainWrapper: string;
     trigger: string;
     innerWrapper: string;
     selectorIcon: string;
     spinner: string;
-    value: string;
+    value: string[];
     listboxWrapper: string;
     listbox: string;
-    popover: string;
+    popoverContent: string;
     helperWrapper: string;
     description: string;
     errorMessage: string;
@@ -683,7 +673,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -741,11 +733,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -766,6 +753,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {
@@ -807,7 +795,9 @@ declare const select: tailwind_variants.TVReturnType<{
         };
     };
     color: {
-        default: {};
+        default: {
+            value: string[];
+        };
         primary: {};
         secondary: {};
         success: {};
@@ -865,11 +855,6 @@ declare const select: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    isLabelPlaceholder: {
-        true: {
-            label: string;
-        };
-    };
     isDisabled: {
         true: {
             base: string;
@@ -890,6 +875,7 @@ declare const select: tailwind_variants.TVReturnType<{
     };
     isMultiline: {
         true: {
+            label: string;
             trigger: string;
         };
         false: {

package/dist/components/select.js

@@ -91,55 +91,57 @@ var mappedSpacingScaleKeys = spacingScaleKeys.map((key) => `unit-${key}`);
 
 // src/utils/tv.ts
 var COMMON_UNITS = ["small", "medium", "large"];
-var tv = (options, config) => {
-  var _a, _b, _c;
-  return (0, import_tailwind_variants.tv)(options, {
-    ...config,
-    twMerge: (_a = config == null ? void 0 : config.twMerge) != null ? _a : true,
-    twMergeConfig: {
-      ...config == null ? void 0 : config.twMergeConfig,
-      theme: {
-        ...(_b = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _b.theme,
-        opacity: ["disabled"],
-        spacing: ["divider", "unit", ...mappedSpacingScaleKeys],
-        borderWidth: COMMON_UNITS,
-        borderRadius: COMMON_UNITS
-      },
-      classGroups: {
-        ...(_c = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _c.classGroups,
-        shadow: [{ shadow: COMMON_UNITS }],
-        "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
-        "bg-image": ["bg-stripe-gradient"],
-        "min-w": [
-          {
-            "min-w": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ],
-        "min-h": [
-          {
-            "min-h": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ]
-      }
+var tv = (0, import_tailwind_variants.createTV)({
+  twMerge: true,
+  twMergeConfig: {
+    theme: {
+      opacity: ["disabled"],
+      spacing: ["divider", "unit", ...mappedSpacingScaleKeys],
+      borderWidth: COMMON_UNITS,
+      borderRadius: COMMON_UNITS
+    },
+    classGroups: {
+      shadow: [{ shadow: COMMON_UNITS }],
+      "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
+      "bg-image": ["bg-stripe-gradient"],
+      "min-w": [
+        {
+          "min-w": ["unit", ...mappedSpacingScaleKeys]
+        }
+      ],
+      "min-h": [
+        {
+          "min-h": ["unit", ...mappedSpacingScaleKeys]
+        }
+      ]
     }
-  });
-};
+  }
+});
 
 // src/components/select.ts
 var select = tv({
   slots: {
-    base: "group inline-flex flex-col relative w-full",
-    label: "block text-small font-medium text-foreground-500 pointer-events-none",
+    base: ["group inline-flex flex-col relative w-full", "data-[has-helper=true]:mb-4"],
+    label: [
+      "block",
+      "absolute",
+      "z-10",
+      "origin-top-left",
+      "subpixel-antialiased",
+      "text-small",
+      "text-foreground-500",
+      "pointer-events-none"
+    ],
     mainWrapper: "w-full flex flex-col",
     trigger: "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent",
-    innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.unit-6))] items-center gap-1.5 box-border",
+    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 opacity-60 group-data-[filled=true]:opacity-100",
+    value: ["font-normal", "w-full", "text-left"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
-    popover: "w-full p-1 overflow-hidden",
-    helperWrapper: "flex relative flex-col gap-1.5 pt-1 px-1",
+    popoverContent: "w-full p-1 overflow-hidden",
+    helperWrapper: "flex absolute -bottom-[calc(theme(fontSize.tiny)*1.5)] flex-col gap-1.5 px-1",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -196,7 +198,9 @@ var select = tv({
       }
     },
     color: {
-      default: {},
+      default: {
+        value: ["text-foreground-500", "group-data-[has-value=true]:text-foreground"]
+      },
       primary: {},
       secondary: {},
       success: {},
@@ -207,7 +211,7 @@ var select = tv({
       sm: {
         label: "text-tiny",
         trigger: "h-unit-8 min-h-unit-8 px-2 rounded-small",
-        value: "text-small"
+        value: "text-tiny"
       },
       md: {
         trigger: "h-unit-10 min-h-unit-10 rounded-medium",
@@ -242,7 +246,7 @@ var select = tv({
       },
       "outside-left": {
         base: "flex-row items-center flex-nowrap items-start",
-        label: "text-foreground pr-2"
+        label: "relative text-foreground pr-2"
       },
       inside: {
         label: "text-tiny cursor-pointer",
@@ -254,11 +258,6 @@ var select = tv({
         base: "w-full"
       }
     },
-    isLabelPlaceholder: {
-      true: {
-        label: "absolute z-10"
-      }
-    },
     isDisabled: {
       true: {
         base: "opacity-disabled pointer-events-none",
@@ -268,7 +267,7 @@ var select = tv({
     isInvalid: {
       true: {
         label: "!text-danger",
-        value: "text-danger",
+        value: "!text-danger",
         selectorIcon: "text-danger"
       }
     },
@@ -279,6 +278,7 @@ var select = tv({
     },
     isMultiline: {
       true: {
+        label: "relative",
         trigger: "!h-auto"
       },
       false: {
@@ -297,9 +297,9 @@ var select = tv({
         label: [
           "will-change-auto",
           "origin-top-left",
-          "transition-all",
           "!duration-200",
           "!ease-out",
+          "transition-[transform,color,left,opacity]",
           "motion-reduce:transition-none"
         ],
         selectorIcon: "transition-transform duration-150 ease motion-reduce:transition-none"
@@ -560,6 +560,13 @@ var select = tv({
         ]
       }
     },
+    {
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled=true]:text-foreground-600"
+      }
+    },
     {
       isInvalid: true,
       variant: "flat",
@@ -589,14 +596,14 @@ var select = tv({
       labelPlacement: "inside",
       size: "sm",
       class: {
-        trigger: "h-12 py-1.5 px-3"
+        trigger: "h-12 min-h-unit-12 py-1.5 px-3"
       }
     },
     {
       labelPlacement: "inside",
       size: "md",
       class: {
-        trigger: "h-14 py-2"
+        trigger: "h-14 min-h-unit-14 py-2"
       }
     },
     {
@@ -604,23 +611,18 @@ var select = tv({
       size: "lg",
       class: {
         label: "text-small",
-        trigger: "h-16 py-2.5 gap-0"
+        trigger: "h-16 min-h-unit-16 py-2.5 gap-0"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: ["inside", "outside"],
       class: {
-        label: [
-          "font-normal",
-          "group-data-[filled=true]:font-medium",
-          "group-data-[filled=true]:pointer-events-auto"
-        ]
+        label: ["group-data-[filled=true]:pointer-events-auto"]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
+      isMultiline: false,
       class: {
         base: "group relative justify-end",
         label: [
@@ -635,83 +637,154 @@ var select = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: ["inside"],
+      class: {
+        label: "group-data-[filled=true]:scale-85"
+      }
+    },
+    {
       labelPlacement: "inside",
       size: ["sm", "md"],
       class: {
-        label: ["text-small", "group-data-[filled=true]:text-tiny"],
+        label: "text-small",
         input: "pt-4"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "sm",
       class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_3px)]"],
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
         innerWrapper: "pt-4"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
         ],
         innerWrapper: "pt-4"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "lg",
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:text-small",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_5px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
         ],
         innerWrapper: "pt-5"
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "sm",
+      class: {
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "lg",
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      isMultiline: false,
+      size: "sm",
+      class: {
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      isMultiline: false,
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      isMultiline: false,
+      size: "lg",
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+        ]
+      }
+    },
+    {
       labelPlacement: "outside",
       size: "sm",
+      isMultiline: false,
       class: {
         label: [
           "left-2",
-          "text-small",
-          "group-data-[filled=true]:text-tiny",
+          "text-tiny",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
+      isMultiline: false,
       size: "md",
       class: {
         label: [
           "left-3",
           "text-small",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
+      isMultiline: false,
       size: "lg",
       class: {
         label: [
           "left-3",
           "text-medium",
-          "group-data-[filled=true]:text-small",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
     }
   ]

package/dist/components/select.mjs

@@ -1,11 +1,11 @@
 import {
   select
-} from "../chunk-F76574GG.mjs";
+} from "../chunk-6RI6HHSE.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-2PIR7DFM.mjs";
-import "../chunk-6AEINX52.mjs";
-import "../chunk-T7JNS25F.mjs";
+import "../chunk-WBUVHAJX.mjs";
+import "../chunk-XHQUSKIE.mjs";
 import "../chunk-WA5F6AED.mjs";
 export {
   select