Tone labels

"use client"

import * as React from "react"

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

/* Tone label family: 5 semantically toned form labels (info, success, warning,
   danger, muted). This is a SEPARATE styled component; the base label does not
   change. Every root carries data-tone. The label is a REAL <label> bound with
   htmlFor to the rendered demo input (the id is produced by React.useId()) - an
   unbound label is an a11y bug. The tone dot uses currentColor, so it inherits the
   tone color. Color comes ONLY from tokens. Static - no animation, motion is not
   needed. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const text: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm",
  xl: "text-base",
}

/* Demo input yuksekligi base Button olcegine hizali. */
const inputHeight: Record<StyledSize, string> = {
  sm: "h-8",
  md: "h-9",
  lg: "h-10",
  xl: "h-12",
}

const base =
  "inline-flex w-fit items-center gap-1.5 font-medium leading-none select-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const field = "flex w-fit flex-col gap-1.5"

const inputBase =
  "w-48 rounded-md border border-field-border bg-transparent px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"

type Props = Omit<React.ComponentProps<"label">, "htmlFor"> & { size?: StyledSize }

/* Shared shell: the tone colour goes on the label and the tone dot rides the same colour through currentColor. The root carries data-slot plus data-tone; the label is bound to the demo input with htmlFor. */
function ToneField({
  tone,
  toneClass,
  className,
  size = "md",
  children,
  ...props
}: Props & { tone: string; toneClass: string }) {
  const id = React.useId()
  return (
    <span data-slot="styled-label" data-tone={tone} className={field}>
      <label
        htmlFor={id}
        className={cn(base, text[size], toneClass, className)}
        {...props}
      >
        <span
          aria-hidden="true"
          className="size-1.5 shrink-0 rounded-full [background-color:currentColor]"
        />
        {children ?? "Email"}
      </label>
      <input
        id={id}
        type="text"
        placeholder="you@example.com"
        className={cn(inputBase, inputHeight[size])}
      />
    </span>
  )
}

/* Info: bilgilendirici ton. */
export function InfoLabel(props: Props) {
  return <ToneField tone="info" toneClass="text-info" {...props} />
}

/* Success: olumlu/dogrulanmis ton. */
export function SuccessLabel(props: Props) {
  return <ToneField tone="success" toneClass="text-success" {...props} />
}

/* Warning: dikkat isteyen ton. */
export function WarningLabel(props: Props) {
  return <ToneField tone="warning" toneClass="text-warning" {...props} />
}

/* Danger: hata/yikici ton. */
export function DangerLabel(props: Props) {
  return <ToneField tone="danger" toneClass="text-danger" {...props} />
}

/* Muted: ikincil, geri cekilmis ton. */
export function MutedLabel(props: Props) {
  return <ToneField tone="muted" toneClass="text-muted-foreground" {...props} />
}