@nextui-org/theme 0.0.0-dev-v2-20230409142211 → 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-BMY6CGCY.mjs → chunk-BFEDFLJV.mjs}

@@ -1,9 +1,9 @@
-import {
-  utilities
-} from "./chunk-XLATS5QU.mjs";
 import {
   baseStyles
 } from "./chunk-IJCHUO4J.mjs";
+import {
+  utilities
+} from "./chunk-XLATS5QU.mjs";
 import {
   semanticColors
 } from "./chunk-Y52EXP4A.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
+});