@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/components/Input.vue

@@ -7,9 +7,9 @@ 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
+  'update:modelValue': [payload: string | number]
+  'blur': [event: FocusEvent]
+  'change': [event: Event]
 }
 
 export interface InputSlots {
@@ -48,6 +48,7 @@ import { Primitive } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
 
@@ -68,22 +69,31 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 
-const { size, orientation } = useButtonGroup(props)
+const {
+  size: formItemSize,
+  id,
+  name,
+  highlight,
+  disabled,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormInput,
+  emitFormChange,
+  emitFormFocus,
+} = useFormItem<InputProps>(props, { deferInputValidation: true })
+const { size: buttonGroupSize, orientation } = useButtonGroup(props)
 const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.input)
-  return styler({
-    ...props,
-    // @ts-expect-error ignore type
-    type: props.type,
-    size: size.value,
-    groupOrientation: orientation.value,
-    leading: isLeading.value || !!slots.leading,
-    trailing: isTrailing.value || !!slots.trailing,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('input', {
+  ...props,
+  type: props.type as InputVariants['type'],
+  size: buttonGroupSize.value || formItemSize.value,
+  highlight: highlight.value,
+  groupOrientation: orientation.value,
+  leading: isLeading.value || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+}))
 
 function autoFocus() {
   if (props.autofocus)
@@ -98,6 +108,7 @@ function updateInput(value: string) {
     value = looseToNumber(value)
 
   modelValue.value = value
+  emitFormInput()
 }
 
 function onInput(event: Event) {
@@ -115,10 +126,12 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
 
   emit('change', event)
+  emitFormChange()
 }
 
 function onBlur(event: FocusEvent) {
   emit('blur', event)
+  emitFormBlur()
 }
 
 defineExpose({
@@ -136,7 +149,7 @@ onMounted(() => {
   <Primitive
     :as="as"
     :class="style.base({ class: [props.class, props.ui?.base] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :aria-disabled="disabled ? true : undefined"
   >
     <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
       <slot name="leading">
@@ -148,20 +161,18 @@ onMounted(() => {
     </span>
 
     <input
-      :id="id"
       ref="inputRef"
+      :class="style.input({ class: props.ui?.input })"
       :type="props.type"
       :value="modelValue"
-      :name="props.name"
       :placeholder="props.placeholder"
-      :class="style.input({ class: props.ui?.input })"
-      :disabled="props.disabled"
       :required="props.required"
       :autocomplete="props.autocomplete"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs, id, name, disabled }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
+      @focus="emitFormFocus"
     />
 
     <slot></slot>

package/dist/runtime/components/InputNumber.vue

@@ -5,9 +5,9 @@ import type { inputNumber } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
 export interface InputNumberEmits {
-  (e: 'update:modelValue', payload: number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', payload: Event): void
+  'update:modelValue': [payload: number]
+  'blur': [event: FocusEvent]
+  'change': [payload: Event]
 }
 
 export interface InputNumberSlots {
@@ -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 { useFormItem } from '../composables/useFormItem'
 import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
@@ -82,15 +83,18 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', '
 
 const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
 
-const { t } = useLocale()
-const { theme, createStyler } = useTheme()
+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(() => {
-  const styler = createStyler(theme.value.inputNumber)
-  return styler(props)
-})
+const style = computed(() => generateStyle('inputNumber', {
+  ...props,
+  size: size.value,
+  highlight: highlight.value,
+}))
 
 onMounted(() => {
   setTimeout(() => {
@@ -111,35 +115,36 @@ 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()
 }
 </script>
 
 <template>
   <NumberFieldRoot
-    v-bind="rootProps"
-    :id="props.id"
-    :name="props.name"
-    :disabled="props.disabled"
-    :locale="props.locale"
+    v-bind="{ ...rootProps, id, name, disabled }"
     :class="style.base({ class: [props.class, props.ui?.base] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :locale="locale"
+    :aria-disabled="disabled ? true : undefined"
     @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 })"
       @blur="onBlur"
+      @focus="emitFormFocus"
     />
 
     <div :class="style.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="props.disabled">
+      <NumberFieldIncrement as-child :disabled="disabled">
         <slot name="increment">
           <Button
             :icon="incrementIcon"
@@ -153,7 +158,7 @@ function onBlur(event: FocusEvent) {
     </div>
 
     <div :class="style.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="props.disabled">
+      <NumberFieldDecrement as-child :disabled="disabled">
         <slot name="decrement">
           <Button
             :icon="decrementIcon"

package/dist/runtime/components/Kbd.vue

@@ -36,12 +36,8 @@ const props = withDefaults(defineProps<KbdProps>(), {
 defineSlots<KbdSlots>()
 
 const { getKbdKey } = useKbd()
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.kbd)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('kbd', props))
 </script>
 
 <template>

package/dist/runtime/components/Link.vue

@@ -163,16 +163,24 @@ function isPartiallyEqual(item1: any, item2: any) {
 }
 
 const isExternalLink = computed(() => {
-  if (!props.to)
+  const to = props.to || props.href
+
+  if (!to)
     return false
 
-  return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
+  if (props.target === '_blank')
+    return true
+
+  return typeof to === 'string' && hasProtocol(to, { acceptRelative: true })
 })
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined)
     return props.active
 
+  if (isExternalLink.value || !props.to)
+    return false
+
   if (props.exactQuery === 'partial') {
     if (!isPartiallyEqual(linkRoute?.query, route.value?.query))
       return false
@@ -273,19 +281,28 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
       v-else
       v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }"
       v-bind="linkProps"
-      :to="to || '#'"
+      :to="isExternalLink ? '#' : to || '#'"
       custom
     >
       <template v-if="custom">
         <slot
           v-bind="{
             ...$attrs,
+            ...isExternalLink
+              ? {
+                href: to || props.href,
+                target: props.target,
+              }
+              : {
+                href: to ? href : undefined,
+                target: undefined,
+              },
             as,
             type,
             disabled,
-            href: to ? href : undefined,
             navigate,
             active: isLinkActive({ route: linkRoute, isActive, isExactActive }),
+            isExternal: isExternalLink,
           }"
         >
           {{ props.label }}
@@ -301,6 +318,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           href: to ? href : undefined,
           navigate,
         }"
+        :is-external="isExternalLink"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
       >
         <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
@@ -318,7 +336,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           type,
           disabled,
           href: to || href,
-          target: isExternalLink ? '_blank' : target || undefined,
+          target: target || (isExternalLink ? '_blank' : undefined),
           active: false,
         }"
       >
@@ -332,8 +350,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
         as,
         type,
         disabled,
-        href: ((to || href) as string),
-        target: isExternalLink ? '_blank' : target || undefined,
+        href: ((typeof to === 'string' ? to : href) as string),
+        target: target || (isExternalLink ? '_blank' : undefined),
       }"
       :is-external="isExternalLink"
       :class="resolveLinkClass()"

package/dist/runtime/components/Modal.vue

@@ -1,20 +1,22 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
+import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
 import type { modal } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+import type { ButtonProps, ComponentAttrs, EmitsToProps } from '../types'
 
-export interface ModalEmits extends DialogRootEmits {}
+export interface ModalEmits extends DialogRootEmits {
+  'after-leave': []
+}
 
 export interface ModalSlots {
   default?: (props: { open: boolean }) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  close?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
+  content?: any
+  header?: any
+  title?: any
+  description?: any
+  close?: (props: { ui: ComponentAttrs<typeof modal>['ui'] }) => any
+  body?: any
+  footer?: any
 }
 
 type ModalVariants = VariantProps<typeof modal>
@@ -23,7 +25,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
   title?: string
   description?: string
   size?: ModalVariants['size']
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /** @default true */
   portal?: boolean
   /** @default true */
@@ -35,6 +37,10 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
    * @default true
    */
   dismissible?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * @default true
+   */
   close?: ButtonProps | boolean
   /** @default app.icons.close */
   closeIcon?: string
@@ -43,7 +49,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
-import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
 import { computed, toRef } from 'vue'
 import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
@@ -60,7 +66,10 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emit = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
-const contentProps = toRef(() => props.content)
+const contentProps = toRef(() => ({
+  ...props.content,
+  ...(slots.content || slots.header || (!props.description && !slots.description)) ? { 'aria-describedby': undefined } : {},
+}))
 const contentEvents = computed(() => {
   if (props.dismissible)
     return {}
@@ -73,11 +82,8 @@ const contentEvents = computed(() => {
 })
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.modal)
-  return styler(props)
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('modal', props))
 </script>
 
 <template>
@@ -92,7 +98,11 @@ const style = computed(() => {
     <DialogPortal :disabled="!props.portal">
       <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
 
-      <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents">
+      <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents" @after-leave="emit('after-leave')">
+        <VisuallyHidden v-if="slots.content || slots.header || (!props.title && !slots.title)">
+          <DialogTitle />
+        </VisuallyHidden>
+
         <slot name="content">
           <div
             v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
@@ -108,10 +118,9 @@ const style = computed(() => {
                 </slot>
               </DialogTitle>
 
-              <DialogClose as-child>
-                <slot name="close">
+              <DialogClose v-if="props.close || slots.close" as-child>
+                <slot name="close" :ui="props.ui">
                   <Button
-                    v-if="props.close"
                     variant="ghost"
                     :icon="props.closeIcon || theme.app.icons.close"
                     v-bind="typeof props.close === 'boolean' ? {} : props.close"

package/dist/runtime/components/OverlayProvider.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { OverlayComponentState } from '../composables/useOverlay'
+import { useOverlay } from '../composables/useOverlay'
+
+const { overlays, unmount, close } = useOverlay()
+const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted))
+
+function onOverlayUnmount(id: OverlayComponentState['id']) {
+  close(id)
+  unmount(id)
+}
+
+function onClose(id: OverlayComponentState['id'], value: any) {
+  close(id, value)
+}
+</script>
+
+<template>
+  <component
+    :is="overlay.component"
+    v-for="overlay in mountedOverlays"
+    :key="overlay.id"
+    v-bind="overlay.props"
+    v-model:open="overlay.modelValue"
+    @close="onClose(overlay.id, $event)"
+    @after-leave="onOverlayUnmount(overlay.id)"
+  />
+</template>

package/dist/runtime/components/Pagination.vue

@@ -70,6 +70,10 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
    * @default true
    */
   showControls?: boolean
+  /**
+   * A function to render page controls as links.
+   */
+  to?: (page: number) => ButtonProps['to']
 }
 </script>
 
@@ -77,6 +81,7 @@ export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick
 import { reactivePick } from '@vueuse/core'
 import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -95,71 +100,73 @@ const slots = defineSlots<PaginationSlots>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emit)
 
-const { theme, createStyler } = useTheme()
+const { dir } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('pagination', props))
 
-const firstIcon = computed(() => props.firstIcon || theme.value.app.icons.chevronDoubleLeft)
-const prevIcon = computed(() => props.prevIcon || theme.value.app.icons.chevronLeft)
-const nextIcon = computed(() => props.nextIcon || theme.value.app.icons.chevronRight)
-const lastIcon = computed(() => props.lastIcon || theme.value.app.icons.chevronDoubleRight)
+const firstIcon = computed(() => props.firstIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleRight : theme.value.app.icons.chevronDoubleLeft))
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+const lastIcon = computed(() => props.lastIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronDoubleLeft : theme.value.app.icons.chevronDoubleRight))
 const ellipsisIcon = computed(() => props.ellipsisIcon || theme.value.app.icons.ellipsis)
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.pagination)
-  return styler(props)
-})
 </script>
 
 <template>
   <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
     <PaginationList v-slot="{ items }" :class="style.list({ class: props.ui?.list })">
-      <PaginationFirst v-if="props.showControls || !!slots.first" as-child>
+      <PaginationFirst v-if="props.showControls || !!slots.first" :class="style.first({ class: props.ui?.first })" as-child>
         <slot name="first">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="firstIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="props.showControls || !!slots.prev" as-child>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="style.prev({ class: props.ui?.prev })" as-child>
         <slot name="prev">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="prevIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items">
-        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" :class="style.item({ class: props.ui?.item })" :value="item.value" as-child>
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <Button
-              :class="style.item({ class: props.ui?.item })"
               :variant="props.page === item.value ? props.activeVariant : props.variant"
               :size="props.size"
               :label="String(item.value)"
-              :ui="{ label: style.label() }"
+              :to="props.to?.(item.value)"
+              :ui="{ label: style.label({ class: props.ui?.label }) }"
             />
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+        <PaginationEllipsis
+          v-else
+          :key="item.type"
+          :class="[
+            style.item({ class: props.ui?.item }),
+            style.ellipsis({ class: props.ui?.ellipsis }),
+          ]"
+          :index="index"
+          :disabled="props.disabled"
+          as-child
+        >
           <slot name="ellipsis">
             <Button
               :variant="props.variant"
               :size="props.size"
               :icon="ellipsisIcon"
-              :disabled="props.disabled /* TODO: remove after reka-ui update */"
-              :class="[
-                style.item({ class: props.ui?.item }),
-                style.ellipsis({ class: props.ui?.ellipsis }),
-              ]"
             />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="props.showControls || !!slots.next" as-child>
+      <PaginationNext v-if="props.showControls || !!slots.next" :class="style.next({ class: props.ui?.next })" as-child>
         <slot name="next">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="nextIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : undefined" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="props.showControls || !!slots.last" as-child>
+      <PaginationLast v-if="props.showControls || !!slots.last" :class="style.last({ class: props.ui?.last })" as-child>
         <slot name="last">
-          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="lastIcon" />
+          <Button :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
         </slot>
       </PaginationLast>
     </PaginationList>

package/dist/runtime/components/PinInput.vue

@@ -5,10 +5,10 @@ import type { pinInput } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface PinInputEmits {
-  (event: 'update:modelValue', value: string[]): void
-  (event: 'complete', value: string[]): void
-  (event: 'change', payload: Event): void
-  (event: 'blur', payload: Event): void
+  'update:modelValue': [value: string[]]
+  'complete': [value: string[]]
+  'change': [payload: Event]
+  'blur': [payload: Event]
 }
 
 type PinInputVariants = VariantProps<typeof pinInput>
@@ -26,6 +26,7 @@ export interface PinInputProps extends ComponentAttrs<typeof pinInput>, Pick<Pin
 import { reactivePick } from '@vueuse/core'
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, ref } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
 
@@ -41,44 +42,49 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disa
 
 const completed = ref(false)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.pinInput)
-  return styler(props)
-})
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormInput, emitFormChange, emitFormFocus, emitFormBlur } = useFormItem<PinInputProps>(props)
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('pinInput', {
+  ...props,
+  size: size.value,
+  highlight: highlight.value,
+}))
 
 function onComplete(value: string[]) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emit('change', event)
+  emitFormChange()
 }
 
 function onBlur(event: FocusEvent) {
-  if (!event.relatedTarget || completed.value)
+  if (!event.relatedTarget || completed.value) {
     emit('blur', event)
+    emitFormBlur()
+  }
 }
 </script>
 
 <template>
   <PinInputRoot
-    v-bind="rootProps"
-    :id="props.id"
-    :name="props.name"
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="emitFormInput"
     @complete="onComplete"
   >
     <span
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
       :class="style.container({ class: props.ui?.container })"
-      :aria-disabled="props.disabled ? true : undefined"
+      :aria-disabled="disabled ? true : undefined"
     >
       <PinInputInput
-        :index="index"
-        :class="style.base({ class: props.ui?.base })"
         v-bind="$attrs"
-        :disabled="props.disabled"
+        :class="style.base({ class: props.ui?.base })"
+        :index="index"
+        :disabled="disabled"
         @blur="onBlur"
+        @focus="emitFormFocus"
       />
     </span>
   </PinInputRoot>