@byyuurin/ui 0.0.9 → 0.0.11

package/dist/runtime/components/InputNumber.vue

@@ -1,163 +1,128 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { NumberFieldRootProps } from 'reka-ui'
-import type { inputNumber } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+<script>
 
-export interface InputNumberEmits {
-  (e: 'update:modelValue', payload: number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', payload: Event): void
-}
-
-export interface InputNumberSlots {
-  increment?: (props?: {}) => any
-  decrement?: (props?: {}) => any
-}
-
-type InputNumberVariants = VariantProps<typeof inputNumber>
-
-export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pick<NumberFieldRootProps, 'as' | 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
-  /** The placeholder text when the input is empty. */
-  placeholder?: string
-  variant?: InputNumberVariants['variant']
-  size?: InputNumberVariants['size']
-  underline?: boolean
-  /** Highlight the ring color like a focus state. */
-  highlight?: boolean
-  /**
-   * The orientation of the input menu.
-   * @default "horizontal"
-   */
-  orientation?: InputNumberVariants['orientation']
-  /**
-   * Configure the increment button. The `color` and `size` are inherited.
-   * @default { variant: 'link' }
-   */
-  increment?: ButtonProps
-  /**
-   * The icon displayed to increment the value.
-   * @default app.icons.plus
-   */
-  incrementIcon?: string
-  /**
-   * Configure the decrement button. The `color` and `size` are inherited.
-   * @default { variant: 'link' }
-   */
-  decrement?: ButtonProps
-  /**
-   * The icon displayed to decrement the value.
-   * @default app.icons.minus
-   */
-  decrementIcon?: string
-  autofocus?: boolean
-  autofocusDelay?: number
-  /**
-   * The locale to use for formatting and parsing numbers.
-   */
-  locale?: string
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, onMounted, ref } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import Button from './Button.vue'
-
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, ref } from "vue";
+import { useFormItem } from "../composables/useFormItem";
+import { useLocale } from "../composables/useLocale";
+import { useTheme } from "../composables/useTheme";
+import Button from "./Button.vue";
 defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<InputNumberProps>(), {
-  orientation: 'horizontal',
-})
-
-const emit = defineEmits<InputNumberEmits>()
-defineSlots<InputNumberSlots>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emit)
-
-const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
-
-const { t } = useLocale()
-const { theme, generateStyle } = useTheme()
-const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.chevronUp))
-const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.chevronDown))
-
-const style = computed(() => generateStyle('inputNumber', props))
-
+  inheritAttrs: false
+});
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  underline: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  increment: { type: Object, required: false },
+  incrementIcon: { type: String, required: false },
+  decrement: { type: Object, required: false },
+  decrementIcon: { type: String, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false },
+  locale: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  as: { type: null, required: false },
+  modelValue: { type: [Number, null], required: false },
+  defaultValue: { type: Number, required: false },
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  formatOptions: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue", "blur", "change"]);
+defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "formatOptions"), emit);
+const inputRef = ref(null);
+const { t, code: codeLocale } = useLocale();
+const locale = computed(() => props.locale || codeLocale.value);
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormItem(props);
+const { theme, generateStyle } = useTheme();
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? theme.value.app.icons.plus : theme.value.app.icons.chevronUp));
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? theme.value.app.icons.minus : theme.value.app.icons.chevronDown));
+const style = computed(() => generateStyle("inputNumber", {
+  ...props,
+  size: size.value,
+  highlight: highlight.value
+}));
 onMounted(() => {
   setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
-
+    autoFocus();
+  }, props.autofocusDelay);
+});
 defineExpose({
-  inputRef,
-})
-
+  inputRef
+});
 function autoFocus() {
   if (props.autofocus)
-    inputRef.value?.$el?.focus()
+    inputRef.value?.$el?.focus();
 }
-
-function onUpdate(value: number) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emit('change', event)
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
 }
