@a-type/ui 3.0.31 → 3.0.33

package/dist/esm/components/forms/EmojiField.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useField } from 'formik';
+import { useState } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
@@ -24,12 +25,15 @@ export function EmojiField(_a) {
     var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
     const [props, _, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Box, { gap: "sm", className: className, children: [_jsxs(Popover, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, Object.assign({ id: id, "aria-label": "Select emoji", size: "small", className: clsx('p-0 transition-color', className) }, rest, { children: _jsx(Button.Icon, { className: "text-[19px] w-touch h-touch flex items-center justify-center", children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Box, { gap: "sm", className: className, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, Object.assign({ id: id, "aria-label": "Select emoji", size: "small", className: clsx('p-0 transition-color', className) }, rest, { children: _jsx(Button.Icon, { className: "text-[19px] w-touch h-touch flex items-center justify-center", children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
                                 tools.setValue(v);
+                                setOpen(false);
                             }, onClear: required
                                 ? undefined
                                 : () => {
                                     tools.setValue('');
+                                    setOpen(false);
                                 }, id: id }) })] }), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
 }
 //# sourceMappingURL=EmojiField.js.map

package/dist/esm/components/forms/EmojiField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAQvD,MAAM,UAAU,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,MAAC,OAAO,eACP,KAAC,OAAO,CAAC,OAAO,IAAC,OAAO,kBACvB,KAAC,MAAM,kBACN,EAAE,EAAE,EAAE,gBACK,cAAc,EACzB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAC9C,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAC,8DAA8D,YACnF,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GACQ,EAClB,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;4BACnB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gCACnB,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAQvD,MAAM,UAAU,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,OAAO,CAAC,OAAO,IAAC,OAAO,kBACvB,KAAC,MAAM,kBACN,EAAE,EAAE,EAAE,gBACK,cAAc,EACzB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAC9C,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAC,8DAA8D,YACnF,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GACQ,EAClB,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}

package/dist/esm/uno/preflights/fonts.d.ts

@@ -1,4 +1,4 @@
 export interface FontsPreflightOptions {
-    interFontLocation: string;
+    interFontLocation?: string;
 }
-export declare const fontsPreflight: ({ interFontLocation }?: FontsPreflightOptions) => import("unocss").Preflight<object>;
+export declare const fontsPreflight: ({ interFontLocation, }?: FontsPreflightOptions) => import("unocss").Preflight<object>;

package/dist/esm/uno/preflights/fonts.js

@@ -1,8 +1,6 @@
 // @unocss-include
 import { preflight } from './_util.js';
-export const fontsPreflight = ({ interFontLocation } = {
-    interFontLocation: 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
-}) => preflight({
+export const fontsPreflight = ({ interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf', } = {}) => preflight({
     getCSS: () => `
 		@font-face {
 			font-family: "Inter";

package/dist/esm/uno/preflights/fonts.js.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC7B,EAAE,iBAAiB,KAA4B;IAC9C,iBAAiB,EAChB,wEAAwE;CACzE,EACA,EAAE,CACH,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;;eAGD,iBAAiB;;;;;EAK9B;CACA,CAAC,CAAC"}
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,iBAAiB,GAAG,wEAAwE,MAClE,EAAE,EAAE,EAAE,CAChC,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;;eAGD,iBAAiB;;;;;EAK9B;CACA,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.0.31",
+  "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>
+	);
+}

package/src/components/datePicker/DatePicker.tsx

@@ -1,72 +1,76 @@
-import {
-	CalendarDay as BaseCalendarDay,
-	Calendar,
-	CalendarDays,
-} from 'calendar-blocks';
-import classNames from 'clsx';
-import { useCallback, useState } from 'react';
-import { withClassName } from '../../hooks.js';
+import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
+import { clsx } from 'clsx';
+import { ReactNode, useState } from 'react';
 import { PaletteName } from '../../uno/index.js';
-import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
+import {
+	CalendarDay,
+	CalendarGrid,
+	DayLabels,
+	MonthButton,
+	MonthLabel,
+	MonthRow,
+} from './Calendar.js';
 
-export interface DatePickerProps {
-	value: Date | null;
-	onChange: (date: Date | null) => void;
-	className?: string;
-	color?: PaletteName;
+function DatePickerMonthControls({}: {}) {
+	const { setDisplayInfo, month, year } = useCalendarContext();
+	const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
+		month: 'long',
+		year: 'numeric',
+	});
+
+	return (
+		<MonthRow>
+			<MonthButton
+				emphasis="ghost"
+				onClick={() =>
+					setDisplayInfo({
+						month: month - 1,
+						year: year,
+					})
+				}
+			>
+				<Icon name="arrowLeft" />
+			</MonthButton>
+			<MonthLabel>{monthLabel}</MonthLabel>
+			<MonthButton
+				emphasis="ghost"
+				onClick={() =>
+					setDisplayInfo({
+						month: month + 1,
+						year: year,
+					})
+				}
+			>
+				<Icon name="arrowRight" />
+			</MonthButton>
+		</MonthRow>
+	);
 }
 
-export function DatePicker({
-	value,
-	onChange,
+function DatePickerRoot({
 	className,
 	color,
+	value,
+	onChange,
+	children,
 	...rest
-}: DatePickerProps) {
+}: DatePickerProps & {
+	children?: ReactNode;
+}) {
 	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(
+			className={clsx(
 				color && `palette-${color}`,
 				'layer-components:(flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)])',
-				className,
 			)}
 			{...rest}
 		>
-			<MonthRow>
-				<MonthButton
-					emphasis="ghost"
-					onClick={() =>
-						setDisplay((cur) => ({
-							month: cur.month - 1,
-							year: cur.year,
-						}))
-					}
-				>
-					<Icon name="arrowLeft" />
-				</MonthButton>
-				<MonthLabel>{monthLabel}</MonthLabel>
-				<MonthButton
-					emphasis="ghost"
-					onClick={() =>
-						setDisplay((cur) => ({
-							month: cur.month + 1,
-							year: cur.year,
-						}))
-					}
-				>
-					<Icon name="arrowRight" />
-				</MonthButton>
-			</MonthRow>
 			<Calendar
 				displayMonth={month}
 				displayYear={year}
@@ -74,188 +78,39 @@ export function DatePicker({
 				onChange={onChange}
 				onDisplayChange={setDisplay}
 			>
-				<CalendarGrid>
-					<DayLabels />
-					<CalendarDays>
-						{(value) => <CalendarDay value={value} key={value.key} />}
-					</CalendarDays>
-				</CalendarGrid>
+				{children}
 			</Calendar>
 		</div>
 	);
 }
 
-export interface DateRangePickerProps {
-	value: { start: Date | null; end: Date | null };
-	onChange: (value: { start: Date | null; end: Date | null }) => void;
+export interface DatePickerProps {
+	value: Date | null;
+	onChange: (date: Date | null) => void;
 	className?: string;
+	color?: PaletteName;
 }
 
-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],
-	);
-
+function DatePickerDefault(props: DatePickerProps) {
 	return (
-		<Calendar
-			displayMonth={month}
-			displayYear={year}
-			rangeValue={value}
-			onRangeChange={(range) => onChange(range)}
-			onDisplayChange={onDisplayChange}
-			className={classNames('flex justify-center', className)}
-		>
-			<RangeLayout>
-				<MonthButton
-					emphasis="ghost"
-					className="[grid-area:prevMonth]"
-					onClick={() =>
-						setDisplay((cur) => ({
-							month: cur.month - 1,
-							year: cur.year,
-						}))
-					}
-				>
-					<Icon name="arrowLeft" />
-				</MonthButton>
-				<MonthLabel className="[grid-area:leftMonth]">{monthLabel}</MonthLabel>
-				<MonthLabel className="[grid-area:rightMonth] !hidden !sm:block">
-					{nextMonthLabel}
-				</MonthLabel>
-				<MonthButton
-					emphasis="ghost"
-					className="[grid-area:nextMonth]"
-					onClick={() =>
-						setDisplay((cur) => ({
-							month: cur.month + 1,
-							year: cur.year,
-						}))
-					}
-				>
-					<Icon name="arrowRight" />
-				</MonthButton>
-				<CalendarGrid className="[grid-area:leftGrid]">
-					<DayLabels />
-					<CalendarDays>
-						{(value) => <CalendarDay value={value} key={value.key} />}
-					</CalendarDays>
-				</CalendarGrid>
-				<CalendarGrid className="[grid-area:rightGrid] !hidden !sm:grid">
-					<DayLabels />
-					<CalendarDays monthOffset={1}>
-						{(value) => <CalendarDay value={value} key={value.key} />}
-					</CalendarDays>
-				</CalendarGrid>
-			</RangeLayout>
-		</Calendar>
+		<DatePickerRoot {...props}>
+			<DatePickerMonthControls />
+			<CalendarGrid>
+				{(value) => <CalendarDay value={value} key={value.key} />}
+			</CalendarGrid>
+		</DatePickerRoot>
 	);
 }
 
-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 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]',
-);
-
-const DayLabel = withClassName(
-	'div',
-	'flex items-center justify-center text-sm color-gray-dark',
-);
-
-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_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,
+});