@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,5 @@
+import { Popup } from './Popup';
+export declare function Picker({ className, children, ...props }: Picker.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Picker {
+    type Props = Omit<Popup.Props, 'backdrop'>;
+}

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

@@ -0,0 +1,26 @@
+"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.Picker = Picker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const Popup_1 = require("./Popup");
+// component
+function Picker(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(Popup_1.Popup, Object.assign({}, props, { backdrop: "glass", className: (0, classnames_1.default)(className, 'Picker-root'), children: children })));
+}

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

@@ -0,0 +1,34 @@
+import { Callback, Placement, Rect } from '@nascentdigital/funnel-core';
+import { Variants } from 'framer-motion';
+import { CSSProperties, HTMLAttributes } from 'react';
+export declare function Popup({ className, style, anchor, placement, anchorOffset, viewportPadding, animation, backdrop, disabled, disableDismiss, disableOverlay, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Popup {
+    type Props = HTMLAttributes<HTMLDivElement> & {
+        anchor?: Rect | Element | string | null | undefined;
+        anchorOffset?: number;
+        placement?: Placement;
+        viewportPadding?: number;
+        animation?: Animation;
+        backdrop?: Backdrop;
+        disabled?: boolean;
+        disableDismiss?: boolean;
+        disableOverlay?: boolean;
+        open?: boolean;
+        onOpened?: Callback.Void;
+        onClose?: Callback.Void;
+        onClosed?: Callback.Void;
+    };
+    type Animation = 'in' | 'out' | 'in-out';
+    type Backdrop = 'none' | 'glass';
+}
+export declare const animations: Variants;
+type GetPopupPlacementStyleArgs = Pick<Popup.Props, 'anchor' | 'anchorOffset' | 'placement' | 'viewportPadding'> & {
+    contentElement: HTMLDivElement | null;
+};
+type PopupPlacement = {
+    containerClassName?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function getPopupPlacement({ anchor, anchorOffset, placement, viewportPadding, contentElement }: GetPopupPlacementStyleArgs): PopupPlacement;
+export {};

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

@@ -0,0 +1,160 @@
+"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.animations = void 0;
+exports.Popup = Popup;
+exports.getPopupPlacement = getPopupPlacement;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+// component
+function Popup(_a) {
+    var _b;
+    var { className, style = {}, anchor, placement, anchorOffset, viewportPadding, animation = 'in-out', backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, children } = _a, props = __rest(_a, ["className", "style", "anchor", "placement", "anchorOffset", "viewportPadding", "animation", "backdrop", "disabled", "disableDismiss", "disableOverlay", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "children"]);
+    // bind context
+    const id = (0, react_1.useId)();
+    const [contentRef, contentElement] = (0, client_1.useRefElement)();
+    const openRef = (0, react_1.useRef)(open);
+    openRef.current = open;
+    const onOpenedRef = (0, react_1.useRef)(onOpenedRaw);
+    onOpenedRef.current = onOpenedRaw;
+    const onClosedRef = (0, react_1.useRef)(onClosedRaw);
+    onClosedRef.current = onClosedRaw;
+    // re-render on window size change
+    (0, client_1.useViewportSize)();
+    // lock tab focus
+    (0, react_1.useEffect)(() => {
+        // lock when opened
+        let unlock = undefined;
+        if (open) {
+            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
+        }
+        // unlock on unmount
+        return () => unlock && unlock();
+    }, [open, id]);
+    // skip for SSR
+    if (!funnel_core_1.Browser.available) {
+        return null;
+    }
+    // helpers
+    const onKeyDown = (e) => {
+        // handle escape
+        if (e.key === 'Escape') {
+            // stop propagation
+            e.preventDefault();
+            e.stopPropagation();
+            // close if open
+            if (openRef.current) {
+                onClose();
+            }
+        }
+        // otherwise, propagate
+        else if (onKeyDownRaw) {
+            onKeyDownRaw(e);
+        }
+    };
+    const onAnimationComplete = (definition) => {
+        if (definition === 'visible') {
+            onOpenedRef.current();
+        }
+        else if (definition === 'exit') {
+            onClosedRef.current();
+        }
+    };
+    const onBackdropClick = (e) => {
+        // close only if the backdrop is directly clicked
+        const target = e.target;
+        if ((target === null || target === void 0 ? void 0 : target.id) === id) {
+            // stop bubbling
+            e.stopPropagation();
+            // close
+            onClose();
+        }
+    };
+    // render
+    const popupPlacement = getPopupPlacement({
+        contentElement,
+        anchor,
+        anchorOffset,
+        placement,
+        viewportPadding
+    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open &&
+                (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)(popupPlacement.containerClassName, 'fixed inset-0 z-popup', {
+                            'pointer-events-none': disableOverlay
+                        }), variants: exports.animations, initial: animation !== 'out' ? 'hidden' : 'visible', animate: "visible", exit: animation !== 'in' ? 'exit' : 'visible', onAnimationComplete: definition => onAnimationComplete(definition), onClick: disableDismiss ? undefined : onBackdropClick, children: [backdrop !== 'none' &&
+                                (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('fixed inset-0 z-backdrop', {
+                                        'backdrop-blur-[9px] bg-glass/backdrop will-change-[backdrop-filter]': backdrop === 'glass'
+                                    }) }, "backdrop"), (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: contentRef, style: Object.assign(Object.assign({}, style), ((_b = popupPlacement.style) !== null && _b !== void 0 ? _b : {})), className: (0, classnames_1.default)(className, popupPlacement.className, 'pointer-events-auto'), onKeyDown: onKeyDown, children: children }))] }, id) }) }), document.body) }));
+}
+// helpers
+exports.animations = {
+    hidden: {
+        opacity: 0
+    },
+    visible: {
+        opacity: 1,
+        transition: {
+            ease: 'easeIn',
+            duration: 0.3,
+            when: 'beforeChildren'
+        }
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            ease: 'easeIn',
+            duration: 0.15,
+            bounce: 0,
+            when: 'afterChildren'
+        }
+    }
+};
+function getPopupPlacement({ anchor, anchorOffset = 0, placement = 'bottom', viewportPadding = 16, contentElement }) {
+    // center if there's no anchor
+    const anchorRect = funnel_core_1.Browser.getElementRect(anchor);
+    if (!anchorRect || !contentElement) {
+        return {
+            containerClassName: 'flex flex-col justify-end items-center sm:justify-center',
+            className: 'z-dialog'
+        };
+    }
+    // or place absolutely
+    else {
+        // resolve placement args
+        const containerRect = new funnel_core_1.Rect(0, 0, window.innerWidth, window.innerHeight);
+        const popupFrame = funnel_core_1.Placement.forContent({
+            containerRect,
+            containerPadding: viewportPadding,
+            anchorRect,
+            anchorOffset,
+            placement,
+            contentSize: {
+                width: contentElement.offsetWidth,
+                height: contentElement.offsetHeight
+            }
+        });
+        // set style to frame
+        return {
+            className: 'absolute z-dialog',
+            style: popupFrame
+        };
+    }
+}

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

