@bspk/ui 1.1.32 → 1.1.34

package/dist/components/Listbox/Listbox.d.ts

@@ -0,0 +1,119 @@
+import { ReactNode } from 'react';
+import { CommonProps, ElementProps, SetRef } from '../../index.js';
+import { ListItemProps } from '../ListItem';
+import { MenuProps } from '../Menu';
+/** The props for the listbox items. */
+export type ListboxItemProps = CommonProps<'disabled'> & ListItemProps & {
+    /** The content to display in the listbox item. */
+    label: string;
+    /** The value of the listbox item. */
+    value: string;
+};
+export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> & Pick<MenuProps, 'itemDisplayCount'> & {
+    /**
+     * Content to display in the listbox.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *         { value: '4', label: 'Option 4' },
+     *         { value: '5', label: 'Option 5' },
+     *         { value: '6', label: 'Option 6' },
+     *         { value: '7', label: 'Option 7' },
+     *         { value: '8', label: 'Option 8' },
+     *         { value: '9', label: 'Option 9' },
+     *         { value: '10', label: 'Option 10' },
+     *     ];
+     *
+     * @type Array<MenuItem>
+     */
+    items?: Item[];
+    /** A ref to the inner div element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /**
+     * The index of the currently highlighted item.
+     *
+     * @default undefined
+     */
+    activeIndex?: number;
+    /** The values of the selected items */
+    selectedValues?: string[];
+    /** A function which returns additional ListItem props to apply to each ListItem. */
+    listItemProps?: (props: {
+        index: number;
+        item: Item;
+        selected: boolean;
+    }) => Partial<ListItemProps<'button'>>;
+    /**
+     * Whether the listbox allows multiple selections.
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * The label for the "Select All" option.
+     *
+     * Ignored if `isMulti` is false.
+     *
+     * If `isMulti` is `true`, defaults to "Select All". If a string, it will be used as the label. If false the
+     * select all option will not be rendered.
+     *
+     * @default false
+     */
+    selectAll?: boolean | string;
+    /**
+     * The function to call when the selected values change.
+     *
+     * @example
+     *     (selectedValues, event) => setState({ selectedValues });
+     */
+    onChange?: (selectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * The children of the listbox added after the items.
+     *
+     * Usually only used for showing no items found.
+     */
+    children?: ReactNode;
+};
+/**
+ * A utility widget that allows users to select one or more items from a list of choices.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { ListBox } from '@bspk/ui/ListBox';
+ *
+ *     export function Example() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *
+ *         return (
+ *             <ListBox
+ *                 items={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                     { value: '4', label: 'Option 4' },
+ *                     { value: '5', label: 'Option 5' },
+ *                     { value: '6', label: 'Option 6' },
+ *                     { value: '7', label: 'Option 7' },
+ *                     { value: '8', label: 'Option 8' },
+ *                     { value: '9', label: 'Option 9' },
+ *                     { value: '10', label: 'Option 10' },
+ *                 ]}
+ *                 onChange={(selectedValues: string[]) => setSelected(selectedValues)}
+ *                 selectedValues={selected}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Listbox
+ * @phase Backlog
+ */
+declare function Listbox<Item extends ListboxItemProps>({ itemDisplayCount, items, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, ...props }: ElementProps<ListboxProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace Listbox {
+    var bspkName: string;
+}
+export { Listbox };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Listbox/Listbox.js

@@ -0,0 +1,85 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Checkbox } from '../Checkbox';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { useId } from '../../hooks/useId';
+const DEFAULT = {
+    selectAll: 'Select All',
+};
+/**
+ * A utility widget that allows users to select one or more items from a list of choices.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { ListBox } from '@bspk/ui/ListBox';
+ *
+ *     export function Example() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *
+ *         return (
+ *             <ListBox
+ *                 items={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                     { value: '4', label: 'Option 4' },
+ *                     { value: '5', label: 'Option 5' },
+ *                     { value: '6', label: 'Option 6' },
+ *                     { value: '7', label: 'Option 7' },
+ *                     { value: '8', label: 'Option 8' },
+ *                     { value: '9', label: 'Option 9' },
+ *                     { value: '10', label: 'Option 10' },
+ *                 ]}
+ *                 onChange={(selectedValues: string[]) => setSelected(selectedValues)}
+ *                 selectedValues={selected}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Listbox
+ * @phase Backlog
+ */
+function Listbox({ itemDisplayCount, items = [], innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, ...props }) {
+    const menuId = useId(idProp);
+    const selectAll = useMemo(() => {
+        if (!isMulti)
+            return false;
+        if (selectAllProp && typeof selectAllProp === 'string')
+            return selectAllProp;
+        return selectAllProp === true ? DEFAULT.selectAll : false;
+    }, [isMulti, selectAllProp]);
+    const allSelected = useMemo(() => !!(items.length && items.every((item) => selectedValues.includes(item.value))), [items, selectedValues]);
+    return (_jsxs(Menu, { ...props, "aria-multiselectable": isMulti || undefined, "data-bspk": "listbox", "data-disabled": disabled || undefined, "data-no-items": !items.length || undefined, id: menuId, innerRef: innerRef, itemCount: items.length, itemDisplayCount: itemDisplayCount, role: "listbox", children: [isMulti && selectAll && (_jsx(ListItem, { "data-selected": allSelected || undefined, id: `${menuId}-select-all`, label: selectAll, onClick: (event) => {
+                    onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                }, role: "option", tabIndex: -1, trailing: _jsx(Checkbox, { "aria-label": selectAll, checked: !!allSelected, indeterminate: !allSelected && selectedValues.length > 0, name: "", onChange: (checked) => {
+                        onChange?.(checked ? items.map((item) => item.value) : []);
+                    }, value: "" }) }, "select-all")), items.map((item, index) => {
+                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+                const renderProps = listItemProps?.({
+                    selected,
+                    index,
+                    item,
+                });
+                return (_createElement(ListItem, { ...item, ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, "aria-selected": selected || undefined, as: "button", disabled: item.disabled || undefined, id: `${menuId}-item-${index}`, key: `${menuId}-item-${index}`, label: renderProps?.label?.toString() || item.label?.toString(), 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 ? (_jsx(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 || item.trailing || undefined) }));
+            }), children] }));
+}
+Listbox.bspkName = 'Listbox';
+export { Listbox };
+//# sourceMappingURL=Listbox.js.map

package/dist/components/Listbox/Listbox.js.map

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

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

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

package/dist/components/Listbox/index.js

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

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

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

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { CommonProps, ElementProps, SetRef } from '../../index.js';
+import './menu.scss';
+export declare function menuItemId(menuId: string, index: number): string;
+export declare const MIN_ITEM_COUNT = 3;
+export declare const MAX_ITEM_COUNT = 10;
+export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
+    /** A ref to the inner div element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /**
+     * The items to display in the menu. These should be ListItem and Divider components.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Should the menu be rendered in a portal? This is useful for menus that need to be rendered outside of the normal
+     * DOM flow, such as dropdowns or modals.
+     *
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * The number of items to show in the menu. This is used to determine the height of the menu.
+     *
+     * - If set to `false`, the menu will not have a maximum height and will grow to fit its content.
+     * - If set to a number, the menu will display that many items before scrolling.
+     * - If not set or set to `undefined`, the menu will default to showing a minimum of 3 items and a maximum of 10
+     *   items.
+     */
+    itemDisplayCount?: number | false;
+    /**
+     * The number of items in the menu.
+     *
+     * This is used to determine the maximum height of the menu when `itemDisplayCount` is set to a number.
+     *
+     * @required
+     */
+    itemCount?: number;
+    /**
+     * Whether the menu is rendered as a floating element.
+     *
+     * @default true
+     */
+    floating?: boolean;
+    /** A function that is called when the user clicks outside of the menu. */
+    onOutsideClick?: () => void;
+};
+/**
+ * A container housing a simple list of options presented to the customer to select one option at a time.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { Menu } from '@bspk/ui/Menu';
+ *
+ *     export function Example() {
+ *         return (
+ *             <Menu>
+ *                 <ListItem label="List Item" />
+ *             </Menu>
+ *         );
+ *     }
+ *
+ * @name Menu
+ * @phase DesignReview
+ */
+declare function Menu({ innerRef, id: idProp, children, portal, itemDisplayCount: itemDisplayCountProp, itemCount, floating, onOutsideClick, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace Menu {
+    var bspkName: string;
+}
+export { Menu };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Menu/Menu.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Portal } from '../Portal';
+import { Scrim } from '../Scrim';
+import { useId } from '../../hooks/useId';
+import { cssWithVars } from '../../utils/cwv';
+import './menu.css.js';
+export function menuItemId(menuId, index) {
+    return `menu-${menuId}-item-${index}`;
+}
+export const MIN_ITEM_COUNT = 3;
+export const MAX_ITEM_COUNT = 10;
+// returns the item count to display based on the items and the itemDisplayCount bounded by the MIN_ITEM_COUNT and MAX_ITEM_COUNT
+function boundCount(itemLength = 0, itemDisplayCount = 0) {
+    const minItemCount = Math.max(MIN_ITEM_COUNT, itemLength);
+    const maxItemCount = Math.min(MAX_ITEM_COUNT, itemLength);
+    return (
+    // Ensure we don't display less than the minimum item count
+    Math.min(minItemCount, 
+    // Ensure we don't display more items than available
+    Math.min(maxItemCount, itemDisplayCount)));
+}
+/**
+ * A container housing a simple list of options presented to the customer to select one option at a time.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { Menu } from '@bspk/ui/Menu';
+ *
+ *     export function Example() {
+ *         return (
+ *             <Menu>
+ *                 <ListItem label="List Item" />
+ *             </Menu>
+ *         );
+ *     }
+ *
+ * @name Menu
+ * @phase DesignReview
+ */
+function Menu({ 
+//
+innerRef, id: idProp, children, portal = true, itemDisplayCount: itemDisplayCountProp, itemCount, floating = true, onOutsideClick, ...props }) {
+    const menuId = useId(idProp);
+    const itemDisplayCount = useMemo(() => {
+        return itemDisplayCountProp && boundCount(itemCount, itemDisplayCountProp);
+    }, [itemCount, itemDisplayCountProp]);
+    const menu = (_jsxs(_Fragment, { children: [floating && _jsx(Scrim, { "data-bspk-owner": "menu", onClick: () => onOutsideClick?.(), variant: "dropdown" }), _jsx("div", { role: "listbox", ...props, "data-bspk": "menu", "data-floating": floating || undefined, id: menuId, ref: innerRef, style: cssWithVars({
+                    ...props.style,
+                    '--overflow-y': itemCount && itemDisplayCount && itemCount > itemDisplayCount ? 'scroll' : undefined,
+                    maxHeight: itemDisplayCount === false
+                        ? 'auto'
+                        : `calc(calc(${itemDisplayCount} * var(--list-item-height)) + 2px /* borders */)`,
+                }), children: children })] }));
+    return portal ? _jsx(Portal, { children: menu }) : menu;
+}
+Menu.bspkName = 'Menu';
+export { Menu };
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAChC,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,iIAAiI;AACjI,SAAS,UAAU,CAAC,UAAU,GAAG,CAAC,EAAE,gBAAgB,GAAG,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC1D,OAAO;IACH,2DAA2D;IAC3D,IAAI,CAAC,GAAG,CACJ,YAAY;IACZ,oDAAoD;IACpD,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAC3C,CACJ,CAAC;AACN,CAAC;AA6CD;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,IAAI,CAAC;AACV,EAAE;AACF,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,GAAG,IAAI,EACb,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,cAAc,EACd,GAAG,KAAK,EACqB;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,oBAAoB,IAAI,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,CACT,8BACK,QAAQ,IAAI,KAAC,KAAK,uBAAiB,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,GAAG,EACnG,cACI,IAAI,EAAC,SAAS,KACV,KAAK,eACC,MAAM,mBACD,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;oBACf,GAAG,KAAK,CAAC,KAAK;oBACd,cAAc,EACV,SAAS,IAAI,gBAAgB,IAAI,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACxF,SAAS,EACL,gBAAgB,KAAK,KAAK;wBACtB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,aAAa,gBAAgB,kDAAkD;iBAC5F,CAAC,YAED,QAAQ,GACP,IACP,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,cAAE,IAAI,GAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AACnD,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Menu/MenuExample.d.ts

@@ -0,0 +1,6 @@
+import { ComponentExampleFn } from '../../utils/demo';
+import { ElementProps } from '../..';
+import { MenuProps } from '.';
+export declare const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & {
+    'data-dark-mode': boolean;
+}>;

package/dist/components/Menu/MenuExample.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgAccountCircle } from '@bspk/icons/AccountCircle';
+import { SvgDarkMode } from '@bspk/icons/DarkMode';
+import { SvgDarkModeFill } from '@bspk/icons/DarkModeFill';
+import { SvgHelp } from '@bspk/icons/Help';
+import { SvgLicense } from '@bspk/icons/License';
+import { SvgLogout } from '@bspk/icons/Logout';
+import { SvgMenuBook } from '@bspk/icons/MenuBook';
+import { SvgSettings } from '@bspk/icons/Settings';
+import { Avatar } from '../Avatar';
+import { Divider } from '../Divider';
+import { ListItem } from '../ListItem';
+import { Switch } from '../Switch';
+export const MenuExample = ({ action, }) => ({
+    render: ({ props, Component, setState }) => {
+        return (_jsxs(Component, { ...props, "aria-label": "Settings Menu", floating: false, portal: false, style: { padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }, children: [_jsx(ListItem, { label: "Michael Scott", leading: _jsx(Avatar, { image: "/profile2.jpg", name: "Michael Scott" }), subText: "michael.scott@email.com" }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/my-profile", label: "My profile", leading: _jsx(SvgAccountCircle, {}) }), _jsx(ListItem, { href: "#/settings", label: "Settings", leading: _jsx(SvgSettings, {}) }), _jsx(ListItem, { label: "Dark mode", leading: props['data-dark-mode'] ? _jsx(SvgDarkModeFill, {}) : _jsx(SvgDarkMode, {}), role: "checkbox", trailing: _jsx(Switch, { "aria-label": "Toggle dark mode", checked: !!props['data-dark-mode'], name: "dark-mode", onChange: () => {
+                            setState((prev) => ({ 'data-dark-mode': !prev['data-dark-mode'] }));
+                            action('Dark mode toggled');
+                        } }) }), _jsx(Divider, { inset: 2, padding: false, thickness: "light" }), _jsx(ListItem, { href: "#/guide-tutorial", label: "Guide and tutorial", leading: _jsx(SvgMenuBook, {}) }), _jsx(ListItem, { href: "#/help-center", label: "Help center", leading: _jsx(SvgHelp, {}) }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/go-premium", label: "Go premium", leading: _jsx(SvgLicense, {}) }), _jsx(ListItem, { label: "Log out", leading: _jsx(SvgLogout, {}), onClick: () => {
+                        action('Log out clicked');
+                    } })] }));
+    },
+    disableProps: ['floating', 'portal'],
+});
+//# sourceMappingURL=MenuExample.js.map

