@nuxt/ui 2.9.0 → 2.11.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"

package/dist/module.mjs

@@ -3,7 +3,6 @@ import defaultColors from 'tailwindcss/colors.js';
 import { defaultExtractor as defaultExtractor$1 } from 'tailwindcss/lib/lib/defaultExtractor.js';
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';
 import { kebabCase, upperFirst, camelCase } from 'scule';
-import { dirname } from 'pathe';
 
 
 
@@ -15,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.9.0";
+const version = "2.11.0";
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -194,6 +193,23 @@ const safelistByComponent = {
     pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
     variants: ["focus-visible"]
   }],
+  progress: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  meter: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
   notification: (colorsAsRegex2) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
     variants: ["dark"]
@@ -204,12 +220,20 @@ const safelistByComponent = {
     variants: ["dark"]
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  chip: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
   }]
 };
 const safelistComponentAliasesMap = {
   "USelect": "UInput",
   "USelectMenu": "UInput",
-  "UTextarea": "UInput"
+  "UTextarea": "UInput",
+  "URadioGroup": "URadio",
+  "UMeterGroup": "UMeter"
 };
 const colorsAsRegex = (colors) => colors.join("|");
 const excludeColors = (colors) => {
@@ -271,7 +295,7 @@ function createTemplates(nuxt = useNuxt()) {
     getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
     write: true
   });
-  nuxt.options.alias["#ui-colors"] = dirname(template.dst);
+  nuxt.options.alias["#ui-colors"] = template.dst;
   nuxt.hook("prepare:types", (opts) => {
     opts.references.push({ path: typesTemplate.dst });
   });
@@ -350,9 +374,10 @@ const module = defineNuxtModule({
       tailwindConfig.safelist = tailwindConfig.safelist || [];
       tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors));
       tailwindConfig.plugins = tailwindConfig.plugins || [];
-      tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons) }));
+      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === "all" ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {}));
     });
     createTemplates(nuxt);
+    await installModule("nuxt-icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
     await installModule("@nuxtjs/tailwindcss", {
       exposeConfig: true,
@@ -368,7 +393,7 @@ const module = defineNuxtModule({
         content: {
           files: [
             resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-            resolve(runtimeDir, "*.{mjs,js,ts}")
+            resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}")
           ],
           transform: {
             vue: (content) => {
@@ -379,6 +404,7 @@ const module = defineNuxtModule({
             vue: (content) => {
               return [
                 ...defaultExtractor(content),
+                // @ts-ignore
                 ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors)
               ];
             }

package/dist/runtime/components/data/Table.vue

@@ -146,19 +146,20 @@ export default defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "update:sort"],
   setup(props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI("table", toRef(props, "ui"), config, toRef(props, "class"));
     const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ["click"])).map((key) => ({ key, label: upperFirst(key), sortable: false })));
     const sort = ref(defu({}, props.sort, { column: null, direction: "asc" }));
+    const defaultSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
       if (!sort.value?.column) {
         return props.rows;
       }
       const { column, direction } = sort.value;
       return props.rows.slice().sort((a, b) => {
-        const aValue = a[column];
-        const bValue = b[column];
+        const aValue = get(a, column);
+        const bValue = get(b, column);
         if (aValue === bValue) {
           return 0;
         }
@@ -205,13 +206,14 @@ export default defineComponent({
       if (sort.value.column === column.key) {
         const direction = !column.direction || column.direction === "asc" ? "desc" : "asc";
         if (sort.value.direction === direction) {
-          sort.value = defu({}, props.sort, { column: null, direction: "asc" });
+          sort.value = defu({}, defaultSort, { column: null, direction: "asc" });
         } else {
           sort.value.direction = sort.value.direction === "asc" ? "desc" : "asc";
         }
       } else {
         sort.value = { column: column.key, direction: column.direction || "asc" };
       }
+      emit("update:sort", sort.value);
     }
     function onSelect(row) {
       if (!$attrs.onSelect) {
@@ -221,10 +223,10 @@ export default defineComponent({
     }
     function selectAllRows() {
       props.rows.forEach((row) => {
-        if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
+        if (isSelected(row)) {
           return;
         }
-        $attrs.onSelect ? $attrs.onSelect(row) : selected.value.push(row);
+        selected.value.push(row);
       });
     }
     function onChange(event) {

package/dist/runtime/components/data/Table.vue.d.ts

@@ -108,7 +108,7 @@ declare const _default: import("vue").DefineComponent<{
     onSelect: (row: any) => void;
     onChange: (event: any) => void;
     getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: null;
@@ -185,6 +185,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
 }, {
     sort: {
         column: string;

package/dist/runtime/components/elements/Accordion.vue

@@ -1,7 +1,14 @@
 <template>
   <div :class="ui.wrapper">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
-      <HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
+      <HDisclosureButton
+        :ref="() => buttonRefs[index] = { open, close }"
+        as="template"
+        :disabled="item.disabled"
+        @click="closeOthers(index, $event)"
+        @keydown.enter="closeOthers(index, $event)"
+        @keydown.space="closeOthers(index, $event)"
+      >
         <slot :item="item" :index="index" :open="open" :close="close">
           <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
             <template #trailing>
@@ -18,8 +25,6 @@
         </slot>
       </HDisclosureButton>
 
-      <StateEmitter :open="open" @open="closeOthers(index)" />
-
       <Transition
         v-bind="ui.transition"
         @enter="onEnter"
@@ -46,7 +51,6 @@ import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, omit } from "../../utils";
-import StateEmitter from "../../utils/StateEmitter";
 import appConfig from "#build/app.config";
 import { accordion, button } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.accordion, accordion);
@@ -57,8 +61,7 @@ export default defineComponent({
     HDisclosureButton,
     HDisclosurePanel,
     UIcon,
-    UButton,
-    StateEmitter
+    UButton
   },
   inheritAttrs: false,
   props: {
@@ -95,16 +98,15 @@ export default defineComponent({
     const { ui, attrs } = useUI("accordion", toRef(props, "ui"), config, toRef(props, "class"));
     const uiButton = computed(() => configButton);
     const buttonRefs = ref([]);
-    function closeOthers(currentIndex) {
+    function closeOthers(currentIndex, e) {
       if (!props.items[currentIndex].closeOthers && props.multiple) {
         return;
       }
-      const totalItems = buttonRefs.value.length;
-      const order = Array.from({ length: totalItems }, (_, i) => (currentIndex + i) % totalItems).filter((index) => index !== currentIndex).reverse();
-      for (const index of order) {
-        const close = buttonRefs.value[index];
-        close();
-      }
+      buttonRefs.value.forEach((button2) => {
+        if (button2.open) {
+          button2.close(e.target);
+        }
+      });
     }
     function onEnter(el, done) {
       el.style.height = "0";

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -36,8 +36,11 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    buttonRefs: import("vue").Ref<Function[]>;
-    closeOthers: (currentIndex: number) => void;
+    buttonRefs: import("vue").Ref<{
+        open: boolean;
+        close: (e: EventTarget) => {};
+    }[]>;
+    closeOthers: (currentIndex: number, e: Event) => void;
     omit: typeof omit;
     onEnter: (el: HTMLElement, done: any) => void;
     onBeforeLeave: (el: HTMLElement) => void;

package/dist/runtime/components/elements/Alert.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
-    <div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
+    <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
       <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
@@ -16,14 +16,14 @@
           </slot>
         </p>
 
-        <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
+        <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
           <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
         </div>
       </div>
-      <div class="flex-shrink-0 flex items-center gap-3">
-        <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
+      <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
+        <template v-if="!description && !$slots.description && actions.length">
           <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
-        </div>
+        </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
       </div>
@@ -117,7 +117,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      alertClass
+      alertClass,
+      twMerge
     };
   }
 });

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button } from '../../types';
+import type { Avatar, Button, AlertVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<AlertVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -51,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     alertClass: import("vue").ComputedRef<string>;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
@@ -84,7 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<AlertVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -99,6 +100,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
     description: string;
     icon: string;
     avatar: Avatar;
@@ -107,8 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         click?: Function | undefined;
     })[];
     color: any;
-    ui: Partial<any>;
     class: any;
-    variant: any;
+    variant: AlertVariant;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Avatar.vue.d.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     src: {
         type: (BooleanConstructor | StringConstructor)[];
@@ -17,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<AvatarSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -78,7 +79,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<AvatarSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -110,12 +111,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     alt: string;
-    icon: string;
+    size: AvatarSize;
     ui: Partial<any>;
+    icon: string;
     class: any;
     src: string | boolean;
     text: string;
-    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
     chipColor: any;
     chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     chipText: string | number;

package/dist/runtime/components/elements/AvatarGroup.d.ts

@@ -1,7 +1,8 @@
 import type { PropType } from 'vue';
+import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<AvatarSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -21,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<AvatarSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -38,9 +39,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: AvatarSize;
     ui: Partial<any>;
     class: any;
-    size: string | number | symbol;
     max: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Badge.vue

@@ -9,6 +9,7 @@ import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { badge } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.badge, badge);
@@ -54,13 +55,14 @@ export default defineComponent({
   },
   setup(props) {
     const { ui, attrs } = useUI("badge", toRef(props, "ui"), config);
+    const { size, rounded } = useInjectButtonGroup({ ui, props });
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
+        rounded.value,
+        ui.value.size[size.value],
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });

package/dist/runtime/components/elements/Badge.vue.d.ts

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue';
-import type { BadgeVariant } from '../../types';
+import type { BadgeSize, BadgeVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "lg">;
+        type: PropType<BadgeSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     badgeClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "lg">;
+        type: PropType<BadgeSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -62,11 +62,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    color: any;
+    size: BadgeSize;
     ui: Partial<any>;
+    color: any;
     class: any;
     label: string | number;
     variant: BadgeVariant;
-    size: "sm" | "md" | "xs" | "lg";
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Button.vue

@@ -23,6 +23,7 @@ import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { button } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
@@ -124,6 +125,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const { ui, attrs } = useUI("button", toRef(props, "ui"), config);
+    const { size, rounded } = useInjectButtonGroup({ ui, props });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
     });
@@ -136,10 +138,10 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
-        ui.value.gap[props.size],
-        props.padded && ui.value[isSquare.value ? "square" : "padding"][props.size],
+        rounded.value,
+        ui.value.size[size.value],
+        ui.value.gap[size.value],
+        props.padded && ui.value[isSquare.value ? "square" : "padding"][size.value],
         variant?.replaceAll("{color}", props.color),
         props.block ? "w-full flex justify-center items-center" : "inline-flex items-center"
       ), props.class);
@@ -159,14 +161,14 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && "animate-spin"
       );
     });
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && !isLeading.value && "animate-spin"
       );
     });

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ButtonVariant } from '../../types';
+import type { ButtonSize, ButtonVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     type: {
         type: StringConstructor;
@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -118,7 +118,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -173,16 +173,17 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: ButtonSize;
+    ui: Partial<any>;
+    truncate: boolean;
     icon: string;
     color: any;
-    ui: Partial<any>;
+    type: string;
     class: any;
     label: string;
-    type: string;
     loading: boolean;
     disabled: boolean;
     variant: ButtonVariant;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
     block: boolean;
     padded: boolean;
     loadingIcon: string;
@@ -191,6 +192,5 @@ declare const _default: import("vue").DefineComponent<{
     trailing: boolean;
     leading: boolean;
     square: boolean;
-    truncate: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -1,7 +1,8 @@
 import type { PropType } from 'vue';
+import type { ButtonSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -22,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -40,9 +41,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    orientation: "horizontal" | "vertical";
+    size: ButtonSize;
     ui: Partial<any>;
     class: any;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
-    orientation: "horizontal" | "vertical";
 }, {}>;
 export default _default;