@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -0,0 +1,170 @@
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/navigation-menu';
+import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'ui'> {
+    /** Description is only used when `orientation` is `horizontal`. */
+    description?: string;
+    [key: string]: any;
+}
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    avatar?: AvatarProps;
+    /**
+     * Display a badge on the item.
+     * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    /**
+     * Display a tooltip on the item when the menu is collapsed with the label of the item.
+     * This has priority over the global `tooltip` prop.
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * Display a popover on the item when the menu is collapsed with the children list.
+     * This has priority over the global `popover` prop.
+     */
+    popover?: boolean | PopoverProps;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The type of the item.
+     * The `label` type is only displayed in `vertical` orientation.
+     * The `trigger` type is used to force the item to be collapsible when its a link in `vertical` orientation.
+     * @defaultValue 'link'
+     */
+    type?: 'label' | 'trigger' | 'link';
+    slot?: string;
+    /**
+     * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
+     * @defaultValue `item-${index}`
+     */
+    value?: string;
+    children?: NavigationMenuChildItem[];
+    defaultOpen?: boolean;
+    open?: boolean;
+    onSelect?(e: Event): void;
+    class?: any;
+    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
+    [key: string]: any;
+}
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed to open the menu.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The icon displayed when the item is an external link.
+     * Set to `false` to hide the external icon.
+     * @defaultValue appConfig.ui.icons.external
+     * @IconifyIcon
+     */
+    externalIcon?: boolean | string;
+    items?: T;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: NavigationMenu['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: NavigationMenu['variants']['variant'];
+    /**
+     * The orientation of the menu.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: NavigationMenuRootProps['orientation'];
+    /**
+     * Collapse the navigation menu to only show icons.
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue false
+     */
+    collapsed?: boolean;
+    /**
+     * Display a tooltip on the items when the menu is collapsed with the label of the item.
+     * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * Display a popover on the items when the menu is collapsed with the children list.
+     * `{ mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    popover?: boolean | PopoverProps;
+    /** Display a line next to the active item. */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: NavigationMenu['variants']['highlightColor'];
+    /** The content of the menu. */
+    content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>;
+    /**
+     * The orientation of the content.
+     * Only works when `orientation` is `horizontal`.
+     * @defaultValue 'horizontal'
+     */
+    contentOrientation?: NavigationMenu['variants']['contentOrientation'];
+    /**
+     * Display an arrow alongside the menu.
+     * @defaultValue false
+     */
+    arrow?: boolean;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: keyof NestedItem<T>;
+    class?: any;
+    ui?: NavigationMenu['slots'];
+}
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {
+}
+type SlotProps<T extends NavigationMenuItem> = (props: {
+    item: T;
+    index: number;
+    active?: boolean;
+}) => any;
+export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+    'item-content': SlotProps<T>;
+    'list-leading': (props?: {}) => any;
+    'list-trailing': (props?: {}) => any;
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', {
+    index: number;
+    active?: boolean;
+}>;
+declare const _default: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & NavigationMenuProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: NavigationMenuSlots<T, NestedItem<T>>;
+    emit: (evt: "update:modelValue", value: string) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/OverlayProvider.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from "vue";
+import { useOverlay } from "../composables/useOverlay";
+const { overlays, unmount, close } = useOverlay();
+const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted));
+const onAfterLeave = (id) => {
+  close(id);
+  unmount(id);
+};
+const onClose = (id, value) => {
+  close(id, value);
+};
+</script>
+
+<template>
+  <component
+    :is="overlay.component"
+    v-for="overlay in mountedOverlays"
+    :key="overlay.id"
+    v-bind="overlay.props"
+    v-model:open="overlay.isOpen"
+    @close="(value) => onClose(overlay.id, value)"
+    @after:leave="onAfterLeave(overlay.id)"
+  />
+</template>

package/dist/runtime/components/OverlayProvider.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,97 @@
+<script>
+import theme from "#build/ui/pagination";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  firstIcon: { type: String, required: false },
+  prevIcon: { type: String, required: false },
+  nextIcon: { type: String, required: false },
+  lastIcon: { type: String, required: false },
+  ellipsisIcon: { type: String, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "outline" },
+  activeColor: { type: null, required: false, default: "primary" },
+  activeVariant: { type: null, required: false, default: "solid" },
+  showControls: { type: Boolean, required: false, default: true },
+  size: { type: null, required: false },
+  to: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultPage: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  itemsPerPage: { type: Number, required: false, default: 10 },
+  page: { type: Number, required: false },
+  showEdges: { type: Boolean, required: false, default: false },
+  siblingCount: { type: Number, required: false, default: 2 },
+  total: { type: Number, required: false, default: 0 }
+});
+const emits = defineEmits(["update:page"]);
+const slots = defineSlots();
+const { dir } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultPage", "disabled", "itemsPerPage", "page", "showEdges", "siblingCount", "total"), emits);
+const firstIcon = computed(() => props.firstIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
+const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
+const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination || {} })());
+</script>
+
+<template>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
+        <slot name="first">
+          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="ui.prev({ class: props.ui?.prev })">
+        <slot name="prev">
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value" :class="ui.item({ class: props.ui?.item })">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <UButton
+              :color="page === item.value ? activeColor : color"
+              :variant="page === item.value ? activeVariant : variant"
+              :size="size"
+              :label="String(item.value)"
+              :ui="{ label: ui.label() }"
+              :to="to?.(item.value)"
+              square
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child :class="ui.ellipsis({ class: props.ui?.ellipsis })">
+          <slot name="ellipsis">
+            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="showControls || !!slots.next" as-child :class="ui.next({ class: props.ui?.next })">
+        <slot name="next">
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="showControls || !!slots.last" as-child :class="ui.last({ class: props.ui?.last })">
+        <slot name="last">
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

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

@@ -0,0 +1,118 @@
+import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pagination';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>;
+export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon to use for the first page control.
+     * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+     * @IconifyIcon
+     */
+    firstIcon?: string;
+    /**
+     * The icon to use for the previous page control.
+     * @defaultValue appConfig.ui.icons.chevronLeft
+     * @IconifyIcon
+     */
+    prevIcon?: string;
+    /**
+     * The icon to use for the next page control.
+     * @defaultValue appConfig.ui.icons.chevronRight
+     * @IconifyIcon
+     */
+    nextIcon?: string;
+    /**
+     * The icon to use for the last page control.
+     * @defaultValue appConfig.ui.icons.chevronDoubleRight
+     * @IconifyIcon
+     */
+    lastIcon?: string;
+    /**
+     * The icon to use for the ellipsis control.
+     * @defaultValue appConfig.ui.icons.ellipsis
+     * @IconifyIcon
+     */
+    ellipsisIcon?: string;
+    /**
+     * The color of the pagination controls.
+     * @defaultValue 'neutral'
+     * @IconifyIcon
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the pagination controls.
+     * @defaultValue 'outline'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The color of the active pagination control.
+     * @defaultValue 'primary'
+     */
+    activeColor?: ButtonProps['color'];
+    /**
+     * The variant of the active pagination control.
+     * @defaultValue 'solid'
+     */
+    activeVariant?: ButtonProps['variant'];
+    /**
+     * Whether to show the first, previous, next, and last controls.
+     * @defaultValue true
+     */
+    showControls?: boolean;
+    size?: ButtonProps['size'];
+    /**
+     * A function to render page controls as links.
+     * @param page The page number to navigate to.
+     */
+    to?: (page: number) => ButtonProps['to'];
+    class?: any;
+    ui?: Pagination['slots'];
+}
+export interface PaginationEmits extends PaginationRootEmits {
+}
+export interface PaginationSlots {
+    first(props?: {}): any;
+    prev(props?: {}): any;
+    next(props?: {}): any;
+    last(props?: {}): any;
+    ellipsis(props?: {}): any;
+    item(props: {
+        page: number;
+        pageCount: number;
+        item: {
+            type: 'ellipsis';
+        } | {
+            type: 'page';
+            value: number;
+        };
+        index: number;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    activeColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    itemsPerPage: number;
+    showEdges: boolean;
+    siblingCount: number;
+    total: number;
+    showControls: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PaginationSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PinInput.vue

@@ -0,0 +1,94 @@
+<script>
+import theme from "#build/ui/pin-input";
+</script>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  length: { type: [Number, String], required: false, default: 5 },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultValue: { type: Array, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  mask: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  name: { type: String, required: false },
+  otp: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: null, required: false, default: "text" }
+});
+const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "defaultValue", "disabled", "id", "mask", "modelValue", "name", "otp", "required", "type"), emits);
+const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pinInput || {} })({
+  color: color.value,
+  variant: props.variant,
+  size: size.value,
+  highlight: highlight.value
+}));
+const inputsRef = ref([]);
+const completed = ref(false);
+function onComplete(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+}
+function onBlur(event) {
+  if (!event.relatedTarget || completed.value) {
+    emits("blur", event);
+    emitFormBlur();
+  }
+}
+function autoFocus() {
+  if (props.autofocus) {
+    inputsRef.value[0]?.$el?.focus();
+  }
+}
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus();
+  }, props.autofocusDelay);
+});
+defineExpose({
+  inputsRef
+});
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="{ ...rootProps, ...ariaAttrs }"
+    :id="id"
+    :name="name"
+    :placeholder="placeholder"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:model-value="emitFormInput()"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :ref="(el) => inputsRef[index] = el"
+      :index="index"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+  </PinInputRoot>
+</template>

package/dist/runtime/components/PinInput.vue.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pin-input';
+import type { ComponentConfig } from '../types/utils';
+type PinInput = ComponentConfig<typeof theme, AppConfig, 'pinInput'>;
+type PinInputType = 'text' | 'number';
+export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<PinInputRootProps<T>, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: PinInput['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: PinInput['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: PinInput['variants']['size'];
+    /**
+     * The number of input fields.
+     * @defaultValue 5
+     */
+    length?: number | string;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    highlight?: boolean;
+    class?: any;
+    ui?: PinInput['slots'];
+}
+export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
+    change: [payload: Event];
+    blur: [payload: Event];
+};
+declare const _default: <T extends PinInputType = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((payload: Event) => any) | undefined;
+        readonly onComplete?: ((value: T extends "number" ? number[] : string[]) => any) | undefined;
+        readonly onChange?: ((payload: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T extends "number" ? number[] : string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue" | "onComplete"> & PinInputProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>): void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "blur", payload: Event) => void) & ((evt: "complete", value: T extends "number" ? number[] : string[]) => void) & ((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", value: T extends "number" ? number[] : string[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Popover.vue

@@ -0,0 +1,73 @@
+<script>
+import theme from "#build/ui/popover";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { defu } from "defu";
+import { useForwardPropsEmits } from "reka-ui";
+import { Popover, HoverCard } from "reka-ui/namespaced";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { usePortal } from "../composables/usePortal";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  mode: { type: String, required: false, default: "click" },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  openDelay: { type: Number, required: false, default: 0 },
+  closeDelay: { type: Number, required: false, default: 0 }
+});
+const emits = defineEmits(["close:prevent", "update:open"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
+const rootProps = useForwardPropsEmits(pick, emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, {});
+  }
+  return {};
+});
+const arrowProps = toRef(() => props.arrow);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.popover || {} })({
+  side: contentProps.value.side
+}));
+const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
+</script>
+
+<template>
+  <Component.Root v-slot="{ open }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </Component.Trigger>
+
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" />
+    </Component.Anchor>
+
+    <Component.Portal v-bind="portalProps">
+      <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+        <slot name="content" />
+
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
+</template>