package/dist/components/Menu/MenuExample.js.map

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

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

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

package/dist/components/Menu/index.js

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

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

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

package/dist/components/Menu/menu.css

@@ -0,0 +1,20 @@
+[data-bspk=menu] {
+  --overflow-y: hidden;
+  width: 332px;
+  box-sizing: border-box;
+  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;
+  overflow: hidden var(--overflow-y);
+}
+[data-bspk=menu][data-floating] {
+  z-index: var(--z-index-dropdown);
+}
+[data-bspk=menu] [data-bspk=list-item][data-selected] {
+  background-color: var(--surface-brand-primary-highlight);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Menu/menu.css.js

@@ -0,0 +1,26 @@
+/** * 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=menu] {
+  --overflow-y: hidden;
+  width: 332px;
+  box-sizing: border-box;
+  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;
+  overflow: hidden var(--overflow-y);
+}
+[data-bspk=menu][data-floating] {
+  z-index: var(--z-index-dropdown);
+}
+[data-bspk=menu] [data-bspk=list-item][data-selected] {
+  background-color: var(--surface-brand-primary-highlight);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/MenuButton/MenuButton.d.ts

@@ -0,0 +1,23 @@
+import { ElementProps } from '../../index.js';
+import { ButtonProps } from '../Button';
+import './menu-button.scss';
+export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
+/**
+ * Utility component used within top navigation.
+ *
+ * @example
+ *     import { MenuButton } from '@bspk/ui/MenuButton';
+ *
+ *     export function Example() {
+ *         return <MenuButton />;
+ *     }
+ *
+ * @name MenuButton
+ * @phase Utility
+ */
+declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
+declare namespace MenuButton {
+    var bspkName: string;
+}
+export { MenuButton };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/MenuButton/MenuButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgMenu } from '@bspk/icons/Menu';
+import './menu-button.css.js';
+/**
+ * Utility component used within top navigation.
+ *
+ * @example
+ *     import { MenuButton } from '@bspk/ui/MenuButton';
+ *
+ *     export function Example() {
+ *         return <MenuButton />;
+ *     }
+ *
+ * @name MenuButton
+ * @phase Utility
+ */
+function MenuButton(props) {
+    return (_jsx("button", { "data-bspk": "menu-button", ...props, children: _jsx(SvgMenu, {}) }));
+}
+MenuButton.bspkName = 'MenuButton';
+export { MenuButton };
+//# sourceMappingURL=MenuButton.js.map

package/dist/components/MenuButton/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAI3C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;;;GAYG;AACH,SAAS,UAAU,CAAC,KAA8C;IAC9D,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

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

package/dist/components/MenuButton/index.js

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

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

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

package/dist/components/MenuButton/menu-button.css

@@ -0,0 +1,16 @@
+[data-bspk=menu-button] {
+  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/dist/components/MenuButton/menu-button.css.js

@@ -0,0 +1,22 @@
+/** * 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=menu-button] {
+  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 */
+`));
+document.head.appendChild(style);
+