@@ -0,0 +1,11 @@
+import { User } from '@nascentdigital/funnel-cms';
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function Profile({ className, user }: Profile.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Profile {
+    type Props = {
+        className?: string;
+        user: User;
+        onClick?: Callback<User>;
+    };
+    type Size = 'sm' | 'md' | 'lg';
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = Profile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// components
+function Profile({ className, user }) {
+    // bind info
+    const { name, initials } = (0, react_1.useMemo)(() => ({
+        name: user.username,
+        initials: user.username.substring(0, 1) || '?'
+    }), [user]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+}

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

@@ -0,0 +1,17 @@
+import { RequiredBy, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from './Popup';
+export declare const QuickInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<QuickInput.Ref<Schema.Field.Type.Simple.NonRef>>>;
+export declare namespace QuickInput {
+    type Props = {};
+    interface Ref<TSchema extends Schema.Field.Type.Simple.NonRef = Schema.Field.Type.Simple.NonRef> {
+        readonly isOpen: boolean;
+        open(args: CaptureArgs<TSchema>): Promise<Schema.Field.Value.ForSimpleType<TSchema> | undefined>;
+        close(): void;
+    }
+    type CaptureArgs<TSchema extends Schema.Field.Type.Simple.NonRef = Schema.Field.Type.Simple.NonRef> = PopupProps & {
+        schema: TSchema;
+        initialValue?: Schema.Field.Value.ForSimpleType<TSchema>;
+    };
+}
+type PopupProps = RequiredBy<Omit<Popup.Props, 'className' | 'animation' | 'disableClickDismiss' | 'open' | 'onOpened' | 'onClose' | 'onClosed' | 'children'>, 'anchor' | 'placement'>;
+export {};

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

@@ -0,0 +1,149 @@
+"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.QuickInput = 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 react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const fields_1 = require("../fields");
+const FieldErrorController_1 = require("../fields/FieldErrorController");
+const TextField_1 = require("../fields/TextField");
+const Button_1 = require("./Button");
+const Popup_1 = require("./Popup");
+// component
+exports.QuickInput = (0, react_1.forwardRef)(function QuickInput(_, ref) {
+    // bind state
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const [deferral, setDeferral] = (0, react_1.useState)();
+    const deferralRef = (0, react_1.useRef)(deferral);
+    deferralRef.current = deferral;
+    const [schema, setSchema] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
+    const [initialValue, setInitialValue] = (0, react_1.useState)();
+    const tempFields = (0, hooks_1.useTempFields)(schema ? { field: schema } : {}, [schema]);
+    const field = tempFields.field;
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    // watch field
+    (0, hooks_1.useField)(field);
+    // expose interface
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        get isOpen() {
+            const deferral = deferralRef.current;
+            return !!deferral && !deferral.isComplete;
+        },
+        open: async (_a) => {
+            var { schema, initialValue } = _a, popupProps = __rest(_a, ["schema", "initialValue"]);
+            // reset
+            setReady(false);
+            setSchema(schema);
+            setInitialValue(initialValue);
+            setPopupProps(popupProps);
+            // create/set deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // await result
+            const result = await deferral.promise;
+            // clear deferral
+            setDeferral(undefined);
+            // return deferral
+            return result;
+        },
+        close: () => { var _a; return (_a = deferralRef.current) === null || _a === void 0 ? void 0 : _a.resolve(undefined); }
+    }), []);
+    // bind value to field (when ready)
+    (0, react_1.useEffect)(() => {
+        // skip if there's no deferral
+        if (!deferral) {
+            return;
+        }
+        // skip if schema's not set
+        else if (!schema) {
+            return;
+        }
+        // or skip if schema isn't matching
+        else if (field.schema !== schema) {
+            return;
+        }
+        // bind initial value (or reset field)
+        field.value = funnel_core_1.Schema.Field.Data.ForSimpleType.fromValue(schema, initialValue);
+        // mark ready
+        setReady(true);
+    }, [deferral, schema, initialValue, field]);
+    // helpers
+    const onSave = (e) => {
+        // stop propagation
+        e.preventDefault();
+        e.stopPropagation();
+        // set error level if invalid
+        const { errors } = field;
+        if (errors.length > 0) {
+            // show error
+            setErrorLevel('all');
+            // stop processing
+            return;
+        }
+        // save
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(funnel_core_1.Schema.Field.Data.ForSimpleType.toValue(field.value));
+    };
+    const onClose = (e) => {
+        // stop propagation
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // ignore if already complete
+        if (deferral === null || deferral === void 0 ? void 0 : deferral.isComplete) {
+            return;
+        }
+        // complete
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(undefined);
+    };
+    const onKeyDown = (e) => {
+        // handle keys
+        switch (e.key) {
+            case 'Enter':
+                onSave(e);
+                break;
+            case 'Escape':
+                onClose(e);
+                break;
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay w-[330px] flex items-center gap-l5 p-l5 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-full', {
+            'opacity-none': !opened,
+            'opacity-full': opened
+        }), animation: "out", open: deferral && ready, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderInput({ field, onKeyDown }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", onClick: onSave, children: "Save" })] })));
+});
+function renderInput({ field, onKeyDown }) {
+    // skip if there's no field
+    if (!field) {
+        return null;
+    }
+    // render editor
+    const { schema } = field;
+    switch (schema.type) {
+        case 'text':
+            return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: "flex-1", field: field, variant: "minimal", small: true, autoFocus: true, onKeyDown: onKeyDown }));
+        case 'richtext':
+            return ((0, jsx_runtime_1.jsx)(fields_1.RichTextField, { className: "flex-1", field: field, minimal: true, autoFocus: true }));
+        default:
+            return null;
+    }
+}

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

@@ -0,0 +1,23 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Icon } from '../visuals';
+export declare function SegmentedButton<TOption extends SegmentedButton.OptionType>({ className, options, selected, allowEmpty, multiSelect, autoFocus, disabled, onSelectionChange, onBlur }: SegmentedButton.Props<TOption>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SegmentedButton {
+    type OptionType = string | number;
+    type Props<TOption extends OptionType> = {
+        className?: string;
+        options: ReadonlyArray<Option<TOption>>;
+        selected?: TOption | ReadonlyArray<TOption>;
+        allowEmpty?: boolean;
+        multiSelect?: boolean;
+        autoFocus?: boolean;
+        disabled?: boolean;
+        onSelectionChange: Callback<ReadonlyArray<TOption>>;
+        onBlur?: Callback.Void;
+    };
+    type Option<TOption extends OptionType> = {
+        id: string;
+        value: TOption;
+        label: string;
+        icon?: Icon.Variant;
+    };
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedButton = SegmentedButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const ms_1 = __importDefault(require("ms"));
+const react_1 = require("react");
+const visuals_1 = require("../visuals");
+// component
+function SegmentedButton({ className, options, selected = [], allowEmpty = false, multiSelect = false, autoFocus = false, disabled = false, onSelectionChange, onBlur = funnel_core_1.Fn.NoOp }) {
+    // bind ref data
+    const blurTimeoutRef = (0, react_1.useRef)(undefined);
+    const selectedOptions = Array.isArray(selected)
+        ? [...selected]
+        : [selected];
+    // helpers
+    const onSelect = (option) => {
+        // initialize a reference to selection
+        let currentSelection = [...selectedOptions];
+        // remove if option is already selected
+        if (currentSelection.includes(option)) {
+            if (allowEmpty || currentSelection.length > 1) {
+                currentSelection.splice(currentSelection.indexOf(option), 1);
+            }
+        }
+        // add option to selections
+        else if (multiSelect) {
+            currentSelection.push(option);
+        }
+        // otherwise assign a sole option
+        else {
+            currentSelection = [option];
+        }
+        // trigger callback when needed
+        if (allowEmpty || currentSelection.length > 0) {
+            onSelectionChange(currentSelection);
+        }
+    };
+    const clearBlurTimeout = () => {
+        const timeout = blurTimeoutRef.current;
+        if (timeout) {
+            clearTimeout(timeout);
+            blurTimeoutRef.current = undefined;
+        }
+    };
+    const onSegmentBlur = () => {
+        // clear timeout if any
+        clearBlurTimeout();
+        // start new timeout
+        blurTimeoutRef.current = setTimeout(() => {
+            // cleanup timeout ref
+            blurTimeoutRef.current = undefined;
+            // raise blur event
+            onBlur();
+        }, (0, ms_1.default)('100ms'));
+    };
+    const onSegmentFocus = () => {
+        // clear timeout if any
+        clearBlurTimeout();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'segmented-button-group', {
+            'segmented-button-group-disabled': disabled
+        }), children: options.map(({ id, value, label, icon }) => {
+            const active = selectedOptions.includes(value);
+            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: disabled, className: (0, classnames_1.default)('segmented-button', {
+                    'segmented-button-selected': active
+                }), onClick: () => onSelect(value), onFocus: onSegmentFocus, onBlur: onSegmentBlur, children: [icon &&
+                        (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "segmented-button-icon", variant: icon, size: "nav" }), (0, jsx_runtime_1.jsx)("span", { className: "segmented-button-label", children: label })] }, id));
+        }) }));
+}

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

