@byyuurin/ui 0.0.7 → 0.0.8

package/dist/runtime/components/Button.vue

@@ -6,14 +6,14 @@ import type { ComponentAttrs } from '../types'
 import type { LinkProps } from './Link.vue'
 
 export interface ButtonSlots {
-  default?: (props?: any) => any
-  prefix?: (props?: any) => any
-  suffix?: (props?: any) => any
+  default?: (props?: {}) => any
+  leading?: (props?: {}) => any
+  trailing?: (props?: {}) => any
 }
 
 type ButtonVariants = VariantProps<typeof button>
 
-export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
+export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom' | 'underline'> {
   icon?: string
   label?: string
   variant?: ButtonVariants['variant']
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 const slots = defineSlots<ButtonSlots>()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: props.loading })),
 )
 
@@ -54,8 +54,8 @@ const style = computed(() => {
     ...props,
     size: size.value,
     groupOrientation: orientation.value,
-    prefix: isPrefix.value,
-    suffix: isSuffix.value,
+    leading: isLeading.value,
+    trailing: isTrailing.value,
     class: [
       props.class,
       props.active ? props.activeClass : props.inactiveClass,
@@ -73,10 +73,10 @@ const style = computed(() => {
     v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
     raw
   >
-    <slot name="prefix">
+    <slot name="leading">
       <span
-        v-if="isPrefix && prefixIconName"
-        :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+        v-if="isLeading && leadingIconName"
+        :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
       ></span>
     </slot>
     <span
@@ -85,10 +85,10 @@ const style = computed(() => {
     >
       <slot>{{ label }}</slot>
     </span>
-    <slot name="suffix">
+    <slot name="trailing">
       <span
-        v-if="isSuffix && suffixIconName"
-        :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+        v-if="isTrailing && trailingIconName"
+        :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
       ></span>
     </slot>
   </Link>

package/dist/runtime/components/ButtonGroup.vue

@@ -4,22 +4,27 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { buttonGroup } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ButtonGroupSlots {
+  default?: (props?: {}) => any
+}
+
 type ButtonGroupVariant = VariantProps<typeof buttonGroup>
 
-export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'>, Pick<PrimitiveProps, 'as'> {
+export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   size?: ButtonGroupVariant['size']
   orientation?: ButtonGroupVariant['orientation']
 }
-
-export interface ButtonGroupSlots {
-  default?: (props?: any) => any
-}
 </script>
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
-import { provideButtonGroup } from '../composables/useButtonGroup'
+import { provideButtonGroup } from '../app/injections'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
@@ -28,10 +33,7 @@ const props = withDefaults(defineProps<ButtonGroupProps>(), {
 
 defineSlots<ButtonGroupSlots>()
 
-provideButtonGroup(computed(() => ({
-  size: props.size,
-  orientation: props.orientation,
-})))
+provideButtonGroup(computed(() => props))
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {

package/dist/runtime/components/Card.vue

@@ -8,13 +8,18 @@ export interface CardSlots {
   default?: (props?: {}) => any
   content?: (props?: {}) => any
   header?: (props?: {}) => any
-  title?: (props?: any) => any
-  description?: (props?: any) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
   footer?: (props?: {}) => any
 }
 
 type CardVariants = VariantProps<typeof card>
+
 export interface CardProps extends ComponentAttrs<typeof card> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
   as?: PrimitiveProps['as']
   variant?: CardVariants['variant']
   title?: string

package/dist/runtime/components/Carousel.vue

@@ -11,9 +11,18 @@ import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
 import type { carousel } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface CarouselSlots<T> {
+  default?: (props: { item: T, index: number }) => any
+}
+
 type CarouselVariants = VariantProps<typeof carousel>
 
-export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<PrimitiveProps, 'as'>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   /**
    * Configure the prev button when arrows are enabled.
    * @default { size: 'md', variant: 'link' }
@@ -21,7 +30,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   prev?: ButtonProps
   /**
    * The icon displayed in the prev button.
-   * @default `app.icons.arrowLeft`
+   * @default app.icons.chevronLeft
    */
   prevIcon?: string
   /**
@@ -31,7 +40,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
   next?: ButtonProps
   /**
    * The icon displayed in the next button.
-   * @default `app.icons.arrowRight`
+   * @default app.icons.chevronRight
    */
   nextIcon?: string
   /**
@@ -78,10 +87,6 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<
    */
   wheelGestures?: boolean | WheelGesturesPluginOptions
 }
-
-export interface CarouselSlots<T> {
-  default?: (props: { item: T, index: number }) => any
-}
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">
@@ -89,6 +94,7 @@ import { computedAsync, reactivePick } from '@vueuse/core'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'
 import { computed, onMounted, ref, watch } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -129,14 +135,15 @@ defineSlots<CarouselSlots<T>>()
 
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.carousel)
   return styler(props)
 })
 
-const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowRight : theme.value.app.icons.arrowLeft))
-const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowLeft : theme.value.app.icons.arrowRight))
+const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
 
 const options = computed<EmblaOptionsType>(() => ({
   ...(props.fade ? { align: 'center', containScroll: false } : {}),
@@ -279,7 +286,7 @@ defineExpose({
           :icon="prevIcon"
           size="md"
           variant="outline"
-          aria-label="prev"
+          :aria-label="t('carousel.prev')"
           v-bind="typeof props.prev === 'object' ? props.prev : undefined"
           :class="style.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
@@ -289,7 +296,7 @@ defineExpose({
           :icon="nextIcon"
           size="md"
           variant="outline"
-          aria-label="next"
+          :aria-label="t('carousel.next')"
           v-bind="typeof props.next === 'object' ? props.next : undefined"
           :class="style.next({ class: props.ui?.next })"
           @click="scrollNext"
@@ -299,7 +306,7 @@ defineExpose({
       <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
-            :aria-label="`Go to ${index + 1}`"
+            :aria-label="t('carousel.goto', { page: index + 1 })"
             :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             @click="scrollTo(index)"
           ></button>

package/dist/runtime/components/Checkbox.vue

@@ -4,9 +4,22 @@ import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui'
 import type { checkbox } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface CheckboxEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+
 type CheckboxVariants = VariantProps<typeof checkbox>
 
 export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
   as?: PrimitiveProps['as']
   label?: string
   description?: string
@@ -22,15 +35,6 @@ export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<Che
    */
   indeterminateIcon?: string
 }
-
-export interface CheckboxEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface CheckboxSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
 </script>
 
 <script lang="ts" setup>

package/dist/runtime/components/Chip.vue

@@ -5,19 +5,24 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { chip } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ChipSlots {
+  leading?: (props?: {}) => any
+  default?: (props?: {}) => any
+  trailing?: (props?: {}) => any
+}
+
 type ChipVariants = VariantProps<typeof chip>
 
-export interface ChipProps extends ComponentAttrs<typeof chip>, Pick<PrimitiveProps, 'as'>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface ChipProps extends ComponentAttrs<typeof chip>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   variant?: ChipVariants['variant']
   size?: ChipVariants['size']
   label?: string
 }
-
-export interface ChipSlots {
-  prefix?: (props?: {}) => any
-  default?: (props?: {}) => any
-  suffix?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -34,7 +39,7 @@ const props = withDefaults(defineProps<ChipProps>(), {
 const slots = defineSlots<ChipSlots>()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
@@ -49,16 +54,16 @@ const style = computed(() => {
 
 <template>
   <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
-    <slot name="prefix">
-      <span v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></span>
+    <slot name="leading">
+      <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
     </slot>
 
     <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
       <slot>{{ props.label }}</slot>
     </span>
 
-    <slot name="suffix">
-      <span v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></span>
+    <slot name="trailing">
+      <span v-if="isTrailing && trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -3,15 +3,15 @@ import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
 import type { collapsible } from '../theme'
 import type { ComponentAttrs } from '../types'
 
-export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
-}
-
 export interface CollapsibleEmits extends CollapsibleRootEmits {}
 
 export interface CollapsibleSlots {
   default?: (props: { open: boolean }) => any
   content?: (props?: {}) => any
 }
+
+export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Drawer.vue

@@ -1,11 +1,23 @@
 <script lang="ts">
-import type { DialogContentProps, PrimitiveProps } from 'reka-ui'
+import type { DialogContentProps } from 'reka-ui'
 import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
 import type { drawer } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default?: (props?: {}) => any
+  handle?: (props?: {}) => any
+  content?: (props?: {}) => any
+  header?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  body?: (props?: {}) => any
+  footer?: (props?: {}) => any
+}
+
 export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
-  as?: PrimitiveProps['as']
   title?: string
   description?: string
   /** The content of the drawer. */
@@ -35,19 +47,6 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    */
   dismissible?: boolean
 }
-
-export interface DrawerEmits extends DrawerRootEmits {}
-
-export interface DrawerSlots {
-  default?: (props?: {}) => any
-  handle?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Input.vue

@@ -6,12 +6,24 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { input } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  leading?: (props?: {}) => any
+  default?: (props?: {}) => any
+  trailing?: (props?: {}) => any
+}
+
 type InputVariants = VariantProps<typeof input>
 
 export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @default "div"
    */
   as?: PrimitiveProps['as']
   id?: string
@@ -29,18 +41,6 @@ export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIc
   autofocusDelay?: number
   disabled?: boolean
 }
-
-export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
-}
-
-export interface InputSlots {
-  prefix?: (props?: {}) => any
-  default?: (props?: {}) => any
-  suffix?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -69,7 +69,7 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 const inputRef = ref<HTMLInputElement | null>(null)
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
@@ -80,8 +80,8 @@ const style = computed(() => {
     type: props.type,
     size: size.value,
     groupOrientation: orientation.value,
-    prefix: isPrefix.value || !!slots.prefix,
-    suffix: isSuffix.value || !!slots.suffix,
+    leading: isLeading.value || !!slots.leading,
+    trailing: isTrailing.value || !!slots.trailing,
   })
 })
 
@@ -138,11 +138,11 @@ onMounted(() => {
     :class="style.base({ class: [props.class, props.ui?.base] })"
     :aria-disabled="props.disabled ? true : undefined"
   >
-    <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
-      <slot name="prefix">
+    <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
+      <slot name="leading">
         <span
-          v-if="isPrefix && prefixIconName"
-          :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+          v-if="isLeading && leadingIconName"
+          :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
         ></span>
       </slot>
     </span>
@@ -166,11 +166,11 @@ onMounted(() => {
 
     <slot></slot>
 
-    <span v-if="isSuffix || slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
-      <slot name="suffix">
+    <span v-if="isTrailing || slots.trailing" :class="style.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
         <span
-          v-if="isSuffix && suffixIconName"
-          :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+          v-if="isTrailing && trailingIconName"
+          :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
         ></span>
       </slot>
     </span>

package/dist/runtime/components/InputNumber.vue

@@ -27,7 +27,7 @@ export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pi
   highlight?: boolean
   /**
    * The orientation of the input menu.
-   * @default 'horizontal'
+   * @default "horizontal"
    */
   orientation?: InputNumberVariants['orientation']
   /**
@@ -63,6 +63,7 @@ export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pi
 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'
 
@@ -81,9 +82,10 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', '
 
 const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
-const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.up))
-const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.down))
+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(() => {
   const styler = createStyler(theme.value.inputNumber)
@@ -143,7 +145,7 @@ function onBlur(event: FocusEvent) {
             :icon="incrementIcon"
             :size="props.size"
             variant="link"
-            aria-label="increment"
+            :aria-label="t('inputNumber.increment')"
             v-bind="typeof props.increment === 'object' ? props.increment : undefined"
           />
         </slot>
@@ -157,7 +159,7 @@ function onBlur(event: FocusEvent) {
             :icon="decrementIcon"
             :size="props.size"
             variant="link"
-            aria-label="decrement"
+            :aria-label="t('inputNumber.decrement')"
             v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
           />
         </slot>

package/dist/runtime/components/Kbd.vue

@@ -0,0 +1,51 @@
+<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>
+
+<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 { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.kbd)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style">
+    <slot>{{ getKbdKey(props.value) }}</slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Link.vue

@@ -5,6 +5,10 @@ import type { RouteLocationRaw, RouterLinkProps } from 'vue-router'
 import type { link } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface LinkSlots {
+  default?: (props: { active: boolean }) => any
+}
+
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
   /**
    * Route Location the link should navigate to when clicked on.
@@ -54,12 +58,12 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
 export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'>, NuxtLinkProps {
   /**
    * The element or component this component should render as when not a link.
-   * @default 'button'
+   * @default "button"
    */
   as?: PrimitiveProps['as']
   /**
    * The type of the button when not a link.
-   * @default 'button'
+   * @default "button"
    */
   type?: ButtonHTMLAttributes['type']
   label?: string
@@ -81,10 +85,6 @@ export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'>, Nuxt
   /** When `true`, only styles from `class`, `ui.active`, and `ui.inactive` will be applied. */
   raw?: boolean
 }
-
-export interface LinkSlots {
-  default?: (props: { active: boolean }) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -317,8 +317,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           as,
           type,
           disabled,
-          href: to,
-          target: isExternalLink ? '_blank' : undefined,
+          href: to || href,
+          target: isExternalLink ? '_blank' : target || undefined,
           active: false,
         }"
       >
@@ -332,8 +332,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
         as,
         type,
         disabled,
-        href: (to as string),
-        target: isExternalLink ? '_blank' : undefined,
+        href: ((to || href) as string),
+        target: isExternalLink ? '_blank' : target || undefined,
       }"
       :is-external="isExternalLink"
       :class="resolveLinkClass()"

package/dist/runtime/components/LinkBase.vue

@@ -4,7 +4,7 @@ import type { PrimitiveProps } from 'reka-ui'
 export interface LinkBaseProps {
   /**
    * The element or component this component should render as.
-   * @default 'button'
+   * @default "button"
    */
   as?: PrimitiveProps['as']
   type?: string