@codefast/ui 0.0.40 → 0.0.42

package/src/react/form.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import type * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
+import * as React from 'react';
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
   type ControllerProps,
@@ -11,9 +11,9 @@ import {
   type FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form";
-import { cn } from "../lib/utils";
-import { Label } from "./label";
+} from 'react-hook-form';
+import { cn } from '../lib/utils';
+import { Label } from './label';
 
 /* -----------------------------------------------------------------------------
  * Context: Form
@@ -30,7 +30,9 @@ interface FormItemContextValue {
   id: string;
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(
+  null,
+);
 
 const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
@@ -51,7 +53,7 @@ const useFormField = (): {
   const { getFieldState, formState } = useFormContext();
 
   if (!fieldContext || !itemContext) {
-    throw new Error("useFormField should be used within <FormField>");
+    throw new Error('useFormField should be used within <FormField>');
   }
 
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -102,32 +104,45 @@ function FormField<
 type FormItemElement = HTMLDivElement;
 type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
 
-const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, ref) => {
-  const id = React.useId();
+const FormItem = React.forwardRef<FormItemElement, FormItemProps>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  );
-});
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
 
-FormItem.displayName = "FormItem";
+FormItem.displayName = 'FormItem';
 
 /* -----------------------------------------------------------------------------
  * Component: FormLabel
  * -------------------------------------------------------------------------- */
 
 type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
-type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
-
-const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
+type FormLabelProps = React.ComponentPropsWithoutRef<
+  typeof LabelPrimitive.Root
+>;
 
-  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
-});
+const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(
+  ({ className, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+
+    return (
+      <Label
+        ref={ref}
+        className={cn(error && 'text-destructive', className)}
+        htmlFor={formItemId}
+        {...props}
+      />
+    );
+  },
+);
 
-FormLabel.displayName = "FormLabel";
+FormLabel.displayName = 'FormLabel';
 
 /* -----------------------------------------------------------------------------
  * Component: FormControl
@@ -136,21 +151,26 @@ FormLabel.displayName = "FormLabel";
 type FormControlElement = React.ElementRef<typeof Slot>;
 type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
 
-const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={Boolean(error)}
-      {...props}
-    />
-  );
-});
+const FormControl = React.forwardRef<FormControlElement, FormControlProps>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } =
+      useFormField();
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={
+          !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`
+        }
+        aria-invalid={Boolean(error)}
+        {...props}
+      />
+    );
+  },
+);
 
-FormControl.displayName = "FormControl";
+FormControl.displayName = 'FormControl';
 
 /* -----------------------------------------------------------------------------
  * Component: FormDescription
@@ -159,15 +179,23 @@ FormControl.displayName = "FormControl";
 type FormDescriptionElement = HTMLParagraphElement;
 type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
-  ({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
+const FormDescription = React.forwardRef<
+  FormDescriptionElement,
+  FormDescriptionProps
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
 
-    return <p ref={ref} id={formDescriptionId} className={cn("text-muted-foreground text-xs", className)} {...props} />;
-  },
-);
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-xs', className)}
+      {...props}
+    />
+  );
+});
 
-FormDescription.displayName = "FormDescription";
+FormDescription.displayName = 'FormDescription';
 
 /* -----------------------------------------------------------------------------
  * Component: FormMessage
@@ -176,22 +204,29 @@ FormDescription.displayName = "FormDescription";
 type FormMessageElement = HTMLParagraphElement;
 type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ children, className, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error?.message ? error.message : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p ref={ref} id={formMessageId} className={cn("text-destructive text-xs font-medium", className)} {...props}>
-      {body}
-    </p>
-  );
-});
+const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(
+  ({ children, className, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error?.message ? error.message : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn('text-destructive text-xs font-medium', className)}
+        {...props}
+      >
+        {body}
+      </p>
+    );
+  },
+);
 
-FormMessage.displayName = "FormMessage";
+FormMessage.displayName = 'FormMessage';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/heading.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 
 /* -----------------------------------------------------------------------------
  * Component: Heading
@@ -8,17 +8,19 @@ import { Slot } from "@radix-ui/react-slot";
 type HeadingElement = HTMLHeadingElement;
 
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   asChild?: boolean;
 }
 
-const Heading = React.forwardRef<HeadingElement, HeadingProps>(({ asChild, as: Tag = "h1", ...props }, ref) => {
-  const Component = asChild ? Slot : Tag;
+const Heading = React.forwardRef<HeadingElement, HeadingProps>(
+  ({ asChild, as: Tag = 'h1', ...props }, ref) => {
+    const Component = asChild ? Slot : Tag;
 
-  return <Component ref={ref} {...props} />;
-});
+    return <Component ref={ref} {...props} />;
+  },
+);
 
-Heading.displayName = "Heading";
+Heading.displayName = 'Heading';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/hover-card.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCard
@@ -15,32 +15,39 @@ const HoverCard = HoverCardPrimitive.Root;
  * Component: HoverCardTrigger
  * -------------------------------------------------------------------------- */
 
-type HoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
+type HoverCardTriggerProps = React.ComponentPropsWithoutRef<
+  typeof HoverCardPrimitive.Trigger
+>;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardContent
  * -------------------------------------------------------------------------- */
 
-type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Content>;
-type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
+type HoverCardContentElement = React.ElementRef<
+  typeof HoverCardPrimitive.Content
+>;
+type HoverCardContentProps = React.ComponentPropsWithoutRef<
+  typeof HoverCardPrimitive.Content
+>;
 
-const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
-  ({ className, align = "center", sideOffset = 6, ...props }, ref) => (
-    <HoverCardPrimitive.Portal>
-      <HoverCardPrimitive.Content
-        ref={ref}
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  ),
-);
+const HoverCardContent = React.forwardRef<
+  HoverCardContentElement,
+  HoverCardContentProps
+>(({ className, align = 'center', sideOffset = 6, ...props }, ref) => (
+  <HoverCardPrimitive.Portal>
+    <HoverCardPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  </HoverCardPrimitive.Portal>
+));
 
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
@@ -49,10 +56,19 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
  * -------------------------------------------------------------------------- */
 
 type HoverCardArrowElement = React.ElementRef<typeof HoverCardPrimitive.Arrow>;
