@nuxt/ui 2.9.0 → 2.11.0

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

@@ -1,20 +1,22 @@
 <template>
-  <div :class="wrapperClass" 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

@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -8,18 +8,25 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="open" :close="close">
+      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
         <button :disabled="disabled">
           Open
         </button>
       </slot>
     </HPopoverButton>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <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">
-        <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-          <slot name="panel" :open="open" :close="close" />
-        </HPopoverPanel>
+        <div>
+          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
+            <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
+          </HPopoverPanel>
+        </div>
       </Transition>
     </div>
   </HPopover>
@@ -48,6 +55,10 @@ export default defineComponent({
       default: "click",
       validator: (value) => ["click", "hover"].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -60,6 +71,10 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
     popper: {
       type: Object,
       default: () => ({})
@@ -73,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));
@@ -91,7 +107,13 @@ export default defineComponent({
     });
     const containerStyle = computed(() => {
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
-      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+      const padding = `${offsetDistance}px`;
+      return props.mode === "hover" ? {
+        paddingTop: padding,
+        paddingBottom: padding,
+        paddingLeft: padding,
+        paddingRight: padding
+      } : {};
     });
     function onMouseOver() {
       if (props.mode !== "hover" || !popoverApi.value) {
@@ -130,6 +152,8 @@ export default defineComponent({
       ui,
       attrs,
       popover: popover2,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       containerStyle,

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

@@ -6,6 +6,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -18,6 +22,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
@@ -36,23 +44,32 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     popover: any;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     } | {
         paddingTop?: undefined;
         paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
     }>;
     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;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -65,6 +82,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
@@ -77,13 +98,17 @@ 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;
     disabled: boolean;
+    open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;
+    overlay: boolean;
 }, {}>;
 export default _default;

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

@@ -76,8 +76,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: Partial<any>;
     class: any;

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

@@ -6,17 +6,21 @@
 
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
-        <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
-          <slot name="text">
-            {{ text }}
-          </slot>
+        <div>
+          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
 
-          <span v-if="shortcuts?.length" :class="ui.shortcuts">
-            <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
-            <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
-              {{ shortcut }}
-            </Ukbd>
-          </span>
+          <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
+            <slot name="text">
+              {{ text }}
+            </slot>
+  
+            <span v-if="shortcuts?.length" :class="ui.shortcuts">
+              <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+              <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
+                {{ shortcut }}
+              </Ukbd>
+            </span>
+          </div>
         </div>
       </Transition>
     </div>
@@ -109,6 +113,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       open,

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

@@ -38,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     open: import("vue").Ref<boolean>;

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,12 +1,14 @@
 type InputProps = {
-    id?: string;
-    size?: 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").ComputedRef<any>;
-    name: import("vue").ComputedRef<any>;
+    inputId: import("vue").Ref<string | null | undefined>;
+    name: import("vue").ComputedRef<string | undefined>;
     size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string | undefined>;
     emitFormBlur: () => void;

package/dist/runtime/composables/useFormGroup.mjs

@@ -1,11 +1,20 @@
-import { inject, ref, computed } from "vue";
+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);
-  if (formGroup) {
-    formGroup.inputId.value = inputProps?.id ?? formGroup?.inputId.value;
-  }
+  const formInputs = inject("form-inputs", void 0);
+  const inputId = ref(inputProps?.id);
+  onMounted(() => {
+    inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid();
+    if (formGroup) {
+      formGroup.inputId.value = inputId.value;
+      if (formInputs) {
+        formInputs.value[formGroup.name.value] = inputId;
+      }
+    }
+  });
   const blurred = ref(false);
   function emitFormEvent(type, path) {
     if (formBus) {
@@ -20,14 +29,17 @@ 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);
   return {
-    inputId: computed(() => inputProps.id ?? formGroup?.inputId.value),
+    inputId,
     name: computed(() => inputProps?.name ?? formGroup?.name.value),
-    size: computed(() => inputProps?.size ?? formGroup?.size.value ?? config?.default?.size),
+    size: computed(() => {
+      const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null;
+      return inputProps?.size ?? formGroupSize ?? config?.default?.size;
+    }),
     color: computed(() => formGroup?.error?.value ? "red" : inputProps?.color),
     emitFormBlur,
     emitFormInput,

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

@@ -1,10 +1,10 @@
 import type { Ref } from 'vue';
-import { VirtualElement } from '@popperjs/core/lib/popper-lite';
+import type { VirtualElement } from '@popperjs/core/lib/popper-lite';
 import type { Instance } from '@popperjs/core';
-import { MaybeElement } from '@vueuse/core';
+import type { MaybeElement } from '@vueuse/core';
 import type { PopperOptions } from '../types/popper';
 export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
-export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
+export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, arrow, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
     state: {
         elements: {
             reference: Element | {

package/dist/runtime/composables/usePopper.mjs

@@ -5,9 +5,10 @@ import offset from "@popperjs/core/lib/modifiers/offset";
 import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
 import computeStyles from "@popperjs/core/lib/modifiers/computeStyles";
 import eventListeners from "@popperjs/core/lib/modifiers/eventListeners";
+import arrowModifier from "@popperjs/core/lib/modifiers/arrow";
 import { unrefElement } from "@vueuse/core";
 export const createPopper = popperGenerator({
-  defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners]
+  defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners, arrowModifier]
 });
 export function usePopper({
   locked = false,
@@ -18,6 +19,7 @@ export function usePopper({
   adaptive = true,
   scroll = true,
   resize = true,
+  arrow = false,
   placement,
   strategy
 }, virtualReference) {
@@ -71,6 +73,10 @@ export function usePopper({
               scroll,
               resize
             }
+          },
+          {
+            name: "arrow",
+            enabled: arrow
           }
         ]
       };

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/composables/useUI.d.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
-import { Strategy } from '../types';
+import type { Strategy } from '../types';
 export declare const useUI: <T>(key: any, $ui: Ref<Partial<T & {
     strategy: Strategy;
-}> | undefined>, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>) => {
+}> | undefined>, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;

package/dist/runtime/composables/useUI.mjs

@@ -1,7 +1,7 @@
 import { computed, toValue, useAttrs } from "vue";
 import { useAppConfig } from "#imports";
 import { mergeConfig, omit, get } from "../utils/index.mjs";
-export const useUI = (key, $ui, $config, $wrapperClass) => {
+export const useUI = (key, $ui, $config, $wrapperClass, withAppConfig = false) => {
   const $attrs = useAttrs();
   const appConfig = useAppConfig();
   const ui = computed(() => {
@@ -12,7 +12,7 @@ export const useUI = (key, $ui, $config, $wrapperClass) => {
       _ui?.strategy || appConfig.ui?.strategy,
       _wrapperClass ? { wrapper: _wrapperClass } : {},
       _ui || {},
-      process.dev ? get(appConfig.ui, key, {}) : {},
+      process.dev || withAppConfig ? get(appConfig.ui, key, {}) : {},
       _config || {}
     );
   });

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
 

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

@@ -1,10 +1,11 @@
 import { badge } from '../ui.config'
-import type { NestedKeyOf } from '.'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
 import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
 
-export type BadgeSize = keyof typeof badge.size
-export type BadgeColor = keyof typeof badge.color | typeof colors[number]
-export type BadgeVariant = keyof typeof badge.variant | NestedKeyOf<typeof badge.color>
+export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>
+export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number]
+export type BadgeVariant = keyof typeof badge.variant | ExtractDeepKey<AppConfig, ['ui', 'badge', 'variant']> | NestedKeyOf<typeof badge.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'badge', 'color']>>
 
 export interface Badge {
   label?: string

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

@@ -0,0 +1,7 @@
+import type { Link } from './link'
+
+export interface BreadcrumbLink extends Link {
+  label: string
+  icon?: string
+  iconClass?: string
+}

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

@@ -1,11 +1,12 @@
 import type { Link } from './link'
 import { button } from '../ui.config'
-import type { NestedKeyOf } from '.'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
 import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
 
-export type ButtonSize = keyof typeof button.size
-export type ButtonColor = keyof typeof button.color | typeof colors[number]
-export type ButtonVariant = keyof typeof button.variant | NestedKeyOf<typeof button.color>
+export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>
+export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number]
+export type ButtonVariant = keyof typeof button.variant | ExtractDeepKey<AppConfig, ['ui', 'button', 'variant']> | NestedKeyOf<typeof button.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'button', 'color']>>
 
 export interface Button extends Link {
   type?: string

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

@@ -0,0 +1,11 @@
+import { chip } from '../ui.config'
+import colors from '#ui-colors'
+
+export type ChipSize = keyof typeof chip.size
+export type ChipColor = 'gray' | typeof colors[number]
+export type ChipPosition = keyof typeof chip.position
+
+export interface Chip {
+  color?: ChipColor
+  position?: ChipPosition
+}

package/dist/runtime/types/command-palette.d.ts

@@ -23,5 +23,6 @@ export interface Group {
   inactive?: string
   commands?: Command[]
   search?: Function
+  filter?: Function
   [key: string]: any
 }

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

@@ -1,7 +1,7 @@
-import type { Link } from './link'
+import type { NuxtLinkProps } from '#app'
 import type { Avatar } from './avatar'
 
-export interface DropdownItem extends Link {
+export interface DropdownItem extends NuxtLinkProps {
   label: string
   slot?: string
   icon?: string

package/dist/runtime/types/form-group.d.ts

@@ -0,0 +1,5 @@
+import { formGroup } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type { AppConfig } from 'nuxt/schema'
+
+export type FormGroupSize = keyof typeof formGroup.size | ExtractDeepKey<AppConfig, ['ui', 'formGroup', 'size']>