LabeliOS

import * as React from "react";
import { forwardRef } from "react";
import { Text, type TextProps } from "react-native";
import { cn } from "@lumioui/core";

export interface LabelProps extends Omit<TextProps, "className"> {
  /** Id this label answers to — applied as the label's own nativeID so a
   *  control can name it via `accessibilityLabelledBy`/`aria-labelledby`:
   *  `<Label htmlFor="email">Email</Label>` + `<Input accessibilityLabelledBy="email" />`.
   *  (RN has no htmlFor→focus wiring; the association is the shared id.) */
  htmlFor?: string;
  /** Explicit id for the label node (maps to nativeID, and the DOM id on web). */
  id?: string;
  /** Own nativeID — wins over id/htmlFor when several are set. */
  nativeID?: string;
  /** Muted/destructive error variant. */
  error?: boolean;
  /** NativeWind classes. */
  className?: string;
}

/**
 * Label — form label with an htmlFor-style id association and error styling.
 * RN's accessibilityRole union has no "label" role — "text" is the correct
 * role; the association lives on the shared nativeID, not the role.
 */
export const Label = forwardRef<React.ElementRef<typeof Text>, LabelProps>(
  function Label({ htmlFor, id, nativeID, error, className, ...props }, ref) {
    return (
      <Text
        ref={ref}
        nativeID={nativeID ?? id ?? htmlFor}
        className={cn(
          "text-sm font-medium",
          error ? "text-destructive" : "text-foreground",
          className
        )}
        accessibilityRole="text"
        {...props}
      />
    );
  }
);

Label.displayName = "Label";