Date Field

---
import type { HTMLAttributes } from "astro/types";

import {
  fieldParts,
  padSegment,
  SEGMENT_LABELS,
  SEGMENT_PLACEHOLDERS,
  segmentRange,
  type SegmentType,
} from "../../_segments";
import DateSegment from "./DateSegment.astro";

type Props = HTMLAttributes<"div"> & {
  value?: string;
  name?: string;
  label?: string;
  locale?: string;
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
  labels?: Partial<Record<SegmentType, string>>;
  placeholders?: Partial<Record<SegmentType, string>>;
};

const {
  value = "",
  name,
  label = "Date",
  locale,
  size = "md",
  state = "default",
  labels,
  placeholders,
  class: className,
  ...rest
} = Astro.props;

const [year, month, day] = /^\d{4}-\d{2}-\d{2}$/.test(value)
  ? value.split("-").map(Number)
  : [undefined, undefined, undefined];
const numbers: Partial<Record<SegmentType, number>> = { year, month, day };
---

<div
  role="group"
  aria-label={label}
  data-slot="date-field"
  data-value={value}
  data-size={size}
  data-state={state}
  class={className}
  {...rest}
>
  {
    fieldParts(locale, "date").map((part) =>
      part.type === "literal" ? (
        <span data-slot="date-field-literal" aria-hidden="true">
          {part.value}
        </span>
      ) : (
        <DateSegment
          segment={part.type}
          label={labels?.[part.type] ?? SEGMENT_LABELS[part.type]}
          placeholder={placeholders?.[part.type] ?? SEGMENT_PLACEHOLDERS[part.type]}
          min={segmentRange(part.type).min}
          max={segmentRange(part.type, { year, month }).max}
          value={numbers[part.type]}
          text={
            numbers[part.type] === undefined
              ? undefined
              : padSegment(part.type, numbers[part.type]!)
          }
        />
      ),
    )
  }
  {name && <input type="hidden" name={name} value={value} data-slot="date-field-value" />}
</div>

<script>
  import { onReadyOnce } from "../../_once";
  import { type SegmentValues, wireSegmentField } from "../../_segments";

  function wire(root: HTMLElement) {
    wireSegmentField(root, {
      compose: ({ year, month, day }: SegmentValues) =>
        year && month && day
          ? `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`
          : "",
    });
  }

  onReadyOnce('[data-slot="date-field"]', wire);
</script>

---
import type { HTMLAttributes } from "astro/types";

import type { SegmentType } from "../../_segments";

type Props = HTMLAttributes<"span"> & {
  segment: SegmentType;
  label: string;
  placeholder: string;
  min: number;
  max: number;
  value?: number;
  text?: string;
  am?: string;
  pm?: string;
};

const {
  segment,
  label,
  placeholder,
  min,
  max,
  value,
  text,
  am,
  pm,
  class: className,
  ...rest
} = Astro.props;
---

<span
  role="spinbutton"
  tabindex="0"
  inputmode="numeric"
  aria-label={label}
  aria-valuemin={min}
  aria-valuemax={max}
  aria-valuenow={value}
  aria-valuetext={value === undefined ? undefined : text}
  data-slot="date-segment"
  data-segment={segment}
  data-placeholder={placeholder}
  data-am={am}
  data-pm={pm}
  class={className}
  {...rest}>{value === undefined ? placeholder : text}</span
>

import DateField from "./DateField.astro";
import DateSegment from "./DateSegment.astro";

export { DateField, DateSegment };
export default DateField;