@hanzo/ui 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
+    "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",

package/primitives/index.ts

@@ -124,6 +124,13 @@ export {
   AvatarFallback 
 } from './avatar'
 
+export { 
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from './input-otp'
+
 export { Toggle, toggleVariants } from './toggle'
 export { ToggleGroup, ToggleGroupItem } from './toggle-group'
 

package/primitives/input-otp.tsx

@@ -0,0 +1,65 @@
+'use client'
+import * as React from 'react'
+
+import { OTPInput, type SlotProps } from 'input-otp'
+import { Dot } from 'lucide-react'
+
+import { cn } from '../util'
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn('flex items-center gap-2', className)}
+    {...props}
+  />
+))
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  SlotProps & React.ComponentPropsWithoutRef<'div'>
+>(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-2 text-sm ',
+        'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink h-4 w-px bg-foreground duration-1000' />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role='separator' {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }