@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.1

package/dist/runtime/components/Toaster.vue

@@ -1,14 +1,14 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { ToastProviderProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { ToastProviderProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
+const appConfigToaster = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
 
-const toaster = tv({ extend: tv(theme), ...(appConfig.ui?.toaster || {}) })
+const toaster = tv({ extend: tv(theme), ...(appConfigToaster.ui?.toaster || {}) })
 
 type ToasterVariants = VariantProps<typeof toaster>
 
@@ -35,13 +35,11 @@ export interface ToasterSlots {
 export default {
   name: 'Toaster'
 }
-
-extendDevtoolsMeta({ example: 'ToasterExample' })
 </script>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'radix-vue'
+import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
@@ -108,7 +106,8 @@ function getOffset(index: number) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
-      v-bind="omit(toast, ['id'])"
+      v-bind="omit(toast, ['id', 'close'])"
+      :close="(toast.close as boolean)"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
       :style="{
@@ -120,10 +119,10 @@ function getOffset(index: number) {
         '--transform': 'translateY(var(--translate)) scale(var(--scale))'
       }"
       :class="[ui.base(), {
-        'cursor-pointer': !!toast.click
+        'cursor-pointer': !!toast.onClick
       }]"
       @update:open="onUpdateOpen($event, toast.id)"
-      @click="toast.click && toast.click(toast)"
+      @click="toast.onClick && toast.onClick(toast)"
     />
 
     <ToastPortal :disabled="!portal">

package/dist/runtime/components/Tooltip.vue

@@ -1,15 +1,14 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
-import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'radix-vue'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { KbdProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
+const appConfigTooltip = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
 
-const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
+const tooltip = tv({ extend: tv(theme), ...(appConfigTooltip.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps {
   /** The text content of the tooltip. */
@@ -18,7 +17,7 @@ export interface TooltipProps extends TooltipRootProps {
   kbds?: KbdProps['value'][] | KbdProps[]
   /**
    * The content of the tooltip.
-   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
    */
   content?: Omit<TooltipContentProps, 'as' | 'asChild'>
   /**
@@ -41,14 +40,12 @@ export interface TooltipSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
 </script>
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import UKbd from './Kbd.vue'
 
@@ -59,7 +56,7 @@ const emits = defineEmits<TooltipEmits>()
 const slots = defineSlots<TooltipSlots>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
-const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as TooltipContentProps)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
 const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -70,12 +67,12 @@ const ui = computed(() => tooltip({
 
 <template>
   <TooltipRoot v-slot="{ open }" v-bind="rootProps">
-    <TooltipTrigger v-if="!!slots.default" as-child>
+    <TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 
     <TooltipPortal :disabled="!portal">
-      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.class, props.ui?.content] })">
+      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
         <slot name="content">
           <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 

package/dist/runtime/components/Tree.vue

@@ -0,0 +1,196 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tree'
+import { tv } from '../utils/tv'
+import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { tree: Partial<typeof theme> } }
+
+const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
+
+type TreeVariants = VariantProps<typeof tree>
+
+export type TreeItem = {
+  icon?: string
+  label?: string
+  trailingIcon?: string
+  defaultExpanded?: boolean
+  disabled?: boolean
+  value?: string
+  slot?: string
+  children?: TreeItem[]
+  onToggle?(e: Event): void
+  onSelect?(e?: Event): void
+}
+
+export interface TreeProps<T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'ul'
+   */
+  as?: any
+  color?: TreeVariants['color']
+  size?: TreeVariants['size']
+  /**
+   * The key used to get the value from the item.
+   * @defaultValue 'value'
+   */
+  valueKey?: K
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: K
+  /**
+   * The icon displayed on the right side of a parent node.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when a parent node is expanded.
+   * @defaultValue appConfig.ui.icons.folderOpen
+   */
+  expandedIcon?: string
+  /**
+   * The icon displayed when a parent node is collapsed.
+   * @defaultValue appConfig.ui.icons.folder
+   */
+  collapsedIcon?: string
+  items?: T[]
+  /** The controlled value of the Tree. Can be bind as `v-model`. */
+  modelValue?: MaybeMultipleModelValue<T, M>
+  /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+  defaultValue?: MaybeMultipleModelValue<T, M>
+  /** Whether multiple options can be selected or not. */
+  multiple?: M & boolean
+  class?: any
+  ui?: PartialString<typeof tree.slots>
+}
+
+export type TreeEmits<T, M extends boolean = false> = Omit<TreeRootEmits, 'update:modelValue'> & {
+  'update:modelValue': [payload: MaybeMultipleModelValue<T, M>]
+}
+
+type SlotProps<T> = (props: { item: T, index: number, level: number, expanded: boolean, selected: boolean }) => any
+
+export type TreeSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">
+import { computed } from 'vue'
+import type { PropType } from 'vue'
+import { TreeRoot, TreeItem, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
+
+const props = withDefaults(defineProps<TreeProps<T, M, K>>(), {
+  labelKey: 'label' as never,
+  valueKey: 'value' as never
+})
+const emits = defineEmits<TreeEmits<T, M>>()
+const slots = defineSlots<TreeSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect'), emits)
+
+const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: T[], level: number }>({
+  props: {
+    items: Array as PropType<T[]>,
+    level: Number
+  }
+})
+
+const ui = computed(() => tree({
+  color: props.color,
+  size: props.size
+}))
+
+function getItemLabel(item: T) {
+  return get(item, props.labelKey as string)
+}
+
+function getItemValue(item?: T) {
+  return get(item, props.valueKey as string) ?? get(item, props.labelKey as string)
+}
+
+function getDefaultOpenedItems(item: T): string[] {
+  const currentItem = item.defaultExpanded ? getItemValue(item) : null
+  const childItems = item.children?.flatMap(child => getDefaultOpenedItems(child as T)) ?? []
+
+  return [currentItem, ...childItems].filter(Boolean) as string[]
+}
+
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap(getDefaultOpenedItems))
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <li
+      v-for="(item, index) in items"
+      :key="`${level}-${index}`"
+      :class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        as-child
+        :level="level"
+        :value="item"
+        @toggle="item.onToggle"
+        @select="item.onSelect"
+      >
+        <button :disabled="item.disabled || disabled" :class="ui.link({ class: props.ui?.link, selected: isSelected, disabled: item.disabled || disabled })">
+          <slot :name="item.slot || 'item'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+            <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+              <UIcon
+                v-if="item.icon"
+                :name="item.icon"
+                :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+              />
+              <UIcon
+                v-else-if="item.children?.length"
+                :name="isExpanded ? (expandedIcon ?? appConfig.ui.icons.folderOpen) : (collapsedIcon ?? appConfig.ui.icons.folder)"
+                :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+              />
+            </slot>
+
+            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+              <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+                {{ getItemLabel(item) }}
+              </slot>
+            </span>
+
+            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+              <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+                <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
+                <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
+              </slot>
+            </span>
+          </slot>
+        </button>
+
+        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
+          <ReuseTreeTemplate :items="(item.children as T[])" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineTreeTemplate>
+
+  <TreeRoot
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :get-key="getItemValue"
+    :default-expanded="defaultExpanded"
+    :selection-behavior="selectionBehavior"
+  >
+    <ReuseTreeTemplate :items="items" :level="0" />
+  </TreeRoot>
+</template>

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

@@ -11,5 +11,5 @@ export interface ShortcutsOptions {
     chainDelay?: number;
 }
 export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
-export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): void;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/core").Fn;
 export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -6,7 +6,7 @@ export function extractShortcuts(items) {
   const shortcuts = {};
   function traverse(items2) {
     items2.forEach((item) => {
-      if (item.kbds?.length && (item.select || item.click)) {
+      if (item.kbds?.length && (item.onSelect || item.onClick)) {
         const shortcutKey = item.kbds.join("_");
         shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }
@@ -131,5 +131,5 @@ export function defineShortcuts(config, options = {}) {
       return shortcut;
     }).filter(Boolean);
   });
-  useEventListener("keydown", onKeyDown);
+  return useEventListener("keydown", onKeyDown);
 }

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

@@ -8,13 +8,11 @@ type Props<T> = {
     name?: string;
     size?: GetObjectField<T, 'size'>;
     color?: GetObjectField<T, 'color'>;
-    eagerValidation?: boolean;
-    legend?: string;
     highlight?: boolean;
     disabled?: boolean;
 };
 export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
-export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>>;
+export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>>;
 export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
 export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
 export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
@@ -24,6 +22,7 @@ export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
 export declare const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>>;
 export declare function useFormField<T>(props?: Props<T>, opts?: {
     bind?: boolean;
+    deferInputValidation?: boolean;
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
@@ -34,5 +33,10 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
     emitFormBlur: () => void;
     emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
     emitFormChange: () => void;
+    emitFormFocus: () => void;
+    ariaAttrs: ComputedRef<{
+        'aria-describedby': string;
+        'aria-invalid': boolean;
+    } | undefined>;
 };
 export {};

package/dist/runtime/composables/useFormField.js

@@ -1,4 +1,4 @@
-import { inject, ref, computed } from "vue";
+import { inject, computed } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
 export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
@@ -13,7 +13,7 @@ export function useFormField(props, opts) {
   const formInputs = inject(formInputsInjectionKey, void 0);
   const inputId = inject(inputIdInjectionKey, void 0);
   if (formField && inputId) {
-    if (opts?.bind === false || props?.legend) {
+    if (opts?.bind === false) {
       inputId.value = void 0;
     } else if (props?.id) {
       inputId.value = props?.id;
@@ -22,22 +22,23 @@ export function useFormField(props, opts) {
       formInputs.value[formField.value.name] = { id: inputId.value, pattern: formField.value.errorPattern };
     }
   }
-  const blurred = ref(false);
-  function emitFormEvent(type, name) {
+  function emitFormEvent(type, name, eager) {
     if (formBus && formField && name) {
-      formBus.emit({ type, name });
+      formBus.emit({ type, name, eager });
     }
   }
   function emitFormBlur() {
     emitFormEvent("blur", formField?.value.name);
-    blurred.value = true;
+  }
+  function emitFormFocus() {
+    emitFormEvent("focus", formField?.value.name);
   }
   function emitFormChange() {
     emitFormEvent("change", formField?.value.name);
   }
   const emitFormInput = useDebounceFn(
     () => {
-      emitFormEvent("input", formField?.value.name);
+      emitFormEvent("input", formField?.value.name, !opts?.deferInputValidation || formField?.value.eagerValidation);
     },
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   );
@@ -50,6 +51,15 @@ export function useFormField(props, opts) {
     disabled: computed(() => formOptions?.value.disabled || props?.disabled),
     emitFormBlur,
     emitFormInput,
-    emitFormChange
+    emitFormChange,
+    emitFormFocus,
+    ariaAttrs: computed(() => {
+      if (!formField?.value) return;
+      const descriptiveAttrs = ["error", "hint", "description"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
+      return {
+        "aria-describedby": descriptiveAttrs.join(" "),
+        "aria-invalid": !!formField?.value.error
+      };
+    })
   };
 }

package/dist/runtime/composables/useLocale.js

@@ -1,6 +1,6 @@
 import { computed, inject, ref } from "vue";
 import { buildLocaleContext } from "../utils/locale.js";
-import { en } from "../locale/index.js";
+import en from "../locale/en.js";
 import { createSharedComposable } from "@vueuse/core";
 export const localeContextInjectionKey = Symbol("nuxt-ui.locale-context");
 const _useLocale = (localeOverrides) => {

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

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
+    defaultOpen?: boolean;
+    props?: OverlayAttrs;
+    destroyOnClose?: boolean;
+};
+type ManagedOverlayOptionsPrivate<T extends Component> = {
+    component?: T;
+    id: symbol;
+    isMounted: boolean;
+    modelValue: boolean;
+    resolvePromise?: (value: unknown) => void;
+};
+export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
+interface OverlayInstance<T> {
+    open: (props?: ComponentProps<T>) => Promise<any>;
+    close: (value?: any) => void;
+    patch: (props: Partial<ComponentProps<T>>) => void;
+}
+declare function _useOverlay(): {
+    overlays: any;
+    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => Promise<any>;
+    close: (id: symbol, value?: any) => void;
+    create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
+    patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;
+    unMount: (id: symbol) => void;
+};
+export declare const useOverlay: typeof _useOverlay;
+export {};

package/dist/runtime/composables/useOverlay.js

@@ -0,0 +1,70 @@
+import { createSharedComposable } from "@vueuse/core";
+function _useOverlay() {
+  const overlays = shallowReactive([]);
+  const create = (component, _options) => {
+    const { props, defaultOpen, destroyOnClose } = _options || {};
+    const options = reactive({
+      id: Symbol(import.meta.dev ? "useOverlay" : ""),
+      modelValue: !!defaultOpen,
+      component: markRaw(component),
+      isMounted: !!defaultOpen,
+      destroyOnClose: !!destroyOnClose,
+      props: props || {}
+    });
+    overlays.push(options);
+    return {
+      open: (props2) => open(options.id, props2),
+      close: (value) => close(options.id, value),
+      patch: (props2) => patch(options.id, props2)
+    };
+  };
+  const open = (id, props) => {
+    const overlay = getOverlay(id);
+    if (props) {
+      patch(overlay.id, props);
+    }
+    overlay.modelValue = true;
+    overlay.isMounted = true;
+    return new Promise((resolve) => {
+      overlay.resolvePromise = resolve;
+    });
+  };
+  const close = (id, value) => {
+    const overlay = getOverlay(id);
+    overlay.modelValue = false;
+    if (overlay.resolvePromise) {
+      overlay.resolvePromise(value);
+      overlay.resolvePromise = void 0;
+    }
+  };
+  const unMount = (id) => {
+    const overlay = getOverlay(id);
+    overlay.isMounted = false;
+    if (overlay.destroyOnClose) {
+      const index = overlays.findIndex((overlay2) => overlay2.id === id);
+      overlays.splice(index, 1);
+    }
+  };
+  const patch = (id, props) => {
+    const overlay = getOverlay(id);
+    Object.entries(props).forEach(([key, value]) => {
+      overlay.props[key] = value;
+    });
+  };
+  const getOverlay = (id) => {
+    const overlay = overlays.find((overlay2) => overlay2.id === id);
+    if (!overlay) {
+      throw new Error("Overlay not found");
+    }
+    return overlay;
+  };
+  return {
+    overlays,
+    open,
+    close,
+    create,
+    patch,
+    unMount
+  };
+}
+export const useOverlay = createSharedComposable(_useOverlay);

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

@@ -1,7 +1,8 @@
-import type { ToastProps } from '../types';
-export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
+import type { ToastProps, ToastEmits } from '../types';
+import type { EmitsToProps } from '../types/utils';
+export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {
     id: string | number;
-    click?: (toast: Toast) => void;
+    onClick?: (toast: Toast) => void;
 }
 export declare function useToast(): {
     toasts: import("vue").Ref<Toast[], Toast[]>;

package/dist/runtime/composables/useToast.js

@@ -1,17 +1,31 @@
+import { ref, nextTick } from "vue";
 import { useState } from "#imports";
 export function useToast() {
   const toasts = useState("toasts", () => []);
+  const maxToasts = 5;
+  const running = ref(false);
+  const queue = [];
+  const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  async function processQueue() {
+    if (running.value || queue.length === 0) {
+      return;
+    }
+    running.value = true;
+    while (queue.length > 0) {
+      const toast = queue.shift();
+      await nextTick();
+      toasts.value = [...toasts.value, toast].slice(-maxToasts);
+    }
+    running.value = false;
+  }
   function add(toast) {
     const body = {
-      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      id: generateId(),
       open: true,
       ...toast
     };
-    const index = toasts.value.findIndex((t) => t.id === body.id);
-    if (index === -1) {
-      toasts.value.push(body);
-    }
-    toasts.value = toasts.value.slice(-5);
+    queue.push(body);
+    processQueue();
     return body;
   }
   function update(id, toast) {

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)]}:root{color-scheme:light;--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{color-scheme:dark;--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}
+@import "#build/ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-(--ui-text) bg-(--ui-bg) scheme-light dark:scheme-dark}.light,:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}

package/dist/runtime/keyframes.css

@@ -1 +1 @@
-@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}
+@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-rtl{0%,to{width:50%}0%{transform:translateX(100%)}to{transform:translateX(-200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-rtl{0%,to{width:50%}0%{transform:translateX(-200%)}to{transform:translateX(100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}