Date Picker

"use client";
import * as React from "react";
import { CalendarDays } from "lucide-react";
import { cn } from "./utils";
import { Popover } from "./popover";
import { Calendar } from "./calendar";
import { Button } from "./button";
import { useControllable } from "./use-controllable";
export function DatePicker({
  value,
  defaultValue = "",
  onValueChange,
  label = "Choose date",
  className,
}: {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  label?: string;
  className?: string;
}) {
  const [date, setDate] = useControllable(value, defaultValue, onValueChange);
  const [open, setOpen] = React.useState(false);
  return (
    <Popover
      open={open}
      onOpenChange={setOpen}
      className="w-auto p-0"
      trigger={
        <Button
          variant="outline"
          aria-label={label}
          className={cn("min-w-56 justify-start font-normal", className)}
        >
          <CalendarDays size={16} className="text-muted-foreground" />
          {date
            ? new Date(date + "T12:00:00").toLocaleDateString("en-GB", {
                day: "numeric",
                month: "long",
                year: "numeric",
              })
            : label}
        </Button>
      }
    >
      <Calendar
        value={date}
        onValueChange={(d) => {
          setDate(d);
          setOpen(false);
        }}
      />
    </Popover>
  );
}

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";
import { Popover as Primitive } from "radix-ui";
export function Popover({
  trigger,
  children,
  className,
  ...props
}: React.ComponentProps<typeof Primitive.Root> & {
  trigger: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <Primitive.Root {...props}>
      <Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
      <Primitive.Portal>
        <Primitive.Content
          sideOffset={8}
          align="start"
          collisionPadding={16}
          className={cn(
            "jez-popover z-50 max-w-[calc(100vw-32px)] w-72 rounded-xl border border-border bg-background p-5 text-foreground shadow-lg",
            className,
          )}
        >
          {children}
          <Primitive.Arrow className="fill-background" />
        </Primitive.Content>
      </Primitive.Portal>
    </Primitive.Root>
  );
}

"use client";
import * as React from "react";
import { cn } from "./utils";
import { Button } from "./button";
import { useControllable } from "./use-controllable";
export function dateKey(d: Date) {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}
export function Calendar({
  value,
  defaultValue = "",
  onValueChange,
  className,
  min,
  max,
}: {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  className?: string;
  min?: string;
  max?: string;
}) {
  const [selected, setSelected] = useControllable(
    value,
    defaultValue,
    onValueChange,
  );
  const [month, setMonth] = React.useState(() =>
    selected ? new Date(selected + "T12:00:00") : new Date(),
  );
  const y = month.getFullYear(),
    m = month.getMonth(),
    days = new Date(y, m + 1, 0).getDate(),
    offset = (new Date(y, m, 1).getDay() + 6) % 7;
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);
  return (
    <div className={cn("w-72 max-w-full rounded-xl border border-border p-4", className)}>
      <div className="mb-4 flex items-center justify-between">
        <Button
          variant="ghost"
          aria-label="Previous month"
          onClick={() => setMonth(new Date(y, m - 1, 1))}
        >
          ←
        </Button>
        <span aria-live="polite" className="text-sm font-medium">
          {month.toLocaleDateString("en-GB", {
            month: "long",
            year: "numeric",
          })}
        </span>
        <Button
          variant="ghost"
          aria-label="Next month"
          onClick={() => setMonth(new Date(y, m + 1, 1))}
        >
          →
        </Button>
      </div>
      <div className="grid grid-cols-7 gap-1">
        {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => (
          <span
            key={i}
            aria-hidden="true"
            className="py-1 text-center text-xs text-muted-foreground"
          >
            {d}
          </span>
        ))}
        {Array.from({ length: offset }, (_, i) => (
          <span key={"s" + i} />
        ))}
        {Array.from({ length: days }, (_, i) => {
          const key = dateKey(new Date(y, m, i + 1));
          return (
            <button
              key={key}
              ref={(el) => {
                refs.current[i] = el;
              }}
              aria-label={new Date(y, m, i + 1).toLocaleDateString("en-GB", {
                dateStyle: "full",
              })}
              aria-pressed={selected === key}
              disabled={!!((min && key < min) || (max && key > max))}
              onClick={() => setSelected(key)}
              onKeyDown={(e) => {
                const delta = (
                  {
                    ArrowLeft: -1,
                    ArrowRight: 1,
                    ArrowUp: -7,
                    ArrowDown: 7,
                  } as Record<string, number>
                )[e.key];
                if (delta) {
                  e.preventDefault();
                  refs.current[
                    Math.min(days - 1, Math.max(0, i + delta))
                  ]?.focus();
                }
              }}
              className={cn(
                "size-8 max-w-full rounded-lg text-sm hover:bg-muted disabled:opacity-30",
                selected === key && "bg-primary text-primary-foreground",
              )}
            >
              {i + 1}
            </button>
          );
        })}
      </div>
    </div>
  );
}

"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  loading?: boolean;
  asChild?: boolean;
};
export function Button({
  variant = "primary",
  size = "md",
  loading,
  asChild,
  className,
  children,
  disabled,
  ...props
}: ButtonProps) {
  const Comp = asChild ? Slot.Root : "button";
  return (
    <Comp
      type={asChild ? undefined : "button"}
      disabled={asChild ? undefined : disabled || loading}
      aria-disabled={disabled || loading || undefined}
      aria-busy={loading || undefined}
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
        {
          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
            variant === "primary",
          "border-border/60 bg-muted text-foreground hover:bg-muted/70":
            variant === "secondary",
          "border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
            variant === "outline",
          "text-muted-foreground hover:bg-muted hover:text-foreground":
            variant === "ghost",
          "bg-danger text-danger-foreground hover:bg-danger/90":
            variant === "danger",
        },
        {
          "h-8 px-3 text-xs": size === "sm",
          "h-10 px-4": size === "md",
          "h-12 px-6": size === "lg",
        },
        className,
      )}
      {...props}
    >
      {asChild ? (
        children
      ) : (
        <>
          <span
            className={cn(
              "inline-flex min-w-0 flex-1 items-center justify-center gap-2",
              loading && "invisible",
            )}
          >
            {children}
          </span>
          {loading && (
            <LoaderCircle
              aria-hidden="true"
              className="absolute size-4 animate-spin motion-reduce:animate-none"
            />
          )}
        </>
      )}
    </Comp>
  );
}

"use client";
import { useState } from "react";
export function useControllable<T>(
  value: T | undefined,
  initial: T,
  onChange?: (value: T) => void,
) {
  const [local, setLocal] = useState(initial);
  return [
    value === undefined ? local : value,
    (next: T) => {
      if (value === undefined) setLocal(next);
      onChange?.(next);
    },
  ] as const;
}