geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
84 lines (83 loc) • 3.18 kB
JavaScript
import * as e from "react";
import { addDays as v, format as n } from "date-fns";
import { CalendarIcon as _ } from "lucide-react";
import { cn as m } from "./index.es79.js";
import { Calendar as s } from "./index.es50.js";
import { Popover as D, PopoverTrigger as N, PopoverContent as P } from "./index.es80.js";
import { Button as C } from "./index.es7.js";
import { Typography as F } from "./index.es17.js";
function O({
variant: o = "range",
date: i,
range: c,
onDateChange: l,
onRangeChange: d,
className: g,
buttonClassName: f,
placeholder: p = "Pick a date",
rangePlaceholder: u = "Pick a date range",
container: y
}) {
const [h, b] = e.useState(
void 0
), [M, E] = e.useState({
from: /* @__PURE__ */ new Date(),
to: v(/* @__PURE__ */ new Date(), 7)
}), r = i ?? h, t = c ?? M, w = (a) => {
l ? l(a) : b(a);
}, x = (a) => {
d ? d(a) : E(a);
};
return /* @__PURE__ */ e.createElement("div", { className: m("h-[5rem] w-full p-0", g) }, /* @__PURE__ */ e.createElement(D, null, /* @__PURE__ */ e.createElement(N, { asChild: !0 }, /* @__PURE__ */ e.createElement(
C,
{
variant: "secondary",
className: m(
"w-full justify-start text-left font-normal px-3 h-[2.375] focus-visible:border-primary-2 focus-visible:ring-4 border border-light-2 ring-primary-1 !ring-offset-0 ",
(o === "single" ? !r : !t?.from) && "text-muted-foreground",
f
)
},
/* @__PURE__ */ e.createElement(_, { className: "w-5 h-5 mr-2 text-light-4" }),
/* @__PURE__ */ e.createElement(F, { variant: "body4" }, /* @__PURE__ */ e.createElement(e.Fragment, null, o === "range" ? t?.from ? t.to ? /* @__PURE__ */ e.createElement(e.Fragment, null, n(t.from, "MMM dd, y"), " /", " ", n(t.to, "MMM dd, y")) : n(t.from, "MMM dd, y") : u : r ? n(r, "MMM dd, y") : /* @__PURE__ */ e.createElement("span", { className: "text-light-4" }, p)))
)), /* @__PURE__ */ e.createElement(
P,
{
className: "w-auto p-0",
align: "start",
container: y
},
o === "range" ? /* @__PURE__ */ e.createElement(
s,
{
initialFocus: !0,
mode: "range",
defaultMonth: t?.from,
selected: t,
onSelect: x,
numberOfMonths: 2
}
) : /* @__PURE__ */ e.createElement(
s,
{
initialFocus: !0,
mode: "single",
defaultMonth: r,
selected: r,
onSelect: w,
classNames: {
day: "h-10 w-10 p-0 font-normal aria-selected:opacity-100 hover:bg-primary-1 rounded-lg",
day_today: "bg-primary-1 rounded-lg aria-selected:text-white aria-selected:bg-rest-p1 aria-selected:hover:bg-rest-p1 aria-selected:w-10",
day_selected: "text-white bg-rest-p1 hover:bg-rest-p1 w-10",
day_range_start: "day-range-start text-light-2 rounded-l-lg",
day_range_end: "bg-primary-2 rounded-r-lg !bg-red-500",
day_range_middle: "aria-selected:bg-primary-2 text-light-1 aria-selected:text-foreground [&:not(.day-range-start):not(.day-range-end)]"
}
}
)
)));
}
export {
O as DatePicker
};
//# sourceMappingURL=index.es61.js.map