@nextui-org/theme 0.0.0-dev-v2-20230429213333 → 0.0.0-dev-v2-20230505232443

package/dist/{chunk-PH4OFVEH.mjs → chunk-7EDXWCUZ.mjs}

@@ -6,7 +6,7 @@ var input = tv({
     label: "block text-sm font-medium text-neutral-600",
     inputWrapper: "relative w-full inline-flex 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 bg-transparent outline-none placeholder:text-neutral-500",
+    input: "w-full h-full !bg-transparent outline-none placeholder:text-neutral-500",
     clearButton: [
       "z-10",
       "hidden",

package/dist/chunk-G23VRPTF.mjs

@@ -0,0 +1,53 @@
+// src/components/skeleton.ts
+import { tv } from "tailwind-variants";
+var skeleton = tv({
+  slots: {
+    base: [
+      "group",
+      "relative",
+      "space-y-5",
+      "overflow-hidden",
+      "bg-white/5",
+      "before:opacity-100",
+      "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:opacity-100",
+      "after:absolute",
+      "after:inset-0",
+      "after:-z-10",
+      "after:bg-content3",
+      "dark:after:bg-content2",
+      "data-[loaded=true]:before:opacity-0",
+      "data-[loaded=true]:after:opacity-0"
+    ],
+    content: ["opacity-0", "group-data-[loaded=true]:opacity-100"]
+  },
+  variants: {
+    disableAnimation: {
+      true: {
+        base: "before:transition-none",
+        content: "transition-none"
+      },
+      false: {
+        base: "before:transition-opacity before:!duration-300",
+        content: "transition-opacity motion-reduce:transition-none !duration-300"
+      }
+    }
+  },
+  defaultVariants: {
+    disableAnimation: false
+  }
+});
+
+export {
+  skeleton
+};

package/dist/{chunk-4XSCIGTZ.mjs → chunk-X577FDRG.mjs}

@@ -6,16 +6,14 @@ import {
 import { tv } from "tailwind-variants";
 var snippet = tv({
   slots: {
-    base: "inline-flex items-center justify-between space-x-3 rounded-md",
+    base: "inline-flex items-center justify-between rounded-md",
     pre: "bg-transparent text-inherit font-mono whitespace-pre-wrap",
-    copy: [
-      "z-10 appearance-none outline-none rounded-sm",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-1",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-transparent",
-      "data-[focus-visible=true]:dark:ring-offset-transparent"
+    copyButton: ["group", "relative", "z-10", "text-inherit", "data-[hover=true]:bg-transparent"],
+    copyIcon: [
+      "absolute text-inherit opacity-100 scale-100 group-data-[copied=true]:opacity-0 group-data-[copied=true]:scale-50"
+    ],
+    checkIcon: [
+      "absolute text-inherit opacity-0 scale-50 group-data-[copied=true]:opacity-100 group-data-[copied=true]:scale-100"
     ]
   },
   variants: {
@@ -89,6 +87,13 @@ var snippet = tv({
       true: {
         base: "w-full"
       }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        copyIcon: "transition-transform-opacity",
+        checkIcon: "transition-transform-opacity"
+      }
     }
   },
   defaultVariants: {
@@ -96,7 +101,8 @@ var snippet = tv({
     variant: "flat",
     size: "md",
     radius: "lg",
-    fullWidth: false
+    fullWidth: false,
+    disableAnimation: false
   },
   compoundVariants: [
     {

package/dist/{chunk-UM54LZPC.mjs → chunk-YMKJFSPB.mjs}

@@ -21,7 +21,6 @@ var button = tv({
     "data-[pressed=true]:scale-95",
     "overflow-hidden",
     "gap-1.5",
-    "[&>svg]:max-w-[2em]",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
     "data-[focus-visible=true]:ring-primary",
@@ -32,12 +31,12 @@ var button = tv({
   variants: {
     variant: {
       solid: "",
-      bordered: "border-2 !bg-transparent",
-      light: "!bg-transparent",
+      bordered: "border-2 bg-transparent",
+      light: "bg-transparent",
       flat: "",
       faded: "border-2",
       shadow: "",
-      ghost: "border-2 !bg-transparent"
+      ghost: "border-2 bg-transparent"
     },
     size: {
       xs: "px-2 h-6 text-xs",
@@ -47,12 +46,12 @@ var button = tv({
       xl: "px-8 h-14 text-lg"
     },
     color: {
-      neutral: colorVariants.solid.neutral,
-      primary: colorVariants.solid.primary,
-      secondary: colorVariants.solid.secondary,
-      success: colorVariants.solid.success,
-      warning: colorVariants.solid.warning,
-      danger: colorVariants.solid.danger
+      neutral: "",
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      danger: ""
     },
     radius: {
       none: "rounded-none",
@@ -75,7 +74,8 @@ var button = tv({
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
     isIconOnly: {
-      true: "p-0 gap-0"
+      true: "p-0 gap-0",
+      false: "[&>svg]:max-w-[2em]"
     },
     disableAnimation: {
       true: "!transition-none",
@@ -93,6 +93,36 @@ var button = tv({
     disableAnimation: false
   },
   compoundVariants: [
+    {
+      variant: "solid",
+      color: "neutral",
+      class: colorVariants.solid.neutral
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: colorVariants.solid.danger
+    },
     {
       variant: "shadow",
       color: "neutral",
@@ -216,32 +246,32 @@ var button = tv({
     {
       variant: "light",
       color: "neutral",
-      class: [colorVariants.light.neutral, "hover:!bg-neutral-100"]
+      class: [colorVariants.light.neutral, "data-[hover=true]:bg-neutral-100"]
     },
     {
       variant: "light",
       color: "primary",
-      class: [colorVariants.light.primary, "hover:!bg-primary-50"]
+      class: [colorVariants.light.primary, "data-[hover=true]:bg-primary-50"]
     },
     {
       variant: "light",
       color: "secondary",
-      class: [colorVariants.light.secondary, "hover:!bg-secondary-100"]
+      class: [colorVariants.light.secondary, "data-[hover=true]:bg-secondary-100"]
     },
     {
       variant: "light",
       color: "success",
-      class: [colorVariants.light.success, "hover:!bg-success-50"]
+      class: [colorVariants.light.success, "data-[hover=true]:bg-success-50"]
     },
     {
       variant: "light",
       color: "warning",
-      class: [colorVariants.light.warning, "hover:!bg-warning-50"]
+      class: [colorVariants.light.warning, "data-[hover=true]:bg-warning-50"]
     },
     {
       variant: "light",
       color: "danger",
-      class: [colorVariants.light.danger, "hover:!bg-danger-50"]
+      class: [colorVariants.light.danger, "data-[hover=true]:bg-danger-50"]
     },
     {
       variant: "ghost",

package/dist/components/button.d.ts

@@ -65,6 +65,7 @@ declare const button: tailwind_variants.TVReturnType<{
     };
     isIconOnly: {
         true: string;
+        false: string;
     };
     disableAnimation: {
         true: string;
@@ -117,6 +118,7 @@ declare const button: tailwind_variants.TVReturnType<{
     };
     isIconOnly: {
         true: string;
+        false: string;
     };
     disableAnimation: {
         true: string;

package/dist/components/button.js

@@ -117,7 +117,6 @@ var button = (0, import_tailwind_variants.tv)({
     "data-[pressed=true]:scale-95",
     "overflow-hidden",
     "gap-1.5",
-    "[&>svg]:max-w-[2em]",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
     "data-[focus-visible=true]:ring-primary",
@@ -128,12 +127,12 @@ var button = (0, import_tailwind_variants.tv)({
   variants: {
     variant: {
       solid: "",
-      bordered: "border-2 !bg-transparent",
-      light: "!bg-transparent",
+      bordered: "border-2 bg-transparent",
+      light: "bg-transparent",
       flat: "",
       faded: "border-2",
       shadow: "",
-      ghost: "border-2 !bg-transparent"
+      ghost: "border-2 bg-transparent"
     },
     size: {
       xs: "px-2 h-6 text-xs",
@@ -143,12 +142,12 @@ var button = (0, import_tailwind_variants.tv)({
       xl: "px-8 h-14 text-lg"
     },
     color: {
-      neutral: colorVariants.solid.neutral,
-      primary: colorVariants.solid.primary,
-      secondary: colorVariants.solid.secondary,
-      success: colorVariants.solid.success,
-      warning: colorVariants.solid.warning,
-      danger: colorVariants.solid.danger
+      neutral: "",
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      danger: ""
     },
     radius: {
       none: "rounded-none",
@@ -171,7 +170,8 @@ var button = (0, import_tailwind_variants.tv)({
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
     isIconOnly: {
-      true: "p-0 gap-0"
+      true: "p-0 gap-0",
+      false: "[&>svg]:max-w-[2em]"
     },
     disableAnimation: {
       true: "!transition-none",
@@ -189,6 +189,36 @@ var button = (0, import_tailwind_variants.tv)({
     disableAnimation: false
   },
   compoundVariants: [
+    {
+      variant: "solid",
+      color: "neutral",
+      class: colorVariants.solid.neutral
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: colorVariants.solid.danger
+    },
     {
       variant: "shadow",
       color: "neutral",
@@ -312,32 +342,32 @@ var button = (0, import_tailwind_variants.tv)({
     {
       variant: "light",
       color: "neutral",
-      class: [colorVariants.light.neutral, "hover:!bg-neutral-100"]
+      class: [colorVariants.light.neutral, "data-[hover=true]:bg-neutral-100"]
     },
     {
       variant: "light",
       color: "primary",
-      class: [colorVariants.light.primary, "hover:!bg-primary-50"]
+      class: [colorVariants.light.primary, "data-[hover=true]:bg-primary-50"]
     },
     {
       variant: "light",
       color: "secondary",
-      class: [colorVariants.light.secondary, "hover:!bg-secondary-100"]
+      class: [colorVariants.light.secondary, "data-[hover=true]:bg-secondary-100"]
     },
     {
       variant: "light",
       color: "success",
-      class: [colorVariants.light.success, "hover:!bg-success-50"]
+      class: [colorVariants.light.success, "data-[hover=true]:bg-success-50"]
     },
     {
       variant: "light",
       color: "warning",
-      class: [colorVariants.light.warning, "hover:!bg-warning-50"]
+      class: [colorVariants.light.warning, "data-[hover=true]:bg-warning-50"]
     },
     {
       variant: "light",
       color: "danger",
-      class: [colorVariants.light.danger, "hover:!bg-danger-50"]
+      class: [colorVariants.light.danger, "data-[hover=true]:bg-danger-50"]
     },
     {
       variant: "ghost",

package/dist/components/button.mjs

@@ -1,6 +1,6 @@
 import {
   button
-} from "../chunk-UM54LZPC.mjs";
+} from "../chunk-YMKJFSPB.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-RO3WUCFF.mjs";

package/dist/components/index.d.ts

@@ -35,5 +35,6 @@ export { SpacerVariantProps, spacer } from './spacer.js';
 export { DividerVariantProps, divider } from './divider.js';
 export { KbdSlots, KbdVariantProps, kbd } from './kbd.js';
 export { TabsReturnType, TabsSlots, TabsVariantProps, tabs } from './tabs.js';
+export { SkeletonSlots, SkeletonVariantProps, skeleton } from './skeleton.js';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config';

package/dist/components/index.js

@@ -50,6 +50,7 @@ __export(components_exports, {
   progress: () => progress,
   radio: () => radio,
   radioGroup: () => radioGroup,
+  skeleton: () => skeleton,
   snippet: () => snippet,
   spacer: () => spacer,
   spinner: () => spinner,
@@ -704,7 +705,6 @@ var button = (0, import_tailwind_variants6.tv)({
     "data-[pressed=true]:scale-95",
     "overflow-hidden",
     "gap-1.5",
-    "[&>svg]:max-w-[2em]",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
     "data-[focus-visible=true]:ring-primary",
@@ -715,12 +715,12 @@ var button = (0, import_tailwind_variants6.tv)({
   variants: {
     variant: {
       solid: "",
-      bordered: "border-2 !bg-transparent",
-      light: "!bg-transparent",
+      bordered: "border-2 bg-transparent",
+      light: "bg-transparent",
       flat: "",
       faded: "border-2",
       shadow: "",
-      ghost: "border-2 !bg-transparent"
+      ghost: "border-2 bg-transparent"
     },
     size: {
       xs: "px-2 h-6 text-xs",
@@ -730,12 +730,12 @@ var button = (0, import_tailwind_variants6.tv)({
       xl: "px-8 h-14 text-lg"
     },
     color: {
-      neutral: colorVariants.solid.neutral,
-      primary: colorVariants.solid.primary,
-      secondary: colorVariants.solid.secondary,
-      success: colorVariants.solid.success,
-      warning: colorVariants.solid.warning,
-      danger: colorVariants.solid.danger
+      neutral: "",
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      danger: ""
     },
     radius: {
       none: "rounded-none",
@@ -758,7 +758,8 @@ var button = (0, import_tailwind_variants6.tv)({
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
     isIconOnly: {
-      true: "p-0 gap-0"
+      true: "p-0 gap-0",
+      false: "[&>svg]:max-w-[2em]"
     },
     disableAnimation: {
       true: "!transition-none",
@@ -776,6 +777,36 @@ var button = (0, import_tailwind_variants6.tv)({
     disableAnimation: false
   },
   compoundVariants: [
+    {
+      variant: "solid",
+      color: "neutral",
+      class: colorVariants.solid.neutral
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: colorVariants.solid.danger
+    },
     {
       variant: "shadow",
       color: "neutral",
@@ -899,32 +930,32 @@ var button = (0, import_tailwind_variants6.tv)({
     {
       variant: "light",
       color: "neutral",
-      class: [colorVariants.light.neutral, "hover:!bg-neutral-100"]
+      class: [colorVariants.light.neutral, "data-[hover=true]:bg-neutral-100"]
     },
     {
       variant: "light",
       color: "primary",
-      class: [colorVariants.light.primary, "hover:!bg-primary-50"]
+      class: [colorVariants.light.primary, "data-[hover=true]:bg-primary-50"]
     },
     {
       variant: "light",
       color: "secondary",
-      class: [colorVariants.light.secondary, "hover:!bg-secondary-100"]
+      class: [colorVariants.light.secondary, "data-[hover=true]:bg-secondary-100"]
     },
     {
       variant: "light",
       color: "success",
-      class: [colorVariants.light.success, "hover:!bg-success-50"]
+      class: [colorVariants.light.success, "data-[hover=true]:bg-success-50"]
     },
     {
       variant: "light",
       color: "warning",
-      class: [colorVariants.light.warning, "hover:!bg-warning-50"]
+      class: [colorVariants.light.warning, "data-[hover=true]:bg-warning-50"]
     },
     {
       variant: "light",
       color: "danger",
-      class: [colorVariants.light.danger, "hover:!bg-danger-50"]
+      class: [colorVariants.light.danger, "data-[hover=true]:bg-danger-50"]
     },
     {
       variant: "ghost",
@@ -1522,16 +1553,14 @@ var popover = (0, import_tailwind_variants11.tv)({
 var import_tailwind_variants12 = require("tailwind-variants");
 var snippet = (0, import_tailwind_variants12.tv)({
   slots: {
-    base: "inline-flex items-center justify-between space-x-3 rounded-md",
+    base: "inline-flex items-center justify-between rounded-md",
     pre: "bg-transparent text-inherit font-mono whitespace-pre-wrap",
-    copy: [
-      "z-10 appearance-none outline-none rounded-sm",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-1",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-transparent",
-      "data-[focus-visible=true]:dark:ring-offset-transparent"
+    copyButton: ["group", "relative", "z-10", "text-inherit", "data-[hover=true]:bg-transparent"],
+    copyIcon: [
+      "absolute text-inherit opacity-100 scale-100 group-data-[copied=true]:opacity-0 group-data-[copied=true]:scale-50"
+    ],
+    checkIcon: [
+      "absolute text-inherit opacity-0 scale-50 group-data-[copied=true]:opacity-100 group-data-[copied=true]:scale-100"
     ]
   },
   variants: {
@@ -1605,6 +1634,13 @@ var snippet = (0, import_tailwind_variants12.tv)({
       true: {
         base: "w-full"
       }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        copyIcon: "transition-transform-opacity",
+        checkIcon: "transition-transform-opacity"
+      }
     }
   },
   defaultVariants: {
@@ -1612,7 +1648,8 @@ var snippet = (0, import_tailwind_variants12.tv)({
     variant: "flat",
     size: "md",
     radius: "lg",
-    fullWidth: false
+    fullWidth: false,
+    disableAnimation: false
   },
   compoundVariants: [
     {
@@ -3807,7 +3844,7 @@ var input = (0, import_tailwind_variants25.tv)({
     label: "block text-sm font-medium text-neutral-600",
     inputWrapper: "relative w-full inline-flex 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 bg-transparent outline-none placeholder:text-neutral-500",
+    input: "w-full h-full !bg-transparent outline-none placeholder:text-neutral-500",
     clearButton: [
       "z-10",
       "hidden",
@@ -6161,6 +6198,56 @@ var tabs = (0, import_tailwind_variants37.tv)({
     }
   ]
 });
+
+// src/components/skeleton.ts
+var import_tailwind_variants38 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants38.tv)({
+  slots: {
+    base: [
+      "group",
+      "relative",
+      "space-y-5",
+      "overflow-hidden",
+      "bg-white/5",
+      "before:opacity-100",
+      "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:opacity-100",
+      "after:absolute",
+      "after:inset-0",
+      "after:-z-10",
+      "after:bg-content3",
+      "dark:after:bg-content2",
+      "data-[loaded=true]:before:opacity-0",
+      "data-[loaded=true]:after:opacity-0"
+    ],
+    content: ["opacity-0", "group-data-[loaded=true]:opacity-100"]
+  },
+  variants: {
+    disableAnimation: {
+      true: {
+        base: "before:transition-none",
+        content: "transition-none"
+      },
+      false: {
+        base: "before:transition-opacity before:!duration-300",
+        content: "transition-opacity motion-reduce:transition-none !duration-300"
+      }
+    }
+  },
+  defaultVariants: {
+    disableAnimation: false
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   accordion,
@@ -6193,6 +6280,7 @@ var tabs = (0, import_tailwind_variants37.tv)({
   progress,
   radio,
   radioGroup,
+  skeleton,
   snippet,
   spacer,
   spinner,

package/dist/components/index.mjs

@@ -1,4 +1,7 @@
-import "../chunk-T6HAGWX5.mjs";
+import "../chunk-MVXKHHAX.mjs";
+import {
+  table
+} from "../chunk-KWWWVBJL.mjs";
 import {
   tabs
 } from "../chunk-UUJTS7XS.mjs";
@@ -20,24 +23,24 @@ import {
 import {
   radio
 } from "../chunk-OZPCO5UB.mjs";
+import {
+  skeleton
+} from "../chunk-G23VRPTF.mjs";
 import {
   snippet
-} from "../chunk-4XSCIGTZ.mjs";
+} from "../chunk-X577FDRG.mjs";
 import {
   spacer
 } from "../chunk-3B4SYPW2.mjs";
 import {
   spinner
 } from "../chunk-XUL76UJD.mjs";
-import {
-  table
-} from "../chunk-KWWWVBJL.mjs";
 import {
   image
 } from "../chunk-6GGRJ6I7.mjs";
 import {
   input
-} from "../chunk-PH4OFVEH.mjs";
+} from "../chunk-7EDXWCUZ.mjs";
 import {
   kbd
 } from "../chunk-KUQBSI5S.mjs";
@@ -88,7 +91,7 @@ import {
 } from "../chunk-VKFQ7EZN.mjs";
 import {
   button
-} from "../chunk-UM54LZPC.mjs";
+} from "../chunk-YMKJFSPB.mjs";
 import {
   card
 } from "../chunk-6QKRZ3JE.mjs";
@@ -145,6 +148,7 @@ export {
   progress,
   radio,
   radioGroup,
+  skeleton,
   snippet,
   spacer,
   spinner,

package/dist/components/input.js

@@ -30,7 +30,7 @@ var input = (0, import_tailwind_variants.tv)({
     label: "block text-sm font-medium text-neutral-600",
     inputWrapper: "relative w-full inline-flex 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 bg-transparent outline-none placeholder:text-neutral-500",
+    input: "w-full h-full !bg-transparent outline-none placeholder:text-neutral-500",
     clearButton: [
       "z-10",
       "hidden",

package/dist/components/input.mjs

@@ -1,6 +1,6 @@
 import {
   input
-} from "../chunk-PH4OFVEH.mjs";
+} from "../chunk-7EDXWCUZ.mjs";
 export {
   input
 };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,44 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
+
+/**
+ * Skeleton wrapper **Tailwind Variants** component
+ *
+ * const styles = skeleton({...})
+ *
+ * @example
+ * <div className={styles()}>
+ *   // skeleton content
+ * </div>
+ */
+declare const skeleton: tailwind_variants.TVReturnType<{
+    disableAnimation: {
+        true: {
+            base: string;
+            content: string;
+        };
+        false: {
+            base: string;
+            content: string;
+        };
+    };
+}, unknown, {
+    base: string[];
+    content: string[];
+}, undefined, undefined, tailwind_variants_dist_config.TVConfig<{
+    disableAnimation: {
+        true: {
+            base: string;
+            content: string;
+        };
+        false: {
+            base: string;
+            content: string;
+        };
+    };
+}, unknown>>;
+type SkeletonVariantProps = VariantProps<typeof skeleton>;
+type SkeletonSlots = keyof ReturnType<typeof skeleton>;
+
+export { SkeletonSlots, SkeletonVariantProps, skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,77 @@
+"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/skeleton.ts
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  skeleton: () => skeleton
+});
+module.exports = __toCommonJS(skeleton_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants.tv)({
+  slots: {
+    base: [
+      "group",
+      "relative",
+      "space-y-5",
+      "overflow-hidden",
+      "bg-white/5",
+      "before:opacity-100",
+      "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:opacity-100",
+      "after:absolute",
+      "after:inset-0",
+      "after:-z-10",
+      "after:bg-content3",
+      "dark:after:bg-content2",
+      "data-[loaded=true]:before:opacity-0",
+      "data-[loaded=true]:after:opacity-0"
+    ],
+    content: ["opacity-0", "group-data-[loaded=true]:opacity-100"]
+  },
+  variants: {
+    disableAnimation: {
+      true: {
+        base: "before:transition-none",
+        content: "transition-none"
+      },
+      false: {
+        base: "before:transition-opacity before:!duration-300",
+        content: "transition-opacity motion-reduce:transition-none !duration-300"
+      }
+    }
+  },
+  defaultVariants: {
+    disableAnimation: false
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  skeleton
+});

package/dist/components/skeleton.mjs

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

package/dist/components/snippet.d.ts

@@ -91,10 +91,19 @@ declare const snippet: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    disableAnimation: {
+        true: {};
+        false: {
+            copyIcon: string;
+            checkIcon: string;
+        };
+    };
 }, unknown, {
     base: string;
     pre: string;
-    copy: string[];
+    copyButton: string[];
+    copyIcon: string[];
+    checkIcon: string[];
 }, undefined, undefined, tailwind_variants_dist_config.TVConfig<{
     variant: {
         flat: string;
@@ -167,6 +176,13 @@ declare const snippet: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    disableAnimation: {
+        true: {};
+        false: {
+            copyIcon: string;
+            checkIcon: string;
+        };
+    };
 }, unknown>>;
 type SnippetVariantProps = VariantProps<typeof snippet>;
 type SnippetSlots = keyof ReturnType<typeof snippet>;

package/dist/components/snippet.js

@@ -102,16 +102,14 @@ var colorVariants = {
 // src/components/snippet.ts
 var snippet = (0, import_tailwind_variants.tv)({
   slots: {
-    base: "inline-flex items-center justify-between space-x-3 rounded-md",
+    base: "inline-flex items-center justify-between rounded-md",
     pre: "bg-transparent text-inherit font-mono whitespace-pre-wrap",
-    copy: [
-      "z-10 appearance-none outline-none rounded-sm",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-1",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-transparent",
-      "data-[focus-visible=true]:dark:ring-offset-transparent"
+    copyButton: ["group", "relative", "z-10", "text-inherit", "data-[hover=true]:bg-transparent"],
+    copyIcon: [
+      "absolute text-inherit opacity-100 scale-100 group-data-[copied=true]:opacity-0 group-data-[copied=true]:scale-50"
+    ],
+    checkIcon: [
+      "absolute text-inherit opacity-0 scale-50 group-data-[copied=true]:opacity-100 group-data-[copied=true]:scale-100"
     ]
   },
   variants: {
@@ -185,6 +183,13 @@ var snippet = (0, import_tailwind_variants.tv)({
       true: {
         base: "w-full"
       }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        copyIcon: "transition-transform-opacity",
+        checkIcon: "transition-transform-opacity"
+      }
     }
   },
   defaultVariants: {
@@ -192,7 +197,8 @@ var snippet = (0, import_tailwind_variants.tv)({
     variant: "flat",
     size: "md",
     radius: "lg",
-    fullWidth: false
+    fullWidth: false,
+    disableAnimation: false
   },
   compoundVariants: [
     {

package/dist/components/snippet.mjs

@@ -1,6 +1,6 @@
 import {
   snippet
-} from "../chunk-4XSCIGTZ.mjs";
+} from "../chunk-X577FDRG.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-RO3WUCFF.mjs";

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { SpacerVariantProps, spacer } from './components/spacer.js';
 export { DividerVariantProps, divider } from './components/divider.js';
 export { KbdSlots, KbdVariantProps, kbd } from './components/kbd.js';
 export { TabsReturnType, TabsSlots, TabsVariantProps, tabs } from './components/tabs.js';
+export { SkeletonSlots, SkeletonVariantProps, skeleton } from './components/skeleton.js';
 export { absoluteFullClasses, baseStyles, focusVisibleClasses, ringClasses, translateCenterClasses } from './utils/classes.js';
 export { SlotsToClasses } from './utils/types.js';
 export { colorVariants } from './utils/variants.js';

package/dist/index.js

@@ -66,6 +66,7 @@ __export(src_exports, {
   radioGroup: () => radioGroup,
   ringClasses: () => ringClasses,
   semanticColors: () => semanticColors,
+  skeleton: () => skeleton,
   snippet: () => snippet,
   spacer: () => spacer,
   spinner: () => spinner,
@@ -73,7 +74,7 @@ __export(src_exports, {
   tabs: () => tabs,
   toggle: () => toggle,
   translateCenterClasses: () => translateCenterClasses,
-  tv: () => import_tailwind_variants39.tv,
+  tv: () => import_tailwind_variants40.tv,
   user: () => user
 });
 module.exports = __toCommonJS(src_exports);
@@ -736,7 +737,6 @@ var button = (0, import_tailwind_variants6.tv)({
     "data-[pressed=true]:scale-95",
     "overflow-hidden",
     "gap-1.5",
-    "[&>svg]:max-w-[2em]",
     "data-[focus-visible=true]:outline-none",
     "data-[focus-visible=true]:ring-2",
     "data-[focus-visible=true]:ring-primary",
@@ -747,12 +747,12 @@ var button = (0, import_tailwind_variants6.tv)({
   variants: {
     variant: {
       solid: "",
-      bordered: "border-2 !bg-transparent",
-      light: "!bg-transparent",
+      bordered: "border-2 bg-transparent",
+      light: "bg-transparent",
       flat: "",
       faded: "border-2",
       shadow: "",
-      ghost: "border-2 !bg-transparent"
+      ghost: "border-2 bg-transparent"
     },
     size: {
       xs: "px-2 h-6 text-xs",
@@ -762,12 +762,12 @@ var button = (0, import_tailwind_variants6.tv)({
       xl: "px-8 h-14 text-lg"
     },
     color: {
-      neutral: colorVariants.solid.neutral,
-      primary: colorVariants.solid.primary,
-      secondary: colorVariants.solid.secondary,
-      success: colorVariants.solid.success,
-      warning: colorVariants.solid.warning,
-      danger: colorVariants.solid.danger
+      neutral: "",
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      danger: ""
     },
     radius: {
       none: "rounded-none",
@@ -790,7 +790,8 @@ var button = (0, import_tailwind_variants6.tv)({
       true: "[&:not(:first-child):not(:last-child)]:rounded-none"
     },
     isIconOnly: {
-      true: "p-0 gap-0"
+      true: "p-0 gap-0",
+      false: "[&>svg]:max-w-[2em]"
     },
     disableAnimation: {
       true: "!transition-none",
@@ -808,6 +809,36 @@ var button = (0, import_tailwind_variants6.tv)({
     disableAnimation: false
   },
   compoundVariants: [
+    {
+      variant: "solid",
+      color: "neutral",
+      class: colorVariants.solid.neutral
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: colorVariants.solid.danger
+    },
     {
       variant: "shadow",
       color: "neutral",
@@ -931,32 +962,32 @@ var button = (0, import_tailwind_variants6.tv)({
     {
       variant: "light",
       color: "neutral",
-      class: [colorVariants.light.neutral, "hover:!bg-neutral-100"]
+      class: [colorVariants.light.neutral, "data-[hover=true]:bg-neutral-100"]
     },
     {
       variant: "light",
       color: "primary",
-      class: [colorVariants.light.primary, "hover:!bg-primary-50"]
+      class: [colorVariants.light.primary, "data-[hover=true]:bg-primary-50"]
     },
     {
       variant: "light",
       color: "secondary",
-      class: [colorVariants.light.secondary, "hover:!bg-secondary-100"]
+      class: [colorVariants.light.secondary, "data-[hover=true]:bg-secondary-100"]
     },
     {
       variant: "light",
       color: "success",
-      class: [colorVariants.light.success, "hover:!bg-success-50"]
+      class: [colorVariants.light.success, "data-[hover=true]:bg-success-50"]
     },
     {
       variant: "light",
       color: "warning",
-      class: [colorVariants.light.warning, "hover:!bg-warning-50"]
+      class: [colorVariants.light.warning, "data-[hover=true]:bg-warning-50"]
     },
     {
       variant: "light",
       color: "danger",
-      class: [colorVariants.light.danger, "hover:!bg-danger-50"]
+      class: [colorVariants.light.danger, "data-[hover=true]:bg-danger-50"]
     },
     {
       variant: "ghost",
@@ -1554,16 +1585,14 @@ var popover = (0, import_tailwind_variants11.tv)({
 var import_tailwind_variants12 = require("tailwind-variants");
 var snippet = (0, import_tailwind_variants12.tv)({
   slots: {
-    base: "inline-flex items-center justify-between space-x-3 rounded-md",
+    base: "inline-flex items-center justify-between rounded-md",
     pre: "bg-transparent text-inherit font-mono whitespace-pre-wrap",
-    copy: [
-      "z-10 appearance-none outline-none rounded-sm",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-1",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-transparent",
-      "data-[focus-visible=true]:dark:ring-offset-transparent"
+    copyButton: ["group", "relative", "z-10", "text-inherit", "data-[hover=true]:bg-transparent"],
+    copyIcon: [
+      "absolute text-inherit opacity-100 scale-100 group-data-[copied=true]:opacity-0 group-data-[copied=true]:scale-50"
+    ],
+    checkIcon: [
+      "absolute text-inherit opacity-0 scale-50 group-data-[copied=true]:opacity-100 group-data-[copied=true]:scale-100"
     ]
   },
   variants: {
@@ -1637,6 +1666,13 @@ var snippet = (0, import_tailwind_variants12.tv)({
       true: {
         base: "w-full"
       }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        copyIcon: "transition-transform-opacity",
+        checkIcon: "transition-transform-opacity"
+      }
     }
   },
   defaultVariants: {
@@ -1644,7 +1680,8 @@ var snippet = (0, import_tailwind_variants12.tv)({
     variant: "flat",
     size: "md",
     radius: "lg",
-    fullWidth: false
+    fullWidth: false,
+    disableAnimation: false
   },
   compoundVariants: [
     {
@@ -3839,7 +3876,7 @@ var input = (0, import_tailwind_variants25.tv)({
     label: "block text-sm font-medium text-neutral-600",
     inputWrapper: "relative w-full inline-flex 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 bg-transparent outline-none placeholder:text-neutral-500",
+    input: "w-full h-full !bg-transparent outline-none placeholder:text-neutral-500",
     clearButton: [
       "z-10",
       "hidden",
@@ -6194,6 +6231,56 @@ var tabs = (0, import_tailwind_variants37.tv)({
   ]
 });
 
+// src/components/skeleton.ts
+var import_tailwind_variants38 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants38.tv)({
+  slots: {
+    base: [
+      "group",
+      "relative",
+      "space-y-5",
+      "overflow-hidden",
+      "bg-white/5",
+      "before:opacity-100",
+      "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:opacity-100",
+      "after:absolute",
+      "after:inset-0",
+      "after:-z-10",
+      "after:bg-content3",
+      "dark:after:bg-content2",
+      "data-[loaded=true]:before:opacity-0",
+      "data-[loaded=true]:after:opacity-0"
+    ],
+    content: ["opacity-0", "group-data-[loaded=true]:opacity-100"]
+  },
+  variants: {
+    disableAnimation: {
+      true: {
+        base: "before:transition-none",
+        content: "transition-none"
+      },
+      false: {
+        base: "before:transition-opacity before:!duration-300",
+        content: "transition-opacity motion-reduce:transition-none !duration-300"
+      }
+    }
+  },
+  defaultVariants: {
+    disableAnimation: false
+  }
+});
+
 // src/colors/blue.ts
 var blue = {
   50: "#e6f1fe",
@@ -6757,9 +6844,9 @@ var nextui = (config = {}) => {
 };
 
 // src/index.ts
-var import_tailwind_variants38 = require("tailwind-variants");
 var import_tailwind_variants39 = require("tailwind-variants");
-var cn = (...classes) => (0, import_tailwind_variants38.cn)(classes)();
+var import_tailwind_variants40 = require("tailwind-variants");
+var cn = (...classes) => (0, import_tailwind_variants39.cn)(classes)();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   absoluteFullClasses,
@@ -6802,6 +6889,7 @@ var cn = (...classes) => (0, import_tailwind_variants38.cn)(classes)();
   radioGroup,
   ringClasses,
   semanticColors,
+  skeleton,
   snippet,
   spacer,
   spinner,

package/dist/index.mjs

@@ -1,4 +1,7 @@
-import "./chunk-T6HAGWX5.mjs";
+import "./chunk-MVXKHHAX.mjs";
+import {
+  table
+} from "./chunk-KWWWVBJL.mjs";
 import {
   tabs
 } from "./chunk-UUJTS7XS.mjs";
@@ -20,24 +23,24 @@ import {
 import {
   radio
 } from "./chunk-OZPCO5UB.mjs";
+import {
+  skeleton
+} from "./chunk-G23VRPTF.mjs";
 import {
   snippet
-} from "./chunk-4XSCIGTZ.mjs";
+} from "./chunk-X577FDRG.mjs";
 import {
   spacer
 } from "./chunk-3B4SYPW2.mjs";
 import {
   spinner
 } from "./chunk-XUL76UJD.mjs";
-import {
-  table
-} from "./chunk-KWWWVBJL.mjs";
 import {
   image
 } from "./chunk-6GGRJ6I7.mjs";
 import {
   input
-} from "./chunk-PH4OFVEH.mjs";
+} from "./chunk-7EDXWCUZ.mjs";
 import {
   kbd
 } from "./chunk-KUQBSI5S.mjs";
@@ -88,7 +91,7 @@ import {
 } from "./chunk-VKFQ7EZN.mjs";
 import {
   button
-} from "./chunk-UM54LZPC.mjs";
+} from "./chunk-YMKJFSPB.mjs";
 import {
   card
 } from "./chunk-6QKRZ3JE.mjs";
@@ -192,6 +195,7 @@ export {
   radioGroup,
   ringClasses,
   semanticColors,
+  skeleton,
   snippet,
   spacer,
   spinner,

package/package.json

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