@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/interaction/Touchable.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export declare const Touchable: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    variant: Touchable.Variant;
+    dark?: boolean;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare namespace Touchable {
+    type Props = HTMLAttributes<HTMLButtonElement> & {
+        variant: Variant;
+        dark?: boolean;
+        disabled?: boolean;
+    };
+    type Variant = 'icon' | 'button' | 'card';
+}

package/dist/core/components/interaction/Touchable.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Touchable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+exports.Touchable = (0, react_1.forwardRef)(function Touchable(_a, ref) {
+    var { className, variant, dark = false, disabled = false, children } = _a, props = __rest(_a, ["className", "variant", "dark", "disabled", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, 'Touchable-root', {
+            'Touchable-icon': variant === 'icon',
+            'Touchable-button': variant === 'button',
+            'Touchable-card': variant === 'card',
+            'Touchable-light': !dark,
+            'Touchable-dark': dark,
+            'Touchable-disabled': disabled
+        }), disabled: disabled }, props, { children: children })));
+});

package/dist/core/components/interaction/centersheet/CenterSheet.d.ts

@@ -0,0 +1,20 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { Tagged } from 'type-fest';
+export declare const CenterSheet: import("react").ForwardRefExoticComponent<CenterSheet.Props & import("react").RefAttributes<CenterSheet.Ref>>;
+export declare namespace CenterSheet {
+    type Props = {
+        className?: string;
+        name?: string;
+        open?: boolean;
+        onOpened?: Callback.Void;
+        onClose?: Callback.Void;
+        onClosed?: Callback.Void;
+        children?: ReactNode;
+    };
+    type Id = Tagged<string, 'CenterSheet.Id'>;
+    interface Ref {
+        readonly isOpen: boolean;
+        close(): void;
+    }
+}

package/dist/core/components/interaction/centersheet/CenterSheet.js

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenterSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const react_dom_1 = require("react-dom");
+const react_hotkeys_hook_1 = require("react-hotkeys-hook");
+const rxjs_1 = require("rxjs");
+const hooks_1 = require("../../../hooks");
+const CenterSheetContext_1 = require("./CenterSheetContext");
+// component
+exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className, name = '', open = false, onOpened = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed = funnel_core_1.Fn.NoOp, children }, ref) {
+    // bind state + ref + hooks
+    const nameRef = (0, react_2.useRef)(name);
+    const id = (0, react_2.useId)();
+    const { eventBus, anchorId } = (0, react_2.useContext)(CenterSheetContext_1.CenterSheetContext);
+    const onOpenedRef = (0, react_2.useRef)(onOpened);
+    onOpenedRef.current = onOpened;
+    const onClosedRef = (0, react_2.useRef)(onClosed);
+    onClosedRef.current = onClosed;
+    // always update name (so open has latest value)
+    nameRef.current = name;
+    // bind ref
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        isOpen: open,
+        close: () => onClosedRef.current()
+    }), [open]);
+    // handle open/close events
+    (0, react_2.useEffect)(() => {
+        // raise open event
+        if (open) {
+            eventBus.next({
+                type: 'onOpen',
+                sheetInfo: {
+                    id,
+                    name: nameRef.current
+                }
+            });
+        }
+        // or close event
+        else {
+            eventBus.next({
+                type: 'onClose',
+                sheetId: id
+            });
+        }
+    }, [id, eventBus, open]);
+    // ensure close on unmount
+    (0, react_2.useEffect)(() => {
+        return () => eventBus.next({
+            type: 'onClose',
+            sheetId: id
+        });
+    }, [id, eventBus]);
+    // handle close request
+    (0, react_2.useEffect)(() => {
+        // subscribe to events
+        const subscription = eventBus
+            .pipe((0, rxjs_1.filter)(event => event.type === 'close' && event.sheetId === id))
+            .subscribe(() => onClose());
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [eventBus, id, onClose]);
+    // wire dismiss on escape (when open)
+    const { scope } = (0, hooks_1.useHotkeyScopeLock)(open);
+    (0, react_hotkeys_hook_1.useHotkeys)(['esc'], () => onClosedRef.current(), {
+        scopes: scope,
+        enableOnFormTags: ['input', 'textarea']
+    }, []);
+    // helpers
+    const onAnimationComplete = (definition) => {
+        if (definition === 'visible') {
+            onOpenedRef.current();
+        }
+        else if (definition === 'exit') {
+            onClosedRef.current();
+        }
+    };
+    // or skip if on server-side
+    if (!funnel_core_1.Browser.available) {
+        return null;
+    }
+    // or skip if there's no anchor in the DOM
+    const anchorSelector = `#${CSS.escape(anchorId)}`;
+    const anchor = document.querySelector(anchorSelector);
+    if (!anchor) {
+        console.warn(`[CenterSheet] unable to find anchor "${anchorSelector}" - did you mount the <CenterSheetContainer /?>`);
+        return null;
+    }
+    // render
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: open &&
+            (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('absolute inset-0 z-popup-l1 pointer-events-auto', 'flex flex-col justify-stretch items-center pt-l12 px-l6 md:px-l10 lg:px-l15'), variants: Animations.container, onAnimationComplete: definition => onAnimationComplete(definition), initial: "hidden", animate: "visible", exit: "exit", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'relative h-full w-full max-w-[1000px] max-h-full overflow-hidden', 'text-onSurface bg-background rounded-t-lg shadow-objectEditor'), children: children })] }, id) }), anchor);
+});
+// animations
+var Animations;
+(function (Animations) {
+    // content (fade in/out when showing)
+    Animations.content = {
+        hidden: {
+            opacity: 0
+        },
+        visible: {
+            opacity: 1
+        }
+    };
+    // sheet (slide up from bottom)
+    Animations.container = {
+        hidden: {
+            y: '100%'
+        },
+        visible: {
+            y: 0,
+            originY: 0,
+            transition: {
+                ease: 'easeOut',
+                duration: 0.4,
+                when: 'beforeChildren'
+            }
+        },
+        exit: {
+            y: '100%',
+            transition: {
+                ease: 'easeOut',
+                duration: 0.3,
+                bounce: 0,
+                when: 'afterChildren'
+            }
+        }
+    };
+})(Animations || (Animations = {}));

package/dist/core/components/interaction/centersheet/CenterSheetContainer.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare function CenterSheetContainer({ children }: CenterSheetContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CenterSheetContainer {
+    type Props = PropsWithChildren;
+}

package/dist/core/components/interaction/centersheet/CenterSheetContainer.js

@@ -0,0 +1,65 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenterSheetContainer = CenterSheetContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const CenterSheetContext_1 = require("./CenterSheetContext");
+// component
+function CenterSheetContainer({ children }) {
+    // bind context
+    const anchorId = (0, react_1.useId)();
+    const [context, setContext] = (0, react_1.useState)(() => ({
+        eventBus: new rxjs_1.Subject(),
+        anchorId,
+        sheets: []
+    }));
+    const { eventBus } = context;
+    // handle open/close events
+    (0, react_1.useEffect)(() => {
+        // register to events
+        const subscription = eventBus.subscribe(event => {
+            // add new sheet on open
+            const { type } = event;
+            if (type === 'onOpen') {
+                const { sheetInfo } = event;
+                setContext((_a) => {
+                    var { sheets } = _a, context = __rest(_a, ["sheets"]);
+                    return (Object.assign(Object.assign({}, context), { sheets: [...sheets, sheetInfo] }));
+                });
+            }
+            // drop sheet on close
+            else if (type === 'onClose') {
+                const { sheetId } = event;
+                setContext((_a) => {
+                    var { sheets } = _a, context = __rest(_a, ["sheets"]);
+                    return (Object.assign(Object.assign({}, context), { sheets: sheets.filter(sheet => sheet.id !== sheetId) }));
+                });
+            }
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [eventBus]);
+    // render
+    const { sheets } = context;
+    const active = sheets.length > 0;
+    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop-l1 interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1', {
+                            'pointer-events-none opacity-none': !active,
+                            'pointer-events-auto opacity-full': active
+                        }) }, "backdrop") }) })] }));
+}

package/dist/core/components/interaction/centersheet/CenterSheetContext.d.ts

@@ -0,0 +1,27 @@
+import { Subject } from 'rxjs';
+import { CenterSheet } from './CenterSheet';
+export declare const CenterSheetContext: import("react").Context<CenterSheetContext.Data>;
+export declare namespace CenterSheetContext {
+    type Data = {
+        readonly eventBus: Subject<Event>;
+        readonly anchorId: string;
+        readonly sheets: ReadonlyArray<SheetInfo>;
+    };
+    type SheetInfo = {
+        id: CenterSheet.Id;
+        name: string;
+    };
+    type Event = OpenEvent | CloseEvent | CloseRequestEvent;
+    type OpenEvent = {
+        type: 'onOpen';
+        sheetInfo: SheetInfo;
+    };
+    type CloseEvent = {
+        type: 'onClose';
+        sheetId: CenterSheet.Id;
+    };
+    type CloseRequestEvent = {
+        type: 'close';
+        sheetId: CenterSheet.Id;
+    };
+}

package/dist/core/components/interaction/centersheet/CenterSheetContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenterSheetContext = void 0;
+const react_1 = require("react");
+// context
+exports.CenterSheetContext = (0, react_1.createContext)({});

package/dist/core/components/interaction/centersheet/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CenterSheet';
+export * from './CenterSheetContainer';
+export * from './CenterSheet';

package/dist/core/components/interaction/centersheet/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CenterSheet"), exports);
+__exportStar(require("./CenterSheetContainer"), exports);
+__exportStar(require("./CenterSheet"), exports);

package/dist/core/components/interaction/index.d.ts

@@ -0,0 +1,29 @@
+export * from './centersheet/index';
+export * from './menu/index';
+export * from './table/index';
+export * from './Animate';
+export * from './AvatarButton';
+export * from './Button';
+export * from './ButtonLink';
+export * from './Checkbox';
+export * from './Chip';
+export * from './ChipFilters';
+export * from './ChoiceChip';
+export * from './Combobox';
+export * from './DatePicker';
+export * from './DateTimePicker';
+export * from './IconButton';
+export * from './IconLink';
+export * from './LinkGroup';
+export * from './Loader';
+export * from './MiniEditor';
+export * from './MultiSelectControls';
+export * from './NavButton';
+export * from './Picker';
+export * from './Popup';
+export * from './Profile';
+export * from './QuickInput';
+export * from './SegmentedButton';
+export * from './Sortable';
+export * from './Toggle';
+export * from './Touchable';

