@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/Toaster.vue

@@ -0,0 +1,130 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ToastProviderProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/toaster'
+
+const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
+
+const toaster = tv({ extend: tv(theme), ...(appConfig.ui?.toaster || {}) })
+
+type ToasterVariants = VariantProps<typeof toaster>
+
+export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  position?: ToasterVariants['position']
+  /**
+   * Expand the toasts to show multiple toasts at once.
+   * @defaultValue true
+   */
+  expand?: boolean
+  class?: any
+  ui?: Partial<typeof toaster.slots>
+}
+
+export interface ToasterSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useToast } from '../composables/useToast'
+import UToast from './Toast.vue'
+import { omit } from '../utils'
+
+const props = withDefaults(defineProps<ToasterProps>(), {
+  expand: true,
+  duration: 5000
+})
+defineSlots<ToasterSlots>()
+
+const providerProps = useForwardProps(reactivePick(props, 'duration', 'label', 'swipeThreshold'))
+
+const { toasts, remove } = useToast()
+
+const swipeDirection = computed(() => {
+  switch (props.position) {
+    case 'top-center':
+      return 'up'
+    case 'top-right':
+    case 'bottom-right':
+      return 'right'
+    case 'bottom-center':
+      return 'down'
+    case 'top-left':
+    case 'bottom-left':
+      return 'left'
+  }
+  return 'right'
+})
+
+const ui = computed(() => toaster({
+  position: props.position,
+  swipeDirection: swipeDirection.value
+}))
+
+function onUpdateOpen(value: boolean, id: string | number) {
+  if (value) {
+    return
+  }
+
+  remove(id)
+}
+
+const hovered = ref(false)
+const expanded = computed(() => props.expand || hovered.value)
+
+const refs = ref<{ height: number }[]>([])
+
+const height = computed(() => refs.value.reduce((acc, { height }) => acc + height + 16, 0))
+const frontHeight = computed(() => refs.value[refs.value.length - 1]?.height || 0)
+
+function getOffset(index: number) {
+  return refs.value.slice(index + 1).reduce((acc, { height }) => acc + height + 16, 0)
+}
+</script>
+
+<template>
+  <ToastProvider :swipe-direction="swipeDirection" v-bind="providerProps">
+    <slot />
+
+    <UToast
+      v-for="(toast, index) of toasts"
+      :key="toast.id"
+      ref="refs"
+      v-bind="omit(toast, ['id'])"
+      :data-expanded="expanded"
+      :data-front="!expanded && index === toasts.length - 1"
+      :style="{
+        '--index': (index - toasts.length) + toasts.length,
+        '--before': toasts.length - 1 - index,
+        '--offset': getOffset(index),
+        '--scale': expanded ? '1' : 'calc(1 - var(--before) * var(--scale-factor))',
+        '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
+        '--transform': 'translateY(var(--translate)) scale(var(--scale))'
+      }"
+      :class="[ui.base(), {
+        'cursor-pointer': !!toast.click
+      }]"
+      @update:open="onUpdateOpen($event, toast.id)"
+      @click="toast.click && toast.click(toast)"
+    />
+
+    <ToastViewport
+      :data-expanded="expanded"
+      :class="ui.viewport({ class: props.class })"
+      :style="{
+        '--scale-factor': '0.05',
+        '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
+        '--gap': position?.startsWith('top') ? '16px' : '-16px',
+        '--front-height': `${frontHeight}px`,
+        '--height': `${height}px`
+      }"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+    />
+  </ToastProvider>
+</template>