@@ -0,0 +1,24 @@
+import { Callback, Transform } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function Sortable<TItem extends Sortable.ISortable>({ className, itemClassName, items, enableItemClick, disabled, onChange, renderItem, children }: Sortable.Props<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Sortable {
+    type Props<TItem extends ISortable> = {
+        className?: string;
+        itemClassName?: string;
+        items?: ReadonlyArray<TItem>;
+        enableItemClick?: boolean;
+        onChange?: Callback<ChangeEvent<TItem>>;
+        renderItem: Transform<TItem, ReactNode>;
+        disabled?: boolean;
+        children?: ReactNode;
+    };
+    interface ISortable {
+        id: string;
+    }
+    type ChangeEvent<TItem extends ISortable> = {
+        items: ReadonlyArray<TItem>;
+        item: TItem;
+        fromIndex: number;
+        toIndex: number;
+    };
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sortable = Sortable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// component
+function Sortable({ className, itemClassName, items = [], enableItemClick = false, disabled = false, onChange = funnel_core_1.Fn.NoOp, renderItem, children }) {
+    // bind items
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
+        activationConstraint: { distance: 5 }
+    }));
+    // helpers
+    const onOrderChange = (event) => {
+        // determine the position change (skip if not dropped properly)
+        const { active: { id: sourceId }, over } = event;
+        if (!over) {
+            console.debug(`[Sortable] item "${sourceId}" dropped in invalid position`);
+            return;
+        }
+        // or skip if nothing has changed
+        const destinationId = over.id;
+        if (sourceId === destinationId) {
+            console.debug(`[Sortable] item "${sourceId}" didn't change position`);
+            return;
+        }
+        // determine indices for source/target (skip if we couldn't find them - should never happen)
+        const fromIndex = items.findIndex(item => item.id === sourceId);
+        const toIndex = items.findIndex(item => item.id === destinationId);
+        if (fromIndex < 0 || toIndex < 0) {
+            console.warn(`[Sortable] unable to resolve source "${sourceId}" or new index "${destinationId}"`, { fromIndex, toIndex });
+            return;
+        }
+        console.debug(`[Sortable] moving item "${sourceId}" from ${fromIndex} to ${toIndex}`);
+        // raise event
+        onChange({
+            items,
+            item: items[fromIndex],
+            fromIndex,
+            toIndex
+        });
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: enableItemClick ? sensors : undefined, onDragEnd: onOrderChange, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, disabled: disabled, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [items.map(item => (0, jsx_runtime_1.jsx)(SortableItem, { className: itemClassName, item: item, onRender: renderItem }, item.id)), children] }) }) }));
+}
+// child component
+function SortableItem({ className, item, onRender }) {
+    // bind hooks
+    const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: item.id });
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setNodeRef, id: item.id, className: className, style: {
+            transform: utilities_1.CSS.Translate.toString(transform),
+            transition
+        } }, attributes, listeners, { tabIndex: -1, children: onRender(item) })));
+}

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

