Label

"use client";

import { RiInformationLine } from "@remixicon/react";
import { cn } from "cn";
import * as React from "react";

type LabelProps = React.ComponentProps<"label"> & {
  isRequired?: boolean;
  isInvalid?: boolean;
  tooltip?: boolean | string;
  /** `inline` is for a label beside a control: gap-2 and normal weight. */
  variant?: "default" | "inline";
};

function Label({
  className,
  children,
  isRequired = false,
  isInvalid: _isInvalid,
  tooltip,
  variant = "default",
  ...props
}: LabelProps) {
  void _isInvalid;
  return (
    <label
      data-slot="label"
      data-label="true"
      data-variant={variant}
      className={cn(
        "flex cursor-default items-center gap-0.5 text-sm leading-5 font-medium tracking-normal text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50",
        variant === "inline" && "gap-2 font-normal",
        className
      )}
      {...props}
    >
      {children}
      {isRequired && (
        <span
          aria-hidden="true"
          className="text-[color:var(--label-required,var(--destructive))]"
        >
          *
        </span>
      )}
      {tooltip && (
        <RiInformationLine
          aria-hidden="true"
          className="size-4 shrink-0 text-[color:var(--foreground-tertiary,var(--muted-foreground))]"
        />
      )}
    </label>
  );
}

export { Label };
export type { LabelProps };