feat(unocss): add pin-input shortcuts

core/client/src/shared/ui/_shortcuts/index.ts

@@ -5,6 +5,7 @@ import { btn } from './button'
 import { dialog } from './dialog'
 import { dropdownMenu } from './dropdown-menu'
 import { input } from './input'
+import { pinInput } from './pin-input'
 import { select } from './select'
 
 export const shortcuts = [
@@ -15,4 +16,5 @@ export const shortcuts = [
   ...dropdownMenu,
   ...select,
   ...dialog,
+  ...pinInput,
 ] as Exclude<Preset['shortcuts'], undefined | StaticShortcutMap>

core/client/src/shared/ui/_shortcuts/pin-input.ts

@@ -0,0 +1,11 @@
+type PinInputPrefix = 'pin-input'
+
+export const staticPinInput: Record<`${PinInputPrefix}-${string}` | PinInputPrefix, string> = {
+  'pin-input': 'flex gap-2 items-center',
+  'pin-input-group': 'flex items-center',
+  'pin-input-input': 'relative placeholder:(absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2) align-middle text-center focus:(outline-none ring-2 ring-neutral-950 relative z-10) flex h-10 w-10 items-center justify-center border-y border-r border-neutral-200 text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:(focus:ring-neutral-300 border-neutral-800)',
+}
+
+export const pinInput = [
+  staticPinInput,
+]

core/client/src/shared/ui/pin-input/UiPinInput.vue

@@ -17,7 +17,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+  <PinInputRoot
+    v-bind="forwarded"
+    :class="cn(
+      'pin-input',
+      props.class,
+    )"
+  >
     <slot />
   </PinInputRoot>
 </template>

core/client/src/shared/ui/pin-input/UiPinInputGroup.vue

@@ -12,7 +12,13 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
+  <Primitive
+    v-bind="forwardedProps"
+    :class="cn(
+      'pin-input-group',
+      props.class,
+    )"
+  >
     <slot />
   </primitive>
 </template>

core/client/src/shared/ui/pin-input/UiPinInputInput.vue

@@ -14,5 +14,11 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <PinInputInput v-bind="forwardedProps" :class="cn('relative placeholder:(absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2) align-middle text-center focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-neutral-200 text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:focus:ring-neutral-300 dark:border-neutral-800', props.class)" />
+  <PinInputInput
+    v-bind="forwardedProps"
+    :class="cn(
+      'pin-input-input',
+      props.class,
+    )"
+  />
 </template>

core/client/uno.config.ts

@@ -64,6 +64,7 @@ export default defineConfig({
     './src/shared/ui/_shortcuts/dropdown-menu.ts',
     './src/shared/ui/_shortcuts/select.ts',
     './src/shared/ui/_shortcuts/dialog.ts',
+    './src/shared/ui/_shortcuts/pin-input.ts',
     './src/shared/ui/_shortcuts/index.ts',
   ],
   content: {