DatePicker

"use client";

import { DatePicker } from "@dethink/components";

export function DatePickerBasic() {
  return (
    <div className="mx-auto max-w-xs">
      <DatePicker
        label="Launch date"
        description="Announcement goes out at 9:00 AM local time."
        name="launchDate"
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button, DatePicker, type DatePickerValue } from "@dethink/components";
import { CalendarDate } from "@internationalized/date";

export function DatePickerControlled() {
  const [value, setValue] = useState<DatePickerValue | null>(
    new CalendarDate(2026, 7, 14),
  );

  return (
    <div className="mx-auto max-w-xs space-y-3">
      <DatePicker
        label="Review deadline"
        value={value}
        onValueChange={setValue}
        clearable
      />
      <div className="flex items-center justify-between gap-2">
        <p className="text-muted-foreground text-sm">
          Value: {value ? value.toString() : "none"}
        </p>
        <Button
          size="sm"
          variant="outline"
          onClick={() => setValue(new CalendarDate(2026, 7, 14))}
        >
          Reset
        </Button>
      </div>
    </div>
  );
}

"use client";

import { DatePicker } from "@dethink/components";
import { CalendarDate } from "@internationalized/date";

export function DatePickerStates() {
  return (
    <div className="mx-auto grid max-w-md gap-5 sm:grid-cols-2">
      <DatePicker label="Required" required />
      <DatePicker
        label="Disabled"
        disabled
        defaultValue={new CalendarDate(2026, 7, 14)}
      />
      <DatePicker
        label="Read-only"
        readOnly
        defaultValue={new CalendarDate(2026, 7, 14)}
      />
      <DatePicker
        label="Invalid"
        invalid
        errorMessage="Pick a date after today."
        defaultValue={new CalendarDate(2026, 6, 1)}
      />
    </div>
  );
}

"use client";

import { DatePicker } from "@dethink/components";
import { CalendarDate, getDayOfWeek } from "@internationalized/date";

export function DatePickerBounds() {
  return (
    <div className="mx-auto max-w-xs">
      <DatePicker
        label="Delivery date"
        description="Weekday deliveries in July only."
        minValue={new CalendarDate(2026, 7, 6)}
        maxValue={new CalendarDate(2026, 7, 31)}
        isDateUnavailable={(date) => {
          const dayOfWeek = getDayOfWeek(date, "en-US");
          return dayOfWeek === 0 || dayOfWeek === 6;
        }}
      />
    </div>
  );
}