Label

"use client"

import * as React from "react"

import { cn } from "@/registry/lib/utils"

function Label({
  className,
  onMouseDown,
  ...props
}: React.ComponentProps<"label">) {
  return (
    <label
      data-slot="label"
      className={cn(
        "block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
        className
      )}
      onMouseDown={(event) => {
        // Let clicks that start on an interactive control inside the label
        // behave normally (do not treat them as a label double-click).
        const target = event.target as HTMLElement
        if (target.closest("button, input, select, textarea")) return
        onMouseDown?.(event)
        // Prevent text selection when double-clicking to toggle a control.
        if (!event.defaultPrevented && event.detail > 1) event.preventDefault()
      }}
      {...props}
    />
  )
}

export { Label }