label

1"use client"
2 
3import * as React from "react"
4 
5import { createAnatomy } from "@ark-ui/react/anatomy"
6import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
7 
8import { cn } from "@/lib/utils"
9 
10const anatomy = createAnatomy("label").parts("root")
11const parts = anatomy.build()
12 
13const Label = React.forwardRef<HTMLLabelElement, HTMLArkProps<"label">>(
14  ({ className, htmlFor, children, ...props }, ref) => (
15    <ark.label
16      ref={ref}
17      {...parts.root.attrs}
18      htmlFor={htmlFor}
19      className={cn(
20        "select-none font-medium text-foreground text-sm leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
21        className
22      )}
23      {...props}
24    >
25      {children}
26    </ark.label>
27  )
28)
29Label.displayName = "Label"
30 
31export { Label }