@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/runtime/components/Collapsible.vue

@@ -1,9 +1,30 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/collapsible";
-const appConfig = _appConfig;
-const collapsible = tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/collapsible'
+
+const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
+
+const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
+
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof collapsible.slots>
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/CommandPalette.vue

@@ -1,9 +1,102 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/command-palette";
-const appConfig = _appConfig;
-const commandPalette = tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxItemProps } from 'radix-vue'
+import type { FuseResult } from 'fuse.js'
+import type { AppConfig } from '@nuxt/schema'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/command-palette'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
+
+const commandPalette = tv({ extend: tv(theme), ...(appConfig.ui?.commandPalette || {}) })
+
+export interface CommandPaletteItem extends Pick<ComboboxItemProps, 'disabled'> {
+  prefix?: string
+  label?: string
+  suffix?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  kbds?: KbdProps['value'][] | KbdProps[]
+  slot?: string
+  select?(e?: Event): void
+}
+
+export interface CommandPaletteGroup<T> {
+  id: string
+  label?: string
+  slot?: string
+  items?: T[]
+  /**
+   * Wether to filter group items with [useFuse](https://vueuse.org/integrations/useFuse).
+   * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue true
+   */
+  filter?: boolean
+  /** Filter group items after the search happened. */
+  postFilter?: (searchTerm: string, items: T[]) => T[]
+  /** The icon displayed when an item is highlighted. */
+  highlightedIcon?: string
+}
+
+export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'selectedValue' | 'resetSearchTermOnBlur'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed in the input.
+   * @defaultValue appConfig.ui.icons.search
+   */
+  icon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The placeholder text for the input.
+   * @defaultValue 'Type a command or search...'
+   */
+  placeholder?: InputProps['placeholder']
+  /**
+   * Display a close button in the input (useful when inside a `UModal`).
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  groups?: G[]
+  /**
+   * Options for [useFuse](https://vueuse.org/integrations/useFuse).
+   * @defaultValue { ignoreLocation: true, threshold: 0.1, keys: ['label', 'suffix'], resultLimit: 12, matchAllWhenSearchEmpty: true }
+   */
+  fuse?: UseFuseOptions<T>
+  class?: any
+  ui?: PartialString<typeof commandPalette.slots>
+}
+
+export type CommandPaletteEmits<T> = ComboboxRootEmits<T>
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+  'empty'(props: { searchTerm?: string }): any
+  'close'(props: { ui: any }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">

package/dist/runtime/components/Container.vue

@@ -1,9 +1,25 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/container";
-const appConfig = _appConfig;
-const container = tv({ extend: tv(theme), ...appConfig.ui?.container || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/container'
+
+const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
+
+const container = tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) })
+
+export interface ContainerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
+
+export interface ContainerSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/ContextMenu.vue

@@ -1,9 +1,61 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/context-menu";
-const appConfig = _appConfig;
-const contextMenu = tv({ extend: tv(theme), ...appConfig.ui?.contextMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuTriggerProps, ContextMenuItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/context-menu'
+import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
+
+const contextMenu = tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })
+
+export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<ContextMenuItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link'
+  slot?: string
+  open?: boolean
+  defaultOpen?: boolean
+  children?: ContextMenuItem[] | ContextMenuItem[][]
+  select?(e: Event): void
+}
+
+type ContextMenuVariants = VariantProps<typeof contextMenu>
+
+export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>, Pick<ContextMenuTriggerProps, 'disabled'> {
+  size?: ContextMenuVariants['size']
+  items?: T[] | T[][]
+  /** The content of the menu. */
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof contextMenu.slots>
+}
+
+export interface ContextMenuEmits extends ContextMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type ContextMenuSlots<T extends { slot?: string }> = {
+  'default'(props?: {}): any
+  '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 ContextMenuItem">

package/dist/runtime/components/ContextMenuContent.vue

@@ -1,7 +1,21 @@
-<script>
-import { tv } from "tailwind-variants";
-import theme from "#build/ui/context-menu";
-const contextMenu = tv(theme)();
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ContextMenuContentProps as RadixContextMenuContentProps, ContextMenuContentEmits as RadixContextMenuContentEmits } from 'radix-vue'
+import theme from '#build/ui/context-menu'
+import type { KbdProps, AvatarProps, ContextMenuItem, ContextMenuSlots } from '../types'
+
+const _contextMenu = tv(theme)()
+
+interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  class?: any
+  ui: typeof _contextMenu
+  uiOverride?: any
+}
+
+interface ContextMenuContentEmits extends RadixContextMenuContentEmits {}
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">

package/dist/runtime/components/Drawer.vue

@@ -1,9 +1,51 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/drawer";
-const appConfig = _appConfig;
-const drawer = tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
+import type { DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/drawer'
+
+const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
+
+const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
+
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  /** The content of the drawer. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the drawer.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Render the drawer in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof drawer.slots>
+}
+
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default(props?: {}): any
+  handle(props?: {}): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/DropdownMenu.vue

@@ -1,9 +1,69 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/dropdown-menu";
-const appConfig = _appConfig;
-const dropdownMenu = tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/dropdown-menu'
+import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
+
+const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<DropdownMenuItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link'
+  slot?: string
+  open?: boolean
+  defaultOpen?: boolean
+  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  select?(e: Event): void
+}
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
+  size?: DropdownMenuVariants['size']
+  items?: T[] | T[][]
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof dropdownMenu.slots>
+}
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<T extends { slot?: string }> = {
+  'default'(props: { open: boolean }): any
+  '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 DropdownMenuItem">

package/dist/runtime/components/DropdownMenuContent.vue

@@ -1,7 +1,25 @@
-<script>
-import { tv } from "tailwind-variants";
-import theme from "#build/ui/dropdown-menu";
-const dropdownMenu = tv(theme)();
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DropdownMenuContentProps as RadixDropdownMenuContentProps, DropdownMenuContentEmits as RadixDropdownMenuContentEmits } from 'radix-vue'
+import theme from '#build/ui/dropdown-menu'
+import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
+
+const _dropdownMenu = tv(theme)()
+
+interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  class?: any
+  ui: typeof _dropdownMenu
+  uiOverride?: any
+}
+
+interface DropdownMenuContentEmits extends RadixDropdownMenuContentEmits {}
+
+type DropdownMenuContentSlots<T extends { slot?: string }> = Omit<DropdownMenuSlots<T>, 'default'> & {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">

package/dist/runtime/components/Form.vue

@@ -1,9 +1,33 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/form";
-const appConfig = _appConfig;
-const form = tv({ extend: tv(theme), ...appConfig.ui?.form || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
+
+const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
+
+const form = tv({ extend: tv(theme), ...(appConfig.ui?.form || {}) })
+
+export interface FormProps<T extends object> {
+  id?: string | number
+  schema?: FormSchema<T>
+  state: Partial<T>
+  validate?: (state: Partial<T>) => Promise<FormError[]>
+  validateOn?: FormInputEvents[]
+  disabled?: boolean
+  validateOnInputDelay?: number
+  class?: any
+}
+
+export interface FormEmits<T extends object> {
+  (e: 'submit', payload: FormSubmitEvent<T>): void
+  (e: 'error', payload: FormErrorEvent): void
+}
+
+export interface FormSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script lang="ts" setup generic="T extends object">
@@ -22,7 +46,7 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
 const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
 
-const formId = props.id ?? useId()
+const formId = props.id ?? useId() as string
 
 const bus = useEventBus<FormEvent>(`form-${formId}`)
 const parentBus = inject(
@@ -133,15 +157,12 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
 }
 
 async function onSubmit(payload: Event) {
-  const event = payload as SubmitEvent
+  const event = payload as FormSubmitEvent<any>
 
   try {
     await _validate({ nested: true })
-    const submitEvent: FormSubmitEvent<any> = {
-      ...event,
-      data: props.state
-    }
-    emits('submit', submitEvent)
+    event.data = props.state
+    emits('submit', event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error

package/dist/runtime/components/FormField.vue

@@ -1,16 +1,45 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/form-field";
-const appConfig = _appConfig;
-const formField = tv({ extend: tv(theme), ...appConfig.ui?.formField || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/form-field'
+
+const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
+
+const formField = tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })
+
+type FormFieldVariants = VariantProps<typeof formField>
+
+export interface FormFieldProps {
+  name?: string
+  label?: string
+  description?: string
+  help?: string
+  error?: string | boolean
+  hint?: string
+  size?: FormFieldVariants['size']
+  required?: boolean
+  eagerValidation?: boolean
+  validateOnInputDelay?: number
+  class?: any
+  ui?: Partial<typeof formField.slots>
+}
+
+export interface FormFieldSlots {
+  label(props: { label?: string }): any
+  hint(props: { hint?: string }): any
+  description(props: { description?: string }): any
+  help(props: { help?: string }): any
+  error(props: { error?: string | boolean }): any
+  default(props: { error?: string | boolean }): any
+}
 </script>
 
 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Label } from 'radix-vue'
-import { formFieldInjectionKey } from '../composables/useFormField'
-import type { FormError } from '../types/form'
+import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
+import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
@@ -22,23 +51,19 @@ const ui = computed(() => formField({
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => {
-  return (props.error && typeof props.error === 'string')
-    || typeof props.error === 'boolean'
-    ? props.error
-    : formErrors?.value?.find(error => error.name === props.name)?.message
-})
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name)?.message)
 
 const id = ref(useId())
 
+provide(inputIdInjectionKey, id)
+
 provide(formFieldInjectionKey, computed(() => ({
-  id: id.value,
   error: error.value,
   name: props.name,
   size: props.size,
   eagerValidation: props.eagerValidation,
   validateOnInputDelay: props.validateOnInputDelay
-})))
+}) as FormFieldInjectedOptions<FormFieldProps>))
 </script>
 
 <template>

package/dist/runtime/components/Icon.vue

@@ -1,5 +1,15 @@
-<script>
-
+<script lang="ts">
+export interface IconProps {
+  name: string
+  mode?: 'svg' | 'css'
+  size?: string | number
+  customize?: (
+    content: string,
+    name?: string,
+    prefix?: string,
+    provider?: string
+  ) => string
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Input.vue

@@ -1,9 +1,49 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/input";
-const appConfig = _appConfig;
-const input = tv({ extend: tv(theme), ...appConfig.ui?.input || {} });
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/input'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
+
+const input = tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })
+
+type InputVariants = VariantProps<typeof input>
+
+export interface InputProps extends UseComponentIconsProps {
+  id?: string
+  name?: string
+  type?: InputHTMLAttributes['type']
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  color?: InputVariants['color']
+  variant?: InputVariants['variant']
+  size?: InputVariants['size']
+  required?: boolean
+  autocomplete?: InputHTMLAttributes['autocomplete']
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof input.slots>
+}
+
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">