@bspk/ui 1.0.0

package/src/Menu.tsx

@@ -0,0 +1,263 @@
+import { css } from '@emotion/react';
+import { ComponentProps, CSSProperties, MouseEvent as ReactMouseEvent, useMemo } from 'react';
+
+import { Checkbox } from './Checkbox';
+import { ListItem } from './ListItem';
+import { Txt } from './Txt';
+import { useId } from './hooks/useId';
+
+import { CommonProps, ElementProps } from './';
+
+export const MIN_ITEM_COUNT = 3;
+export const MAX_ITEM_COUNT = 10;
+
+export function menuItemId(menuId: string, index: number) {
+    return `menu-${menuId}-item-${index}`;
+}
+
+/** The props for the renderListItem function. Useful for customizing menu list items. */
+export type RenderListItemParams<M extends MenuItem> = Pick<
+    MenuProps<M>,
+    'activeIndex' | 'isMulti' | 'selectedValues'
+> & {
+    index: number;
+    item: M;
+    menuId: string;
+    selected: boolean;
+    itemId?: string;
+};
+
+/** The props for the menu items. */
+export type MenuItem = CommonProps<'disabled'> & {
+    /** The content to display in the menu item. */
+    label: string;
+    /** The value of the menu item. */
+    value: string;
+    /** The unique id of the menu item. */
+    id?: string;
+};
+
+export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled' | 'id'> & {
+    /**
+     * The number of items to display in the menu
+     *
+     * @default 5
+     * @minimum 3
+     * @maximum 10
+     */
+    itemCount?: number;
+    /**
+     * Content to display in the menu.
+     *
+     * @type MenuItems
+     */
+    items?: Item[];
+    /** A ref to the inner div element. */
+    innerRef?: (node: HTMLElement | null) => void;
+    /**
+     * Message to display when no results are found
+     *
+     * @type multiline
+     */
+    noResultsMessage?: string;
+    /** The index of the currently highlighted item. */
+    activeIndex?: number;
+    /** The values of the selected items */
+    selectedValues?: string[];
+    /**
+     * A function which given data about the list item returns additional list item props used to render the list items.
+     *
+     * @type (props: RenderListItemParams) => ComponentProps<typeof ListItem>;
+     * @param {RenderListItemParams} props
+     * @returns {ComponentProps<typeof ListItem>}
+     */
+    renderListItem?: (props: RenderListItemParams<Item>) => Partial<ComponentProps<typeof ListItem>>;
+    /**
+     * Whether the menu allows multiple selections.
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * The function to call when the selected values change.
+     *
+     * @type (selectedValues: String[], event: ChangeEvent) => void
+     * @param {string[]} selectedValues
+     * @param {ChangeEvent} event
+     * @returns {void}
+     */
+    onChange?: (selectedValues: string[], event?: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+/**
+ * A container housing a simple list of options presented to the user to select one option at a time.
+ *
+ * @name Menu
+ */
+function Menu<Item extends MenuItem = MenuItem>({
+    itemCount: itemCountProp = 5,
+    items: itemsProp = [],
+    noResultsMessage,
+    innerRef,
+    onChange,
+    activeIndex,
+    selectedValues = [],
+    disabled,
+    id: idProp,
+    renderListItem,
+    isMulti,
+    ...props
+}: ElementProps<MenuProps<Item>, 'div'>) {
+    const menuId = useId(idProp);
+    const items = Array.isArray(itemsProp) ? itemsProp : [];
+    const itemCount = useMemo(
+        () =>
+            // Ensure itemCount is within the range of items.length
+            Math.min(
+                items.length,
+                // pin itemCountProp to a range of 3 to 10
+                Math.max(MIN_ITEM_COUNT, Math.min(itemCountProp, MAX_ITEM_COUNT)),
+            ),
+        [itemCountProp, items.length],
+    );
+
+    return (
+        <div
+            {...props}
+            css={style}
+            data-disabled={disabled || undefined}
+            data-item-count={itemCount || undefined}
+            data-menu=""
+            data-no-items={!items.length || undefined}
+            id={menuId}
+            ref={innerRef}
+            role="listbox"
+            style={{ ...props.style, '--item-count': itemCount } as CSSProperties}
+        >
+            {items.length ? (
+                items.map((item, index) => {
+                    const itemId = item.id || menuItemId(menuId, index);
+
+                    const selected = Array.isArray(selectedValues) && selectedValues.includes(item.value);
+
+                    const renderProps = renderListItem?.({
+                        activeIndex,
+                        index,
+                        item,
+                        selectedValues,
+                        isMulti,
+                        menuId: menuId || '',
+                        selected,
+                        itemId,
+                    });
+
+                    return (
+                        <ListItem
+                            {...renderProps}
+                            active={activeIndex === index || undefined}
+                            aria-disabled={item.disabled || undefined}
+                            aria-posinset={index + 1}
+                            aria-selected={selected || undefined}
+                            as="button"
+                            data-menu-item
+                            data-selected={selected || undefined}
+                            disabled={item.disabled || undefined}
+                            id={itemId}
+                            key={itemId}
+                            label={renderProps?.label?.toString() || item.label?.toString()}
+                            onClick={(event) => {
+                                if (renderProps) renderProps?.onClick?.(event);
+
+                                if (onChange) {
+                                    if (!isMulti) {
+                                        onChange?.([item.value], event);
+                                        return;
+                                    }
+                                    onChange(
+                                        selected
+                                            ? selectedValues.filter((value) => value !== item.value)
+                                            : [...selectedValues, item.value],
+                                        event,
+                                    );
+                                }
+                            }}
+                            role="option"
+                            tabIndex={-1}
+                            trailing={
+                                isMulti ? (
+                                    <Checkbox
+                                        aria-label={item.label}
+                                        checked={selected}
+                                        name={item.value}
+                                        onChange={(checked) => {
+                                            onChange?.(
+                                                checked
+                                                    ? selectedValues.filter((value) => value !== item.value)
+                                                    : [...selectedValues, item.value],
+                                            );
+                                        }}
+                                        value={item.value}
+                                    />
+                                ) : (
+                                    renderProps?.trailing
+                                )
+                            }
+                        />
+                    );
+                })
+            ) : (
+                <>
+                    <Txt as="div" variant="heading-h5">
+                        No results found
+                    </Txt>
+                    <Txt as="div" variant="body-base">
+                        {noResultsMessage}
+                    </Txt>
+                </>
+            )}
+        </div>
+    );
+}
+
+Menu.bspkName = 'Menu';
+
+export { Menu };
+
+export const style = css`
+    /** 
+  --item-count is set via inline style. :)
+   */
+
+    width: 332px;
+    border: 1px solid var(--stroke-neutral-low);
+    background-color: var(--surface-neutral-t1-base);
+    box-shadow: var(--drop-shadow-float);
+    border-radius: var(--radius-large);
+    display: flex;
+    flex-direction: column;
+
+    --item-size: var(--spacing-sizing-12);
+
+    &[data-floating] {
+        z-index: var(--z-index-dropdown);
+    }
+
+    &[data-item-count] {
+        height: calc(var(--item-count) * var(--item-size));
+        overflow-y: scroll;
+    }
+
+    &[data-no-items] {
+        padding: var(--spacing-sizing-08) var(--spacing-sizing-04);
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-sizing-03);
+    }
+
+    [data-list-item] {
+        min-height: var(--item-size);
+        height: var(--item-size);
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/MenuButton.tsx

@@ -0,0 +1,45 @@
+import { SvgMenu } from '@bspk/icons/Menu';
+import { css } from '@emotion/react';
+import { ElementType } from 'react';
+
+import { ButtonProps } from './Button';
+
+import { ElementProps } from '.';
+
+export type MenuButtonProps<As extends ElementType> = Pick<ButtonProps<As>, 'as' | 'onClick'>;
+
+/**
+ * Utility component used within top navigation.
+ *
+ * @name MenuButton
+ */
+function MenuButton<As extends ElementType = 'button'>({ as, ...props }: ElementProps<MenuButtonProps<As>, As>) {
+    const As: ElementType = as || 'div';
+
+    return (
+        <button {...props} css={style}>
+            <SvgMenu />
+        </button>
+    );
+}
+
+MenuButton.bspkName = 'MenuButton';
+
+export { MenuButton };
+
+export const style = css`
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    height: 48px;
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--spacing-sizing-01);
+    color: var(--foreground-neutral-on-surface-variant-01);
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Modal.tsx

