@a-type/ui 3.0.32 → 3.0.34

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,19 @@ 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);
+    }, []);
+    const [disabled] = useState(() => Math.random() < 0.3);
+    return (_jsx(DatePicker.CalendarDay, { value: value, disabled: loading || disabled, 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;IACP,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAEvD,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,IAAI,QAAQ,YACjE,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.34",
   "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)',
+	'[&[data-disabled=true]]:(opacity-50 cursor-not-allowed)',
+	// 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,36 @@ 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);
+	}, []);
+	const [disabled] = useState(() => Math.random() < 0.3);
+
+	return (
+		<DatePicker.CalendarDay value={value} disabled={loading || disabled}>
+			{loading ? <Spinner size={10} /> : value.date.getDate()}
+		</DatePicker.CalendarDay>
+	);
+}