@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/components/InputNumber.vue

@@ -1,136 +1,106 @@
-<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>
+import theme from "#build/ui/input-number";
+</script>
 
-export interface InputNumberEmits {
-  'update:modelValue': [payload: number]
-  'blur': [event: FocusEvent]
-  'change': [payload: Event]
+<script setup>
+import { reactivePick, useVModel } from "@vueuse/core";
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, ref } from "vue";
+import { useAppConfig } from "#imports";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFormField } from "../composables/useFormField";
+import { useLocale } from "../composables/useLocale";
+import { cv, merge } from "../utils/style";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  variant: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  increment: { type: [Boolean, Object], required: false, default: true },
+  incrementIcon: { type: [String, Object], required: false },
+  incrementDisabled: { type: Boolean, required: false },
+  decrement: { type: [Boolean, Object], required: false, default: true },
+  decrementIcon: { type: [String, Object], required: false },
+  decrementDisabled: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false },
+  modelModifiers: { type: Object, required: false },
+  locale: { type: String, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  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 },
+  stepSnapping: { type: Boolean, 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 },
+  disableWheelChange: { type: Boolean, required: false },
+  invertWheelChange: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "blur", "change"]);
+defineSlots();
+const modelValue = useVModel(props, "modelValue", emit, { defaultValue: props.defaultValue });
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emit);
+const { t, code: codeLocale } = useLocale();
+const locale = computed(() => props.locale || codeLocale.value);
+const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormField(props);
+const { size: fieldGroupSize, orientation } = useFieldGroup(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.inputNumber));
+  return styler({
+    ...props,
+    size: fieldGroupSize.value || formFieldSize.value,
+    color: color.value,
+    highlight: highlight.value,
+    fieldGroup: orientation.value,
+    increment: props.orientation === "vertical" ? !!props.increment || !!props.decrement : !!props.increment,
+    decrement: props.orientation === "vertical" ? false : !!props.decrement
+  });
+});
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp));
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown));
+const inputRef = ref(null);
+function onUpdate(value) {
+  if (props.modelModifiers?.optional)
+    value ??= void 0;
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
 }
-
-export interface InputNumberSlots {
-  increment?: (props?: {}) => any
-  decrement?: (props?: {}) => any
+function onBlur(event) {
+  emitFormBlur();
+  emit("blur", event);
 }
-
-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 { 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, code: codeLocale } = useLocale()
-const locale = computed(() => props.locale || codeLocale.value)
-const { id, name, size, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormItem<InputNumberProps>(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)
-})
-
-defineExpose({
-  inputRef,
-})
-
 function autoFocus() {
   if (props.autofocus)
-    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)
-  emitFormChange()
-  emitFormInput()
-}
-
-function onBlur(event: FocusEvent) {
-  emit('blur', event)
-  emitFormBlur()
+    inputRef.value?.$el?.focus();
 }
+onMounted(() => {
+  setTimeout(() => autoFocus(), props.autofocusDelay);
+});
+defineExpose({
+  inputRef
+});
 </script>
 
 <template>
   <NumberFieldRoot
-    v-bind="{ ...rootProps, id, name, disabled }"
-    :class="style.base({ class: [props.class, props.ui?.base] })"
-    :locale="locale"
-    :aria-disabled="disabled ? true : undefined"
+    v-bind="{ ...rootProps, id, name, disabled, locale, modelValue }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
     @update:model-value="onUpdate"
   >
     <NumberFieldInput
@@ -138,34 +108,37 @@ function onBlur(event: FocusEvent) {
       ref="inputRef"
       :placeholder="props.placeholder"
       :required="props.required"
-      :class="style.input({ class: props.ui?.input })"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div :class="style.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="disabled">
+    <div v-if="props.increment" :class="ui.increment({ class: props.ui?.increment })" data-part="increment">
+      <NumberFieldIncrement :disabled="disabled || incrementDisabled" as-child>
         <slot name="increment">
           <Button
             :icon="incrementIcon"
             :size="props.size"
+            :color="color"
             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="disabled">
+    <div v-if="props.decrement" :class="ui.decrement({ class: props.ui?.decrement })" data-part="decrement">
+      <NumberFieldDecrement :disabled="disabled || decrementDisabled" as-child>
         <slot name="decrement">
           <Button
             :icon="decrementIcon"
             :size="props.size"
+            :color="color"
             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,191 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { NumberFieldRootProps } from 'reka-ui';
+import theme from '#build/ui/input-number';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ModelModifiers } from '../types/input';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: NumberFieldRootProps['as'];
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * The orientation of the input menu.
+     * @default "horizontal"
+     */
+    orientation?: ThemeVariants['orientation'];
+    /**
+     * Configure the increment button. The `color` and `size` are inherited.
+     * @default { variant: 'link' }
+     */
+    increment?: boolean | ButtonProps;
+    /**
+     * The icon displayed to increment the value.
+     * @default app.icons.plus
+     */
+    incrementIcon?: IconProps['name'];
+    /** Disable the increment button. */
+    incrementDisabled?: boolean;
+    /**
+     * Configure the decrement button. The `color` and `size` are inherited.
+     * @default { variant: 'link' }
+     */
+    decrement?: boolean | ButtonProps;
+    /**
+     * The icon displayed to decrement the value.
+     * @default app.icons.minus
+     */
+    decrementIcon?: IconProps['name'];
+    /** Disable the decrement button. */
+    decrementDisabled?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    modelModifiers?: Pick<ModelModifiers, 'optional'>;
+    /**
+     * The locale to use for formatting and parsing numbers.
+     * @default App.locale.code
+     */
+    locale?: string;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface InputNumberEmits {
+    'update:modelValue': [value: number];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
+}
+export interface InputNumberSlots {
+    increment: StaticSlot;
+    decrement: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+    inputRef: import("vue").Ref<MaybeNull<{
+        $: 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;
+        };
+        $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?: (props: {}) => any;
+        };
+    }>, MaybeNull<{
+        $: 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;
+        };
+        $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?: (props: {}) => any;
+        };
+    }>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
+    blur: (event: FocusEvent) => any;
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+    increment: boolean | ButtonProps;
+    decrement: boolean | ButtonProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Kbd.vue

@@ -1,47 +1,32 @@
-<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";
+import theme from "#build/ui/kbd";
 </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 { useAppConfig } from "#imports";
+import { useKbd } from "../composables/useKbd";
+import { cv, merge } from "../utils/style";
+const props = defineProps({
+  as: { type: null, required: false, default: "kbd" },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  value: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+defineSlots();
+const { getKbdKey } = useKbd();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.kbd));
+  return styler(props);
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style">
+  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
     <slot>{{ getKbdKey(props.value) }}</slot>
   </Primitive>
 </template>

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

@@ -0,0 +1,34 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/kbd';
+import type { KbdKey } from '../composables/useKbd';
+import type { ComponentBaseProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface KbdProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "kbd"
+     */
+    as?: PrimitiveProps['as'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "neutral" */
+    color?: ThemeVariants['color'];
+    value?: KbdKey | (string & {});
+}
+export interface KbdSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: __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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};