@a-type/ui 3.0.32 → 3.0.33

package/dist/esm/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").JSX.Element;
+declare function DatePickerRoot({ className, color, value, onChange, children, ...rest }: DatePickerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime").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").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").JSX.Element;
+declare function DatePickerDefault(props: DatePickerProps): import("react/jsx-runtime").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").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/esm/components/datePicker/DatePicker.js

@@ -10,83 +10,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CalendarDay as BaseCalendarDay, Calendar, CalendarDays, } from 'calendar-blocks';
-import classNames from 'clsx';
-import { useCallback, useState } from 'react';
-import { withClassName } from '../../hooks.js';
-import { Button } from '../button/index.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
+import { clsx } from 'clsx';
+import { useState } from 'react';
 import { Icon } from '../icon/index.js';
-export function DatePicker(_a) {
-    var { value, onChange, className, color } = _a, rest = __rest(_a, ["value", "onChange", "className", "color"]);
-    const [{ month, year }, setDisplay] = useState(() => ({
-        month: new Date().getMonth(),
-        year: new Date().getFullYear(),
-    }));
+import { CalendarDay, CalendarGrid, DayLabels, MonthButton, MonthLabel, MonthRow, } from './Calendar.js';
+function DatePickerMonthControls({}) {
+    const { setDisplayInfo, month, year } = useCalendarContext();
     const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
         month: 'long',
         year: 'numeric',
     });
