@bspk/ui 1.0.0

package/Dialog.js

@@ -0,0 +1,221 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { FocusTrap } from 'focus-trap-react';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { Portal } from './Portal.js';
+import { useId } from './hooks/useId.js';
+import { useOutsideClick } from './hooks/useOutsideClick.js';
+
+/**
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * further interactions until an action is selected.
+ *
+ * @name Dialog
+ */
+function Dialog({ 
+//
+children, innerRef, onClose, open, placement = 'center', hideScrim, id: idProp, ...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]);
+    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.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown, visibility]);
+    useOutsideClick([boxRef.current], onClose, !open);
+    return (visibility !== 'hidden' && (jsx(Portal, { children: jsxs("div", { ...containerProps, css: style, "data-dialog-root": "", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: [!hideScrim && jsx("div", { "aria-hidden": "true", "data-dialog-backdrop": true }), jsx(FocusTrap, { focusTrapOptions: {
+                        fallbackFocus: () => boxRef.current,
+                        clickOutsideDeactivates: true,
+                    }, children: jsx("div", { "data-dialog-box": true, ref: (node) => {
+                            boxRef.current = node;
+                        }, tabIndex: -1, children: children }) })] }) })));
+}
+Dialog.bspkName = 'Dialog';
+const style = css `
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-index-dialog);
+
+    [data-dialog-box] {
+        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));
+        overflow: scroll;
+        z-index: 2;
+
+        > :first-of-type {
+            margin-top: 0;
+        }
+
+        > :last-child {
+            margin-bottom: 0;
+        }
+
+        // we make the width responsive to the viewport
+        @media (min-width: 640px) {
+            width: 90%;
+        }
+
+        @media (min-width: 768px) {
+            width: 80%;
+        }
+
+        @media (min-width: 1024px) {
+            width: 60%;
+        }
+
+        @media (min-width: 1280px) {
+            width: 50%;
+        }
+    }
+
+    [data-dialog-backdrop] {
+        z-index: 1;
+        position: fixed;
+        inset: 0;
+        background-color: var(--background-scrim);
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    &[data-visibility='show'] {
+        [data-dialog-backdrop] {
+            opacity: 1;
+        }
+    }
+
+    &[data-placement='center'] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        [data-dialog-box] {
+            transition: opacity 1s;
+            opacity: 0;
+        }
+
+        &[data-visibility='show'] {
+            [data-dialog-box] {
+                opacity: 1;
+            }
+        }
+    }
+
+    &[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-visibility='show'] {
+            [data-dialog-box] {
+                bottom: 0;
+            }
+        }
+    }
+
+    &[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-visibility='show'] {
+            [data-dialog-box] {
+                top: 0;
+            }
+        }
+    }
+
+    &[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;
+        }
+
+        &[data-visibility='show'] {
+            [data-dialog-box] {
+                left: 0;
+            }
+        }
+    }
+
+    &[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;
+        }
+
+        &[data-visibility='show'] {
+            [data-dialog-box] {
+                right: 0;
+            }
+        }
+    }
+`;
+
+export { Dialog, style };
+//# sourceMappingURL=Dialog.js.map

package/Dialog.js.map

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

package/Divider.d.ts

@@ -0,0 +1,44 @@
+import { ElementProps } from './';
+export type DividerProps = {
+    /**
+     * The orientation of the divider.
+     *
+     * @default horizontal
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The thickness of the divider.
+     *
+     * @default light
+     */
+    thickness?: 'heavy' | 'light';
+    /**
+     * If the divider padding is shown.
+     *
+     * @default true
+     */
+    padding?: boolean;
+    /**
+     * The inset (margin) of the divider. The value is a number between 0 and 12, which corresponds to the spacing
+     * sizing variables defined in the theme. The inset is applied to the left and right sides of the divider when the
+     * orientation is horizontal, and to the top and bottom when the orientation is vertical.
+     *
+     * @default 0
+     */
+    inset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+/**
+ * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
+ * label.
+ *
+ * Vertical thin lines that separates grouped content or other visual elements within a container.
+ *
+ * @name Divider
+ */
+declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Divider {
+    var bspkName: string;
+}
+export { Divider };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Divider.js

@@ -0,0 +1,76 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+const insetToVariable = (insetProp) => {
+    const inset = Number(insetProp);
+    if (inset === undefined || inset === null || inset < 1 || inset > 12)
+        return '0px';
+    return `var(--spacing-sizing-${inset.toString().padStart(2, '0')})`;
+};
+/**
+ * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
+ * label.
+ *
+ * Vertical thin lines that separates grouped content or other visual elements within a container.
+ *
+ * @name Divider
+ */
+function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
+    return (jsx("div", { ...props, "aria-orientation": orientation, css: style, "data-divider": true, "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: {
+            ...props.style,
+            '--inset': insetToVariable(inset),
+        } }));
+}
+Divider.bspkName = 'Divider';
+const style = css `
+    display: flex;
+    background-color: var(--stroke-neutral-low);
+    align-self: stretch;
+    justify-content: stretch;
+    margin: 0;
+    padding: 0;
+    align-content: stretch;
+    content: 'hello';
+
+    --length: calc(100% - var(--inset) * 2);
+
+    &, // default
+  &[data-thickness='light'] {
+        --line-thickness: 1px;
+        --padding: var(--spacing-sizing-02);
+    }
+
+    &[data-thickness='heavy'] {
+        --line-thickness: 2px;
+        --padding: var(--spacing-sizing-04);
+    }
+
+    &, // default
+  &[data-orientation='horizontal'] {
+        width: unset;
+        min-height: unset;
+
+        height: var(--line-thickness);
+        min-width: var(--length);
+
+        margin: var(--padding) var(--inset);
+    }
+
+    &[data-orientation='vertical'] {
+        height: unset;
+        min-width: unset;
+
+        width: var(--line-thickness);
+        min-height: var(--length);
+
+        margin: var(--inset) var(--padding);
+    }
+
+    &[data-hide-padding] {
+        //
+        --padding: 0;
+    }
+`;
+
+export { Divider, style };
+//# sourceMappingURL=Divider.js.map

package/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["src/Divider.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAiCA,MAAM,eAAe,GAAG,CAAC,SAA0B,KAAI;AACnD,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAChC,IAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;AAAE,QAAA,OAAO,KAAK,CAAC;AACnF,IAAA,OAAO,CAAwB,qBAAA,EAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;AAOG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB,EAAA;IAChC,QACIA,GACQ,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EACS,kBAAA,EAAA,WAAW,EAC7B,GAAG,EAAE,KAAK,EAAA,cAAA,EAAA,IAAA,EAAA,mBAAA,EAES,CAAC,OAAO,IAAI,SAAS,EAAA,kBAAA,EACtB,WAAW,EAAA,gBAAA,EACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EACD;YACI,GAAG,KAAK,CAAC,KAAK;AACd,YAAA,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;AACb,SAAA,EAAA,CAE9B,EACJ;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAItB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/Drawer.d.ts

@@ -0,0 +1,20 @@
+export type DrawerProps = {
+    /**
+     * The content of the drawer.
+     *
+     * @required
+     */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name Drawer
+ */
+declare function Drawer({ children }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Drawer {
+    var bspkName: string;
+}
+export { Drawer };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Drawer.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name Drawer
+ */
+function Drawer({ children }) {
+    return (jsx("div", { css: style, "data-drawer": true, children: children }));
+}
+Drawer.bspkName = 'Drawer';
+const style = css `
+    display: flex;
+`;
+
+export { Drawer, style };
+//# sourceMappingURL=Drawer.js.map

package/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["src/Drawer.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAWA;;;;AAIG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAe,EAAA;IACrC,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAIpB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/Dropdown.d.ts

@@ -0,0 +1,50 @@
+import { MenuProps } from './Menu';
+import { Placement } from './hooks/useFloating';
+import { CommonProps } from './';
+export type DropdownOption = {
+    /** The value of the option. */
+    value: string;
+    /** The label of the option. This is the text that will be displayed on the option. */
+    label: string;
+};
+export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & Pick<MenuProps<O>, 'isMulti' | 'itemCount' | 'onChange' | 'renderListItem'> & {
+    /**
+     * Array of options to display in the dropdown
+     *
+     * @type DropdownOption[]
+     * @required
+     */
+    options: O[];
+    /**
+     * Array of selected values!
+     *
+     * @type Array<string>
+     */
+    value?: Array<string>;
+    /**
+     * Placeholder for the dropdown
+     *
+     * @default Select...
+     */
+    placeholder?: string;
+    /**
+     * The placement of the dropdown menu. Will be ignored if the menu is too close to the edge of the screen.
+     *
+     * @default bottom
+     */
+    placement?: Extract<Placement, 'bottom' | 'top'>;
+    /** The style of the dropdown. */
+    style?: React.CSSProperties;
+};
+/**
+ * A field element that allows users to select one option from a list of available choices. *
+ *
+ * @name Dropdown
+ */
+declare function Dropdown<O extends DropdownOption = DropdownOption>({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, readOnly, placement, name, isMulti, renderListItem, style: styleProp, }: DropdownProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Dropdown {
+    var bspkName: string;
+}
+export { Dropdown };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Dropdown.js

@@ -0,0 +1,153 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { css } from '@emotion/react';
+import { ListItem } from './ListItem.js';
+import { Menu } from './Menu.js';
+import { Portal } from './Portal.js';
+import { useFloatingMenu } from './hooks/useFloatingMenu.js';
+import { useId } from './hooks/useId.js';
+
+/**
+ * A field element that allows users to select one option from a list of available choices. *
+ *
+ * @name Dropdown
+ */
+function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, }) {
+    const id = useId(propId);
+    const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
+        placement,
+        triggerProps: {
+            disabled,
+            invalid,
+            readOnly,
+        },
+    });
+    const dropdownLabel = isMulti
+        ? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
+        : options.find((o) => o.value === selected?.[0])?.label;
+    return (jsxs(Fragment, { children: [jsx("input", { defaultValue: selected, name: name, type: "hidden" }), jsxs("button", { "aria-label": ariaLabel, css: style, "data-dropdown": "", "data-empty": dropdownLabel ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, style: styleProp, ...triggerProps, children: [jsx(ListItem, { "data-placeholder": "", label: dropdownLabel || placeholder, readOnly: true }), jsx("span", { "data-svg": true, children: jsx(SvgChevronRight, {}) })] }), jsx(Portal, { children: jsx(Menu, { "data-floating": true, isMulti: isMulti, itemCount: itemCount, items: options, onChange: (selectedValues, event) => {
+                        event?.preventDefault();
+                        if (!isMulti)
+                            closeMenu();
+                        onChange?.(selectedValues);
+                    }, renderListItem: renderListItem, selectedValues: selected, ...menuProps }) })] }));
+}
+Dropdown.bspkName = 'Dropdown';
+const style = css `
+    // default -- size medium not disabled or readonly
+    --dropdown-background: var(--surface-neutral-t1-base);
+    --dropdown-border-color: var(--stroke-neutral-base);
+    --dropdown-text-color: var(--foreground-neutral-on-surface);
+    --dropdown-height: var(--spacing-sizing-10);
+    --dropdown-font: var(--body-base);
+    --dropdown-clear-height: var(--spacing-sizing-05);
+    --dropdown-padding: var(--spacing-sizing-03);
+    --dropdown-icon-width: var(--spacing-sizing-05);
+
+    position: relative;
+    width: 100%;
+    max-width: 280px;
+    outline: unset;
+    min-height: var(--dropdown-height);
+    max-height: var(--dropdown-height);
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+    flex-grow: 0;
+    flex-shrink: 0;
+    text-align: left;
+    font: var(--dropdown-font);
+    border: 1px solid var(--dropdown-border-color);
+    border-radius: var(--radius-small);
+    background: var(--dropdown-background);
+    padding: 0 var(--dropdown-padding);
+
+    [data-placeholder] {
+        display: block;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 0;
+
+        [data-inner] {
+            min-height: auto;
+            padding: 0;
+        }
+
+        [data-item-label] [data-text] {
+            color: var(--dropdown-text-color);
+        }
+    }
+
+    [data-svg] {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        svg {
+            transform: rotate(90deg);
+            width: var(--dropdown-icon-width);
+        }
+    }
+
+    // &[data-size='medium'] {
+    & {
+        [data-svg] svg {
+        }
+    }
+
+    &[data-size='small'] {
+        --dropdown-height: var(--spacing-sizing-08);
+        --dropdown-font: var(--body-small);
+        --dropdown-clear-height: var(--spacing-sizing-05);
+        --dropdown-padding: var(--spacing-sizing-02);
+        --dropdown-icon-width: var(--spacing-sizing-05);
+    }
+
+    &[data-size='large'] {
+        --dropdown-height: var(--spacing-sizing-12);
+        --dropdown-font: var(--body-large);
+        --dropdown-clear-height: var(--spacing-sizing-06);
+        --dropdown-icon-width: var(--spacing-sizing-06);
+    }
+
+    &:disabled {
+        --dropdown-text-color: var(--foreground-neutral-disabled-on-surface);
+        --dropdown-border-color: var(--stroke-neutral-disabled-light);
+        --dropdown-background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        &[aria-readonly]:not([data-empty]) {
+            --dropdown-text-color: var(--foreground-neutral-on-surface);
+        }
+    }
+
+    &:not(:disabled) {
+        &:focus {
+            --dropdown-border-color: var(--stroke-brand-primary);
+        }
+
+        &:hover {
+            --dropdown-background:
+                linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+        }
+
+        &:active {
+            --dropdown-background:
+                linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+        }
+    }
+
+    &[data-invalid] {
+        --dropdown-border-color: var(--status-error);
+    }
+
+    &[data-empty] {
+        --dropdown-text-color: var(--foreground-neutral-on-surface-variant-03);
+    }
+`;
+
+export { Dropdown, style };
+//# sourceMappingURL=Dropdown.js.map

package/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["src/Dropdown.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAoDA;;;;AAIG;AACH,SAAS,QAAQ,CAA4C,EACzD,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,GACD,EAAA;AACf,IAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;AACT,QAAA,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;AACX,SAAA;AACJ,KAAA,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO;UACvB,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAW,SAAA,CAAA;UAC9E,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,QACIA,4BACIC,GAAO,CAAA,OAAA,EAAA,EAAA,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3DD,IAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACgB,SAAS,EACrB,GAAG,EAAE,KAAK,EACI,eAAA,EAAA,EAAE,gBACJ,aAAa,GAAG,SAAS,GAAG,EAAE,EAAA,cAAA,EAC5B,OAAO,IAAI,SAAS,EACvB,WAAA,EAAA,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,EAAA,QAAA,EAAA,CAEhBC,IAAC,QAAQ,EAAA,EAAA,kBAAA,EAAkB,EAAE,EAAC,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,QAAQ,EAAG,IAAA,EAAA,CAAA,EAC9EA,0CACIA,GAAC,CAAA,eAAe,EAAG,EAAA,CAAA,EAAA,CAChB,CACF,EAAA,CAAA,EACTA,IAAC,MAAM,EAAA,EAAA,QAAA,EACHA,IAAC,IAAI,EAAA,EAAA,eAAA,EAAA,IAAA,EAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,cAAc,EAAE,KAAK,KAAI;wBAChC,KAAK,EAAE,cAAc,EAAE,CAAC;AACxB,wBAAA,IAAI,CAAC,OAAO;AAAE,4BAAA,SAAS,EAAE,CAAC;AAC1B,wBAAA,QAAQ,GAAG,cAAc,CAAC,CAAC;AAC/B,qBAAC,EACD,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,QAAQ,EAAA,GACpB,SAAS,EAAA,CACf,EACG,CAAA,CAAA,EAAA,CACV,EACL;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAIxB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/DropdownField.d.ts

@@ -0,0 +1,16 @@
+import { DropdownProps } from './Dropdown';
+import { FormFieldProps } from './FormField';
+export type DropdownFieldProps = Pick<DropdownProps, 'disabled' | 'itemCount' | 'name' | 'onChange' | 'options' | 'placeholder' | 'placement' | 'readOnly' | 'size' | 'value'> & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * This component takes properties from the FormField and Dropdown components.
+ *
+ * @name DropdownField
+ */
+declare function DropdownField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...dropdownProps }: DropdownFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace DropdownField {
+    var bspkName: string;
+}
+export { DropdownField };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/DropdownField.js

@@ -0,0 +1,19 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Dropdown } from './Dropdown.js';
+import { FormField } from './FormField.js';
+
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * This component takes properties from the FormField and Dropdown components.
+ *
+ * @name DropdownField
+ */
+function DropdownField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...dropdownProps }) {
+    const errorMessage = (!dropdownProps.readOnly && !dropdownProps.disabled && errorMessageProp) || undefined;
+    return (jsx(FormField, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (jsx(Dropdown, { ...dropdownProps, ...fieldProps, "aria-label": label, id: id, invalid: !!errorMessage })) }));
+}
+DropdownField.bspkName = 'DropdownField';
+
+export { DropdownField };
+//# sourceMappingURL=DropdownField.js.map

package/DropdownField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownField.js","sources":["src/DropdownField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAkBA;;;;;;AAMG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,aAAa,EACb,QAAQ,EACR,GAAG,aAAa,EACC,EAAA;AACjB,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,gBAAgB,KAAK,SAAS,CAAC;IAE3G,QACIA,GAAC,CAAA,SAAS,EACN,EAAA,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAEjB,CAAC,UAAU,MACRA,GAAA,CAAC,QAAQ,EAAA,EAAA,GAAK,aAAa,EAAA,GAAM,UAAU,EAAA,YAAA,EAAc,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,EAAI,CAAA,CACtG,EACO,CAAA,EACd;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe;;;;"}