Date field

import * as React from "react";
import { CalendarIcon } from "lucide-react";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type DateFieldProps = Omit<React.ComponentProps<typeof Input>, "type"> & {
  /** A hint under the field, for example the range or the format. The browser formats the value for its locale, so only state a format when you control it. */
  hint?: React.ReactNode;
};

/**
 * A native date input with a calendar icon and an optional mono hint line.
 * Native on purpose: it gets the platform picker, keyboard entry and screen reader support for free.
 */
export function DateField({ hint, className, id, "aria-describedby": describedBy, ...props }: DateFieldProps) {
  const generated = React.useId();
  const inputId = id ?? generated;
  const hintId = `${inputId}-hint`;

  return (
    <div data-slot="date-field" className={cn("flex w-full flex-col gap-1.5", className)}>
      <div className="relative flex items-center">
        <CalendarIcon
          className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground"
          aria-hidden="true"
        />
        <Input
          type="date"
          id={inputId}
          aria-describedby={cn(hint && hintId, describedBy) || undefined}
          className="relative pl-8 tabular-nums [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-y-0 [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:m-0 [&::-webkit-calendar-picker-indicator]:w-8 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-date-and-time-value]:text-left"
          {...props}
        />
      </div>
      {hint && (
        <span id={hintId} className="font-mono text-xs text-muted-foreground">
          {hint}
        </span>
      )}
    </div>
  );
}