@nkey-ui/theme - npm Package Compare versions

Comparing version 1.0.34 to 1.0.35

dist/components/accordion.js

@@ -518,2 +518,3 @@ "use strict";
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -523,3 +524,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -526,0 +528,0 @@

dist/components/alert.d.ts

@@ -5,61 +5,9 @@ import * as tailwind_variants from 'tailwind-variants';
 
-declare const alertWrapper: tailwind_variants.TVReturnType<{
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}, undefined, undefined, tailwind_variants_dist_config.TVConfig<{
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}, {
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}>, {
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}, undefined, tailwind_variants.TVReturnType<{
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}, undefined, undefined, tailwind_variants_dist_config.TVConfig<{
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}, {
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
-    };
-}>, unknown, unknown, undefined>>;
+declare const variants: readonly ["pastel", "flat", "outlined", "faded"];
+type Variant = {
+    [key in (typeof variants)[number]]: string;
+};
 declare const alert: tailwind_variants.TVReturnType<{
-    type: {
+    variant: Variant;
+    color: {
         default: string;
@@ -75,10 +23,24 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
-}, undefined, "flex items-center gap-3 p-4", tailwind_variants_dist_config.TVConfig<{
-    type: {
+}, {
+    base: string;
+    wrapper: string;
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    variant: Variant;
+    color: {
         default: string;
@@ -94,10 +56,21 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
 }, {
-    type: {
+    variant: Variant;
+    color: {
         default: string;
@@ -113,10 +86,21 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
 }>, {
-    type: {
+    variant: Variant;
+    color: {
         default: string;
@@ -132,10 +116,24 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
-}, undefined, tailwind_variants.TVReturnType<{
-    type: {
+}, {
+    base: string;
+    wrapper: string;
+}, tailwind_variants.TVReturnType<{
+    variant: Variant;
+    color: {
         default: string;
@@ -151,10 +149,24 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
-}, undefined, "flex items-center gap-3 p-4", tailwind_variants_dist_config.TVConfig<{
-    type: {
+}, {
+    base: string;
+    wrapper: string;
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    variant: Variant;
+    color: {
         default: string;
@@ -170,10 +182,21 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
 }, {
-    type: {
+    variant: Variant;
+    color: {
         default: string;
@@ -189,103 +212,59 @@ primary: string;
     rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        none: string;
-        full: string;
+        sm: {
+            [key: string]: any;
+        };
+        md: {
+            [key: string]: any;
+        };
+        lg: {
+            [key: string]: any;
+        };
+        none: {
+            [key: string]: any;
+        };
+        full: {
+            [key: string]: any;
+        };
     };
 }>, unknown, unknown, undefined>>;
-declare const alertIcon: tailwind_variants.TVReturnType<{
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}, undefined, "dark:text-inherit", tailwind_variants_dist_config.TVConfig<{
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}, {
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}>, {
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}, undefined, tailwind_variants.TVReturnType<{
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}, undefined, "dark:text-inherit", tailwind_variants_dist_config.TVConfig<{
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}, {
-    type: {
-        default: "text-default-600";
-        foreground: "text-foreground-600";
-        primary: "text-primary-600";
-        secondary: "text-secondary-600";
-        success: "text-success-600";
-        danger: "text-danger-600";
-        warning: "text-warning-600";
-        info: "text-info-600";
-    };
-}>, unknown, unknown, undefined>>;
-declare const alertMessage: tailwind_variants.TVReturnType<tailwind_variants.TVVariantsDefault<undefined, "grow hyphens-auto"> | {
+declare const alertContents: tailwind_variants.TVReturnType<tailwind_variants.TVVariantsDefault<{
+    icon: string;
+    message: string;
+    close: string;
+}, undefined> | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | tailwind_variants.SlotsClassValue<undefined, "grow hyphens-auto">;
+        [x: string]: tailwind_variants.ClassValue | tailwind_variants.SlotsClassValue<{
+            icon: string;
+            message: string;
+            close: string;
+        }, undefined>;
     } | undefined;
-} | {}, undefined, "grow hyphens-auto", tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<undefined, "grow hyphens-auto"> | {}>, tailwind_variants.TVVariantsDefault<undefined, "grow hyphens-auto"> | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "grow hyphens-auto", tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<undefined, "grow hyphens-auto"> | {}>, unknown, unknown, undefined>>;
-declare const alertClose: tailwind_variants.TVReturnType<tailwind_variants.TVVariantsDefault<undefined, "cursor-pointer text-inherit"> | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | tailwind_variants.SlotsClassValue<undefined, "cursor-pointer text-inherit">;
-    } | undefined;
-} | {}, undefined, "cursor-pointer text-inherit", tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<undefined, "cursor-pointer text-inherit"> | {}>, tailwind_variants.TVVariantsDefault<undefined, "cursor-pointer text-inherit"> | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "cursor-pointer text-inherit", tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<undefined, "cursor-pointer text-inherit"> | {}>, unknown, unknown, undefined>>;
-type AlertWrapperVariantProps = VariantProps<typeof alertWrapper>;
+} | {}, {
+    icon: string;
+    message: string;
+    close: string;
+}, undefined, tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<{
+    icon: string;
+    message: string;
+    close: string;
+}, undefined> | {}>, tailwind_variants.TVVariantsDefault<{
+    icon: string;
+    message: string;
+    close: string;
+}, undefined> | {}, {
+    icon: string;
+    message: string;
+    close: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    icon: string;
+    message: string;
+    close: string;
+}, undefined, tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<{
+    icon: string;
+    message: string;
+    close: string;
+}, undefined> | {}>, unknown, unknown, undefined>>;
 type AlertVariantProps = VariantProps<typeof alert>;
-type AlertIconVariantProps = VariantProps<typeof alertIcon>;
-type AlertMessageVariantProps = VariantProps<typeof alertMessage>;
-type AlertCloseVariantProps = VariantProps<typeof alertClose>;
+type AlertContentsVariantProps = VariantProps<typeof alertContents>;
 
-export { AlertCloseVariantProps, AlertIconVariantProps, AlertMessageVariantProps, AlertVariantProps, AlertWrapperVariantProps, alert, alertClose, alertIcon, alertMessage, alertWrapper };
+export { AlertContentsVariantProps, AlertVariantProps, alert, alertContents };

dist/components/alert.js

 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -18,2 +20,6 @@ var __export = (target, all) => {
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -25,6 +31,3 @@
   alert: () => alert,
-  alertClose: () => alertClose,
-  alertIcon: () => alertIcon,
-  alertMessage: () => alertMessage,
-  alertWrapper: () => alertWrapper
+  alertContents: () => alertContents
 });
@@ -35,3 +38,42 @@ module.exports = __toCommonJS(alert_exports);
 var import_tailwind_variants = require("tailwind-variants");
+
+// src/utils/object.ts
+var import_flat = __toESM(require("flat"));
+function swapColorValues(colors2) {
+  const swappedColors = {};
+  const keys = Object.keys(colors2);
+  const length = keys.length;
+  for (let i = 0; i < length / 2; i++) {
+    const key1 = keys[i];
+    const key2 = keys[length - 1 - i];
+    swappedColors[key1] = colors2[key2];
+    swappedColors[key2] = colors2[key1];
+  }
+  if (length % 2 !== 0) {
+    const middleKey = keys[Math.floor(length / 2)];
+    swappedColors[middleKey] = colors2[middleKey];
+  }
+  return swappedColors;
+}
+function createObjectFromKeys(keys, value = "") {
+  return keys.reduce(
+    (acc, current) => {
+      acc[current] = value;
+      return acc;
+    },
+    {}
+  );
+}
+
+// src/utils/tv.ts
 var COMMON_UNITS = ["small", "medium", "large"];
+function addSlotsToObj(obj, slots) {
+  if (typeof obj !== "object")
+    return obj;
+  const newObj = { ...obj };
+  for (const [key, value] of Object.entries(newObj)) {
+    newObj[key] = createObjectFromKeys(slots, value);
+  }
+  return newObj;
+}
 var tv = (options, config) => {
@@ -181,47 +223,348 @@ var _a, _b, _c;
 
+// src/colors/blue.ts
+var blue = {
+  50: "#e6f1fe",
+  100: "#cce3fd",
+  200: "#99c7fb",
+  300: "#66aaf9",
+  400: "#338ef7",
+  500: "#006FEE",
+  600: "#005bc4",
+  700: "#004493",
+  800: "#002e62",
+  900: "#001731"
+};
+
+// src/colors/cyan.ts
+var cyan = {
+  50: "#F0FCFF",
+  100: "#E6FAFE",
+  200: "#D7F8FE",
+  300: "#C3F4FD",
+  400: "#A5EEFD",
+  500: "#7EE7FC",
+  600: "#06B7DB",
+  700: "#09AACD",
+  800: "#0E8AAA",
+  900: "#053B48"
+};
+
+// src/colors/green.ts
+var green = {
+  50: "#e1ffec",
+  100: "#cdffd9",
+  200: "#a6ffb3",
+  300: "#57ff64",
+  400: "#00f42d",
+  500: "#00cd26",
+  600: "#007e17",
+  700: "#005710",
+  800: "#003009",
+  900: "#001c05"
+};
+
+// src/colors/pink.ts
+var pink = {
+  50: "#ffedfa",
+  100: "#ffdcf5",
+  200: "#ffb8eb",
+  300: "#ff95e1",
+  400: "#ff71d7",
+  500: "#ff4ecd",
+  600: "#cc3ea4",
+  700: "#992f7b",
+  800: "#661f52",
+  900: "#331029"
+};
+
+// src/colors/purple.ts
+var purple = {
+  50: "#f2eafa",
+  100: "#e4d4f4",
+  200: "#c9a9e9",
+  300: "#ae7ede",
+  400: "#9353d3",
+  500: "#7828c8",
+  600: "#6020a0",
+  700: "#481878",
+  800: "#301050",
+  900: "#180828"
+};
+
+// src/colors/red.ts
+var red = {
+  50: "#ffe6e1",
+  100: "#ffd6cd",
+  200: "#ffb6a6",
+  300: "#ff7657",
+  400: "#ff5630",
+  500: "#f42d00",
+  600: "#b92200",
+  700: "#7e1700",
+  800: "#6b1400",
+  900: "#571000"
+};
+
+// src/colors/yellow.ts
+var yellow = {
+  50: "#fefce8",
+  100: "#fdedd3",
+  200: "#fbdba7",
+  300: "#f9c97c",
+  400: "#f7b750",
+  500: "#f5a524",
+  600: "#c4841d",
+  700: "#936316",
+  800: "#62420e",
+  900: "#312107"
+};
+
+// src/colors/zinc.ts
+var zinc = {
+  50: "#fafafa",
+  100: "#f4f4f5",
+  200: "#e4e4e7",
+  300: "#d4d4d8",
+  400: "#a1a1aa",
+  500: "#71717a",
+  600: "#52525b",
+  700: "#3f3f46",
+  800: "#27272a",
+  900: "#18181b"
+};
+
+// src/colors/common.ts
+var commonColors = {
+  white: "#ffffff",
+  black: "#000000",
+  blue,
+  green,
+  pink,
+  purple,
+  red,
+  yellow,
+  cyan,
+  zinc
+};
+
+// src/colors/semantic.ts
+var import_color2k = require("color2k");
+var base = {
+  light: {
+    background: {
+      DEFAULT: "#FFFFFF"
+    },
+    foreground: {
+      ...commonColors.zinc,
+      DEFAULT: "#11181C"
+    },
+    divider: {
+      DEFAULT: "rgba(17, 17, 17, 0.15)"
+    },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
+    overlay: {
+      DEFAULT: "#000000"
+    },
+    content1: {
+      DEFAULT: "#FFFFFF",
+      foreground: "#11181C"
+    },
+    content2: {
+      DEFAULT: commonColors.zinc[100],
+      foreground: commonColors.zinc[800]
+    },
+    content3: {
+      DEFAULT: commonColors.zinc[200],
+      foreground: commonColors.zinc[700]
+    },
+    content4: {
+      DEFAULT: commonColors.zinc[300],
+      foreground: commonColors.zinc[600]
+    }
+  },
+  dark: {
+    background: {
+      DEFAULT: "#000000"
+    },
+    foreground: {
+      ...swapColorValues(commonColors.zinc),
+      DEFAULT: "#ECEDEE"
+    },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
+    overlay: {
+      DEFAULT: "#000000"
+    },
+    divider: {
+      DEFAULT: "rgba(255, 255, 255, 0.15)"
+    },
+    content1: {
+      DEFAULT: commonColors.zinc[900],
+      foreground: commonColors.zinc[50]
+    },
+    content2: {
+      DEFAULT: commonColors.zinc[800],
+      foreground: commonColors.zinc[100]
+    },
+    content3: {
+      DEFAULT: commonColors.zinc[700],
+      foreground: commonColors.zinc[200]
+    },
+    content4: {
+      DEFAULT: commonColors.zinc[600],
+      foreground: commonColors.zinc[300]
+    }
+  }
+};
+var themeColorsLight = {
+  ...base.light,
+  default: {
+    ...commonColors.zinc,
+    foreground: (0, import_color2k.readableColor)(commonColors.zinc[300]),
+    DEFAULT: commonColors.zinc[300]
+  },
+  primary: {
+    ...commonColors.blue,
+    foreground: (0, import_color2k.readableColor)(commonColors.blue[500]),
+    DEFAULT: commonColors.blue[500]
+  },
+  secondary: {
+    ...commonColors.purple,
+    foreground: (0, import_color2k.readableColor)(commonColors.purple[500]),
+    DEFAULT: commonColors.purple[500]
+  },
+  success: {
+    ...commonColors.green,
+    foreground: commonColors.white,
+    DEFAULT: commonColors.green[500]
+  },
+  warning: {
+    ...commonColors.yellow,
+    foreground: commonColors.white,
+    DEFAULT: commonColors.yellow[500]
+  },
+  danger: {
+    ...commonColors.red,
+    foreground: commonColors.white,
+    DEFAULT: commonColors.red[500]
+  },
+  info: {
+    ...commonColors.cyan,
+    foreground: commonColors.white,
+    DEFAULT: commonColors.cyan[500]
+  }
+};
+var themeColorsDark = {
+  ...base.dark,
+  default: {
+    ...swapColorValues(commonColors.zinc),
+    foreground: (0, import_color2k.readableColor)(commonColors.zinc[700]),
+    DEFAULT: commonColors.zinc[700]
+  },
+  primary: {
+    ...swapColorValues(commonColors.blue),
+    foreground: (0, import_color2k.readableColor)(commonColors.blue[700]),
+    DEFAULT: commonColors.blue[700]
+  },
+  secondary: {
+    ...swapColorValues(commonColors.purple),
+    foreground: (0, import_color2k.readableColor)(commonColors.purple[700]),
+    DEFAULT: commonColors.purple[700]
+  },
+  success: {
+    ...swapColorValues(commonColors.green),
+    foreground: commonColors.white,
+    DEFAULT: commonColors.green[700]
+  },
+  warning: {
+    ...swapColorValues(commonColors.yellow),
+    foreground: commonColors.white,
+    DEFAULT: commonColors.yellow[700]
+  },
+  danger: {
+    ...swapColorValues(commonColors.red),
+    foreground: commonColors.white,
+    DEFAULT: commonColors.red[700]
+  },
+  info: {
+    ...swapColorValues(commonColors.cyan),
+    foreground: commonColors.white,
+    DEFAULT: commonColors.cyan[700]
+  }
+};
+var semanticColors = {
+  light: themeColorsLight,
+  dark: themeColorsDark
+};
+
+// src/colors/index.ts
+var colorsList = ["default", "primary", "secondary", "success", "warning", "danger", "info", "foreground"];
+var colors = {
+  ...commonColors,
+  ...semanticColors
+};
+
+// src/variants/compoundVariants/colors.ts
+function generateColorCompoundVariants(variants = {}, type, slots) {
+  return colorsList.map((color) => ({
+    ...variants,
+    color,
+    class: slots ? createObjectFromKeys(slots, colorVariants[type][color]) : colorVariants[type][color]
+  }));
+}
+var createGenerator = (type) => (variants = {}, slots) => generateColorCompoundVariants(variants, type, slots);
+var outlined = createGenerator("bordered");
+var flat2 = createGenerator("flat");
+var faded2 = createGenerator("faded");
+var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
+var colorCompoundVariants = {
+  outlined,
+  flat: flat2,
+  faded: faded2,
+  ghost: ghost2,
+  pastel: pastel2
+};
+
 // src/components/alert.ts
-var alertWrapper = tv({
-  variants: {
-    rounded: layoutVariants.rounded
-  }
-});
 var alert = tv({
-  base: "flex items-center gap-3 p-4",
+  slots: {
+    base: "flex items-center gap-3 p-4",
+    wrapper: ""
+  },
   variants: {
-    type: colorVariants.pastel,
-    rounded: layoutVariants.rounded
+    variant: {},
+    color: {},
+    rounded: addSlotsToObj(layoutVariants.rounded, ["base", "wrapper"])
   },
+  compoundVariants: [
+    ...colorCompoundVariants.flat({ variant: "flat" }, ["base"]),
+    ...colorCompoundVariants.outlined({ variant: "outlined" }, ["base"]),
+    ...colorCompoundVariants.faded({ variant: "faded" }, ["base"]),
+    ...colorCompoundVariants.pastel({ variant: "pastel" }, ["base"]),
+    {
+      variant: "outlined",
+      class: { base: "border-2" }
+    }
+  ],
   defaultVariants: {
-    type: "primary",
+    variant: "pastel",
+    color: "primary",
     rounded: "md"
   }
 });
-var alertIcon = tv({
-  base: "dark:text-inherit",
-  variants: {
-    type: {
-      default: "text-default-600",
-      foreground: "text-foreground-600",
-      primary: "text-primary-600",
-      secondary: "text-secondary-600",
-      success: "text-success-600",
-      danger: "text-danger-600",
-      warning: "text-warning-600",
-      info: "text-info-600"
-    }
+var alertContents = tv({
+  slots: {
+    icon: "text-inherit",
+    message: "grow hyphens-auto",
+    close: "cursor-pointer text-inherit"
   }
 });
-var alertMessage = tv({
-  base: "grow hyphens-auto"
-});
-var alertClose = tv({
-  base: "cursor-pointer text-inherit"
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   alert,
-  alertClose,
-  alertIcon,
-  alertMessage,
-  alertWrapper
+  alertContents
 });

dist/components/button.js

@@ -513,2 +513,3 @@ "use strict";
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -518,3 +519,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -521,0 +523,0 @@

dist/components/index.d.ts

 export { AccordionVariantProps, accordion } from './accordion.js';
-export { AlertCloseVariantProps, AlertIconVariantProps, AlertMessageVariantProps, AlertVariantProps, AlertWrapperVariantProps, alert, alertClose, alertIcon, alertMessage, alertWrapper } from './alert.js';
+export { AlertContentsVariantProps, AlertVariantProps, alert, alertContents } from './alert.js';
 export { BadgeVariantProps, BadgeWrapperVariantProps, badge, badgeWrapper } from './badge.js';
@@ -4,0 +4,0 @@ export { ButtonBaseVariantProps, ButtonGroupVariantProps, ButtonRippleVariantProps, ButtonVariantProps, IconButtonVariantProps, button, buttonBase, buttonGroup, buttonRipple, iconButton } from './button.js';

dist/components/index.js

@@ -31,6 +31,3 @@ "use strict";
   alert: () => alert,
-  alertClose: () => alertClose,
-  alertIcon: () => alertIcon,
-  alertMessage: () => alertMessage,
-  alertWrapper: () => alertWrapper,
+  alertContents: () => alertContents,
   badge: () => badge,
@@ -545,2 +542,3 @@ badgeWrapper: () => badgeWrapper,
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -550,3 +548,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -588,39 +587,35 @@
 // src/components/alert.ts
-var alertWrapper = tv({
-  variants: {
-    rounded: layoutVariants.rounded
-  }
-});
 var alert = tv({
-  base: "flex items-center gap-3 p-4",
+  slots: {
+    base: "flex items-center gap-3 p-4",
+    wrapper: ""
+  },
   variants: {
-    type: colorVariants.pastel,
-    rounded: layoutVariants.rounded
+    variant: {},
+    color: {},
+    rounded: addSlotsToObj(layoutVariants.rounded, ["base", "wrapper"])
   },
+  compoundVariants: [
+    ...colorCompoundVariants.flat({ variant: "flat" }, ["base"]),
+    ...colorCompoundVariants.outlined({ variant: "outlined" }, ["base"]),
+    ...colorCompoundVariants.faded({ variant: "faded" }, ["base"]),
+    ...colorCompoundVariants.pastel({ variant: "pastel" }, ["base"]),
+    {
+      variant: "outlined",
+      class: { base: "border-2" }
+    }
+  ],
   defaultVariants: {
-    type: "primary",
+    variant: "pastel",
+    color: "primary",
     rounded: "md"
   }
 });
-var alertIcon = tv({
-  base: "dark:text-inherit",
-  variants: {
-    type: {
-      default: "text-default-600",
-      foreground: "text-foreground-600",
-      primary: "text-primary-600",
-      secondary: "text-secondary-600",
-      success: "text-success-600",
-      danger: "text-danger-600",
-      warning: "text-warning-600",
-      info: "text-info-600"
-    }
+var alertContents = tv({
+  slots: {
+    icon: "text-inherit",
+    message: "grow hyphens-auto",
+    close: "cursor-pointer text-inherit"
   }
 });
-var alertMessage = tv({
-  base: "grow hyphens-auto"
-});
-var alertClose = tv({
-  base: "cursor-pointer text-inherit"
-});
 
@@ -911,6 +906,3 @@ // src/components/badge.ts
   alert,
-  alertClose,
-  alertIcon,
-  alertMessage,
-  alertWrapper,
+  alertContents,
   badge,
@@ -917,0 +909,0 @@ badgeWrapper,

dist/components/input.js

@@ -520,2 +520,3 @@ "use strict";
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -525,3 +526,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -528,0 +530,0 @@

dist/index.d.ts

 export { AccordionVariantProps, accordion } from './components/accordion.js';
-export { AlertCloseVariantProps, AlertIconVariantProps, AlertMessageVariantProps, AlertVariantProps, AlertWrapperVariantProps, alert, alertClose, alertIcon, alertMessage, alertWrapper } from './components/alert.js';
+export { AlertContentsVariantProps, AlertVariantProps, alert, alertContents } from './components/alert.js';
 export { BadgeVariantProps, BadgeWrapperVariantProps, badge, badgeWrapper } from './components/badge.js';
@@ -4,0 +4,0 @@ export { ButtonBaseVariantProps, ButtonGroupVariantProps, ButtonRippleVariantProps, ButtonVariantProps, IconButtonVariantProps, button, buttonBase, buttonGroup, buttonRipple, iconButton } from './components/button.js';

dist/index.js

@@ -101,6 +101,3 @@ "use strict";
   alert: () => alert,
-  alertClose: () => alertClose,
-  alertIcon: () => alertIcon,
-  alertMessage: () => alertMessage,
-  alertWrapper: () => alertWrapper,
+  alertContents: () => alertContents,
   badge: () => badge,
@@ -639,2 +636,3 @@ badgeWrapper: () => badgeWrapper,
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -644,3 +642,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -682,39 +681,35 @@
 // src/components/alert.ts
-var alertWrapper = tv({
-  variants: {
-    rounded: layoutVariants.rounded
-  }
-});
 var alert = tv({
-  base: "flex items-center gap-3 p-4",
+  slots: {
+    base: "flex items-center gap-3 p-4",
+    wrapper: ""
+  },
   variants: {
-    type: colorVariants.pastel,
-    rounded: layoutVariants.rounded
+    variant: {},
+    color: {},
+    rounded: addSlotsToObj(layoutVariants.rounded, ["base", "wrapper"])
   },
+  compoundVariants: [
+    ...colorCompoundVariants.flat({ variant: "flat" }, ["base"]),
+    ...colorCompoundVariants.outlined({ variant: "outlined" }, ["base"]),
+    ...colorCompoundVariants.faded({ variant: "faded" }, ["base"]),
+    ...colorCompoundVariants.pastel({ variant: "pastel" }, ["base"]),
+    {
+      variant: "outlined",
+      class: { base: "border-2" }
+    }
+  ],
   defaultVariants: {
-    type: "primary",
+    variant: "pastel",
+    color: "primary",
     rounded: "md"
   }
 });
-var alertIcon = tv({
-  base: "dark:text-inherit",
-  variants: {
-    type: {
-      default: "text-default-600",
-      foreground: "text-foreground-600",
-      primary: "text-primary-600",
-      secondary: "text-secondary-600",
-      success: "text-success-600",
-      danger: "text-danger-600",
-      warning: "text-warning-600",
-      info: "text-info-600"
-    }
+var alertContents = tv({
+  slots: {
+    icon: "text-inherit",
+    message: "grow hyphens-auto",
+    close: "cursor-pointer text-inherit"
   }
 });
-var alertMessage = tv({
-  base: "grow hyphens-auto"
-});
-var alertClose = tv({
-  base: "cursor-pointer text-inherit"
-});
 
@@ -1267,6 +1262,3 @@ // src/components/badge.ts
   alert,
-  alertClose,
-  alertIcon,
-  alertMessage,
-  alertWrapper,
+  alertContents,
   badge,
@@ -1273,0 +1265,0 @@ badgeWrapper,

dist/variants/compoundVariants/colors.d.ts

@@ -19,4 +19,8 @@ type Variants = Record<string, string>;
     }[];
+    pastel: (variants?: Variants, slots?: string[]) => {
+        color: "foreground" | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+        class: string | Record<string, any>;
+    }[];
 };
 
 export { colorCompoundVariants };

dist/variants/compoundVariants/colors.js

@@ -465,2 +465,3 @@ "use strict";
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -470,3 +471,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -473,0 +475,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/variants/index.js

@@ -486,2 +486,3 @@ "use strict";
 var ghost2 = createGenerator("ghost");
+var pastel2 = createGenerator("pastel");
 var colorCompoundVariants = {
@@ -491,3 +492,4 @@ outlined,
   faded: faded2,
-  ghost: ghost2
+  ghost: ghost2,
+  pastel: pastel2
 };
@@ -494,0 +496,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

 {
   "name": "@nkey-ui/theme",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "description": "The default theme for NkeyUI components",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

385684

increased by1.3%

Lines of code

13355

increased by2.16%

No dependency changes