@nextui-org/theme 2.2.2 → 2.2.4

package/dist/index.js

@@ -26,6 +26,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  COMMON_UNITS: () => COMMON_UNITS,
   absoluteFullClasses: () => absoluteFullClasses,
   accordion: () => accordion,
   accordionItem: () => accordionItem,
@@ -44,6 +45,7 @@ __export(src_exports, {
   checkboxGroup: () => checkboxGroup,
   chip: () => chip,
   circularProgress: () => circularProgress,
+  cn: () => cn,
   code: () => code,
   collapseAdjacentVariantBorders: () => collapseAdjacentVariantBorders,
   colorVariants: () => colorVariants,
@@ -94,13 +96,31 @@ __export(src_exports, {
   toggle: () => toggle,
   translateCenterClasses: () => translateCenterClasses,
   tv: () => tv,
+  twMergeConfig: () => twMergeConfig,
   user: () => user
 });
 module.exports = __toCommonJS(src_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, {
@@ -110,16 +130,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
       }
     }
   });
@@ -249,6 +264,14 @@ var colorVariants = {
   ghost
 };
 
+// src/utils/cn.ts
+var import_clsx = __toESM(require("clsx"));
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)(twMergeConfig);
+function cn(...inputs) {
+  return twMerge((0, import_clsx.default)(inputs));
+}
+
 // src/components/avatar.ts
 var avatar = tv({
   slots: {
@@ -357,6 +380,13 @@ var avatar = tv({
       true: {
         base: "m-0 data-[hover=true]:translate-x-0"
       }
+    },
+    disableAnimation: {
+      true: {
+        base: "transition-none",
+        img: "transition-none"
+      },
+      false: {}
     }
   },
   defaultVariants: {
@@ -411,7 +441,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: {
@@ -429,7 +459,7 @@ var card = tv({
       "flex-col",
       "relative",
       "overflow-hidden",
-      "height-auto",
+      "h-auto",
       "outline-none",
       "text-foreground",
       "box-border",
@@ -553,7 +583,6 @@ var card = tv({
   compoundVariants: [
     {
       isPressable: true,
-      disableAnimation: false,
       class: "data-[pressed=true]:scale-[0.97] tap-highlight-transparent"
     }
   ],
@@ -564,7 +593,6 @@ var card = tv({
     isHoverable: false,
     isPressable: false,
     isDisabled: false,
-    disableAnimation: false,
     isFooterBlurred: false
   }
 });
@@ -660,8 +688,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";
@@ -698,6 +725,7 @@ var button = tv({
     "subpixel-antialiased",
     "overflow-hidden",
     "tap-highlight-transparent",
+    "data-[pressed=true]:scale-[0.97]",
     ...dataFocusVisibleClasses
   ],
   variants: {
@@ -745,7 +773,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: {
@@ -754,8 +782,7 @@ var button = tv({
     color: "default",
     fullWidth: false,
     isDisabled: false,
-    isInGroup: false,
-    disableAnimation: false
+    isInGroup: false
   },
   compoundVariants: [
     {
@@ -1389,7 +1416,6 @@ var popover = tv({
     size: "md",
     shadow: "md",
     backdrop: "transparent",
-    disableAnimation: false,
     triggerScaleOnOpen: true
   },
   compoundVariants: [
@@ -1481,8 +1507,7 @@ var snippet = tv({
     color: "default",
     variant: "flat",
     size: "md",
-    fullWidth: false,
-    disableAnimation: false
+    fullWidth: false
   },
   compoundVariants: [
     {
@@ -2268,7 +2293,6 @@ var badge = tv({
     shape: "rectangle",
     placement: "top-right",
     showOutline: true,
-    disableAnimation: false,
     isInvisible: false
   },
   compoundVariants: [
@@ -2707,8 +2731,7 @@ var checkbox = tv({
     color: "primary",
     size: "md",
     isDisabled: false,
-    lineThrough: false,
-    disableAnimation: false
+    lineThrough: false
   }
 });
 var checkboxGroup = tv({
@@ -2739,8 +2762,7 @@ var checkboxGroup = tv({
   },
   defaultVariants: {
     isInvalid: false,
-    isRequired: false,
-    disableAnimation: false
+    isRequired: false
   }
 });
 
@@ -2816,14 +2838,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"
       }
@@ -2859,8 +2881,7 @@ var radio = tv({
     color: "primary",
     size: "md",
     isDisabled: false,
-    isInvalid: false,
-    disableAnimation: false
+    isInvalid: false
   }
 });
 var radioGroup = tv({
@@ -2891,8 +2912,7 @@ var radioGroup = tv({
   },
   defaultVariants: {
     isInvalid: false,
-    isRequired: false,
-    disableAnimation: false
+    isRequired: false
   }
 });
 
@@ -3030,7 +3050,6 @@ var pagination = tv({
     isCompact: false,
     isDisabled: false,
     showShadow: false,
-    disableAnimation: false,
     disableCursorAnimation: false
   },
   compoundVariants: [
@@ -3423,8 +3442,7 @@ var toggle = tv({
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -3533,7 +3551,6 @@ var accordionItem = tv({
     radius: "lg",
     isDisabled: false,
     hideIndicator: false,
-    disableAnimation: false,
     disableIndicatorAnimation: false
   }
 });
@@ -3637,8 +3654,7 @@ var progress = tv(
       radius: "full",
       isStriped: false,
       isIndeterminate: false,
-      isDisabled: false,
-      disableAnimation: false
+      isDisabled: false
     },
     compoundVariants: [
       {
@@ -3651,7 +3667,7 @@ var progress = tv(
     ]
   },
   {
-    twMerge: false
+    twMerge: true
   }
 );
 
@@ -3724,8 +3740,7 @@ var circularProgress = tv({
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -3922,7 +3937,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: {
@@ -3959,8 +3974,7 @@ var input = tv({
     fullWidth: true,
     labelPlacement: "inside",
     isDisabled: false,
-    isMultiline: false,
-    disableAnimation: false
+    isMultiline: false
   },
   compoundVariants: [
     {
@@ -4240,9 +4254,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"
         ]
       }
     },
@@ -4250,14 +4264,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"
       }
     },
     {
@@ -4641,8 +4655,7 @@ var dropdownItem = tv({
   },
   defaultVariants: {
     variant: "solid",
-    color: "default",
-    disableAnimation: false
+    color: "default"
   },
   compoundVariants: [
     {
@@ -4965,11 +4978,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",
@@ -4988,27 +5022,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"],
@@ -5049,15 +5066,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",
@@ -5189,6 +5198,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: {
@@ -5620,8 +5643,7 @@ var table = tv({
     isCompact: false,
     hideHeader: false,
     isStriped: false,
-    fullWidth: true,
-    disableAnimation: false
+    fullWidth: true
   }
 });
 
@@ -5727,6 +5749,7 @@ var tabs = tv({
       "py-3",
       "px-1",
       "outline-none",
+      "data-[inert=true]:hidden",
       ...dataFocusVisibleClasses
     ],
     wrapper: []
@@ -5840,8 +5863,7 @@ var tabs = tv({
     variant: "solid",
     size: "md",
     fullWidth: false,
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -6070,6 +6092,7 @@ var skeleton = tv({
       "relative",
       "overflow-hidden",
       "bg-content3 dark:bg-content2",
+      "pointer-events-none",
       "before:opacity-100",
       "before:absolute",
       "before:inset-0",
@@ -6088,6 +6111,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"
@@ -6106,9 +6130,7 @@ var skeleton = tv({
       }
     }
   },
-  defaultVariants: {
-    disableAnimation: false
-  }
+  defaultVariants: {}
 });
 
 // src/components/select.ts
@@ -6315,7 +6337,6 @@ var select = tv({
     fullWidth: true,
     isDisabled: false,
     isMultiline: false,
-    disableAnimation: false,
     disableSelectorIconRotation: false
   },
   compoundVariants: [
@@ -6940,7 +6961,6 @@ var menuItem = tv({
   defaultVariants: {
     variant: "solid",
     color: "default",
-    disableAnimation: false,
     showDivider: false
   },
   compoundVariants: [
@@ -7430,7 +7450,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",
@@ -7451,7 +7471,8 @@ var slider = tv({
     },
     hasMarks: {
       true: {
-        base: "mb-5"
+        base: "mb-5",
+        mark: "cursor-pointer"
       },
       false: {}
     },
@@ -7471,7 +7492,7 @@ var slider = tv({
     hideThumb: {
       true: {
         thumb: "sr-only",
-        track: "overflow-hidden cursor-pointer"
+        track: "cursor-pointer"
       }
     },
     hasSingleThumb: {
@@ -7548,42 +7569,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)]"
       }
     },
     {
@@ -7691,7 +7712,6 @@ var slider = tv({
     hideThumb: false,
     isDisabled: false,
     disableThumbScale: false,
-    disableAnimation: false,
     showOutline: false
   }
 });
@@ -7793,8 +7813,7 @@ var breadcrumbItem = tv({
     size: "md",
     color: "foreground",
     underline: "hover",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -7973,7 +7992,6 @@ var autocomplete = tv({
     }
   },
   defaultVariants: {
-    disableAnimation: false,
     isClearable: true,
     disableSelectorIconRotation: false
   }
@@ -7990,7 +8008,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",
@@ -8063,7 +8081,7 @@ var calendar = tv({
     },
     hideDisabledDates: {
       true: {
-        cellButton: "data-[disabled=true]:opacity-0"
+        cellButton: "data-[disabled=true]:data-[outside-month=true]:opacity-0"
       },
       false: {}
     },
@@ -8110,8 +8128,7 @@ var calendar = tv({
     color: "primary",
     showShadow: false,
     hideDisabledDates: false,
-    showMonthAndYearPickers: false,
-    disableAnimation: false
+    showMonthAndYearPickers: false
   },
   compoundVariants: [
     {
@@ -8570,8 +8587,7 @@ var dateInput = tv({
     size: "md",
     fullWidth: true,
     labelPlacement: "inside",
-    isDisabled: false,
-    disableAnimation: false
+    isDisabled: false
   },
   compoundVariants: [
     {
@@ -9513,6 +9529,7 @@ var nextui = (config = {}) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  COMMON_UNITS,
   absoluteFullClasses,
   accordion,
   accordionItem,
@@ -9531,6 +9548,7 @@ var nextui = (config = {}) => {
   checkboxGroup,
   chip,
   circularProgress,
+  cn,
   code,
   collapseAdjacentVariantBorders,
   colorVariants,
@@ -9581,5 +9599,6 @@ var nextui = (config = {}) => {
   toggle,
   translateCenterClasses,
   tv,
+  twMergeConfig,
   user
 });