react-science 0.19.1

package/lib/components/split-pane/SplitPane.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitPane = exports.useSplitPaneContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
+const useOnOff_1 = require("../hooks/useOnOff");
+const useSplitPaneSize_1 = require("./useSplitPaneSize");
+const splitPaneContext = (0, react_2.createContext)(false);
+function useSplitPaneContext() {
+    return (0, react_2.useContext)(splitPaneContext);
+}
+exports.useSplitPaneContext = useSplitPaneContext;
+function SplitPane(props) {
+    const { direction = 'horizontal', controlledSide = 'start', initialSize = '50%', initialClosed = false, onResize, onToggle, children, } = props;
+    const minimumSize = typeof initialClosed === 'number' ? initialClosed : null;
+    // Whether the pane is explicitly closed. If the value is `false`, the pane
+    // may still be currently closed because it is smaller than the minimum size.
+    const [isPaneClosed, closePane, openPane] = (0, useOnOff_1.useOnOff)(typeof initialClosed === 'boolean' ? initialClosed : false);
+    // Whether the user has already interacted with the pane.
+    const [hasTouched, touch] = (0, react_2.useReducer)(() => true, false);
+    const [[size, sizeType], setSize] = (0, react_2.useState)(() => parseSize(initialSize));
+    const splitterRef = (0, react_2.useRef)(null);
+    const { onMouseDown } = (0, useSplitPaneSize_1.useSplitPaneSize)({
+        controlledSide,
+        direction,
+        splitterRef,
+        sizeType,
+        onSizeChange(value) {
+            touch();
+            setSize(value);
+        },
+        onResize,
+    });
+    const rootSize = (0, use_resize_observer_1.default)();
+    let isFinalClosed = isPaneClosed;
+    if (!isFinalClosed &&
+        minimumSize !== null &&
+        !hasTouched &&
+        rootSize.width !== undefined &&
+        rootSize.height !== undefined) {
+        if (direction === 'horizontal') {
+            isFinalClosed = rootSize.width < minimumSize;
+        }
+        else {
+            isFinalClosed = rootSize.height < minimumSize;
+        }
+    }
+    function handleToggle() {
+        touch();
+        if (isFinalClosed) {
+            openPane();
+            if (isPaneClosed && onToggle) {
+                onToggle(false);
+            }
+        }
+        else {
+            closePane();
+            if (!isPaneClosed && onToggle) {
+                onToggle(true);
+            }
+        }
+    }
+    function getSplitSideStyle(side) {
+        return getItemStyle(isFinalClosed, controlledSide === side, direction, size, sizeType);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootSize.ref, style: {
+            display: 'flex',
+            height: '100%',
+            width: '100%',
+            flexDirection: direction === 'horizontal' ? 'row' : 'column',
+        }, children: [(0, jsx_runtime_1.jsx)(SplitSide, { style: getSplitSideStyle('start'), children: children[0] }), (0, jsx_runtime_1.jsx)(Splitter, { onDoubleClick: handleToggle, onMouseDown: isFinalClosed ? undefined : onMouseDown, isFinalClosed: isFinalClosed, direction: direction, splitterRef: splitterRef }), (0, jsx_runtime_1.jsx)(SplitSide, { style: getSplitSideStyle('end'), children: children[1] })] }));
+}
+exports.SplitPane = SplitPane;
+function Splitter(props) {
+    const { onDoubleClick, onMouseDown, direction, isFinalClosed, splitterRef } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: onDoubleClick, onMouseDown: onMouseDown, css: getSeparatorStyle(direction, !isFinalClosed), ref: splitterRef, children: (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.875em' }, children: direction === 'horizontal' ? (0, jsx_runtime_1.jsx)("span", { children: "\u22EE" }) : (0, jsx_runtime_1.jsx)("span", { children: "\u22EF" }) }) }));
+}
+function SplitSide(props) {
+    const { style, children } = props;
+    return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });
+}
+function parseSize(initialSize) {
+    const [, value, type] = /(?<value>^\d+)(?<type>.+)$/.exec(initialSize);
+    return [Number(value), type];
+}
+const flexBase = 100;
+function percentToFlex(percent) {
+    percent /= 100;
+    return (flexBase - percent * flexBase) / percent;
+}
+function getItemStyle(isClosed, isControlledSide, direction, size, type) {
+    const isHorizontal = direction === 'horizontal';
+    if (isClosed) {
+        return isControlledSide
+            ? { display: 'none' }
+            : { flex: '1 1 0%', display: 'flex' };
+    }
+    else if (type === '%') {
+        return isControlledSide
+            ? { flex: '100 0 0%', display: 'flex' }
+            : { flex: `${percentToFlex(size)} 0 0%`, display: 'flex' };
+    }
+    else {
+        return isControlledSide
+            ? {
+                [isHorizontal ? 'width' : 'height']: size,
+                display: 'flex',
+            }
+            : {
+                flex: '1 1 0%',
+                display: 'flex',
+                minWidth: isHorizontal ? 0 : undefined,
+                minHeight: isHorizontal ? undefined : 0,
+            };
+    }
+}
+function getSeparatorStyle(direction, enabled) {
+    return (0, react_1.css)([
+        direction === 'horizontal' && {
+            cursor: enabled ? 'ew-resize' : 'pointer',
+            width: '10px',
+        },
+        direction === 'vertical' && {
+            height: '10px',
+            cursor: enabled ? 'ns-resize' : 'pointer',
+        },
+        {
+            backgroundColor: 'rgb(247, 247, 247)',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            userSelect: 'none',
+            minWidth: 11,
+            ':hover': {
+                backgroundColor: 'rgb(223, 223, 223)',
+            },
+        },
+    ]);
+}

package/lib/components/split-pane/index.js

@@ -0,0 +1,17 @@
+"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("./SplitPane"), exports);

package/lib/components/split-pane/useSplitPaneSize.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSplitPaneSize = void 0;
+function useSplitPaneSize(options) {
+    const { controlledSide, direction, splitterRef, sizeType, onSizeChange, onResize, } = options;
+    function mouseDownCallback() {
+        let lastSize = null;
+        function onMouseMove(event) {
+            if (!splitterRef.current)
+                return;
+            const { clientX, clientY } = event;
+            const parentDiv = splitterRef.current.parentElement;
+            const bounds = parentDiv.getBoundingClientRect();
+            const parentDimension = direction === 'horizontal'
+                ? parentDiv.clientWidth
+                : parentDiv.clientHeight;
+            const client = direction === 'horizontal'
+                ? clientX - bounds.left
+                : clientY - bounds.top;
+            const centralizingValue = direction === 'horizontal'
+                ? splitterRef.current.clientWidth / 2
+                : splitterRef.current.clientHeight / 2;
+            const value = controlledSide === 'start' ? client : parentDimension - client;
+            if (sizeType === 'px') {
+                const newSize = getValueFromSplitter(value - centralizingValue, {
+                    min: 50,
+                    max: parentDimension - 50,
+                });
+                lastSize = [newSize, sizeType];
+                onSizeChange(lastSize);
+            }
+            else if (sizeType === '%') {
+                const valueDiff = (value / parentDimension) * 100;
+                const newSize = getValueFromSplitter(valueDiff, {
+                    min: 5,
+                    max: 95,
+                });
+                lastSize = [newSize, sizeType];
+                onSizeChange(lastSize);
+            }
+        }
+        function mouseUpCallback() {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', mouseUpCallback);
+            if (lastSize && onResize) {
+                onResize(`${lastSize[0]}${lastSize[1]}`);
+            }
+        }
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', mouseUpCallback);
+    }
+    return {
+        onMouseDown: mouseDownCallback,
+    };
+}
+exports.useSplitPaneSize = useSplitPaneSize;
+function getValueFromSplitter(value, options) {
+    const newValue = Math.round((value + Number.EPSILON) * 100) / 100;
+    return getMinMax(newValue, options);
+}
+function getMinMax(value, options) {
+    return Math.min(Math.max(value, options.min), options.max);
+}

