Initial commit for project Spoon!

2026-06-21 17:52:02 -05:00
commit cf7ff2ee4e
268 changed files with 32981 additions and 0 deletions
@@ -0,0 +1,83 @@
+'use client';
+
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+
+import { cn } from '@spoon/ui';
+
+const InputOTP = ({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) => (
+  <OTPInput
+    data-slot='input-otp'
+    containerClassName={cn(
+      'cn-input-otp flex items-center has-disabled:opacity-50',
+      containerClassName,
+    )}
+    spellCheck={false}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+);
+
+const InputOTPGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='input-otp-group'
+    className={cn(
+      'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const InputOTPSlot = ({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot='input-otp-slot'
+      data-active={isActive}
+      className={cn(
+        'dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink bg-foreground h-4 w-px duration-1000' />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const InputOTPSeparator = ({ ...props }: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='input-otp-separator'
+    className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+    role='separator'
+    {...props}
+  >
+    <MinusIcon />
+  </div>
+);
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };