create-auto-app 1.34.0 → 1.36.0

package/templates/typical/client/src/components/ui/Form.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useForm } from 'react-hook-form';
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form';
-import { Input } from '@/components/ui/Input';
-import { Button } from '@/components/ui/Button';
-
-const meta: Meta<typeof Form> = {
-  title: 'UI Components/Form',
-  component: Form,
-};
-export default meta;
-type Story = StoryObj<typeof Form>;
-
-function FormDemo() {
-  const form = useForm({
-    defaultValues: { username: '' },
-  });
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(() => {})} className="w-full max-w-sm space-y-6">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter username" {...field} />
-              </FormControl>
-              <FormDescription>This is your public display name.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  );
-}
-
-/** Demonstrates a complete form field with label, input, description, and validation message wiring. */
-export const Default: Story = {
-  render: () => <FormDemo />,
-};

package/templates/typical/client/src/components/ui/Form.tsx

@@ -1,148 +0,0 @@
-import * as React from 'react';
-import type { Label as LabelPrimitive } from 'radix-ui';
-import { Slot } from 'radix-ui';
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from 'react-hook-form';
-
-import { cn } from '@/lib/utils';
-import { Label } from '@/components/ui/Label';
-
-/**
- * Form context provider that wraps react-hook-form's FormProvider.
- * Use with FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage for accessible form layouts with validation.
- */
-function Form({ ...props }: React.ComponentProps<typeof FormProvider>) {
-  return <FormProvider {...props} />;
-}
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-/** Connects a form input to react-hook-form via Controller, providing field context to child components. */
-function FormField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-/** Container for a single form field that provides ID context for accessibility linking between label, input, description, and error message. */
-function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
-    </FormItemContext.Provider>
-  );
-}
-
-/** Label for a form field that automatically links to its input and displays error styling when validation fails. */
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn('data-[error=true]:text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-}
-
-/** Wrapper that merges accessibility attributes (id, aria-describedby, aria-invalid) onto the form input element. */
-function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot.Root
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-}
-
-/** Helper text displayed below a form input, linked via aria-describedby for screen readers. */
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-/** Displays validation error messages for a form field. Automatically shows the field's error message or custom children. */
-function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? '') : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
-      {body}
-    </p>
-  );
-}
-
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/templates/typical/client/src/components/ui/HoverCard.stories.tsx

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/HoverCard';
-import { CalendarDaysIcon } from 'lucide-react';
-
-const meta: Meta<typeof HoverCard> = {
-  title: 'UI Components/HoverCard',
-  component: HoverCard,
-};
-export default meta;
-type Story = StoryObj<typeof HoverCard>;
-
-/** Shows a user profile preview card triggered by hovering over a username link. */
-export const Default: Story = {
-  render: () => (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <a href="#" className="text-sm font-medium underline underline-offset-4">
-          @nextjs
-        </a>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex justify-between space-x-4">
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">The React Framework for the Web. Created and maintained by @vercel.</p>
-            <div className="flex items-center pt-2">
-              <CalendarDaysIcon className="text-muted-foreground mr-2 h-4 w-4" />
-              <span className="text-muted-foreground text-xs">Joined December 2021</span>
-            </div>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  ),
-};
-
-/** Minimal hover card with just text content. */
-export const Simple: Story = {
-  render: () => (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <span className="cursor-pointer text-sm font-medium underline underline-offset-4">Hover me</span>
-      </HoverCardTrigger>
-      <HoverCardContent>
-        <p className="text-sm">This is a simple hover card with some text content.</p>
-      </HoverCardContent>
-    </HoverCard>
-  ),
-};

package/templates/typical/client/src/components/ui/HoverCard.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { HoverCard as HoverCardPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** A popup card that appears when hovering over a trigger element. Ideal for previewing content like user profiles or link destinations. */
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
-}
-
-/** Element that activates the hover card on mouse enter. */
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
-}
-
-/** The popup content that appears when hovering. Portals to body and animates in/out. */
-function HoverCardContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };

package/templates/typical/client/src/components/ui/Input.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Input } from '@/components/ui/Input';
-import { Label } from '@/components/ui/Label';
-
-const meta: Meta<typeof Input> = {
-  title: 'UI Components/Input',
-  component: Input,
-};
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-/** Basic empty input field. */
-export const Default: Story = {
-  args: {},
-};
-
-/** Email input with placeholder text. */
-export const WithPlaceholder: Story = {
-  args: {
-    placeholder: 'Enter your email...',
-    type: 'email',
-  },
-};
-
-/** Disabled input that cannot be edited. */
-export const Disabled: Story = {
-  args: {
-    placeholder: 'Disabled input',
-    disabled: true,
-    defaultValue: 'Cannot edit this',
-  },
-};
-
-/** Input paired with a label for accessibility. */
-export const WithLabel: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email-input">Email</Label>
-      <Input type="email" id="email-input" placeholder="Email" />
-    </div>
-  ),
-};

package/templates/typical/client/src/components/ui/Input.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-/** A styled text input field. Supports all native input types including file uploads. Shows validation error styling via aria-invalid. */
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

package/templates/typical/client/src/components/ui/InputGroup.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { InputGroup, InputGroupAddon, InputGroupText, InputGroupInput } from '@/components/ui/InputGroup';
-import { MailIcon, SearchIcon } from 'lucide-react';
-
-const meta: Meta<typeof InputGroup> = {
-  title: 'UI Components/InputGroup',
-  component: InputGroup,
-};
-export default meta;
-type Story = StoryObj<typeof InputGroup>;
-
-/** Input with a leading email icon addon. */
-export const Default: Story = {
-  render: () => (
-    <InputGroup className="max-w-sm">
-      <InputGroupAddon align="inline-start">
-        <InputGroupText>
-          <MailIcon />
-        </InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="you@example.com" />
-    </InputGroup>
-  ),
-};
-
-/** URL input with text addons on both sides. */
-export const WithPrefixAndSuffix: Story = {
-  render: () => (
-    <InputGroup className="max-w-sm">
-      <InputGroupAddon align="inline-start">
-        <InputGroupText>https://</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="example.com" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupText>.com</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-  ),
-};
-
-/** Search input with a magnifying glass icon. */
-export const SearchInput: Story = {
-  render: () => (
-    <InputGroup className="max-w-sm">
-      <InputGroupAddon align="inline-start">
-        <InputGroupText>
-          <SearchIcon />
-        </InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Search..." />
-    </InputGroup>
-  ),
-};

package/templates/typical/client/src/components/ui/InputGroup.tsx

@@ -1,153 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Textarea } from '@/components/ui/Textarea';
-
-/** Container that combines an input with addons like icons, buttons, or text. Supports inline and block-positioned addons. */
-function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
-        'h-9 min-w-0 has-[>textarea]:h-auto',
-
-        // Variants based on alignment.
-        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
-        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
-        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-
-        // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
-
-        // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
-
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
-        'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
-        'block-start':
-          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
-        'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
-      },
-    },
-    defaultVariants: {
-      align: 'inline-start',
-    },
-  },
-);
-
-/** Positioned container for icons, text, or buttons alongside the input. Use align prop to position at inline-start, inline-end, block-start, or block-end. */
-function InputGroupAddon({
-  className,
-  align = 'inline-start',
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest('button')) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector('input')?.focus();
-      }}
-      {...props}
-    />
-  );
-}
-
-const inputGroupButtonVariants = cva('text-sm shadow-none flex gap-2 items-center', {
-  variants: {
-    size: {
-      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-      sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
-      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
-      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
-    },
-  },
-  defaultVariants: {
-    size: 'xs',
-  },
-});
-
-/** A compact button sized for use inside InputGroupAddon. */
-function InputGroupButton({
-  className,
-  type = 'button',
-  variant = 'ghost',
-  size = 'xs',
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-/** Static text or icon displayed in an InputGroupAddon. */
-function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Input element styled to integrate seamlessly within an InputGroup. */
-function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Textarea element styled to integrate seamlessly within an InputGroup. */
-function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

package/templates/typical/client/src/components/ui/InputOTP.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/ui/InputOTP';
-
-const meta: Meta<typeof InputOTP> = {
-  title: 'UI Components/InputOTP',
-  component: InputOTP,
-};
-export default meta;
-type Story = StoryObj<typeof InputOTP>;
-
-/** 6-digit OTP input split into two groups of three with a separator. */
-export const Default: Story = {
-  render: () => (
-    <InputOTP maxLength={6}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
-};
-
-/** Compact 4-digit PIN input without separator. */
-export const FourDigits: Story = {
-  render: () => (
-    <InputOTP maxLength={4}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
-};

package/templates/typical/client/src/components/ui/InputOTP.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { OTPInput, OTPInputContext } from 'input-otp';
-import { MinusIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-/** One-time password input with individual digit slots. Handles paste, backspace, and arrow key navigation automatically. */
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
-      className={cn('disabled:cursor-not-allowed', className)}
-      {...props}
-    />
-  );
-}
-
-/** Groups InputOTPSlot elements together visually. */
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="input-otp-group" className={cn('flex items-center', className)} {...props} />;
-}
-
-/** A single digit slot in the OTP input. Shows a blinking caret when active. */
-function 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(
-        '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 dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
-        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>
-  );
-}
-
-/** Visual separator between groups of OTP slots, typically a dash. */
-function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  );
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };