Uecko_ERP/packages/rdx-ui/src/components/form/date-picker-field.tsx

import {
  Field,
  FieldDescription,
  FieldError,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import * as React from "react";
import { type FieldPath, type FieldValues, useFormContext } from "react-hook-form";

import { FormFieldLabel } from "./form-field-label.tsx";
import type { NativeInputProps } from "./types.ts";

type DatePickerFieldProps<TFormValues extends FieldValues> = Omit<NativeInputProps, "name"> & {
  name: FieldPath<TFormValues>;

  label?: string;
  description?: string;
  reserveDescriptionSpace?: boolean;

  orientation?: "vertical" | "horizontal" | "responsive";

  inputClassName?: string;
};

export const DatePickerField = <TFormValues extends FieldValues>({
  name,

  label,
  description,
  reserveDescriptionSpace = false,

  required = false,
  readOnly = false,

  orientation = "vertical",

  className,
  inputClassName,

  ...inputRest
}: DatePickerFieldProps<TFormValues>) => {
  const { register, formState, getFieldState } = useFormContext<TFormValues>();

  const inputId = React.useId();
  const disabled = formState.isSubmitting || inputRest.disabled;

  const presetProps = {
    type: "date",
    autoComplete: "off",
    spellCheck: false,
  };

  const rightIcon = null; //<CalendarX2Icon />;

  // Obtener error del campo (tipado seguro)
  const fieldError = getFieldState(name, formState).error;

  return (
    <Field className={cn("gap-1", className)} data-invalid={!!fieldError} orientation={orientation}>
      {label ? (
        <FormFieldLabel htmlFor={inputId} required={required}>
          {label}
        </FormFieldLabel>
      ) : null}

      <InputGroup
        className={cn(
          "bg-muted/50 font-medium",
          "hover:border-ring hover:ring-ring/20 hover:ring-[3px]",
          "focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
          "placeholder:text-muted-foreground/50",
          inputClassName
        )}
      >
        <InputGroupInput
          {...presetProps}
          {...inputRest}
          {...register(name)}
          aria-invalid={!!fieldError}
          className="placeholder:text-muted-foreground/50"
          disabled={disabled}
          id={inputId}
          readOnly={readOnly}
          required={required}
        />

        {rightIcon && (
          <InputGroupAddon align="inline-end" aria-hidden="true">
            {rightIcon}
          </InputGroupAddon>
        )}
      </InputGroup>

      {description ? (
        <FieldDescription>{description}</FieldDescription>
      ) : reserveDescriptionSpace ? (
        <div aria-hidden="true" className="min-h-5" />
      ) : null}

      <FieldError errors={[fieldError]} />
    </Field>
  );
};