-    return (_jsxs("div", Object.assign({ className: classNames(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: [_jsxs(MonthRow, { children: [_jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplay((cur) => ({
-                            month: cur.month - 1,
-                            year: cur.year,
-                        })), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { children: monthLabel }), _jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplay((cur) => ({
-                            month: cur.month + 1,
-                            year: cur.year,
-                        })), children: _jsx(Icon, { name: "arrowRight" }) })] }), _jsx(Calendar, { displayMonth: month, displayYear: year, value: value, onChange: onChange, onDisplayChange: setDisplay, children: _jsxs(CalendarGrid, { children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] }) })] })));
+    return (_jsxs(MonthRow, { children: [_jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplayInfo({
+                    month: month - 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { children: monthLabel }), _jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplayInfo({
+                    month: month + 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowRight" }) })] }));
 }
-export 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] = 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 = 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 (_jsx(Calendar, { displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: classNames('flex justify-center', className), children: _jsxs(RangeLayout, { children: [_jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplay((cur) => ({
-                        month: cur.month - 1,
-                        year: cur.year,
-                    })), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { className: "[grid-area:leftMonth]", children: monthLabel }), _jsx(MonthLabel, { className: "[grid-area:rightMonth] !hidden !sm:block", children: nextMonthLabel }), _jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplay((cur) => ({
-                        month: cur.month + 1,
-                        year: cur.year,
-                    })), children: _jsx(Icon, { name: "arrowRight" }) }), _jsxs(CalendarGrid, { className: "[grid-area:leftGrid]", children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] }), _jsxs(CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { monthOffset: 1, children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })] }) }));
+    return (_jsx("div", Object.assign({ className: 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: _jsx(Calendar, { displayMonth: month, displayYear: year, value: value, onChange: onChange, onDisplayChange: setDisplay, children: children }) })));
+}
+function DatePickerDefault(props) {
+    return (_jsxs(DatePickerRoot, Object.assign({}, props, { children: [_jsx(DatePickerMonthControls, {}), _jsx(CalendarGrid, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })));
 }
-const MonthRow = withClassName('div', 'flex flex-row justify-between items-center w-full');
-const MonthLabel = withClassName('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis', 'self-center');
-const MonthButton = withClassName(Button, 'self-center');
-const CalendarGrid = 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 = withClassName(BaseCalendarDay, '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 = withClassName('div', 'flex items-center justify-center text-sm color-gray-dark');
-const DayLabels = () => (_jsxs(_Fragment, { children: [_jsx(DayLabel, { children: "S" }), _jsx(DayLabel, { children: "M" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "W" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "F" }), _jsx(DayLabel, { children: "S" })] }));
-const RangeLayout = 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]');
+export const DatePicker = Object.assign(DatePickerDefault, {
+    Root: DatePickerRoot,
+    Calendar,
+    CalendarDay,
+    CalendarDays,
+    CalendarGrid,
+    DayLabels,
+    MonthControls: DatePickerMonthControls,
+    MonthButton,
+    MonthLabel,
+    MonthRow,
+});
 //# sourceMappingURL=DatePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,WAAW,IAAI,eAAe,EAC9B,QAAQ,EACR,YAAY,GACZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AASxC,MAAM,UAAU,UAAU,CAAC,EAMT;QANS,EAC1B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,OAEY,EADd,IAAI,cALmB,2CAM1B,CADO;IAEP,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,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;IACJ,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,6BACC,SAAS,EAAE,UAAU,CACpB,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,+FAA+F,EAC/F,SAAS,CACT,IACG,IAAI,eAER,MAAC,QAAQ,eACR,KAAC,WAAW,IACX,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CACb,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;4BACpB,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;4BACpB,IAAI,EAAE,GAAG,CAAC,IAAI;yBACd,CAAC,CAAC,YAGJ,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,GACZ,EACd,KAAC,UAAU,cAAE,UAAU,GAAc,EACrC,KAAC,WAAW,IACX,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CACb,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;4BACpB,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;4BACpB,IAAI,EAAE,GAAG,CAAC,IAAI;yBACd,CAAC,CAAC,YAGJ,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACb,IACJ,EACX,KAAC,QAAQ,IACR,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,UAAU,YAE3B,MAAC,YAAY,eACZ,KAAC,SAAS,KAAG,EACb,KAAC,YAAY,cACX,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GAC3C,IACD,GACL,KACN,CACN,CAAC;AACH,CAAC;AAQD,MAAM,UAAU,eAAe,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,GACa;IACtB,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,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;IACJ,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;IACH,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE;QAC5D,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;KACf,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,WAAW,CAClC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAmC,EAAE,EAAE;QACvE;;;;;;;;;;WAUG;QACH,IAAI,QAAQ,KAAK,KAAK,GAAG,CAAC,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YAChD,OAAO,CAAC,qDAAqD;QAC9D,CAAC;QAED,UAAU,CAAC;YACV,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,OAAO;SACb,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,CAAC,CACb,CAAC;IAEF,OAAO,CACN,KAAC,QAAQ,IACR,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,EACjB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACzC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,YAEvD,MAAC,WAAW,eACX,KAAC,WAAW,IACX,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE,CACb,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;wBACpB,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;wBACpB,IAAI,EAAE,GAAG,CAAC,IAAI;qBACd,CAAC,CAAC,YAGJ,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,GACZ,EACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,YAAE,UAAU,GAAc,EACvE,KAAC,UAAU,IAAC,SAAS,EAAC,0CAA0C,YAC9D,cAAc,GACH,EACb,KAAC,WAAW,IACX,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE,CACb,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;wBACpB,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;wBACpB,IAAI,EAAE,GAAG,CAAC,IAAI;qBACd,CAAC,CAAC,YAGJ,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACb,EACd,MAAC,YAAY,IAAC,SAAS,EAAC,sBAAsB,aAC7C,KAAC,SAAS,KAAG,EACb,KAAC,YAAY,cACX,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GAC3C,IACD,EACf,MAAC,YAAY,IAAC,SAAS,EAAC,wCAAwC,aAC/D,KAAC,SAAS,KAAG,EACb,KAAC,YAAY,IAAC,WAAW,EAAE,CAAC,YAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GAC3C,IACD,IACF,GACJ,CACX,CAAC;AACH,CAAC;AAED,MAAM,QAAQ,GAAG,aAAa,CAC7B,KAAK,EACL,mDAAmD,CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,aAAa,CAC/B,MAAM,EACN,qEAAqE,EACrE,aAAa,CACb,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAEzD,MAAM,YAAY,GAAG,aAAa,CACjC,KAAK,EACL,uFAAuF,EACvF,mEAAmE,CACnE,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,eAAe,EACf,sFAAsF,EACtF,4DAA4D,EAC5D,gDAAgD,EAChD,gCAAgC,EAChC,gCAAgC,EAChC,0CAA0C,EAC1C,qDAAqD,EACrD,8DAA8D,EAC9D,4DAA4D,EAC5D,sCAAsC;AACtC,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;AAEF,MAAM,QAAQ,GAAG,aAAa,CAC7B,KAAK,EACL,0DAA0D,CAC1D,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACvB,8BACC,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,IACpB,CACH,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,KAAK,EACL,8HAA8H,EAC9H,qCAAqC,EACrC,+IAA+I,CAC/I,CAAC"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,GACR,MAAM,eAAe,CAAC;AAEvB,SAAS,uBAAuB,CAAC,EAAM;IACtC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,kBAAkB,EAAE,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,MAAC,QAAQ,eACR,KAAC,WAAW,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,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,GACZ,EACd,KAAC,UAAU,cAAE,UAAU,GAAc,EACrC,KAAC,WAAW,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,KAAC,IAAI,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,QAAQ,CAAC,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,4BACC,SAAS,EAAE,IAAI,CACd,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,+FAA+F,CAC/F,IACG,IAAI,cAER,KAAC,QAAQ,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,MAAC,cAAc,oBAAK,KAAK,eACxB,KAAC,uBAAuB,KAAG,EAC3B,KAAC,YAAY,cACX,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GAC3C,KACC,CACjB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;IAC1D,IAAI,EAAE,cAAc;IACpB,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,aAAa,EAAE,uBAAuB;IACtC,WAAW;IACX,UAAU;IACV,QAAQ;CACR,CAAC,CAAC"}

package/dist/esm/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").JSX.Element) & {
+        Root: ({ className, color, value, onChange, children, ...rest }: import("./DatePicker.js").DatePickerProps & {
+            children?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").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").JSX.Element;
+        MonthControls: ({}: {}) => import("react/jsx-runtime").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/esm/components/datePicker/DatePicker.stories.js

@@ -1,7 +1,9 @@
 // @unocss-include
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { DatePicker, DateRangePicker } from './DatePicker.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Spinner } from '../spinner/Spinner.js';
+import { DatePicker } from './DatePicker.js';
+import { DateRangePicker } from './DateRangePicker.js';
 const meta = {
     title: 'Components/DatePicker',
     component: DatePicker,
@@ -23,4 +25,18 @@ export const Range = {
         return _jsx(DateRangePicker, { value: value, onChange: setValue });
     },
 };
+export const CustomComposition = {
+    render() {
+        const [value, setValue] = useState(null);
+        return (_jsxs(DatePicker.Root, { value: value, onChange: setValue, children: [_jsx(DatePicker.MonthControls, {}), _jsx(DatePicker.CalendarGrid, { children: (value) => _jsx(FakeLoadingDay, { value: value }, value.key) })] }));
+    },
+};
+function FakeLoadingDay({ value }) {
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const timeout = setTimeout(() => setLoading(false), Math.random() * 2000 + 500);
+        return () => clearTimeout(timeout);
+    }, []);
+    return (_jsx(DatePicker.CalendarDay, { value: value, children: loading ? _jsx(Spinner, { size: 10 }) : value.date.getDate() }));
+}
 //# sourceMappingURL=DatePicker.stories.js.map

package/dist/esm/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,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAC;QACtD,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAG/B,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/B,OAAO,KAAC,eAAe,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,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAC;QACtD,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAG/B,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/B,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC9D,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACvC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAC;QAEtD,OAAO,CACN,MAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aAChD,KAAC,UAAU,CAAC,aAAa,KAAG,EAC5B,KAAC,UAAU,CAAC,YAAY,cACtB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,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,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,SAAS,CAAC,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;IAEP,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IAAC,KAAK,EAAE,KAAK,YAClC,OAAO,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,GAC/B,CACzB,CAAC;AACH,CAAC"}

package/dist/esm/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").JSX.Element;
+declare function DateRangePickerRoot({ children, color, value, onChange, className, ...rest }: DateRangePickerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime").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").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").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/esm/components/datePicker/DateRangePicker.js

@@ -0,0 +1,83 @@
+// @unocss-include
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
+import clsx from 'clsx';
+import { useCallback, useState } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Icon } from '../icon/Icon.js';
+import { CalendarDay, CalendarGrid, DayLabels, MonthButton, MonthLabel, } from './Calendar.js';
+const RangeLayout = 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 } = 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 (_jsxs(_Fragment, { children: [_jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplayInfo({
+                    month: month - 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { className: "[grid-area:leftMonth]", children: monthLabel }), _jsx(MonthLabel, { className: "[grid-area:rightMonth] !hidden !sm:block", children: nextMonthLabel }), _jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplayInfo({
+                    month: month + 1,
+                    year: year,
+                }), children: _jsx(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] = useState(() => ({
+        month: new Date().getMonth(),
+        year: new Date().getFullYear(),
+    }));
+    const onDisplayChange = 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 (_jsx(Calendar, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: clsx('flex justify-center', color && `palette-${color}`, className) }, rest, { children: _jsx(RangeLayout, { children: children }) })));
+}
+function DateRangePickerBase(props) {
+    return (_jsxs(DateRangePickerRoot, Object.assign({}, props, { children: [_jsx(DateRangePickerMonthControls, {}), _jsx(CalendarGrid, { className: "[grid-area:leftGrid]", children: (value) => _jsx(CalendarDay, { value: value }, value.key) }), _jsx(CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", monthOffset: 1, children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })));
+}
+export const DateRangePicker = Object.assign(DateRangePickerBase, {
+    Root: DateRangePickerRoot,
+    RangeLayout,
+    DayLabels,
+    CalendarDay,
+    Calendar,
+    CalendarGrid,
+    CalendarDays,
+    MonthControls: DateRangePickerMonthControls,
+    MonthButton,
+    MonthLabel,
+});
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/esm/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/esm/components/datePicker/index.d.ts

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

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

@@ -1,3 +1,4 @@
 // @unocss-include
 export * from './DatePicker.js';
+export * from './DateRangePicker.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.0.32",
+  "version": "3.0.33",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/datePicker/Calendar.tsx

@@ -0,0 +1,83 @@
+import {
+	CalendarDay as BaseCalendarDay,
+	CalendarDays,
+	CalendarDaysProps,
+} from 'calendar-blocks';
+import { withClassName } from '../../hooks.js';
+import { Button } from '../button/index.js';
+
+export const MonthRow = withClassName(
+	'div',
+	'flex flex-row justify-between items-center w-full',
+);
+
+export const MonthLabel = withClassName(
+	'span',
+	'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis',
+	'self-center',
+);
+
+export const MonthButton = withClassName(Button, 'self-center');
+
+export const CalendarGridRoot = 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',
+);
+
+export const DayLabel = withClassName(
+	'div',
+	'flex items-center justify-center text-sm color-gray-dark',
+);
+
+export const DayLabels = () => (
+	<>
+		<DayLabel>S</DayLabel>
+		<DayLabel>M</DayLabel>
+		<DayLabel>T</DayLabel>
+		<DayLabel>W</DayLabel>
+		<DayLabel>T</DayLabel>
+		<DayLabel>F</DayLabel>
+		<DayLabel>S</DayLabel>
+	</>
+);
+
+export function CalendarGrid({
+	className,
+	...props
+}: CalendarDaysProps & { className?: string }) {
+	return (
+		<CalendarGridRoot className={className}>
+			<DayLabels />
+			<CalendarDays {...props} />
+		</CalendarGridRoot>
+	);
+}
+
+export const CalendarDay = withClassName(
+	BaseCalendarDay,
+	'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 ring-2 ring-accent)',
+	'hover:(z-1 ring-2 ring-accent)',
+	'active:(bg-main-light rounded)',
+	'[&[data-selected]]:(bg-main z-2 rounded)',
+	'[&[data-in-range]]:(bg-main-light rounded-none z-1)',
+	'[&[data-range-start]]:(bg-main rounded-l rounded-r-none z-1)',
+	'[&[data-range-end]]:(bg-main rounded-r rounded-l-none z-1)',
+	'disabled:(opacity-50 cursor-default)',
+	// today dot
+	"[&[data-today]]:before:(content-[''] absolute left-[1px] top-[1px] w-[6px] h-[6px] rounded-lg bg-attention border-1 border-solid 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 rounded-tl)',
+	'[&[data-day-last]]:(border-r-gray 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]',
+);

package/src/components/datePicker/DatePicker.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { DatePicker, DateRangePicker } from './DatePicker.js';
+import { CalendarDayValue } from 'calendar-blocks';
+import { useEffect, useState } from 'react';
+import { Spinner } from '../spinner/Spinner.js';
+import { DatePicker } from './DatePicker.js';
+import { DateRangePicker } from './DateRangePicker.js';
 
 const meta = {
 	title: 'Components/DatePicker',
@@ -31,3 +34,35 @@ export const Range: Story = {
 		return <DateRangePicker value={value} onChange={setValue} />;
 	},
 };
+
+export const CustomComposition: Story = {
+	render() {
+		const [value, setValue] = useState<Date | null>(null);
+
+		return (
+			<DatePicker.Root value={value} onChange={setValue}>
+				<DatePicker.MonthControls />
+				<DatePicker.CalendarGrid>
+					{(value) => <FakeLoadingDay value={value} key={value.key} />}
+				</DatePicker.CalendarGrid>
+			</DatePicker.Root>
+		);
+	},
+};
+
+function FakeLoadingDay({ value }: { value: CalendarDayValue }) {
+	const [loading, setLoading] = useState(true);
+	useEffect(() => {
+		const timeout = setTimeout(
+			() => setLoading(false),
+			Math.random() * 2000 + 500,
+		);
+		return () => clearTimeout(timeout);
+	}, []);
+
+	return (
+		<DatePicker.CalendarDay value={value}>
+			{loading ? <Spinner size={10} /> : value.date.getDate()}
+		</DatePicker.CalendarDay>
+	);
+}