datocms-react-ui 2.0.13 → 2.0.14

package/dist/esm/VerticalSplit/index.js

@@ -0,0 +1,307 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import { SplitView } from '../SplitView';
+import { SplitViewPane } from '../SplitView/SplitViewPane';
+import sashS from '../SplitView/SplitViewSash/styles.module.css.json';
+import { ChevronsLeftIcon, ChevronsRightIcon, SidebarFlipIcon } from '../icons';
+import s from './styles.module.css.json';
+var initialSidebarWidth = 220;
+function calculateSizes(_a) {
+    var size = _a.size, primaryPane = _a.primaryPane, isSecondaryCollapsed = _a.isSecondaryCollapsed;
+    var realSize = isSecondaryCollapsed ? 20 : size;
+    return primaryPane === 'right' ? [realSize] : ['auto', realSize];
+}
+/**
+ * @example Resizable, left primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="left" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Resizable, right primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="right" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ *
+ * @example Overlay mode
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            mode="overlay"
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ */
+export function VerticalSplit(_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'split' : _b, _c = _a.minSize, minSize = _c === void 0 ? 200 : _c, maxSize = _a.maxSize, _d = _a.size, size = _d === void 0 ? initialSidebarWidth : _d, primaryPane = _a.primaryPane, children = _a.children, _e = _a.allowResize, allowResize = _e === void 0 ? true : _e, onDragFinished = _a.onDragFinished, onSecondaryToggle = _a.onSecondaryToggle, isSecondaryCollapsed = _a.isSecondaryCollapsed;
+    var _f = useState(calculateSizes({ size: size, primaryPane: primaryPane, isSecondaryCollapsed: isSecondaryCollapsed })), sizes = _f[0], setSizes = _f[1];
+    var currentSizes = useRef(sizes);
+    var SashActionIcon = onSecondaryToggle
+        ? primaryPane === 'left'
+            ? isSecondaryCollapsed
+                ? SidebarFlipIcon
+                : ChevronsRightIcon
+            : isSecondaryCollapsed
+                ? ChevronsRightIcon
+                : ChevronsLeftIcon
+        : undefined;
+    useEffect(function () {
+        setSizes(calculateSizes({ size: size, primaryPane: primaryPane, isSecondaryCollapsed: isSecondaryCollapsed }));
+    }, [size, primaryPane, isSecondaryCollapsed]);
+    function handleChange(newSizes) {
+        setSizes(newSizes);
+        currentSizes.current = newSizes;
+    }
+    function handleDragEnd() {
+        onDragFinished === null || onDragFinished === void 0 ? void 0 : onDragFinished(currentSizes.current[0]);
+    }
+    function handleSecondaryClick() {
+        onSecondaryToggle === null || onSecondaryToggle === void 0 ? void 0 : onSecondaryToggle(!isSecondaryCollapsed);
+    }
+    function renderPane(pane) {
+        var isSecondaryPane = primaryPane !== pane;
+        return (React.createElement(SplitViewPane, __assign({}, (isSecondaryPane && !isSecondaryCollapsed
+            ? { minSize: minSize, maxSize: maxSize }
+            : {})), isSecondaryPane && isSecondaryCollapsed ? (React.createElement("div", { className: classNames(s.VerticalSplitPane__expand, s["VerticalSplitPane__expand--".concat(pane)]), onClick: handleSecondaryClick })) : (children[pane === 'left' ? 0 : 1])));
+    }
+    if (mode === 'overlay' && !isSecondaryCollapsed && SashActionIcon) {
+        var primaryPaneChild = children[primaryPane === 'left' ? 0 : 1];
+        var secondaryPaneChild = children[primaryPane === 'left' ? 1 : 0];
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: s.VerticalSplitPaneOverlay, onClick: handleSecondaryClick },
+                React.createElement("div", { className: classNames(s.VerticalSplitPaneOverlay__secondary, s["VerticalSplitPaneOverlay__secondary--".concat(primaryPane === 'left' ? 'right' : 'left')]), style: {
+                        width: size,
+                        maxWidth: maxSize,
+                        minWidth: minSize,
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                    } },
+                    secondaryPaneChild,
+                    React.createElement("div", { className: s.VerticalSplitPaneOverlay__sash },
+                        React.createElement("div", { className: sashS.SplitViewSash__content, onClick: handleSecondaryClick },
+                            React.createElement("div", { className: sashS.SplitViewSash__content__button },
+                                React.createElement(SashActionIcon, null)))))),
+            React.createElement("div", { className: classNames(s.VerticalSplitPaneOverlay__primary, s["VerticalSplitPaneOverlay__primary--".concat(primaryPane)]) }, primaryPaneChild)));
+    }
+    return (React.createElement(SplitView, { allowResize: !isSecondaryCollapsed && allowResize, sizes: sizes, onChange: handleChange, onDragEnd: handleDragEnd, sashAction: SashActionIcon && {
+            icon: React.createElement(SashActionIcon, null),
+            onClick: handleSecondaryClick,
+        } },
+        renderPane('left'),
+        renderPane('right')));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/VerticalSplit/index.js.map

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

package/dist/esm/VerticalSplit/styles.module.css.json

@@ -0,0 +1 @@
+{ "VerticalSplitPane__expand": "_VerticalSplitPane__expand_80tii_1", "VerticalSplitPane__expand--left": "_VerticalSplitPane__expand--left_80tii_22", "VerticalSplitPane__expand--right": "_VerticalSplitPane__expand--right_80tii_25", "VerticalSplitPaneOverlay": "_VerticalSplitPaneOverlay_80tii_42", "VerticalSplitPaneOverlay__primary": "_VerticalSplitPaneOverlay__primary_80tii_58", "VerticalSplitPaneOverlay__primary--left": "_VerticalSplitPaneOverlay__primary--left_80tii_67", "VerticalSplitPaneOverlay__primary--right": "_VerticalSplitPaneOverlay__primary--right_80tii_71", "VerticalSplitPaneOverlay__secondary": "_VerticalSplitPaneOverlay__secondary_80tii_75", "VerticalSplitPaneOverlay__secondary--left": "_VerticalSplitPaneOverlay__secondary--left_80tii_83", "VerticalSplitPaneOverlay__secondary--right": "_VerticalSplitPaneOverlay__secondary--right_80tii_87", "VerticalSplitPaneOverlay__sash": "_VerticalSplitPaneOverlay__sash_80tii_91" }

package/dist/esm/icons.d.ts

@@ -10,3 +10,6 @@ export declare function SidebarLeftArrowIcon({ width, height, style, className,
 export declare function SidebarRightArrowIcon({ width, height, style, className, }: IconProps): JSX.Element;
 export declare function CaretDownIcon({ width, height, style, className, }: IconProps): JSX.Element;
 export declare function CaretUpIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function ChevronsLeftIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function ChevronsRightIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function SidebarFlipIcon({ width, height, style, className, }: IconProps): JSX.Element;

package/dist/esm/icons.js

@@ -24,4 +24,19 @@ export function CaretUpIcon(_a) {
     return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: width, height: height, style: style, className: className },
         React.createElement("path", { d: "M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" })));
 }
+export function ChevronsLeftIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M47 239c-9.4 9.4-9.4 24.6 0 33.9L239 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 273 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L47 239zM431 47L239 239c-9.4 9.4-9.4 24.6 0 33.9L431 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-175-175L465 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0z" })));
+}
+export function ChevronsRightIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M465 239c9.4 9.4 9.4 24.6 0 33.9L273 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L239 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L465 239zM81 47L273 239c9.4 9.4 9.4 24.6 0 33.9L81 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L47 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z" })));
+}
+export function SidebarFlipIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: width, height: height, style: style, className: className },
+        React.createElement("path", { d: "M288 80V432H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H288zM512 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96zm-64 24c0 13.3-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24zm-24 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24h48zm24 120c0 13.3-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24z" })));
+}
 //# sourceMappingURL=icons.js.map

package/dist/esm/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AASlD,MAAM,UAAU,QAAQ,CAAC,EAKb;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,+QAA+Q,GAAG,CACtR,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EAKzB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,yUAAyU,GAAG,CAChV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EAK1B;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,4UAA4U,GAAG,CACnV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAKlB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,yHAAyH,GAAG,CAChI,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAKhB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,8BAAM,CAAC,EAAC,kKAAkK,GAAG,CACzK,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -6,8 +6,8 @@ export * from './Dropdown';
 export * from './FieldError';
 export * from './FieldGroup';
 export * from './FieldHint';
-export * from './Form';
 export * from './FieldWrapper';
+export * from './Form';
 export * from './FormLabel';
 export * from './icons';
 export * from './Section';
@@ -15,12 +15,14 @@ export * from './SelectField';
 export * from './SelectInput';
 export * from './SidebarPanel';
 export * from './Spinner';
+export * from './SplitView';
 export * from './SwitchField';
 export * from './SwitchInput';
-export * from './TextField';
-export * from './TextInput';
 export * from './TextareaField';
 export * from './TextareaInput';
+export * from './TextField';
+export * from './TextInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';
+export * from './VerticalSplit';

package/dist/esm/index.js

@@ -6,8 +6,8 @@ export * from './Dropdown';
 export * from './FieldError';
 export * from './FieldGroup';
 export * from './FieldHint';
-export * from './Form';
 export * from './FieldWrapper';
+export * from './Form';
 export * from './FormLabel';
 export * from './icons';
 export * from './Section';
@@ -15,13 +15,15 @@ export * from './SelectField';
 export * from './SelectInput';
 export * from './SidebarPanel';
 export * from './Spinner';
+export * from './SplitView';
 export * from './SwitchField';
 export * from './SwitchInput';
-export * from './TextField';
-export * from './TextInput';
 export * from './TextareaField';
 export * from './TextareaInput';
+export * from './TextField';
+export * from './TextInput';
 export * from './Toolbar';
 export * from './useClickOutside';
 export * from './useMediaQuery';
+export * from './VerticalSplit';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/types/SplitView/SplitViewPane/index.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+export declare type SplitViewPaneProps = {
+    maxSize?: number | string;
+    minSize?: number | string;
+    style?: React.CSSProperties;
+};
+export declare function SplitViewPane({ style, children, }: PropsWithChildren<SplitViewPaneProps>): JSX.Element;

package/dist/types/SplitView/SplitViewSash/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+export declare type SashAction = {
+    icon: ReactNode;
+    onClick: () => void;
+};
+declare type SplitViewSashProps = {
+    className?: string;
+    style: React.CSSProperties;
+    split: 'vertical' | 'horizontal';
+    allowResize?: boolean;
+    action?: SashAction;
+    onMouseDown: (x: number, y: number) => void;
+    onMouseMove: (x: number, y: number) => void;
+    onMouseUp: () => void;
+};
+export declare function SplitViewSash({ onMouseDown, onMouseMove, onMouseUp, style, split, allowResize, action, }: SplitViewSashProps): JSX.Element;
+export {};

package/dist/types/SplitView/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SashAction } from './SplitViewSash';
+declare type SplitViewProps = {
+    children: JSX.Element[];
+    allowResize?: boolean;
+    split?: 'vertical' | 'horizontal';
+    sizes: (string | number)[];
+    onChange: (sizes: number[]) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    performanceMode?: boolean;
+    resizerSize?: number;
+    sashAction?: SashAction;
+};
+export declare const SplitView: ({ children, sizes: propSizes, allowResize, split, resizerSize, performanceMode, onChange, onDragStart, onDragEnd, sashAction, }: SplitViewProps) => JSX.Element;
+export {};

package/dist/types/SplitView/types.d.ts

@@ -0,0 +1,8 @@
+export declare type IAxis = {
+    x: number;
+    y: number;
+};
+export declare type ICacheSizes = {
+    sizes: (string | number)[];
+    sashPosSizes: (string | number)[];
+};