@nextui-org/theme 0.0.0-dev-v2-20230501173002 → 0.0.0-dev-v2-20230511041421

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

@@ -6,16 +6,16 @@ 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"
+    content: "flex flex-col",
+    symbol: "select-none",
+    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 +89,13 @@ var snippet = tv({
       true: {
         base: "w-full"
       }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        copyIcon: "transition-transform-opacity",
+        checkIcon: "transition-transform-opacity"
+      }
     }
   },
   defaultVariants: {
@@ -96,7 +103,8 @@ var snippet = tv({
     variant: "flat",
     size: "md",
     radius: "lg",
-    fullWidth: false
+    fullWidth: false,
+    disableAnimation: false
   },
   compoundVariants: [
     {

package/dist/chunk-DLSPUMD4.mjs

@@ -0,0 +1,161 @@
+import {
+  baseStyles
+} from "./chunk-INZK6TTL.mjs";
+import {
+  utilities
+} from "./chunk-XLATS5QU.mjs";
+import {
+  semanticColors
+} from "./chunk-LQHWK6UV.mjs";
+import {
+  removeDefaultKeys
+} from "./chunk-37PIXVP4.mjs";
+import {
+  animations
+} from "./chunk-DMASP6FA.mjs";
+import {
+  commonColors
+} from "./chunk-CRCBVLUP.mjs";
+
+// src/plugin.ts
+import Color from "color";
+import plugin from "tailwindcss/plugin.js";
+import forEach from "lodash.foreach";
+import flatten from "flat";
+import get from "lodash.get";
+import omit from "lodash.omit";
+import deepMerge from "deepmerge";
+var SCHEME = Symbol("color-scheme");
+var DEFAULT_PREFIX = "nextui";
+var dark = (colors) => {
+  return {
+    [SCHEME]: "dark",
+    ...colors
+  };
+};
+var light = (colors) => {
+  return {
+    [SCHEME]: "light",
+    ...colors
+  };
+};
+var resolveConfig = (config = {}, defaultTheme, prefix) => {
+  const resolved = {
+    variants: [],
+    utilities: {},
+    colors: {}
+  };
+  const configObject = typeof config === "function" ? config({ dark, light }) : config;
+  forEach(configObject, (colors, themeName) => {
+    let cssSelector = `.${themeName},[data-theme="${themeName}"]`;
+    if (themeName === defaultTheme) {
+      cssSelector = `:root,${cssSelector}`;
+    }
+    resolved.utilities[cssSelector] = colors[SCHEME] ? {
+      "color-scheme": colors[SCHEME]
+    } : {};
+    const flatColors = removeDefaultKeys(
+      flatten(colors, {
+        safe: true,
+        delimiter: "-"
+      })
+    );
+    resolved.variants.push({
+      name: themeName,
+      definition: [`&.${themeName}`, `&[data-theme='${themeName}']`]
+    });
+    forEach(flatColors, (colorValue, colorName) => {
+      if (colorName === SCHEME || !colorValue)
+        return;
+      try {
+        const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
+        const nextuiColorVariable = `--${prefix}-${colorName}`;
+        const nextuiOpacityVariable = `--${prefix}-${colorName}-opacity`;
+        resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
+        if (typeof defaultAlphaValue === "number") {
+          resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
+        }
+        resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
+          if (!isNaN(+opacityValue)) {
+            return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
+          }
+          if (opacityVariable) {
+            return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
+          }
+          return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
+        };
+      } catch (error) {
+        console.log("error", error == null ? void 0 : error.message);
+      }
+    });
+  });
+  return resolved;
+};
+var corePlugin = (config = {}, defaultTheme, prefix) => {
+  const resolved = resolveConfig(config, defaultTheme, prefix);
+  return plugin(
+    ({ addBase, addUtilities, addVariant }) => {
+      addBase({
+        [":root, [data-theme]"]: {
+          ...baseStyles
+        }
+      });
+      addUtilities({ ...resolved.utilities, ...utilities });
+      resolved.variants.forEach((variant) => {
+        addVariant(variant.name, variant.definition);
+      });
+    },
+    {
+      theme: {
+        extend: {
+          colors: {
+            ...commonColors,
+            ...resolved.colors
+          },
+          fontSize: {
+            tiny: "0.625rem"
+          },
+          borderWidth: {
+            1: "1px",
+            1.5: "1.5px",
+            3: "3px",
+            5: "5px"
+          },
+          backgroundImage: {
+            "stripe-gradient": "linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)"
+          },
+          transitionDuration: {
+            0: "0ms",
+            250: "250ms",
+            400: "400ms"
+          },
+          transitionTimingFunction: {
+            "soft-spring": "cubic-bezier(0.155, 1.105, 0.295, 1.12)"
+          },
+          ...animations
+        }
+      }
+    }
+  );
+};
+var nextui = (config = {}) => {
+  const themeObject = typeof config.themes === "function" ? config.themes({ dark, light }) : config.themes;
+  const userLightColors = get(themeObject, "light", {});
+  const userDarkColors = get(themeObject, "dark", {});
+  const defaultTheme = config.defaultTheme || "light";
+  const defaultPrefix = config.prefix || DEFAULT_PREFIX;
+  const otherThemes = omit(themeObject, ["light", "dark"]) || {};
+  return corePlugin(
+    {
+      light: deepMerge(semanticColors.light, userLightColors),
+      dark: deepMerge(semanticColors.dark, userDarkColors),
+      ...otherThemes
+    },
+    defaultTheme,
+    defaultPrefix
+  );
+};
+
+export {
+  nextui
+};

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-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/{chunk-XICTHLAR.mjs → chunk-YQXYRWJP.mjs}

@@ -60,7 +60,7 @@ var link = tv({
     {
       isBlock: true,
       color: "foreground",
-      class: "hover:after:bg-foreground/20"
+      class: "hover:after:bg-foreground/10"
     },
     {
       isBlock: true,
@@ -101,7 +101,9 @@ var link = tv({
     disableAnimation: false
   }
 });
+var linkAnchorClasses = "flex mx-1 text-current self-center";
 
 export {
-  link
+  link,
+  linkAnchorClasses
 };

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

@@ -1,7 +1,7 @@
 export { AvatarSlots, AvatarVariantProps, avatar } from './avatar.js';
 export { AvatarGroupVariantProps, avatarGroup } from './avatar-group.js';
 export { CardReturnType, CardSlots, CardVariantProps, card } from './card.js';
-export { LinkVariantProps, link } from './link.js';
+export { LinkVariantProps, link, linkAnchorClasses } from './link.js';
 export { UserSlots, user } from './user.js';
 export { ButtonVariantProps, button } from './button.js';
 export { ButtonGroupVariantProps, buttonGroup } from './button-group.js';
@@ -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';