@@ -0,0 +1,9 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { InputHTMLAttributes } from 'react';
+export declare function Toggle({ className, checked, onChange, disabled, ...props }: Toggle.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toggle {
+    type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'onChange'> & {
+        checked?: boolean;
+        onChange?: Callback<boolean>;
+    };
+}

package/dist/core/components/interaction/Toggle.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.Toggle = Toggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function Toggle(_a) {
+    var { className, checked = false, onChange = funnel_core_1.Fn.NoOp, disabled = false } = _a, props = __rest(_a, ["className", "checked", "onChange", "disabled"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)(className, 'relative inline-block interpolate', 'w-40 h-24 bg-surface2 rounded-full overflow-hidden', {
+            'opacity-disabled': disabled
+        }), children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: (0, classnames_1.default)('w-full h-full bg-[#c4c7c6] rounded-full appearance-none interpolate', {
+                    'cursor-pointer': !disabled
+                }), type: "checkbox", checked: checked, onChange: () => onChange(!checked), disabled: disabled })), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('absolute left-3 inset-y-3 w-18 h-18 pointer-events-none interpolate-fast', 'inline-flex justify-center items-center rounded-full overflow-hidden', {
+                    'bg-ix-primary translate-x-16': checked,
+                    'bg-content-primary': !checked,
+                }) })] }));
+}