feat: add component inputotp

Author: Ohh-889

packages/ui/package.json

@@ -53,6 +53,7 @@
     "clsx": "2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "8.6.0",
+    "input-otp": "^1.4.2",
     "lucide-react": "0.525.0",
     "next-themes": "0.4.6",
     "react": "19.1.0",

packages/ui/src/components/input-otp/InputOTP.tsx

@@ -0,0 +1,54 @@
+import type { ComponentRef } from 'react';
+import { Fragment, forwardRef } from 'react';
+
+import InputOTPGroup from './InputOTPGroup';
+import InputOTPSeparator from './InputOTPSeparator';
+import InputOTPSlot from './InputOTPSlot';
+import InputOtpRoot from './InputOtpRoot';
+import type { InputOTPProps } from './types';
+
+const InputOTP = forwardRef<ComponentRef<typeof InputOtpRoot>, InputOTPProps>((props, ref) => {
+  const { className, classNames, inputCount = 6, mask, placeholder, separator, size, ...rest } = props;
+
+  const isSeparator = Boolean(separator);
+
+  return (
+    <InputOtpRoot
+      className={className || classNames?.root}
+      maxLength={inputCount}
+      ref={ref}
+      {...rest}
+    >
+      <InputOTPGroup
+        className={classNames?.group}
+        separate={isSeparator}
+        size={size}
+      >
+        {Array.from({ length: inputCount }).map((_, index) => (
+          <Fragment key={String(index)}>
+            <InputOTPSlot
+              className={classNames?.input}
+              index={index}
+              mask={mask}
+              separate={isSeparator}
+              size={size}
+            />
+
+            {isSeparator && index !== inputCount - 1 && (
+              <InputOTPSeparator
+                className={classNames?.separator}
+                size={size}
+              >
+                {separator}
+              </InputOTPSeparator>
+            )}
+          </Fragment>
+        ))}
+      </InputOTPGroup>
+    </InputOtpRoot>
+  );
+});
+
+InputOTP.displayName = 'InputOTP';
+
+export default InputOTP;

packages/ui/src/components/input-otp/InputOTPGroup.tsx

@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils';
+
+import { inputOTPVariants } from './input-otp-variants';
+import type { InputOTPGroupProps } from './types';
+
+const InputOTPGroup = (props: InputOTPGroupProps) => {
+  const { className, separate, size, ...rest } = props;
+
+  const { group } = inputOTPVariants({ separate, size });
+
+  const mergedCls = cn(group(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      data-separate={separate}
+      data-size={size}
+      data-slot="input-otp-group"
+      {...rest}
+    />
+  );
+};
+
+export default InputOTPGroup;

packages/ui/src/components/input-otp/InputOTPSeparator.tsx

@@ -0,0 +1,27 @@
+import { Minus } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+import { inputOTPVariants } from './input-otp-variants';
+import type { InputOTPSeparatorProps } from './types';
+
+const InputOTPSeparator = (props: InputOTPSeparatorProps) => {
+  const { children, className, size, ...rest } = props;
+
+  const { separator } = inputOTPVariants({ size });
+
+  const mergedCls = cn(separator(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      data-size={size}
+      data-slot="input-otp-separator"
+      {...rest}
+    >
+      {children || <Minus />}
+    </div>
+  );
+};
+
+export default InputOTPSeparator;

packages/ui/src/components/input-otp/InputOTPSlot.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { OTPInputContext } from 'input-otp';
+import { useContext } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { inputOTPVariants } from './input-otp-variants';
+import type { InputOTPSlotProps } from './types';
+
+const InputOTPSlot = (props: InputOTPSlotProps) => {
+  const { className, index, mask, separate, size, ...rest } = props;
+
+  const inputOTPContext = useContext(OTPInputContext);
+
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  const { input } = inputOTPVariants({ isActive, separate, size });
+
+  const mergedCls = cn(input(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      data-has-fake-caret={hasFakeCaret}
+      data-index={index}
+      data-is-active={isActive}
+      data-separate={separate}
+      data-size={size}
+      data-slot="input-otp-slot"
+      {...rest}
+    >
+      {mask ? '●' : char}
+
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputOTPSlot;

packages/ui/src/components/input-otp/InputOtpRoot.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { OTPInput } from 'input-otp';
+import { type ComponentRef, forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { inputOTPVariants } from './input-otp-variants';
+import type { InputOTPRootProps } from './types';
+
+const InputOtpRoot = forwardRef<ComponentRef<typeof OTPInput>, InputOTPRootProps>((props, ref) => {
+  const { className, size: _, ...rest } = props;
+
+  const { root } = inputOTPVariants();
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <OTPInput
+      className={mergedCls}
+      data-slot="input-otp-root"
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+InputOtpRoot.displayName = 'InputOtpRoot';
+
+export default InputOtpRoot;

packages/ui/src/components/input-otp/index.ts

@@ -0,0 +1,7 @@
+export { default as InputOTP } from './InputOTP';
+export { default as InputOTPGroup } from './InputOTPGroup';
+export { default as InputOtpRoot } from './InputOtpRoot';
+export { default as InputOTPSeparator } from './InputOTPSeparator';
+export { default as InputOTPSlot } from './InputOTPSlot';
+
+export * from './types';

packages/ui/src/components/input-otp/input-otp-variants.ts

@@ -0,0 +1,99 @@
+import { tv } from 'tailwind-variants';
+
+export const inputOTPVariants = tv({
+  compoundVariants: [
+    {
+      class: {
+        group: 'gap-0.75'
+      },
+      separate: true,
+      size: 'xs'
+    },
+    {
+      class: {
+        group: 'gap-1'
+      },
+      separate: true,
+      size: 'sm'
+    },
+    {
+      class: {
+        group: 'gap-1.25'
+      },
+      separate: true,
+      size: 'lg'
+    },
+    {
+      class: {
+        group: 'gap-1.5'
+      },
+      separate: true,
+      size: 'xl'
+    },
+    {
+      class: {
+        group: 'gap-1.75'
+      },
+      separate: true,
+      size: '2xl'
+    }
+  ],
+  defaultVariants: {
+    separate: false,
+    size: 'md'
+  },
+  slots: {
+    group: 'flex items-center disabled:opacity-50 has-[:disabled]:opacity-50',
+    input: [
+      `relative flex items-center justify-center text-center border-y border-r border-solid border-input bg-background transition-all duration-200`,
+      `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary focus-visible:z-2`,
+      `disabled:cursor-not-allowed disabled:opacity-50`
+    ],
+    root: `flex items-center disabled:cursor-not-allowed`,
+    separator: `text-muted-foreground`
+  },
+  variants: {
+    isActive: {
+      true: {
+        input: `z-10 ring-1 ring-ring`
+      }
+    },
+    separate: {
+      false: {
+        input: `first:rounded-l-md first:border-l last:rounded-r-md`
+      },
+      true: {
+        group: `gap-1`,
+        input: `rounded-md border`
+      }
+    },
+    size: {
+      '2xl': {
+        input: `h-12 w-12 text-xl`,
+        separator: `text-xl`
+      },
+      lg: {
+        input: `h-9 w-9 text-base`,
+        separator: `text-base`
+      },
+      md: {
+        input: `h-8 w-8 text-sm`,
+        separator: `text-sm`
+      },
+      sm: {
+        input: `h-7 w-7 text-xs`,
+        separator: `text-xs`
+      },
+      xl: {
+        input: `h-10 w-10 text-lg`,
+        separator: `text-lg`
+      },
+      xs: {
+        input: `h-6 w-6 text-2xs`,
+        separator: `text-2xs`
+      }
+    }
+  }
+});
+
+export type InputOTPSlots = keyof typeof inputOTPVariants.slots;

packages/ui/src/components/input-otp/types.ts

@@ -0,0 +1,60 @@
+import type { RenderProps } from 'input-otp';
+
+import type { BaseComponentProps, ClassValue, ThemeSize } from '@/types/other';
+
+import type { InputOTPSlots } from './input-otp-variants';
+
+type OverrideProps<T, R> = Omit<T, keyof R> & R;
+
+type OTPInputRootBaseProps = OverrideProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  {
+    className?: ClassValue;
+    containerClassName?: string;
+    maxLength: number;
+    noScriptCSSFallback?: string | null;
+    onChange?: (newValue: string) => unknown;
+    onComplete?: (...args: any[]) => unknown;
+    pasteTransformer?: (pasted: string) => string;
+    pushPasswordManagerStrategy?: 'increase-width' | 'none';
+    size?: ThemeSize;
+    textAlign?: 'center' | 'left' | 'right';
+    value?: string;
+  }
+>;
+
+type InputOTPRenderFn = (props: RenderProps) => React.ReactNode;
+
+export type InputOTPGroupProps = BaseComponentProps<'div'> & {
+  separate?: boolean;
+};
+
+export type InputOTPRootProps = OTPInputRootBaseProps &
+  (
+    | {
+        children?: never;
+        render: InputOTPRenderFn;
+      }
+    | {
+        children: React.ReactNode;
+        render?: never;
+      }
+  );
+
+export interface InputOTPSeparatorProps extends BaseComponentProps<'div'> {}
+
+export interface InputOTPSlotProps extends BaseComponentProps<'div'> {
+  index: number;
+  mask?: boolean;
+  separate?: boolean;
+}
+
+export type InputOTPClassNames = Partial<Record<InputOTPSlots, ClassValue>>;
+
+export type InputOTPProps = Omit<OTPInputRootBaseProps, 'maxLength' | 'separate'> & {
+  classNames?: InputOTPClassNames;
+  inputCount?: number;
+  mask?: boolean;
+  separator?: React.ReactNode | true;
+  size?: ThemeSize;
+};

packages/ui/src/components/slider/Slider.tsx

@@ -1,5 +1,5 @@
 import type { ComponentRef } from 'react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import SliderRange from './SliderRange';
 import SliderRoot from './SliderRoot';