package/dist/core/components/interaction/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./centersheet/index"), exports);
+__exportStar(require("./menu/index"), exports);
+__exportStar(require("./table/index"), exports);
+__exportStar(require("./Animate"), exports);
+__exportStar(require("./AvatarButton"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./ButtonLink"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./Chip"), exports);
+__exportStar(require("./ChipFilters"), exports);
+__exportStar(require("./ChoiceChip"), exports);
+__exportStar(require("./Combobox"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./DateTimePicker"), exports);
+__exportStar(require("./IconButton"), exports);
+__exportStar(require("./IconLink"), exports);
+__exportStar(require("./LinkGroup"), exports);
+__exportStar(require("./Loader"), exports);
+__exportStar(require("./MiniEditor"), exports);
+__exportStar(require("./MultiSelectControls"), exports);
+__exportStar(require("./NavButton"), exports);
+__exportStar(require("./Picker"), exports);
+__exportStar(require("./Popup"), exports);
+__exportStar(require("./Profile"), exports);
+__exportStar(require("./QuickInput"), exports);
+__exportStar(require("./SegmentedButton"), exports);
+__exportStar(require("./Sortable"), exports);
+__exportStar(require("./Toggle"), exports);
+__exportStar(require("./Touchable"), exports);

package/dist/core/components/interaction/menu/Menu.d.ts

@@ -0,0 +1,25 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Popup } from '../Popup';
+import { MenuItem } from './MenuItem';
+import { MenuController } from './useMenuController';
+export declare function Menu<TItemId extends string>(props: Menu.Props<TItemId>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Menu {
+    type Props<TItemId extends string> = Props.Static<TItemId> | Props.Controlled<TItemId>;
+    namespace Props {
+        type Base<TItemId extends string> = {
+            label?: string;
+            title?: string;
+            onItemClick?: Callback<TItemId>;
+        };
+        export type Static<TItemId extends string> = Omit<Popup.Props, 'children'> & Base<TItemId> & {
+            items: ReadonlyArray<MenuItem<TItemId>>;
+            controller?: never;
+            selectedItem?: TItemId;
+        };
+        export type Controlled<TItemId extends string> = Omit<Popup.Props, 'anchor' | 'open' | 'children'> & Base<TItemId> & {
+            items?: never;
+            controller: MenuController<TItemId>;
+        };
+        export {};
+    }
+}

package/dist/core/components/interaction/menu/Menu.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = Menu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const Popup_1 = require("../Popup");
+const MenuList_1 = require("./MenuList");
+// component
+function Menu(props) {
+    // bind props
+    const { className, label, title } = props;
+    const { popupProps, menuListProps } = getPopupMenuProps(props);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, popupProps, { className: (0, classnames_1.default)(className, 'min-w-[200px] glass-overlay rounded-lg overflow-hidden'), children: [(label || title) &&
+                (0, jsx_runtime_1.jsxs)("div", { className: "border-b border-solid border-border-l1 px-l6 pt-l4 pb-l5", children: [label &&
+                            (0, jsx_runtime_1.jsx)("span", { className: "block body-xs text-content-secondary", children: label }), title &&
+                            (0, jsx_runtime_1.jsx)("h3", { className: "heading-xs text-content-primary ", children: title })] }), (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, Object.assign({}, menuListProps))] })));
+}
+function getPopupMenuProps(props) {
+    var _a, _b, _c, _d;
+    // handle controlled menu
+    const anchorOffset = 4;
+    const viewportPadding = 6;
+    if (isMenuControlled(props)) {
+        const { controller, onClose = funnel_core_1.Fn.NoOp } = props;
+        return {
+            popupProps: {
+                placement: props.placement,
+                anchorOffset: (_a = props.anchorOffset) !== null && _a !== void 0 ? _a : anchorOffset,
+                viewportPadding: (_b = props.viewportPadding) !== null && _b !== void 0 ? _b : viewportPadding,
+                anchor: controller.anchor,
+                open: controller.isOpen,
+                onClose: () => {
+                    controller.close();
+                    onClose();
+                }
+            },
+            menuListProps: {
+                items: controller.items,
+                selectedItem: controller.selectedItem,
+                onItemClick: (id) => {
+                    // close menu
+                    controller.close();
+                    // update selected item
+                    controller.selectedItem = id;
+                    // raise click
+                    if (props.onItemClick) {
+                        props.onItemClick(id);
+                    }
+                }
+            }
+        };
+    }
+    // or uncontrolled
+    else {
+        return {
+            popupProps: {
+                placement: props.placement,
+                anchorOffset: (_c = props.anchorOffset) !== null && _c !== void 0 ? _c : anchorOffset,
+                viewportPadding: (_d = props.viewportPadding) !== null && _d !== void 0 ? _d : viewportPadding,
+                anchor: props.anchor,
+                open: props.open,
+                onClose: props.onClose
+            },
+            menuListProps: {
+                items: props.items,
+                selectedItem: props.selectedItem,
+                onItemClick: (id) => {
+                    // close menu
+                    if (props.onClose) {
+                        props.onClose();
+                    }
+                    // raise click
+                    if (props.onItemClick) {
+                        props.onItemClick(id);
+                    }
+                }
+            }
+        };
+    }
+}
+function isMenuControlled(props) {
+    return 'controller' in props;
+}

package/dist/core/components/interaction/menu/MenuButton.d.ts

