@indielayer/ui 1.2.0 → 1.3.0

package/exports/tailwind.preset.js

@@ -1,55 +1,40 @@
-const colors = require('tailwindcss/colors')
+function getColorVar(color, level) {
+  if (level) return `rgb(var(--${color}-color-${level}))`
 
-module.exports = (useDark = true) => ({
+  return `rgb(var(--${color}-color))`
+}
+
+function getColorVarPallete(color) {
+  return {
+    50: getColorVar(color, 50),
+    100: getColorVar(color, 100),
+    200: getColorVar(color, 200),
+    300: getColorVar(color, 300),
+    400: getColorVar(color, 400),
+    500: getColorVar(color, 500),
+    600: getColorVar(color, 600),
+    700: getColorVar(color, 700),
+    800: getColorVar(color, 800),
+    900: getColorVar(color, 900),
+    950: getColorVar(color, 950),
+  }
+}
+
+module.exports = () => ({
   theme: {
     extend: {
       colors: {
-        primary: colors.emerald,
-        secondary: colors.slate,
-        success: colors.green,
-        warning: colors.yellow,
-        error: colors.red,
+        primary: getColorVarPallete('primary'),
+        secondary: getColorVarPallete('secondary'),
+        success: getColorVarPallete('success'),
+        warning: getColorVarPallete('warning'),
+        error: getColorVarPallete('error'),
       },
-      borderColor: colors.gray[100],
+      borderColor: getColorVar('border'),
       fontFamily: {
-        sans: [
-          'Inter',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          'ui-sans-serif',
-          'system-ui',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          '"Noto Sans"',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"',
-          '"Noto Color Emoji"',
-        ],
+        sans: 'var(--font-family-sans)',
+        mono: 'var(--font-family-mono)',
       },
     },
   },
-  plugins: useDark ? [
-    ({ addBase, config }) => {
-      addBase({
-        html: {
-          color: config('theme.colors.gray.900'),
-          backgroundColor: 'white',
-        },
-        'html.dark': {
-          color: config('theme.colors.gray.100'),
-          backgroundColor: config('theme.colors.gray.900'),
-        },
-        '*, ::before, ::after': {
-          borderColor: colors.gray[200],
-        },
-        '.dark *, .dark ::before, .dark ::after': {
-          borderColor: colors.slate[700],
-        },
-      })
-    },
-  ] : [],
 })

package/lib/{composables/colors-utils.d.ts → common/colors.d.ts}

@@ -1,4 +1,4 @@
-import type { Tone, ColorLibrary } from './colors';
+import type { Tone, ColorLibrary } from '../composables/useColors';
 export declare const setOpacity: (color: string, opacity: number) => string;
 export declare const isValidColor: (color: string) => boolean;
 export declare const colorShade: (color: string, percentage: number) => string;

package/lib/common/icons.js

@@ -1,17 +1,16 @@
-const c = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', t = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', h = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', M = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />', s = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', l = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', p = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', e = '<path d="M15 19l-7-7 7-7" />', d = '<path d="M9 5l7 7-7 7" />', I = '<path d="M5 13l4 4L19 7" />', m = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', r = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />';
+const c = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', t = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', h = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', M = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', s = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', p = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', e = '<path d="M15 19l-7-7 7-7" />', l = '<path d="M9 5l7 7-7 7" />', d = '<path d="M5 13l4 4L19 7" />', I = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', m = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />';
 export {
-  M as arrowRightIcon,
   h as avatarIcon,
-  I as checkIcon,
-  m as chevronDownIcon,
+  d as checkIcon,
+  I as chevronDownIcon,
   a as closeIcon,
   p as dotsIcon,
   o as errorIcon,
-  r as externalIcon,
-  s as eyeIcon,
-  l as eyeVisibleIcon,
+  m as externalIcon,
+  M as eyeIcon,
+  s as eyeVisibleIcon,
   c as infoIcon,
-  d as nextIcon,
+  l as nextIcon,
   e as prevIcon,
   n as successIcon,
   t as warningIcon

package/lib/common/utils.d.ts

@@ -5,7 +5,6 @@ export declare const isFunction: (val: unknown) => val is Function;
  * Deeply unref a value, recursing into objects and arrays.
  *
  * @param {Mixed} val - The value to deeply unref.
- *
  * @return {Mixed}
  */
 export declare const deepUnref: (val: any) => any;
@@ -13,7 +12,6 @@ export declare const deepUnref: (val: any) => any;
  * Unref a value, recursing into it if it's an object.
  *
  * @param {Mixed} val - The value to unref.
- *
  * @return {Mixed}
  */
 export declare const smartUnref: (val: any) => any;
@@ -21,7 +19,6 @@ export declare const smartUnref: (val: any) => any;
  * Unref an array, recursively.
  *
  * @param {Array} arr - The array to unref.
- *
  * @return {Array}
  */
 export declare const unrefArray: any;
@@ -29,8 +26,13 @@ export declare const unrefArray: any;
  * Unref an object, recursively.
  *
  * @param {Object} obj - The object to unref.
- *
  * @return {Object}
  */
 export declare const unrefObject: (obj: any) => any;
+/**
+ * Merge two objects, deeply.
+ * @param {Object} source - The source object.
+ * @param {Object} target - The target object.
+ * @return {Object}
+ */
 export declare const mergeRightDeep: (source?: any, target?: any) => any;

package/lib/components/alert/Alert.vue.d.ts

@@ -1,7 +1,8 @@
 import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const alertType: readonly ["info", "success", "error", "warning"];
 declare const alertProps: {
-    type: PropType<"error" | "success" | "warning" | "info">;
+    type: PropType<"info" | "success" | "error" | "warning">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
@@ -14,8 +15,11 @@ declare const alertProps: {
 };
 export type AlertType = typeof alertType[number];
 export type AlertProps = ExtractPublicPropTypes<typeof alertProps>;
+type InternalClasses = 'wrapper';
+export interface AlertTheme extends ThemeComponent<AlertProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    type: PropType<"error" | "success" | "warning" | "info">;
+    type: PropType<"info" | "success" | "error" | "warning">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
@@ -26,7 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    type: PropType<"error" | "success" | "warning" | "info">;
+    type: PropType<"info" | "success" | "error" | "warning">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
@@ -39,11 +43,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
-    outlined: boolean;
-    light: boolean;
     glow: boolean;
+    light: boolean;
+    outlined: boolean;
     removable: boolean;
+    color: string;
 }, {}>, {
     icon?(_: {}): any;
     default?(_: {}): any;

package/lib/components/alert/Alert.vue2.js

@@ -1,10 +1,9 @@
 import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as w, renderSlot as t, createBlock as b, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
-import { useColors as I } from "../../composables/colors.js";
-import { useTheme as h } from "../../composables/theme.js";
-import { infoIcon as C, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
+import { useColors as I } from "../../composables/useColors.js";
+import { useTheme as C } from "../../composables/useTheme.js";
+import { infoIcon as h, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
 import c from "../icon/Icon.vue.js";
-import E from "./Alert.theme.js";
-const L = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), T = ["aria-label"], _ = ["info", "success", "error", "warning"], A = {
+const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria-label"], L = ["info", "success", "error", "warning"], T = {
   ...I.props(),
   type: String,
   glow: Boolean,
@@ -12,17 +11,17 @@ const L = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), T = ["aria
   outlined: Boolean,
   removable: Boolean,
   closeLabel: String
-}, F = {
+}, _ = {
   name: "XAlert",
   validators: {
-    type: _
+    type: L
   }
-}, H = /* @__PURE__ */ v({
-  ...F,
-  props: A,
+}, D = /* @__PURE__ */ v({
+  ..._,
+  props: T,
   emits: ["remove"],
   setup(m) {
-    const o = m, p = g(() => o.type === "info" ? C : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = h("alert", E, o);
+    const o = m, p = g(() => o.type === "info" ? h : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
     return (e, s) => (l(), a("div", {
       style: k(r(u)),
       class: w([
@@ -43,7 +42,7 @@ const L = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), T = ["aria
         t(e.$slots, "default")
       ]),
       e.removable ? (l(), a(B, { key: 0 }, [
-        L,
+        A,
         n("button", {
           class: "shrink-0",
           "aria-label": e.closeLabel,
@@ -52,11 +51,11 @@ const L = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), T = ["aria
           t(e.$slots, "removeIcon", {}, () => [
             $(c, { icon: r(z) }, null, 8, ["icon"])
           ])
-        ], 8, T)
+        ], 8, E)
       ], 64)) : i("", !0)
     ], 6));
   }
 });
 export {
-  H as default
+  D as default
 };

package/lib/components/alert/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XAlert } from './Alert.vue';
-export type { AlertProps, AlertType } from './Alert.vue';
-export type { AlertTheme } from './Alert.theme';
+export type { AlertProps, AlertType, AlertTheme } from './Alert.vue';

package/lib/components/alert/theme/Alert.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { AlertTheme } from '../Alert.vue';
+declare const theme: AlertTheme;
+export default theme;

package/lib/components/alert/theme/Alert.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { AlertTheme } from '../Alert.vue';
+declare const theme: AlertTheme;
+export default theme;

package/lib/components/alert/theme/Alert.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Alert.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/avatar/Avatar.vue.d.ts

@@ -1,4 +1,5 @@
-import { type ExtractPublicPropTypes } from 'vue';
+import { type ExtractPublicPropTypes, type Ref } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const avatarProps: {
     tag: {
         type: StringConstructor;
@@ -14,12 +15,18 @@ declare const avatarProps: {
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
+type InternalClasses = 'wrapper';
+type InternalExtraData = {
+    source: Ref<string | undefined>;
+};
+export interface AvatarTheme extends ThemeComponent<AvatarProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -35,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -54,15 +61,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
+    size: import("../../composables/useCommon").Size;
+    outlined: boolean;
     color: string;
-    size: import("../../composables/common").Size;
     tag: string;
-    outlined: boolean;
     rounded: boolean;
 }, {}>, {
     avatarIcon?(_: {}): any;

package/lib/components/avatar/Avatar.vue2.js

@@ -1,14 +1,13 @@
 import { defineComponent as d, ref as f, computed as g, watch as v, openBlock as n, createBlock as y, resolveDynamicComponent as h, normalizeStyle as w, unref as r, normalizeClass as C, withCtx as S, createElementBlock as s, toDisplayString as _, renderSlot as k, createVNode as z, createCommentVNode as B } from "vue";
-import { useCommon as i } from "../../composables/common.js";
-import { useColors as I } from "../../composables/colors.js";
-import { useTheme as N } from "../../composables/theme.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import { useColors as I } from "../../composables/useColors.js";
+import { useTheme as N } from "../../composables/useTheme.js";
 import { avatarIcon as $ } from "../../common/icons.js";
-import D from "../icon/Icon.vue.js";
-import V from "./Avatar.theme.js";
-const b = ["alt", "src"], A = {
+import A from "../icon/Icon.vue.js";
+const D = ["alt", "src"], V = {
   key: 1,
   class: "leading-none"
-}, E = {
+}, b = {
   ...i.props(),
   ...I.props("primary"),
   tag: {
@@ -20,12 +19,12 @@ const b = ["alt", "src"], A = {
   image: String,
   outlined: Boolean,
   rounded: Boolean
-}, P = {
+}, E = {
   name: "XAvatar",
   validators: i.validators()
-}, H = /* @__PURE__ */ d({
-  ...P,
-  props: E,
+}, F = /* @__PURE__ */ d({
+  ...E,
+  props: b,
   setup(l) {
     const a = l, o = f(), m = g(() => {
       if (a.name) {
@@ -45,13 +44,13 @@ const b = ["alt", "src"], A = {
     }, {
       immediate: !0
     });
-    const { styles: p, classes: c, className: u } = N("avatar", V, a, { source: o });
+    const { styles: c, classes: p, className: u } = N("Avatar", {}, a, { source: o });
     return (e, t) => (n(), y(h(e.tag), {
-      style: w(r(p)),
+      style: w(r(c)),
       class: C([
         r(u),
         e.$style.avatar,
-        r(c).wrapper
+        r(p).wrapper
       ])
     }, {
       default: S(() => [
@@ -60,8 +59,8 @@ const b = ["alt", "src"], A = {
           alt: e.alt,
           src: e.image,
           class: "h-full w-full"
-        }, null, 8, b)) : e.name ? (n(), s("span", A, _(m.value), 1)) : e.name ? B("", !0) : k(e.$slots, "avatarIcon", { key: 2 }, () => [
-          z(D, {
+        }, null, 8, D)) : e.name ? (n(), s("span", V, _(m.value), 1)) : e.name ? B("", !0) : k(e.$slots, "avatarIcon", { key: 2 }, () => [
+          z(A, {
             size: e.size,
             icon: r($)
           }, null, 8, ["size", "icon"])
@@ -72,5 +71,5 @@ const b = ["alt", "src"], A = {
   }
 });
 export {
-  H as default
+  F as default
 };

package/lib/components/avatar/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XAvatar } from './Avatar.vue';
-export type { AvatarProps } from './Avatar.vue';
-export type { AvatarTheme } from './Avatar.theme';
+export type { AvatarProps, AvatarTheme } from './Avatar.vue';

package/lib/components/avatar/theme/Avatar.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarTheme } from '../Avatar.vue';
+declare const theme: AvatarTheme;
+export default theme;

package/lib/components/avatar/theme/Avatar.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarTheme } from '../Avatar.vue';
+declare const theme: AvatarTheme;
+export default theme;

package/lib/components/avatar/theme/Avatar.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Avatar.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/badge/Badge.vue.d.ts

@@ -1,4 +1,5 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const badgeAlign: readonly ["left", "right"];
 declare const badgePosition: readonly ["top", "bottom"];
 declare const badgeProps: {
@@ -28,7 +29,7 @@ declare const badgeProps: {
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -36,6 +37,9 @@ declare const badgeProps: {
 export type BadgePosition = typeof badgePosition[number];
 export type BadgeAlign = typeof badgeAlign[number];
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
+type InternalClasses = 'wrapper';
+export interface BadgeTheme extends ThemeComponent<BadgeProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -63,7 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -94,17 +98,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
+    size: import("../../composables/useCommon").Size;
+    outlined: boolean;
     color: string;
-    size: import("../../composables/common").Size;
-    align: "left" | "right";
     tag: string;
-    outlined: boolean;
     position: "top" | "bottom";
+    align: "left" | "right";
     animated: boolean;
     show: boolean;
 }, {}>, {

package/lib/components/badge/Badge.vue.js

@@ -1,12 +1,11 @@
-import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as w, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as B, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
-import { useTheme as C } from "../../composables/theme.js";
-import { useCommon as m } from "../../composables/common.js";
-import { useColors as k } from "../../composables/colors.js";
-import N from "./Badge.theme.js";
-const X = { class: "relative inline-block" }, x = {
+import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
+import { useTheme as C } from "../../composables/useTheme.js";
+import { useCommon as m } from "../../composables/useCommon.js";
+import { useColors as k } from "../../composables/useColors.js";
+const N = { class: "relative inline-block" }, X = {
   key: 0,
   class: "animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
-}, Y = ["left", "right"], $ = ["top", "bottom"], E = {
+}, x = ["left", "right"], Y = ["top", "bottom"], $ = {
   ...m.props(),
   ...k.props("primary"),
   tag: {
@@ -30,16 +29,16 @@ const X = { class: "relative inline-block" }, x = {
     type: Boolean,
     default: !0
   }
-}, P = {
+}, E = {
   name: "XBadge",
   validators: {
     ...m.validators(),
-    position: $,
-    align: Y
+    position: Y,
+    align: x
   }
-}, R = /* @__PURE__ */ v({
-  ...P,
-  props: E,
+}, D = /* @__PURE__ */ v({
+  ...E,
+  props: $,
   setup(u) {
     const t = u, d = z(), g = l(() => {
       const e = [];
@@ -47,16 +46,16 @@ const X = { class: "relative inline-block" }, x = {
     }), c = l(() => {
       const e = {};
       return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
-    }), { styles: h, classes: b, className: y } = C("badge", N, t);
-    return (e, T) => (o(), S(w(e.tag), {
+    }), { styles: h, classes: b, className: y } = C("Badge", {}, t);
+    return (e, P) => (o(), S(B(e.tag), {
       style: n(s(h)),
       class: i([
         s(y),
         s(b).wrapper
       ])
     }, {
-      default: B(() => [
-        r("div", X, [
+      default: w(() => [
+        r("div", N, [
           a(e.$slots, "default"),
           e.show ? (o(), p("div", {
             key: 0,
@@ -68,7 +67,7 @@ const X = { class: "relative inline-block" }, x = {
             ]]),
             style: n(c.value)
           }, [
-            e.animated ? (o(), p("div", x)) : f("", !0),
+            e.animated ? (o(), p("div", X)) : f("", !0),
             r("div", {
               class: i(["text-xs text-white overflow-hidden", [
                 e.$slots.content ? "flex items-center justify-center min-w-[1.25rem] h-5 px-1.5" : {
@@ -90,5 +89,5 @@ const X = { class: "relative inline-block" }, x = {
   }
 });
 export {
-  R as default
+  D as default
 };

package/lib/components/badge/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XBadge } from './Badge.vue';
-export type { BadgeProps, BadgeAlign, BadgePosition } from './Badge.vue';
-export type { BadgeTheme } from './Badge.theme';
+export type { BadgeProps, BadgeAlign, BadgePosition, BadgeTheme } from './Badge.vue';

package/lib/components/badge/theme/Badge.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { BadgeTheme } from '../Badge.vue';
+declare const theme: BadgeTheme;
+export default theme;

package/lib/components/badge/theme/Badge.base.theme.js

@@ -0,0 +1,12 @@
+const l = {
+  classes: {
+    wrapper: "inline-block"
+  },
+  styles({ props: e, colors: t, css: s }) {
+    const o = t.getPalette(e.color);
+    return s.get("bg", o[500]);
+  }
+}, c = l;
+export {
+  c as default
+};

package/lib/components/badge/theme/Badge.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { BadgeTheme } from '../Badge.vue';
+declare const theme: BadgeTheme;
+export default theme;

package/lib/components/badge/theme/Badge.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Badge.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};