-type HoverCardArrowProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Arrow>;
+type HoverCardArrowProps = React.ComponentPropsWithoutRef<
+  typeof HoverCardPrimitive.Arrow
+>;
 
-const HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(({ className, ...props }, ref) => (
-  <HoverCardPrimitive.Arrow ref={ref} className={cn("fill-popover", className)} {...props} />
+const HoverCardArrow = React.forwardRef<
+  HoverCardArrowElement,
+  HoverCardArrowProps
+>(({ className, ...props }, ref) => (
+  <HoverCardPrimitive.Arrow
+    ref={ref}
+    className={cn('fill-popover', className)}
+    {...props}
+  />
 ));
 
 HoverCardArrow.displayName = HoverCardPrimitive.Arrow.displayName;

package/src/react/input-otp.tsx

@@ -1,15 +1,15 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { DotFilledIcon } from "@radix-ui/react-icons";
+import * as React from 'react';
+import { DotFilledIcon } from '@radix-ui/react-icons';
 import {
   OTPInput,
   OTPInputContext,
   REGEXP_ONLY_CHARS,
   REGEXP_ONLY_DIGITS,
   REGEXP_ONLY_DIGITS_AND_CHARS,
-} from "input-otp";
-import { cn } from "../lib/utils";
+} from 'input-otp';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: InputOtp
@@ -22,14 +22,17 @@ const InputOTP = React.forwardRef<InputOTPElement, InputOTPProps>(
   ({ className, containerClassName, ...props }, ref) => (
     <OTPInput
       ref={ref}
-      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,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
       {...props}
     />
   ),
 );
 
-InputOTP.displayName = "InputOTP";
+InputOTP.displayName = 'InputOTP';
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPGroup
@@ -38,11 +41,14 @@ InputOTP.displayName = "InputOTP";
 type InputOTPGroupElement = HTMLDivElement;
 type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
 
-const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+const InputOTPGroup = React.forwardRef<
+  InputOTPGroupElement,
+  InputOTPGroupProps
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
 ));
 
