Date Range Picker

import {
  DateRangePicker as AriaDateRangePicker,
  Button,
  DateInput,
  DateSegment,
  Dialog,
  Group,
  Label,
  Popover,
} from "react-aria-components";

import { RangeCalendar } from "@/components/base/rangeCalendar";
import { ChevronDown } from "lucide-react";
import type {
  DateRangePickerProps as AriaDateRangePickerProps,
  DateValue,
} from "react-aria-components";
import { Text } from "react-aria-components";
import { tv } from "tailwind-variants";

const dateRangePicker = tv({
  slots: {
    group:
      "relative flex w-fit flex-wrap items-center rounded-md border border-border bg-surface shadow-lg ring-fg focus-within:border-transparent focus-within:ring-2",
    iconButton:
      "appearance-none border-none bg-primary p-0 align-middle text-primary-fg outline-none",
    input:
      "flex w-fit whitespace-nowrap rounded-md border border-transparent bg-transparent py-2 pl-2 pr-12",
    inputButton:
      "absolute right-2 flex appearance-none items-center justify-center rounded-md border-0 outline-none ring-fg ring-offset-2 ring-offset-surface data-[hovered]:bg-surface-2 data-[focus-visible]:ring-2",
    dateSegment:
      "rounded-md p-1 pr-2 text-end focus:bg-secondary focus:text-secondary-fg focus:outline-none",
    popover:
      "overflow-auto px-4 pb-4 [&[data-entering]]:animate-fade [&[data-exiting]]:animate-fadeOut",
  },
});

const { group, input, inputButton, dateSegment, popover } = dateRangePicker();

interface DateRangePickerProps<T extends DateValue>
  extends AriaDateRangePickerProps<T> {
  label?: string;
  description?: string;
  error?: string;
}

export const DateRangePicker = <T extends DateValue>({
  className,
  label,
  description,
  error,
  children,
  ...props
}: DateRangePickerProps<T>) => (
  <AriaDateRangePicker className={className} {...props}>
    <Label className="text-sm">{label}</Label>
    <Group className={group()}>
      <DateInput slot="start" className={input()}>
        {(segment) => (
          <DateSegment className={dateSegment()} segment={segment} />
        )}
      </DateInput>
      <span className="-ml-10" aria-hidden="true">
        –
      </span>
      <DateInput slot="end" className={input()}>
        {(segment) => (
          <DateSegment className={dateSegment()} segment={segment} />
        )}
      </DateInput>
      <Button className={inputButton()}>
        <ChevronDown />
      </Button>
    </Group>
    {description && (
      <Text className="text-sm" slot="description">
        {description}
      </Text>
    )}
    {error && <Text slot="error">{error}</Text>}
    <Popover className={popover()}>
      <Dialog>
        <RangeCalendar />
      </Dialog>
    </Popover>
  </AriaDateRangePicker>
);