@nextui-org/theme 2.1.8 → 2.1.10

package/dist/{chunk-LGRQRHJJ.mjs → chunk-BR6V72YY.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/navbar.ts
 var navbar = tv({
@@ -128,7 +128,10 @@ var navbar = tv({
       "gap-2",
       "overflow-y-auto"
     ],
-    menuItem: ["text-large"]
+    menuItem: [
+      "text-large",
+      "data-[active=true]:font-semibold"
+    ]
   },
   variants: {
     position: {

package/dist/{chunk-PJV3MWBL.mjs → chunk-C3KZKKPN.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",
+    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",
@@ -83,7 +96,8 @@ var input = tv({
           "after:-bottom-[2px]",
           "after:h-[2px]",
           "group-data-[focus=true]:after:w-full"
-        ]
+        ],
+        innerWrapper: "pb-1"
       }
     },
     color: {
@@ -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-150 motion-reduce:transition-none"
+      }
     }
   ]
 });

package/dist/{chunk-2T5RQ7SK.mjs → chunk-CLW3JMFF.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/checkbox.ts
 var checkbox = tv({
@@ -140,6 +140,12 @@ var checkbox = tv({
         base: "opacity-disabled pointer-events-none"
       }
     },
+    isInvalid: {
+      true: {
+        wrapper: "before:border-danger",
+        label: "text-danger"
+      }
+    },
     disableAnimation: {
       true: {
         wrapper: "transition-none",
@@ -148,15 +154,16 @@ var checkbox = tv({
       },
       false: {
         wrapper: [
-          "before:transition-background",
+          "before:transition-colors",
           "group-data-[pressed=true]:scale-95",
           "transition-transform",
           "after:transition-transform-opacity",
           "after:!ease-linear",
-          "after:!duration-200"
+          "after:!duration-200",
+          "motion-reduce:transition-none"
         ],
-        icon: "transition-opacity",
-        label: "transition-opacity before:transition-width"
+        icon: "transition-opacity motion-reduce:transition-none",
+        label: "transition-colors-opacity before:transition-width motion-reduce:transition-none"
       }
     }
   },
@@ -175,6 +182,29 @@ var checkboxGroup = tv({
     wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row",
     description: "text-small text-foreground-400",
     errorMessage: "text-small text-danger"
+  },
+  variants: {
+    isRequired: {
+      true: {
+        label: "after:content-['*'] after:text-danger after:ml-0.5"
+      }
+    },
+    isInvalid: {
+      true: {
+        description: "text-danger"
+      }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        description: "transition-colors !duration-150 motion-reduce:transition-none"
+      }
+    }
+  },
+  defaultVariants: {
+    isInvalid: false,
+    isRequired: false,
+    disableAnimation: false
   }
 });
 

package/dist/{chunk-NW5W5ANO.mjs → chunk-DGMET46Q.mjs}

@@ -4,6 +4,7 @@ import {
 
 // src/utils/theme.ts
 var isBaseTheme = (theme) => theme === "light" || theme === "dark";
+var ROOT_FONT_SIZE = 16;
 var baseScale = [1, 2, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
 var extendedScale = [20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96];
 var generateSpacingScale = (spacingUnit) => {
@@ -24,7 +25,7 @@ var generateSpacingScale = (spacingUnit) => {
   };
   const scale = { 0: "0px" };
   Object.entries(scaleLabels).forEach(([label, multiplier]) => {
-    scale[label] = multiplier ? `${spacingUnit * multiplier}px` : `${spacingUnit}px`;
+    scale[label] = multiplier ? `${spacingUnit * multiplier / ROOT_FONT_SIZE}rem` : `${spacingUnit / ROOT_FONT_SIZE}rem`;
   });
   baseScale.forEach((i) => {
     let key = `${i}`;
@@ -32,11 +33,11 @@ var generateSpacingScale = (spacingUnit) => {
       const [first, second] = key.split(".");
       key = `${first}_${second}`;
     }
-    scale[key] = `${spacingUnit * i}px`;
+    scale[key] = `${spacingUnit * i / ROOT_FONT_SIZE}rem`;
   });
   extendedScale.forEach((i) => {
     const key = `${i}`;
-    scale[key] = `${spacingUnit * i}px`;
+    scale[key] = `${spacingUnit * i / ROOT_FONT_SIZE}rem`;
   });
   return scale;
 };

package/dist/{chunk-WBNF66V7.mjs → chunk-F36W5Y6O.mjs}

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

package/dist/{chunk-GNLIYZAQ.mjs → chunk-FUMNSN2H.mjs}

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

package/dist/{chunk-KPK2JQIF.mjs → chunk-G3PB7L4N.mjs}

@@ -41,6 +41,11 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
+  ".transition-size": {
+    "transition-property": "width, height",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
   ".transition-left": {
     "transition-property": "left",
     "transition-timing-function": "ease",
@@ -70,6 +75,11 @@ var transition_default = {
     " transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-transform-colors-opacity": {
+    " transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
   }
 };
 

package/dist/{chunk-4DKVPW5Z.mjs → chunk-HBLCAYSX.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/modal.ts
 var modal = tv({

package/dist/{chunk-XPLXQDB3.mjs → chunk-HYA3WURA.mjs}

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

package/dist/{chunk-UHF2F2WJ.mjs → chunk-I5E37FAL.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/accordion.ts
 var accordion = tv({
@@ -39,7 +39,7 @@ var accordionItem = tv({
     ],
     startContent: "flex-shrink-0",
     indicator: "text-default-400",
-    titleWrapper: "flex-1 flex flex-col text-left",
+    titleWrapper: "flex-1 flex flex-col text-start",
     title: "text-foreground text-large",
     subtitle: "text-small text-foreground-500 font-normal",
     content: "py-2"
@@ -78,7 +78,7 @@ var accordionItem = tv({
         indicator: "transition-none"
       },
       false: {
-        indicator: "rotate-0 data-[open=true]:-rotate-90"
+        indicator: "rotate-0 data-[open=true]:-rotate-90 rtl:-rotate-180 rtl:data-[open=true]:-rotate-90"
       }
     }
   },

package/dist/{chunk-RPMLQF4Y.mjs → chunk-J6EGGODL.mjs}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-2PIR7DFM.mjs";
 import {
   tv
-} from "./chunk-6AEINX52.mjs";
+} from "./chunk-WBUVHAJX.mjs";
 import {
   dataFocusVisibleClasses,
   translateCenterClasses
-} from "./chunk-T7JNS25F.mjs";
+} from "./chunk-XHQUSKIE.mjs";
 
 // src/components/avatar.ts
 var avatar = tv({
@@ -21,7 +21,7 @@ var avatar = tv({
       "overflow-hidden",
       "align-middle",
       "text-white",
-      "z-10",
+      "z-0",
       ...dataFocusVisibleClasses
     ],
     img: [
@@ -108,7 +108,7 @@ var avatar = tv({
     isInGroup: {
       true: {
         base: [
-          "-ml-2 data-[hover=true]:-translate-x-3 transition-transform",
+          "-ms-2 data-[hover=true]:-translate-x-3 transition-transform",
           "data-[focus-visible=true]:-translate-x-3"
         ]
       }
@@ -136,7 +136,7 @@ var avatar = tv({
       color: "primary",
       isBordered: true,
       class: {
-        base: "ring-focus"
+        base: "ring-primary"
       }
     },
     {

package/dist/{chunk-XY766PDD.mjs → chunk-J7FVLFSZ.mjs}

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

package/dist/{chunk-GKYVNUGL.mjs → chunk-JMOQB2OS.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/card.ts
 var card = tv({
@@ -37,7 +37,7 @@ var card = tv({
       "flex",
       "flex-1",
       "w-full",
-      "p-5",
+      "p-3",
       "flex-auto",
       "flex-col",
       "place-content-inherit",