@bspk/ui 1.1.34 → 1.3.0

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,39 @@
+import './date-input.scss';
+import { TextInputProps } from '-/components/TextInput';
+export type DateInputProps = Pick<TextInputProps, 'aria-errormessage' | 'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size'> & {
+    /** The value of the calendar input */
+    value: Date | undefined;
+    /** Fires when the date changes with the new date */
+    onChange: (newDate: Date | undefined) => void;
+    /**
+     * If the calendar should close when a date is selected.
+     *
+     * @default true
+     */
+    closeCalendarOnChange?: boolean;
+    /**
+     * The placeholder text for the date input field.
+     *
+     * @default mm/dd/yyyy
+     */
+    placeholder?: string;
+};
+/**
+ * An input that allows a customer to manually type in a specific date or triggers a date picker combobox to select a
+ * date.
+ *
+ * @example
+ *     import { DateInput } from '@bspk/ui/DateInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return <DateInput name="calendar input" aria-label="calendar input" value={date} onChange={setDate} />;
+ *     }
+ *
+ * @name DateInput
+ * @phase Utility
+ */
+export declare function DateInput({ value, onChange, disabled, readOnly, closeCalendarOnChange, 'aria-label': ariaLabel, name, placeholder, invalid, required, size, 'aria-errormessage': ariaErrorMessage, }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DateInput/DateInput.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './date-input.css.js';
+import { SvgEvent } from '@bspk/icons/Event';
+import { format, isValid, parse } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { CalendarPicker } from '../CalendarPicker';
+import { Portal } from '../Portal';
+import { TextInput } from '../TextInput';
+import { useFloating } from '../../hooks/useFloating';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
+/**
+ * An input that allows a customer to manually type in a specific date or triggers a date picker combobox to select a
+ * date.
+ *
+ * @example
+ *     import { DateInput } from '@bspk/ui/DateInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return <DateInput name="calendar input" aria-label="calendar input" value={date} onChange={setDate} />;
+ *     }
+ *
+ * @name DateInput
+ * @phase Utility
+ */
+export function DateInput({ value, onChange, disabled, readOnly, closeCalendarOnChange = true, 'aria-label': ariaLabel, name, placeholder, invalid, required, size, 'aria-errormessage': ariaErrorMessage, }) {
+    const [textValue, setTextValue] = useState(value ? format(value, 'MM/dd/yyyy') : '');
+    const [calendarVisible, setCalendarVisible] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const formattedValue = value ? format(value, 'MM/dd/yyyy') : '';
+        setTextValue(formattedValue);
+    }, [value]);
+    const { elements, floatingStyles } = useFloating({
+        placement: 'bottom',
+        strategy: 'absolute',
+        offsetOptions: 4,
+        refWidth: true,
+    });
+    useOutsideClick({
+        elements: [elements.floating, containerRef.current],
+        callback: () => setCalendarVisible(false),
+    });
+    const isValidDate = (next) => {
+        const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
+        return isValid(parsedDate) ? parsedDate : undefined;
+    };
+    const validate = () => {
+        let nextDate;
+        let nextTextValue = '';
+        if (parsableDate(textValue)) {
+            nextDate = isValidDate(textValue);
+            if (nextDate)
+                nextTextValue = format(nextDate, 'MM/dd/yyyy');
+        }
+        setTextValue(nextTextValue);
+        onChange(nextDate);
+    };
+    const handleTextChange = (nextValue) => {
+        // Add slashes as the user types
+        if (/^\d{2}$/.test(nextValue) || /^\d{1,2}\/\d{2}$/.test(nextValue))
+            nextValue = `${nextValue}/`;
+        // Remove extra slashes
+        if (nextValue.endsWith('//'))
+            nextValue = nextValue.slice(0, -1);
+        setTextValue(nextValue);
+        if (parsableDate(nextValue)) {
+            const next = isValidDate(nextValue);
+            if (next)
+                onChange(next);
+        }
+    };
+    return (_jsxs("span", { "data-bspk": "date-input", ref: containerRef, children: [_jsx("div", { ref: (node) => {
+                    elements.setReference(node);
+                }, children: _jsx(TextInput, { "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled, invalid: invalid || undefined, name: name, onBlur: () => validate(), onChange: handleTextChange, onKeyDown: (event) => {
+                        // allow select all and other keyboard shortcuts
+                        if (event.ctrlKey || event.metaKey) {
+                            return;
+                        }
+                        // handle backspace and delete to remove the slash and the number before it
+                        if (event.key === 'Backspace' || (event.key === 'Delete' && textValue.endsWith('/'))) {
+                            event.preventDefault();
+                            setTextValue((prev) => prev.slice(0, -2));
+                        }
+                        // if a single key and not a number or forward slash ignore
+                        if (event.key.length === 1 && !/[0-9/]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    }, placeholder: placeholder || 'mm/dd/yyyy', readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
+                        !readOnly && (_jsx(Button, { icon: _jsx(SvgEvent, {}), iconOnly: true, label: "Toggle calendar", onClick: () => setCalendarVisible((prev) => !prev), variant: "tertiary" })), value: textValue }) }), calendarVisible && (_jsx(Portal, { children: _jsx("div", { "data-placement": "bottom", ref: (node) => {
+                        elements.setFloating(node);
+                    }, style: { ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }, children: _jsx(CalendarPicker, { onChange: (next) => {
+                            if (closeCalendarOnChange)
+                                setCalendarVisible(false);
+                            onChange(next);
+                        }, value: value, variant: "elevated" }) }) }))] }));
+}
+//# sourceMappingURL=DateInput.js.map

package/dist/components/DateInput/DateInput.js.map

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

package/dist/components/DateInput/DateInputExample.d.ts

@@ -0,0 +1,4 @@
+import { DateInputProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<DateInputProps>[];
+export declare const DateInputExample: ComponentExample<DateInputProps>;

package/dist/components/DateInput/DateInputExample.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const presets = [];
+export const DateInputExample = {
+    defaultState: {},
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => {
+        const { value, ...restProps } = props;
+        return _jsx(Component, { ...restProps, value: value?.getDate ? value : undefined });
+    },
+    sections: [],
+    variants: false,
+};
+//# sourceMappingURL=DateInputExample.js.map

package/dist/components/DateInput/DateInputExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputExample.js","sourceRoot":"","sources":["../../../src/components/DateInput/DateInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA6B,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;QAEtC,OAAO,KAAC,SAAS,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAI,CAAC;IACnF,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/DateInput/date-input.css

@@ -0,0 +1,12 @@
+[data-bspk=date-input] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 360px;
+  width: 100%;
+}
+[data-bspk=date-input] [data-bspk=text-input] {
+  padding-right: 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DateInput/date-input.css.js

@@ -0,0 +1,17 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=date-input] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 360px;
+  width: 100%;
+}
+[data-bspk=date-input] [data-bspk=text-input] {
+  padding-right: 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/DateInput/index.js

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

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

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

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

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
 import './dialog.scss';
-export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
+import { ReactNode } from 'react';
+import { PortalProps } from '-/components/Portal';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
+export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'container'> & {
     /** The content of the dialog. */
     children?: ReactNode;
     /** A ref to the dialog element. */
@@ -9,9 +10,6 @@ export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
     /**
      * If the dialog should appear.
      *
-     * @example
-     *     false;
-     *
      * @default false
      */
     open?: boolean;
@@ -34,6 +32,19 @@ export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
      * @default true
      */
     showScrim?: boolean;
+    /**
+     * If the dialog should take the full width of the screen.
+     *
+     * @default false
+     */
+    widthFull?: boolean;
+    /**
+     * If focus trapping should be disabled. Generally this should not be disabled as dialogs should always trap
+     * focus.
+     *
+     * @default false
+     */
+    disableFocusTrap?: boolean;
 };
 /**
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
@@ -61,9 +72,5 @@ export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
  * @name Dialog
  * @phase Utility
  */
-declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
-declare namespace Dialog {
-    var bspkName: string;
-}
-export { Dialog };
+export declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, widthFull, id: idProp, owner, container, disableFocusTrap, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Dialog/Dialog.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './dialog.css.js';
 import { FocusTrap } from 'focus-trap-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Portal } from '../Portal';
 import { Scrim } from '../Scrim';
 import { useId } from '../../hooks/useId';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
-import './dialog.css.js';
 /**
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
@@ -32,59 +31,25 @@ import './dialog.css.js';
  * @name Dialog
  * @phase Utility
  */
-function Dialog({ 
-//
-children, innerRef, onClose, open, placement = 'center', showScrim = true, id: idProp, ...containerProps }) {
+export function Dialog({ children, innerRef, onClose, open = false, placement = 'center', showScrim = true, widthFull = false, id: idProp, owner, container, disableFocusTrap, ...containerProps }) {
     const id = useId(idProp);
     const boxRef = useRef(null);
-    const [visibility, setVisibilityState] = useState(open ? 'show' : 'hidden');
-    const prevVisibility = useRef(visibility);
-    const setVisibility = useCallback((next) => {
-        setVisibilityState((prev) => {
-            prevVisibility.current = prev;
-            return next;
-        });
-    }, []);
-    const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
-    useEffect(() => {
-        if (open) {
-            if (prevVisibility.current.startsWith('show'))
-                return;
-            setVisibility('showing');
-            return;
-        }
-        if (prevVisibility.current.startsWith('hid'))
-            return;
-        setVisibility('hiding');
-    }, [open, setVisibility]);
+    const handleKeyDown = useCallback((e) => open && e.key === 'Escape' && onClose(), [onClose, open]);
     useEffect(() => {
-        if (prevVisibility.current === visibility)
-            return;
-        if (visibility === 'showing') {
-            document.body.style.overflow = 'hidden';
-            setTimeout(() => setVisibility('show'), 10);
-        }
-        if (visibility === 'hiding') {
-            document.body.style.overflow = '';
-            setTimeout(() => setVisibility('hidden'), 10);
-        }
-    }, [setVisibility, visibility]);
-    useEffect(() => {
-        if (visibility.startsWith('hid'))
-            return;
+        document.documentElement.style.overflow = open ? 'hidden' : '';
         document.addEventListener('keydown', handleKeyDown);
         return () => {
+            document.documentElement.style.overflow = '';
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [handleKeyDown, visibility]);
-    useOutsideClick([boxRef.current], onClose, !open);
-    return (visibility !== 'hidden' && (_jsxs(Portal, { children: [_jsx(Scrim, { "data-bspk-owner": "dialog", onClick: onClose, variant: "dialog", visible: showScrim !== false }), _jsx("div", { ...containerProps, "data-bspk": "dialog", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { focusTrapOptions: {
-                        fallbackFocus: () => boxRef.current,
+    }, [handleKeyDown, open]);
+    return (open && (_jsxs(Portal, { container: container, children: [_jsx("div", { ...containerProps, "data-bspk": "dialog", "data-bspk-owner": owner || undefined, "data-placement": placement, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
                         clickOutsideDeactivates: true,
-                    }, children: _jsx("div", { "data-dialog-box": true, ref: (node) => {
+                        fallbackFocus: () => boxRef.current,
+                    }, children: _jsx("div", { "data-dialog-box": true, "data-width-full": widthFull, ref: (node) => {
                             boxRef.current = node;
-                        }, tabIndex: -1, children: children }) }) })] })));
+                        }, tabIndex: -1, children: children }) }) }), _jsx(Scrim, { onClick: () => {
+                    onClose();
+                }, owner: "dialog", visible: showScrim !== false })] })));
 }
