@a-type/ui 5.0.22 → 6.0.0

package/dist/components/datePicker/datePicker.module.css

@@ -0,0 +1,7 @@
+.root {
+	width: --fn-literal(calc(var(--day-size, 32px) * 7));
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}

package/dist/components/datePicker/dateRangePicker.module.css

@@ -0,0 +1,38 @@
+.root {
+	display: flex;
+	justify-content: center;
+}
+
+.rangeLayout {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		'prevMonth leftMonth nextMonth'
+		'leftGrid leftGrid leftGrid';
+	grid-template-rows: auto 1fr;
+	gap: var(--m-spacing-sm);
+
+	@media (min-width: 640px) {
+		grid-template-columns: auto 1fr 1fr auto;
+		grid-template-areas:
+			'prevMonth leftMonth rightMonth nextMonth'
+			'leftGrid leftGrid rightGrid rightGrid';
+	}
+}
+
+/* Elements only visible at sm+ breakpoint */
+.smOnly {
+	display: none;
+
+	@media (min-width: 640px) {
+		display: block;
+	}
+}
+
+.smOnlyGrid {
+	display: none;
+
+	@media (min-width: 640px) {
+		display: grid;
+	}
+}

package/dist/components/datePicker/index.js

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

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

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

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,260 @@
+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 { Dialog as BaseDialog, } from '@base-ui/react/dialog';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { useDrag } from '@use-gesture/react';
+import clsx from 'clsx';
+import { createContext, useCallback, useContext, useRef, useState, } from 'react';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/Icon.js';
+import { useParticles } from '../particles/index.js';
+import menuCls from '../primitives/menus.module.css';
+import { useConfig } from '../provider/Provider.js';
+import { ScrollArea } from '../scrollArea/ScrollArea.js';
+import { selectTriggerClassName } from '../select/index.js';
+import cls from './Dialog.module.css';
+const StyledOverlay = withClassName(BaseDialog.Backdrop, cls.overlay);
+const StyledContent = withClassName(BaseDialog.Popup, cls.content);
+function sheetCloseGestureLogic(swipeY, dy, last, close, content) {
+    const contentHeight = content.clientHeight;
+    const shouldClose = last && (swipeY === 1 || dy > contentHeight / 2);
+    if (shouldClose) {
+        close();
+    }
+    const gestureY = last ? (shouldClose ? -1000 : 0) : -Math.max(0, dy);
+    content.style.setProperty('--gesture-y', `${gestureY}px`);
+    content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
+}
+// filter out gestures that are within scrollable descendants
+// if those elements are not scrolled to the top already
+function filterScrollables(target, root, dy, vy) {
+    // always allow upward swipes
+    if (vy < 0) {
+        return false;
+    }
+    let cur = target;
+    while (cur) {
+        if (cur === root)
+            return false;
+        cur = cur.parentElement;
+        if (cur &&
+            cur.scrollHeight > cur.clientHeight &&
+            cur.scrollTop !== 0 &&
+            vy >= 0)
+            return true;
+    }
+    return false;
+}
+const SWIPE_VELOCITY_THRESHOLD = 1.5;
+export const Content = function Content(_a) {
+    var { ref, children, width, outerClassName, className, disableSheet, disableDefaultClose, innerClassName } = _a, props = __rest(_a, ["ref", "children", "width", "outerClassName", "className", "disableSheet", "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;
+            const matchesSmall = !disableSheet &&
+                typeof window !== 'undefined' &&
+                !window.matchMedia('(min-width:600px)').matches;
+            if (!matchesSmall)
+                return;
+            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, disableSheet]);
+    const { gestureRef, onTouchStart, onTouchMove, onTouchEnd } = useDialogInherentSwipe({ disableSheet });
+    const finalRef = useMergedRef(ref, openRef, gestureRef);
+    const { virtualKeyboardBehavior } = useConfig();
+    return (_jsxs(BaseDialog.Portal, { children: [_jsx(StyledOverlay, {}), _jsxs(StyledContent, Object.assign({ "data-dialog-content": true, ref: finalRef }, props, { onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onTouchCancel: onTouchEnd, "data-disable-sheet": disableSheet ? 'true' : undefined, "data-keyboard-behavior": virtualKeyboardBehavior, "data-width": width, className: clsx(outerClassName || className), children: [!disableDefaultClose && (_jsx(DialogDefaultClose, { showOnMobile: disableSheet })), !disableSheet && _jsx(DialogSwipeHandle, {}), _jsx(ScrollArea, { direction: "vertical", className: cls.contentScrollArea, children: _jsx(ScrollArea.Content, { className: clsx(cls.contentScrollAreaContent, innerClassName), style: {
+                                minWidth: undefined,
+                            }, children: children }) })] }))] }));
+};
+function useDialogInherentSwipe({ disableSheet }) {
+    const gestureRef = useRef(null);
+    const close = useContext(DialogCloseContext);
+    const isSmall = useMediaQuery('(max-width: 640px)');
+    const gestureState = useRef({
+        sy: 0,
+        dy: 0,
+        vy: 0,
+        active: false,
+        timeStamp: 0,
+        filtered: false,
+    });
+    const onTouchStart = useCallback((event) => {
+        if (!isSmall || disableSheet)
+            return;
+        const touch = event.touches[0];
+        gestureState.current.sy = touch.clientY;
+        gestureState.current.timeStamp = event.timeStamp;
+    }, [isSmall, disableSheet]);
+    const onTouchMove = useCallback((event) => {
+        var _a;
+        if (!isSmall || disableSheet)
+            return;
+        const touch = event.touches[0];
+        const dy = touch.clientY - gestureState.current.sy;
+        const vy = (dy - gestureState.current.dy) /
+            (event.timeStamp -
+                ((_a = gestureState.current.timeStamp) !== null && _a !== void 0 ? _a : event.timeStamp - 1));
+        gestureState.current.dy = dy;
+        gestureState.current.vy = vy;
+        if (gestureState.current.filtered ||
+            filterScrollables(event.target, gestureRef.current, dy, vy)) {
+            gestureState.current.filtered = true;
+            return;
+        }
+        if (!gestureState.current.active) {
+            gestureState.current.active = true;
+            gestureState.current.sy = touch.clientY;
+        }
+        if (gestureRef.current && gestureRef.current.scrollTop < 3) {
+            sheetCloseGestureLogic(Math.abs(vy) > SWIPE_VELOCITY_THRESHOLD ? Math.sign(vy) : 0, dy, false, close, gestureRef.current);
+        }
+        gestureState.current.timeStamp = event.timeStamp;
+    }, [isSmall, disableSheet, close]);
+    const onTouchEnd = useCallback((event) => {
+        if (gestureState.current.active && gestureRef.current) {
+            const { vy, dy } = gestureState.current;
+            sheetCloseGestureLogic(Math.abs(vy) > SWIPE_VELOCITY_THRESHOLD ? Math.sign(vy) : 0, dy, true, close, gestureRef.current);
+        }
+        gestureState.current.active = false;
+        gestureState.current.filtered = false;
+        gestureState.current.timeStamp = event.timeStamp;
+        gestureState.current.vy = 0;
+        gestureState.current.dy = 0;
+        gestureState.current.sy = 0;
+    }, [close]);
+    return { gestureRef, onTouchStart, onTouchMove, onTouchEnd };
+}
+export function DialogSwipeHandle(_a) {
+    var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
+    const close = useContext(DialogCloseContext);
+    const innerRef = useRef(null);
+    useDrag(({ swipe: [, swipeY], movement: [, dy], last }) => {
+        const content = findParentDialogContent(innerRef.current);
+        if (!content)
+            return;
+        sheetCloseGestureLogic(swipeY, dy, last, close, content);
+    }, {
+        target: innerRef,
+        axis: 'y',
+    });
+    const finalRef = useMergedRef(ref, innerRef);
+    return (_jsx("div", Object.assign({ ref: finalRef }, props, { className: clsx(cls.swipeHandle, className), children: _jsx("div", { className: cls.swipeHandleBar }) })));
+}
+function findParentDialogContent(element) {
+    if (!element)
+        return null;
+    if (element.getAttribute('data-dialog-content'))
+        return element;
+    return findParentDialogContent(element.parentElement);
+}
+const DialogCloseContext = createContext(() => { });
+export const DialogDefaultClose = function DialogDefaultClose(_a) {
+    var { ref, className, showOnMobile } = _a, props = __rest(_a, ["ref", "className", "showOnMobile"]);
+    return (_jsx(DialogClose, Object.assign({ className: clsx(cls.close, className), "data-show-on-mobile": showOnMobile, "aria-label": "Close dialog", ref: ref }, props, { render: _jsx(Button, { emphasis: "ghost", size: "small" }), children: _jsx(Icon, { name: "x" }) })));
+};
+const StyledTitle = withClassName(BaseDialog.Title, cls.title);
+const StyledDescription = withClassName(BaseDialog.Description, cls.description);
+// Exports
+const DialogRoot = (props) => {
+    var _a;
+    const [innerOpen, innerOnOpenChange] = useState(props.defaultOpen || false);
+    const open = (_a = props.open) !== null && _a !== void 0 ? _a : innerOpen;
+    const onOpenChange = useCallback((open, eventDetails) => {
+        var _a;
+        innerOnOpenChange(open);
+        (_a = props.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(props, open, eventDetails);
+    }, [props.onOpenChange]);
+    const close = useCallback(() => {
+        onOpenChange(false, {
+            allowPropagation() { },
+            cancel() { },
+            isCanceled: false,
+            event: null,
+            isPropagationAllowed: true,
+            preventUnmountOnClose() { },
+            reason: 'imperative-action',
+            trigger: undefined,
+        });
+    }, [onOpenChange]);
+    return (_jsx(DialogCloseContext.Provider, { value: close, children: _jsx(BaseDialog.Root, Object.assign({}, props, { open: open, onOpenChange: onOpenChange })) }));
+};
+export const DialogTrigger = (_a) => {
+    var { render } = _a, props = __rest(_a, ["render"]);
+    return (_jsx(BaseDialog.Trigger, Object.assign({ render: render || _jsx(Button, {}) }, props)));
+};
+export const DialogContent = Content;
+export const DialogTitle = StyledTitle;
+export const DialogDescription = StyledDescription;
+export const DialogClose = function DialogClose(_a) {
+    var { children, render } = _a, props = __rest(_a, ["children", "render"]);
+    return (_jsx(BaseDialog.Close, Object.assign({ render: render !== null && render !== void 0 ? render : _jsx(Button, { emphasis: "default" }) }, props, { children: children !== null && children !== void 0 ? children : 'Close' })));
+};
+export const DialogActions = withClassName('div', cls.actions);
+export const DialogSelectTrigger = function DialogSelectTrigger(_a) {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsxs(BaseDialog.Trigger, Object.assign({ className: clsx(selectTriggerClassName, className) }, props, { children: [_jsx("span", { children: children }), _jsx(Icon, { name: "chevron" })] })));
+};
+export const DialogSelectList = withClassName(BaseRadioGroup, menuCls.itemList);
+export const DialogSelectItemRoot = withClassName(BaseRadio.Root, menuCls.item);
+export const DialogSelectItem = function DialogSelectItem(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsxs(DialogSelectItemRoot, Object.assign({}, props, { children: [_jsx("span", { className: menuCls.itemText, children: children }), _jsx(BaseRadio.Indicator, { className: menuCls.itemIndicator, children: _jsx(Icon, { name: "check" }) })] })));
+};
+export const Dialog = Object.assign(DialogRoot, {
+    Trigger: DialogTrigger,
+    Content,
+    Title: StyledTitle,
+    Description: StyledDescription,
+    Close: DialogClose,
+    Actions: DialogActions,
+    SelectTrigger: DialogSelectTrigger,
+    SelectList: DialogSelectList,
+    SelectItem: DialogSelectItem,
+    Unstyled: BaseDialog,
+});
+//# sourceMappingURL=Dialog.js.map

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

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

