@a-type/ui 6.1.16 → 6.1.18

package/dist/components/dialog/Dialog.stories.js

@@ -8,7 +8,7 @@ import { Provider } from '../provider/Provider.js';
 import { Select } from '../select/index.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { H1, P } from '../typography/index.js';
-import { Dialog, DialogActions, DialogClose, DialogContent, DialogTitle, DialogTrigger, } from './Dialog.js';
+import { Dialog } from './Dialog.js';
 const meta = {
     title: 'Components/Dialog',
     component: Dialog,
@@ -23,22 +23,23 @@ function DummyContent() {
 }
 export const Default = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsxs(Box, { gap: true, children: [_jsx(Input, { placeholder: "Type something..." }), _jsx(Button, { emphasis: "primary", children: "Submit" })] }), _jsxs(DialogActions, { children: [_jsx(DialogClose, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsxs(Box, { gap: true, children: [_jsx(Input, { placeholder: "Type something..." }), _jsx(Button, { emphasis: "primary", children: "Submit" })] }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
     },
 };
 export const Small = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(DialogActions, { children: _jsx(DialogClose, {}) })] })] })),
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, {}) })] })] })),
     },
 };
 export const NoSheet = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { disableSheet: true, children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DialogActions, { children: _jsx(DialogClose, {}) })] })] })),
+        disableSheet: true,
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, {}) })] })] })),
     },
 };
 export const Positioned = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { style: { bottom: 0, top: 'auto' }, children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DialogActions, { children: _jsx(DialogClose, {}) })] })] })),
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { style: { bottom: 0, top: 'auto' }, children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, {}) })] })] })),
     },
 };
 export const VirtualKeyboard = {
@@ -52,7 +53,7 @@ export const VirtualKeyboard = {
                 document.body.style.removeProperty('--mock-virtual-keyboard-height');
             }
         }, [keyboard]);
-        return (_jsxs(Provider, { virtualKeyboardBehavior: "overlay", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(Input, {}), _jsxs(DialogActions, { children: [_jsx(DialogClose, {}), _jsx(Button, { onClick: () => setKeyboard((v) => !v), children: "Toggle fake kb" })] })] })] }), _jsx("div", { className: "bg-neutral-ink", style: {
+        return (_jsxs(Provider, { virtualKeyboardBehavior: "overlay", children: [_jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(Input, {}), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, {}), _jsx(Button, { onClick: () => setKeyboard((v) => !v), children: "Toggle fake kb" })] })] })] }), _jsx("div", { className: "bg-neutral-ink", style: {
                         position: 'fixed',
                         bottom: 0,
                         left: 0,
@@ -65,7 +66,7 @@ export const VirtualKeyboard = {
 };
 export const MultiNested = {
     render() {
-        return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DummyContent, {}), _jsxs(Select, { value: "", children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: null, children: "Select an option" }), _jsx(Select.Item, { value: "option1", children: "Option 1" }), _jsx(Select.Item, { value: "option2", children: "Option 2" }), _jsx(Select.Item, { value: "option3", children: "Option 3" })] })] }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open nested" }), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Nested dialog" }), _jsx(Tooltip, { content: "This is a tooltip", children: _jsx(Button, { children: "Hover me" }) }), _jsx(DummyContent, {}), _jsx(DummyContent, {})] })] })] })] }));
+        return (_jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsxs(Select, { value: "", children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: null, children: "Select an option" }), _jsx(Select.Item, { value: "option1", children: "Option 1" }), _jsx(Select.Item, { value: "option2", children: "Option 2" }), _jsx(Select.Item, { value: "option3", children: "Option 3" })] })] }), _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open nested" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Nested dialog" }), _jsx(Tooltip, { content: "This is a tooltip", children: _jsx(Button, { children: "Hover me" }) }), _jsx(DummyContent, {}), _jsx(DummyContent, {})] })] })] })] }));
     },
 };
 export const Selectable = {

package/dist/components/dialog/Dialog.stories.js.map

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

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,25 @@
+import { Drawer as BaseDrawer, DrawerCloseProps, DrawerPopupProps, DrawerRootProps, DrawerTriggerProps } from '@base-ui/react/drawer';
+import { Ref } from 'react';
+export interface DrawerContentProps extends DrawerPopupProps {
+    disableDefaultClose?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    innerClassName?: string;
+}
+export interface DrawerProps extends Omit<DrawerRootProps, 'children' | 'swipeDirection'> {
+    children: React.ReactNode;
+}
+declare function DrawerClose({ children, render, ...props }: DrawerCloseProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: (({ children, defaultSnapPoint, snapPoints, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
+    Trigger: ({ render, ...props }: DrawerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ ref, children, className, disableDefaultClose, innerClassName, ...props }: DrawerContentProps) => import("react/jsx-runtime").JSX.Element;
+    Title: import("react").FunctionComponent<import("@base-ui/react/drawer").DrawerTitleProps>;
+    Description: import("react").FunctionComponent<import("@base-ui/react/drawer").DrawerDescriptionProps>;
+    Close: typeof DrawerClose;
+    Actions: import("react").FunctionComponent<import("../box/Box.js").BoxProps>;
+    Unstyled: DrawerParts;
+    createHandle: typeof BaseDrawer.createHandle;
+};
+export type DrawerParts = typeof BaseDrawer;
+export {};

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,102 @@
+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 } from "react/jsx-runtime";
+import { Drawer as BaseDrawer, } from '@base-ui/react/drawer';
+import clsx from 'clsx';
+import { useCallback, useRef } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/Icon.js';
+import { useParticles } from '../particles/ParticleContext.js';
+import { ScrollArea } from '../scrollArea/ScrollArea.js';
+import cls from './Drawer.module.css';
+const DrawerOverlay = withClassName(BaseDrawer.Backdrop, cls.overlay);
+const StyledPopup = withClassName(BaseDrawer.Popup, cls.popup);
+const DrawerContent = function DrawerContent(_a) {
+    var { ref, children, className, disableDefaultClose, innerClassName } = _a, props = __rest(_a, ["ref", "children", "className", "disableDefaultClose", "innerClassName"]);
+    const particles = useParticles();
+    const wasOpenRef = useRef(false);
+    const openRef = useCallback((element) => {
+        if (!wasOpenRef.current && (element === null || element === void 0 ? void 0 : element.hasAttribute('data-open'))) {
+            wasOpenRef.current = true;
+            setTimeout(() => {
+                particles === null || particles === void 0 ? void 0 : particles.addParticles(particles.elementExplosion({
+                    count: 20,
+                    margin: 40,
+                    borders: ['top'],
+                    color: [
+                        {
+                            space: 'rgb',
+                            values: [0, 0, 0],
+                            opacity: 0.02,
+                        },
+                        {
+                            space: 'rgb',
+                            values: [0, 0, 0],
+                            opacity: 0,
+                        },
+                    ],
+                    element,
+                    startRadius: 15,
+                    endRadius: 0,
+                    lifespan: 1000,
+                    force: 0.5,
+                    drag: 0.01,
+                    forceFuzz: 0.5,
+                    angleFuzz: 0.1,
+                }));
+            }, 180);
+        }
+        else if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('data-open'))) {
+            wasOpenRef.current = false;
+        }
+    }, [particles]);
+    const finalRef = useMergedRef(ref, openRef);
+    return (_jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerOverlay, {}), _jsx(BaseDrawer.Viewport, { className: cls.viewport, children: _jsxs(StyledPopup, Object.assign({ ref: finalRef }, props, { className: className, children: [!disableDefaultClose && _jsx(DrawerDefaultClose, {}), _jsx(DrawerSwipeHandle, {}), _jsx(ScrollArea, { direction: "vertical", className: cls.contentScrollArea, children: _jsx(ScrollArea.Content, { className: clsx(cls.contentScrollAreaContent, innerClassName), style: { minWidth: undefined }, children: children }) })] })) })] }));
+};
+function DrawerSwipeHandle(_a) {
+    var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
+    return (_jsx("div", Object.assign({ ref: ref }, props, { className: clsx(cls.swipeHandle, className), children: _jsx("div", { className: cls.swipeHandleBar }) })));
+}
+function DrawerDefaultClose(_a) {
+    var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
+    return (_jsx(DrawerClose, Object.assign({ className: clsx(cls.close, className), "aria-label": "Close drawer", ref: ref }, props, { render: _jsx(Button, { emphasis: "ghost", size: "small" }), children: _jsx(Icon, { name: "x" }) })));
+}
+const DrawerTitle = withClassName(BaseDrawer.Title, cls.title);
+const DrawerDescription = withClassName(BaseDrawer.Description, cls.description);
+const defaultSnapPoints = [0.75, 1];
+const DrawerRoot = (_a) => {
+    var { children, defaultSnapPoint = 0.5, snapPoints = defaultSnapPoints } = _a, props = __rest(_a, ["children", "defaultSnapPoint", "snapPoints"]);
+    return (_jsx(BaseDrawer.Root, Object.assign({ swipeDirection: "down", defaultSnapPoint: defaultSnapPoint, snapPoints: snapPoints }, props, { children: _jsx(BaseDrawer.VirtualKeyboardProvider, { children: children }) })));
+};
+const DrawerTrigger = (_a) => {
+    var { render } = _a, props = __rest(_a, ["render"]);
+    return (_jsx(BaseDrawer.Trigger, Object.assign({ render: render || _jsx(Button, {}) }, props)));
+};
+function DrawerClose(_a) {
+    var { children, render } = _a, props = __rest(_a, ["children", "render"]);
+    return (_jsx(BaseDrawer.Close, Object.assign({ render: render !== null && render !== void 0 ? render : _jsx(Button, { emphasis: "default" }) }, props, { children: children !== null && children !== void 0 ? children : 'Close' })));
+}
+const DrawerActions = withClassName(Box, cls.actions);
+export const Drawer = Object.assign(DrawerRoot, {
+    Trigger: DrawerTrigger,
+    Content: DrawerContent,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+    Close: DrawerClose,
+    Actions: DrawerActions,
+    Unstyled: BaseDrawer,
+    createHandle: BaseDrawer.createHandle,
+});
+//# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

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

package/dist/components/drawer/Drawer.module.css

@@ -0,0 +1,182 @@
+@layer components {.overlay {
+	position: fixed;
+	inset: 0;
+	@apply --mx-shadow;
+	@apply --mx-bg(var(--m-gray-ink));
+	@apply --mx-bg-faded(5%);
+	border-top: var(--m-lw) solid var(--m-gray);
+	transition: all var(--m-dur) var(--m-ease);
+	backdrop-filter: blur(2px);
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}
+
+.viewport {
+	--bleed: 100px;
+
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	touch-action: none;
+
+	&::after {
+		content: '';
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		height: var(--bleed);
+		@apply --mx-bg(var(--m-surface-ambient-bg));
+		pointer-events: none;
+	}
+
+	&[data-closed]::after {
+		opacity: 0;
+	}
+}
+
+.popup {
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+	max-width: unset;
+	width: 100%;
+	max-height: 85svh;
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	touch-action: none;
+
+	overflow: visible;
+
+	transition:
+		transform var(--m-dur) var(--m-ease),
+		opacity var(--m-dur) var(--m-ease);
+
+	--shadow-dir: -1;
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
+		var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
+
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-gray-heavy));
+
+	border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
+	border-bottom-width: 0;
+	padding-bottom: max(
+		0px,
+		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
+	);
+
+	/* Use drawer's built-in swipe movement for animation */
+	transform: translateY(
+		calc(
+			var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)
+		)
+	);
+	will-change: transform;
+
+	/* Disable transitions while swiping so movement is immediate */
+	&[data-swiping] {
+		transition: none;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		transform: translateY(100%);
+		padding-bottom: 0;
+	}
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+	}
+}
+
+.contentScrollArea {
+	width: 100%;
+	height: 100%;
+	flex: 1 1 auto;
+	min-height: 0;
+	overscroll-behavior: contain;
+}
+
+.contentScrollAreaContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-sp-md);
+	padding: var(--m-surface-p);
+	overscroll-behavior: contain;
+}
+
+.swipeHandle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	cursor: grab;
+	touch-action: none;
+	padding-block: var(--m-sp-lg);
+	user-select: none;
+	flex-shrink: 0;
+}
+
+.swipeHandleBar {
+	height: --fn-literal(4px);
+	width: 20%;
+	@apply --mx-bg(var(--m-gray));
+	border-radius: var(--m-rd-lg);
+}
+
+.close {
+	position: absolute;
+	right: var(--m-sp-sm);
+	top: var(--m-sp-sm);
+	z-index: 101;
+	display: flex;
+}
+
+.title {
+	@apply --mx-fg(var(--m-gray-ink));
+	font-size: var(--m-prose-primary-size);
+	font-weight: var(--m-prose-primary-weight);
+	line-height: var(--m-prose-primary-lineHeight);
+	margin-block-end: var(--m-sp-xs);
+	margin-block-start: 0;
+}
+
+.description {
+	@apply --mx-fg(var(--m-gray-heavy));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	margin: 0;
+	margin-block-end: var(--m-sp-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: var(--m-sp-md);
+	z-index: 100;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: end;
+	align-self: end;
+	padding-bottom: --fn-literal(1px);
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
+		var(--m-shadow-md-spread) var(--m-gray-paper);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-bg-faded(50%);
+	margin-block-start: var(--m-sp-md);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-surface-rd);
+	transition: bottom var(--m-dur) var(--m-ease);
+}
+}

package/dist/components/drawer/Drawer.stories.d.ts

@@ -0,0 +1,7 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Drawer } from './Drawer.js';
+declare const meta: any;
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+export declare const Default: Story;
+export declare const NoDefaultClose: Story;

package/dist/components/drawer/Drawer.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../button/index.js';
+import { H1, P } from '../typography/index.js';
+import { Drawer } from './Drawer.js';
+const meta = {
+    title: 'Components/Drawer',
+    component: Drawer,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+function DummyContent() {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(H1, { children: "Some content" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Button, { disabled: true, color: "primary", children: "Click me" })] }));
+}
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { children: [_jsx(Drawer.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsxs(Drawer.Actions, { children: [_jsx(Drawer.Close, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
+    },
+};
+export const NoDefaultClose = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { disableDefaultClose: true, children: [_jsx(Drawer.Title, { children: "No default close" }), _jsx(DummyContent, {}), _jsx(Drawer.Actions, { children: _jsx(Drawer.Close, {}) })] })] })),
+    },
+};
+//# sourceMappingURL=Drawer.stories.js.map

package/dist/components/drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAQ;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,SAAS,YAAY;IACpB,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACvD,KAAC,EAAE,+BAAkB,EACrB,KAAC,CAAC,8NAIE,EACJ,KAAC,MAAM,IAAC,QAAQ,QAAC,KAAK,EAAC,SAAS,yBAEvB,IACJ,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,8BAA2B,EACxC,KAAC,YAAY,KAAG,EAChB,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,KAAG,EAChB,KAAC,MAAM,IAAC,QAAQ,EAAC,SAAS,uBAAgB,IAC1B,IACD,IACf,CACH;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,IAAC,mBAAmB,mBAClC,KAAC,MAAM,CAAC,KAAK,mCAAgC,EAC7C,KAAC,YAAY,KAAG,EAChB,KAAC,MAAM,CAAC,OAAO,cACd,KAAC,MAAM,CAAC,KAAK,KAAG,GACA,IACD,IACf,CACH;KACD;CACD,CAAC"}

package/dist/components/drawer/index.d.ts

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

package/dist/components/drawer/index.js

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

package/dist/components/drawer/index.js.map

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

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
 export * from './dialog/index.js';
+export * from './drawer/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';

package/dist/components/index.js

@@ -14,6 +14,7 @@ export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
 export * from './dialog/index.js';
+export * from './drawer/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/dist/hooks/withContextVariant.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a context and HOC which swaps between two components
+ * based on a contextual value
+ */
+export declare function createWithContextVariant(): {
+    Context: import("react").Context<boolean>;
+    withContextVariant: <P extends object>(TrueComponent: React.ComponentType<P>, FalseComponent: React.ComponentType<P>) => (props: P) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/hooks/withContextVariant.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * Creates a context and HOC which swaps between two components
+ * based on a contextual value
+ */
+export function createWithContextVariant() {
+    const Context = createContext(false);
+    function withContextVariant(TrueComponent, FalseComponent) {
+        return function WithContextVariant(props) {
+            const contextValue = useContext(Context);
+            const Component = contextValue ? TrueComponent : FalseComponent;
+            return _jsx(Component, Object.assign({}, props));
+        };
+    }
+    return {
+        Context,
+        withContextVariant,
+    };
+}
+//# sourceMappingURL=withContextVariant.js.map

package/dist/hooks/withContextVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withContextVariant.js","sourceRoot":"","sources":["../../src/hooks/withContextVariant.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,MAAM,UAAU,wBAAwB;IACvC,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,kBAAkB,CAC1B,aAAqC,EACrC,cAAsC;QAEtC,OAAO,SAAS,kBAAkB,CAAC,KAAQ;YAC1C,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;YACzC,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;YAChE,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;QACjC,CAAC,CAAC;IACH,CAAC;IAED,OAAO;QACN,OAAO;QACP,kBAAkB;KAClB,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.1.16",
+  "version": "6.1.18",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -45,7 +45,7 @@
     "@base-ui/react": "^1.6.0",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",
-    "calendar-blocks": "^0.4.0",
+    "calendar-blocks": "^0.5.3",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "formik": "^2.4.6",

package/src/components/button/ConfirmedButton.tsx

@@ -1,12 +1,5 @@
 import { useCallback, useState } from 'react';
-import {
-	Dialog,
-	DialogActions,
-	DialogClose,
-	DialogContent,
-	DialogTitle,
-	DialogTrigger,
-} from '../dialog/index.js';
+import { Dialog } from '../dialog/index.js';
 import { P } from '../typography/index.js';
 import { Button, ButtonProps } from './Button.js';
 
@@ -55,14 +48,14 @@ export function ConfirmedButton({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger render={<Button />} {...rest} />
-			<DialogContent>
-				<DialogTitle>{confirmTitle}</DialogTitle>
+			<Dialog.Trigger render={<Button />} {...rest} />
+			<Dialog.Content>
+				<Dialog.Title>{confirmTitle}</Dialog.Title>
 				<P>{confirmText}</P>
-				<DialogActions>
-					<DialogClose render={<Button emphasis="default" />}>
+				<Dialog.Actions>
+					<Dialog.Close render={<Button emphasis="default" />}>
 						{cancelAction}
-					</DialogClose>
+					</Dialog.Close>
 					<Button
 						loading={loading}
 						onClick={confirm}
@@ -71,8 +64,8 @@ export function ConfirmedButton({
 					>
 						{confirmAction}
 					</Button>
-				</DialogActions>
-			</DialogContent>
+				</Dialog.Actions>
+			</Dialog.Content>
 		</Dialog>
 	);
 }

package/src/components/datePicker/DateRangePicker.tsx

@@ -71,7 +71,24 @@ function DateRangePickerRoot({
 	}));
 
 	const onDisplayChange = useCallback(
-		({ month: newMonth, year: newYear }: { month: number; year: number }) => {
+		(
+			{ month: newMonth, year: newYear }: { month: number; year: number },
+			source: 'keyboard' | 'programmatic',
+		) => {
+			/**
+			 * 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 (source === 'keyboard' && newMonth === month + 1 && newYear === year) {
+				return;
+			}
 			setDisplay({
 				month: newMonth,
 				year: newYear,