-Dialog.bspkName = 'Dialog';
-export { Dialog };
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}

package/dist/components/Dialog/DialogExample.d.ts

@@ -1,3 +1,4 @@
-import { ComponentExample } from '../../utils/demo';
 import { DialogProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<DialogProps>[];
 export declare const DialogExample: ComponentExample<DialogProps>;

package/dist/components/Dialog/DialogExample.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../Button';
+export const presets = [];
 export const DialogExample = {
     render: ({ props, setState, Component }) => {
         const label = 'Open Dialog';
-        const { children, ...modalProps } = props;
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, id: "exampleId", ...modalProps, onClose: () => setState({ open: false }), children: children })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, ...props, id: "exampleId", onClose: () => setState({ open: false }), children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: ["Hello, I am a (", props.placement, ") dialog!"] }) })] }));
     },
-    hideVariants: true,
+    variants: false,
+    presets,
 };
 //# sourceMappingURL=DialogExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,oCAEN,EAAE,EAAC,WAAW,KACV,UAAU,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAEvC,QAAQ,GACD,IACb,CACN,CAAC;IACN,CAAC;IACD,YAAY,EAAE,IAAI;CACrB,CAAC"}
+{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,OAAO,GAA0B,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,uCAA4B,KAAK,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,gCAAkB,KAAK,CAAC,SAAS,iBAAgB,GAC5F,IACb,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,KAAK;IACf,OAAO;CACV,CAAC"}

package/dist/components/Dialog/dialog.css

@@ -2,17 +2,23 @@
   position: fixed;
   inset: 0;
   z-index: var(--z-index-dialog);
+  display: flex;
+  pointer-events: none;
 }
 [data-bspk=dialog] [data-dialog-box] {
+  pointer-events: all;
   text-align: start;
   position: relative;
-  border-radius: var(--radius-large);
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
   max-height: calc(100vh - var(--spacing-sizing-24));
   z-index: 2;
   width: calc(100% - var(--spacing-sizing-08));
+  animation-name: var(--box-animation-name);
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=dialog] [data-dialog-box] > :first-of-type {
   margin-top: 0;
@@ -40,80 +46,56 @@
     width: 50%;
   }
 }
