@a-type/ui 0.3.2 → 0.4.0

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 {};

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# 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":""}

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 {};

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

@@ -0,0 +1,2 @@
+export {};
+//# 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":""}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@a-type/ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "files": [
-    "/dist"
+    "/dist",
+    "/src"
   ],
   "exports": {
     "./components/*": {
@@ -56,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/actions/ActionBar.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, Suspense } from 'react';
+import classNames from 'classnames';
+
+export interface ActionBarProps {
+	children: ReactNode;
+	className?: string;
+	wrap?: boolean;
+}
+
+export function ActionBar({
+	children,
+	className,
+	wrap,
+	...rest
+}: ActionBarProps) {
+	return (
+		<Suspense fallback={null}>
+			<div
+				className={classNames(
+					'flex flex-row items-center justify-start w-full overflow-hidden relative h-[max-content] transition-[height] springy',
+					'[&:empty]:height-0',
+					'after:(content-[""] absolute right-0 top-0 bottom-0 w-50px z-1 bg-gradient-to-l from-wash to-transparent] pointer-events-none)',
+					className,
+				)}
+				{...rest}
+			>
+				<div
+					className={classNames(
+						'flex flex-row items-center justify-start w-full overflow-y-hidden overflow-x-auto pr-80px relative h-full [&::-webkit-scrollbar]:display-none',
+						wrap && 'flex-wrap',
+					)}
+				>
+					{children}
+				</div>
+			</div>
+		</Suspense>
+	);
+}

package/src/components/actions/ActionButton.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import classNames from 'classnames';
+import { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
+import { Button, ButtonProps } from '../button/Button.js';
+import { CollapsibleContent, CollapsibleRoot } from '../collapsible.js';
+
+export interface ActionButtonProps extends ButtonProps {
+	icon?: ReactNode;
+	visible?: boolean;
+}
+
+export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+	function ActionButton(
+		{ icon, children, className, visible = true, ...rest },
+		ref,
+	) {
+		// this rather convoluted logic is meant to do:
+		// - when button goes invisible, wait for collapse and then
+		//   stop rendering
+		// - when button goes visible, render immediately and
+		//   set collapsible open next frame.
+		const [render, setRender] = useState(visible);
+		useEffect(() => {
+			if (!visible) {
+				const timeout = setTimeout(() => {
+					setRender(visible);
+				}, 300);
+				return () => clearTimeout(timeout);
+			} else {
+				setRender(visible);
+			}
+		}, [visible]);
+
+		if (!render && !visible) {
+			return null;
+		}
+
+		return (
+			<CollapsibleRoot open={!visible ? false : render}>
+				<CollapsibleContent data-horizontal>
+					<Button
+						ref={ref}
+						size="small"
+						className={classNames(
+							'important:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center h-30px rounded-15px mx-1)',
+							'hover:bg-gray2',
+							className,
+						)}
+						{...rest}
+					>
+						{icon}
+						{children}
+					</Button>
+				</CollapsibleContent>
+			</CollapsibleRoot>
+		);
+	},
+);

package/src/components/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './ActionBar.js';
+export * from './ActionButton.js';

package/src/components/actions.ts

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

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import { CSSProperties } from 'react';
+import { Icon } from '../icon.js';
+
+export interface AvatarProps {
+	className?: string;
+	popIn?: boolean;
+	style?: CSSProperties;
+	imageSrc?: string;
+	name?: string;
+}
+
+export function Avatar({
+	className,
+	popIn = true,
+	imageSrc,
+	name,
+	...rest
+}: AvatarProps) {
+	const empty = !name && !imageSrc;
+	return (
+		<div
+			data-pop={popIn}
+			className={classNames(
+				'layer-components:(flex items-center justify-center rounded-full border-default p-2px overflow-hidden w-24px h-24px select-none relative bg-white flex-shrink-0)',
+				popIn &&
+					'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)',
+				empty && 'layer-components(border-dashed bg-gray2)',
+				className,
+			)}
+			{...rest}
+		>
+			{!empty && <AvatarContent name={name} imageSrc={imageSrc} />}
+			{empty && <Icon name="profile" />}
+		</div>
+	);
+}
+
+function AvatarContent({
+	name,
+	imageSrc,
+}: {
+	name?: string;
+	imageSrc?: string;
+}) {
+	if (imageSrc) {
+		return (
+			<img
+				className="w-full h-full object-cover rounded-full"
+				referrerPolicy="no-referrer"
+				crossOrigin="anonymous"
+				src={imageSrc}
+				alt={`${name ?? 'user'}'s profile picture`}
+			/>
+		);
+	}
+	return (
+		<div className="color-black items-center justify-center flex text-sm font-bold rounded-full">
+			{name?.charAt(0) || '?'}
+		</div>
+	);
+}

package/src/components/avatar/AvatarList.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, createContext, useContext } from 'react';
+import classNames from 'classnames';
+import { Avatar, AvatarProps } from './Avatar.js';
+
+const AvatarListContext = createContext<{ size: number }>({
+	size: 24,
+});
+
+export function AvatarList({
+	children,
+	count,
+	size = 24,
+}: {
+	children: ReactNode;
+	count: number;
+	size?: number;
+}) {
+	const width = count > 0 ? size + (count - 1) * ((size * 2) / 3) : 0;
+
+	return (
+		<AvatarListContext.Provider value={{ size }}>
+			<div
+				className="relative flex-basis-auto"
+				style={{ width, minWidth: width, height: size }}
+			>
+				{children}
+			</div>
+		</AvatarListContext.Provider>
+	);
+}
+
+export function AvatarListItemRoot({
+	index,
+	children,
+	className,
+}: {
+	index: number;
+	children: ReactNode;
+	className?: string;
+}) {
+	const { size } = useContext(AvatarListContext);
+	return (
+		<div
+			className={classNames('absolute', className)}
+			style={{
+				left: index === 0 ? 0 : index * ((size * 2) / 3),
+				zIndex: index,
+				top: 0,
+			}}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AvatarListItem({
+	index,
+	className,
+	...rest
+}: {
+	index: number;
+	popIn?: boolean;
+	className?: string;
+} & AvatarProps) {
+	const { size } = useContext(AvatarListContext);
+	return (
+		<AvatarListItemRoot index={index} className={className}>
+			<Avatar style={{ width: size, height: size }} {...rest} />
+		</AvatarListItemRoot>
+	);
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './Avatar.js';
+export * from './AvatarList.js';