@indielayer/ui 1.2.0 → 1.3.0

package/lib/components/breadcrumbs/Breadcrumbs.vue.d.ts

@@ -1,10 +1,12 @@
 import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const breadcrumbsProps: {
     items: PropType<BreadcrumbsItem[]>;
-    icon: {
+    separator: {
         type: StringConstructor;
         default: string;
     };
+    icon: StringConstructor;
     shadow: BooleanConstructor;
     underline: BooleanConstructor;
     color: {
@@ -22,12 +24,16 @@ export type BreadcrumbsItem = {
     underline?: boolean;
 };
 export type BreadcrumbsProps = ExtractPublicPropTypes<typeof breadcrumbsProps>;
+type InternalClasses = 'wrapper' | 'item' | 'separator';
+export interface BreadcrumbsTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     items: PropType<BreadcrumbsItem[]>;
-    icon: {
+    separator: {
         type: StringConstructor;
         default: string;
     };
+    icon: StringConstructor;
     shadow: BooleanConstructor;
     underline: BooleanConstructor;
     color: {
@@ -36,10 +42,11 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: PropType<BreadcrumbsItem[]>;
-    icon: {
+    separator: {
         type: StringConstructor;
         default: string;
     };
+    icon: StringConstructor;
     shadow: BooleanConstructor;
     underline: BooleanConstructor;
     color: {
@@ -48,8 +55,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     color: string;
+    separator: string;
     shadow: boolean;
-    icon: string;
     underline: boolean;
 }, {}>;
 export default _default;

package/lib/components/breadcrumbs/Breadcrumbs.vue.js

@@ -1,79 +1,69 @@
-import { defineComponent as w, computed as B, openBlock as r, createElementBlock as n, normalizeClass as a, unref as l, normalizeStyle as v, createElementVNode as C, Fragment as N, renderList as V, createVNode as d, withCtx as _, createBlock as p, createCommentVNode as c, createTextVNode as f, toDisplayString as h } from "vue";
-import { useTheme as z } from "../../composables/theme.js";
-import { arrowRightIcon as I } from "../../common/icons.js";
-import { useColors as S } from "../../composables/colors.js";
-import m from "../icon/Icon.vue.js";
-import E from "../link/Link.vue.js";
-import L from "./Breadcrumbs.theme.js";
-const T = {
-  ...S.props(),
+import { defineComponent as y, openBlock as o, createElementBlock as s, normalizeClass as n, unref as a, normalizeStyle as k, createElementVNode as B, Fragment as b, renderList as w, createVNode as g, withCtx as C, createBlock as i, createCommentVNode as l, createTextVNode as N, toDisplayString as m } from "vue";
+import { useTheme as S } from "../../composables/useTheme.js";
+import { useColors as V } from "../../composables/useColors.js";
+import u from "../icon/Icon.vue.js";
+import z from "../link/Link.vue.js";
+const v = { key: 1 }, E = {
+  ...V.props(),
   items: Array,
-  icon: {
+  separator: {
     type: String,
-    default: I
+    default: "/"
   },
+  icon: String,
   shadow: Boolean,
   underline: Boolean
-}, X = { name: "XBreadcrumbs" }, x = /* @__PURE__ */ w({
-  ...X,
-  props: T,
-  setup(y) {
-    const s = y, t = B(() => s.items && s.items.length > 0 ? s.items[s.items.length - 1] : void 0), { styles: b, classes: i, className: k } = z("breadcrumbs", L, s);
-    return (o, A) => {
-      var u;
-      return o.items && o.items.length > 0 ? (r(), n("nav", {
-        key: 0,
-        "aria-label": "Breadcrumb",
-        class: a(l(k)),
-        style: v(l(b))
+}, L = { name: "XBreadcrumbs" }, P = /* @__PURE__ */ y({
+  ...L,
+  props: E,
+  setup(d) {
+    const p = d, { styles: f, classes: t, className: h } = S("Breadcrumbs", {}, p);
+    return (e, T) => e.items && e.items.length > 0 ? (o(), s("nav", {
+      key: 0,
+      "aria-label": "Breadcrumb",
+      class: n(a(h)),
+      style: k(a(f))
+    }, [
+      B("ul", {
+        class: n(a(t).wrapper)
       }, [
-        C("ul", {
-          class: a(l(i).wrapper)
+        (o(!0), s(b, null, w(e.items, (r, c) => (o(), s("li", {
+          key: c,
+          class: n(a(t).item)
         }, [
-          (r(!0), n(N, null, V((u = o.items) == null ? void 0 : u.slice(0, -1), (e, g) => (r(), n("li", {
-            key: g,
-            class: a(l(i).item)
-          }, [
-            d(E, {
-              to: e.to,
-              href: e.href,
-              color: e.color || o.color,
-              shadow: e.shadow || o.shadow,
-              underline: e.underline || o.underline,
-              class: "flex items-center"
-            }, {
-              default: _(() => [
-                e.icon ? (r(), p(m, {
-                  key: 0,
-                  icon: e.icon,
-                  class: "mr-1.5"
-                }, null, 8, ["icon"])) : c("", !0),
-                f(" " + h(e.label), 1)
-              ]),
-              _: 2
-            }, 1032, ["to", "href", "color", "shadow", "underline"]),
-            d(m, {
-              icon: o.icon,
-              class: "text-gray-400 mx-1.5",
-              size: "sm"
-            }, null, 8, ["icon"])
-          ], 2))), 128)),
-          t.value ? (r(), n("li", {
+          g(z, {
+            to: r.to,
+            href: r.href,
+            color: r.color || e.color,
+            shadow: r.shadow || e.shadow,
+            underline: r.underline || e.underline,
+            class: "flex items-center"
+          }, {
+            default: C(() => [
+              r.icon ? (o(), i(u, {
+                key: 0,
+                icon: r.icon,
+                class: "mr-1.5"
+              }, null, 8, ["icon"])) : l("", !0),
+              N(" " + m(r.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["to", "href", "color", "shadow", "underline"]),
+          c !== e.items.length - 1 ? (o(), s("div", {
             key: 0,
-            class: a(l(i).lastItem)
+            class: n(a(t).separator)
           }, [
-            t.value.icon ? (r(), p(m, {
+            e.icon ? (o(), i(u, {
               key: 0,
-              icon: t.value.icon,
-              class: "mr-1"
-            }, null, 8, ["icon"])) : c("", !0),
-            f(" " + h(t.value.label), 1)
-          ], 2)) : c("", !0)
-        ], 2)
-      ], 6)) : c("", !0);
-    };
+              icon: e.icon,
+              size: "sm"
+            }, null, 8, ["icon"])) : e.separator ? (o(), s("span", v, m(e.separator), 1)) : l("", !0)
+          ], 2)) : l("", !0)
+        ], 2))), 128))
+      ], 2)
+    ], 6)) : l("", !0);
   }
 });
 export {
-  x as default
+  P as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XBreadcrumbs } from './Breadcrumbs.vue';
-export type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.vue';
-export type { BreadcrumbsTheme } from './Breadcrumbs.theme';
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsTheme } from './Breadcrumbs.vue';

package/lib/components/breadcrumbs/theme/Breadcrumbs.base.theme.d.ts

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

package/lib/components/breadcrumbs/{Breadcrumbs.theme.js → theme/Breadcrumbs.base.theme.js}

@@ -1,8 +1,8 @@
 const e = {
   classes: {
     wrapper: "flex items-center flex-wrap",
-    item: "flex items-center",
-    lastItem: "font-semibold"
+    item: "flex items-center last-of-type:font-semibold",
+    separator: "text-gray-400 mx-1.5"
   }
 }, t = e;
 export {

package/lib/components/breadcrumbs/theme/Breadcrumbs.carbon.theme.d.ts

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

package/lib/components/breadcrumbs/theme/Breadcrumbs.carbon.theme.js

@@ -0,0 +1,10 @@
+import e from "./Breadcrumbs.base.theme.js";
+const s = {
+  classes: {
+    ...e.classes,
+    wrapper: "flex items-center flex-wrap text-sm"
+  }
+}, a = s;
+export {
+  a as default
+};

package/lib/components/button/Button.vue.d.ts

@@ -1,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const buttonProps: {
     tag: {
         type: StringConstructor;
@@ -21,17 +22,28 @@ declare const buttonProps: {
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         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 ButtonProps = ExtractPublicPropTypes<typeof buttonProps>;
+type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight';
+type InternalExtraData = {
+    isButtonGroup: boolean;
+};
+export interface ButtonTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -54,12 +66,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         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;
     };
@@ -88,29 +105,35 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         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;
     };
 }>>, {
-    disabled: boolean;
+    size: import("../../composables/useCommon").Size;
     flat: boolean;
     type: string;
+    glow: boolean;
+    light: boolean;
+    outlined: boolean;
     color: string;
-    size: import("../../composables/common").Size;
-    block: boolean;
-    ghost: boolean;
     tag: string;
-    outlined: boolean;
     rounded: boolean;
-    light: boolean;
+    ghost: boolean;
+    block: boolean;
+    disabled: boolean;
     loading: boolean;
-    glow: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/button/Button.vue.js

@@ -3,7 +3,7 @@ import s from "./Button.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const c = {
   $style: s
-}, f = /* @__PURE__ */ t(o, [["__cssModules", c], ["__scopeId", "data-v-c70999f2"]]);
+}, m = /* @__PURE__ */ t(o, [["__cssModules", c], ["__scopeId", "data-v-46c0001b"]]);
 export {
-  f as default
+  m as default
 };

package/lib/components/button/Button.vue2.js

@@ -1,16 +1,15 @@
-import { defineComponent as j, ref as D, inject as I, computed as l, useAttrs as T, unref as t, openBlock as r, createBlock as a, resolveDynamicComponent as V, normalizeClass as u, normalizeStyle as A, withCtx as E, createCommentVNode as d, createElementVNode as F, renderSlot as K } from "vue";
-import { useTheme as O } from "../../composables/theme.js";
-import { useColors as X } from "../../composables/colors.js";
-import { useCommon as f } from "../../composables/common.js";
-import { useInteractive as b } from "../../composables/interactive.js";
+import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as e, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
+import { useTheme as O } from "../../composables/useTheme.js";
+import { useColors as X } from "../../composables/useColors.js";
+import { useCommon as b } from "../../composables/useCommon.js";
+import { useInteractive as h } from "../../composables/useInteractive.js";
 import { injectButtonGroupKey as q } from "../../composables/keys.js";
-import H from "../spinner/Spinner.vue.js";
-import m from "../icon/Icon.vue.js";
-import J from "./Button.theme.js";
-const M = {
-  ...f.props(),
-  ...X.props(),
+import H from "../loader/Loader.vue.js";
+import f from "../icon/Icon.vue.js";
+const J = {
   ...b.props(),
+  ...X.props(),
+  ...h.props(),
   tag: {
     type: String,
     default: "button"
@@ -30,78 +29,81 @@ const M = {
   light: Boolean,
   block: Boolean,
   flat: Boolean
-}, Q = {
+}, M = {
   name: "XButton",
   validators: {
-    ...f.validators()
+    ...b.validators()
   }
-}, so = /* @__PURE__ */ j({
-  ...Q,
-  props: M,
-  setup(h, { expose: y }) {
-    const e = h, g = D(null), s = I(q, {
+}, eo = /* @__PURE__ */ D({
+  ...M,
+  props: J,
+  setup(y, { expose: v }) {
+    const t = y, g = I(null), s = T(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: v } = s, n = l(() => s.groupProps.size || e.size), B = l(() => s.groupProps.flat || e.flat), z = l(() => e.color || s.groupProps.color), k = l(() => e.ghost || s.groupProps.ghost), P = l(() => e.light || s.groupProps.light), S = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), w = T(), C = l(() => w.href ? "a" : e.to ? "router-link" : e.tag), R = l(() => ({
-      size: t(n),
-      flat: t(B),
-      color: t(z),
-      ghost: t(k),
-      light: t(P),
-      outlined: t(S),
-      disabled: t(i),
-      loading: e.loading,
-      block: e.block,
-      glow: e.glow,
-      iconLeft: t(p),
-      iconRight: e.iconRight,
-      rounded: e.rounded
-    })), { className: L, classes: c, styles: G } = O("button", J, R, {
-      isButtonGroup: v
-    }), { focus: $, blur: N } = b(g);
-    return y({ focus: $, blur: N }), (o, U) => (r(), a(V(C.value), {
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || t.size), z = l(() => s.groupProps.flat || t.flat), k = l(() => t.color || s.groupProps.color), P = l(() => t.ghost || s.groupProps.ghost), S = l(() => t.light || s.groupProps.light), w = l(() => t.outlined || s.groupProps.outlined), i = l(() => t.disabled || s.groupProps.disabled), p = l(() => t.icon || t.iconLeft), C = V(), R = l(() => C.href ? "a" : t.to ? "router-link" : t.tag), L = l(() => ({
+      size: e(n),
+      flat: e(z),
+      color: e(k),
+      ghost: e(P),
+      light: e(S),
+      outlined: e(w),
+      disabled: e(i),
+      loading: t.loading,
+      block: t.block,
+      glow: t.glow,
+      iconLeft: e(p),
+      iconRight: t.iconRight,
+      rounded: t.rounded
+    })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
+      isButtonGroup: B
+    }), { focus: N, blur: j } = h(g);
+    return v({ focus: N, blur: j }), (o, Q) => (a(), r(A(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
       class: u([
-        t(L),
+        e(G),
         o.$style.button,
         o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
-        t(c).wrapper,
+        e(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: A(t(G)),
+      style: E(e($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
       type: o.tag === "button" ? o.type : null
     }, {
-      default: E(() => [
-        o.loading ? (r(), a(H, {
+      default: F(() => [
+        o.loading ? (a(), r(H, {
           key: 0,
+          class: "absolute",
           size: n.value,
-          class: "absolute"
-        }, null, 8, ["size"])) : d("", !0),
-        p.value ? (r(), a(m, {
-          key: 1,
-          size: n.value,
-          icon: p.value,
-          class: u([
-            t(c).iconLeft,
-            { invisible: o.loading }
-          ])
-        }, null, 8, ["size", "icon", "class"])) : d("", !0),
-        F("span", {
+          label: o.loadingLabel,
+          status: o.loadingStatus
+        }, null, 8, ["size", "label", "status"])) : d("", !0),
+        m("div", {
           class: u({ invisible: o.loading })
         }, [
-          K(o.$slots, "default", {}, void 0, !0)
+          p.value ? (a(), r(f, {
+            key: 0,
+            size: n.value,
+            icon: p.value,
+            class: u([
+              e(c).iconLeft
+            ])
+          }, null, 8, ["size", "icon", "class"])) : d("", !0),
+          m("span", null, [
+            K(o.$slots, "default", {}, void 0, !0)
+          ])
         ], 2),
-        o.iconRight ? (r(), a(m, {
-          key: 2,
+        o.iconRight ? (a(), r(f, {
+          key: 1,
           size: n.value,
           icon: o.iconRight,
           class: u([
-            t(c).iconRight,
+            e(c).iconRight,
             { invisible: o.loading }
           ])
         }, null, 8, ["size", "icon", "class"])) : d("", !0)
@@ -111,5 +113,5 @@ const M = {
   }
 });
 export {
-  so as default
+  eo as default
 };

package/lib/components/button/ButtonGroup.vue.d.ts

@@ -1,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const buttonGroupProps: {
     tag: {
         type: StringConstructor;
@@ -11,12 +12,17 @@ declare const buttonGroupProps: {
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         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;
     };
@@ -26,6 +32,12 @@ export type ButtonGroupInjection = {
     groupProps: ButtonGroupProps;
     isButtonGroup: boolean;
 };
+type InternalClasses = 'wrapper';
+type InternalExtraData = {
+    isButtonGroupGroup: boolean;
+};
+export interface ButtonGroupTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -38,12 +50,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         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;
     };
@@ -59,26 +76,32 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         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;
     };
 }>>, {
-    disabled: boolean;
+    size: import("../../composables/useCommon").Size;
     flat: boolean;
+    light: boolean;
+    outlined: boolean;
     color: string;
-    size: import("../../composables/common").Size;
-    ghost: boolean;
     tag: string;
-    outlined: boolean;
     rounded: boolean;
-    light: boolean;
+    ghost: boolean;
+    disabled: boolean;
     loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/button/ButtonGroup.vue2.js

@@ -1,14 +1,13 @@
-import { defineComponent as a, provide as u, openBlock as m, createBlock as i, resolveDynamicComponent as d, normalizeStyle as f, unref as t, normalizeClass as c, withCtx as B, renderSlot as g } from "vue";
-import { useTheme as y } from "../../composables/theme.js";
-import { useCommon as r } from "../../composables/common.js";
-import { useColors as h } from "../../composables/colors.js";
-import { useInteractive as v } from "../../composables/interactive.js";
-import { injectButtonGroupKey as C } from "../../composables/keys.js";
-import b from "./ButtonGroup.theme.js";
+import { defineComponent as a, provide as u, openBlock as m, createBlock as i, resolveDynamicComponent as d, normalizeStyle as f, unref as t, normalizeClass as c, withCtx as B, renderSlot as y } from "vue";
+import { useTheme as g } from "../../composables/useTheme.js";
+import { useCommon as r } from "../../composables/useCommon.js";
+import { useColors as v } from "../../composables/useColors.js";
+import { useInteractive as C } from "../../composables/useInteractive.js";
+import { injectButtonGroupKey as h } from "../../composables/keys.js";
 const G = {
   ...r.props(),
-  ...h.props(),
   ...v.props(),
+  ...C.props(),
   tag: {
     type: String,
     default: "div"
@@ -23,17 +22,17 @@ const G = {
   validators: {
     ...r.validators()
   }
-}, I = /* @__PURE__ */ a({
+}, j = /* @__PURE__ */ a({
   ..._,
   props: G,
   setup(s) {
     const e = s;
-    u(C, {
+    u(h, {
       groupProps: e,
       isButtonGroup: !0
     });
-    const { className: n, classes: p, styles: l } = y("button-group", b, e);
-    return (o, S) => (m(), i(d(o.tag), {
+    const { className: n, classes: p, styles: l } = g("ButtonGroup", {}, e);
+    return (o, b) => (m(), i(d(o.tag), {
       style: f(t(l)),
       class: c([
         t(n),
@@ -43,12 +42,12 @@ const G = {
       ])
     }, {
       default: B(() => [
-        g(o.$slots, "default")
+        y(o.$slots, "default")
       ]),
       _: 3
     }, 8, ["style", "class"]));
   }
 });
 export {
-  I as default
+  j as default
 };