@nextui-org/theme 2.1.9 → 2.1.11

package/dist/{chunk-PJV3MWBL.mjs → chunk-KNUJMWVH.mjs}

@@ -1,20 +1,33 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses,
   groupDataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/input.ts
 var input = tv({
   slots: {
-    base: "group flex flex-col",
-    label: "block text-small font-medium text-foreground-600",
+    base: ["group flex flex-col", "data-[has-helper=true]:mb-4"],
+    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",
@@ -32,7 +45,7 @@ var input = tv({
       "rounded-full",
       ...dataFocusVisibleClasses
     ],
-    helperWrapper: "flex relative flex-col gap-1.5 pt-1 px-1",
+    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"
   },
@@ -83,7 +96,8 @@ var input = tv({
           "after:-bottom-[2px]",
           "after:h-[2px]",
           "group-data-[focus=true]:after:w-full"
-        ]
+        ],
+        innerWrapper: "pb-1"
       }
     },
     color: {
@@ -98,7 +112,7 @@ var input = tv({
       sm: {
         label: "text-tiny",
         inputWrapper: "h-unit-8 min-h-unit-8 px-2 rounded-small",
-        input: "text-small",
+        input: "text-tiny",
         clearButton: "text-medium"
       },
       md: {
@@ -138,11 +152,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: {
@@ -150,11 +165,6 @@ var input = tv({
         base: "w-full"
       }
     },
-    isLabelPlaceholder: {
-      true: {
-        label: "absolute z-10 pointer-events-none"
-      }
-    },
     isClearable: {
       true: {
         input: "peer pr-6",
@@ -181,12 +191,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"
       },
@@ -194,11 +206,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"]
       }
@@ -211,6 +222,7 @@ var input = tv({
     fullWidth: true,
     labelPlacement: "inside",
     isDisabled: false,
+    isMultiline: false,
     disableAnimation: false
   },
   compoundVariants: [
@@ -458,6 +470,13 @@ var input = tv({
         ]
       }
     },
+    {
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled-within=true]:text-foreground-600"
+      }
+    },
     {
       isInvalid: true,
       variant: "flat",
@@ -506,19 +525,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: [
@@ -533,85 +561,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)]"
       }
     },
     {
@@ -634,6 +753,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-100 motion-reduce:transition-none"
+      }
     }
   ]
 });

package/dist/{chunk-YSXRNNDV.mjs → chunk-N7N2LONM.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 
 // src/components/divider.ts
 var divider = tv({

package/dist/{chunk-RHIZZ5XX.mjs → chunk-ODGTGSNM.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-2PIR7DFM.mjs";
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/tabs.ts
 var tabs = tv({

package/dist/{chunk-EC4F6RJF.mjs → chunk-PFGLTKGJ.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 
 // src/components/spacer.ts
 var spacer = tv({

package/dist/{chunk-FZZINZOQ.mjs → chunk-QF56VSRK.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-2PIR7DFM.mjs";
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/pagination.ts
 var pagination = tv({
@@ -35,6 +35,7 @@ var pagination = tv({
       "left-0",
       "select-none",
       "touch-none",
+      "pointer-events-none",
       "z-20"
     ],
     forwardIcon: "hidden group-hover:block group-data-[focus-visible=true]:block data-[before=true]:rotate-180",
@@ -124,7 +125,12 @@ var pagination = tv({
       },
       false: {
         item: ["data-[pressed=true]:scale-[0.97]", "transition-transform-background"],
-        cursor: ["transition-transform", "!duration-300"]
+        cursor: [
+          "data-[moving=true]:transition-transform",
+          "!data-[moving=true]:duration-300",
+          "opacity-0",
+          "data-[moving]:opacity-100"
+        ]
       }
     }
   },
@@ -329,17 +335,28 @@ var pagination = tv({
     {
       slots: ["item", "prev", "next"],
       variant: "flat",
-      class: ["bg-default-100", "data-[hover=true]:bg-default-200", "active:bg-default-300"]
+      class: [
+        "bg-default-100",
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-200",
+        "active:bg-default-300"
+      ]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "faded",
-      class: ["bg-default-50", "data-[hover=true]:bg-default-100", "active:bg-default-200"]
+      class: [
+        "bg-default-50",
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-100",
+        "active:bg-default-200"
+      ]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "light",
-      class: ["data-[hover=true]:bg-default-100", "active:bg-default-200"]
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-100",
+        "active:bg-default-200"
+      ]
     },
     {
       slots: ["item", "cursor", "prev", "next"],

package/dist/{chunk-YKWIBFFV.mjs → chunk-QWYWYOG6.mjs}

@@ -1,13 +1,25 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/menu.ts
 var menu = tv({
-  base: "w-full flex flex-col gap-0.5 p-1 outline-none"
+  slots: {
+    base: "w-full relative flex flex-col gap-1 p-1",
+    list: "w-full flex flex-col gap-0.5 outline-none",
+    emptyContent: [
+      "h-10",
+      "px-2",
+      "py-1.5",
+      "w-full",
+      "h-full",
+      "text-foreground-400",
+      "text-start"
+    ]
+  }
 });
 var menuItem = tv({
   slots: {
@@ -101,7 +113,9 @@ var menuItem = tv({
     },
     disableAnimation: {
       true: {},
-      false: {}
+      false: {
+        base: "data-[hover=true]:transition-colors"
+      }
     }
   },
   defaultVariants: {

package/dist/{chunk-Y32IWEMZ.mjs → chunk-S7W5DQP2.mjs}

@@ -1,12 +1,12 @@
-import {
-  transition_default
-} from "./chunk-KPK2JQIF.mjs";
 import {
   custom_default
 } from "./chunk-DI2L75XK.mjs";
 import {
   scrollbar_hide_default
 } from "./chunk-4Z22WXZX.mjs";
+import {
+  transition_default
+} from "./chunk-G3PB7L4N.mjs";
 
 // src/utilities/index.ts
 var utilities = {

package/dist/{chunk-TIMHSW45.mjs → chunk-TUUOVVH3.mjs}

@@ -1,9 +1,9 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   groupDataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/toggle.ts
 var toggle = tv({

package/dist/{chunk-B55QBA5E.mjs → chunk-VD4MGTVP.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2PIR7DFM.mjs";
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 
 // src/components/snippet.ts
 var snippet = tv({

package/dist/{chunk-4JBYJQSP.mjs → chunk-VGHVBXXT.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 
 // src/components/scroll-shadow.ts
 var verticalShadow = [

package/dist/{chunk-WM43BKYH.mjs → chunk-VOTIIGIW.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-2PIR7DFM.mjs";
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   ringClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/chip.ts
 var chip = tv({
@@ -76,7 +76,7 @@ var chip = tv({
     },
     size: {
       sm: {
-        base: "px-1 h-6 text-small",
+        base: "px-1 h-6 text-tiny",
         content: "px-1",
         closeButton: "text-medium",
         avatar: "w-4 h-4"

package/dist/{chunk-O24TFHPZ.mjs → chunk-VPYXYIZ5.mjs}

@@ -1,9 +1,9 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/user.ts
 var user = tv({

package/dist/{chunk-ADNJ6GPZ.mjs → chunk-VU5TSYMO.mjs}

@@ -1,9 +1,9 @@
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/table.ts
 var table = tv({

package/dist/{chunk-7MCHEQXT.mjs → chunk-VZI6SR6H.mjs}

@@ -31,8 +31,11 @@ var defaultLayout = {
     large: "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)"
   }
 };
-var lightLayout = {};
+var lightLayout = {
+  hoverOpacity: ".8"
+};
 var darkLayout = {
+  hoverOpacity: ".9",
   boxShadow: {
     small: "0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
     medium: "0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",

package/dist/chunk-WBUVHAJX.mjs

@@ -0,0 +1,37 @@
+import {
+  mappedSpacingScaleKeys
+} from "./chunk-WA5F6AED.mjs";
+
+// src/utils/tv.ts
+import { createTV } from "tailwind-variants";
+var COMMON_UNITS = ["small", "medium", "large"];
+var tv = 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]
+        }
+      ]
+    }
+  }
+});
+
+export {
+  tv
+};