@nextui-org/theme 2.1.8 → 2.1.10

package/dist/components/input.js

@@ -82,39 +82,32 @@ 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/utils/classes.ts
 var dataFocusVisibleClasses = [
@@ -137,11 +130,24 @@ var groupDataFocusVisibleClasses = [
 var input = tv({
   slots: {
     base: "group flex flex-col",
-    label: "block text-small font-medium text-foreground-600",
+    label: [
+      "absolute",
+      "z-10",
+      "pointer-events-none",
+      "origin-top-left",
+      "subpixel-antialiased",
+      "block",
+      "text-small",
+      "text-foreground-500"
+    ],
     mainWrapper: "h-full",
     inputWrapper: "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
-    innerWrapper: "inline-flex h-full items-center w-full gap-1.5 box-border",
-    input: "w-full h-full font-normal !bg-transparent outline-none placeholder:text-foreground-500",
+    innerWrapper: "inline-flex w-full items-center h-full box-border",
+    input: [
+      "w-full font-normal bg-transparent !outline-none placeholder:text-foreground-500 focus-visible:outline-none",
+      "data-[has-start-content=true]:ps-1.5",
+      "data-[has-end-content=true]:pe-1.5"
+    ],
     clearButton: [
       "p-2",
       "-m-2",
@@ -210,7 +216,8 @@ var input = tv({
           "after:-bottom-[2px]",
           "after:h-[2px]",
           "group-data-[focus=true]:after:w-full"
-        ]
+        ],
+        innerWrapper: "pb-1"
       }
     },
     color: {
@@ -265,11 +272,12 @@ var input = tv({
         base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
         inputWrapper: "flex-1",
         mainWrapper: "flex flex-col",
-        label: "text-foreground pr-2"
+        label: "relative text-foreground pr-2"
       },
       inside: {
         label: "text-tiny cursor-text",
-        inputWrapper: "flex-col items-start justify-center gap-0"
+        inputWrapper: "flex-col items-start justify-center gap-0",
+        innerWrapper: "items-end"
       }
     },
     fullWidth: {
@@ -277,11 +285,6 @@ var input = tv({
         base: "w-full"
       }
     },
-    isLabelPlaceholder: {
-      true: {
-        label: "absolute z-10 pointer-events-none"
-      }
-    },
     isClearable: {
       true: {
         input: "peer pr-6",
@@ -308,12 +311,14 @@ var input = tv({
     },
     isMultiline: {
       true: {
+        label: "relative",
         inputWrapper: "!h-auto",
-        input: "resize-none py-2"
+        input: "resize-none py-2 data-[hide-scroll=true]:scrollbar-hide"
       }
     },
     disableAnimation: {
       true: {
+        input: "transition-none",
         inputWrapper: "transition-none",
         label: "transition-none"
       },
@@ -321,11 +326,10 @@ var input = tv({
         inputWrapper: "transition-background motion-reduce:transition-none !duration-150",
         label: [
           "will-change-auto",
-          "origin-top-left",
-          "transition-all",
           "!duration-200",
           "!ease-out",
-          "motion-reduce:transition-none"
+          "motion-reduce:transition-none",
+          "transition-[transform,color,left,opacity]"
         ],
         clearButton: ["transition-opacity", "motion-reduce:transition-none"]
       }
@@ -338,6 +342,7 @@ var input = tv({
     fullWidth: true,
     labelPlacement: "inside",
     isDisabled: false,
+    isMultiline: false,
     disableAnimation: false
   },
   compoundVariants: [
@@ -585,6 +590,13 @@ var input = tv({
         ]
       }
     },
+    {
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled-within=true]:text-foreground-600"
+      }
+    },
     {
       isInvalid: true,
       variant: "flat",
@@ -633,19 +645,28 @@ var input = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: "inside",
+      size: "sm",
+      variant: ["bordered", "faded"],
+      class: {
+        inputWrapper: "py-1"
+      }
+    },
+    {
       labelPlacement: ["inside", "outside"],
       class: {
-        label: [
-          "font-normal",
-          "group-data-[filled-within=true]:font-medium",
-          "group-data-[filled-within=true]:pointer-events-auto"
-        ]
+        label: ["group-data-[filled-within=true]:pointer-events-auto"]
+      }
+    },
+    {
+      labelPlacement: ["outside", "outside-left"],
+      class: {
+        input: "h-full"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
+      isMultiline: false,
       class: {
         base: "group relative justify-end",
         label: [
@@ -660,85 +681,176 @@ var input = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: ["inside"],
+      class: {
+        label: ["group-data-[filled-within=true]:scale-85"]
+      }
+    },
+    {
+      labelPlacement: ["inside"],
+      variant: "flat",
+      size: ["md", "lg"],
+      class: {
+        innerWrapper: "pb-0.5"
+      }
+    },
+    {
+      variant: "underlined",
+      size: "sm",
+      class: {
+        innerWrapper: "pb-1"
+      }
+    },
+    {
+      variant: "underlined",
+      size: ["md", "lg"],
+      class: {
+        innerWrapper: "pb-1.5"
+      }
+    },
+    {
       labelPlacement: "inside",
       size: ["sm", "md"],
       class: {
-        label: ["text-small", "group-data-[filled-within=true]:text-tiny"],
-        input: "pt-4"
+        label: "text-small"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_3px)]"
-        ],
-        input: "pt-4"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
+        ]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
-        ],
-        input: "pt-4"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
+        ]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "lg",
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:text-small",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_5px)]"
-        ],
-        input: "pt-5"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "sm",
+      class: {
+        label: [
+          "group-data-[filled-within=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-within=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-within=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-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      isMultiline: false,
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      size: "lg",
+      isMultiline: false,
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+        ]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       size: "sm",
+      isMultiline: false,
       class: {
         label: [
           "left-2",
-          "text-small",
-          "group-data-[filled-within=true]:text-tiny",
+          "text-tiny",
           "group-data-[filled-within=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",
       size: "md",
+      isMultiline: false,
       class: {
         label: [
           "left-3",
           "text-small",
           "group-data-[filled-within=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",
       size: "lg",
+      isMultiline: false,
       class: {
         label: [
           "left-3",
           "text-medium",
-          "group-data-[filled-within=true]:text-small",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
     },
     {
@@ -761,6 +873,20 @@ var input = tv({
       class: {
         label: "group-data-[has-helper=true]:pt-4"
       }
+    },
+    {
+      labelPlacement: "inside",
+      isMultiline: true,
+      class: {
+        input: "pt-0"
+      }
+    },
+    {
+      isMultiline: true,
+      disableAnimation: false,
+      class: {
+        input: "transition-height !duration-150 motion-reduce:transition-none"
+      }
     }
   ]
 });

package/dist/components/input.mjs

@@ -1,11 +1,11 @@
 import {
   input
-} from "../chunk-PJV3MWBL.mjs";
+} from "../chunk-C3KZKKPN.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 {
   input

package/dist/components/kbd.js

@@ -82,39 +82,32 @@ 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/kbd.ts
 var kbd = tv({

package/dist/components/kbd.mjs

@@ -1,7 +1,7 @@
 import {
   kbd
-} from "../chunk-XY766PDD.mjs";
-import "../chunk-6AEINX52.mjs";
+} from "../chunk-J7FVLFSZ.mjs";
+import "../chunk-WBUVHAJX.mjs";
 import "../chunk-WA5F6AED.mjs";
 export {
   kbd

package/dist/components/link.js

@@ -83,39 +83,32 @@ 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/utils/classes.ts
 var dataFocusVisibleClasses = [

package/dist/components/link.mjs

@@ -1,12 +1,12 @@
 import {
   link,
   linkAnchorClasses
-} from "../chunk-MOHT4OBR.mjs";
+} from "../chunk-XNF3KCH7.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 {
   link,

package/dist/components/listbox.d.ts

@@ -1,3 +1,3 @@
-export { MenuItemSlots as ListboxItemSlots, MenuItemVariantProps as ListboxItemVariantProps, MenuSectionSlots as ListboxSectionSlots, MenuSectionVariantProps as ListboxSectionVariantProps, MenuVariantProps as ListboxVariantProps, menu as listbox, menuItem as listboxItem, menuSection as listboxSection } from './menu.js';
+export { MenuItemSlots as ListboxItemSlots, MenuItemVariantProps as ListboxItemVariantProps, MenuSectionSlots as ListboxSectionSlots, MenuSectionVariantProps as ListboxSectionVariantProps, MenuSlots as ListboxSlots, MenuVariantProps as ListboxVariantProps, menu as listbox, menuItem as listboxItem, menuSection as listboxSection } from './menu.js';
 import 'tailwind-variants/dist/config';
 import 'tailwind-variants';