@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/src/components/form.tsx

@@ -1,17 +1,13 @@
-"use client";
-
-import type { Scope } from "@radix-ui/react-context";
-import type * as LabelPrimitive from "@radix-ui/react-label";
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "radix-ui";
+import { Context } from "radix-ui/internal";
 import type { ComponentProps, JSX, ReactNode } from "react";
-import type { ControllerProps, FieldError, FieldPath, FieldValues } from "react-hook-form";
-
-import { cn } from "#/lib/utils";
-import { createContextScope } from "@radix-ui/react-context";
-import { Slot } from "@radix-ui/react-slot";
 import { useId } from "react";
+import type { ControllerProps, FieldError, FieldPath, FieldValues } from "react-hook-form";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 
 import { Label } from "#/components/label";
+import { cn } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
  * Component: Form
@@ -33,9 +29,9 @@ const Form: typeof FormProvider = FormProvider;
 
 const FORM_FIELD_NAME = "FormField";
 
-type ScopedProps<P> = P & { __scopeFormField?: Scope };
+type ScopedProps<P> = P & { __scopeFormField?: Context.Scope };
 
-const [createFormFieldContext, createFormFieldScope] = createContextScope(FORM_FIELD_NAME);
+const [createFormFieldContext, createFormFieldScope] = Context.createContextScope(FORM_FIELD_NAME);
 
 interface FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
@@ -44,12 +40,11 @@ interface FormFieldContextValue<
   name: TName;
 }
 
-const [FormFieldContextProvider, useFormFieldContext] =
-  createFormFieldContext<FormFieldContextValue>(FORM_FIELD_NAME);
+const [FormFieldContextProvider, useFormFieldContext] = createFormFieldContext<FormFieldContextValue>(FORM_FIELD_NAME);
 
 function useFormItem(
   consumerName: string,
-  scope: Scope,
+  scope: Context.Scope,
 ): {
   formDescriptionId: string;
   formItemId: string;
@@ -116,8 +111,7 @@ interface FormItemContextValue {
   id: string;
 }
 
-const [FormItemContextProvider, useFormItemContext] =
-  createFormFieldContext<FormItemContextValue>(FORM_ITEM_NAME);
+const [FormItemContextProvider, useFormItemContext] = createFormFieldContext<FormItemContextValue>(FORM_ITEM_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: FormItem
@@ -131,11 +125,7 @@ type FormItemProps = ComponentProps<"div">;
 /**
  * @since 0.3.16-canary.0
  */
-function FormItem({
-  __scopeFormField,
-  className,
-  ...props
-}: ScopedProps<FormItemProps>): JSX.Element {
+function FormItem({ __scopeFormField, className, ...props }: ScopedProps<FormItemProps>): JSX.Element {
   const id = useId();
 
   return (
@@ -162,14 +152,7 @@ type FormLabelProps = ComponentProps<typeof LabelPrimitive.Root>;
 function FormLabel({ __scopeFormField, ...props }: ScopedProps<FormLabelProps>): JSX.Element {
   const { error, formItemId } = useFormItem(FORM_LABEL_NAME, __scopeFormField);
 
-  return (
-    <Label
-      data-invalid={error ? true : undefined}
-      data-slot="form-label"
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+  return <Label data-invalid={error ? true : undefined} data-slot="form-label" htmlFor={formItemId} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -181,19 +164,16 @@ const FORM_CONTROL_NAME = "FormControl";
 /**
  * @since 0.3.16-canary.0
  */
-type FormControlProps = ComponentProps<typeof Slot>;
+type FormControlProps = ComponentProps<typeof Slot.Root>;
 
 /**
  * @since 0.3.16-canary.0
  */
 function FormControl({ __scopeFormField, ...props }: ScopedProps<FormControlProps>): JSX.Element {
-  const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(
-    FORM_CONTROL_NAME,
-    __scopeFormField,
-  );
+  const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(FORM_CONTROL_NAME, __scopeFormField);
 
   return (
-    <Slot
+    <Slot.Root
       aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}
       aria-invalid={Boolean(error)}
       data-slot="form-control"
@@ -215,11 +195,7 @@ type FormDescriptionProps = ComponentProps<"p">;
 /**
  * @since 0.3.16-canary.0
  */
-function FormDescription({
-  __scopeFormField,
-  className,
-  ...props
-}: ScopedProps<FormDescriptionProps>): JSX.Element {
+function FormDescription({ __scopeFormField, className, ...props }: ScopedProps<FormDescriptionProps>): JSX.Element {
   const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
 
   return (
@@ -246,12 +222,7 @@ type FormMessageProps = ComponentProps<"p">;
 /**
  * @since 0.3.16-canary.0
  */
-function FormMessage({
-  __scopeFormField,
-  children,
-  className,
-  ...props
-}: ScopedProps<FormMessageProps>): ReactNode {
+function FormMessage({ __scopeFormField, children, className, ...props }: ScopedProps<FormMessageProps>): ReactNode {
   const { error, formMessageId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
   const body = error?.message ?? children;
 
@@ -261,11 +232,7 @@ function FormMessage({
 
   return (
     <p
-      className={cn(
-        "text-xs",
-        error?.message ? "font-medium text-destructive" : "text-muted-foreground",
-        className,
-      )}
+      className={cn("text-xs", error?.message ? "font-medium text-destructive" : "text-muted-foreground", className)}
       data-slot="form-message"
       id={formMessageId}
       {...props}
@@ -288,13 +255,4 @@ export type {
   FormMessageProps,
   FormProps,
 };
-export {
-  createFormFieldScope,
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-};
+export { createFormFieldScope, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };

package/src/components/hover-card.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCard
@@ -56,26 +54,11 @@ function HoverCardContent({
   ...props
 }: HoverCardContentProps): JSX.Element {
   return (
-    <HoverCardPrimitive.Portal>
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
       <HoverCardPrimitive.Content
         align={align}
         className={cn(
-          "z-50",
-          "min-w-32 p-4",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-closed:data-side-top:slide-out-to-bottom-2",
-          "data-closed:data-side-right:slide-out-to-left-2",
-          "data-closed:data-side-bottom:slide-out-to-top-2",
-          "data-closed:data-side-left:slide-out-to-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-hover-card-content-transform-origin)",
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden ease-snappy data-open:animate-in data-open:animation-duration-popup-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-popup-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
           className,
         )}
         data-slot="hover-card-content"
@@ -99,13 +82,7 @@ type HoverCardArrowProps = ComponentProps<typeof HoverCardPrimitive.Arrow>;
  * @since 0.3.16-canary.0
  */
 function HoverCardArrow({ className, ...props }: HoverCardArrowProps): JSX.Element {
-  return (
-    <HoverCardPrimitive.Arrow
-      className={cn("fill-popover", className)}
-      data-slot="hover-card-arrow"
-      {...props}
-    />
-  );
+  return <HoverCardPrimitive.Arrow className={cn("fill-popover", className)} data-slot="hover-card-arrow" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/components/input-group.tsx

@@ -1,23 +1,14 @@
-"use client";
-
-import type { InputGroupAddonVariants, InputGroupButtonVariants } from "#/variants/input-group";
 import type { ComponentProps, JSX } from "react";
 
-import { cn } from "#/lib/utils";
-
-import {
-  inputGroupAddonVariants,
-  inputGroupButtonVariants,
-  inputGroupVariants,
-} from "#/variants/input-group";
-
 import type { ButtonProps } from "#/components/button";
-import type { InputProps } from "#/components/input";
-import type { TextareaProps } from "#/components/textarea";
-
 import { Button } from "#/components/button";
+import type { InputProps } from "#/components/input";
 import { Input } from "#/components/input";
+import type { TextareaProps } from "#/components/textarea";
 import { Textarea } from "#/components/textarea";
+import { cn } from "#/lib/utils";
+import type { InputGroupAddonVariants, InputGroupButtonVariants } from "#/variants/input-group";
+import { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants } from "#/variants/input-group";
 
 /* -----------------------------------------------------------------------------
  * Component: InputGroup
@@ -32,14 +23,7 @@ type InputGroupProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function InputGroup({ className, ...props }: InputGroupProps): JSX.Element {
-  return (
-    <div
-      className={inputGroupVariants({ className })}
-      data-slot="input-group"
-      role="group"
-      {...props}
-    />
-  );
+  return <div className={inputGroupVariants({ className })} data-slot="input-group" role="group" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -54,14 +38,10 @@ type InputGroupAddonProps = ComponentProps<"div"> & InputGroupAddonVariants;
 /**
  * @since 0.3.16-canary.0
  */
-function InputGroupAddon({
-  align = "inline-start",
-  className,
-  ...props
-}: InputGroupAddonProps): JSX.Element {
+function InputGroupAddon({ align = "inline-start", className, ...props }: InputGroupAddonProps): JSX.Element {
   return (
     <div
-      className={cn(inputGroupAddonVariants({ align }), className)}
+      className={inputGroupAddonVariants({ align, className })}
       data-align={align}
       data-slot="input-group-addon"
       role="group"
@@ -104,7 +84,7 @@ function InputGroupButton({
 }: InputGroupButtonProps): JSX.Element {
   return (
     <Button
-      className={cn(inputGroupButtonVariants({ size }), className)}
+      className={inputGroupButtonVariants({ size, className })}
       data-size={size}
       data-slot="input-group-button"
       type={type}
@@ -130,8 +110,7 @@ function InputGroupText({ className, ...props }: InputGroupTextProps): JSX.Eleme
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground",
-        "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-slot="input-group-text"
@@ -156,12 +135,7 @@ function InputGroupInput({ className, ...props }: InputGroupInputProps): JSX.Ele
   return (
     <Input
       className={cn(
-        "flex-1",
-        "px-3 py-1",
-        "rounded-none border-0",
-        "bg-transparent shadow-none",
-        "focus-visible:ring-0",
-        "dark:bg-transparent",
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
         className,
       )}
       data-slot="input-group-control"
@@ -186,13 +160,7 @@ function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): J
   return (
     <Textarea
       className={cn(
-        "flex-1",
-        "py-3",
-        "rounded-none border-0",
-        "bg-transparent shadow-none",
-        "resize-none",
-        "focus-visible:ring-0",
-        "dark:bg-transparent",
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
         className,
       )}
       data-slot="input-group-control"
@@ -205,14 +173,7 @@ function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): J
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-};
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
 
 export type {
   InputGroupAddonProps,

package/src/components/input-number.tsx

@@ -1,13 +1,11 @@
-"use client";
-
+import { ChevronDownIcon, ChevronUpIcon, MinusIcon, PlusIcon } from "lucide-react";
 import type { ComponentProps, JSX } from "react";
 
-import { cn } from "#/lib/utils";
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-import { buttonVariants } from "#/variants/button";
 import { Spinner } from "#/components/spinner";
 import * as InputNumberPrimitive from "#/primitives/input-number";
+import { buttonVariants } from "#/variants/button";
+import type { InputNumberVariants } from "#/variants/input-number";
+import { inputNumberVariants } from "#/variants/input-number";
 
 /* -----------------------------------------------------------------------------
  * Component: InputNumber
@@ -19,7 +17,8 @@ import * as InputNumberPrimitive from "#/primitives/input-number";
 interface InputNumberProps
   extends
     ComponentProps<typeof InputNumberPrimitive.Field>,
-    ComponentProps<typeof InputNumberPrimitive.Root> {}
+    ComponentProps<typeof InputNumberPrimitive.Root>,
+    InputNumberVariants {}
 
 /**
  * @since 0.3.16-canary.0
@@ -43,33 +42,19 @@ function InputNumber({
   step,
   suffix,
   value,
+  variant = "stepper",
   ...props
 }: InputNumberProps): JSX.Element {
+  const isSplit = variant === "split";
+  const { decrementButton, field, incrementButton, root, stepper, stepperButton } = inputNumberVariants({ variant });
+
   return (
     <InputNumberPrimitive.Root
       ariaDecrementLabel={ariaDecrementLabel}
       ariaIncrementLabel={ariaIncrementLabel}
-      className={cn(
-        "group peer flex h-9 w-full grow items-center gap-3 px-3 pr-0",
-        "rounded-lg border border-input",
-        "text-base",
-        "transition",
-        "motion-reduce:transition-none",
-        "not-has-disabled:shadow-xs",
-        "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50",
-        "hover:not-has-disabled:not-focus-within:border-ring/60",
-        "focus-within:has-aria-invalid:ring-destructive/20",
-        "hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60",
-        "md:text-sm",
-        "dark:bg-input/30",
-        "dark:focus-within:has-aria-invalid:ring-destructive/40",
-        "has-disabled:opacity-50",
-        "has-aria-invalid:border-destructive",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "[&>svg]:text-muted-foreground",
-        className,
-      )}
+      className={root({ className })}
       data-slot="input-number"
+      data-variant={variant}
       defaultValue={defaultValue}
       disabled={disabled}
       formatOptions={formatOptions}
@@ -86,69 +71,64 @@ function InputNumber({
       value={value}
       onChange={onChange}
     >
+      {isSplit ? (
+        <InputNumberPrimitive.DecrementButton
+          aria-label="Decrement"
+          className={buttonVariants({
+            className: decrementButton(),
+            variant: "ghost",
+          })}
+          data-slot="input-number-decrement-button"
+        >
+          <MinusIcon />
+        </InputNumberPrimitive.DecrementButton>
+      ) : null}
+
       <InputNumberPrimitive.Field
         autoCapitalize="none"
         autoComplete="off"
         autoCorrect="off"
-        className={cn(
-          "h-9 w-full min-w-0 px-3 py-1",
-          "rounded-md border border-input",
-          "bg-transparent shadow-xs outline-none",
-          "text-base",
-          "transition-[color,box-shadow]",
-          "motion-reduce:transition-none",
-          "selection:bg-primary selection:text-primary-foreground",
-          "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
-          "placeholder:text-muted-foreground",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-          "md:text-sm",
-          "dark:bg-input/30",
-          "dark:aria-invalid:ring-destructive/40",
-        )}
+        className={field()}
         spellCheck="false"
         {...props}
       />
-      <div
-        className={cn(
-          "order-last ml-auto grid h-full shrink-0",
-          "divide-y divide-input border-l border-l-input",
-          "transition",
-          "motion-reduce:transition-none",
-          "group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60",
-          "group-focus-within:divide-ring group-focus-within:border-l-ring",
-          "group-has-aria-invalid:divide-destructive group-has-aria-invalid:border-l-destructive",
-          "group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60",
-          "*:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0",
-          "group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20",
-          "dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40",
-        )}
-        data-slot="input-number-buttons"
-      >
+
+      {isSplit ? (
         <InputNumberPrimitive.IncrementButton
           aria-label="Increment"
           className={buttonVariants({
-            className:
-              "text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]",
+            className: incrementButton(),
             variant: "ghost",
           })}
           data-slot="input-number-increment-button"
         >
-          <ChevronUpIcon />
+          <PlusIcon />
         </InputNumberPrimitive.IncrementButton>
-        <InputNumberPrimitive.DecrementButton
-          aria-label="Decrement"
-          className={buttonVariants({
-            className:
-              "text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]",
-            variant: "ghost",
-          })}
-          data-slot="input-number-decrement-button"
-        >
-          <ChevronDownIcon />
-        </InputNumberPrimitive.DecrementButton>
-      </div>
+      ) : (
+        <div className={stepper()} data-slot="input-number-buttons">
+          <InputNumberPrimitive.IncrementButton
+            aria-label="Increment"
+            className={buttonVariants({
+              className: stepperButton(),
+              variant: "ghost",
+            })}
+            data-slot="input-number-increment-button"
+          >
+            <ChevronUpIcon className="size-3.5" />
+          </InputNumberPrimitive.IncrementButton>
+
+          <InputNumberPrimitive.DecrementButton
+            aria-label="Decrement"
+            className={buttonVariants({
+              className: stepperButton(),
+              variant: "ghost",
+            })}
+            data-slot="input-number-decrement-button"
+          >
+            <ChevronDownIcon className="size-3.5" />
+          </InputNumberPrimitive.DecrementButton>
+        </div>
+      )}
     </InputNumberPrimitive.Root>
   );
 }

package/src/components/input-otp.tsx

@@ -1,12 +1,10 @@
-"use client";
-
-import type { ComponentProps, JSX } from "react";
-
-import { cn } from "#/lib/utils";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
 import { use } from "react";
 
+import { cn } from "#/lib/utils";
+
 /* -----------------------------------------------------------------------------
  * Component: InputOtp
  * -------------------------------------------------------------------------- */
@@ -23,13 +21,10 @@ function InputOTP({ className, containerClassName, ...props }: InputOTPProps): J
   return (
     <OTPInput
       aria-label="One-time password"
-      className={cn(className)}
-      containerClassName={cn(
-        "flex items-center gap-2",
-        "has-disabled:opacity-50",
-        containerClassName,
-      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
       data-slot="input-otp"
+      spellCheck={false}
       {...props}
     />
   );
@@ -50,7 +45,10 @@ type InputOTPGroupProps = ComponentProps<"div">;
 function InputOTPGroup({ className, ...props }: InputOTPGroupProps): JSX.Element {
   return (
     <div
-      className={cn("flex items-center -space-x-px", className)}
+      className={cn(
+        "flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className,
+      )}
       data-slot="input-otp-group"
       role="group"
       {...props}
@@ -83,19 +81,7 @@ function InputOTPSlot({ className, index, ...props }: InputOTPSlotProps): JSX.El
   return (
     <div
       className={cn(
-        "relative flex size-9 items-center justify-center",
-        "border border-input outline-hidden",
-        "text-sm",
-        "transition-all",
-        "motion-reduce:transition-none",
-        "not-has-disabled:shadow-xs",
-        "first:rounded-l-lg",
-        "last:rounded-r-lg",
-        "aria-invalid:border-destructive",
-        "dark:bg-input/30",
-        "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50",
-        "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20",
-        "dark:data-active:aria-invalid:ring-destructive/40",
+        "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className,
       )}
       data-active={isActive}
@@ -104,18 +90,8 @@ function InputOTPSlot({ className, index, ...props }: InputOTPSlotProps): JSX.El
     >
       {char}
       {hasFakeCaret ? (
-        <div
-          className={cn("absolute inset-0 flex items-center justify-center", "pointer-events-none")}
-        >
-          <div
-            className={cn(
-              "h-4 w-px",
-              "bg-foreground",
-              "animate-caret-blink",
-              "animation-duration-1000",
-              "motion-reduce:animate-none motion-reduce:duration-0",
-            )}
-          />
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground animation-duration-1000" />
         </div>
       ) : null}
     </div>
@@ -136,7 +112,12 @@ type InputOTPSeparatorProps = ComponentProps<"div">;
  */
 function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): JSX.Element {
   return (
-    <div data-slot="input-otp-separator" {...props}>
+    <div
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      data-slot="input-otp-separator"
+      role="separator"
+      {...props}
+    >
       <MinusIcon />
     </div>
   );

package/src/components/input-password.tsx

@@ -1,9 +1,5 @@
-"use client";
-
-import { cn } from "#/lib/utils";
-import type { ComponentProps, JSX, MouseEventHandler } from "react";
-
 import { EyeIcon, EyeOffIcon } from "lucide-react";
+import type { ComponentProps, JSX, MouseEventHandler } from "react";
 import { useCallback, useState } from "react";
 
 import { InputGroup, InputGroupButton, InputGroupInput } from "#/components/input-group";
@@ -20,12 +16,7 @@ type InputPasswordProps = Omit<ComponentProps<typeof InputGroupInput>, "type">;
 /**
  * @since 0.3.16-canary.0
  */
-function InputPassword({
-  className,
-  disabled,
-  readOnly,
-  ...props
-}: InputPasswordProps): JSX.Element {
+function InputPassword({ className, disabled, readOnly, ...props }: InputPasswordProps): JSX.Element {
   const [type, setType] = useState<"password" | "text">("password");
 
   const togglePasswordVisibility = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {
@@ -33,26 +24,11 @@ function InputPassword({
   }, []);
 
   return (
-    <InputGroup
-      className={className}
-      data-disabled={disabled ? "true" : undefined}
-      data-slot="input-password"
-    >
-      <InputGroupInput
-        autoCapitalize="none"
-        data-slot="input-password-item"
-        disabled={disabled}
-        readOnly={readOnly}
-        type={type}
-        {...props}
-      />
+    <InputGroup className={className} data-disabled={disabled ? "true" : undefined} data-slot="input-password">
+      <InputGroupInput autoCapitalize="none" disabled={disabled} readOnly={readOnly} type={type} {...props} />
       <InputGroupButton
         aria-label={type === "password" ? "Show password" : "Hide password"}
-        className={cn(
-          "rounded-full",
-          "focus-visible:ring-0",
-          "focus-visible:not-disabled:bg-input",
-        )}
+        className="rounded-full"
         data-slot="input-password-toggle"
         disabled={disabled}
         size="icon-sm"