package/dist/runtime/components/Tooltip.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tooltip'
+import type { KbdProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
+
+const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
+
+export interface TooltipProps extends TooltipRootProps {
+  /** The text content of the tooltip. */
+  text?: string
+  /** The keyboard keys to display in the tooltip. */
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The content of the tooltip.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'>
+  /**
+   * Display an arrow alongside the tooltip.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the tooltip in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof tooltip.slots>
+}
+
+export interface TooltipEmits extends TooltipRootEmits {}
+
+export interface TooltipSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import UKbd from './Kbd.vue'
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  portal: true
+})
+const emits = defineEmits<TooltipEmits>()
+const slots = defineSlots<TooltipSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as TooltipContentProps)
+const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tooltip({
+  side: contentProps.value.side
+}))
+</script>
+
+<template>
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps">
+    <TooltipTrigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </TooltipTrigger>
+
+    <TooltipPortal :disabled="!portal">
+      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.class, props.ui?.content] })">
+        <slot name="content">
+          <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
+
+          <span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
+            <UKbd v-for="(kbd, index) in kbds" :key="index" :size="((props.ui?.kbdsSize || ui.kbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>

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

@@ -1,13 +1,15 @@
-import type { WatchSource } from 'vue';
+import type { MaybeRef } from 'vue';
+type Handler = (e?: any) => void;
 export interface ShortcutConfig {
-    handler: Function;
+    handler: Handler;
     usingInput?: string | boolean;
-    whenever?: WatchSource<boolean>[];
 }
 export interface ShortcutsConfig {
-    [key: string]: ShortcutConfig | Function;
+    [key: string]: ShortcutConfig | Handler | false | null | undefined;
 }
 export interface ShortcutsOptions {
     chainDelay?: number;
 }
-export declare const defineShortcuts: (config: ShortcutsConfig, options?: ShortcutsOptions) => void;
+export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): void;
+export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -1,17 +1,35 @@
-import { ref, computed } from "vue";
-import { logicAnd, logicNot } from "@vueuse/math";
-import { useEventListener, useDebounceFn } from "@vueuse/core";
-import { useShortcuts } from "./useShortcuts.js";
+import { ref, computed, toValue } from "vue";
+import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
+import { useKbd } from "../composables/useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
-export const defineShortcuts = (config, options = {}) => {
-  const { macOS, usingInput } = useShortcuts();
-  let shortcuts = [];
+export function extractShortcuts(items) {
+  const shortcuts = {};
+  function traverse(items2) {
+    items2.forEach((item) => {
+      if (item.kbds?.length && (item.select || item.click)) {
+        const shortcutKey = item.kbds.join("_");
+        shortcuts[shortcutKey] = item.select || item.click;
+      }
+      if (item.children) {
+        traverse(item.children.flat());
+      }
+      if (item.items) {
+        traverse(item.items.flat());
+      }
+    });
+  }
+  traverse(items.flat());
+  return shortcuts;
+}
+export function defineShortcuts(config, options = {}) {
   const chainedInputs = ref([]);
   const clearChainedInput = () => {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+  const { macOS } = useKbd();
+  const activeElement = useActiveElement();
   const onKeyDown = (e) => {
     if (!e.key) {
       return;
@@ -21,19 +39,19 @@ export const defineShortcuts = (config, options = {}) => {
     chainedInputs.value.push(e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
-      for (const shortcut of shortcuts.filter((s) => s.chained)) {
+      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
         if (shortcut.key !== chainedKey) {
           continue;
         }
-        if (shortcut.condition.value) {
+        if (shortcut.enabled) {
           e.preventDefault();
-          shortcut.handler();
+          shortcut.handler(e);
         }
         clearChainedInput();
         return;
       }
     }
-    for (const shortcut of shortcuts.filter((s) => !s.chained)) {
+    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
       if (e.key.toLowerCase() !== shortcut.key) {
         continue;
       }
@@ -46,7 +64,7 @@ export const defineShortcuts = (config, options = {}) => {
       if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
-      if (shortcut.condition.value) {
+      if (shortcut.enabled) {
         e.preventDefault();
         shortcut.handler();
       }
@@ -55,58 +73,69 @@ export const defineShortcuts = (config, options = {}) => {
     }
     debouncedClearChainedInput();
   };
-  shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
-    if (!shortcutConfig) {
-      return null;
-    }
-    let shortcut;
-    if (key.includes("-") && key !== "-" && !key.match(chainedShortcutRegex)?.length) {
-      console.trace(`[Shortcut] Invalid key: "${key}"`);
-    }
-    if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
-      console.trace(`[Shortcut] Invalid key: "${key}"`);
-    }
-    const chained = key.includes("-") && key !== "-";
-    if (chained) {
-      shortcut = {
-        key: key.toLowerCase(),
-        metaKey: false,
-        ctrlKey: false,
-        shiftKey: false,
-        altKey: false
-      };
-    } else {
-      const keySplit = key.toLowerCase().split("_").map((k) => k);
-      shortcut = {
-        key: keySplit.filter((k) => !["meta", "ctrl", "shift", "alt"].includes(k)).join("_"),
-        metaKey: keySplit.includes("meta"),
-        ctrlKey: keySplit.includes("ctrl"),
-        shiftKey: keySplit.includes("shift"),
-        altKey: keySplit.includes("alt")
-      };
-    }
-    shortcut.chained = chained;
-    if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-      shortcut.metaKey = false;
-      shortcut.ctrlKey = true;
-    }
-    if (typeof shortcutConfig === "function") {
-      shortcut.handler = shortcutConfig;
-    } else if (typeof shortcutConfig === "object") {
-      shortcut = { ...shortcut, handler: shortcutConfig.handler };
-    }
-    if (!shortcut.handler) {
-      console.trace("[Shortcut] Invalid value");
-      return null;
+  const usingInput = computed(() => {
+    const tagName = activeElement.value?.tagName;
+    const contentEditable = activeElement.value?.contentEditable;
+    const usingInput2 = !!(tagName === "INPUT" || tagName === "TEXTAREA" || contentEditable === "true" || contentEditable === "plaintext-only");
+    if (usingInput2) {
+      return activeElement.value?.name || true;
     }
-    const conditions = [];
-    if (!shortcutConfig.usingInput) {
-      conditions.push(logicNot(usingInput));
-    } else if (typeof shortcutConfig.usingInput === "string") {
-      conditions.push(computed(() => usingInput.value === shortcutConfig.usingInput));
-    }
-    shortcut.condition = logicAnd(...conditions, ...shortcutConfig.whenever || []);
-    return shortcut;
-  }).filter(Boolean);
+    return false;
+  });
+  const shortcuts = computed(() => {
+    return Object.entries(toValue(config)).map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null;
+      }
+      let shortcut;
+      if (key.includes("-") && key !== "-" && !key.match(chainedShortcutRegex)?.length) {
+        console.trace(`[Shortcut] Invalid key: "${key}"`);
+      }
+      if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
+        console.trace(`[Shortcut] Invalid key: "${key}"`);
+      }
+      const chained = key.includes("-") && key !== "-";
+      if (chained) {
+        shortcut = {
+          key: key.toLowerCase(),
+          metaKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          altKey: false
+        };
+      } else {
+        const keySplit = key.toLowerCase().split("_").map((k) => k);
+        shortcut = {
+          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          metaKey: keySplit.includes("meta") || keySplit.includes("command"),
+          ctrlKey: keySplit.includes("ctrl"),
+          shiftKey: keySplit.includes("shift"),
+          altKey: keySplit.includes("alt") || keySplit.includes("option")
+        };
+      }
+      shortcut.chained = chained;
+      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+        shortcut.metaKey = false;
+        shortcut.ctrlKey = true;
+      }
+      if (typeof shortcutConfig === "function") {
+        shortcut.handler = shortcutConfig;
+      } else if (typeof shortcutConfig === "object") {
+        shortcut = { ...shortcut, handler: shortcutConfig.handler };
+      }
+      if (!shortcut.handler) {
+        console.trace("[Shortcut] Invalid value");
+        return null;
+      }
+      let enabled = true;
+      if (!shortcutConfig.usingInput) {
+        enabled = !usingInput.value;
+      } else if (typeof shortcutConfig.usingInput === "string") {
+        enabled = usingInput.value === shortcutConfig.usingInput;
+      }
+      shortcut.enabled = enabled;
+      return shortcut;
+    }).filter(Boolean);
+  });
   useEventListener("keydown", onKeyDown);
-};
+}

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

@@ -0,0 +1,10 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+import type { AvatarGroupProps } from '../types/index.js';
+export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: AvatarGroupProps['size'];
+}>>;
+export declare function useAvatarGroup(props: {
+    size: AvatarGroupProps['size'];
+}): {
+    size: ComputedRef<any>;
+};

package/dist/runtime/composables/useAvatarGroup.js

@@ -0,0 +1,10 @@
+import { inject, provide, computed } from "vue";
+export const avatarGroupInjectionKey = Symbol("nuxt-ui.avatar-group");
+export function useAvatarGroup(props) {
+  const avatarGroup = inject(avatarGroupInjectionKey, void 0);
+  const size = computed(() => props.size ?? avatarGroup?.value.size);
+  provide(avatarGroupInjectionKey, computed(() => ({ size: size.value })));
+  return {
+    size
+  };
+}

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

@@ -1,20 +1,15 @@
-import type { Ref } from 'vue';
-import { buttonGroup } from '#ui/ui.config';
-type ButtonGroupProps = {
-    orientation?: Ref<'horizontal' | 'vertical'>;
-    size?: Ref<string>;
-    ui?: Ref<Partial<typeof buttonGroup>>;
-    rounded?: Ref<{
-        start: string;
-        end: string;
-    }>;
+import type { InjectionKey, ComputedRef } from 'vue';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue.js';
+import type { GetObjectField } from '../types/utils.js';
+export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: ButtonGroupProps['size'];
+    orientation: ButtonGroupProps['orientation'];
+}>>;
+type Props<T> = {
+    size?: GetObjectField<T, 'size'>;
 };
-export declare function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps): void;
-export declare function useInjectButtonGroup({ ui, props }: {
-    ui: any;
-    props: any;
-}): {
-    size: import("vue").ComputedRef<any>;
-    rounded: import("vue").ComputedRef<any>;
+export declare function useButtonGroup<T>(props: Props<T>): {
+    orientation: ComputedRef<any>;
+    size: ComputedRef<any>;
 };
 export {};

package/dist/runtime/composables/useButtonGroup.js

@@ -1,59 +1,9 @@
-import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from "vue";
-export function useProvideButtonGroup(buttonGroupProps) {
-  const instance = getCurrentInstance();
-  const groupKey = `group-${instance.uid}`;
-  const state = ref({
-    children: [],
-    register(child) {
-      this.children.push(child);
-    },
-    unregister(child) {
-      const index = this.children.indexOf(child);
-      if (index > -1) {
-        this.children.splice(index, 1);
-      }
-    },
-    ...buttonGroupProps
-  });
-  provide(groupKey, state);
-}
-export function useInjectButtonGroup({ ui, props }) {
-  const instance = getCurrentInstance();
-  provide("ButtonGroupContextConsumer", true);
-  const isParentPartOfGroup = inject("ButtonGroupContextConsumer", false);
-  if (isParentPartOfGroup) {
-    return {
-      size: computed(() => props.size),
-      rounded: computed(() => ui.value.rounded)
-    };
-  }
-  let parent = instance.parent;
-  let groupContext;
-  while (parent && !groupContext) {
-    if (parent.type.name === "ButtonGroup") {
-      groupContext = inject(`group-${parent.uid}`);
-      break;
-    }
-    parent = parent.parent;
-  }
-  const positionInGroup = computed(() => groupContext?.value.children.indexOf(instance));
-  onMounted(() => {
-    groupContext?.value.register(instance);
-  });
-  onUnmounted(() => {
-    groupContext?.value.unregister(instance);
-  });
+import { inject, computed } from "vue";
+export const buttonGroupInjectionKey = Symbol("nuxt-ui.button-group");
+export function useButtonGroup(props) {
+  const buttonGroup = inject(buttonGroupInjectionKey, void 0);
   return {
-    size: computed(() => {
-      if (!groupContext?.value) return props.size;
-      return groupContext?.value.size ?? ui.value.default.size;
-    }),
-    rounded: computed(() => {
-      if (!groupContext || positionInGroup.value === -1) return ui.value.rounded;
-      if (groupContext.value.children.length === 1) return groupContext.value.ui.rounded;
-      if (positionInGroup.value === 0) return groupContext.value.rounded.start;
-      if (positionInGroup.value === groupContext.value.children.length - 1) return groupContext.value.rounded.end;
-      return "rounded-none";
-    })
+    orientation: computed(() => buttonGroup?.value.orientation),
+    size: computed(() => props?.size ?? buttonGroup?.value.size)
   };
 }

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

@@ -0,0 +1,26 @@
+import { type MaybeRefOrGetter } from 'vue';
+export interface UseComponentIconsProps {
+    /** Display an icon based on the `leading` and `trailing` props. */
+    icon?: string;
+    /** When `true`, the icon will be displayed on the left side. */
+    leading?: boolean;
+    /** Display an icon on the left side. */
+    leadingIcon?: string;
+    /** When `true`, the icon will be displayed on the right side. */
+    trailing?: boolean;
+    /** Display an icon on the right side. */
+    trailingIcon?: string;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     */
+    loadingIcon?: string;
+}
+export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
+    isLeading: import("vue").ComputedRef<boolean>;
+    isTrailing: import("vue").ComputedRef<boolean>;
+    leadingIconName: import("vue").ComputedRef<any>;
+    trailingIconName: import("vue").ComputedRef<any>;
+};