-[data-bspk=dialog] [data-dialog-backdrop] {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-  background-color: var(--background-scrim);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop] {
-  opacity: 1;
-}
 [data-bspk=dialog][data-placement=center] {
-  display: flex;
+  --box-animation-name: fade-in;
   justify-content: center;
   align-items: center;
 }
 [data-bspk=dialog][data-placement=center] [data-dialog-box] {
-  transition: opacity 1s;
-  opacity: 0;
+  border-radius: var(--radius-lg);
 }
-[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box] {
-  opacity: 1;
+[data-bspk=dialog][data-placement=bottom] {
+  --box-animation-name: placement-bottom;
+  justify-content: center;
+  align-items: end;
 }
 [data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
-  position: absolute;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  width: 600px;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -100vh;
-  transition: bottom 0.3s;
-}
-[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box] {
-  bottom: 0;
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+[data-bspk=dialog][data-placement=top] {
+  --box-animation-name: placement-top;
+  justify-content: center;
+  align-items: start;
 }
 [data-bspk=dialog][data-placement=top] [data-dialog-box] {
-  position: absolute;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  width: 600px;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -100vh;
-  transition: top 0.3s;
-}
-[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box] {
-  top: 0;
+  border-bottom-left-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+[data-bspk=dialog][data-placement=left] {
+  --box-animation-name: placement-left;
+  justify-content: flex-start;
 }
 [data-bspk=dialog][data-placement=left] [data-dialog-box] {
-  position: absolute;
   max-height: unset;
   width: 280px;
   height: 100vh;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  left: -100vw;
-  transition: left 0.3s;
+  border-bottom-right-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
-[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box] {
-  left: 0;
+[data-bspk=dialog][data-placement=right] {
+  --box-animation-name: placement-right;
+  justify-content: flex-end;
 }
 [data-bspk=dialog][data-placement=right] [data-dialog-box] {
-  position: absolute;
   max-height: unset;
   width: 280px;
   height: 100vh;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  right: -100vw;
-  transition: right 0.3s;
+  border-bottom-left-radius: var(--radius-lg);
+  border-top-left-radius: var(--radius-lg);
 }
-[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box] {
-  right: 0;
+[data-bspk=dialog] [data-width-full=true] {
+  width: 100%;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */