@nuxt/ui 3.2.0 → 3.3.0

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

@@ -123,5 +123,5 @@ declare const _default: <T extends CarouselItem>(__VLS_props: NonNullable<Awaite
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -56,7 +56,7 @@ export interface CheckboxSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
     modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (payload: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps & {

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

@@ -80,5 +80,5 @@ declare const _default: <T extends CheckboxGroupItem>(__VLS_props: NonNullable<A
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -31,7 +31,7 @@ export interface ChipProps {
     ui?: Chip['slots'];
 }
 export interface ChipEmits {
-    (e: 'update:show', payload: boolean): void;
+    'update:show': [payload: boolean];
 }
 export interface ChipSlots {
     default(props?: {}): any;
@@ -39,7 +39,7 @@ export interface ChipSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:show": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps & {
     show?: boolean;

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

@@ -20,7 +20,7 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/ColorPicker.vue

@@ -14,7 +14,7 @@ function HSVtoHSL(hsv) {
   return {
     H: hsv.h,
     S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
-    L: Math.round(x / 2)
+    L: x / 2
   };
 }
 </script>
@@ -53,7 +53,6 @@ const pickedColor = computed({
   },
   set(value) {
     const color = new ColorTranslator(HSVtoHSL(value), {
-      decimals: 2,
       labUnit: "percent",
       cmykUnit: "percent",
       cmykFunction: "cmyk"

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

@@ -34,7 +34,7 @@ export type ColorPickerProps = {
 };
 declare const _default: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerProps & {
     modelValue?: string;

package/dist/runtime/components/CommandPalette.vue

@@ -271,5 +271,9 @@ function onSelect(e, item) {
         </slot>
       </div>
     </ListboxContent>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :ui="ui" />
+    </div>
   </ListboxRoot>
 </template>

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

@@ -142,6 +142,11 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'empty'(props: {
         searchTerm?: string;
     }): any;
+    'footer'(props: {
+        ui: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
     'back'(props: {
         ui: {
             [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
@@ -183,5 +188,5 @@ declare const _default: <G extends CommandPaletteGroup<T>, T extends CommandPale
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -9,7 +9,7 @@ export interface ContainerProps {
 export interface ContainerSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -105,5 +105,5 @@ declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -45,5 +45,5 @@ declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Drawer.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/drawer";
 <script setup>
 import { computed, toRef } from "vue";
 import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { usePortal } from "../composables/usePortal";
@@ -19,6 +19,7 @@ const props = defineProps({
   overlay: { type: Boolean, required: false, default: true },
   handle: { type: Boolean, required: false, default: true },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  nested: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   activeSnapPoint: { type: [Number, String, null], required: false },
@@ -31,7 +32,6 @@ const props = defineProps({
   modal: { type: Boolean, required: false, default: true },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  nested: { type: Boolean, required: false },
   direction: { type: String, required: false, default: "bottom" },
   noBodyStyles: { type: Boolean, required: false },
   handleOnly: { type: Boolean, required: false },
@@ -54,7 +54,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -108,5 +108,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
         </slot>
       </DrawerContent>
     </DrawerPortal>
-  </DrawerRoot>
+  </component>
 </template>

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

@@ -34,6 +34,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
     class?: any;
     ui?: Drawer['slots'];
 }
@@ -48,7 +53,7 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
     "update:open": (open: boolean) => any;

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

@@ -115,5 +115,5 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -2,7 +2,7 @@ import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots, DynamicSlots, MergeTypes } from '../types';
 import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
@@ -28,9 +28,12 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     };
     uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
     default(props?: {}): any;
-};
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+    active?: boolean;
+    index: number;
+}>;
 declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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 onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
@@ -41,12 +44,12 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: DropdownMenuContentSlots<T>;
+    slots: DropdownMenuContentSlots<T, NestedItem<T>>;
     emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/FileUpload.vue

@@ -0,0 +1,242 @@
+<script>
+import theme from "#build/ui/file-upload";
+</script>
+
+<script setup>
+import { computed, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { useFileUpload } from "../composables/useFileUpload";
+import { tv } from "../utils/tv";
+import UAvatar from "./Avatar.vue";
+import UButton from "./Button.vue";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  icon: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  layout: { type: null, required: false, default: "grid" },
+  position: { type: null, required: false, default: "outside" },
+  highlight: { type: Boolean, required: false },
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: false },
+  reset: { type: Boolean, required: false, default: false },
+  dropzone: { type: Boolean, required: false, default: true },
+  interactive: { type: Boolean, required: false, default: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  fileIcon: { type: String, required: false },
+  fileDelete: { type: [Boolean, Object], required: false },
+  fileDeleteIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emits = defineEmits(["update:modelValue", "change"]);
+const slots = defineSlots();
+const modelValue = defineModel({ type: null });
+const appConfig = useAppConfig();
+const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
+const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
+  accept: props.accept,
+  reset: props.reset,
+  multiple: props.multiple,
+  dropzone: props.dropzone,
+  onUpdate
+});
+const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField(props);
+const variant = computed(() => props.multiple ? "area" : props.variant);
+const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
+const position = computed(() => {
+  if (layout.value === "grid" && props.multiple) {
+    return "inside";
+  }
+  if (variant.value === "button") {
+    return "outside";
+  }
+  return props.position;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
+  dropzone: props.dropzone,
+  interactive: props.interactive,
+  color: props.color,
+  size: props.size,
+  variant: variant.value,
+  layout: layout.value,
+  position: position.value,
+  multiple: props.multiple,
+  highlight: props.highlight,
+  disabled: props.disabled
+}));
+function createObjectUrl(file) {
+  return URL.createObjectURL(file);
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) {
+    return "0B";
+  }
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = bytes / Math.pow(k, i);
+  const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
+  return `${formattedSize}${sizes[i]}`;
+}
+function onUpdate(files, reset = false) {
+  if (props.multiple) {
+    if (reset) {
+      modelValue.value = files;
+    } else {
+      const existingFiles = modelValue.value || [];
+      modelValue.value = [...existingFiles, ...files || []];
+    }
+  } else {
+    modelValue.value = files?.[0];
+  }
+  const event = new Event("change", { target: { value: modelValue.value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function removeFile(index) {
+  if (!modelValue.value) {
+    return;
+  }
+  if (!props.multiple || index === void 0) {
+    onUpdate([], true);
+    return;
+  }
+  const files = [...modelValue.value];
+  files.splice(index, 1);
+  onUpdate(files, true);
+}
+watch(modelValue, (newValue) => {
+  const hasModelReset = !Array.isArray(newValue) || !newValue.length;
+  if (hasModelReset && inputRef.value) {
+    inputRef.value.value = "";
+  }
+});
+defineExpose({
+  inputRef,
+  dropzoneRef
+});
+</script>
+
+<template>
+  <DefineFilesTemplate>
+    <template v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
+      <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
+
+      <div :class="ui.files({ class: props.ui?.files })">
+        <slot name="files" :files="modelValue">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" :class="ui.file({ class: props.ui?.file })">
+            <slot name="file" :file="file" :index="index">
+              <slot name="file-leading" :file="file" :index="index">
+                <UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+              </slot>
+
+              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span :class="ui.fileName({ class: props.ui?.fileName })">
+                  <slot name="file-name" :file="file" :index="index">
+                    {{ file.name }}
+                  </slot>
+                </span>
+
+                <span :class="ui.fileSize({ class: props.ui?.fileSize })">
+                  <slot name="file-size" :file="file" :index="index">
+                    {{ formatFileSize(file.size) }}
+                  </slot>
+                </span>
+              </div>
+
+              <slot name="file-trailing" :file="file" :index="index">
+                <UButton
+                  color="neutral"
+                  v-bind="{
+  ...layout === 'grid' ? {
+    variant: 'solid',
+    size: 'xs'
+  } : {
+    variant: 'link',
+    size
+  },
+  ...typeof fileDelete === 'object' ? fileDelete : void 0
+}"
+                  :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
+                  @click.stop.prevent="removeFile(index)"
+                />
+              </slot>
+            </slot>
+          </div>
+        </slot>
+      </div>
+
+      <slot name="files-bottom" :files="modelValue" :open="open" :remove-file="removeFile" />
+    </template>
+  </DefineFilesTemplate>
+
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot :open="open" :remove-file="removeFile">
+      <component
+        :is="variant === 'button' ? 'button' : 'div'"
+        ref="dropzoneRef"
+        :role="variant === 'button' ? void 0 : 'button'"
+        :data-dragging="isDragging"
+        :class="ui.base({ class: props.ui?.base })"
+        :tabindex="interactive && !disabled ? 0 : -1"
+        @click="interactive && !disabled && open()"
+      >
+        <ReuseFilesTemplate v-if="position === 'inside'" />
+
+        <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <slot name="leading">
+            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" :class="ui.icon({ class: props.ui?.icon })" />
+            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" :class="ui.avatar({ class: props.ui?.avatar })" />
+          </slot>
+
+          <template v-if="variant !== 'button'">
+            <div v-if="label || !!slots.label" :class="ui.label({ class: props.ui?.label })">
+              <slot name="label">
+                {{ label }}
+              </slot>
+            </div>
+            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
+
+            <div v-if="!!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+              <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
+            </div>
+          </template>
+        </div>
+      </component>
+
+      <ReuseFilesTemplate v-if="position === 'outside'" />
+    </slot>
+
+    <input
+      :id="id"
+      ref="inputRef"
+      type="file"
+      :name="name"
+      :accept="accept"
+      :multiple="multiple"
+      :required="required"
+      :disabled="disabled"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      class="sr-only"
+      tabindex="-1"
+    >
+  </Primitive>
+</template>

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

@@ -0,0 +1,167 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { UseFileDialogReturn } from '@vueuse/core';
+import theme from '#build/ui/file-upload';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
+export interface FileUploadProps<M extends boolean = false> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    /**
+     * The icon to display.
+     * @defaultValue appConfig.ui.icons.upload
+     * @IconifyIcon
+     */
+    icon?: string;
+    label?: string;
+    description?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: FileUpload['variants']['color'];
+    /**
+     * The `button` variant is only available when `multiple` is `false`.
+     * @defaultValue 'area'
+     */
+    variant?: FileUpload['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: FileUpload['variants']['size'];
+    /**
+     * The layout of how files are displayed.
+     * Only works when `variant` is `area`.
+     * @defaultValue 'list'
+     */
+    layout?: FileUpload['variants']['layout'];
+    /**
+     * The position of the files.
+     * Only works when `variant` is `area` and when `layout` is `list`.
+     * @defaultValue 'outside'
+     */
+    position?: FileUpload['variants']['position'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+     * @defaultValue '*'
+     */
+    accept?: string;
+    multiple?: M & boolean;
+    /**
+     * Reset the file input when the dialog is opened.
+     * @defaultValue false
+     */
+    reset?: boolean;
+    /**
+     * Create a zone that allows the user to drop files onto it.
+     * @defaultValue true
+     */
+    dropzone?: boolean;
+    /**
+     * Make the dropzone interactive when the user is clicking on it.
+     * @defaultValue true
+     */
+    interactive?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * The icon to display for the file.
+     * @defaultValue appConfig.ui.icons.file
+     * @IconifyIcon
+     */
+    fileIcon?: string;
+    /**
+     * Configure the delete button for the file.
+     * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
+     * When `layout` is `list`, the default is `{ color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     */
+    fileDelete?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed to delete a file.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    fileDeleteIcon?: string;
+    class?: any;
+    ui?: FileUpload['slots'];
+}
+export interface FileUploadEmits<M extends boolean = false> {
+    'update:modelValue': [payload: M extends true ? File[] : File | null];
+    'change': [event: Event];
+}
+type FileUploadFiles<M> = (M extends true ? File[] : File) | null;
+export interface FileUploadSlots<M extends boolean = false> {
+    'default'(props: {
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'leading'(props?: {}): any;
+    'label'(props?: {}): any;
+    'description'(props?: {}): any;
+    'actions'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'files'(props: {
+        files?: FileUploadFiles<M>;
+    }): any;
+    'files-top'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'files-bottom'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'file'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-leading'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-name'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-size'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-trailing'(props: {
+        file: File;
+        index: number;
+    }): any;
+}
+declare const _default: <M extends boolean = false>(__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 onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (FileUploadProps<M> & {
+        modelValue?: (M extends true ? File[] : File) | null;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    }>): void;
+    attrs: any;
+    slots: FileUploadSlots<M>;
+    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: M extends true ? File[] : File | null) => void)) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};