@@ -0,0 +1,104 @@
+import { SvgClose } from '@bspk/icons/Close';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+
+import { Button } from './Button';
+import { Dialog, DialogProps } from './Dialog';
+import { Txt } from './Txt';
+import { useId } from './hooks/useId';
+import { srOnly } from './utils/srOnly';
+
+export type ModalProps = DialogProps & {
+    /**
+     * Modal header.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * Modal description.
+     *
+     * @required
+     */
+    description: string;
+};
+
+/**
+ * Modals display important information that users need to acknowledge. They appear over the interface and block further
+ * interactions until an action is selected. Modal is a wrapper around the Dialog component that provides a header and
+ * footer for the dialog.
+ *
+ * TODO: Add support for custom header and footer
+ *
+ * @name Modal
+ */
+function Modal({
+    //
+    header,
+    description,
+    children,
+    id: idProp,
+    ...dialogProps
+}: ModalProps) {
+    const id = useId(idProp);
+
+    const ids = useMemo(
+        () => ({
+            description: `dialog-dialog-${id}-description`,
+            title: `dialog-dialog-${id}-title`,
+        }),
+        [id],
+    );
+
+    return (
+        <Dialog {...dialogProps} aria-describedby={ids.description} aria-labelledby={ids.title}>
+            <div css={style} data-modal-body>
+                <header>
+                    <Txt as="div" data-dialog-title id={ids.title} variant="heading-h4">
+                        {header}
+                    </Txt>
+                    <Button
+                        icon={<SvgClose />}
+                        label="close"
+                        onClick={dialogProps.onClose}
+                        showLabel={false}
+                        variant="tertiary"
+                    />
+                </header>
+                <main>
+                    <p {...srOnly(children)} data-dialog-description id={ids.description}>
+                        {description}
+                    </p>
+                    {children}
+                </main>
+            </div>
+        </Dialog>
+    );
+}
+
+Modal.bspkName = 'Modal';
+
+export { Modal };
+
+export const style = css`
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    gap: var(--spacing-sizing-02);
+    padding: var(--spacing-sizing-04);
+
+    > header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacing-sizing-04);
+    }
+
+    main {
+        overflow: auto;
+        flex: 1;
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/MultiSelection.tsx

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

package/src/NavigationRail.tsx

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

package/src/NumberField.tsx

@@ -0,0 +1,47 @@
+import { FormField, FormFieldProps } from './FormField';
+import { NumberInput, NumberInputProps } from './NumberInput';
+
+export type NumberFieldProps = Pick<
+    NumberInputProps,
+    'centered' | 'disabled' | 'id' | 'invalid' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'
+> &
+    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * This component takes properties from the FormField and NumberInput components.
+ *
+ * @name NumberField
+ */
+function NumberField({
+    label,
+    errorMessage: errorMessageProp,
+    helperText,
+    controlId,
+    labelTrailing,
+    required,
+    ...inputProps
+}: NumberFieldProps) {
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
+
+    return (
+        <FormField
+            controlId={controlId}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => <NumberInput {...inputProps} {...fieldProps} aria-label={label} id={controlId} />}
+        </FormField>
+    );
+}
+
+NumberField.bspkName = 'NumberField';
+
+export { NumberField };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */