Date Range Picker

"use client";
import * as React from "react";
import { cn } from "./utils";
import { Input } from "./input";
import { useControllable } from "./use-controllable";
export type DateRange = { from: string; to: string };
export function DateRangePicker({
  children,
  value,
  defaultValue = { from: "", to: "" },
  onValueChange,
  className,
  label = "Date range",
  fromLabel = "From",
  toLabel = "To",
  ...rootProps
}: Omit<
  React.ComponentProps<"fieldset">,
  keyof {
    value?: DateRange;
    defaultValue?: DateRange;
    onValueChange?: (range: DateRange) => void;
    className?: string;
    label?: string;
    fromLabel?: string;
    toLabel?: string;
  }
> & {
  value?: DateRange;
  defaultValue?: DateRange;
  onValueChange?: (range: DateRange) => void;
  className?: string;
  label?: string;
  fromLabel?: string;
  toLabel?: string;
}) {
  const [range, setRange] = useControllable(value, defaultValue, onValueChange);
  return (
    <fieldset {...rootProps} className={cn("flex flex-wrap gap-3", className)}>
      {children !== undefined ? (
        children
      ) : (
        <>
          <legend className="mb-2 text-sm font-medium">{label}</legend>
          <label className="grid gap-1 text-xs">
            {fromLabel}
            <Input
              type="date"
              value={range.from}
              max={range.to || undefined}
              onChange={(e) => setRange({ ...range, from: e.target.value })}
            />
          </label>
          <label className="grid gap-1 text-xs">
            {toLabel}
            <Input
              type="date"
              value={range.to}
              min={range.from || undefined}
              onChange={(e) => setRange({ ...range, to: e.target.value })}
            />
          </label>
        </>
      )}
    </fieldset>
  );
}

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

"use client";
import * as React from "react";
import { cn } from "./utils";
export function Input({ className, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      className={cn(
        "block h-10 w-full min-w-0 rounded-lg border border-border bg-background px-3 text-sm leading-normal shadow-[0_1px_2px_#00000004] transition-[border-color,box-shadow] placeholder:text-muted-foreground/75 hover:border-foreground/25 focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/10 aria-invalid:border-danger aria-invalid:ring-danger/10 disabled:cursor-not-allowed disabled:bg-muted/50 disabled:opacity-50",
        className,
      )}
      {...props}
    />
  );
}

"use client";
import { useRef, useState, type SetStateAction } from "react";
/** Controlled or instance-local state. Functional updates also work before a rerender. */
export function useControllable<T>(
  value: T | undefined,
  initial: T,
  onChange?: (value: T) => void,
) {
  const [local, setLocal] = useState(initial);
  const current = useRef(value === undefined ? local : value);
  current.current = value === undefined ? local : value;
  return [
    current.current,
    (action: SetStateAction<T>) => {
      const next =
        typeof action === "function"
          ? (action as (previous: T) => T)(current.current)
          : action;
      current.current = next;
      if (value === undefined) setLocal(next);
      onChange?.(next);
    },
  ] as const;
}