@bspk/ui 1.2.0 → 1.3.1

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,7 @@
+import './dialog.scss';
 import { ReactNode } from 'react';
 import { PortalProps } from '-/components/Portal';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
-import './dialog.scss';
 export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'container'> & {
     /** The content of the dialog. */
     children?: ReactNode;
@@ -32,6 +32,19 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
      * @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
@@ -59,5 +72,5 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
  * @name Dialog
  * @phase Utility
  */
-export declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, id: idProp, owner, container, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
+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,10 +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 } from 'react';
 import { Portal } from '../Portal';
 import { Scrim } from '../Scrim';
 import { useId } from '../../hooks/useId';
-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.
@@ -31,20 +31,22 @@ import './dialog.css.js';
  * @name Dialog
  * @phase Utility
  */
-export function Dialog({ children, innerRef, onClose, open = false, placement = 'center', showScrim = true, id: idProp, owner, container, ...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 handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
+    const handleKeyDown = useCallback((e) => open && e.key === 'Escape' && onClose(), [onClose, open]);
     useEffect(() => {
         document.documentElement.style.overflow = open ? 'hidden' : '';
-        if (open)
-            document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.documentElement.style.overflow = '';
+            document.removeEventListener('keydown', handleKeyDown);
+        };
     }, [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, { focusTrapOptions: {
-                        fallbackFocus: () => boxRef.current,
+    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 }) }) }), _jsx(Scrim, { onClick: () => {
                     onClose();

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,eAAe,CAAC;AAmCvB;;;;;;;;;;;;;;;;;;;;;;;;;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,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,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,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpG,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,IAAI,IAAI;YAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC9D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACxE,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,gBAAgB,EAAE;wBACd,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;wBACpC,uBAAuB,EAAE,IAAI;qBAChC,YAED,uCAEI,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"}
+{"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 { DialogProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+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,10 +1,12 @@
 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';
         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!"] }) })] }));
     },
     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":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,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;CAClB,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

@@ -1,57 +1,14 @@
 [data-bspk=dialog] {
-  --width: 600px;
   position: fixed;
   inset: 0;
   z-index: var(--z-index-dialog);
+  display: flex;
   pointer-events: none;
 }
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
-@keyframes placement-left {
-  0% {
-    transform: translateX(-100vw);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes placement-right {
-  0% {
-    transform: translateX(100vw);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes placement-top {
-  0% {
-    transform: translateY(-100vh);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes placement-bottom {
-  0% {
-    transform: translateY(100vh);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
 [data-bspk=dialog] [data-dialog-box] {
   pointer-events: all;
   text-align: start;
   position: relative;
-  border-radius: var(--radius-lg);
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
@@ -91,59 +48,54 @@
 }
 [data-bspk=dialog][data-placement=center] {
   --box-animation-name: fade-in;
-  display: flex;
   justify-content: center;
   align-items: center;
 }
 [data-bspk=dialog][data-placement=center] [data-dialog-box] {
-  position: absolute;
+  border-radius: var(--radius-lg);
 }
 [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: var(--width);
-  left: calc(50% - var(--width) / 2);
-  transform: translateX(-50%);
-  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: var(--width);
-  left: calc(50% - var(--width) / 2);
-  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: 0;
+  border-bottom-right-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
 [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: 0;
+  border-bottom-left-radius: var(--radius-lg);
+  border-top-left-radius: var(--radius-lg);
+}
+[data-bspk=dialog] [data-width-full=true] {
+  width: 100%;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -2,59 +2,16 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=dialog] {
-  --width: 600px;
   position: fixed;
   inset: 0;
   z-index: var(--z-index-dialog);
+  display: flex;
   pointer-events: none;
 }
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
-@keyframes placement-left {
-  0% {
-    transform: translateX(-100vw);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes placement-right {
-  0% {
-    transform: translateX(100vw);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes placement-top {
-  0% {
-    transform: translateY(-100vh);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes placement-bottom {
-  0% {
-    transform: translateY(100vh);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
 [data-bspk=dialog] [data-dialog-box] {
   pointer-events: all;
   text-align: start;
   position: relative;
-  border-radius: var(--radius-lg);
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
@@ -94,59 +51,54 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
 }
 [data-bspk=dialog][data-placement=center] {
   --box-animation-name: fade-in;
-  display: flex;
   justify-content: center;
   align-items: center;
 }
 [data-bspk=dialog][data-placement=center] [data-dialog-box] {
-  position: absolute;
+  border-radius: var(--radius-lg);
 }
 [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: var(--width);
-  left: calc(50% - var(--width) / 2);
-  transform: translateX(-50%);
-  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: var(--width);
-  left: calc(50% - var(--width) / 2);
-  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: 0;
+  border-bottom-right-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
 [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: 0;
+  border-bottom-left-radius: var(--radius-lg);
+  border-top-left-radius: var(--radius-lg);
+}
+[data-bspk=dialog] [data-width-full=true] {
+  width: 100%;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Divider/Divider.d.ts

@@ -1,5 +1,5 @@
-import { ElementProps } from '-/types/common';
 import './divider.scss';
+import { ElementProps } from '-/types/common';
 export type DividerProps = {
     /**
      * The orientation of the divider.

package/dist/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cssWithVars } from '../../utils/cwv';
 import './divider.css.js';
+import { cssWithVars } from '../../utils/cwv';
 const insetToVariable = (insetProp) => {
     const inset = Number(insetProp);
     if (inset === undefined || inset === null || inset < 1 || inset > 12)

package/dist/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AA+BxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA+B1C,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}

package/dist/components/Divider/DividerExample.d.ts

@@ -1,2 +1,4 @@
-import { ComponentExample } from '-/utils/demo';
-export declare const DividerExample: ComponentExample;
+import { DividerProps } from './Divider';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<DividerProps>[];
+export declare const DividerExample: ComponentExample<DividerProps>;