package/dist/runtime/composables/useComponentIcons.js

@@ -0,0 +1,26 @@
+import { computed, toValue } from "vue";
+import { useAppConfig } from "#imports";
+export function useComponentIcons(componentProps) {
+  const appConfig = useAppConfig();
+  const props = computed(() => toValue(componentProps));
+  const isLeading = computed(() => props.value.icon && props.value.leading || props.value.icon && !props.value.trailing || props.value.loading && !props.value.trailing || !!props.value.leadingIcon);
+  const isTrailing = computed(() => props.value.icon && props.value.trailing || props.value.loading && props.value.trailing || !!props.value.trailingIcon);
+  const leadingIconName = computed(() => {
+    if (props.value.loading) {
+      return props.value.loadingIcon || appConfig.ui.icons.loading;
+    }
+    return props.value.leadingIcon || props.value.icon;
+  });
+  const trailingIconName = computed(() => {
+    if (props.value.loading && !isLeading.value) {
+      return props.value.loadingIcon || appConfig.ui.icons.loading;
+    }
+    return props.value.trailingIcon || props.value.icon;
+  });
+  return {
+    isLeading,
+    isTrailing,
+    leadingIconName,
+    trailingIconName
+  };
+}

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

@@ -0,0 +1,34 @@
+import { type InjectionKey, type Ref, type ComputedRef } from 'vue';
+import { type UseEventBusReturn } from '@vueuse/core';
+import type { FormFieldProps } from '../types/index.js';
+import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form.js';
+import type { GetObjectField } from '../types/utils.js';
+type Props<T> = {
+    id?: string;
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    color?: GetObjectField<T, 'color'>;
+    eagerValidation?: boolean;
+    legend?: string;
+    highlight?: boolean;
+    disabled?: boolean;
+};
+export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
+export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>>;
+export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
+export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
+export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>>;
+export declare function useFormField<T>(props?: Props<T>, opts?: {
+    bind?: boolean;
+}): {
+    id: ComputedRef<string | undefined>;
+    name: ComputedRef<string | undefined>;
+    size: ComputedRef<any>;
+    color: ComputedRef<"error" | GetObjectField<T, "color"> | undefined>;
+    highlight: ComputedRef<boolean | undefined>;
+    disabled: ComputedRef<boolean | undefined>;
+    emitFormBlur: () => void;
+    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
+    emitFormChange: () => void;
+};
+export {};