@a-type/ui 0.3.3 → 0.4.1

package/dist/cjs/components/datePIcker.d.ts

@@ -0,0 +1 @@
+export * from './datePicker/index.js';

package/dist/cjs/components/datePIcker.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./datePicker/index.js"), exports);
+//# sourceMappingURL=datePIcker.js.map

package/dist/cjs/components/datePIcker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePIcker.js","sourceRoot":"","sources":["../../../src/components/datePIcker.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC"}

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

@@ -0,0 +1,19 @@
+/// <reference types="react" resolution-mode="require"/>
+export interface DatePickerProps {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    className?: string;
+}
+export declare function DatePicker({ value, onChange, className, ...rest }: DatePickerProps): 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): JSX.Element;

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

@@ -0,0 +1,97 @@
+"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 = exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calendar_blocks_1 = require("calendar-blocks");
+const button_js_1 = require("../button.js");
+const react_icons_1 = require("@radix-ui/react-icons");
+const react_1 = require("react");
+const hooks_js_1 = require("../../hooks.js");
+const classnames_1 = __importDefault(require("classnames"));
+function DatePicker(_a) {
+    var { value, onChange, className } = _a, rest = __rest(_a, ["value", "onChange", "className"]);
+    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',
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)]', className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(MonthRow, { children: [(0, jsx_runtime_1.jsx)(MonthButton, Object.assign({ size: "icon", color: "ghost", onClick: () => setDisplay((cur) => ({
+                            month: cur.month - 1,
+                            year: cur.year,
+                        })) }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowLeftIcon, {}) })), (0, jsx_runtime_1.jsx)(MonthLabel, { children: monthLabel }), (0, jsx_runtime_1.jsx)(MonthButton, Object.assign({ size: "icon", color: "ghost", onClick: () => setDisplay((cur) => ({
+                            month: cur.month + 1,
+                            year: cur.year,
+                        })) }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) }))] }), (0, jsx_runtime_1.jsx)(calendar_blocks_1.Calendar, Object.assign({ 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) })] }) }))] })));
+}
+exports.DatePicker = DatePicker;
+function DateRangePicker({ value, onChange, className, }) {
+    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, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: (0, classnames_1.default)('flex justify-center', className) }, { children: (0, jsx_runtime_1.jsxs)(RangeLayout, { children: [(0, jsx_runtime_1.jsx)(MonthButton, Object.assign({ size: "icon", color: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplay((cur) => ({
+                        month: cur.month - 1,
+                        year: cur.year,
+                    })) }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowLeftIcon, {}) })), (0, jsx_runtime_1.jsx)(MonthLabel, Object.assign({ className: "[grid-area:leftMonth]" }, { children: monthLabel })), (0, jsx_runtime_1.jsx)(MonthLabel, Object.assign({ className: "[grid-area:rightMonth]" }, { children: nextMonthLabel })), (0, jsx_runtime_1.jsx)(MonthButton, Object.assign({ size: "icon", color: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplay((cur) => ({
+                        month: cur.month + 1,
+                        year: cur.year,
+                    })) }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) })), (0, jsx_runtime_1.jsxs)(CalendarGrid, Object.assign({ 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, Object.assign({ className: "[grid-area:rightGrid]" }, { children: [(0, jsx_runtime_1.jsx)(DayLabels, {}), (0, jsx_runtime_1.jsx)(calendar_blocks_1.CalendarDays, Object.assign({ monthOffset: 1 }, { children: (value) => (0, jsx_runtime_1.jsx)(CalendarDay, { value: value }, value.key) }))] }))] }) })));
+}
+exports.DateRangePicker = DateRangePicker;
+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)(button_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 bg-gray-1');
+const CalendarDay = (0, hooks_js_1.withClassName)(calendar_blocks_1.CalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative rounded', 'flex items-center justify-center transition-colors cursor-pointer', '[&[data-highlighted]]:(z-1 outline-accent)', '[&[data-selected]]:(bg-accent-light z-2)', '[&[data-in-range]]:(bg-accent-wash rounded-none z-1)', '[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)', '[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)', 'disabled:(opacity-50 cursor-default)', 
+// today dot
+'[&[data-today]]:before:(content-[""] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-full bg-primary)', '[&[data-top-edge]]:(border-top-gray-2)', '[&[data-bottom-edge]]:(border-bottom-gray-2)', '[&[data-first-column]]:(border-left-gray-2)', '[&[data-last-column]]:(border-right-gray-2)', '[&[data-day-first]]:(border-left-gray-2 rounded-tl)', '[&[data-day-last]]:(border-right-gray-2 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 text-gray-6');
+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_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"]', '[grid-template-columns:auto_1fr_1fr_auto] [grid-template-rows:auto_1fr] gap-2');
+//# sourceMappingURL=DatePicker.js.map

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

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

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker.js';
+declare const meta: {
+    title: string;
+    component: typeof DatePicker;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const Range: Story;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Range = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DatePicker_js_1 = require("./DatePicker.js");
+const react_1 = require("react");
+const meta = {
+    title: 'DatePicker',
+    component: DatePicker_js_1.DatePicker,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render() {
+        const [value, setValue] = (0, react_1.useState)(null);
+        return (0, jsx_runtime_1.jsx)(DatePicker_js_1.DatePicker, { value: value, onChange: setValue });
+    },
+};
+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 });
+    },
+};
+//# sourceMappingURL=DatePicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,mDAA8D;AAC9D,iCAAiC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,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"}

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

@@ -0,0 +1 @@
+export * from './DatePicker.js';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePicker.js"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/datePIcker.d.ts

@@ -0,0 +1 @@
+export * from './datePicker/index.js';

package/dist/esm/components/datePIcker.js

@@ -0,0 +1,2 @@
+export * from './datePicker/index.js';
+//# sourceMappingURL=datePIcker.js.map

package/dist/esm/components/datePIcker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePIcker.js","sourceRoot":"","sources":["../../../src/components/datePIcker.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

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

@@ -0,0 +1,19 @@
+/// <reference types="react" resolution-mode="require"/>
+export interface DatePickerProps {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    className?: string;
+}
+export declare function DatePicker({ value, onChange, className, ...rest }: DatePickerProps): 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): JSX.Element;

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

@@ -0,0 +1,89 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Calendar, CalendarDay as BaseCalendarDay, CalendarDays, } from 'calendar-blocks';
+import { Button } from '../button.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { useCallback, useState } from 'react';
+import { withClassName } from '../../hooks.js';
+import classNames from 'classnames';
+export function DatePicker(_a) {
+    var { value, onChange, className } = _a, rest = __rest(_a, ["value", "onChange", "className"]);
+    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',
+    });
+    return (_jsxs("div", Object.assign({ className: classNames('flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)]', className) }, rest, { children: [_jsxs(MonthRow, { children: [_jsx(MonthButton, Object.assign({ size: "icon", color: "ghost", onClick: () => setDisplay((cur) => ({
+                            month: cur.month - 1,
+                            year: cur.year,
+                        })) }, { children: _jsx(ArrowLeftIcon, {}) })), _jsx(MonthLabel, { children: monthLabel }), _jsx(MonthButton, Object.assign({ size: "icon", color: "ghost", onClick: () => setDisplay((cur) => ({
+                            month: cur.month + 1,
+                            year: cur.year,
+                        })) }, { children: _jsx(ArrowRightIcon, {}) }))] }), _jsx(Calendar, Object.assign({ 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) })] }) }))] })));
+}
+export function DateRangePicker({ value, onChange, className, }) {
+    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, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: classNames('flex justify-center', className) }, { children: _jsxs(RangeLayout, { children: [_jsx(MonthButton, Object.assign({ size: "icon", color: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplay((cur) => ({
+                        month: cur.month - 1,
+                        year: cur.year,
+                    })) }, { children: _jsx(ArrowLeftIcon, {}) })), _jsx(MonthLabel, Object.assign({ className: "[grid-area:leftMonth]" }, { children: monthLabel })), _jsx(MonthLabel, Object.assign({ className: "[grid-area:rightMonth]" }, { children: nextMonthLabel })), _jsx(MonthButton, Object.assign({ size: "icon", color: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplay((cur) => ({
+                        month: cur.month + 1,
+                        year: cur.year,
+                    })) }, { children: _jsx(ArrowRightIcon, {}) })), _jsxs(CalendarGrid, Object.assign({ className: "[grid-area:leftGrid]" }, { children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })), _jsxs(CalendarGrid, Object.assign({ className: "[grid-area:rightGrid]" }, { children: [_jsx(DayLabels, {}), _jsx(CalendarDays, Object.assign({ monthOffset: 1 }, { 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 bg-gray-1');
+const CalendarDay = withClassName(BaseCalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative rounded', 'flex items-center justify-center transition-colors cursor-pointer', '[&[data-highlighted]]:(z-1 outline-accent)', '[&[data-selected]]:(bg-accent-light z-2)', '[&[data-in-range]]:(bg-accent-wash rounded-none z-1)', '[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)', '[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)', 'disabled:(opacity-50 cursor-default)', 
+// today dot
+'[&[data-today]]:before:(content-[""] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-full bg-primary)', '[&[data-top-edge]]:(border-top-gray-2)', '[&[data-bottom-edge]]:(border-bottom-gray-2)', '[&[data-first-column]]:(border-left-gray-2)', '[&[data-last-column]]:(border-right-gray-2)', '[&[data-day-first]]:(border-left-gray-2 rounded-tl)', '[&[data-day-last]]:(border-right-gray-2 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 text-gray-6');
+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_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"]', '[grid-template-columns:auto_1fr_1fr_auto] [grid-template-rows:auto_1fr] gap-2');
+//# sourceMappingURL=DatePicker.js.map

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

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

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker.js';
+declare const meta: {
+    title: string;
+    component: typeof DatePicker;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const Range: Story;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker, DateRangePicker } from './DatePicker.js';
+import { useState } from 'react';
+const meta = {
+    title: 'DatePicker',
+    component: DatePicker,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render() {
+        const [value, setValue] = useState(null);
+        return _jsx(DatePicker, { value: value, onChange: setValue });
+    },
+};
+export const Range = {
+    render() {
+        const [value, setValue] = useState({ start: null, end: null });
+        return _jsx(DateRangePicker, { value: value, onChange: setValue });
+    },
+};
+//# sourceMappingURL=DatePicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,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"}

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

@@ -0,0 +1 @@
+export * from './DatePicker.js';

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

@@ -0,0 +1,2 @@
+export * from './DatePicker.js';
+//# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "type": "module",
   "files": [
     "/dist",
@@ -57,6 +57,7 @@
     "@tiptap/starter-kit": "^2.0.3",
     "@use-gesture/react": "^10.2.27",
     "browser-image-resizer": "^2.4.1",
+    "calendar-blocks": "^0.3.0",
     "classnames": "^2.3.2",
     "color-interpolate": "^1.0.5",
     "color-parse": "^2.0.0",

package/src/components/datePIcker.ts

@@ -0,0 +1 @@
+export * from './datePicker/index.js';

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker, DateRangePicker } from './DatePicker.js';
+import { useState } from 'react';
+
+const meta = {
+	title: 'DatePicker',
+	component: DatePicker,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+	render() {
+		const [value, setValue] = useState<Date | null>(null);
+		return <DatePicker value={value} onChange={setValue} />;
+	},
+};
+
+export const Range: Story = {
+	render() {
+		const [value, setValue] = useState<{
+			start: Date | null;
+			end: Date | null;
+		}>({ start: null, end: null });
+		return <DateRangePicker value={value} onChange={setValue} />;
+	},
+};

package/src/components/datePicker/DatePicker.tsx

@@ -0,0 +1,258 @@
+import {
+	Calendar,
+	CalendarDay as BaseCalendarDay,
+	CalendarDays,
+} from 'calendar-blocks';
+import { Button } from '../button.js';
+import { Icon } from '../icon.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { useCallback, useState } from 'react';
+import { withClassName } from '../../hooks.js';
+import classNames from 'classnames';
+
+export interface DatePickerProps {
+	value: Date | null;
+	onChange: (date: Date | null) => void;
+	className?: string;
+}
+
+export function DatePicker({
+	value,
+	onChange,
+	className,
+	...rest
+}: DatePickerProps) {
+	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',
+	});
+
+	return (
+		<div
+			className={classNames(
+				'flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)]',
+				className,
+			)}
+			{...rest}
+		>
+			<MonthRow>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month - 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowLeftIcon />
+				</MonthButton>
+				<MonthLabel>{monthLabel}</MonthLabel>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month + 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowRightIcon />
+				</MonthButton>
+			</MonthRow>
+			<Calendar
+				displayMonth={month}
+				displayYear={year}
+				value={value}
+				onChange={onChange}
+				onDisplayChange={setDisplay}
+			>
+				<CalendarGrid>
+					<DayLabels />
+					<CalendarDays>
+						{(value) => <CalendarDay value={value} key={value.key} />}
+					</CalendarDays>
+				</CalendarGrid>
+			</Calendar>
+		</div>
+	);
+}
+
+export interface DateRangePickerProps {
+	value: { start: Date | null; end: Date | null };
+	onChange: (value: { start: Date | null; end: Date | null }) => void;
+	className?: string;
+}
+
+export function DateRangePicker({
+	value,
+	onChange,
+	className,
+}: DateRangePickerProps) {
+	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 }: { month: number; year: number }) => {
+			/**
+			 * 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 (
+		<Calendar
+			displayMonth={month}
+			displayYear={year}
+			rangeValue={value}
+			onRangeChange={(range) => onChange(range)}
+			onDisplayChange={onDisplayChange}
+			className={classNames('flex justify-center', className)}
+		>
+			<RangeLayout>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					className="[grid-area:prevMonth]"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month - 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowLeftIcon />
+				</MonthButton>
+				<MonthLabel className="[grid-area:leftMonth]">{monthLabel}</MonthLabel>
+				<MonthLabel className="[grid-area:rightMonth]">
+					{nextMonthLabel}
+				</MonthLabel>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					className="[grid-area:nextMonth]"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month + 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowRightIcon />
+				</MonthButton>
+				<CalendarGrid className="[grid-area:leftGrid]">
+					<DayLabels />
+					<CalendarDays>
+						{(value) => <CalendarDay value={value} key={value.key} />}
+					</CalendarDays>
+				</CalendarGrid>
+				<CalendarGrid className="[grid-area:rightGrid]">
+					<DayLabels />
+					<CalendarDays monthOffset={1}>
+						{(value) => <CalendarDay value={value} key={value.key} />}
+					</CalendarDays>
+				</CalendarGrid>
+			</RangeLayout>
+		</Calendar>
+	);
+}
+
+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 bg-gray-1',
+);
+
+const CalendarDay = withClassName(
+	BaseCalendarDay,
+	'border border-solid border-transparent bg-white mr--1px mb--1px relative rounded',
+	'flex items-center justify-center transition-colors cursor-pointer',
+	'[&[data-highlighted]]:(z-1 outline-accent)',
+	'[&[data-selected]]:(bg-accent-light z-2)',
+	'[&[data-in-range]]:(bg-accent-wash rounded-none z-1)',
+	'[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)',
+	'[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)',
+	'disabled:(opacity-50 cursor-default)',
+	// today dot
+	'[&[data-today]]:before:(content-[""] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-full bg-primary)',
+	'[&[data-top-edge]]:(border-top-gray-2)',
+	'[&[data-bottom-edge]]:(border-bottom-gray-2)',
+	'[&[data-first-column]]:(border-left-gray-2)',
+	'[&[data-last-column]]:(border-right-gray-2)',
+	'[&[data-day-first]]:(border-left-gray-2 rounded-tl)',
+	'[&[data-day-last]]:(border-right-gray-2 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 text-gray-6',
+);
+
+const DayLabels = () => (
+	<>
+		<DayLabel>S</DayLabel>
+		<DayLabel>M</DayLabel>
+		<DayLabel>T</DayLabel>
+		<DayLabel>W</DayLabel>
+		<DayLabel>T</DayLabel>
+		<DayLabel>F</DayLabel>
+		<DayLabel>S</DayLabel>
+	</>
+);
+
+const RangeLayout = withClassName(
+	'div',
+	'grid [grid-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"]',
+	'[grid-template-columns:auto_1fr_1fr_auto] [grid-template-rows:auto_1fr] gap-2',
+);

package/src/components/datePicker/index.ts

@@ -0,0 +1 @@
+export * from './DatePicker.js';