@@ -0,0 +1,16 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Icon } from '../../visuals';
+export declare function MenuButton({ className, label, caption, icon, iconSize, disabled, destructive, selected, onClick, }: MenuButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuButton {
+    type Props = {
+        className?: string;
+        label: string;
+        caption?: string;
+        icon?: Icon.Variant;
+        iconSize?: Icon.Size;
+        disabled?: boolean;
+        selected?: boolean;
+        destructive?: boolean;
+        onClick?: Callback.Void;
+    };
+}

package/dist/core/components/interaction/menu/MenuButton.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuButton = MenuButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../../visuals");
+// component
+function MenuButton({ className, label, caption, icon, iconSize, disabled = false, destructive = false, selected = false, onClick = funnel_core_1.Fn.NoOp, }) {
+    // helpers
+    const onMenuClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)(className, 'w-full flex justify-start items-center gap-l4 px-l6 p-l4 rounded-md interpolate-fast', 'label-md', {
+            'text-content-primary outline-none cursor-pointer': !disabled && !selected && !destructive,
+            'hover:bg-ix-util-hover/tint1 active:bg-ix-util-press/tint2 focus-visible:bg-transparent': !disabled && !selected && !destructive,
+            'text-destructive cursor-pointer': !disabled && !selected && destructive,
+            'label-strong text-primary-tint cursor-default': selected,
+            'text-content-primary cursor-default': disabled
+        }), disabled: disabled || selected, onClick: onMenuClick, children: [icon &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: iconSize }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start shrink-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "ellipsis", children: label }), caption &&
+                        (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('body-xs ellipsis', {
+                                'text-content-secondary': !disabled && !selected
+                            }), children: caption })] })] }));
+}

package/dist/core/components/interaction/menu/MenuItem.d.ts

@@ -0,0 +1,27 @@
+import { Icon } from '../../visuals';
+export type MenuItem<TItemId extends string = string> = MenuItem.Option<TItemId> | MenuItem.Divider | MenuItem.Label;
+export declare namespace MenuItem {
+    type Option<TItemId extends string> = {
+        id: TItemId;
+        label: string;
+        caption?: string;
+        icon?: Icon.Variant;
+        iconSize?: Icon.Size;
+        destructive?: boolean;
+        disabled?: boolean;
+    };
+    namespace Option {
+        function filter<TItemId extends string = string>(item: MenuItem<TItemId>): item is Option<TItemId>;
+    }
+    type Divider = 'divider';
+    const divider: Divider;
+    namespace Divider {
+        function filter(item: MenuItem): item is Divider;
+    }
+    type Label = {
+        label: string;
+    };
+    namespace Label {
+        function filter(item: MenuItem): item is Label;
+    }
+}

package/dist/core/components/interaction/menu/MenuItem.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+// extension
+var MenuItem;
+(function (MenuItem) {
+    let Option;
+    (function (Option) {
+        // guard
+        function filter(item) {
+            return typeof item === 'object' && 'id' in item;
+        }
+        Option.filter = filter;
+    })(Option = MenuItem.Option || (MenuItem.Option = {}));
+    MenuItem.divider = 'divider';
+    let Divider;
+    (function (Divider) {
+        // guard
+        function filter(item) {
+            return item === MenuItem.divider;
+        }
+        Divider.filter = filter;
+    })(Divider = MenuItem.Divider || (MenuItem.Divider = {}));
+    let Label;
+    (function (Label) {
+        // guard
+        function filter(item) {
+            return typeof item === 'object' && 'label' in item;
+        }
+        Label.filter = filter;
+    })(Label = MenuItem.Label || (MenuItem.Label = {}));
+})(MenuItem || (exports.MenuItem = MenuItem = {}));

package/dist/core/components/interaction/menu/MenuList.d.ts

@@ -0,0 +1,11 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { MenuItem } from './MenuItem';
+export declare function MenuList<TItemId extends string>({ className, items, selectedItem, onItemClick }: MenuList.Props<TItemId>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuList {
+    type Props<TItemId extends string = string> = {
+        className?: string;
+        items?: ReadonlyArray<MenuItem<TItemId>>;
+        selectedItem?: TItemId;
+        onItemClick?: Callback<TItemId>;
+    };
+}