-
-function onBlur(event: FocusEvent) {
-  emit('blur', event)
+function onBlur(event) {
+  emit("blur", event);
+  emitFormBlur();
 }
 </script>
 
 <template>
   <NumberFieldRoot
-    v-bind="rootProps"
-    :id="props.id"
-    :name="props.name"
-    :disabled="props.disabled"
-    :locale="props.locale"
+    v-bind="{ ...rootProps, id, name, disabled }"
+    :locale="locale"
+    :aria-disabled="disabled ? true : void 0"
     :class="style.base({ class: [props.class, props.ui?.base] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :data-part="$attrs['data-part'] ?? 'base'"
     @update:model-value="onUpdate"
   >
     <NumberFieldInput
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
       ref="inputRef"
       :placeholder="props.placeholder"
       :required="props.required"
       :class="style.input({ class: props.ui?.input })"
+      data-part="input"
       @blur="onBlur"
+      @focus="emitFormFocus"
     />
 
-    <div :class="style.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="props.disabled">
+    <div :class="style.increment({ class: props.ui?.increment })" data-part="increment">
+      <NumberFieldIncrement as-child :disabled="disabled">
         <slot name="increment">
           <Button
             :icon="incrementIcon"
             :size="props.size"
             variant="link"
             :aria-label="t('inputNumber.increment')"
-            v-bind="typeof props.increment === 'object' ? props.increment : undefined"
+            v-bind="typeof props.increment === 'object' ? props.increment : void 0"
           />
         </slot>
       </NumberFieldIncrement>
     </div>
 
-    <div :class="style.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="props.disabled">
+    <div :class="style.decrement({ class: props.ui?.decrement })" data-part="decrement">
+      <NumberFieldDecrement as-child :disabled="disabled">
         <slot name="decrement">
           <Button
             :icon="decrementIcon"
             :size="props.size"
             variant="link"
             :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"
           />
         </slot>
       </NumberFieldDecrement>

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

@@ -0,0 +1,245 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { NumberFieldRootProps } from 'reka-ui';
+import type { inputNumber } from '../theme/index.js';
+import type { ButtonProps, ComponentAttrs } from '../types/index.js';
+export interface InputNumberEmits {
+    'update:modelValue': [payload: number];
+    'blur': [event: FocusEvent];
+    'change': [payload: Event];
+}
+export interface InputNumberSlots {
+    increment?: (props?: {}) => any;
+    decrement?: (props?: {}) => any;
+}
+type InputNumberVariants = VariantProps<typeof inputNumber>;
+export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pick<NumberFieldRootProps, 'as' | 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    variant?: InputNumberVariants['variant'];
+    size?: InputNumberVariants['size'];
+    underline?: boolean;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * The orientation of the input menu.
+     * @default "horizontal"
+     */
+    orientation?: InputNumberVariants['orientation'];
+    /**
+     * Configure the increment button. The `color` and `size` are inherited.
+     * @default { variant: 'link' }
+     */
+    increment?: ButtonProps;
+    /**
+     * The icon displayed to increment the value.
+     * @default app.icons.plus
+     */
+    incrementIcon?: string;
+    /**
+     * Configure the decrement button. The `color` and `size` are inherited.
+     * @default { variant: 'link' }
+     */
+    decrement?: ButtonProps;
+    /**
+     * The icon displayed to decrement the value.
+     * @default app.icons.minus
+     */
+    decrementIcon?: string;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The locale to use for formatting and parsing numbers.
+     */
+    locale?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+    inputRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }> | null;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }> | null;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    change: (payload: Event) => any;
+    "update:modelValue": (payload: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((payload: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: number) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Kbd.vue

@@ -1,47 +1,26 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import { computed } from 'vue'
-import type { KbdKey } from '../composables/useKbd'
-import type { kbd } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface KbdSlots {
-  default?: (props?: {}) => any
-}
-
-type KbdVariants = VariantProps<typeof kbd>
-
-export interface KbdProps extends Omit<ComponentAttrs<typeof kbd>, 'ui'> {
-  /**
-   * The element or component this component should render as.
-   * @default "kbd"
-   */
-  as?: PrimitiveProps['as']
-  variant?: KbdVariants['variant']
-  size?: KbdVariants['size']
-  value?: KbdKey | (string & {})
-}
+<script>
+import { computed } from "vue";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { useKbd } from '../composables/useKbd'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<KbdProps>(), {
-  as: 'kbd',
-})
-
-defineSlots<KbdSlots>()
-
-const { getKbdKey } = useKbd()
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('kbd', props))
+<script setup>
+import { Primitive } from "reka-ui";
+import { useKbd } from "../composables/useKbd";
+import { useTheme } from "../composables/useTheme";
+const props = defineProps({
+  as: { type: null, required: false, default: "kbd" },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  value: { type: null, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const { getKbdKey } = useKbd();
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("kbd", props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style">
+  <Primitive :as="props.as" :class="style.base()" data-part="base">
     <slot>{{ getKbdKey(props.value) }}</slot>
   </Primitive>
 </template>

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

@@ -0,0 +1,28 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { KbdKey } from '../composables/useKbd.js';
+import type { kbd } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface KbdSlots {
+    default?: (props?: {}) => any;
+}
+type KbdVariants = VariantProps<typeof kbd>;
+export interface KbdProps extends Omit<ComponentAttrs<typeof kbd>, 'ui'> {
+    /**
+     * The element or component this component should render as.
+     * @default "kbd"
+     */
+    as?: PrimitiveProps['as'];
+    variant?: KbdVariants['variant'];
+    size?: KbdVariants['size'];
+    value?: KbdKey | (string & {});
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, KbdSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};