@bspk/ui 1.0.0

package/src/Dialog.tsx

@@ -0,0 +1,304 @@
+import { css } from '@emotion/react';
+import { FocusTrap } from 'focus-trap-react';
+import { ReactNode, Ref, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Portal } from './Portal';
+import { useId } from './hooks/useId';
+import { useOutsideClick } from './hooks/useOutsideClick';
+
+import { CommonProps, ElementProps } from './';
+
+export type DialogProps = CommonProps<'id'> & {
+    /** The content of the dialog. */
+    children?: ReactNode;
+    /** A ref to the dialog element. */
+    innerRef?: Ref<HTMLDivElement>;
+    /**
+     * If the dialog should appear.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Function to call when the dialog is closed.
+     *
+     * @type () => void
+     * @required
+     */
+    onClose: () => void;
+    /**
+     * The placement of the dialog on the screen.
+     *
+     * @default center
+     */
+    placement?: 'bottom' | 'center' | 'left' | 'right' | 'top';
+    /**
+     * Whether the dialog should have a scrim behind it.
+     *
+     * @default false
+     */
+    hideScrim?: boolean;
+};
+
+/**
+ * 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
+}: ElementProps<DialogProps, 'div'>) {
+    const id = useId(idProp);
+    const boxRef = useRef<HTMLDivElement | null>(null);
+    const [visibility, setVisibilityState] = useState<'hidden' | 'hiding' | 'show' | 'showing'>(
+        open ? 'show' : 'hidden',
+    );
+
+    const prevVisibility = useRef(visibility);
+
+    const setVisibility = useCallback((next: typeof visibility) => {
+        setVisibilityState((prev) => {
+            prevVisibility.current = prev;
+            return next;
+        });
+    }, []);
+
+    const handleKeyDown = useCallback((e: KeyboardEvent) => 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' && (
+            <Portal>
+                <div
+                    {...containerProps}
+                    css={style}
+                    data-dialog-root=""
+                    data-placement={placement}
+                    data-visibility={visibility}
+                    id={id}
+                    ref={innerRef}
+                    role="presentation"
+                >
+                    {!hideScrim && <div aria-hidden="true" data-dialog-backdrop />}
+                    <FocusTrap
+                        focusTrapOptions={{
+                            fallbackFocus: () => boxRef.current!,
+                            clickOutsideDeactivates: true,
+                        }}
+                    >
+                        <div
+                            data-dialog-box
+                            ref={(node) => {
+                                boxRef.current = node;
+                            }}
+                            tabIndex={-1}
+                        >
+                            {children}
+                        </div>
+                    </FocusTrap>
+                </div>
+            </Portal>
+        )
+    );
+}
+
+Dialog.bspkName = 'Dialog';
+
+export { Dialog };
+
+export 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;
+            }
+        }
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Divider.tsx

@@ -0,0 +1,129 @@
+import { css } from '@emotion/react';
+
+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;
+};
+
+const insetToVariable = (insetProp: number | string) => {
+    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
+}: ElementProps<DividerProps, 'div'>) {
+    return (
+        <div
+            {...props}
+            aria-orientation={orientation}
+            css={style}
+            data-divider
+            data-hide-padding={!padding || undefined}
+            data-orientation={orientation}
+            data-thickness={thickness}
+            role="separator"
+            style={
+                {
+                    ...props.style,
+                    '--inset': insetToVariable(inset),
+                } as React.CSSProperties
+            }
+        />
+    );
+}
+
+Divider.bspkName = 'Divider';
+
+export { Divider };
+
+export 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;
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Drawer.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+
+export type DrawerProps = {
+    /**
+     * The content of the drawer.
+     *
+     * @required
+     */
+    children: string;
+};
+
+/**
+ * Component description coming soon.
+ *
+ * @name Drawer
+ */
+function Drawer({ children }: DrawerProps) {
+    return (
+        <div css={style} data-drawer>
+            {children}
+        </div>
+    );
+}
+
+Drawer.bspkName = 'Drawer';
+
+export { Drawer };
+
+export const style = css`
+    display: flex;
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Dropdown.tsx

@@ -0,0 +1,251 @@
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { css } from '@emotion/react';
+
+import { ListItem } from './ListItem';
+import { Menu, MenuProps } from './Menu';
+import { Portal } from './Portal';
+import { Placement } from './hooks/useFloating';
+import { useFloatingMenu } from './hooks/useFloatingMenu';
+import { useId } from './hooks/useId';
+
+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
+ */
+function Dropdown<O extends DropdownOption = DropdownOption>({
+    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,
+}: DropdownProps<O>) {
+    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 (
+        <>
+            <input defaultValue={selected} name={name} type="hidden" />
+            <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}
+            >
+                <ListItem data-placeholder="" label={dropdownLabel || placeholder} readOnly />
+                <span data-svg>
+                    <SvgChevronRight />
+                </span>
+            </button>
+            <Portal>
+                <Menu
+                    data-floating
+                    isMulti={isMulti}
+                    itemCount={itemCount}
+                    items={options}
+                    onChange={(selectedValues, event) => {
+                        event?.preventDefault();
+                        if (!isMulti) closeMenu();
+                        onChange?.(selectedValues);
+                    }}
+                    renderListItem={renderListItem}
+                    selectedValues={selected}
+                    {...menuProps}
+                />
+            </Portal>
+        </>
+    );
+}
+
+Dropdown.bspkName = 'Dropdown';
+
+export { Dropdown };
+
+export 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);
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */