@indielayer/ui 1.0.9 → 1.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 - Indielayer
+Copyright (c) 2023 - Indielayer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -3,7 +3,7 @@
 
 
 <p>
-  <a href="https://github.com/indielayer/ui/actions/workflows/build.yml"><img src="https://github.com/indielayer/ui/actions/workflows/build.yml/badge.svg?branch=main&event=push" alt="ci"></a>
+  <a href="https://github.com/indielayer/ui/actions/workflows/release_production.yml"><img src="https://github.com/indielayer/ui/actions/workflows/release_production.yml/badge.svg?branch=main&event=push" alt="ci"></a>
   <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/dm/@indielayer/ui" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/v/@indielayer/ui/latest" alt="Version"></a>
   <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/license/@indielayer/ui" alt="License"></a>
@@ -40,4 +40,4 @@ The documentation is located inside [/packages/docs](./packages/docs)
 
 [MIT](./LICENSE)
 
-Copyright (c) 2022, Indielayer
+Copyright (c) 2023, Indielayer

package/{src/exports/nuxt.js → exports/nuxt.mjs}

@@ -6,7 +6,7 @@ export default defineNuxtModule({
     name: '@indielayer/ui',
     configKey: 'indielayer',
     compatibility: {
-      nuxt: '^3.0.0-rc.1',
+      nuxt: '^3.0.0',
     },
   },
   defaults: {

package/{lib → exports}/nuxt.plugin.js

@@ -2,7 +2,7 @@ import { defineNuxtPlugin } from '#app'
 import create from '../src/create'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const UI = create(nuxtApp.$config.indielayerOptions)
+  const UI = create(nuxtApp.$config.public?.indielayerOptions)
 
   nuxtApp.vueApp.use(UI)
 })

package/lib/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/lib/common/icons.js

@@ -0,0 +1,18 @@
+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" />';
+export {
+  M as arrowRightIcon,
+  h as avatarIcon,
+  I as checkIcon,
+  m as chevronDownIcon,
+  a as closeIcon,
+  p as dotsIcon,
+  o as errorIcon,
+  r as externalIcon,
+  s as eyeIcon,
+  l as eyeVisibleIcon,
+  c as infoIcon,
+  d as nextIcon,
+  e as prevIcon,
+  n as successIcon,
+  t as warningIcon
+};

package/lib/common/utils.d.ts

@@ -1,3 +1,6 @@
+export declare const isObject: (val: unknown) => val is object;
+export declare const isArray: (val: unknown) => val is [];
+export declare const isFunction: (val: unknown) => val is Function;
 /**
  * Deeply unref a value, recursing into objects and arrays.
  *
@@ -30,3 +33,4 @@ export declare const unrefArray: any;
  * @return {Object}
  */
 export declare const unrefObject: (obj: any) => any;
+export declare const mergeRightDeep: (source?: any, target?: any) => any;

package/lib/common/utils.js

@@ -0,0 +1,25 @@
+import { isRef as o, unref as f } from "vue";
+const s = (n) => n !== null && typeof n == "object", p = (n) => Array.isArray(n), h = (n) => typeof n == "function", b = (n) => {
+  const e = o(n) ? f(n) : n;
+  return s(e) ? p(e) ? j(e) : m(e) : e;
+}, i = (n) => n !== null && !o(n) && typeof n == "object" ? b(n) : f(n), j = (n) => n.map(i), m = (n) => {
+  const e = {};
+  return Object.keys(n).forEach((t) => {
+    e[t] = i(n[t]);
+  }), e;
+}, d = (n = {}, e = {}) => {
+  const t = Object.keys(n), u = Object.keys(e), c = { ...n };
+  return u.forEach((r) => {
+    t.includes(r) && s(n[r]) && s(e[r]) ? c[r] = d(n[r], e[r]) : c[r] = e[r];
+  }), c;
+};
+export {
+  b as deepUnref,
+  p as isArray,
+  h as isFunction,
+  s as isObject,
+  d as mergeRightDeep,
+  i as smartUnref,
+  j as unrefArray,
+  m as unrefObject
+};

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

@@ -1,8 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-    styles: ({ props, colors, css }: ThemeParams) => (string | object)[];
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { AlertProps } from './Alert.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<AlertProps, InternalClasses> {
+}
+export interface AlertTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<AlertProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,41 @@
+const l = {
+  classes: {
+    wrapper: "flex items-center rounded-md space-x-2 px-4 py-2 border"
+  },
+  styles: ({ props: t, colors: n, css: a }) => {
+    const e = n.getPalette(t.color), r = [];
+    return t.glow && r.push(a.get("glow", n.getColorOpacity(e[500], 0.5))), t.color ? (t.light ? r.push(a.variables({
+      bg: e[50],
+      text: e[600],
+      icon: e[600],
+      border: t.outlined ? e[600] : e[50],
+      dark: {
+        bg: e[200],
+        text: e[800],
+        icon: e[600],
+        border: t.outlined ? e[500] : e[200]
+      }
+    })) : r.push(a.variables({
+      bg: t.outlined ? "transparent" : e[600],
+      text: t.outlined ? e[600] : e[50],
+      icon: t.outlined ? e[600] : e[50],
+      border: e[600],
+      dark: {
+        border: e[400],
+        text: t.outlined ? e[400] : e[50]
+      }
+    })), r) : (r.push(a.variables({
+      bg: "transparent",
+      text: e[500],
+      border: e[300],
+      dark: {
+        bg: "transparent",
+        text: e[300],
+        border: e[500]
+      }
+    })), r);
+  }
+}, o = l;
+export {
+  o as default
+};

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

@@ -1,20 +1,37 @@
-import { type PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    type: PropType<"success" | "warning" | "error" | "info" | undefined>;
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+declare const alertType: readonly ["info", "success", "error", "warning"];
+declare const alertProps: {
+    type: PropType<"error" | "success" | "warning" | "info">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
     removable: BooleanConstructor;
+    closeLabel: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+};
+export type AlertType = typeof alertType[number];
+export type AlertProps = ExtractPublicPropTypes<typeof alertProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    type: PropType<"error" | "success" | "warning" | "info">;
+    glow: BooleanConstructor;
+    light: BooleanConstructor;
+    outlined: BooleanConstructor;
+    removable: BooleanConstructor;
+    closeLabel: StringConstructor;
     color: {
         readonly type: StringConstructor;
         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<"success" | "warning" | "error" | "info" | undefined>;
+    type: PropType<"error" | "success" | "warning" | "info">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
     removable: BooleanConstructor;
+    closeLabel: StringConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -22,10 +39,19 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    glow: boolean;
-    light: boolean;
+    color: string;
     outlined: boolean;
+    light: boolean;
+    glow: boolean;
     removable: boolean;
-    color: string;
+}, {}>, {
+    icon?(_: {}): any;
+    default?(_: {}): any;
+    removeIcon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+import s from "./Alert.vue2.js";
+import o from "./Alert.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,62 @@
+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 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 = {
+  ...I.props(),
+  type: String,
+  glow: Boolean,
+  light: Boolean,
+  outlined: Boolean,
+  removable: Boolean,
+  closeLabel: String
+}, F = {
+  name: "XAlert",
+  validators: {
+    type: _
+  }
+}, H = /* @__PURE__ */ v({
+  ...F,
+  props: A,
+  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);
+    return (e, s) => (l(), a("div", {
+      style: k(r(u)),
+      class: w([
+        r(d),
+        e.$style.alert,
+        e.glow ? e.$style["alert--glow"] : "",
+        r(f).wrapper
+      ])
+    }, [
+      t(e.$slots, "icon", {}, () => [
+        e.type ? (l(), b(c, {
+          key: 0,
+          icon: p.value,
+          class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
+        }, null, 8, ["icon"])) : i("", !0)
+      ]),
+      n("div", null, [
+        t(e.$slots, "default")
+      ]),
+      e.removable ? (l(), a(B, { key: 0 }, [
+        L,
+        n("button", {
+          class: "shrink-0",
+          "aria-label": e.closeLabel,
+          onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))
+        }, [
+          t(e.$slots, "removeIcon", {}, () => [
+            $(c, { icon: r(z) }, null, 8, ["icon"])
+          ])
+        ], 8, T)
+      ], 64)) : i("", !0)
+    ], 6));
+  }
+});
+export {
+  H as default
+};

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

@@ -0,0 +1,8 @@
+const l = "_alert_rqxly_2", t = {
+  alert: l,
+  "alert--glow": "_alert--glow_rqxly_1"
+};
+export {
+  l as alert,
+  t as default
+};

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

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

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

@@ -1,8 +1,14 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper({ props }: ThemeParams): string[];
-    };
-    styles({ props, colors, css, data }: ThemeParams): Record<string, string>;
+import type { Ref } from 'vue';
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { AvatarProps } from './Avatar.vue';
+type InternalClasses = 'wrapper';
+type InternalExtraData = {
+    source: Ref<string | undefined>;
 };
-export default _default;
+interface InternalTheme extends ThemeComponent<AvatarProps, InternalClasses, InternalExtraData> {
+}
+export interface AvatarTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<AvatarProps, InternalClasses, InternalExtraData>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,25 @@
+const n = {
+  classes: {
+    wrapper({ props: e }) {
+      const t = ["relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"];
+      return t.push(e.rounded ? "rounded-full" : "rounded-md"), e.size === "xs" ? t.push("h-6 w-6 text-xs") : e.size === "sm" ? t.push("h-9 w-9 text-sm") : e.size === "lg" ? t.push("h-12 w-12 text-lg") : e.size === "xl" ? t.push("h-[3.75rem] w-[3.75rem] text-xl") : t.push("h-10 w-10"), t;
+    }
+  },
+  styles({ props: e, colors: t, css: r, data: l }) {
+    const s = t.getPalette(e.color);
+    return l.source ? r.variables({
+      bg: "transparent",
+      border: e.outlined ? s[500] : "transparent"
+    }) : r.variables({
+      bg: s[100],
+      text: s[500],
+      border: e.outlined ? s[500] : "transparent",
+      dark: {
+        bg: s[900]
+      }
+    });
+  }
+}, i = n;
+export {
+  i as default
+};

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

@@ -1,4 +1,26 @@
-declare const _default: import("vue").DefineComponent<{
+import { type ExtractPublicPropTypes } from 'vue';
+declare const avatarProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: StringConstructor;
+    alt: StringConstructor;
+    image: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -37,10 +59,17 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").Size;
-    outlined: boolean;
     color: string;
+    size: import("../../composables/common").Size;
     tag: string;
+    outlined: boolean;
     rounded: boolean;
+}, {}>, {
+    avatarIcon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+import s from "./Avatar.vue2.js";
+import o from "./Avatar.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,76 @@
+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 { avatarIcon as $ } from "../../common/icons.js";
+import D from "../icon/Icon.vue.js";
+import V from "./Avatar.theme.js";
+const b = ["alt", "src"], A = {
+  key: 1,
+  class: "leading-none"
+}, E = {
+  ...i.props(),
+  ...I.props("primary"),
+  tag: {
+    type: String,
+    default: "div"
+  },
+  name: String,
+  alt: String,
+  image: String,
+  outlined: Boolean,
+  rounded: Boolean
+}, P = {
+  name: "XAvatar",
+  validators: i.validators()
+}, H = /* @__PURE__ */ d({
+  ...P,
+  props: E,
+  setup(l) {
+    const a = l, o = f(), m = g(() => {
+      if (a.name) {
+        const e = a.name.match(/\b\w/g) || [];
+        return ((e.shift() || "") + (e.pop() || "")).toUpperCase();
+      }
+      return "";
+    });
+    typeof window < "u" && Image && v(() => a.image, (e) => {
+      if (o.value = void 0, !e)
+        return;
+      const t = new Image();
+      t.onload = () => {
+        o.value = a.image;
+      }, t.onerror = () => {
+      }, t.src = e;
+    }, {
+      immediate: !0
+    });
+    const { styles: p, classes: c, className: u } = N("avatar", V, a, { source: o });
+    return (e, t) => (n(), y(h(e.tag), {
+      style: w(r(p)),
+      class: C([
+        r(u),
+        e.$style.avatar,
+        r(c).wrapper
+      ])
+    }, {
+      default: S(() => [
+        o.value ? (n(), s("img", {
+          key: 0,
+          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, {
+            size: e.size,
+            icon: r($)
+          }, null, 8, ["size", "icon"])
+        ])
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  H as default
+};

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

@@ -0,0 +1,7 @@
+const a = "_avatar_7u83c_2", t = {
+  avatar: a
+};
+export {
+  a as avatar,
+  t as default
+};

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

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

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

@@ -1,8 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-    styles({ props, colors, css }: ThemeParams): string;
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { BadgeProps } from './Badge.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<BadgeProps, InternalClasses> {
+}
+export interface BadgeTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<BadgeProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

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

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

@@ -1,5 +1,7 @@
-import { type PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const badgeAlign: readonly ["left", "right"];
+declare const badgePosition: readonly ["top", "bottom"];
+declare const badgeProps: {
     tag: {
         type: StringConstructor;
         default: string;
@@ -12,8 +14,43 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
-    offsetX: (NumberConstructor | StringConstructor)[];
-    offsetY: (NumberConstructor | StringConstructor)[];
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
+    animated: BooleanConstructor;
+    outlined: BooleanConstructor;
+    icon: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type BadgePosition = typeof badgePosition[number];
+export type BadgeAlign = typeof badgeAlign[number];
+export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
     animated: BooleanConstructor;
     outlined: BooleanConstructor;
     icon: StringConstructor;
@@ -43,8 +80,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
-    offsetX: (NumberConstructor | StringConstructor)[];
-    offsetY: (NumberConstructor | StringConstructor)[];
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
     animated: BooleanConstructor;
     outlined: BooleanConstructor;
     icon: StringConstructor;
@@ -62,13 +99,21 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").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;
+}, {}>, {
+    default?(_: {}): any;
+    content?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};