@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
118 lines (117 loc) • 5.96 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { DayPicker } from "react-day-picker";
import { Button } from "./button.js";
import { cn } from "../../lib/utilities.js";
import button_module from "./button.module.js";
import calendar_module from "./calendar.module.js";
import * as __rspack_external_react from "react";
const calendarButtonVariantStyles = {
default: button_module["default"],
destructive: button_module.destructive,
ghost: button_module.ghost,
link: button_module.link,
outline: button_module.outline,
secondary: button_module.secondary
};
const Calendar = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }, forwardedRef)=>/*#__PURE__*/ jsx(DayPicker, {
showOutsideDays: showOutsideDays,
className: cn(calendar_module.container, className),
captionLayout: captionLayout,
formatters: {
formatMonthDropdown: (date)=>{
const { locale } = props;
return date.toLocaleString(locale?.code ?? "default", {
month: "short"
});
},
...formatters
},
classNames: {
...classNames,
root: cn(calendar_module.root, classNames?.root),
months: cn(calendar_module.months, classNames?.months),
month: cn(calendar_module.month, classNames?.month),
nav: cn(calendar_module.nav, classNames?.nav),
button_previous: cn(button_module.button, button_module.sizeIcon, calendarButtonVariantStyles[buttonVariant], calendar_module.navButton, classNames?.button_previous),
button_next: cn(button_module.button, button_module.sizeIcon, calendarButtonVariantStyles[buttonVariant], calendar_module.navButton, classNames?.button_next),
month_caption: cn(calendar_module.monthCaption, classNames?.month_caption),
dropdowns: cn(calendar_module.dropdowns, classNames?.dropdowns),
dropdown_root: cn(calendar_module.dropdownRoot, classNames?.dropdown_root),
dropdown: cn(calendar_module.dropdown, classNames?.dropdown),
caption_label: cn(calendar_module.captionLabel, "label" !== captionLayout && calendar_module.captionLabelDropdown, classNames?.caption_label),
month_grid: cn(calendar_module.monthGrid, classNames?.month_grid),
weekdays: cn(calendar_module.weekdays, classNames?.weekdays),
weekday: cn(calendar_module.weekday, classNames?.weekday),
week: cn(calendar_module.week, classNames?.week),
week_number_header: cn(calendar_module.weekNumberHeader, classNames?.week_number_header),
week_number: cn(calendar_module.weekNumber, classNames?.week_number),
day: cn(calendar_module.day, classNames?.day),
range_start: cn(calendar_module.rangeStart, classNames?.range_start),
range_middle: cn(calendar_module.rangeMiddle, classNames?.range_middle),
range_end: cn(calendar_module.rangeEnd, classNames?.range_end),
today: cn(calendar_module.today, classNames?.today),
outside: cn(calendar_module.outside, classNames?.outside),
disabled: classNames?.disabled,
hidden: cn(calendar_module.hidden, classNames?.hidden)
},
components: {
Root: ({ className: rootClassName, rootRef, ...rootProps })=>/*#__PURE__*/ jsx("div", {
"data-slot": "calendar",
ref: rootRef ?? forwardedRef,
className: cn(calendar_module.calendarRoot, rootClassName),
...rootProps
}),
Chevron: ({ className: chevronClassName, orientation, ...chevronProps })=>{
if ("left" === orientation) return /*#__PURE__*/ jsx(ChevronLeftIcon, {
className: cn(calendar_module.chevron, chevronClassName),
...chevronProps
});
if ("right" === orientation) return /*#__PURE__*/ jsx(ChevronRightIcon, {
className: cn(calendar_module.chevron, chevronClassName),
...chevronProps
});
return /*#__PURE__*/ jsx(ChevronDownIcon, {
className: cn(calendar_module.chevron, chevronClassName),
...chevronProps
});
},
DayButton: CalendarDayButton,
WeekNumber: CalendarWeekNumber,
...components
},
...props
}));
function CalendarWeekNumber({ week, children, ...tdProps }) {
return /*#__PURE__*/ jsx("td", {
...tdProps,
children: /*#__PURE__*/ jsx("div", {
className: calendar_module.weekNumberCell,
children: children
})
});
}
function CalendarDayButton({ className, day, modifiers, ...props }) {
const ref = __rspack_external_react.useRef(null);
__rspack_external_react.useEffect(()=>{
if (modifiers["focused"]) ref.current?.focus();
}, [
modifiers
]);
return /*#__PURE__*/ jsx(Button, {
ref: ref,
variant: "ghost",
size: "icon",
"data-day": day.date.toLocaleDateString(),
"data-selected-single": Boolean(modifiers["selected"] && !modifiers["range_start"] && !modifiers["range_end"] && !modifiers["range_middle"]),
"data-range-start": Boolean(modifiers["range_start"]),
"data-range-end": Boolean(modifiers["range_end"]),
"data-range-middle": Boolean(modifiers["range_middle"]),
className: cn(calendar_module.dayButton, className),
...props
});
}
Calendar.displayName = "Calendar";
export { Calendar };
//# sourceMappingURL=calendar.js.map