package/lib/components/table/Table.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const value_renderers_1 = require("../value-renderers");
+const styles = {
+    border: (0, react_1.css)({
+        border: '0.5px solid rgb(0, 0, 0)',
+        padding: '5px',
+        position: 'relative',
+    }),
+    noBorder: (0, react_1.css)({
+        padding: '5px',
+        position: 'relative',
+    }),
+};
+const TableContext = (0, react_2.createContext)({ border: true });
+function useTableContext() {
+    const context = (0, react_2.useContext)(TableContext);
+    return context;
+}
+function splitChildren(children) {
+    const Rows = [];
+    let Header = null;
+    for (let child of react_2.Children.toArray(children)) {
+        if (typeof child !== 'object' || !(0, react_2.isValidElement)(child)) {
+            // eslint-disable-next-line no-console
+            console.error('Invalid Table child:', child);
+            throw new Error('invalid Table child');
+        }
+        else if (child.type === Table.Row) {
+            Rows.push(child);
+        }
+        else if (child.type === Table.Header) {
+            Header = child;
+        }
+        else {
+            throw new Error('invalid Table child');
+        }
+    }
+    return { Rows, Header };
+}
+function Table(props) {
+    const { border = true, children } = props;
+    const { Header, Rows } = splitChildren(children);
+    const tableContextValue = (0, react_2.useMemo)(() => ({ border }), [border]);
+    return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
+}
+exports.Table = Table;
+function useRowChildren(children) {
+    const cells = [];
+    const { border } = useTableContext();
+    for (let child of react_2.Children.toArray(children)) {
+        if (typeof child === 'object' &&
+            (0, react_2.isValidElement)(child) &&
+            (child.type === value_renderers_1.Color ||
+                child.type === value_renderers_1.Boolean ||
+                child.type === value_renderers_1.Text ||
+                child.type === value_renderers_1.Number ||
+                child.type === value_renderers_1.Title ||
+                child.type === value_renderers_1.Object ||
+                child.type === value_renderers_1.Header ||
+                child.type === value_renderers_1.Component)) {
+            if (child.type === value_renderers_1.Header) {
+                cells.push((0, jsx_runtime_1.jsx)("th", { css: border ? styles.border : styles.noBorder, children: child }, child.key));
+            }
+            else {
+                cells.push((0, jsx_runtime_1.jsx)("td", { css: border ? styles.border : styles.noBorder, children: child }, child.key));
+            }
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error('Invalid Row child:', child);
+            throw new Error('invalid Row child');
+        }
+    }
+    return { cells };
+}
+function Row({ children, border = false }) {
+    const { cells } = useRowChildren(children);
+    return (0, jsx_runtime_1.jsx)("tr", { style: { border: border ? '1px solid black' : '' }, children: cells });
+}
+Table.Row = Row;
+Table.Header = ({ children, border = false }) => {
+    return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)(Table.Row, { border: border, children: children }) }));
+};

package/lib/components/table/index.js

@@ -0,0 +1,17 @@
+"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("./Table"), exports);

package/lib/components/tabs/Tabs.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const TabsContext_1 = require("./TabsContext");
+const styles = {
+    scroll: (0, react_1.css)({
+        '&::-webkit-scrollbar': {
+            height: '7px',
+            width: '7px',
+        },
+        '&::-webkit-scrollbar-track': {
+            backgroundColor: 'rgba(0,0,0,.05)',
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0,0,0,.2)',
+        },
+    }),
+    item: (isSelected, orientation) => {
+        return (0, react_1.css)([
+            {
+                padding: '0.25em 1em',
+                border: '1px solid hsl(0deg, 0%, 80%)',
+                fontSize: '1.125em',
+                ':hover': {
+                    backgroundColor: 'hsl(0deg, 0%, 90%)',
+                },
+                whiteSpace: 'nowrap',
+            },
+            isSelected && {
+                backgroundColor: 'hsl(0deg, 0%, 95%)',
+                ':hover': {
+                    backgroundColor: 'hsl(0deg, 0%, 90%)',
+                },
+            },
+            orientation === 'horizontal' && {
+                margin: '0px 2px 0px 2px',
+                borderBottom: 'none',
+            },
+            orientation === 'vertical' && {
+                margin: '2px 0px 2px 0px',
+                borderRight: 'none',
+            },
+        ]);
+    },
+};
+function Tabs(props) {
+    const { orientation = 'horizontal', items, onClick, opened } = props;
+    const item = (0, react_2.useMemo)(() => items.find(({ id: itemId }) => itemId === opened), [items, opened]);
+    if (orientation === 'horizontal') {
+        return ((0, jsx_runtime_1.jsx)(TabsContext_1.TabsProvider, { opened: item, children: (0, jsx_runtime_1.jsx)(TabsHorizontal, { items: items, onClick: onClick }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(TabsContext_1.TabsProvider, { opened: item, children: (0, jsx_runtime_1.jsx)(TabsVertical, { items: items, onClick: onClick }) }));
+}
+exports.Tabs = Tabs;
+function TabsItem(props) {
+    const item = (0, TabsContext_1.useTabsContext)();
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: props.onClick, css: styles.item(item?.id === props.id, props.orientation), children: props.title }));
+}
+function TabsVertical(props) {
+    const { items, onClick } = props;
+    const item = (0, TabsContext_1.useTabsContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            flex: '1 1 0%',
+            overflowY: 'hidden',
+            height: '100%',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    borderRight: '1px solid hsl(0deg, 0%, 80%)',
+                    overflowY: 'auto',
+                }, css: styles.scroll, children: items.map((item) => ((0, jsx_runtime_1.jsx)(TabsItem, { orientation: "vertical", title: item.title, id: item.id, onClick: () => {
+                        onClick?.(item.id);
+                    } }, item.id))) }), item && ((0, jsx_runtime_1.jsx)("div", { style: { flex: '1 1 0%', overflowX: 'auto' }, children: item.content }))] }));
+}
+function TabsHorizontal(props) {
+    const { items, onClick } = props;
+    const item = (0, TabsContext_1.useTabsContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', overflowX: 'hidden' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    borderBottom: '1px solid hsl(0deg, 0%, 80%)',
+                    overflowX: 'auto',
+                }, css: styles.scroll, children: items.map((item) => ((0, jsx_runtime_1.jsx)(TabsItem, { orientation: "horizontal", id: item.id, title: item.title, onClick: () => {
+                        onClick?.(item.id);
+                    } }, item.id))) }), item && ((0, jsx_runtime_1.jsx)("div", { style: { flex: '1 1 0%', overflowX: 'auto' }, children: item.content }))] }));
+}

package/lib/components/tabs/TabsContext.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsProvider = exports.useTabsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tabsContext = (0, react_1.createContext)(null);
+function useTabsContext() {
+    const context = (0, react_1.useContext)(tabsContext);
+    if (context === null) {
+        throw new Error('TabsContext was not found');
+    }
+    return context;
+}
+exports.useTabsContext = useTabsContext;
+function TabsProvider(props) {
+    const { children, opened } = props;
+    return (0, jsx_runtime_1.jsx)(tabsContext.Provider, { value: opened, children: children });
+}
+exports.TabsProvider = TabsProvider;

package/lib/components/tabs/index.js

@@ -0,0 +1,17 @@
+"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("./Tabs"), exports);

package/lib/components/toolbar/Toolbar.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const ToolbarContext_1 = require("./ToolbarContext");
+const border = '1px solid rgb(247, 247, 247)';
+const styles = {
+    toolbar: (orientation) => {
+        return (0, react_1.css)([
+            { display: 'flex', flexWrap: 'wrap' },
+            orientation === 'vertical'
+                ? {
+                    flexDirection: 'column',
+                    minHeight: '100%',
+                    borderRight: border,
+                }
+                : {
+                    flexDirection: 'row',
+                    minWidth: '100%',
+                },
+        ]);
+    },
+    item: (active) => {
+        return (0, react_1.css)([
+            active && { backgroundColor: 'rgb(247, 247, 247)', borderRadius: 5 },
+            {
+                width: 30,
+                height: 30,
+                outline: 'none',
+                alignItems: 'center',
+                justifyContent: 'center',
+                display: 'flex',
+                '&:hover + .content': { display: 'flex' },
+            },
+        ]);
+    },
+    tooltip: (orientation, itemOrientation) => {
+        const common = {
+            display: 'none',
+            position: 'absolute',
+            backgroundColor: 'gray',
+            borderRadius: '2px',
+            color: 'white',
+            bottom: '0px',
+            right: '0px',
+            width: 'fit-content',
+            height: '50%',
+            fontSize: '0.875em',
+            whiteSpace: 'nowrap',
+            paddingLeft: '3px',
+            paddingRight: '3px',
+            zIndex: 50,
+        };
+        if (itemOrientation === 'auto') {
+            return (0, react_1.css)([
+                common,
+                orientation === 'vertical' && { margin: 'auto', marginLeft: 5 },
+                orientation === 'horizontal'
+                    ? { top: '100%' }
+                    : { top: '0px', left: '100%' },
+            ]);
+        }
+        else {
+            return (0, react_1.css)([
+                common,
+                itemOrientation === 'horizontal' && { margin: 'auto', marginLeft: 5 },
+                itemOrientation === 'vertical'
+                    ? { top: '100%' }
+                    : { top: '0px', left: '100%' },
+            ]);
+        }
+    },
+};
+function Toolbar(props) {
+    const { children, orientation } = props;
+    const ref = (0, react_2.useRef)(null);
+    (0, react_2.useLayoutEffect)(() => {
+        if (orientation === 'horizontal') {
+            return;
+        }
+        function update() {
+            const lastElement = ref.current?.lastElementChild;
+            if (!lastElement) {
+                return;
+            }
+            ref.current.style.width = 'initial';
+            const divRect = ref.current.getBoundingClientRect();
+            const lastElemRect = lastElement.getBoundingClientRect();
+            const width = `${lastElemRect.right - divRect.left}px`;
+            if (ref.current.style.width !== width) {
+                ref.current.style.width = width;
+            }
+        }
+        const element = ref.current;
+        if (element) {
+            const observer = new ResizeObserver(update);
+            observer.observe(element);
+            return () => observer.unobserve(element);
+        }
+    }, [orientation]);
+    return ((0, jsx_runtime_1.jsx)("div", { css: styles.toolbar(orientation), ref: ref, children: (0, jsx_runtime_1.jsx)(ToolbarContext_1.ToolbarProvider, { orientation: orientation, children: children }) }));
+}
+exports.Toolbar = Toolbar;
+Toolbar.Item = function ToolbarItem(props) {
+    const orientation = (0, ToolbarContext_1.useToolbarContext)();
+    const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', padding: 4, fontSize: '1.25em' }, ...other, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", css: styles.item(active), onClick: () => {
+                    if (onClick) {
+                        onClick(props);
+                    }
+                }, children: children }), (0, jsx_runtime_1.jsx)("div", { className: "content", css: styles.tooltip(orientation, titleOrientation), children: (0, jsx_runtime_1.jsx)("span", { style: {
+                        display: 'flex',
+                        margin: 'auto',
+                        justifyContent: 'center',
+                    }, children: title }) })] }));
+};

package/lib/components/toolbar/ToolbarContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarProvider = exports.useToolbarContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const toolbarContext = (0, react_1.createContext)(null);
+function useToolbarContext() {
+    const context = (0, react_1.useContext)(toolbarContext);
+    if (!context) {
+        throw new Error('ToolbarContext was not found');
+    }
+    return context;
+}
+exports.useToolbarContext = useToolbarContext;
+function ToolbarProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(toolbarContext.Provider, { value: props.orientation, children: props.children }));
+}
+exports.ToolbarProvider = ToolbarProvider;

package/lib/components/toolbar/index.js

@@ -0,0 +1,17 @@
+"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("./Toolbar"), exports);

package/lib/components/utils/assert.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assert = exports.assertNotNull = exports.assertUnreachable = void 0;
+function assertUnreachable(x) {
+    throw new Error(`unreachable: ${String(x)}`);
+}
+exports.assertUnreachable = assertUnreachable;
+function assertNotNull(value) {
+    if (value === null) {
+        throw new Error('unexpected null value');
+    }
+    if (value === undefined) {
+        throw new Error('unexpected undefined value');
+    }
+}
+exports.assertNotNull = assertNotNull;
+function assert(value, message) {
+    if (!value) {
+        throw new Error(`unreachable${message ? `: ${message}` : ''}`);
+    }
+}
+exports.assert = assert;

package/lib/components/utils/index.js

@@ -0,0 +1,17 @@
+"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("./assert"), exports);