@byyuurin/ui 0.0.11 → 0.2.0

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

@@ -1,59 +1,71 @@
 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'> {
+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;
-    variant?: InputNumberVariants['variant'];
-    size?: InputNumberVariants['size'];
-    underline?: boolean;
+    /** @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?: InputNumberVariants['orientation'];
+    orientation?: ThemeVariants['orientation'];
     /**
      * Configure the increment button. The `color` and `size` are inherited.
      * @default { variant: 'link' }
      */
-    increment?: ButtonProps;
+    increment?: boolean | ButtonProps;
     /**
      * The icon displayed to increment the value.
      * @default app.icons.plus
      */
-    incrementIcon?: string;
+    incrementIcon?: IconProps['name'];
+    /** Disable the increment button. */
+    incrementDisabled?: boolean;
     /**
      * Configure the decrement button. The `color` and `size` are inherited.
      * @default { variant: 'link' }
      */
-    decrement?: ButtonProps;
+    decrement?: boolean | ButtonProps;
     /**
      * The icon displayed to decrement the value.
      * @default app.icons.minus
      */
-    decrementIcon?: string;
+    decrementIcon?: IconProps['name'];
+    /** Disable the decrement button. */
+    decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
-    /**
-     * The locale to use for formatting and parsing numbers.
-     */
-    locale?: string;
+    modelModifiers?: Pick<ModelModifiers, 'optional'>;
+    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 _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
-    inputRef: import("vue").Ref<({
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+    inputRef: import("vue").Ref<MaybeNull<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
@@ -65,43 +77,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $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;
@@ -137,9 +112,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         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;
+            default?: (props: {}) => any;
         };
-    }) | null, ({
+    }>, MaybeNull<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
@@ -151,43 +126,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $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;
@@ -223,20 +161,23 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         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;
+            default?: (props: {}) => any;
         };
-    }) | null>;
+    }>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
     blur: (event: FocusEvent) => any;
-    change: (payload: Event) => any;
-    "update:modelValue": (payload: number) => any;
+    "update:modelValue": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((payload: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: number) => 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 (): {

package/dist/runtime/components/InputTags.vue

@@ -0,0 +1,155 @@
+<script>
+import theme from "#build/ui/input-tags";
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, shallowRef, toRaw, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFormField } from "../composables/useFormField";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  maxLength: { type: Number, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  deleteIcon: { type: [String, Object], required: false },
+  highlight: { type: Boolean, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  modelValue: { type: [Array, null], required: false },
+  defaultValue: { type: Array, required: false },
+  addOnPaste: { type: Boolean, required: false },
+  addOnTab: { type: Boolean, required: false },
+  addOnBlur: { type: Boolean, required: false },
+  duplicate: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  delimiter: { type: null, required: false },
+  max: { type: Number, required: false },
+  id: { type: String, required: false },
+  convertValue: { type: Function, required: false },
+  displayValue: { type: Function, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false }
+});
+const emit = defineEmits(["change", "blur", "focus", "update:modelValue", "invalid", "addTag", "removeTag"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emit);
+const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormInput, emitFormChange, emitFormFocus } = useFormField(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.inputTags));
+  return styler({
+    ...props,
+    color: color.value,
+    size: fieldGroupSize.value || formFieldSize.value,
+    highlight: highlight.value,
+    leading: isLeading.value || !!props.avatar || !!slots.leading,
+    trailing: isTrailing.value || !!slots.trailing,
+    fieldGroup: orientation.value
+  });
+});
+const inputRef = shallowRef(null);
+function onUpdate(value) {
+  if (toRaw(props.modelValue) === value)
+    return;
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function onBlur(event) {
+  emit("blur", event);
+  emitFormBlur();
+}
+function onFocus(event) {
+  emit("focus", event);
+  emitFormFocus();
+}
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus();
+}
+onMounted(() => {
+  setTimeout(() => autoFocus(), props.autofocusDelay);
+});
+defineExpose({
+  inputRef: toRef(() => inputRef.value?.$el)
+});
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="{ modelValue: tags }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="{ ...rootProps, id, name, disabled }"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
+        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
+      </TagsInputItemText>
+
+      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
+        <slot name="item-delete" :item="item" :index="index" :ui="ui">
+          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
+      :class="ui.input({ class: props.ui?.input })"
+      data-part="input"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" data-part="leadingIcon" />
+        <Avatar v-else-if="props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" data-part="leadingAvatar" />
+      </slot>
+    </span>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+      </slot>
+    </span>
+  </TagsInputRoot>
+</template>

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

@@ -0,0 +1,85 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { AcceptableInputValue, TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+import theme from '#build/ui/input-tags';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export type InputTagsItem = AcceptableInputValue;
+export interface InputTagsProps<T extends InputTagsItem = InputTagsItem> extends ComponentBaseProps, Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: TagsInputRootProps<T>['as'];
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /** The maximum number of character allowed. */
+    maxLength?: number;
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon displayed to delete a tag.
+     * @default appConfig.ui.icons.close
+     */
+    deleteIcon?: IconProps['name'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface InputTagsEmits<T extends InputTagsItem> extends TagsInputRootEmits<T> {
+    change: [event: Event];
+    blur: [event: FocusEvent];
+    focus: [event: FocusEvent];
+}
+export interface InputTagsSlots<T extends InputTagsItem = InputTagsItem> {
+    'leading': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'default': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'trailing': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-text': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-delete': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+}
+declare const __VLS_export: <T extends InputTagsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<InputTagsProps<AcceptableInputValue> & {
+        onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onInvalid?: ((payload: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
+        onAddTag?: ((payload: T) => any) | undefined;
+        onRemoveTag?: ((payload: T) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
+    }>) => void;
+    attrs: any;
+    slots: InputTagsSlots<T>;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Kbd.vue

@@ -1,26 +1,32 @@
 <script>
 import { computed } from "vue";
+import theme from "#build/ui/kbd";
 </script>
 
 <script setup>
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useKbd } from "../composables/useKbd";
-import { useTheme } from "../composables/useTheme";
+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: null, required: false }
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 defineSlots();
 const { getKbdKey } = useKbd();
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("kbd", props));
+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.base()" data-part="base">
+  <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

@@ -1,25 +1,31 @@
 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'> {
+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'];
-    variant?: KbdVariants['variant'];
-    size?: KbdVariants['size'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "neutral" */
+    color?: ThemeVariants['color'];
     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<{}>, {
+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 (): {