@bolio-ui/core 3.0.0-alpha.1 → 3.0.0

package/dist/{chunk-4ZGR7UMX.js → chunk-4DH6SOK4.js}

@@ -8,19 +8,22 @@ var _chunk5HRVN7L7js = require('./chunk-5HRVN7L7.js');
 var _chunkA3BIV2QMjs = require('./chunk-A3BIV2QM.js');
 
 
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+
+
 var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
 
 
 var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
 
 
-var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
 
 
-var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+var _chunkTPZUTHTQjs = require('./chunk-TPZUTHTQ.js');
 
 
-var _chunkDXHNQANXjs = require('./chunk-DXHNQANX.js');
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
 
 
 var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
@@ -85,7 +88,7 @@ var makeToastActions = (actions, cancelHandle) => {
   };
   if (!actions || !actions.length) return null;
   return actions.map((action, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkDXHNQANXjs.Button_default,
+    _chunkTPZUTHTQjs.Button_default,
     {
       auto: true,
       scale: 1 / 3,
@@ -156,12 +159,13 @@ var ToastItem = _react2.default.memo(({ toast, layout }) => {
     () => getTranslateByPlacement(placement),
     [placement]
   );
+  const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme, theme.expressiveness.shadowSmall);
   const toastStyle = {
     "--toast-item-max-height": maxHeight,
     "--toast-item-color": color,
-    "--toast-item-bg": bgColor,
+    "--toast-item-bg": bgColor === theme.palette.background ? surface.bg : bgColor,
     "--toast-item-radius": theme.layout.radius,
-    "--toast-item-shadow": theme.expressiveness.shadowSmall,
+    "--toast-item-shadow": surface.shadow,
     "--toast-item-margin": margin,
     "--toast-item-padding": padding,
     "--toast-item-enter-transform": enter,

package/dist/chunk-CGS2MT3G.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk26KDVRFSjs = require('./chunk-26KDVRFS.js');
+
+// core/Note/index.ts
+var Note_default2 = _chunk26KDVRFSjs.Note_default;
+
+
+
+exports.Note_default = Note_default2;

package/dist/{chunk-6ZBFUZSL.js → chunk-CU6SNPIM.js}

@@ -6,7 +6,7 @@
 
 
 
-var _chunkTKIUVNKPjs = require('./chunk-TKIUVNKP.js');
+var _chunkXKJDF225js = require('./chunk-XKJDF225.js');
 
 
 var _chunkF3AL4TQZjs = require('./chunk-F3AL4TQZ.js');
@@ -18,7 +18,10 @@ var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
 var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
 
 
-var _chunkDXHNQANXjs = require('./chunk-DXHNQANX.js');
+var _chunkTPZUTHTQjs = require('./chunk-TPZUTHTQ.js');
+
+
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
 
 
 
@@ -81,11 +84,12 @@ var ModalWrapper = _react2.default.forwardRef(({ className = "", children, visib
       }
     }
   };
+  const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme, theme.expressiveness.shadowLarge);
   const wrapperStyle = {
-    backgroundColor: theme.palette.background,
+    backgroundColor: surface.bg,
     color: theme.palette.foreground,
     borderRadius: theme.layout.radius,
-    boxShadow: theme.expressiveness.shadowLarge,
+    boxShadow: surface.shadow,
     fontSize: SCALES.font(1),
     height: SCALES.height(1, "auto"),
     "--modal-wrapper-padding-left": SCALES.pl(1.3125),
@@ -151,7 +155,7 @@ var ModalActionComponent = _react2.default.forwardRef(function({
   const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
   const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
   const btnRef = _react.useRef.call(void 0, null);
-  const { close } = _chunkTKIUVNKPjs.useModalContext.call(void 0, );
+  const { close } = _chunkXKJDF225js.useModalContext.call(void 0, );
   _react.useImperativeHandle.call(void 0, ref, () => btnRef.current);
   const clickHandler = (event) => {
     if (disabled) return;
@@ -163,15 +167,14 @@ var ModalActionComponent = _react2.default.forwardRef(function({
   const color = _react.useMemo.call(void 0, () => {
     return passive ? theme.palette.accents_5 : theme.palette.foreground;
   }, [theme.palette, passive]);
-  const bgColor = _react.useMemo.call(void 0, () => {
-    return disabled ? theme.palette.accents_1 : theme.palette.background;
-  }, [theme.palette, disabled]);
+  const actionBg = theme.type === "dark" ? theme.palette.accents_2 : theme.palette.background;
+  const hoverBg = theme.type === "dark" ? theme.palette.accents_3 : theme.palette.accents_1;
   const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, ModalAction_module_css_default.action, className);
   const actionStyle = {
     fontSize: SCALES.font(0.75),
     border: "none",
     color,
-    backgroundColor: theme.palette.background,
+    backgroundColor: actionBg,
     display: "flex",
     WebkitBoxAlign: "center",
     alignItems: "center",
@@ -182,15 +185,14 @@ var ModalActionComponent = _react2.default.forwardRef(function({
     borderRadius: 0,
     minWidth: 0,
     "--modal-action-hover-color": disabled ? color : theme.palette.foreground,
-    "--modal-action-hover-bg": disabled ? bgColor : theme.palette.accents_1
+    "--modal-action-hover-bg": disabled ? actionBg : hoverBg
   };
   const overrideProps = {
     ...props,
-    effect: false,
     ref: btnRef
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkDXHNQANXjs.Button_default,
+    _chunkTPZUTHTQjs.Button_default,
     {
       className: classes,
       onClick: clickHandler,
@@ -222,6 +224,7 @@ var ModalActionsComponent = ({
 }) => {
   const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
   const ref = _react.useRef.call(void 0, null);
+  const border = theme.type === "dark" ? theme.palette.accents_4 : theme.palette.border;
   const [height, setHeight] = _react.useState.call(void 0, "auto");
   _react.useEffect.call(void 0, () => {
     if (!ref.current) return;
@@ -236,10 +239,10 @@ var ModalActionsComponent = ({
         ...props,
         className: ModalActions_module_css_default.footer,
         style: {
-          borderTop: `1px solid ${theme.palette.border}`,
+          borderTop: `1px solid ${border}`,
           borderBottomLeftRadius: theme.layout.radius,
           borderBottomRightRadius: theme.layout.radius,
-          "--modal-actions-border": theme.palette.border
+          "--modal-actions-border": border
         },
         children
       }
@@ -274,7 +277,7 @@ var ModalComponent = _react2.default.forwardRef(
     const titleId = `${baseId}-title`;
     const descriptionId = `${baseId}-description`;
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
-    const [, setBodyHidden] = _chunkTKIUVNKPjs.use_body_scroll_default.call(void 0, null, { delayReset: 300 });
+    const [, setBodyHidden] = _chunkXKJDF225js.use_body_scroll_default.call(void 0, null, { delayReset: 300 });
     const [visible, setVisible] = _react.useState.call(void 0, false);
     const [withoutActionsChildren, ActionsChildren] = _chunkUX2B3G6Ujs.pickChild.call(void 0, 
       children,
@@ -314,8 +317,8 @@ var ModalComponent = _react2.default.forwardRef(
     );
     if (!portal) return null;
     return _reactdom.createPortal.call(void 0, 
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTKIUVNKPjs.ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkTKIUVNKPjs.backdrop_default,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXKJDF225js.ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkXKJDF225js.backdrop_default,
         {
           onClick: closeFromBackdrop,
           onContentClick,
@@ -333,8 +336,8 @@ var ModalComponent = _react2.default.forwardRef(
               className: wrapClassName,
               role,
               "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTKIUVNKPjs.ModalTitle_default) ? titleId : void 0),
-              "aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTKIUVNKPjs.ModalSubtitle_default) ? descriptionId : void 0),
+              "aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkXKJDF225js.ModalTitle_default) ? titleId : void 0),
+              "aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkXKJDF225js.ModalSubtitle_default) ? descriptionId : void 0),
               children: [
                 withoutActionsChildren,
                 hasActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalActions_default, { children: ActionsChildren })
@@ -352,9 +355,9 @@ var Modal = _chunkMAICNLTYjs.with_scale_default.call(void 0, ModalComponent);
 var Modal_default = Modal;
 
 // core/Modal/index.ts
-Modal_default.Title = _chunkTKIUVNKPjs.ModalTitle_default;
-Modal_default.Subtitle = _chunkTKIUVNKPjs.ModalSubtitle_default;
-Modal_default.Content = _chunkTKIUVNKPjs.ModalContent_default;
+Modal_default.Title = _chunkXKJDF225js.ModalTitle_default;
+Modal_default.Subtitle = _chunkXKJDF225js.ModalSubtitle_default;
+Modal_default.Content = _chunkXKJDF225js.ModalContent_default;
 Modal_default.Action = ModalAction_default;
 var Modal_default2 = Modal_default;
 

package/dist/chunk-CY5KTINE.js

@@ -0,0 +1,107 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk26KDVRFSjs = require('./chunk-26KDVRFS.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Alert/Alert.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Alert/Alert.module.css.bolio-css-module-source
+var Alert_module_css_default = { "alert": "Alert-module_alert__Ghxl7", "icon": "Alert-module_icon__hcZdu", "body": "Alert-module_body__SuUYD", "title": "Alert-module_title__8yipK", "close": "Alert-module_close__ZPg5d" };
+
+// core/Alert/Alert.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var AlertComponent = _react2.default.forwardRef(
+  ({
+    children,
+    type = "default",
+    title,
+    icon,
+    filled = false,
+    light = false,
+    subtle = false,
+    onClose,
+    closeLabel = "Close",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const { color, borderColor, bgColor } = _react.useMemo.call(void 0, 
+      () => _chunk26KDVRFSjs.getStatusColor.call(void 0, type, { filled, light, subtle }, theme),
+      [type, filled, light, subtle, theme]
+    );
+    const alertStyle = {
+      border: `1px solid ${borderColor}`,
+      color,
+      backgroundColor: bgColor,
+      borderRadius: theme.layout.radius,
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0.75)} ${SCALES.pr(1)} ${SCALES.pb(0.75)} ${SCALES.pl(1)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        role: type === "error" || type === "warning" ? "alert" : "status",
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Alert_module_css_default.alert, className),
+        ...props,
+        style: alertStyle,
+        children: [
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Alert_module_css_default.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Alert_module_css_default.body, children: [
+            title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Alert_module_css_default.title, children: title }),
+            children
+          ] }),
+          onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              className: Alert_module_css_default.close,
+              "aria-label": closeLabel,
+              onClick: onClose,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertComponent.displayName = "BolioUIAlert";
+var Alert = _chunkMAICNLTYjs.with_scale_default.call(void 0, AlertComponent);
+var Alert_default = Alert;
+
+// core/Alert/index.ts
+var Alert_default2 = Alert_default;
+
+
+
+exports.Alert_default = Alert_default2;

package/dist/{chunk-IJGIEX5J.js → chunk-DEMQXB46.js}

@@ -13,6 +13,9 @@ var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -57,6 +60,7 @@ var ColorInputComponent = _react2.default.forwardRef(
     ...props
   }, ref) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
     const generatedId = _react.useId.call(void 0, );
     const inputId = props.id || generatedId;
@@ -122,9 +126,9 @@ var ColorInputComponent = _react2.default.forwardRef(
       "--colorinput-focus-border": colors.focusBorder,
       "--colorinput-placeholder": colors.placeholderColor,
       "--colorinput-color": colors.color,
-      "--colorinput-popup-bg": theme.palette.background,
+      "--colorinput-popup-bg": surface.bg,
       "--colorinput-popup-border": theme.palette.border,
-      "--colorinput-shadow": theme.expressiveness.shadowMedium
+      "--colorinput-shadow": surface.shadow
     };
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",

package/dist/{chunk-AVO2SK2I.js → chunk-DYYSUJ35.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkXLPOECCEjs = require('./chunk-XLPOECCE.js');
+var _chunkFLUNRVVGjs = require('./chunk-FLUNRVVG.js');
 
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
@@ -64,7 +64,7 @@ var ContextMenuComponent = _react2.default.forwardRef(
           children,
           point && // a new point opens a new menu, so it is placed there
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkXLPOECCEjs.Menu_default,
+            _chunkFLUNRVVGjs.Menu_default,
             {
               visible: true,
               onVisibleChange: (visible) => change(visible),

package/dist/chunk-EUYSKHRS.js

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/surface.ts
+var getSurface = (theme, shadow = theme.expressiveness.shadowMedium) => {
+  const dark = theme.type === "dark";
+  return {
+    bg: dark ? theme.palette.accents_3 : theme.palette.background,
+    hover: dark ? theme.palette.accents_4 : theme.palette.accents_2,
+    shadow: dark ? `0 2px 6px rgb(0 0 0 / 40%), ${shadow}` : shadow
+  };
+};
+
+
+
+exports.getSurface = getSurface;

package/dist/chunk-FFEAKF3A.js

@@ -0,0 +1,220 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Splitter/Splitter.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Splitter/SplitterContext.ts
+
+var SplitterPanelContext = _react2.default.createContext(null);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Splitter/Splitter.module.css.bolio-css-module-source
+var Splitter_module_css_default = { "splitter": "Splitter-module_splitter__ZxGeO", "horizontal": "Splitter-module_horizontal__1LuP6", "vertical": "Splitter-module_vertical__APNTT", "panel": "Splitter-module_panel__UyXwt", "handle": "Splitter-module_handle__zkBUq" };
+
+// core/Splitter/Splitter.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var initialSizes = (panels) => {
+  const given = panels.map((panel) => panel.props.defaultSize);
+  const used = given.reduce((sum, size) => sum + (size != null ? size : 0), 0);
+  const open = given.filter((size) => size === void 0).length;
+  return given.map(
+    (size) => size === void 0 ? Math.max(0, 100 - used) / open : size
+  );
+};
+var SplitterComponent = _react2.default.forwardRef(
+  ({
+    direction = "horizontal",
+    onResize,
+    handleLabel = "Resize",
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const baseId = _react.useId.call(void 0, );
+    const panels = _react2.default.Children.toArray(children).filter(
+      _react2.default.isValidElement
+    );
+    const horizontal = direction === "horizontal";
+    const [sizes, setSizes] = _react.useState.call(void 0, () => initialSizes(panels));
+    if (sizes.length !== panels.length) setSizes(initialSizes(panels));
+    const elements = _react.useRef.call(void 0, []);
+    const drag = _react.useRef.call(void 0, void 0);
+    const minOf = (index) => {
+      var _a;
+      return (_a = panels[index].props.minSize) != null ? _a : 0;
+    };
+    const maxOf = (index) => {
+      var _a;
+      return (_a = panels[index].props.maxSize) != null ? _a : 100;
+    };
+    const move = (index, delta, from) => {
+      const [a, b] = [from[index], from[index + 1]];
+      const low = Math.max(minOf(index) - a, b - maxOf(index + 1));
+      const high = Math.min(maxOf(index) - a, b - minOf(index + 1));
+      const applied = Math.min(Math.max(delta, low), high);
+      if (!applied && sizes[index] === a) return;
+      const next = [...from];
+      next[index] = a + applied;
+      next[index + 1] = b - applied;
+      setSizes(next);
+      if (onResize) onResize(next);
+    };
+    const pointerDown = (event) => {
+      var _a, _b;
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      const room = elements.current.reduce((sum, element) => {
+        const rect = element == null ? void 0 : element.getBoundingClientRect();
+        return sum + (rect ? horizontal ? rect.width : rect.height : 0);
+      }, 0);
+      drag.current = {
+        from: horizontal ? event.clientX : event.clientY,
+        sizes: [...sizes],
+        room
+      };
+    };
+    const pointerMove = (event, index) => {
+      var _a, _b;
+      const start = drag.current;
+      if (!start || !start.room) return;
+      if (!((_b = (_a = event.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId))) return;
+      const travelled = (horizontal ? event.clientX : event.clientY) - start.from;
+      move(index, travelled / start.room * 100, start.sizes);
+    };
+    const keyDown = (event, index) => {
+      const step = event.shiftKey ? 10 : 1;
+      const [less, more] = horizontal ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+      const deltas = {
+        [less]: -step,
+        [more]: step,
+        Home: -100,
+        End: 100
+      };
+      if (!(event.key in deltas)) return;
+      event.preventDefault();
+      move(index, deltas[event.key], sizes);
+    };
+    const template = sizes.map((size) => `minmax(0, ${size}fr)`).join(" auto ");
+    const splitterStyle = {
+      "--splitter-template": template,
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "100%"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--splitter-line": theme.palette.border,
+      "--splitter-active": theme.palette.primary,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Splitter_module_css_default.splitter, className, {
+          [Splitter_module_css_default.horizontal]: horizontal,
+          [Splitter_module_css_default.vertical]: !horizontal
+        }),
+        ...props,
+        style: splitterStyle,
+        children: panels.map((panel, index) => {
+          var _a;
+          const [a, b] = [sizes[index], sizes[index + 1]];
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              SplitterPanelContext.Provider,
+              {
+                value: {
+                  id: `${baseId}-panel-${index}`,
+                  setElement: (element) => {
+                    elements.current[index] = element;
+                  }
+                },
+                children: panel
+              }
+            ),
+            index < panels.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                role: "separator",
+                tabIndex: 0,
+                "aria-label": handleLabel,
+                "aria-orientation": horizontal ? "vertical" : "horizontal",
+                "aria-controls": `${baseId}-panel-${index}`,
+                "aria-valuenow": Math.round(a),
+                "aria-valuemin": Math.round(
+                  Math.max(minOf(index), a + b - maxOf(index + 1))
+                ),
+                "aria-valuemax": Math.round(
+                  Math.min(maxOf(index), a + b - minOf(index + 1))
+                ),
+                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Splitter_module_css_default.handle),
+                onPointerDown: pointerDown,
+                onPointerMove: (event) => pointerMove(event, index),
+                onPointerUp: () => drag.current = void 0,
+                onPointerCancel: () => drag.current = void 0,
+                onKeyDown: (event) => keyDown(event, index)
+              }
+            )
+          ] }, (_a = panel.key) != null ? _a : index);
+        })
+      }
+    );
+  }
+);
+SplitterComponent.displayName = "BolioUISplitter";
+var Splitter = _chunkMAICNLTYjs.with_scale_default.call(void 0, SplitterComponent);
+var Splitter_default = Splitter;
+
+// core/Splitter/SplitterPanel.tsx
+
+
+var SplitterPanel = _react2.default.forwardRef(
+  ({
+    // read by the Splitter
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    defaultSize,
+    minSize,
+    maxSize,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const config = _react.useContext.call(void 0, SplitterPanelContext);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: (element) => {
+          config == null ? void 0 : config.setElement(element);
+          if (typeof ref === "function") ref(element);
+          else if (ref) ref.current = element;
+        },
+        id: config == null ? void 0 : config.id,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Splitter_module_css_default.panel, className),
+        ...props,
+        style,
+        children
+      }
+    );
+  }
+);
+SplitterPanel.displayName = "BolioUISplitterPanel";
+var SplitterPanel_default = SplitterPanel;
+
+// core/Splitter/index.ts
+Splitter_default.Panel = SplitterPanel_default;
+var Splitter_default2 = Splitter_default;
+
+
+
+exports.Splitter_default = Splitter_default2;

package/dist/{chunk-XLPOECCE.js → chunk-FLUNRVVG.js}

@@ -1,11 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAG2NWQYLjs = require('./chunk-AG2NWQYL.js');
+var _chunkWCTANCLGjs = require('./chunk-WCTANCLG.js');
 
 
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
 
 
+var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
+
+
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
@@ -64,10 +67,11 @@ var MenuList = ({
   };
   _react.useEffect.call(void 0, () => {
     var _a, _b;
-    if (focus === "list") return (_a = listRef.current) == null ? void 0 : _a.focus();
+    const options = { preventScroll: true };
+    if (focus === "list") return (_a = listRef.current) == null ? void 0 : _a.focus(options);
     const items = getItems();
     const target = focus === "first" ? items[0] : items[items.length - 1];
-    (_b = target != null ? target : listRef.current) == null ? void 0 : _b.focus();
+    (_b = target != null ? target : listRef.current) == null ? void 0 : _b.focus(options);
   }, []);
   const typeahead = (key, items, index) => {
     const now = Date.now();
@@ -129,13 +133,14 @@ var MenuList = ({
     const isCharacter = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
     if (isCharacter) typeahead(event.key, items, index);
   };
+  const surface = _chunkEUYSKHRSjs.getSurface.call(void 0, theme);
   const listStyle = {
     "--menu-list-font-size": SCALES.font(0.875),
     "--menu-list-color": theme.palette.foreground,
-    "--menu-list-bg": theme.palette.background,
+    "--menu-list-bg": surface.bg,
     "--menu-list-border-color": theme.palette.border,
     "--menu-list-radius": theme.layout.radius,
-    "--menu-list-shadow": theme.expressiveness.shadowMedium
+    "--menu-list-shadow": surface.shadow
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuListContext.Provider, { value: { openSub, setOpenSub }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -227,7 +232,7 @@ var MenuComponent = _react2.default.forwardRef(
             onKeyDown: keyDownHandler
           }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkAG2NWQYLjs.dropdown_default,
+            _chunkWCTANCLGjs.dropdown_default,
             {
               parent: wrapperRef,
               visible,
@@ -320,7 +325,7 @@ var MenuItemBase = _react2.default.forwardRef(
     };
     const itemStyle = {
       "--menu-item-color": theme.palette.foreground,
-      "--menu-item-focus-bg": theme.palette.accents_2,
+      "--menu-item-focus-bg": _chunkEUYSKHRSjs.getSurface.call(void 0, theme).hover,
       "--menu-item-error-color": theme.palette.error,
       "--menu-item-error-focus-bg": theme.palette.errorLight,
       "--menu-item-error-focus-color": theme.palette.errorDark,