@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/components/Switch.vue

@@ -5,7 +5,7 @@ import type { switch as _switch } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface SwitchEmits {
-  (event: 'change', payload: Event): void
+  change: [payload: Event]
 }
 
 export interface SwitchSlots {
@@ -37,6 +37,7 @@ export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<Switch
 import { reactivePick } from '@vueuse/core'
 import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SwitchProps>(), {})
@@ -45,18 +46,26 @@ const slots = defineSlots<SwitchSlots>()
 const modelValue = defineModel<boolean>({ default: undefined })
 
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-const id = useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.switch)
-  return styler({ ...props, checked: false, unchecked: false })
-})
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<SwitchProps>(props)
+const id = _id.value ?? useId()
+
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('switch', {
+  ...props,
+  size: size.value,
+  disabled: disabled.value,
+  checked: false,
+  unchecked: false,
+}))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
+
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 </script>
 
@@ -64,12 +73,10 @@ function onUpdate(value: any) {
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <div :class="style.container({ class: props.ui?.container })">
       <SwitchRoot
-        :id="id"
-        v-bind="rootProps"
+        v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
         v-model="modelValue"
-        :name="props.name"
-        :disabled="props.disabled || props.loading"
         :class="style.base({ class: props.ui?.base })"
+        :disabled="disabled || props.loading"
         @update:model-value="onUpdate"
       >
         <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">

package/dist/runtime/components/Table.vue

@@ -10,9 +10,10 @@ type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
 export type TableSlots<T> = {
-  expanded: (props: { row: Row<T> }) => any
-  empty: (props?: {}) => any
-  caption: (props?: {}) => any
+  expanded?: (props: { row: Row<T> }) => any
+  empty?: any
+  loading?: any
+  caption?: any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 export type TableData = RowData
@@ -33,11 +34,18 @@ export interface TableProps<T extends TableData> extends ComponentAttrs<typeof t
   data?: T[]
   columns?: TableColumn<T>[]
   caption?: string
+  /**
+   * The text to display when the table is empty.
+   * @default t('table.noData')
+   */
+  empty?: string
   /**
    * Whether the table should have a sticky header.
    * @default false
    */
   sticky?: boolean
+  /** Whether the table should be in loading state. */
+  loading?: boolean
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
@@ -111,8 +119,7 @@ import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 
 const props = defineProps<TableProps<T>>()
-
-defineSlots<TableSlots<T>>()
+const slots = defineSlots<TableSlots<T>>()
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
@@ -137,7 +144,7 @@ const columns = computed<TableColumn<T>[]>(
 )
 
 const tableApi = useVueTable({
-  ...reactiveOmit(props, 'data', 'columns', 'caption', 'sticky', 'class', 'ui'),
+  ...reactiveOmit(props, 'data', 'columns', 'caption', 'sticky', 'loading', 'class', 'ui'),
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
@@ -229,11 +236,8 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
 }
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.table)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('table', props))
 
 defineExpose({
   tableApi,
@@ -243,7 +247,7 @@ defineExpose({
 <template>
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <table :class="style.base({ class: props.ui?.base })">
-      <caption v-if="props.caption" :class="style.caption({ class: props.caption })">
+      <caption v-if="props.caption || slots.caption" :class="style.caption({ class: props.caption })">
         <slot name="caption">
           {{ props.caption }}
         </slot>
@@ -287,10 +291,16 @@ defineExpose({
           </template>
         </template>
 
+        <tr v-else-if="props.loading && slots.loading">
+          <td :colspan="columns.length" :class="style.loading({ class: props.ui?.loading })">
+            <slot name="loading"></slot>
+          </td>
+        </tr>
+
         <tr v-else :class="style.tr({ class: props.ui?.tr })">
           <td :colspan="columns.length" :class="style.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              {{ t('table.noData') }}
+              {{ props.empty || t('table.noData') }}
             </slot>
           </td>
         </tr>

package/dist/runtime/components/Tabs.vue

@@ -6,15 +6,6 @@ import type { ComponentAttrs, DynamicSlots } from '../types'
 
 export interface TabsEmits extends TabsRootEmits<string | number> {}
 
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export type TabsSlots<T extends { slot?: string }> = {
-  leading?: SlotProps<T>
-  default?: SlotProps<T>
-  trailing?: SlotProps<T>
-  content?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-
 export interface TabsItem {
   label?: string
   icon?: string
@@ -23,11 +14,21 @@ export interface TabsItem {
   /** A unique value for the tab item. Defaults to the index. */
   value?: string | number
   disabled?: boolean
+  [key: string]: any
 }
 
+type SlotProps<T extends TabsItem> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends TabsItem = TabsItem> = {
+  leading?: SlotProps<T>
+  default?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+} & DynamicSlots<T, undefined, SlotProps<T>>
+
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+export interface TabsProps<T extends TabsItem = TabsItem> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @default "div"
@@ -73,11 +74,8 @@ const slots = defineSlots<TabsSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emit)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tabs)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('tabs', props))
 </script>
 
 <template>
@@ -111,7 +109,7 @@ const style = computed(() => {
         :value="item.value || String(index)"
         :class="style.content({ class: props.ui?.content })"
       >
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
+        <slot :name="((item.slot || 'content') as keyof TabsSlots<T>)" :item="(item as Extract<T, { slot: string }>)" :index="index">
           {{ item.content }}
         </slot>
       </TabsContent>

package/dist/runtime/components/Textarea.vue

@@ -5,9 +5,9 @@ import type { textarea } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface TextareaEmits {
-  (e: 'update:modelValue', payload: string): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
+  'update:modelValue': [payload: string]
+  'blur': [event: FocusEvent]
+  'change': [event: Event]
 }
 
 export interface TextareaSlots {
@@ -41,7 +41,8 @@ export interface TextareaProps extends ComponentAttrs<typeof textarea> {
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, useTemplateRef, watch } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 defineOptions({
@@ -59,13 +60,15 @@ const emit = defineEmits<TextareaEmits>()
 defineSlots<TextareaSlots>()
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const textareaRef = useTemplateRef('textareaRef')
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.textarea)
-  return styler(props)
-})
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormInput, emitFormChange, emitFormBlur, emitFormFocus } = useFormItem<TextareaProps>(props)
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('textarea', {
+  ...props,
+  size: size.value,
+  highlight: highlight.value,
+}))
 
 function autoFocus() {
   if (props.autofocus)
@@ -77,6 +80,7 @@ function updateInput(value: string) {
     value = value.trim()
 
   modelValue.value = value
+  emitFormInput()
 }
 
 function onInput(event: Event) {
@@ -96,10 +100,12 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
 
   emit('change', event)
+  emitFormChange()
 }
 
 function onBlur(event: FocusEvent) {
   emit('blur', event)
+  emitFormBlur()
 }
 
 function autoResize() {
@@ -147,23 +153,20 @@ onMounted(() => {
   <Primitive
     :as="props.as"
     :class="style.root({ class: [props.class, props.ui?.root] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :aria-disabled="disabled ? true : undefined"
   >
     <textarea
-      :id="props.id"
       ref="textareaRef"
+      :class="style.base({ class: props.ui?.base })"
       :value="modelValue"
-      :name="props.name"
       :rows="props.rows"
       :placeholder="props.placeholder"
-      :class="style.base({ class: props.ui?.base })"
-      :disabled="props.disabled"
       :required="props.required"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs, id, name, disabled }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
-      @focus="autoResize"
+      @focus="emitFormFocus"
     ></textarea>
 
     <slot></slot>

package/dist/runtime/components/Toast.vue

@@ -11,7 +11,7 @@ export interface ToastSlots {
   title?: (props?: {}) => any
   description?: (props?: {}) => any
   actions?: (props?: {}) => any
-  close?: (props: { ui: any }) => any
+  close?: (props: { ui: ComponentAttrs<typeof toast>['ui'] }) => any
 }
 
 type ToastVariants = VariantProps<typeof toast>
@@ -61,14 +61,11 @@ const el = ref<InstanceType<typeof ToastRoot>>()
 const { height } = useElementBounding(() => el.value?.$el.getBoundingClientRect ? el.value.$el : undefined)
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.toast)
-  return styler({
-    ...props,
-    title: !!(props.title || slots.title),
-  })
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('toast', {
+  ...props,
+  title: !!(props.title || slots.title),
+}))
 
 defineExpose({
   height,
@@ -108,7 +105,10 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close !== null" :class="style.actions({ class: props.ui?.actions })">
+    <div
+      v-if="(props.orientation === 'horizontal' && actions?.length) || props.close || slots.close"
+      :class="style.actions({ class: props.ui?.actions })"
+    >
       <template v-if="props.orientation === 'horizontal'">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -117,10 +117,9 @@ defineExpose({
         </slot>
       </template>
 
-      <ToastClose as-child>
-        <slot name="close" :ui="ui">
+      <ToastClose v-if="props.close || slots.close" as-child>
+        <slot name="close" :ui="props.ui">
           <Button
-            v-if="props.close"
             :icon="props.closeIcon || theme.app.icons.close"
             size="sm"
             variant="link"

package/dist/runtime/components/{Toaster.vue → ToastProvider.vue}

@@ -1,16 +1,21 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { ToastProviderProps } from 'reka-ui'
-import type { toaster } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ToastProviderProps as RekaToastProviderProps } from 'reka-ui'
+import type { toastProvider } from '../theme'
+import type { ComponentAttrs, ToastProps } from '../types'
+
+export interface ToastState extends Omit<ToastProps, 'defaultOpen'> {
+  id: string | number
+  onClick?: (toast: ToastState) => void
+}
 
 export interface ToasterSlots {
   default?: (props?: {}) => any
 }
 
-type ToasterVariants = VariantProps<typeof toaster>
+type ToasterVariants = VariantProps<typeof toastProvider>
 
-export interface ToasterProps extends ComponentAttrs<typeof toaster>, Omit<ToastProviderProps, 'swipeDirection'> {
+export interface ToastProviderProps extends ComponentAttrs<typeof toastProvider>, Omit<RekaToastProviderProps, 'swipeDirection'> {
   /** @default "bottom-right" */
   position?: ToasterVariants['position']
   /**
@@ -35,7 +40,7 @@ import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
 import Toast from './Toast.vue'
 
-const props = withDefaults(defineProps<ToasterProps>(), {
+const props = withDefaults(defineProps<ToastProviderProps>(), {
   position: 'bottom-right',
   expand: true,
   portal: true,
@@ -61,20 +66,17 @@ const swipeDirection = computed(() => {
       return 'left'
   }
 
-  console.warn(`[Toaster] Unknown position "${props.position}"`)
+  console.warn(`[ToastProvider] Unknown position "${props.position}"`)
 
   return 'right'
 })
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.toaster)
-  return styler({
-    ...props,
-    swipeDirection: swipeDirection.value,
-    clickable: false,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('toastProvider', {
+  ...props,
+  swipeDirection: swipeDirection.value,
+  clickable: false,
+}))
 
 function onUpdateOpen(value: boolean, id: string | number) {
   if (value)

package/dist/runtime/components/Tooltip.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { TooltipArrowProps, TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import type { TooltipArrowProps, TooltipContentEmits, TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
 import type { tooltip } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, EmitsToProps } from '../types'
 
 export interface TooltipEmits extends TooltipRootEmits {}
 
@@ -12,7 +12,7 @@ export interface TooltipSlots {
 
 export interface TooltipProps extends ComponentAttrs<typeof tooltip>, TooltipRootProps {
   text?: string
-  content?: Omit<TooltipContentProps, 'as' | 'asChild'>
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>
   arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
   /** @default true */
   portal?: boolean
@@ -44,11 +44,8 @@ const contentProps = toRef(() => defu(props.content, contentDefaults) as Tooltip
 
 const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tooltip)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('tooltip', props))
 </script>
 
 <template>

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

@@ -0,0 +1,27 @@
+import type { GetObjectField } from '../types/index.js';
+interface Props<T> {
+    id?: string;
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    highlight?: boolean;
+    disabled?: boolean;
+}
+export declare function useFormItem<T>(props?: Props<T>, options?: {
+    bind?: boolean;
+    deferInputValidation?: boolean;
+}): {
+    id: import("vue").ComputedRef<string | undefined>;
+    name: import("vue").ComputedRef<string | undefined>;
+    size: import("vue").ComputedRef<any>;
+    highlight: import("vue").ComputedRef<boolean | undefined>;
+    disabled: import("vue").ComputedRef<boolean | undefined>;
+    emitFormBlur: () => void;
+    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
+    emitFormChange: () => void;
+    emitFormFocus: () => void;
+    ariaAttrs: import("vue").ComputedRef<{
+        'aria-describedby': string;
+        'aria-invalid': boolean;
+    } | undefined>;
+};
+export {};

package/dist/runtime/composables/useFormItem.js

@@ -0,0 +1,64 @@
+import { useDebounceFn } from "@vueuse/core";
+import { computed } from "vue";
+import {
+  injectFormBus,
+  injectFormInputId,
+  injectFormInputs,
+  injectFormItem,
+  injectFormOptions
+} from "../app/injections.js";
+export function useFormItem(props, options) {
+  const formOptions = injectFormOptions();
+  const formBus = injectFormBus();
+  const formItem = injectFormItem();
+  const formInputs = injectFormInputs();
+  const inputId = injectFormInputId();
+  if (formItem && inputId) {
+    if (options?.bind === false) {
+      inputId.value = void 0;
+    } else if (props?.id) {
+      inputId.value = props?.id;
+    }
+    if (formInputs && formItem.value.name && inputId.value)
+      formInputs.value[formItem.value.name] = { id: inputId.value, pattern: formItem.value.errorPattern };
+  }
+  function emitFormEvent(type, name, eager) {
+    if (formBus && formItem && name)
+      formBus.emit({ type, name, eager });
+  }
+  function emitFormBlur() {
+    emitFormEvent("blur", formItem?.value.name);
+  }
+  function emitFormFocus() {
+    emitFormEvent("focus", formItem?.value.name);
+  }
+  function emitFormChange() {
+    emitFormEvent("change", formItem?.value.name);
+  }
+  const emitFormInput = useDebounceFn(
+    () => {
+      emitFormEvent("input", formItem?.value.name, !options?.deferInputValidation || formItem?.value.eagerValidation);
+    },
+    formItem?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
+  );
+  return {
+    id: computed(() => props?.id ?? inputId?.value),
+    name: computed(() => props?.name ?? formItem?.value.name),
+    size: computed(() => props?.size ?? formItem?.value.size),
+    highlight: computed(() => formItem?.value.error ? true : props?.highlight),
+    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
+    emitFormBlur,
+    emitFormInput,
+    emitFormChange,
+    emitFormFocus,
+    ariaAttrs: computed(() => {
+      if (!formItem?.value)
+        return;
+      const descriptiveAttrs = ["error", "hint", "help", "description"].filter((type) => formItem?.value?.[type]).map((type) => `${formItem?.value.ariaId}-${type}`) || [];
+      return {
+        "aria-describedby": descriptiveAttrs.join(" "),
+        "aria-invalid": !!formItem?.value.error
+      };
+    })
+  };
+}

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

@@ -29,7 +29,7 @@ export declare const kbdKeysMap: {
 export type KbdKey = keyof typeof kbdKeysMap;
 export type KbdKeySpecific = keyof KbdKeysSpecificMap;
 export declare const useKbd: () => {
-    macOS: import("vue").ComputedRef<any>;
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     getKbdKey: (value?: KbdKey | (string & {})) => string | undefined;
 };
 export {};

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

@@ -0,0 +1,29 @@
+import type { Component } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+export interface OverlayOptions<ComponentProps = Record<string, any>> {
+    defaultOpen?: boolean;
+    props?: ComponentProps;
+    unmountOnHide?: boolean;
+}
+interface _ComponentState<T extends Component> {
+    component?: T;
+    id: string | number;
+    isMounted: boolean;
+    modelValue: boolean;
+    resolve?: (value: unknown) => void;
+}
+export type OverlayComponentState = OverlayOptions<Component> & _ComponentState<Component>;
+export interface OverlayComponentInstance<T> {
+    open: (props?: ComponentProps<T>) => Promise<any>;
+    close: (value?: any) => void;
+    patch: (props: Partial<ComponentProps<T>>) => void;
+}
+export declare const useOverlay: () => {
+    overlays: import("vue").ShallowReactive<OverlayComponentState[]>;
+    open: <T extends Component>(id: OverlayComponentState["id"], props?: ComponentProps<T>) => Promise<any>;
+    close: (id: OverlayComponentState["id"], value?: any) => void;
+    create: <T extends Component>(component: T, options?: OverlayOptions<ComponentProps<T>>) => OverlayComponentInstance<T>;
+    patch: <T extends Component>(id: OverlayComponentState["id"], props: Partial<ComponentProps<T>>) => void;
+    unmount: (id: OverlayComponentState["id"]) => void;
+};
+export {};

package/dist/runtime/composables/useOverlay.js

@@ -0,0 +1,69 @@
+import { createSharedComposable } from "@vueuse/core";
+import { markRaw, reactive, shallowReactive } from "vue";
+export const useOverlay = createSharedComposable(() => {
+  const overlays = shallowReactive([]);
+  const generateId = () => `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  function create(component, options = {}) {
+    const { props = {}, defaultOpen = false, unmountOnHide = true } = options;
+    const state = reactive({
+      id: generateId(),
+      modelValue: defaultOpen,
+      component: markRaw(component),
+      isMounted: defaultOpen,
+      unmountOnHide,
+      props
+    });
+    overlays.push(state);
+    return {
+      open: (props2) => open(state.id, props2),
+      close: (value) => close(state.id, value),
+      patch: (props2) => patch(state.id, props2)
+    };
+  }
+  function open(id, props) {
+    const overlay = getOverlay(id);
+    if (props)
+      patch(id, props);
+    overlay.modelValue = true;
+    overlay.isMounted = true;
+    return new Promise((resolve) => {
+      overlay.resolve = resolve;
+    });
+  }
+  function close(id, value) {
+    const overlay = getOverlay(id);
+    overlay.modelValue = false;
+    if (overlay.resolve) {
+      overlay.resolve(value);
+      overlay.resolve = void 0;
+    }
+  }
+  function unmount(id) {
+    const overlay = getOverlay(id);
+    overlay.isMounted = false;
+    if (overlay.unmountOnHide) {
+      const index = overlays.findIndex((item) => item.id === id);
+      overlays.splice(index, 1);
+    }
+  }
+  function patch(id, props) {
+    const overlay = getOverlay(id);
+    Object.entries(props).forEach(([key, value]) => {
+      overlay.props[key] = value;
+    });
+  }
+  function getOverlay(id) {
+    const item = overlays.find((item2) => item2.id === id);
+    if (!item)
+      throw new Error("Overlay not found");
+    return item;
+  }
+  return {
+    overlays,
+    open,
+    close,
+    create,
+    patch,
+    unmount
+  };
+});