-InputOTPGroup.displayName = "InputOTPGroup";
+InputOTPGroup.displayName = 'InputOTPGroup';
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSlot
@@ -54,31 +60,33 @@ interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
   index: number;
 }
 
-const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const slot = inputOTPContext.slots[index];
+const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(
+  ({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const slot = inputOTPContext.slots[index];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+          slot?.isActive && 'z-10 outline outline-2',
+          className,
+        )}
+        {...props}
+      >
+        {slot?.char}
+        {slot?.hasFakeCaret ? (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
 
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        slot?.isActive && "z-10 outline outline-2",
-        className,
-      )}
-      {...props}
-    >
-      {slot?.char}
-      {slot?.hasFakeCaret ? (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
-        </div>
-      ) : null}
-    </div>
-  );
-});
-
-InputOTPSlot.displayName = "InputOTPSlot";
+InputOTPSlot.displayName = 'InputOTPSlot';
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSeparator
@@ -87,13 +95,16 @@ InputOTPSlot.displayName = "InputOTPSlot";
 type InputOTPSeparatorElement = HTMLDivElement;
 type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
 
-const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(({ ...props }, ref) => (
+const InputOTPSeparator = React.forwardRef<
+  InputOTPSeparatorElement,
+  InputOTPSeparatorProps
+>(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <DotFilledIcon />
   </div>
 ));
 
-InputOTPSeparator.displayName = "InputOTPSeparator";
+InputOTPSeparator.displayName = 'InputOTPSeparator';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/input.tsx

@@ -1,23 +1,23 @@
-import * as React from "react";
-import { type VariantProps } from "cva";
-import { cva } from "../lib/utils";
+import * as React from 'react';
+import { type VariantProps } from 'cva';
+import { cva } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Variant: Input
  * -------------------------------------------------------------------------- */
 
 const inputVariants = cva({
-  base: "border-input placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  base: 'border-input placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
   variants: {
     inputSize: {
-      default: "h-10",
-      xs: "h-8",
-      sm: "h-9",
-      lg: "h-11",
+      default: 'h-10',
+      xs: 'h-8',
+      sm: 'h-9',
+      lg: 'h-11',
     },
   },
   defaultVariants: {
-    inputSize: "default",
+    inputSize: 'default',
   },
 });
 
@@ -28,13 +28,23 @@ type InputVariantsProps = VariantProps<typeof inputVariants>;
  * -------------------------------------------------------------------------- */
 
 type InputElement = HTMLInputElement;
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputVariantsProps;
-
-const Input = React.forwardRef<InputElement, InputProps>(({ className, inputSize, ...props }, ref) => {
-  return <input type="text" className={inputVariants({ className, inputSize })} ref={ref} {...props} />;
-});
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  InputVariantsProps;
+
+const Input = React.forwardRef<InputElement, InputProps>(
+  ({ className, inputSize, ...props }, ref) => {
+    return (
+      <input
+        type="text"
+        className={inputVariants({ className, inputSize })}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
 
-Input.displayName = "Input";
+Input.displayName = 'Input';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/kbd.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Kbd
@@ -12,22 +12,24 @@ interface KbdProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, ref) => {
-  const Component = asChild ? Slot : "kbd";
-
-  return (
-    <Component
-      ref={ref}
-      className={cn(
-        "bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-Kbd.displayName = "Kbd";
+const Kbd = React.forwardRef<KbdElement, KbdProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Component = asChild ? Slot : 'kbd';
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          'bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Kbd.displayName = 'Kbd';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/label.tsx

@@ -1,7 +1,7 @@
-"use client";
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cn } from "../lib/utils";
+'use client';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Label
@@ -10,16 +10,18 @@ import { cn } from "../lib/utils";
 type LabelElement = React.ElementRef<typeof LabelPrimitive.Root>;
 type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
 
-const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(
-      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-      className,
-    )}
-    {...props}
-  />
-));
+const Label = React.forwardRef<LabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 Label.displayName = LabelPrimitive.Root.displayName;