Badge labels

"use client"

import * as React from "react"
import { Tag } from "lucide-react"

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

/* Badge label family: 5 labels, each carrying a marker AFTER the text (a counter, a
   status dot, a new/beta badge, a tag chip). The markers are not aria-hidden;
   because they carry readable text they reach the screen reader too, and only the
   status dot is decorative. The label is a REAL <label> bound with htmlFor to the
   rendered demo input (the id comes from React.useId()).
   The badge backgrounds use color-mix for alpha. 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 text-foreground 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"

/* Rozet cipi: kucuk, yuvarlak, ton zeminli. */
const chip =
  "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none [&>svg]:size-3 [&>svg]:shrink-0 [&>i]:text-xs [&>i]:leading-none"

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

/* Shared shell: the label plus the marker that follows it, then the bound demo input. */
function BadgeField({
  tone,
  marker,
  className,
  size = "md",
  children,
  ...props
}: Props & { tone: string; marker: React.ReactNode }) {
  const id = React.useId()
  return (
    <span data-slot="styled-label" data-tone={tone} className={field}>
      <label htmlFor={id} className={cn(base, text[size], className)} {...props}>
        {children ?? "Email"}
        {marker}
      </label>
      <input
        id={id}
        type="text"
        placeholder="you@example.com"
        className={cn(inputBase, inputHeight[size])}
      />
    </span>
  )
}

/* Count: metnin ardinda sayac cipi. count prop, varsayilan 3 (deterministik). */
export function CountLabel({ count = 3, ...props }: Props & { count?: number }) {
  return (
    <BadgeField
      tone="neutral"
      marker={
        <span
          className={cn(
            chip,
            "tabular-nums text-muted-foreground [background-color:color-mix(in_oklab,var(--color-foreground)_10%,transparent)]"
          )}
        >
          {count}
        </span>
      }
      {...props}
    />
  )
}

/* Status: success tonlu nokta + durum metni. */
export function StatusLabel({ status = "Live", ...props }: Props & { status?: string }) {
  return (
    <BadgeField
      tone="success"
      marker={
        <span
          className={cn(
            chip,
            "text-success-soft-foreground [background-color:color-mix(in_oklab,var(--color-success)_16%,transparent)]"
          )}
        >
          <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-success" />
          {status}
        </span>
      }
      {...props}
    />
  )
}

/* New: info tonlu NEW rozeti. */
export function NewLabel(props: Props) {
  return (
    <BadgeField
      tone="info"
      marker={
        <span
          className={cn(
            chip,
            "uppercase tracking-wide text-info-soft-foreground [background-color:color-mix(in_oklab,var(--color-info)_16%,transparent)]"
          )}
        >
          New
        </span>
      }
      {...props}
    />
  )
}

/* Beta: warning tonlu BETA rozeti. */
export function BetaLabel(props: Props) {
  return (
    <BadgeField
      tone="warning"
      marker={
        <span
          className={cn(
            chip,
            "uppercase tracking-wide text-warning-soft-foreground [background-color:color-mix(in_oklab,var(--color-warning)_18%,transparent)]"
          )}
        >
          Beta
        </span>
      }
      {...props}
    />
  )
}

/* Tag: ikonlu, cerceveli etiket cipi. */
export function TagLabel({ tag = "internal", ...props }: Props & { tag?: string }) {
  return (
    <BadgeField
      tone="brand"
      marker={
        <span className={cn(chip, "border border-border text-muted-foreground")}>
          <Tag />
          {tag}
        </span>
      }
      {...props}
    />
  )
}