@a-type/ui 3.0.32 → 3.0.34

package/dist/cjs/components/datePicker/Calendar.d.ts

@@ -0,0 +1,11 @@
+import { CalendarDaysProps } from 'calendar-blocks';
+export declare const MonthRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const MonthButton: import("react").FunctionComponent<import("../button/Button.js").ButtonProps>;
+export declare const CalendarGridRoot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DayLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DayLabels: () => import("react/jsx-runtime.js").JSX.Element;
+export declare function CalendarGrid({ className, ...props }: CalendarDaysProps & {
+    className?: string;
+}): import("react/jsx-runtime.js").JSX.Element;
+export declare const CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/datePicker/Calendar.js

@@ -0,0 +1,37 @@
+// @unocss-include
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarDay = exports.DayLabels = exports.DayLabel = exports.CalendarGridRoot = exports.MonthButton = exports.MonthLabel = exports.MonthRow = void 0;
+exports.CalendarGrid = CalendarGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calendar_blocks_1 = require("calendar-blocks");
+const hooks_js_1 = require("../../hooks.js");
+const index_js_1 = require("../button/index.js");
+exports.MonthRow = (0, hooks_js_1.withClassName)('div', 'flex flex-row justify-between items-center w-full');
+exports.MonthLabel = (0, hooks_js_1.withClassName)('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis', 'self-center');
+exports.MonthButton = (0, hooks_js_1.withClassName)(index_js_1.Button, 'self-center');
+exports.CalendarGridRoot = (0, hooks_js_1.withClassName)('div', 'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]', 'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2');
+exports.DayLabel = (0, hooks_js_1.withClassName)('div', 'flex items-center justify-center text-sm color-gray-dark');
+const DayLabels = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "S" }), (0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "M" }), (0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "T" }), (0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "W" }), (0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "T" }), (0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "F" }), (0, jsx_runtime_1.jsx)(exports.DayLabel, { children: "S" })] }));
+exports.DayLabels = DayLabels;
+function CalendarGrid(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsxs)(exports.CalendarGridRoot, { className: className, children: [(0, jsx_runtime_1.jsx)(exports.DayLabels, {}), (0, jsx_runtime_1.jsx)(calendar_blocks_1.CalendarDays, Object.assign({}, props))] }));
+}
+exports.CalendarDay = (0, hooks_js_1.withClassName)(calendar_blocks_1.CalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:z-1 [&[data-highlighted]]:ring-2 [&[data-highlighted]]:ring-accent', 'hover:z-1 hover:ring-2 hover:ring-accent', 'active:bg-main-light active:rounded', '[&[data-selected]]:bg-main [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-main-light [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-main [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-main [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', '[&[data-disabled=true]]:opacity-50 [&[data-disabled=true]]:cursor-not-allowed', 
+// today dot
+"[&[data-today]]:before:content-[''] [&[data-today]]:before:absolute [&[data-today]]:before:left-[1px] [&[data-today]]:before:top-[1px] [&[data-today]]:before:w-[6px] [&[data-today]]:before:h-[6px] [&[data-today]]:before:rounded-lg [&[data-today]]:before:bg-attention [&[data-today]]:before:border-1 [&[data-today]]:before:border-solid [&[data-today]]:before:border-black", 
+// calendar edges
+'[&[data-top-edge]]:border-t-gray', '[&[data-bottom-edge]]:border-b-gray', '[&[data-first-column]]:border-l-gray', '[&[data-last-column]]:border-r-gray', '[&[data-day-first]]:border-l-gray [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray [&[data-day-last]]:rounded-br', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
+//# sourceMappingURL=Calendar.js.map

package/dist/cjs/components/datePicker/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/datePicker/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AA4CA,oCAUC;;AAtDD,qDAIyB;AACzB,6CAA+C;AAC/C,iDAA4C;AAE/B,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,mDAAmD,CACnD,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,MAAM,EACN,qEAAqE,EACrE,aAAa,CACb,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EAAC,iBAAM,EAAE,aAAa,CAAC,CAAC;AAEnD,QAAA,gBAAgB,GAAG,IAAA,wBAAa,EAC5C,KAAK,EACL,uFAAuF,EACvF,mEAAmE,CACnE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,0DAA0D,CAC1D,CAAC;AAEK,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC9B,6DACC,uBAAC,gBAAQ,oBAAa,EACtB,uBAAC,gBAAQ,oBAAa,EACtB,uBAAC,gBAAQ,oBAAa,EACtB,uBAAC,gBAAQ,oBAAa,EACtB,uBAAC,gBAAQ,oBAAa,EACtB,uBAAC,gBAAQ,oBAAa,EACtB,uBAAC,gBAAQ,oBAAa,IACpB,CACH,CAAC;AAVW,QAAA,SAAS,aAUpB;AAEF,SAAgB,YAAY,CAAC,EAGgB;QAHhB,EAC5B,SAAS,OAEmC,EADzC,KAAK,cAFoB,aAG5B,CADQ;IAER,OAAO,CACN,wBAAC,wBAAgB,IAAC,SAAS,EAAE,SAAS,aACrC,uBAAC,iBAAS,KAAG,EACb,uBAAC,8BAAY,oBAAK,KAAK,EAAI,IACT,CACnB,CAAC;AACH,CAAC;AAEY,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,6BAAe,EACf,sFAAsF,EACtF,4DAA4D,EAC5D,gDAAgD,EAChD,gCAAgC,EAChC,gCAAgC,EAChC,0CAA0C,EAC1C,qDAAqD,EACrD,8DAA8D,EAC9D,4DAA4D,EAC5D,yDAAyD;AACzD,YAAY;AACZ,gJAAgJ;AAChJ,iBAAiB;AACjB,oCAAoC,EACpC,uCAAuC,EACvC,wCAAwC,EACxC,uCAAuC,EACvC,gDAAgD,EAChD,+CAA+C,EAC/C,qDAAqD,EACrD,oDAAoD,EACpD,kDAAkD,EAClD,iDAAiD,EACjD,+CAA+C,CAC/C,CAAC"}

package/dist/cjs/components/datePicker/DatePicker.d.ts

@@ -1,20 +1,49 @@
+import { CalendarDays } from 'calendar-blocks';
+import { ReactNode } from 'react';
 import { PaletteName } from '../../uno/index.js';
+import { CalendarGrid } from './Calendar.js';
+declare function DatePickerMonthControls({}: {}): import("react/jsx-runtime.js").JSX.Element;
+declare function DatePickerRoot({ className, color, value, onChange, children, ...rest }: DatePickerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime.js").JSX.Element;
 export interface DatePickerProps {
     value: Date | null;
     onChange: (date: Date | null) => void;
     className?: string;
     color?: PaletteName;
 }
-export declare function DatePicker({ value, onChange, className, color, ...rest }: DatePickerProps): import("react/jsx-runtime.js").JSX.Element;
-export interface DateRangePickerProps {
-    value: {
-        start: Date | null;
-        end: Date | null;
-    };
-    onChange: (value: {
-        start: Date | null;
-        end: Date | null;
-    }) => void;
-    className?: string;
-}
-export declare function DateRangePicker({ value, onChange, className, }: DateRangePickerProps): import("react/jsx-runtime.js").JSX.Element;
+declare function DatePickerDefault(props: DatePickerProps): import("react/jsx-runtime.js").JSX.Element;
+export declare const DatePicker: typeof DatePickerDefault & {
+    Root: typeof DatePickerRoot;
+    Calendar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange" | "value"> & {
+        onDisplayChange?: (newValue: {
+            month: number;
+            year: number;
+        }) => any;
+        displayYear: number;
+        displayMonth: number;
+        value?: Date | null;
+        onChange?: (value: Date | null) => any;
+        rangeValue?: {
+            start: Date | null;
+            end: Date | null;
+        };
+        onRangeChange?: (range: {
+            start: Date | null;
+            end: Date | null;
+        }) => any;
+        onRangeStartChange?: (range: Date) => any;
+        getDateEnabled?: (date: Date) => boolean;
+        defaultDate?: Date;
+        weekStartsOn?: import("calendar-blocks/dist/constants.js").WeekDay;
+    } & import("react").RefAttributes<any>>;
+    CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;
+    CalendarDays: typeof CalendarDays;
+    CalendarGrid: typeof CalendarGrid;
+    DayLabels: () => import("react/jsx-runtime.js").JSX.Element;
+    MonthControls: typeof DatePickerMonthControls;
+    MonthButton: import("react").FunctionComponent<import("../index.js").ButtonProps>;
+    MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+    MonthRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+};
+export {};

package/dist/cjs/components/datePicker/DatePicker.js

@@ -11,89 +11,49 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = DatePicker;
-exports.DateRangePicker = DateRangePicker;
+exports.DatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const calendar_blocks_1 = require("calendar-blocks");
-const clsx_1 = __importDefault(require("clsx"));
+const clsx_1 = require("clsx");
 const react_1 = require("react");
-const hooks_js_1 = require("../../hooks.js");
-const index_js_1 = require("../button/index.js");
-const index_js_2 = require("../icon/index.js");
-function DatePicker(_a) {
-    var { value, onChange, className, color } = _a, rest = __rest(_a, ["value", "onChange", "className", "color"]);
-    const [{ month, year }, setDisplay] = (0, react_1.useState)(() => ({
-        month: new Date().getMonth(),
-        year: new Date().getFullYear(),
-    }));
+const index_js_1 = require("../icon/index.js");
+const Calendar_js_1 = require("./Calendar.js");
+function DatePickerMonthControls({}) {
+    const { setDisplayInfo, month, year } = (0, calendar_blocks_1.useCalendarContext)();
     const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
         month: 'long',
         year: 'numeric',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)(color && `palette-${color}`, 'layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:w-[calc(var(--day-size,32px)*7)]', className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(MonthRow, { children: [(0, jsx_runtime_1.jsx)(MonthButton, { emphasis: "ghost", onClick: () => setDisplay((cur) => ({
-                            month: cur.month - 1,
-                            year: cur.year,
-                        })), children: (0, jsx_runtime_1.jsx)(index_js_2.Icon, { name: "arrowLeft" }) }), (0, jsx_runtime_1.jsx)(MonthLabel, { children: monthLabel }), (0, jsx_runtime_1.jsx)(MonthButton, { emphasis: "ghost", onClick: () => setDisplay((cur) => ({
-                            month: cur.month + 1,
-                            year: cur.year,
-                        })), children: (0, jsx_runtime_1.jsx)(index_js_2.Icon, { name: "arrowRight" }) })] }), (0, jsx_runtime_1.jsx)(calendar_blocks_1.Calendar, { displayMonth: month, displayYear: year, value: value, onChange: onChange, onDisplayChange: setDisplay, children: (0, jsx_runtime_1.jsxs)(CalendarGrid, { children: [(0, jsx_runtime_1.jsx)(DayLabels, {}), (0, jsx_runtime_1.jsx)(calendar_blocks_1.CalendarDays, { children: (value) => (0, jsx_runtime_1.jsx)(CalendarDay, { value: value }, value.key) })] }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Calendar_js_1.MonthRow, { children: [(0, jsx_runtime_1.jsx)(Calendar_js_1.MonthButton, { emphasis: "ghost", onClick: () => setDisplayInfo({
+                    month: month - 1,
+                    year: year,
+                }), children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "arrowLeft" }) }), (0, jsx_runtime_1.jsx)(Calendar_js_1.MonthLabel, { children: monthLabel }), (0, jsx_runtime_1.jsx)(Calendar_js_1.MonthButton, { emphasis: "ghost", onClick: () => setDisplayInfo({
+                    month: month + 1,
+                    year: year,
+                }), children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "arrowRight" }) })] }));
 }
-function DateRangePicker({ value, onChange, className, }) {
+function DatePickerRoot(_a) {
+    var { className, color, value, onChange, children } = _a, rest = __rest(_a, ["className", "color", "value", "onChange", "children"]);
     const [{ month, year }, setDisplay] = (0, react_1.useState)(() => ({
         month: new Date().getMonth(),
         year: new Date().getFullYear(),
     }));
-    const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
-        month: 'long',
-        year: 'numeric',
-    });
-    const nextMonth = new Date(year, month + 1);
-    const nextMonthLabel = nextMonth.toLocaleDateString('en-US', {
-        month: 'long',
-        year: 'numeric',
-    });
-    const onDisplayChange = (0, react_1.useCallback)(({ month: newMonth, year: newYear }) => {
-        /**
-         * Important UX consideration:
-         *
-         * since we are displaying 2 months at once, we don't
-         * always want to change our view if the user's cursor
-         * date moves from one month to another. Specifically,
-         * if they move from the first visible month to the
-         * second visible month, we don't need to change the view,
-         * since they are still within the visible range.
-         * So, we write logic to ignore that case!
-         */
-        if (newMonth === month + 1 && newYear === year) {
-            return; // ignore movement from the first to the second frame
-        }
-        setDisplay({
-            month: newMonth,
-            year: newYear,
-        });
-    }, [month, year]);
-    return ((0, jsx_runtime_1.jsx)(calendar_blocks_1.Calendar, { displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: (0, clsx_1.default)('flex justify-center', className), children: (0, jsx_runtime_1.jsxs)(RangeLayout, { children: [(0, jsx_runtime_1.jsx)(MonthButton, { emphasis: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplay((cur) => ({
-                        month: cur.month - 1,
-                        year: cur.year,
-                    })), children: (0, jsx_runtime_1.jsx)(index_js_2.Icon, { name: "arrowLeft" }) }), (0, jsx_runtime_1.jsx)(MonthLabel, { className: "[grid-area:leftMonth]", children: monthLabel }), (0, jsx_runtime_1.jsx)(MonthLabel, { className: "[grid-area:rightMonth] !hidden !sm:block", children: nextMonthLabel }), (0, jsx_runtime_1.jsx)(MonthButton, { emphasis: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplay((cur) => ({
-                        month: cur.month + 1,
-                        year: cur.year,
-                    })), children: (0, jsx_runtime_1.jsx)(index_js_2.Icon, { name: "arrowRight" }) }), (0, jsx_runtime_1.jsxs)(CalendarGrid, { className: "[grid-area:leftGrid]", children: [(0, jsx_runtime_1.jsx)(DayLabels, {}), (0, jsx_runtime_1.jsx)(calendar_blocks_1.CalendarDays, { children: (value) => (0, jsx_runtime_1.jsx)(CalendarDay, { value: value }, value.key) })] }), (0, jsx_runtime_1.jsxs)(CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", children: [(0, jsx_runtime_1.jsx)(DayLabels, {}), (0, jsx_runtime_1.jsx)(calendar_blocks_1.CalendarDays, { monthOffset: 1, children: (value) => (0, jsx_runtime_1.jsx)(CalendarDay, { value: value }, value.key) })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.clsx)(color && `palette-${color}`, 'layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:w-[calc(var(--day-size,32px)*7)]') }, rest, { children: (0, jsx_runtime_1.jsx)(calendar_blocks_1.Calendar, { displayMonth: month, displayYear: year, value: value, onChange: onChange, onDisplayChange: setDisplay, children: children }) })));
+}
+function DatePickerDefault(props) {
+    return ((0, jsx_runtime_1.jsxs)(DatePickerRoot, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(DatePickerMonthControls, {}), (0, jsx_runtime_1.jsx)(Calendar_js_1.CalendarGrid, { children: (value) => (0, jsx_runtime_1.jsx)(Calendar_js_1.CalendarDay, { value: value }, value.key) })] })));
 }
-const MonthRow = (0, hooks_js_1.withClassName)('div', 'flex flex-row justify-between items-center w-full');
-const MonthLabel = (0, hooks_js_1.withClassName)('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis', 'self-center');
-const MonthButton = (0, hooks_js_1.withClassName)(index_js_1.Button, 'self-center');
-const CalendarGrid = (0, hooks_js_1.withClassName)('div', 'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]', 'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2');
-const CalendarDay = (0, hooks_js_1.withClassName)(calendar_blocks_1.CalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:z-1 [&[data-highlighted]]:ring-2 [&[data-highlighted]]:ring-accent', 'hover:z-1 hover:ring-2 hover:ring-accent', 'active:bg-main-light active:rounded', '[&[data-selected]]:bg-main [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-main-light [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-main [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-main [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', 'disabled:opacity-50 disabled:cursor-default', 
-// today dot
-"[&[data-today]]:before:content-[''] [&[data-today]]:before:absolute [&[data-today]]:before:left-[1px] [&[data-today]]:before:top-[1px] [&[data-today]]:before:w-[6px] [&[data-today]]:before:h-[6px] [&[data-today]]:before:rounded-lg [&[data-today]]:before:bg-attention [&[data-today]]:before:border-1 [&[data-today]]:before:border-solid [&[data-today]]:before:border-black", 
-// calendar edges
-'[&[data-top-edge]]:border-t-gray', '[&[data-bottom-edge]]:border-b-gray', '[&[data-first-column]]:border-l-gray', '[&[data-last-column]]:border-r-gray', '[&[data-day-first]]:border-l-gray [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray [&[data-day-last]]:rounded-br', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
-const DayLabel = (0, hooks_js_1.withClassName)('div', 'flex items-center justify-center text-sm color-gray-dark');
-const DayLabels = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayLabel, { children: "S" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "M" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "T" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "W" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "T" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "F" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "S" })] }));
-const RangeLayout = (0, hooks_js_1.withClassName)('div', 'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]', '[grid-template-rows:auto_1fr] gap-2', 'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');
+exports.DatePicker = Object.assign(DatePickerDefault, {
+    Root: DatePickerRoot,
+    Calendar: calendar_blocks_1.Calendar,
+    CalendarDay: Calendar_js_1.CalendarDay,
+    CalendarDays: calendar_blocks_1.CalendarDays,
+    CalendarGrid: Calendar_js_1.CalendarGrid,
+    DayLabels: Calendar_js_1.DayLabels,
+    MonthControls: DatePickerMonthControls,
+    MonthButton: Calendar_js_1.MonthButton,
+    MonthLabel: Calendar_js_1.MonthLabel,
+    MonthRow: Calendar_js_1.MonthRow,
+});
 //# sourceMappingURL=DatePicker.js.map

package/dist/cjs/components/datePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qDAA6E;AAC7E,+BAA4B;AAC5B,iCAA4C;AAE5C,+CAAwC;AACxC,+CAOuB;AAEvB,SAAS,uBAAuB,CAAC,EAAM;IACtC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAA,oCAAkB,GAAE,CAAC;IAC7D,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACpE,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;KACf,CAAC,CAAC;IAEH,OAAO,CACN,wBAAC,sBAAQ,eACR,uBAAC,yBAAW,IACX,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CACb,cAAc,CAAC;oBACd,KAAK,EAAE,KAAK,GAAG,CAAC;oBAChB,IAAI,EAAE,IAAI;iBACV,CAAC,YAGH,uBAAC,eAAI,IAAC,IAAI,EAAC,WAAW,GAAG,GACZ,EACd,uBAAC,wBAAU,cAAE,UAAU,GAAc,EACrC,uBAAC,yBAAW,IACX,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CACb,cAAc,CAAC;oBACd,KAAK,EAAE,KAAK,GAAG,CAAC;oBAChB,IAAI,EAAE,IAAI;iBACV,CAAC,YAGH,uBAAC,eAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACb,IACJ,CACX,CAAC;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EASvB;QATuB,EACvB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,OAIR,EAHG,IAAI,cANgB,uDAOvB,CADO;IAIP,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,CAAC;QACrD,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE;QAC5B,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;KAC9B,CAAC,CAAC,CAAC;IAEJ,OAAO,CACN,8CACC,SAAS,EAAE,IAAA,WAAI,EACd,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,+FAA+F,CAC/F,IACG,IAAI,cAER,uBAAC,0BAAQ,IACR,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,UAAU,YAE1B,QAAQ,GACC,IACN,CACN,CAAC;AACH,CAAC;AASD,SAAS,iBAAiB,CAAC,KAAsB;IAChD,OAAO,CACN,wBAAC,cAAc,oBAAK,KAAK,eACxB,uBAAC,uBAAuB,KAAG,EAC3B,uBAAC,0BAAY,cACX,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GAC3C,KACC,CACjB,CAAC;AACH,CAAC;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;IAC1D,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAR,0BAAQ;IACR,WAAW,EAAX,yBAAW;IACX,YAAY,EAAZ,8BAAY;IACZ,YAAY,EAAZ,0BAAY;IACZ,SAAS,EAAT,uBAAS;IACT,aAAa,EAAE,uBAAuB;IACtC,WAAW,EAAX,yBAAW;IACX,UAAU,EAAV,wBAAU;IACV,QAAQ,EAAR,sBAAQ;CACR,CAAC,CAAC"}

package/dist/cjs/components/datePicker/DatePicker.stories.d.ts

@@ -2,7 +2,41 @@ import type { StoryObj } from '@storybook/react';
 import { DatePicker } from './DatePicker.js';
 declare const meta: {
     title: string;
-    component: typeof DatePicker;
+    component: ((props: import("./DatePicker.js").DatePickerProps) => import("react/jsx-runtime.js").JSX.Element) & {
+        Root: ({ className, color, value, onChange, children, ...rest }: import("./DatePicker.js").DatePickerProps & {
+            children?: import("react").ReactNode;
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        Calendar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange" | "value"> & {
+            onDisplayChange?: (newValue: {
+                month: number;
+                year: number;
+            }) => any;
+            displayYear: number;
+            displayMonth: number;
+            value?: Date | null;
+            onChange?: (value: Date | null) => any;
+            rangeValue?: {
+                start: Date | null;
+                end: Date | null;
+            };
+            onRangeChange?: (range: {
+                start: Date | null;
+                end: Date | null;
+            }) => any;
+            onRangeStartChange?: (range: Date) => any;
+            getDateEnabled?: (date: Date) => boolean;
+            defaultDate?: Date;
+            weekStartsOn?: import("calendar-blocks/dist/constants.js").WeekDay;
+        } & import("react").RefAttributes<any>>;
+        CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;
+        CalendarDays: typeof import("calendar-blocks").CalendarDays;
+        CalendarGrid: typeof import("./Calendar.js").CalendarGrid;
+        DayLabels: () => import("react/jsx-runtime.js").JSX.Element;
+        MonthControls: ({}: {}) => import("react/jsx-runtime.js").JSX.Element;
+        MonthButton: import("react").FunctionComponent<import("../index.js").ButtonProps>;
+        MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+        MonthRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    };
     argTypes: {};
     parameters: {
         controls: {
@@ -14,3 +48,4 @@ export default meta;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const Range: Story;
+export declare const CustomComposition: Story;

package/dist/cjs/components/datePicker/DatePicker.stories.js

@@ -1,10 +1,12 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Range = exports.Default = void 0;
+exports.CustomComposition = exports.Range = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Spinner_js_1 = require("../spinner/Spinner.js");
 const DatePicker_js_1 = require("./DatePicker.js");
+const DateRangePicker_js_1 = require("./DateRangePicker.js");
 const meta = {
     title: 'Components/DatePicker',
     component: DatePicker_js_1.DatePicker,
@@ -23,7 +25,22 @@ exports.Default = {
 exports.Range = {
     render() {
         const [value, setValue] = (0, react_1.useState)({ start: null, end: null });
-        return (0, jsx_runtime_1.jsx)(DatePicker_js_1.DateRangePicker, { value: value, onChange: setValue });
+        return (0, jsx_runtime_1.jsx)(DateRangePicker_js_1.DateRangePicker, { value: value, onChange: setValue });
     },
 };
+exports.CustomComposition = {
+    render() {
+        const [value, setValue] = (0, react_1.useState)(null);
+        return ((0, jsx_runtime_1.jsxs)(DatePicker_js_1.DatePicker.Root, { value: value, onChange: setValue, children: [(0, jsx_runtime_1.jsx)(DatePicker_js_1.DatePicker.MonthControls, {}), (0, jsx_runtime_1.jsx)(DatePicker_js_1.DatePicker.CalendarGrid, { children: (value) => (0, jsx_runtime_1.jsx)(FakeLoadingDay, { value: value }, value.key) })] }));
+    },
+};
+function FakeLoadingDay({ value }) {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => setLoading(false), Math.random() * 2000 + 500);
+        return () => clearTimeout(timeout);
+    }, []);
+    const [disabled] = (0, react_1.useState)(() => Math.random() < 0.3);
+    return ((0, jsx_runtime_1.jsx)(DatePicker_js_1.DatePicker.CalendarDay, { value: value, disabled: loading || disabled, children: loading ? (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: 10 }) : value.date.getDate() }));
+}
 //# sourceMappingURL=DatePicker.stories.js.map

package/dist/cjs/components/datePicker/DatePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,mDAA8D;AAE9D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,0BAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAc,IAAI,CAAC,CAAC;QACtD,OAAO,uBAAC,0BAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzD,CAAC;CACD,CAAC;AAEW,QAAA,KAAK,GAAU;IAC3B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAG/B,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/B,OAAO,uBAAC,+BAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC9D,CAAC;CACD,CAAC"}
+{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AAEA,iCAA4C;AAC5C,sDAAgD;AAChD,mDAA6C;AAC7C,6DAAuD;AAEvD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,0BAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAc,IAAI,CAAC,CAAC;QACtD,OAAO,uBAAC,0BAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzD,CAAC;CACD,CAAC;AAEW,QAAA,KAAK,GAAU;IAC3B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAG/B,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/B,OAAO,uBAAC,oCAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC9D,CAAC;CACD,CAAC;AAEW,QAAA,iBAAiB,GAAU;IACvC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAc,IAAI,CAAC,CAAC;QAEtD,OAAO,CACN,wBAAC,0BAAU,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aAChD,uBAAC,0BAAU,CAAC,aAAa,KAAG,EAC5B,uBAAC,0BAAU,CAAC,YAAY,cACtB,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GACnC,IACT,CAClB,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,cAAc,CAAC,EAAE,KAAK,EAA+B;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAC7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,OAAO,GAAG,UAAU,CACzB,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACvB,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,GAAG,CAC1B,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAEvD,OAAO,CACN,uBAAC,0BAAU,CAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,IAAI,QAAQ,YACjE,OAAO,CAAC,CAAC,CAAC,uBAAC,oBAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,GAC/B,CACzB,CAAC;AACH,CAAC"}

package/dist/cjs/components/datePicker/DateRangePicker.d.ts

@@ -0,0 +1,55 @@
+import { CalendarDays } from 'calendar-blocks';
+import { ReactNode } from 'react';
+import { PaletteName } from '../../uno/index.js';
+import { CalendarGrid } from './Calendar.js';
+declare function DateRangePickerMonthControls(): import("react/jsx-runtime.js").JSX.Element;
+declare function DateRangePickerRoot({ children, color, value, onChange, className, ...rest }: DateRangePickerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime.js").JSX.Element;
+export interface DateRangePickerProps {
+    value: {
+        start: Date | null;
+        end: Date | null;
+    };
+    onChange: (value: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    className?: string;
+    color?: PaletteName;
+}
+declare function DateRangePickerBase(props: DateRangePickerProps): import("react/jsx-runtime.js").JSX.Element;
+export declare const DateRangePicker: typeof DateRangePickerBase & {
+    Root: typeof DateRangePickerRoot;
+    RangeLayout: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    DayLabels: () => import("react/jsx-runtime.js").JSX.Element;
+    CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Calendar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange" | "value"> & {
+        onDisplayChange?: (newValue: {
+            month: number;
+            year: number;
+        }) => any;
+        displayYear: number;
+        displayMonth: number;
+        value?: Date | null;
+        onChange?: (value: Date | null) => any;
+        rangeValue?: {
+            start: Date | null;
+            end: Date | null;
+        };
+        onRangeChange?: (range: {
+            start: Date | null;
+            end: Date | null;
+        }) => any;
+        onRangeStartChange?: (range: Date) => any;
+        getDateEnabled?: (date: Date) => boolean;
+        defaultDate?: Date;
+        weekStartsOn?: import("calendar-blocks/dist/constants.js").WeekDay;
+    } & import("react").RefAttributes<any>>;
+    CalendarGrid: typeof CalendarGrid;
+    CalendarDays: typeof CalendarDays;
+    MonthControls: typeof DateRangePickerMonthControls;
+    MonthButton: import("react").FunctionComponent<import("../index.js").ButtonProps>;
+    MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+};
+export {};

package/dist/cjs/components/datePicker/DateRangePicker.js

@@ -0,0 +1,89 @@
+// @unocss-include
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calendar_blocks_1 = require("calendar-blocks");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const hooks_js_1 = require("../../hooks.js");
+const Icon_js_1 = require("../icon/Icon.js");
+const Calendar_js_1 = require("./Calendar.js");
+const RangeLayout = (0, hooks_js_1.withClassName)('div', 'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]', '[grid-template-rows:auto_1fr] gap-2', 'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');
+function DateRangePickerMonthControls() {
+    const { setDisplayInfo, month, year } = (0, calendar_blocks_1.useCalendarContext)();
+    const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+    });
+    const nextMonth = new Date(year, month + 1);
+    const nextMonthLabel = nextMonth.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Calendar_js_1.MonthButton, { emphasis: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplayInfo({
+                    month: month - 1,
+                    year: year,
+                }), children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "arrowLeft" }) }), (0, jsx_runtime_1.jsx)(Calendar_js_1.MonthLabel, { className: "[grid-area:leftMonth]", children: monthLabel }), (0, jsx_runtime_1.jsx)(Calendar_js_1.MonthLabel, { className: "[grid-area:rightMonth] !hidden !sm:block", children: nextMonthLabel }), (0, jsx_runtime_1.jsx)(Calendar_js_1.MonthButton, { emphasis: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplayInfo({
+                    month: month + 1,
+                    year: year,
+                }), children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "arrowRight" }) })] }));
+}
+function DateRangePickerRoot(_a) {
+    var { children, color, value, onChange, className } = _a, rest = __rest(_a, ["children", "color", "value", "onChange", "className"]);
+    const [{ month, year }, setDisplay] = (0, react_1.useState)(() => ({
+        month: new Date().getMonth(),
+        year: new Date().getFullYear(),
+    }));
+    const onDisplayChange = (0, react_1.useCallback)(({ month: newMonth, year: newYear }) => {
+        /**
+         * Important UX consideration:
+         *
+         * since we are displaying 2 months at once, we don't
+         * always want to change our view if the user's cursor
+         * date moves from one month to another. Specifically,
+         * if they move from the first visible month to the
+         * second visible month, we don't need to change the view,
+         * since they are still within the visible range.
+         * So, we write logic to ignore that case!
+         */
+        if (newMonth === month + 1 && newYear === year) {
+            return; // ignore movement from the first to the second frame
+        }
+        setDisplay({
+            month: newMonth,
+            year: newYear,
+        });
+    }, [month, year]);
+    return ((0, jsx_runtime_1.jsx)(calendar_blocks_1.Calendar, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: (0, clsx_1.default)('flex justify-center', color && `palette-${color}`, className) }, rest, { children: (0, jsx_runtime_1.jsx)(RangeLayout, { children: children }) })));
+}
+function DateRangePickerBase(props) {
+    return ((0, jsx_runtime_1.jsxs)(DateRangePickerRoot, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(DateRangePickerMonthControls, {}), (0, jsx_runtime_1.jsx)(Calendar_js_1.CalendarGrid, { className: "[grid-area:leftGrid]", children: (value) => (0, jsx_runtime_1.jsx)(Calendar_js_1.CalendarDay, { value: value }, value.key) }), (0, jsx_runtime_1.jsx)(Calendar_js_1.CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", monthOffset: 1, children: (value) => (0, jsx_runtime_1.jsx)(Calendar_js_1.CalendarDay, { value: value }, value.key) })] })));
+}
+exports.DateRangePicker = Object.assign(DateRangePickerBase, {
+    Root: DateRangePickerRoot,
+    RangeLayout,
+    DayLabels: Calendar_js_1.DayLabels,
+    CalendarDay: Calendar_js_1.CalendarDay,
+    Calendar: calendar_blocks_1.Calendar,
+    CalendarGrid: Calendar_js_1.CalendarGrid,
+    CalendarDays: calendar_blocks_1.CalendarDays,
+    MonthControls: DateRangePickerMonthControls,
+    MonthButton: Calendar_js_1.MonthButton,
+    MonthLabel: Calendar_js_1.MonthLabel,
+});
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/cjs/components/datePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DateRangePicker.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/datePicker/index.d.ts

@@ -1 +1,3 @@
+export type * from 'calendar-blocks';
 export * from './DatePicker.js';
+export * from './DateRangePicker.js';

package/dist/cjs/components/datePicker/index.js

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DatePicker.js"), exports);
+__exportStar(require("./DateRangePicker.js"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/datePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/datePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/datePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,kDAAgC;AAChC,uDAAqC"}