laif-ds/dist/components/ui/calendar.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as t } from "react/jsx-runtime";
import { DayPicker as l } from "../../node_modules/react-day-picker/dist/index.esm.js";
import { cn as e } from "../../lib/utils.js";
import { buttonVariants as o } from "./button.js";
import c from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
import m from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
function h({
  className: n,
  classNames: s,
  showOutsideDays: i = !0,
  ...d
}) {
  return /* @__PURE__ */ t(
    l,
    {
      showOutsideDays: i,
      className: e("p-3 font-normal", n),
      classNames: {
        months: "flex flex-col sm:flex-row gap-2",
        month: "flex flex-col gap-4",
        caption: "flex justify-center pt-1 relative items-center w-full",
        caption_label: "text-sm font-medium",
        nav: "flex items-center gap-1",
        nav_button: e(
          o({ variant: "outline" }),
          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-x-1",
        head_row: "flex",
        head_cell: "text-d-secondary-foreground rounded-md w-8 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: e(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-d-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
          d.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
        ),
        day: e(
          o({ variant: "ghost" }),
          "size-8 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_start: "day-range-start aria-selected:bg-d-primary aria-selected:text-d-primary-foreground",
        day_range_end: "day-range-end aria-selected:bg-d-primary aria-selected:text-d-primary-foreground",
        day_selected: "bg-d-primary text-d-primary-foreground hover:bg-d-primary hover:text-d-primary-foreground focus:bg-d-primary focus:text-d-primary-foreground",
        day_today: "bg-d-accent text-d-accent-foreground",
        day_outside: "day-outside text-d-secondary-foreground aria-selected:text-d-secondary-foreground",
        day_disabled: "text-d-secondary-foreground opacity-50",
        day_range_middle: "aria-selected:bg-d-accent aria-selected:text-d-accent-foreground",
        day_hidden: "invisible",
        ...s
      },
      components: {
        IconLeft: ({ className: a, ...r }) => /* @__PURE__ */ t(m, { className: e("size-4", a), ...r }),
        IconRight: ({ className: a, ...r }) => /* @__PURE__ */ t(c, { className: e("size-4", a), ...r })
      },
      ...d
    }
  );
}
export {
  h as Calendar
};