datocms-react-ui 2.1.0-alpha.0 → 2.1.0-alpha.2

package/dist/cjs/VerticalSplit/index.js

@@ -0,0 +1,337 @@
+"use strict";
+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);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalSplit = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importStar(require("react"));
+var SplitView_1 = require("../SplitView");
+var SplitViewPane_1 = require("../SplitView/SplitViewPane");
+var styles_module_css_json_1 = __importDefault(require("../SplitView/SplitViewSash/styles.module.css.json"));
+var icons_1 = require("../icons");
+var styles_module_css_json_2 = __importDefault(require("./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>;
+ * ```
+ */
+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 = (0, react_1.useState)(calculateSizes({ size: size, primaryPane: primaryPane, isSecondaryCollapsed: isSecondaryCollapsed })), sizes = _f[0], setSizes = _f[1];
+    var currentSizes = (0, react_1.useRef)(sizes);
+    var SashActionIcon = onSecondaryToggle
+        ? primaryPane === 'left'
+            ? isSecondaryCollapsed
+                ? icons_1.SidebarFlipIcon
+                : icons_1.ChevronsRightIcon
+            : isSecondaryCollapsed
+                ? icons_1.ChevronsRightIcon
+                : icons_1.ChevronsLeftIcon
+        : undefined;
+    (0, react_1.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_1.default.createElement(SplitViewPane_1.SplitViewPane, __assign({}, (isSecondaryPane && !isSecondaryCollapsed
+            ? { minSize: minSize, maxSize: maxSize }
+            : {})), isSecondaryPane && isSecondaryCollapsed ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_2.default.VerticalSplitPane__expand, styles_module_css_json_2.default["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_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: styles_module_css_json_2.default.VerticalSplitPaneOverlay, onClick: handleSecondaryClick },
+                react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_2.default.VerticalSplitPaneOverlay__secondary, styles_module_css_json_2.default["VerticalSplitPaneOverlay__secondary--".concat(primaryPane === 'left' ? 'right' : 'left')]), style: {
+                        width: size,
+                        maxWidth: maxSize,
+                        minWidth: minSize,
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                    } },
+                    secondaryPaneChild,
+                    react_1.default.createElement("div", { className: styles_module_css_json_2.default.VerticalSplitPaneOverlay__sash },
+                        react_1.default.createElement("div", { className: styles_module_css_json_1.default.SplitViewSash__content, onClick: handleSecondaryClick },
+                            react_1.default.createElement("div", { className: styles_module_css_json_1.default.SplitViewSash__content__button },
+                                react_1.default.createElement(SashActionIcon, null)))))),
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_2.default.VerticalSplitPaneOverlay__primary, styles_module_css_json_2.default["VerticalSplitPaneOverlay__primary--".concat(primaryPane)]) }, primaryPaneChild)));
+    }
+    return (react_1.default.createElement(SplitView_1.SplitView, { allowResize: !isSecondaryCollapsed && allowResize, sizes: sizes, onChange: handleChange, onDragEnd: handleDragEnd, sashAction: SashActionIcon && {
+            icon: react_1.default.createElement(SashActionIcon, null),
+            onClick: handleSecondaryClick,
+        } },
+        renderPane('left'),
+        renderPane('right')));
+}
+exports.VerticalSplit = VerticalSplit;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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/cjs/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/cjs/icons.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CaretUpIcon = exports.CaretDownIcon = exports.SidebarRightArrowIcon = exports.SidebarLeftArrowIcon = exports.BackIcon = void 0;
+exports.SidebarFlipIcon = exports.ChevronsRightIcon = exports.ChevronsLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.SidebarRightArrowIcon = exports.SidebarLeftArrowIcon = exports.BackIcon = void 0;
 var react_1 = __importDefault(require("react"));
 function BackIcon(_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;
@@ -35,4 +35,22 @@ function CaretUpIcon(_a) {
         react_1.default.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" })));
 }
 exports.CaretUpIcon = CaretUpIcon;
+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_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: width, height: height, style: style, className: className },
+        react_1.default.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" })));
+}
+exports.ChevronsLeftIcon = ChevronsLeftIcon;
+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_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: width, height: height, style: style, className: className },
+        react_1.default.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" })));
+}
+exports.ChevronsRightIcon = ChevronsRightIcon;
+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_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: width, height: height, style: style, className: className },
+        react_1.default.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" })));
+}
+exports.SidebarFlipIcon = SidebarFlipIcon;
 //# sourceMappingURL=icons.js.map

package/dist/cjs/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAkD;AASlD,SAAgB,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,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,+QAA+Q,GAAG,CACtR,CACP,CAAC;AACJ,CAAC;AAlBD,4BAkBC;AAED,SAAgB,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,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,yUAAyU,GAAG,CAChV,CACP,CAAC;AACJ,CAAC;AAlBD,oDAkBC;AAED,SAAgB,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,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,4UAA4U,GAAG,CACnV,CACP,CAAC;AACJ,CAAC;AAlBD,sDAkBC;AAED,SAAgB,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,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,yHAAyH,GAAG,CAChI,CACP,CAAC;AACJ,CAAC;AAlBD,sCAkBC;AAED,SAAgB,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,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,kKAAkK,GAAG,CACzK,CACP,CAAC;AACJ,CAAC;AAlBD,kCAkBC"}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/index.js

@@ -22,22 +22,26 @@ __exportStar(require("./Dropdown"), exports);
 __exportStar(require("./FieldError"), exports);
 __exportStar(require("./FieldGroup"), exports);
 __exportStar(require("./FieldHint"), exports);
-__exportStar(require("./Form"), exports);
 __exportStar(require("./FieldWrapper"), exports);
+__exportStar(require("./Form"), exports);
 __exportStar(require("./FormLabel"), exports);
+__exportStar(require("./HotKey"), exports);
 __exportStar(require("./icons"), exports);
 __exportStar(require("./Section"), exports);
 __exportStar(require("./SelectField"), exports);
 __exportStar(require("./SelectInput"), exports);
 __exportStar(require("./SidebarPanel"), exports);
 __exportStar(require("./Spinner"), exports);
+__exportStar(require("./SplitView"), exports);
 __exportStar(require("./SwitchField"), exports);
 __exportStar(require("./SwitchInput"), exports);
-__exportStar(require("./TextField"), exports);
-__exportStar(require("./TextInput"), exports);
 __exportStar(require("./TextareaField"), exports);
 __exportStar(require("./TextareaInput"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./TextInput"), exports);
 __exportStar(require("./Toolbar"), exports);
+__exportStar(require("./Tooltip"), exports);
 __exportStar(require("./useClickOutside"), exports);
 __exportStar(require("./useMediaQuery"), exports);
+__exportStar(require("./VerticalSplit"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,2CAAyB;AACzB,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,iDAA+B;AAC/B,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,kDAAgC;AAChC,kDAAgC;AAChC,4CAA0B;AAC1B,oDAAkC;AAClC,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,2CAAyB;AACzB,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,iDAA+B;AAC/B,yCAAuB;AACvB,8CAA4B;AAC5B,2CAAyB;AACzB,0CAAwB;AACxB,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,kDAAgC;AAChC,kDAAgC;AAChC,8CAA4B;AAC5B,8CAA4B;AAC5B,4CAA0B;AAC1B,4CAA0B;AAC1B,oDAAkC;AAClC,kDAAgC;AAChC,kDAAgC"}

package/dist/esm/HotKey/index.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+export declare type HotKeyProps = {
+    /**
+     * Keyboard shortcut string. Use "mod" for platform-specific modifier (Cmd on Mac, Ctrl elsewhere).
+     * Separate keys with "+". Examples: "mod+s", "mod+shift+p", "alt+enter"
+     */
+    hotkey: string;
+    /** Optional label to display before the key combination */
+    label?: string;
+};
+/**
+ * HotKey component displays keyboard shortcuts in a platform-aware format.
+ *
+ * The component automatically detects the user's platform and renders appropriate
+ * modifier key symbols (⌘ for Mac, Ctrl for Windows/Linux).
+ *
+ * @example Basic usage
+ *
+ * Display a simple keyboard shortcut without a label:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" />
+ * </Canvas>;
+ * ```
+ *
+ * @example With label
+ *
+ * Include a descriptive label to explain what the keyboard shortcut does:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" label="Save" />
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple hotkeys
+ *
+ * Display a list of keyboard shortcuts with labels for documenting available commands:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+c" label="Copy" />
+ *     <HotKey hotkey="mod+v" label="Paste" />
+ *     <HotKey hotkey="mod+shift+z" label="Redo" />
+ *     <HotKey hotkey="alt+enter" label="Submit" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Platform-specific rendering
+ *
+ * The component automatically adapts modifier keys based on the user's platform:
+ * - `mod` renders as `⌘` on Mac and `Ctrl` on Windows/Linux
+ * - `alt` renders as `⌥` on Mac and `Alt` on Windows/Linux
+ *
+ * This ensures the correct symbols are displayed for the user's operating system:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+k" label="Open command palette" />
+ *     <HotKey hotkey="alt+enter" label="Submit form" />
+ *     <HotKey hotkey="mod+alt+f" label="Find and replace" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export declare function HotKey({ hotkey, label }: HotKeyProps): JSX.Element;

package/dist/esm/HotKey/index.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import styles from './styles.module.css.json';
+var isMac = navigator.platform.indexOf('Mac') > -1;
+var modifierKey = isMac ? '⌘' : 'Ctrl';
+/**
+ * HotKey component displays keyboard shortcuts in a platform-aware format.
+ *
+ * The component automatically detects the user's platform and renders appropriate
+ * modifier key symbols (⌘ for Mac, Ctrl for Windows/Linux).
+ *
+ * @example Basic usage
+ *
+ * Display a simple keyboard shortcut without a label:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" />
+ * </Canvas>;
+ * ```
+ *
+ * @example With label
+ *
+ * Include a descriptive label to explain what the keyboard shortcut does:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" label="Save" />
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple hotkeys
+ *
+ * Display a list of keyboard shortcuts with labels for documenting available commands:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+c" label="Copy" />
+ *     <HotKey hotkey="mod+v" label="Paste" />
+ *     <HotKey hotkey="mod+shift+z" label="Redo" />
+ *     <HotKey hotkey="alt+enter" label="Submit" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Platform-specific rendering
+ *
+ * The component automatically adapts modifier keys based on the user's platform:
+ * - `mod` renders as `⌘` on Mac and `Ctrl` on Windows/Linux
+ * - `alt` renders as `⌥` on Mac and `Alt` on Windows/Linux
+ *
+ * This ensures the correct symbols are displayed for the user's operating system:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+k" label="Open command palette" />
+ *     <HotKey hotkey="alt+enter" label="Submit form" />
+ *     <HotKey hotkey="mod+alt+f" label="Find and replace" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function HotKey(_a) {
+    var hotkey = _a.hotkey, label = _a.label;
+    var keys = hotkey
+        .replace('mod', modifierKey)
+        .replace('alt', isMac ? '⌥' : 'Alt')
+        .split(/\+/)
+        .map(function (e) { return e.charAt(0).toUpperCase() + e.slice(1); });
+    return (React.createElement("div", { className: styles.hotKey },
+        label && React.createElement("span", { className: styles.label }, label),
+        React.createElement("div", { className: styles.keys }, keys.map(function (key) { return (React.createElement("span", { key: key, className: styles.hotKeyKey }, key)); }))));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/HotKey/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,IAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AACrD,IAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;AAYzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,MAAM,UAAU,MAAM,CAAC,EAA8B;QAA5B,MAAM,YAAA,EAAE,KAAK,WAAA;IACpC,IAAM,IAAI,GAAG,MAAM;SAChB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC;SAC3B,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;SACnC,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAtC,CAAsC,CAAC,CAAC;IAEtD,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC1B,KAAK,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAQ;QACvD,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IACxB,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,CACjB,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,IACxC,GAAG,CACC,CACR,EAJkB,CAIlB,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1 @@
+{ "hotKey": "_hotKey_1eko8_1", "label": "_label_1eko8_7", "keys": "_keys_1eko8_12", "hotKeyKey": "_hotKeyKey_1eko8_18" }

package/dist/esm/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/esm/SplitView/SplitViewPane/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import s from './styles.module.css.json';
+export function SplitViewPane(_a) {
+    var style = _a.style, children = _a.children;
+    return (React.createElement("div", { className: s.SplitViewPane, style: style }, children));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/SplitView/SplitViewPane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/SplitView/SplitViewPane/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAQzC,MAAM,UAAU,aAAa,CAAC,EAGU;QAFtC,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,OAAO,CACL,6BAAK,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,IAC1C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/SplitView/SplitViewPane/styles.module.css.json

@@ -0,0 +1 @@
+{ "SplitViewPane": "_SplitViewPane_1cl1f_1" }

package/dist/esm/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 {};