Aurora Label

1"use client"
2 
3/**
4 * Aurora Label — names a control. Matches the Claude Design source visually:
5 * bright primary text at label weight, a rose (`--aurora-accent-pink`) required
6 * asterisk, and a muted/dimmed disabled state.
7 *
8 * The visual layer is ported from the CD source onto a plain `<label>` element,
9 * preserving native `htmlFor` association and all label HTML attributes.
10 */
11 
12import * as React from "react"
13import * as LabelPrimitive from "@radix-ui/react-label"
14import { cn } from "@/lib/utils"
15 
16export interface LabelProps
17  extends React.ComponentProps<typeof LabelPrimitive.Root> {
18  /** Appends a rose required indicator (`*`) after the label text. */
19  required?: boolean
20  /** Dims the label to the muted tier (pairs with a disabled control). */
21  disabled?: boolean
22}
23 
24function Label({ className, style, required, disabled, children, ref, ...props }: LabelProps & { ref?: React.Ref<HTMLLabelElement> }) {
25  return (
26    <LabelPrimitive.Root
27      ref={ref}
28      data-disabled={disabled ? "" : undefined}
29      aria-disabled={disabled || undefined}
30      className={cn(
31        "aurora-text-label inline-flex items-center gap-1",
32        "text-[var(--aurora-text-primary)]",
33        "data-[disabled]:text-[var(--aurora-text-muted)]",
34        className
35      )}
36      style={{
37        cursor: disabled ? "not-allowed" : "default",
38        ...style,
39      }}
40      {...props}
41    >
42      {children}
43      {required && (
44        <span aria-hidden="true" style={{ color: "var(--aurora-accent-pink)" }}>
45          *
46        </span>
47      )}
48    </LabelPrimitive.Root>
49  )
50}
51 
52export { Label }
53export default Label