@nextui-org/theme 2.2.2 → 2.2.4

package/dist/components/index.js

@@ -80,7 +80,24 @@ module.exports = __toCommonJS(components_exports);
 
 // src/utils/tv.ts
 var import_tailwind_variants = require("tailwind-variants");
+
+// src/utils/tw-merge-config.ts
 var COMMON_UNITS = ["small", "medium", "large"];
+var twMergeConfig = {
+  theme: {
+    opacity: ["disabled"],
+    spacing: ["divider"],
+    borderWidth: COMMON_UNITS,
+    borderRadius: COMMON_UNITS
+  },
+  classGroups: {
+    shadow: [{ shadow: COMMON_UNITS }],
+    "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
+    "bg-image": ["bg-stripe-gradient"]
+  }
+};
+
+// src/utils/tv.ts
 var tv = (options, config) => {
   var _a, _b, _c;
   return (0, import_tailwind_variants.tv)(options, {
@@ -90,16 +107,11 @@ var tv = (options, config) => {
       ...config == null ? void 0 : config.twMergeConfig,
       theme: {
         ...(_b = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _b.theme,
-        opacity: ["disabled"],
-        spacing: ["divider"],
-        borderWidth: COMMON_UNITS,
-        borderRadius: COMMON_UNITS
+        ...twMergeConfig.theme
       },
       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"]
+        ...twMergeConfig.classGroups
       }
     }
   });
@@ -326,6 +338,13 @@ var avatar = tv({
       true: {
         base: "m-0 data-[hover=true]:translate-x-0"
       }
+    },
+    disableAnimation: {
+      true: {
+        base: "transition-none",
+        img: "transition-none"
+      },
+      false: {}
     }
   },
   defaultVariants: {
@@ -380,7 +399,7 @@ var avatar = tv({
 });
 var avatarGroup = tv({
   slots: {
-    base: "flex items-center justify-center h-auto w-max-content",
+    base: "flex items-center justify-center h-auto w-max",
     count: "hover:-translate-x-0"
   },
   variants: {
@@ -398,7 +417,7 @@ var card = tv({
       "flex-col",
       "relative",
       "overflow-hidden",
-      "height-auto",
+      "h-auto",
       "outline-none",
       "text-foreground",
       "box-border",
@@ -522,7 +541,6 @@ var card = tv({
   compoundVariants: [
     {
       isPressable: true,
-      disableAnimation: false,
       class: "data-[pressed=true]:scale-[0.97] tap-highlight-transparent"
     }
   ],
@@ -533,7 +551,6 @@ var card = tv({
     isHoverable: false,
     isPressable: false,
     isDisabled: false,
-    disableAnimation: false,
     isFooterBlurred: false
   }
 });
@@ -629,8 +646,7 @@ var link = tv({
     size: "md",
     isBlock: false,
     underline: "none",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   }
 });
 var linkAnchorClasses = "flex mx-1 text-current self-center";
@@ -667,6 +683,7 @@ var button = tv({
     "subpixel-antialiased",
     "overflow-hidden",
     "tap-highlight-transparent",
+    "data-[pressed=true]:scale-[0.97]",
     ...dataFocusVisibleClasses
   ],
   variants: {
@@ -714,7 +731,7 @@ var button = tv({
     },
     disableAnimation: {
       true: "!transition-none",
-      false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"
+      false: "transition-transform-colors-opacity motion-reduce:transition-none"
     }
   },
   defaultVariants: {
@@ -723,8 +740,7 @@ var button = tv({
     color: "default",
     fullWidth: false,
     isDisabled: false,
-    isInGroup: false,
-    disableAnimation: false
+    isInGroup: false
   },
   compoundVariants: [
     {
@@ -1358,7 +1374,6 @@ var popover = tv({
     size: "md",
     shadow: "md",
     backdrop: "transparent",
-    disableAnimation: false,
     triggerScaleOnOpen: true
   },
   compoundVariants: [
@@ -1450,8 +1465,7 @@ var snippet = tv({
     color: "default",
     variant: "flat",
     size: "md",
-    fullWidth: false,
-    disableAnimation: false
+    fullWidth: false
   },
   compoundVariants: [
     {
@@ -2237,7 +2251,6 @@ var badge = tv({
     shape: "rectangle",
     placement: "top-right",
     showOutline: true,
-    disableAnimation: false,
     isInvisible: false
   },
   compoundVariants: [
@@ -2676,8 +2689,7 @@ var checkbox = tv({
     color: "primary",
     size: "md",
     isDisabled: false,
-    lineThrough: false,
-    disableAnimation: false
+    lineThrough: false
   }
 });
 var checkboxGroup = tv({
@@ -2708,8 +2720,7 @@ var checkboxGroup = tv({
   },
   defaultVariants: {
     isInvalid: false,
-    isRequired: false,
-    disableAnimation: false
+    isRequired: false
   }
 });
 
@@ -2785,14 +2796,14 @@ var radio = tv({
       md: {
         wrapper: "w-5 h-5",
         control: "w-2 h-2",
-        labelWrapper: "ml-2",
+        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
         label: "text-medium",
         description: "text-small"
       },
       lg: {
         wrapper: "w-6 h-6",
         control: "w-2.5 h-2.5",
-        labelWrapper: "ml-2",
+        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
         label: "text-large",
         description: "text-medium"
       }
@@ -2828,8 +2839,7 @@ var radio = tv({
     color: "primary",
     size: "md",
     isDisabled: false,
-    isInvalid: false,
-    disableAnimation: false
+    isInvalid: false
   }
 });
 var radioGroup = tv({
@@ -2860,8 +2870,7 @@ var radioGroup = tv({
   },
   defaultVariants: {
     isInvalid: false,
-    isRequired: false,
-    disableAnimation: false
+    isRequired: false
   }
 });
 
@@ -2999,7 +3008,6 @@ var pagination = tv({
     isCompact: false,
     isDisabled: false,
     showShadow: false,
-    disableAnimation: false,
     disableCursorAnimation: false
   },
   compoundVariants: [
@@ -3392,8 +3400,7 @@ var toggle = tv({
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -3502,7 +3509,6 @@ var accordionItem = tv({
     radius: "lg",
     isDisabled: false,
     hideIndicator: false,
-    disableAnimation: false,
     disableIndicatorAnimation: false
   }
 });
@@ -3606,8 +3612,7 @@ var progress = tv(
       radius: "full",
       isStriped: false,
       isIndeterminate: false,
-      isDisabled: false,
-      disableAnimation: false
+      isDisabled: false
     },
     compoundVariants: [
       {
@@ -3620,7 +3625,7 @@ var progress = tv(
     ]
   },
   {
-    twMerge: false
+    twMerge: true
   }
 );
 
@@ -3693,8 +3698,7 @@ var circularProgress = tv({
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -3891,7 +3895,7 @@ var input = tv({
     },
     isRequired: {
       true: {
-        label: "after:content-['*'] after:text-danger after:ml-0.5"
+        label: "after:content-['*'] after:text-danger after:ml-0.5 rtl:after:ml-[unset] rtl:after:mr-0.5"
       }
     },
     isMultiline: {
@@ -3928,8 +3932,7 @@ var input = tv({
     fullWidth: true,
     labelPlacement: "inside",
     isDisabled: false,
-    isMultiline: false,
-    disableAnimation: false
+    isMultiline: false
   },
   compoundVariants: [
     {
@@ -4209,9 +4212,9 @@ var input = tv({
       variant: "flat",
       class: {
         inputWrapper: [
-          "bg-danger-50",
-          "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
+          "!bg-danger-50",
+          "data-[hover=true]:!bg-danger-100",
+          "group-data-[focus=true]:!bg-danger-50"
         ]
       }
     },
@@ -4219,14 +4222,14 @@ var input = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        inputWrapper: "!border-danger group-data-[focus=true]:border-danger"
+        inputWrapper: "!border-danger group-data-[focus=true]:!border-danger"
       }
     },
     {
       isInvalid: true,
       variant: "underlined",
       class: {
-        inputWrapper: "after:bg-danger"
+        inputWrapper: "after:!bg-danger"
       }
     },
     {
@@ -4610,8 +4613,7 @@ var dropdownItem = tv({
   },
   defaultVariants: {
     variant: "solid",
-    color: "default",
-    disableAnimation: false
+    color: "default"
   },
   compoundVariants: [
     {
@@ -4934,11 +4936,32 @@ var image = tv({
     },
     showSkeleton: {
       true: {
+        wrapper: ["group", "relative", "overflow-hidden", "bg-content3 dark:bg-content2"],
+        img: "opacity-0"
+      }
+    },
+    disableAnimation: {
+      true: {
+        img: "transition-none"
+      },
+      false: {
+        img: "transition-transform-opacity motion-reduce:transition-none !duration-300"
+      }
+    }
+  },
+  defaultVariants: {
+    radius: "lg",
+    shadow: "none",
+    isZoomed: false,
+    isBlurred: false,
+    showSkeleton: false
+  },
+  compoundVariants: [
+    {
+      showSkeleton: true,
+      disableAnimation: false,
+      class: {
         wrapper: [
-          "group",
-          "relative",
-          "overflow-hidden",
-          "bg-content3 dark:bg-content2",
           "before:opacity-100",
           "before:absolute",
           "before:inset-0",
@@ -4957,27 +4980,10 @@ var image = tv({
           "after:-z-10",
           "after:bg-content3",
           "dark:after:bg-content2"
-        ],
-        img: "opacity-0"
-      }
-    },
-    disableAnimation: {
-      true: {
-        img: "transition-none"
-      },
-      false: {
-        img: "transition-transform-opacity motion-reduce:transition-none !duration-300"
+        ]
       }
     }
-  },
-  defaultVariants: {
-    radius: "lg",
-    shadow: "none",
-    isZoomed: false,
-    isBlurred: false,
-    showSkeleton: false,
-    disableAnimation: false
-  },
+  ],
   compoundSlots: [
     {
       slots: ["wrapper", "img", "blurredImg", "zoomedWrapper"],
@@ -5018,15 +5024,7 @@ var modal = tv({
       "inset-0",
       "z-50",
       "overflow-x-auto",
-      "justify-center",
-      "[--scale-enter:100%]",
-      "[--scale-exit:100%]",
-      "[--slide-enter:0px]",
-      "[--slide-exit:80px]",
-      "sm:[--scale-enter:100%]",
-      "sm:[--scale-exit:103%]",
-      "sm:[--slide-enter:0px]",
-      "sm:[--slide-exit:0px]"
+      "justify-center"
     ],
     base: [
       "flex",
@@ -5158,6 +5156,20 @@ var modal = tv({
         wrapper: "items-start sm:items-start overflow-y-auto",
         base: "my-16"
       }
+    },
+    disableAnimation: {
+      false: {
+        wrapper: [
+          "[--scale-enter:100%]",
+          "[--scale-exit:100%]",
+          "[--slide-enter:0px]",
+          "[--slide-exit:80px]",
+          "sm:[--scale-enter:100%]",
+          "sm:[--scale-exit:103%]",
+          "sm:[--slide-enter:0px]",
+          "sm:[--slide-exit:0px]"
+        ]
+      }
     }
   },
   defaultVariants: {
@@ -5589,8 +5601,7 @@ var table = tv({
     isCompact: false,
     hideHeader: false,
     isStriped: false,
-    fullWidth: true,
-    disableAnimation: false
+    fullWidth: true
   }
 });
 
@@ -5696,6 +5707,7 @@ var tabs = tv({
       "py-3",
       "px-1",
       "outline-none",
+      "data-[inert=true]:hidden",
       ...dataFocusVisibleClasses
     ],
     wrapper: []
@@ -5809,8 +5821,7 @@ var tabs = tv({
     variant: "solid",
     size: "md",
     fullWidth: false,
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -6039,6 +6050,7 @@ var skeleton = tv({
       "relative",
       "overflow-hidden",
       "bg-content3 dark:bg-content2",
+      "pointer-events-none",
       "before:opacity-100",
       "before:absolute",
       "before:inset-0",
@@ -6057,6 +6069,7 @@ var skeleton = tv({
       "after:-z-10",
       "after:bg-content3",
       "dark:after:bg-content2",
+      "data-[loaded=true]:overflow-visible",
       "data-[loaded=true]:!bg-transparent",
       "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none",
       "data-[loaded=true]:after:opacity-0"
@@ -6075,9 +6088,7 @@ var skeleton = tv({
       }
     }
   },
-  defaultVariants: {
-    disableAnimation: false
-  }
+  defaultVariants: {}
 });
 
 // src/components/select.ts
@@ -6284,7 +6295,6 @@ var select = tv({
     fullWidth: true,
     isDisabled: false,
     isMultiline: false,
-    disableAnimation: false,
     disableSelectorIconRotation: false
   },
   compoundVariants: [
@@ -6909,7 +6919,6 @@ var menuItem = tv({
   defaultVariants: {
     variant: "solid",
     color: "default",
-    disableAnimation: false,
     showDivider: false
   },
   compoundVariants: [
@@ -7399,7 +7408,7 @@ var slider = tv({
         track: "h-full border-y-transparent",
         labelWrapper: "flex-col justify-center items-center",
         step: ["left-1/2", "-translate-x-1/2", "translate-y-1/2"],
-        mark: ["left-1/2", "ml-1", "translate-x-1/2", "-translate-y-1/2"]
+        mark: ["left-1/2", "ml-1", "translate-x-1/2", "translate-y-1/2"]
       },
       false: {
         thumb: "top-1/2",
@@ -7420,7 +7429,8 @@ var slider = tv({
     },
     hasMarks: {
       true: {
-        base: "mb-5"
+        base: "mb-5",
+        mark: "cursor-pointer"
       },
       false: {}
     },
@@ -7440,7 +7450,7 @@ var slider = tv({
     hideThumb: {
       true: {
         thumb: "sr-only",
-        track: "overflow-hidden cursor-pointer"
+        track: "cursor-pointer"
       }
     },
     hasSingleThumb: {
@@ -7517,42 +7527,42 @@ var slider = tv({
       size: "sm",
       isVertical: false,
       class: {
-        track: "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.5)/2)]"
+        track: "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-x-[calc(theme(spacing.5)/2)]"
       }
     },
     {
       size: "md",
       isVertical: false,
       class: {
-        track: "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.6)/2)]"
+        track: "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]"
       }
     },
     {
       size: "lg",
       isVertical: false,
       class: {
-        track: "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.7)/2)]"
+        track: "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]"
       }
     },
     {
       size: "sm",
       isVertical: true,
       class: {
-        track: "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.5)/2)]"
+        track: "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-y-[calc(theme(spacing.5)/2)]"
       }
     },
     {
       size: "md",
       isVertical: true,
       class: {
-        track: "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.6)/2)]"
+        track: "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-y-[calc(theme(spacing.6)/2)]"
       }
     },
     {
       size: "lg",
       isVertical: true,
       class: {
-        track: "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.7)/2)]"
+        track: "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]"
       }
     },
     {
@@ -7660,7 +7670,6 @@ var slider = tv({
     hideThumb: false,
     isDisabled: false,
     disableThumbScale: false,
-    disableAnimation: false,
     showOutline: false
   }
 });
@@ -7762,8 +7771,7 @@ var breadcrumbItem = tv({
     size: "md",
     color: "foreground",
     underline: "hover",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -7942,7 +7950,6 @@ var autocomplete = tv({
     }
   },
   defaultVariants: {
-    disableAnimation: false,
     isClearable: true,
     disableSelectorIconRotation: false
   }
@@ -7959,7 +7966,7 @@ var calendar = tv({
     prevButton: [],
     nextButton: [],
     headerWrapper: [
-      "px-4 py-2 flex items-center justify-between gap-2 bg-content1",
+      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden",
       "[&_.chevron-icon]:flex-none",
       "after:content-['']",
       "after:bg-content1 origin-top",
@@ -8032,7 +8039,7 @@ var calendar = tv({
     },
     hideDisabledDates: {
       true: {
-        cellButton: "data-[disabled=true]:opacity-0"
+        cellButton: "data-[disabled=true]:data-[outside-month=true]:opacity-0"
       },
       false: {}
     },
@@ -8079,8 +8086,7 @@ var calendar = tv({
     color: "primary",
     showShadow: false,
     hideDisabledDates: false,
-    showMonthAndYearPickers: false,
-    disableAnimation: false
+    showMonthAndYearPickers: false
   },
   compoundVariants: [
     {
@@ -8539,8 +8545,7 @@ var dateInput = tv({
     size: "md",
     fullWidth: true,
     labelPlacement: "inside",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {