@nuxt/ui 2.10.0 → 2.11.0

package/dist/runtime/components/navigation/Breadcrumb.vue

@@ -0,0 +1,78 @@
+<template>
+  <nav aria-label="Breadcrumb" :class="ui.wrapper" v-bind="attrs">
+    <ol :class="ui.ol">
+      <li v-for="(link, index) in links" :key="index" :class="ui.li">
+        <ULink
+          as="span"
+          :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
+          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          :aria-current="index === links.length - 1 ? 'page' : undefined"
+        >
+          <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
+            />
+          </slot>
+
+          <slot :link="link" :index="index" :is-active="index === links.length - 1">
+            {{ link.label }}
+          </slot>
+        </ULink>
+
+        <slot v-if="index < links.length - 1" name="divider">
+          <template v-if="divider">
+            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" role="presentation" />
+            <span v-else role="presentation">{{ divider }}</span>
+          </template>
+        </slot>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import { defineComponent, toRef } from "vue";
+import UIcon from "../elements/Icon.vue";
+import ULink from "../elements/Link.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit } from "../../utils";
+import appConfig from "#build/app.config";
+import { breadcrumb } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);
+export default defineComponent({
+  components: {
+    UIcon,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    },
+    divider: {
+      type: String,
+      default: () => config.default.divider
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("breadcrumb", toRef(props, "ui"), config, toRef(props, "class"));
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      omit
+    };
+  }
+});
+</script>

package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts

@@ -0,0 +1,50 @@
+import type { PropType } from 'vue';
+import { omit } from '../../utils';
+import type { BreadcrumbLink } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    links: {
+        type: PropType<BreadcrumbLink[]>;
+        default: () => never[];
+    };
+    divider: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    omit: typeof omit;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    links: {
+        type: PropType<BreadcrumbLink[]>;
+        default: () => never[];
+    };
+    divider: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    ui: Partial<any>;
+    class: any;
+    divider: string;
+    links: BreadcrumbLink[];
+}, {}>;
+export default _default;

package/dist/runtime/components/navigation/CommandPalette.vue

@@ -181,7 +181,7 @@ export default defineComponent({
     const isLoading = ref(false);
     onMounted(() => {
       if (props.autoselect) {
-        activateFirstOption();
+        activateNextOption();
       }
     });
     onMounted(() => {
@@ -254,12 +254,11 @@ export default defineComponent({
         searchResults.value[group.key] = await group.search(query.value);
       }));
       isLoading.value = false;
+      activateFirstOption();
     }, props.debounce);
     watch(query, () => {
       debouncedSearch();
-      setTimeout(() => {
-        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
-      }, 0);
+      activateFirstOption();
     });
     const iconName = computed(() => {
       if ((props.loading || isLoading.value) && props.loadingIcon) {
@@ -276,6 +275,11 @@ export default defineComponent({
     });
     const emptyState = computed(() => ({ ...ui.value.default.emptyState, ...props.emptyState }));
     function activateFirstOption() {
+      setTimeout(() => {
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
+      }, 0);
+    }
+    function activateNextOption() {
       setTimeout(() => {
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
       }, 0);

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -196,9 +196,9 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
     icon: string;
     closeButton: Button;
-    ui: Partial<any>;
     class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Button } from '../../types';
+import type { Button, ButtonSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -101,7 +101,7 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -152,9 +152,9 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    size: ButtonSize;
     ui: Partial<any>;
     class: any;
-    size: string | number | symbol;
     max: number;
     divider: string;
     pageCount: number;

package/dist/runtime/components/navigation/Tabs.vue.d.ts

@@ -66,11 +66,11 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    orientation: "horizontal" | "vertical";
     ui: Partial<any>;
     class: any;
     modelValue: number;
     items: TabItem[];
-    orientation: "horizontal" | "vertical";
     defaultIndex: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Notification.vue

@@ -2,40 +2,38 @@
   <Transition appear v-bind="ui.transition">
     <div
       :class="wrapperClass"
-      role="status" 
+      role="status"
       v-bind="attrs"
-      @mouseover="onMouseover" 
+      @mouseover="onMouseover"
       @mouseleave="onMouseleave"
     >
       <div :class="[ui.container, ui.rounded, ui.ring]">
-        <div :class="ui.padding">
-          <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
-            <UIcon v-if="icon" :name="icon" :class="iconClass" />
-            <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+        <div class="flex" :class="[ui.padding, ui.gap, { 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }]">
+          <UIcon v-if="icon" :name="icon" :class="iconClass" />
+          <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-            <div class="w-0 flex-1">
-              <p :class="ui.title">
-                <slot name="title" :title="title">
-                  {{ title }}
-                </slot>
-              </p>
-              <p v-if="(description || $slots.description)" :class="ui.description">
-                <slot name="description" :description="description">
-                  {{ description }}
-                </slot>
-              </p>
+          <div class="w-0 flex-1">
+            <p :class="ui.title">
+              <slot name="title" :title="title">
+                {{ title }}
+              </slot>
+            </p>
+            <p v-if="(description || $slots.description)" :class="ui.description">
+              <slot name="description" :description="description">
+                {{ description }}
+              </slot>
+            </p>
 
-              <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+            <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="onAction(action)" />
             </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">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+          </div>
+          <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="onAction(action)" />
+            </template>
 
-              <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
-            </div>
+            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
           </div>
         </div>
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -90,7 +88,7 @@ export default defineComponent({
     },
     timeout: {
       type: Number,
-      default: 5e3
+      default: () => config.default.timeout
     },
     actions: {
       type: Array,
@@ -200,7 +198,8 @@ export default defineComponent({
       onMouseover,
       onMouseleave,
       onClose,
-      onAction
+      onAction,
+      twMerge
     };
   }
 });

package/dist/runtime/components/overlays/Notification.vue.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     actions: {
         type: PropType<NotificationAction[]>;
@@ -65,6 +65,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseleave: () => void;
     onClose: () => void;
     onAction: (action: NotificationAction) => void;
+    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<{
     id: {
         type: (NumberConstructor | StringConstructor)[];
@@ -92,7 +93,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     actions: {
         type: PropType<NotificationAction[]>;
@@ -118,6 +119,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
     description: string;
     icon: string;
     avatar: Avatar;
@@ -126,7 +128,6 @@ declare const _default: import("vue").DefineComponent<{
     actions: NotificationAction[];
     callback: Function;
     color: any;
-    ui: Partial<any>;
     class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Notifications.vue

@@ -1,20 +1,22 @@
 <template>
-  <div :class="wrapperClass" role="region" v-bind="attrs">
-    <div v-if="notifications.length" :class="ui.container">
-      <div v-for="notification of notifications" :key="notification.id">
-        <UNotification
-          v-bind="notification"
-          :class="notification.click && 'cursor-pointer'"
-          @click="notification.click && notification.click(notification)"
-          @close="toast.remove(notification.id)"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-          </template>
-        </UNotification>
+  <Teleport to="body">
+    <div :class="wrapperClass" role="region" v-bind="attrs">
+      <div v-if="notifications.length" :class="ui.container">
+        <div v-for="notification of notifications" :key="notification.id">
+          <UNotification
+            v-bind="notification"
+            :class="notification.click && 'cursor-pointer'"
+            @click="notification.click && notification.click(notification)"
+            @close="toast.remove(notification.id)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData" />
+            </template>
+          </UNotification>
+        </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script>

package/dist/runtime/components/overlays/Popover.vue

@@ -15,6 +15,10 @@
       </slot>
     </HPopoverButton>
 
+    <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
+      <div v-if="(open !== undefined) ? open : headlessOpen" :class="[ui.overlay.base, ui.overlay.background]" @click="$emit('update:open')" />
+    </Transition>
+
     <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
@@ -67,6 +71,10 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
     popper: {
       type: Object,
       default: () => ({})
@@ -80,6 +88,7 @@ export default defineComponent({
       default: void 0
     }
   },
+  emits: ["update:open"],
   setup(props) {
     const { ui, attrs } = useUI("popover", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -22,6 +22,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
@@ -56,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: PropType<"click" | "hover">;
         default: string;
@@ -78,6 +82,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
@@ -90,7 +98,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}, {
     ui: Partial<any>;
     popper: PopperOptions;
     class: any;
@@ -99,5 +109,6 @@ declare const _default: import("vue").DefineComponent<{
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;
+    overlay: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/composables/defineShortcuts.d.ts

@@ -2,7 +2,7 @@ import type { WatchSource } from 'vue';
 export interface ShortcutConfig {
     handler: Function;
     usingInput?: string | boolean;
-    whenever?: WatchSource<Boolean>[];
+    whenever?: WatchSource<boolean>[];
 }
 export interface ShortcutsConfig {
     [key: string]: ShortcutConfig | Function;

package/dist/runtime/composables/defineShortcuts.mjs

@@ -2,6 +2,8 @@ import { ref, computed } from "vue";
 import { logicAnd, logicNot } from "@vueuse/math";
 import { useEventListener, useDebounceFn } from "@vueuse/core";
 import { useShortcuts } from "./useShortcuts.mjs";
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 export const defineShortcuts = (config, options = {}) => {
   const { macOS, usingInput } = useShortcuts();
   let shortcuts = [];
@@ -58,11 +60,13 @@ export const defineShortcuts = (config, options = {}) => {
       return null;
     }
     let shortcut;
-    if (key.includes("-") && key.includes("_")) {
-      console.trace("[Shortcut] Invalid key");
-      return null;
+    if (key.includes("-") && key !== "-" && !key.match(chainedShortcutRegex)?.length) {
+      console.trace(`[Shortcut] Invalid key: "${key}"`);
+    }
+    if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
+      console.trace(`[Shortcut] Invalid key: "${key}"`);
     }
-    const chained = key.includes("-");
+    const chained = key.includes("-") && key !== "-";
     if (chained) {
       shortcut = {
         key: key.toLowerCase(),

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import { buttonGroup } from '#ui/ui.config';
+type ButtonGroupProps = {
+    orientation?: Ref<'horizontal' | 'vertical'>;
+    size?: Ref<string>;
+    ui?: Ref<Partial<typeof buttonGroup>>;
+    rounded?: Ref<{
+        start: string;
+        end: string;
+    }>;
+};
+export declare function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps): void;
+export declare function useInjectButtonGroup({ ui, props }: {
+    ui: any;
+    props: any;
+}): {
+    size: import("vue").ComputedRef<any>;
+    rounded: import("vue").ComputedRef<any>;
+};
+export {};

package/dist/runtime/composables/useButtonGroup.mjs

@@ -0,0 +1,52 @@
+import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from "vue";
+export function useProvideButtonGroup(buttonGroupProps) {
+  const instance = getCurrentInstance();
+  const groupKey = `group-${instance.uid}`;
+  const state = ref({
+    children: [],
+    register(child) {
+      this.children.push(child);
+    },
+    unregister(child) {
+      const index = this.children.indexOf(child);
+      if (index > -1) {
+        this.children.splice(index, 1);
+      }
+    },
+    ...buttonGroupProps
+  });
+  provide(groupKey, state);
+}
+export function useInjectButtonGroup({ ui, props }) {
+  const instance = getCurrentInstance();
+  let parent = instance.parent;
+  let groupContext;
+  while (parent && !groupContext) {
+    if (parent.type.name === "ButtonGroup") {
+      groupContext = inject(`group-${parent.uid}`);
+      break;
+    }
+    parent = parent.parent;
+  }
+  const positionInGroup = computed(() => groupContext?.value.children.indexOf(instance));
+  onMounted(() => {
+    groupContext?.value.register(instance);
+  });
+  onUnmounted(() => {
+    groupContext?.value.unregister(instance);
+  });
+  return {
+    size: computed(() => groupContext?.value.size || props.size),
+    rounded: computed(() => {
+      if (!groupContext || positionInGroup.value === -1)
+        return ui.value.rounded;
+      if (groupContext.value.children.length === 1)
+        return groupContext.value.ui.rounded;
+      if (positionInGroup.value === 0)
+        return groupContext.value.rounded.start;
+      if (positionInGroup.value === groupContext.value.children.length - 1)
+        return groupContext.value.rounded.end;
+      return "rounded-none";
+    })
+  };
+}

package/dist/runtime/composables/useFormGroup.d.ts

@@ -1,11 +1,13 @@
 type InputProps = {
-    id?: string;
+    id?: string | null;
     size?: string | number | symbol;
     color?: string;
     name?: string;
+    isFieldset?: boolean;
+    eagerValidation?: boolean;
 };
 export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     name: import("vue").ComputedRef<string | undefined>;
     size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string | undefined>;

package/dist/runtime/composables/useFormGroup.mjs

@@ -1,12 +1,13 @@
 import { inject, ref, computed, onMounted } from "vue";
 import { useDebounceFn } from "@vueuse/core";
+import { uid } from "../utils/uid.mjs";
 export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
   const formGroup = inject("form-group", void 0);
   const formInputs = inject("form-inputs", void 0);
   const inputId = ref(inputProps?.id);
   onMounted(() => {
-    inputId.value = inputProps?.id ?? formGroup?.inputId.value;
+    inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid();
     if (formGroup) {
       formGroup.inputId.value = inputId.value;
       if (formInputs) {
@@ -28,7 +29,7 @@ export const useFormGroup = (inputProps, config) => {
     emitFormEvent("change", formGroup?.name.value);
   }
   const emitFormInput = useDebounceFn(() => {
-    if (blurred.value) {
+    if (blurred.value || formGroup?.eagerValidation.value) {
       emitFormEvent("input", formGroup?.name.value);
     }
   }, 300);

package/dist/runtime/composables/useShortcuts.d.ts

@@ -1,11 +1,11 @@
 export declare const _useShortcuts: () => {
-    macOS: import("vue").ComputedRef<any>;
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
     activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };
 export declare const useShortcuts: () => {
-    macOS: import("vue").ComputedRef<any>;
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
     activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;

package/dist/runtime/types/alert.d.ts

@@ -0,0 +1,7 @@
+import { alert } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
+export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>

package/dist/runtime/types/avatar.d.ts

@@ -1,7 +1,9 @@
 import { avatar } from '../ui.config'
+import type { ExtractDeepKey } from '.'
 import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
 
-export type AvatarSize = keyof typeof avatar.size
+export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>
 export type AvatarChipColor = 'gray' | typeof colors[number]
 export type AvatarChipPosition = keyof typeof avatar.chip.position