package/dist/components/dialog/Dialog.module.css

@@ -0,0 +1,188 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	@apply --mx-shadow;
+	/* --mx-shadow-value: inset 0 30px 60px 0px
+		--fn-color-faded(var(--m-color-main-ink), 20%); */
+	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg-faded(5%);
+	border-top: var(--m-lineWidth) solid var(--m-color-neutral);
+	transition: all var(--m-duration) var(--m-easing);
+	backdrop-filter: blur(2px);
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}
+
+.content {
+	pointer-events: auto;
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	overflow: clip;
+	transition: all var(--m-duration) var(--m-easing);
+	--shadow-dir: 1;
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-xl-y))
+		var(--m-shadow-xl-blur) var(--m-shadow-xl-spread) var(--m-shadow-xl-color);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-color-neutral-heavy));
+
+	left: 50%;
+	top: 50%;
+	max-height: 85vh;
+	max-width: 450px;
+	width: 90vw;
+	border-radius: var(--m-surface-radius);
+	transform: translate3d(-50%, -50%, 0);
+	will-change: transform, opacity;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+		transform: translate3d(-50%, -45%, 0) scale(0.95);
+	}
+
+	&:not([data-disable-sheet='true']) {
+		@media (max-width: 600px) {
+			--shadow-dir: -1;
+			top: auto;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			max-width: unset;
+			height: min-content;
+			width: 100vw;
+			border-radius: var(--m-surface-radius) var(--m-surface-radius) 0 0;
+			border-bottom-width: 0;
+			transform: translate(0, 0);
+			padding-bottom: env(safe-area-inset-bottom);
+			padding-top: var(--m-spacing-lg);
+
+			&[data-starting-style],
+			&[data-ending-style] {
+				opacity: 0;
+				transform: translate3d(0, 100%, 0) scale(0.98);
+			}
+
+			&[data-width='lg'] {
+				max-width: 800px;
+			}
+			&[data-width='md'] {
+				max-width: 600px;
+			}
+			&[data-width='sm'] {
+				max-width: 300px;
+			}
+
+			&[data-keyboard-behavior='overlay'] {
+				bottom: calc(
+					var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)) +
+						var(--gesture-y, 0px)
+				);
+				max-height: calc(
+					95vh -
+						var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px))
+				);
+			}
+			&[data-keyboard-behavior='displace'] {
+				bottom: calc(
+					var(--viewport-bottom-offset, 0px) + var(--gesture-y, 0px)
+				);
+				max-height: calc(0.85 * var(--viewport-height, 100vh));
+			}
+		}
+	}
+}
+
+.contentScrollArea {
+	width: 100%;
+	height: 100%;
+}
+
+.contentScrollAreaContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-md);
+	padding: var(--m-surface-padding);
+}
+
+.swipeHandle {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%) scale(1);
+	width: 20%;
+	cursor: grab;
+	will-change: transform;
+	touch-action: none;
+	padding-block: var(--m-spacing-sm);
+	z-index: 1;
+
+	@media (min-width: 600px) {
+		display: none;
+	}
+}
+.swipeHandleBar {
+	height: 4px;
+	width: 100%;
+	@apply --mx-bg(var(--m-color-neutral));
+	border-radius: var(--m-radius-lg);
+}
+
+.close {
+	position: absolute;
+	right: var(--m-spacing-sm);
+	top: var(--m-spacing-sm);
+	z-index: 101;
+	display: flex;
+
+	&[data-show-on-mobile='false'] {
+		@media (max-width: 600px) {
+			display: none;
+		}
+	}
+}
+
+.title {
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-text-primary-size);
+	font-weight: var(--m-text-primary-weight);
+	line-height: var(--m-text-primary-lineHeight);
+	margin-block-end: var(--m-spacing-xs);
+	margin-block-start: 0;
+}
+
+.description {
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	margin: 0;
+	margin-block-end: var(--m-spacing-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: var(--m-spacing-md);
+	z-index: 100;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: end;
+	align-self: end;
+	padding-bottom: 1px;
+	@apply --mx-shadow;
+	/* override blur in case user turned it off */
+	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
+		var(--m-shadow-md-spread) var(--m-color-neutral-paper);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-bg-faded(50%);
+	margin-block-start: var(--m-spacing-md);
+	gap: var(--m-spacing-sm);
+	border-radius: var(--m-surface-radius);
+}

package/dist/components/dialog/Dialog.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Dialog } from './Dialog.js';
+declare const meta: {
+    title: string;
+    component: ((props: import("./Dialog.js").DialogProps) => import("react/jsx-runtime").JSX.Element) & {
+        Trigger: ({ render, ...props }: import("@base-ui/react").AlertDialogTriggerProps) => import("react/jsx-runtime").JSX.Element;
+        Content: ({ ref, children, width, outerClassName, className, disableSheet, disableDefaultClose, innerClassName, ...props }: import("./Dialog.js").DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+        Title: import("react").FunctionComponent<Omit<import("@base-ui/react").AlertDialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+        Description: import("react").FunctionComponent<Omit<import("@base-ui/react").AlertDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+        Close: ({ children, render, ...props }: import("@base-ui/react").AlertDialogCloseProps & {
+            ref?: React.Ref<HTMLButtonElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Actions: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+        SelectTrigger: ({ children, className, ...props }: import("@base-ui/react").AlertDialogTriggerProps & {
+            ref?: React.Ref<HTMLButtonElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        SelectList: import("react").FunctionComponent<import("@base-ui/react").RadioGroup.Props<unknown>>;
+        SelectItem: ({ children, ...props }: import("react").ComponentPropsWithoutRef<typeof import("./Dialog.js").DialogSelectItemRoot> & {
+            ref?: React.Ref<HTMLButtonElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Unstyled: import("./Dialog.js").DialogParts;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const NoSheet: Story;
+export declare const Positioned: Story;
+export declare const VirtualKeyboard: Story;
+export declare const MultiNested: Story;
+export declare const Selectable: Story;

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Input } from '../input/index.js';
+import { ParticleLayer } from '../particles/index.js';
+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';
+const meta = {
+    title: 'Components/Dialog',
+    component: Dialog,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+function DummyContent() {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(H1, { children: "Some content" }), _jsxs("div", { style: { maxHeight: '20vh', overflowY: 'auto' }, children: [_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. Nulla facil" }), _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. Nulla facil" }), _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. Nulla facil" })] }), _jsx(Button, { disabled: true, color: "primary", children: "Click me" })] }));
+}
+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" })] })] })] })),
+    },
+};
+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, {}) })] })] })),
+    },
+};
+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, {}) })] })] })),
+    },
+};
+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, {}) })] })] })),
+    },
+};
+export const VirtualKeyboard = {
+    render: () => {
+        const [keyboard, setKeyboard] = useState(false);
+        useEffect(() => {
+            if (keyboard) {
+                document.body.style.setProperty('--mock-virtual-keyboard-height', '300px');
+            }
+            else {
+                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: {
+                        position: 'fixed',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        height: 'var(--mock-virtual-keyboard-height,0)',
+                        width: '100%',
+                        transition: 'height var(--m-duration) var(--m-easing)',
+                    } })] }));
+    },
+};
+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, {})] })] })] })] }));
+    },
+};
+export const Selectable = {
+    render() {
+        return (_jsxs(Dialog, { children: [_jsx(Dialog.SelectTrigger, { children: "Open" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsxs(Dialog.SelectList, { children: [_jsx(Dialog.SelectItem, { value: "option1", children: "Option 1" }), _jsx(Dialog.SelectItem, { value: "option2", children: "Option 2" }), _jsx(Dialog.SelectItem, { value: "option3", children: "Option 3" })] })] })] }));
+    },
+};
+//# sourceMappingURL=Dialog.stories.js.map

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

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

package/dist/components/dialog/index.js

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

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

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