Presupuestador_web/client/src/components/Forms/FormLabel.tsx

import * as UI from "@/ui";
import * as LabelPrimitive from "@radix-ui/react-label";
import React from "react";
import { FormInputProps } from "./FormProps";

export interface FormLabelProps {
  label: string;
  hint?: string;
}

export const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    FormLabelProps &
    Pick<FormInputProps, "required">
>(({ label, hint, required, ...props }, ref) => {
  const _hint = hint ? hint : required ? "obligatorio" : undefined;
  const _hintClassName = required ? "text-destructive" : "";
  return (
    <UI.FormLabel ref={ref} className='flex justify-between text-sm' {...props}>
      <span className='block font-semibold'>{label}</span>
      {_hint && <span className={`text-sm font-medium ${_hintClassName}`}>{_hint}</span>}
    </UI.FormLabel>
  );
});

FormLabel.displayName = "FormLabel";