37 lines
910 B
TypeScript
37 lines
910 B
TypeScript
|
import * as React from "react"
|
||
|
|
import clsx from "clsx"
|
||
|
|
|
||
|
|
import { FieldContext } from "./FieldSet"
|
||
|
|
|
||
|
|
type LabelProps = {
|
||
|
|
children: React.ReactNode
|
||
|
|
sublabel?: boolean
|
||
|
|
} & React.ComponentPropsWithoutRef<"label">
|
||
|
|
|
||
|
|
export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
|
||
|
|
function Label(props, ref) {
|
||
|
|
const fieldContext = React.useContext(FieldContext)
|
||
|
|
const { children, sublabel, className, ...other } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<label
|
||
|
|
ref={ref}
|
||
|
|
{...other}
|
||
|
|
className={clsx(
|
||
|
|
"block font-semibold",
|
||
|
|
{
|
||
|
|
'text-neutral-850 before:content-["*"]':
|
||
|
|
fieldContext?.required && !sublabel,
|
||
|
|
"text-neutral-600/80": !fieldContext?.required,
|
||
|
|
"text-sm": sublabel,
|
||
|
|
"opacity-60": fieldContext?.disabled,
|
||
|
|
},
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</label>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)
|