feat(PinInput): implement component (#2570)

Co-authored-by: Max Steinwand <msteinwand@kues.de>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>

docs/app/components/content/ComponentCode.vue

@@ -164,7 +164,7 @@ const code = computed(() => {
         continue
       }
 
-      code += ` ${prop?.type.includes('number') ? ':' : ''}${name}="${value}"`
+      code += ` ${typeof value === 'number' ? ':' : ''}${name}="${value}"`
     }
   }
 

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -29,10 +29,11 @@ const schema = z.object({
   radioGroup: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
-  slider: z.number().max(20, { message: 'Must be less than 20' })
+  slider: z.number().max(20, { message: 'Must be less than 20' }),
+  pin: z.string().regex(/^\d$/).array().length(5)
 })
 
-type Schema = z.output<typeof schema>
+type Schema = z.input<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
 
@@ -52,7 +53,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <UForm ref="form" :state="state" :schema="schema" @submit="onSubmit">
+  <UForm ref="form" :state="state" :schema="schema" class="w-full" @submit="onSubmit">
     <div class="grid grid-cols-3 gap-4">
       <UFormField label="Input" name="input">
         <UInput v-model="state.input" placeholder="john@lennon.com" class="w-40" />
@@ -101,6 +102,12 @@ async function onSubmit(event: FormSubmitEvent<any>) {
       <UFormField name="radioGroup">
         <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
       </UFormField>
+
+      <span />
+
+      <UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
+        <UPinInput v-model="state.pin" />
+      </UFormField>
     </div>
 
     <div class="flex gap-2 mt-8">

docs/content/3.components/pin-input.md

@@ -0,0 +1,181 @@
+---
+title: PinInput
+description: An input element to enter a pin.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/PinInput.vue
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the PinInput.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: []
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+props:
+  defaultValue: ['1','2','3']
+---
+::
+
+### Type
+
+Use the `type` prop to change the input type. Defaults to `text`.
+
+::component-code
+---
+items:
+  type:
+    - text
+    - number
+props:
+  type: 'number'
+---
+::
+
+::note
+When `type` is set to `number`, it will only accept numeric characters.
+::
+
+### Mask
+
+Use the `mask` prop to treat the input like a password.
+
+::component-code
+---
+prettier: true
+ignore:
+  - placeholder
+  - defaultValue
+props:
+  mask: true
+  defaultValue: ['1','2','3','4','5']
+---
+::
+
+### OTP
+
+Use the `otp` prop to enable One-Time Password functionality. When enabled, mobile devices can automatically detect and fill OTP codes from SMS messages or clipboard content, with autocomplete support.
+
+::component-code
+---
+props:
+  otp: true
+---
+::
+
+### Length
+
+Use the `length` prop to change the amount of inputs.
+
+::component-code
+---
+props:
+  length: 6
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: '○'
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the PinInput is focused.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: neutral
+  highlight: true
+  placeholder: '○'
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the PinInput.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: neutral
+  variant: subtle
+  highlight: false
+  placeholder: '○'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the PinInput.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  size: xl
+  placeholder: '○'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the PinInput.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  disabled: true
+  placeholder: '○'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme