@nextui-org/theme 0.0.0-dev-v2-20230409144630 → 0.0.0-dev-v2-20230412004701

package/dist/animations/index.d.ts

@@ -8,6 +8,11 @@ declare const animations: {
         "indeterminate-bar": string;
     };
     keyframes: {
+        shimmer: {
+            "100%": {
+                transform: string;
+            };
+        };
         "spinner-spin": {
             "0%": {
                 transform: string;

package/dist/animations/index.js

@@ -33,6 +33,11 @@ var animations = {
     "indeterminate-bar": "indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running"
   },
   keyframes: {
+    shimmer: {
+      "100%": {
+        transform: "translateX(100%)"
+      }
+    },
     "spinner-spin": {
       "0%": {
         transform: "rotate(0deg)"

package/dist/animations/index.mjs

@@ -1,6 +1,6 @@
 import {
   animations
-} from "../chunk-7QLHM6OE.mjs";
+} from "../chunk-DMASP6FA.mjs";
 export {
   animations
 };

package/dist/{chunk-56MY6KYG.mjs → chunk-BFEDFLJV.mjs}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-37PIXVP4.mjs";
 import {
   animations
-} from "./chunk-7QLHM6OE.mjs";
+} from "./chunk-DMASP6FA.mjs";
 import {
   commonColors
 } from "./chunk-CRCBVLUP.mjs";

package/dist/{chunk-7QLHM6OE.mjs → chunk-DMASP6FA.mjs}

@@ -9,6 +9,11 @@ var animations = {
     "indeterminate-bar": "indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running"
   },
   keyframes: {
+    shimmer: {
+      "100%": {
+        transform: "translateX(100%)"
+      }
+    },
     "spinner-spin": {
       "0%": {
         transform: "rotate(0deg)"

package/dist/{chunk-BD2KW4ZD.mjs → chunk-IRJ5MMDL.mjs}

@@ -74,7 +74,7 @@ var button = tv({
     isInGroup: {
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
-    isIconButton: {
+    isIconOnly: {
       true: "p-0 gap-0"
     },
     disableAnimation: {
@@ -320,31 +320,31 @@ var button = tv({
     },
     {
       isInGroup: true,
-      variant: "bordered",
+      variant: ["bordered", "ghost"],
       class: "[&:not(:first-child)]:border-l-0"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xs",
       class: "w-6 h-6"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "sm",
       class: "w-8 h-8"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "md",
       class: "w-10 h-10"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "lg",
       class: "w-12 h-12"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xl",
       class: "w-14 h-14"
     }

package/dist/chunk-U7TTGVVC.mjs

@@ -0,0 +1,167 @@
+// src/components/image.ts
+import { tv } from "tailwind-variants";
+var image = tv({
+  slots: {
+    base: "relative shadow-black/25",
+    zoomedWrapper: "relative overflow-hidden rounded-inherit",
+    img: "opacity-0 shadow-black/25 data-[loaded=true]:opacity-100",
+    blurredImg: [
+      "absolute",
+      "-z-10",
+      "inset-0",
+      "w-full",
+      "h-full",
+      "object-cover",
+      "filter",
+      "blur-lg",
+      "scale-105",
+      "opacity-40",
+      "translate-y-1"
+    ]
+  },
+  variants: {
+    radius: {
+      none: {},
+      base: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+      "2xl": {},
+      "3xl": {},
+      full: {}
+    },
+    shadow: {
+      none: {
+        base: "shadow-none",
+        img: "shadow-none"
+      },
+      sm: {
+        base: "shadow-sm",
+        img: "shadow-sm"
+      },
+      base: {
+        base: "shadow",
+        img: "shadow"
+      },
+      md: {
+        base: "shadow-md",
+        img: "shadow-md"
+      },
+      lg: {
+        base: "shadow-lg",
+        img: "shadow-lg"
+      },
+      xl: {
+        base: "shadow-xl",
+        img: "shadow-xl"
+      },
+      "2xl": {
+        base: "shadow-2xl",
+        img: "shadow-2xl"
+      },
+      inner: {
+        base: "shadow-inner",
+        img: "shadow-inner"
+      }
+    },
+    isZoomed: {
+      true: {
+        img: ["object-cover", "transform", "hover:scale-125"]
+      }
+    },
+    showSkeleton: {
+      true: {
+        base: [
+          "space-y-5",
+          "overflow-hidden",
+          "bg-white/5",
+          "before:absolute",
+          "before:inset-0",
+          "before:-translate-x-full",
+          "before:animate-[shimmer_2s_infinite]",
+          "before:border-t",
+          "before:border-content4/70",
+          "before:bg-gradient-to-r",
+          "before:from-transparent",
+          "before:via-content4",
+          "dark:before:via-neutral-700/10",
+          "before:to-transparent",
+          "after:absolute",
+          "after:inset-0",
+          "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: "xl",
+    shadow: "none",
+    isZoomed: false,
+    isBlurred: false,
+    showSkeleton: false,
+    disableAnimation: false
+  },
+  compoundSlots: [
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "full",
+      class: "rounded-full"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "base",
+      class: "rounded"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "sm",
+      class: "rounded-sm"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "lg",
+      class: "rounded-lg"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "xl",
+      class: "rounded-xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "2xl",
+      class: "rounded-2xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "3xl",
+      class: "rounded-3xl"
+    }
+  ]
+});
+
+export {
+  image
+};

package/dist/components/button.d.ts

@@ -60,7 +60,7 @@ declare const button: tailwind_variants.TVReturnType<{
     isInGroup: {
         true: string;
     };
-    isIconButton: {
+    isIconOnly: {
         true: string;
     };
     disableAnimation: {
@@ -115,7 +115,7 @@ declare const button: tailwind_variants.TVReturnType<{
     isInGroup: {
         true: string;
     };
-    isIconButton: {
+    isIconOnly: {
         true: string;
     };
     disableAnimation: {

package/dist/components/button.js

@@ -177,7 +177,7 @@ var button = (0, import_tailwind_variants.tv)({
     isInGroup: {
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
-    isIconButton: {
+    isIconOnly: {
       true: "p-0 gap-0"
     },
     disableAnimation: {
@@ -423,31 +423,31 @@ var button = (0, import_tailwind_variants.tv)({
     },
     {
       isInGroup: true,
-      variant: "bordered",
+      variant: ["bordered", "ghost"],
       class: "[&:not(:first-child)]:border-l-0"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xs",
       class: "w-6 h-6"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "sm",
       class: "w-8 h-8"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "md",
       class: "w-10 h-10"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "lg",
       class: "w-12 h-12"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xl",
       class: "w-14 h-14"
     }

package/dist/components/button.mjs

@@ -1,6 +1,6 @@
 import {
   button
-} from "../chunk-BD2KW4ZD.mjs";
+} from "../chunk-IRJ5MMDL.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-LGGZKBOO.mjs";

package/dist/components/image.d.ts

@@ -0,0 +1,160 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
+
+/**
+ * Image wrapper **Tailwind Variants** component
+ *
+ * const {base, img, blurredImg, zoomedWrapper} = image({...})
+ *
+ * @example
+ * <div className={base()}>
+ *    <img alt="image" className={img())} src="https://..." />
+ *      // wrap the image if you want to zoom it
+ *      <div className={zoomedWrapper()}>
+ *       <img alt="image" className={img())} src="https://..." />
+ *     </div>
+ *    // duplicate it for the blur effect
+ *    <img alt="image" className={blurredImg())} src="https://..." />
+ * </div>
+ */
+declare const image: tailwind_variants.TVReturnType<{
+    radius: {
+        none: {};
+        base: {};
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        "2xl": {};
+        "3xl": {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            base: string;
+            img: string;
+        };
+        sm: {
+            base: string;
+            img: string;
+        };
+        base: {
+            base: string;
+            img: string;
+        };
+        md: {
+            base: string;
+            img: string;
+        };
+        lg: {
+            base: string;
+            img: string;
+        };
+        xl: {
+            base: string;
+            img: string;
+        };
+        "2xl": {
+            base: string;
+            img: string;
+        };
+        inner: {
+            base: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            base: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, unknown, {
+    base: string;
+    zoomedWrapper: string;
+    img: string;
+    blurredImg: string[];
+}, undefined, undefined, tailwind_variants_dist_config.TVConfig<{
+    radius: {
+        none: {};
+        base: {};
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        "2xl": {};
+        "3xl": {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            base: string;
+            img: string;
+        };
+        sm: {
+            base: string;
+            img: string;
+        };
+        base: {
+            base: string;
+            img: string;
+        };
+        md: {
+            base: string;
+            img: string;
+        };
+        lg: {
+            base: string;
+            img: string;
+        };
+        xl: {
+            base: string;
+            img: string;
+        };
+        "2xl": {
+            base: string;
+            img: string;
+        };
+        inner: {
+            base: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            base: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, unknown>>;
+type ImageVariantProps = VariantProps<typeof image>;
+type ImageSlots = keyof ReturnType<typeof image>;
+
+export { ImageSlots, ImageVariantProps, image };

package/dist/components/image.js

@@ -0,0 +1,191 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/image.ts
+var image_exports = {};
+__export(image_exports, {
+  image: () => image
+});
+module.exports = __toCommonJS(image_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var image = (0, import_tailwind_variants.tv)({
+  slots: {
+    base: "relative shadow-black/25",
+    zoomedWrapper: "relative overflow-hidden rounded-inherit",
+    img: "opacity-0 shadow-black/25 data-[loaded=true]:opacity-100",
+    blurredImg: [
+      "absolute",
+      "-z-10",
+      "inset-0",
+      "w-full",
+      "h-full",
+      "object-cover",
+      "filter",
+      "blur-lg",
+      "scale-105",
+      "opacity-40",
+      "translate-y-1"
+    ]
+  },
+  variants: {
+    radius: {
+      none: {},
+      base: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+      "2xl": {},
+      "3xl": {},
+      full: {}
+    },
+    shadow: {
+      none: {
+        base: "shadow-none",
+        img: "shadow-none"
+      },
+      sm: {
+        base: "shadow-sm",
+        img: "shadow-sm"
+      },
+      base: {
+        base: "shadow",
+        img: "shadow"
+      },
+      md: {
+        base: "shadow-md",
+        img: "shadow-md"
+      },
+      lg: {
+        base: "shadow-lg",
+        img: "shadow-lg"
+      },
+      xl: {
+        base: "shadow-xl",
+        img: "shadow-xl"
+      },
+      "2xl": {
+        base: "shadow-2xl",
+        img: "shadow-2xl"
+      },
+      inner: {
+        base: "shadow-inner",
+        img: "shadow-inner"
+      }
+    },
+    isZoomed: {
+      true: {
+        img: ["object-cover", "transform", "hover:scale-125"]
+      }
+    },
+    showSkeleton: {
+      true: {
+        base: [
+          "space-y-5",
+          "overflow-hidden",
+          "bg-white/5",
+          "before:absolute",
+          "before:inset-0",
+          "before:-translate-x-full",
+          "before:animate-[shimmer_2s_infinite]",
+          "before:border-t",
+          "before:border-content4/70",
+          "before:bg-gradient-to-r",
+          "before:from-transparent",
+          "before:via-content4",
+          "dark:before:via-neutral-700/10",
+          "before:to-transparent",
+          "after:absolute",
+          "after:inset-0",
+          "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: "xl",
+    shadow: "none",
+    isZoomed: false,
+    isBlurred: false,
+    showSkeleton: false,
+    disableAnimation: false
+  },
+  compoundSlots: [
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "full",
+      class: "rounded-full"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "base",
+      class: "rounded"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "sm",
+      class: "rounded-sm"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "lg",
+      class: "rounded-lg"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "xl",
+      class: "rounded-xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "2xl",
+      class: "rounded-2xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "3xl",
+      class: "rounded-3xl"
+    }
+  ]
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  image
+});

package/dist/components/image.mjs

@@ -0,0 +1,6 @@
+import {
+  image
+} from "../chunk-U7TTGVVC.mjs";
+export {
+  image
+};

package/dist/components/index.d.ts

@@ -27,5 +27,6 @@ export { dropdown } from './dropdown.js';
 export { DropdownItemSlots, DropdownItemVariantProps, dropdownItem } from './dropdown-item.js';
 export { DropdownSectionSlots, DropdownSectionVariantProps, dropdownSection } from './dropdown-section.js';
 export { dropdownMenu } from './dropdown-menu.js';
+export { ImageSlots, ImageVariantProps, image } from './image.js';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config';

package/dist/components/index.js

@@ -38,6 +38,7 @@ __export(components_exports, {
   dropdownItem: () => dropdownItem,
   dropdownMenu: () => dropdownMenu,
   dropdownSection: () => dropdownSection,
+  image: () => image,
   input: () => input,
   link: () => link,
   pagination: () => pagination,
@@ -703,7 +704,7 @@ var button = (0, import_tailwind_variants6.tv)({
     isInGroup: {
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
-    isIconButton: {
+    isIconOnly: {
       true: "p-0 gap-0"
     },
     disableAnimation: {
@@ -949,31 +950,31 @@ var button = (0, import_tailwind_variants6.tv)({
     },
     {
       isInGroup: true,
-      variant: "bordered",
+      variant: ["bordered", "ghost"],
       class: "[&:not(:first-child)]:border-l-0"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xs",
       class: "w-6 h-6"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "sm",
       class: "w-8 h-8"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "md",
       class: "w-10 h-10"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "lg",
       class: "w-12 h-12"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xl",
       class: "w-14 h-14"
     }
@@ -4897,6 +4898,170 @@ var import_tailwind_variants29 = require("tailwind-variants");
 var dropdownMenu = (0, import_tailwind_variants29.tv)({
   base: "w-full flex flex-col p-1"
 });
+
+// src/components/image.ts
+var import_tailwind_variants30 = require("tailwind-variants");
+var image = (0, import_tailwind_variants30.tv)({
+  slots: {
+    base: "relative shadow-black/25",
+    zoomedWrapper: "relative overflow-hidden rounded-inherit",
+    img: "opacity-0 shadow-black/25 data-[loaded=true]:opacity-100",
+    blurredImg: [
+      "absolute",
+      "-z-10",
+      "inset-0",
+      "w-full",
+      "h-full",
+      "object-cover",
+      "filter",
+      "blur-lg",
+      "scale-105",
+      "opacity-40",
+      "translate-y-1"
+    ]
+  },
+  variants: {
+    radius: {
+      none: {},
+      base: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+      "2xl": {},
+      "3xl": {},
+      full: {}
+    },
+    shadow: {
+      none: {
+        base: "shadow-none",
+        img: "shadow-none"
+      },
+      sm: {
+        base: "shadow-sm",
+        img: "shadow-sm"
+      },
+      base: {
+        base: "shadow",
+        img: "shadow"
+      },
+      md: {
+        base: "shadow-md",
+        img: "shadow-md"
+      },
+      lg: {
+        base: "shadow-lg",
+        img: "shadow-lg"
+      },
+      xl: {
+        base: "shadow-xl",
+        img: "shadow-xl"
+      },
+      "2xl": {
+        base: "shadow-2xl",
+        img: "shadow-2xl"
+      },
+      inner: {
+        base: "shadow-inner",
+        img: "shadow-inner"
+      }
+    },
+    isZoomed: {
+      true: {
+        img: ["object-cover", "transform", "hover:scale-125"]
+      }
+    },
+    showSkeleton: {
+      true: {
+        base: [
+          "space-y-5",
+          "overflow-hidden",
+          "bg-white/5",
+          "before:absolute",
+          "before:inset-0",
+          "before:-translate-x-full",
+          "before:animate-[shimmer_2s_infinite]",
+          "before:border-t",
+          "before:border-content4/70",
+          "before:bg-gradient-to-r",
+          "before:from-transparent",
+          "before:via-content4",
+          "dark:before:via-neutral-700/10",
+          "before:to-transparent",
+          "after:absolute",
+          "after:inset-0",
+          "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: "xl",
+    shadow: "none",
+    isZoomed: false,
+    isBlurred: false,
+    showSkeleton: false,
+    disableAnimation: false
+  },
+  compoundSlots: [
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "full",
+      class: "rounded-full"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "base",
+      class: "rounded"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "sm",
+      class: "rounded-sm"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "lg",
+      class: "rounded-lg"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "xl",
+      class: "rounded-xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "2xl",
+      class: "rounded-2xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "3xl",
+      class: "rounded-3xl"
+    }
+  ]
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   accordion,
@@ -4917,6 +5082,7 @@ var dropdownMenu = (0, import_tailwind_variants29.tv)({
   dropdownItem,
   dropdownMenu,
   dropdownSection,
+  image,
   input,
   link,
   pagination,

package/dist/components/index.mjs

@@ -1,4 +1,7 @@
-import "../chunk-EERASTP4.mjs";
+import "../chunk-PRWEADY4.mjs";
+import {
+  snippet
+} from "../chunk-QMP2FDFR.mjs";
 import {
   spinner
 } from "../chunk-CO6ANWRA.mjs";
@@ -29,9 +32,6 @@ import {
 import {
   radio
 } from "../chunk-Y37XC5QN.mjs";
-import {
-  snippet
-} from "../chunk-QMP2FDFR.mjs";
 import {
   circularProgress
 } from "../chunk-FK5GDC67.mjs";
@@ -53,6 +53,9 @@ import {
 import {
   dropdown
 } from "../chunk-UNMHV7HH.mjs";
+import {
+  image
+} from "../chunk-U7TTGVVC.mjs";
 import {
   avatar
 } from "../chunk-D4TJV7NY.mjs";
@@ -64,7 +67,7 @@ import {
 } from "../chunk-VKFQ7EZN.mjs";
 import {
   button
-} from "../chunk-BD2KW4ZD.mjs";
+} from "../chunk-IRJ5MMDL.mjs";
 import {
   card
 } from "../chunk-HESJI33K.mjs";
@@ -109,6 +112,7 @@ export {
   dropdownItem,
   dropdownMenu,
   dropdownSection,
+  image,
   input,
   link,
   pagination,

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { dropdown } from './components/dropdown.js';
 export { DropdownItemSlots, DropdownItemVariantProps, dropdownItem } from './components/dropdown-item.js';
 export { DropdownSectionSlots, DropdownSectionVariantProps, dropdownSection } from './components/dropdown-section.js';
 export { dropdownMenu } from './components/dropdown-menu.js';
+export { ImageSlots, ImageVariantProps, image } from './components/image.js';
 export { absoluteFullClasses, baseStyles, focusVisibleClasses, ringClasses, translateCenterClasses } from './utils/styles.js';
 export { SlotsToClasses } from './utils/types.js';
 export { colorVariants } from './utils/variants.js';

package/dist/index.js

@@ -51,6 +51,7 @@ __export(src_exports, {
   dropdownMenu: () => dropdownMenu,
   dropdownSection: () => dropdownSection,
   focusVisibleClasses: () => focusVisibleClasses,
+  image: () => image,
   input: () => input,
   link: () => link,
   nextui: () => nextui,
@@ -65,7 +66,7 @@ __export(src_exports, {
   spinner: () => spinner,
   toggle: () => toggle,
   translateCenterClasses: () => translateCenterClasses,
-  tv: () => import_tailwind_variants31.tv,
+  tv: () => import_tailwind_variants32.tv,
   user: () => user
 });
 module.exports = __toCommonJS(src_exports);
@@ -726,7 +727,7 @@ var button = (0, import_tailwind_variants6.tv)({
     isInGroup: {
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
-    isIconButton: {
+    isIconOnly: {
       true: "p-0 gap-0"
     },
     disableAnimation: {
@@ -972,31 +973,31 @@ var button = (0, import_tailwind_variants6.tv)({
     },
     {
       isInGroup: true,
-      variant: "bordered",
+      variant: ["bordered", "ghost"],
       class: "[&:not(:first-child)]:border-l-0"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xs",
       class: "w-6 h-6"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "sm",
       class: "w-8 h-8"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "md",
       class: "w-10 h-10"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "lg",
       class: "w-12 h-12"
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xl",
       class: "w-14 h-14"
     }
@@ -4921,6 +4922,170 @@ var dropdownMenu = (0, import_tailwind_variants29.tv)({
   base: "w-full flex flex-col p-1"
 });
 
+// src/components/image.ts
+var import_tailwind_variants30 = require("tailwind-variants");
+var image = (0, import_tailwind_variants30.tv)({
+  slots: {
+    base: "relative shadow-black/25",
+    zoomedWrapper: "relative overflow-hidden rounded-inherit",
+    img: "opacity-0 shadow-black/25 data-[loaded=true]:opacity-100",
+    blurredImg: [
+      "absolute",
+      "-z-10",
+      "inset-0",
+      "w-full",
+      "h-full",
+      "object-cover",
+      "filter",
+      "blur-lg",
+      "scale-105",
+      "opacity-40",
+      "translate-y-1"
+    ]
+  },
+  variants: {
+    radius: {
+      none: {},
+      base: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+      "2xl": {},
+      "3xl": {},
+      full: {}
+    },
+    shadow: {
+      none: {
+        base: "shadow-none",
+        img: "shadow-none"
+      },
+      sm: {
+        base: "shadow-sm",
+        img: "shadow-sm"
+      },
+      base: {
+        base: "shadow",
+        img: "shadow"
+      },
+      md: {
+        base: "shadow-md",
+        img: "shadow-md"
+      },
+      lg: {
+        base: "shadow-lg",
+        img: "shadow-lg"
+      },
+      xl: {
+        base: "shadow-xl",
+        img: "shadow-xl"
+      },
+      "2xl": {
+        base: "shadow-2xl",
+        img: "shadow-2xl"
+      },
+      inner: {
+        base: "shadow-inner",
+        img: "shadow-inner"
+      }
+    },
+    isZoomed: {
+      true: {
+        img: ["object-cover", "transform", "hover:scale-125"]
+      }
+    },
+    showSkeleton: {
+      true: {
+        base: [
+          "space-y-5",
+          "overflow-hidden",
+          "bg-white/5",
+          "before:absolute",
+          "before:inset-0",
+          "before:-translate-x-full",
+          "before:animate-[shimmer_2s_infinite]",
+          "before:border-t",
+          "before:border-content4/70",
+          "before:bg-gradient-to-r",
+          "before:from-transparent",
+          "before:via-content4",
+          "dark:before:via-neutral-700/10",
+          "before:to-transparent",
+          "after:absolute",
+          "after:inset-0",
+          "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: "xl",
+    shadow: "none",
+    isZoomed: false,
+    isBlurred: false,
+    showSkeleton: false,
+    disableAnimation: false
+  },
+  compoundSlots: [
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "full",
+      class: "rounded-full"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "base",
+      class: "rounded"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "sm",
+      class: "rounded-sm"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "lg",
+      class: "rounded-lg"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "xl",
+      class: "rounded-xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "2xl",
+      class: "rounded-2xl"
+    },
+    {
+      slots: ["base", "img", "blurredImg", "zoomedWrapper"],
+      radius: "3xl",
+      class: "rounded-3xl"
+    }
+  ]
+});
+
 // src/colors/blue.ts
 var blue = {
   50: "#e6f1fe",
@@ -5218,6 +5383,11 @@ var animations = {
     "indeterminate-bar": "indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running"
   },
   keyframes: {
+    shimmer: {
+      "100%": {
+        transform: "translateX(100%)"
+      }
+    },
     "spinner-spin": {
       "0%": {
         transform: "rotate(0deg)"
@@ -5472,9 +5642,9 @@ var nextui = (config = {}) => {
 };
 
 // src/index.ts
-var import_tailwind_variants30 = require("tailwind-variants");
 var import_tailwind_variants31 = require("tailwind-variants");
-var cn = (...classes) => (0, import_tailwind_variants30.cn)(classes)();
+var import_tailwind_variants32 = require("tailwind-variants");
+var cn = (...classes) => (0, import_tailwind_variants31.cn)(classes)();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   absoluteFullClasses,
@@ -5502,6 +5672,7 @@ var cn = (...classes) => (0, import_tailwind_variants30.cn)(classes)();
   dropdownMenu,
   dropdownSection,
   focusVisibleClasses,
+  image,
   input,
   link,
   nextui,

package/dist/index.mjs

@@ -1,4 +1,7 @@
-import "./chunk-EERASTP4.mjs";
+import "./chunk-PRWEADY4.mjs";
+import {
+  snippet
+} from "./chunk-QMP2FDFR.mjs";
 import {
   spinner
 } from "./chunk-CO6ANWRA.mjs";
@@ -29,9 +32,6 @@ import {
 import {
   radio
 } from "./chunk-Y37XC5QN.mjs";
-import {
-  snippet
-} from "./chunk-QMP2FDFR.mjs";
 import {
   circularProgress
 } from "./chunk-FK5GDC67.mjs";
@@ -53,6 +53,9 @@ import {
 import {
   dropdown
 } from "./chunk-UNMHV7HH.mjs";
+import {
+  image
+} from "./chunk-U7TTGVVC.mjs";
 import {
   avatar
 } from "./chunk-D4TJV7NY.mjs";
@@ -64,7 +67,7 @@ import {
 } from "./chunk-VKFQ7EZN.mjs";
 import {
   button
-} from "./chunk-BD2KW4ZD.mjs";
+} from "./chunk-IRJ5MMDL.mjs";
 import {
   card
 } from "./chunk-HESJI33K.mjs";
@@ -93,7 +96,7 @@ import {
 } from "./chunk-MLH3XSY7.mjs";
 import {
   nextui
-} from "./chunk-56MY6KYG.mjs";
+} from "./chunk-BFEDFLJV.mjs";
 import {
   absoluteFullClasses,
   baseStyles,
@@ -111,7 +114,7 @@ import {
 } from "./chunk-Y52EXP4A.mjs";
 import "./chunk-37PIXVP4.mjs";
 import "./chunk-M63AFAHO.mjs";
-import "./chunk-7QLHM6OE.mjs";
+import "./chunk-DMASP6FA.mjs";
 import {
   commonColors
 } from "./chunk-CRCBVLUP.mjs";
@@ -153,6 +156,7 @@ export {
   dropdownMenu,
   dropdownSection,
   focusVisibleClasses,
+  image,
   input,
   link,
   nextui,

package/dist/plugin.js

@@ -325,6 +325,11 @@ var animations = {
     "indeterminate-bar": "indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running"
   },
   keyframes: {
+    shimmer: {
+      "100%": {
+        transform: "translateX(100%)"
+      }
+    },
     "spinner-spin": {
       "0%": {
         transform: "rotate(0deg)"

package/dist/plugin.mjs

@@ -1,6 +1,6 @@
 import {
   nextui
-} from "./chunk-56MY6KYG.mjs";
+} from "./chunk-BFEDFLJV.mjs";
 import "./chunk-IJCHUO4J.mjs";
 import "./chunk-XLATS5QU.mjs";
 import "./chunk-WQEDQHKX.mjs";
@@ -8,7 +8,7 @@ import "./chunk-7MQD7UA2.mjs";
 import "./chunk-Y52EXP4A.mjs";
 import "./chunk-37PIXVP4.mjs";
 import "./chunk-M63AFAHO.mjs";
-import "./chunk-7QLHM6OE.mjs";
+import "./chunk-DMASP6FA.mjs";
 import "./chunk-CRCBVLUP.mjs";
 import "./chunk-DCEG5LGX.mjs";
 import "./chunk-L2OL7R23.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230409144630",
+  "version": "0.0.0-dev-v2-20230412004701",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",