@bolio-ui/core 3.0.5 → 3.1.0

package/dist/chunk-O4PVAWC5.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkY6DIYKCEjs = require('./chunk-Y6DIYKCE.js');
+
+// core/use-throttled-state/use-throttled-state.ts
+var _react = require('react');
+var useThrottledState = (initialValue, wait) => {
+  const [value, setValue] = _react.useState.call(void 0, initialValue);
+  const throttledSet = _chunkY6DIYKCEjs.use_throttled_callback_default.call(void 0, setValue, wait);
+  return [value, throttledSet];
+};
+var use_throttled_state_default = useThrottledState;
+
+// core/use-throttled-state/index.ts
+var use_throttled_state_default2 = use_throttled_state_default;
+
+
+
+exports.use_throttled_state_default = use_throttled_state_default2;

package/dist/chunk-OLNIDUBW.js

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-idle/use-idle.ts
+var _react = require('react');
+var DEFAULT_EVENTS = ["keypress", "mousemove", "touchmove", "click", "scroll"];
+var useIdle = (timeout, { events = DEFAULT_EVENTS, initialState = true } = {}) => {
+  const [idle, setIdle] = _react.useState.call(void 0, initialState);
+  _react.useEffect.call(void 0, () => {
+    let timer;
+    const start = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => setIdle(true), timeout);
+    };
+    const handler = () => {
+      setIdle(false);
+      start();
+    };
+    events.forEach((event) => document.addEventListener(event, handler));
+    start();
+    return () => {
+      clearTimeout(timer);
+      events.forEach((event) => document.removeEventListener(event, handler));
+    };
+  }, [timeout, events]);
+  return idle;
+};
+var use_idle_default = useIdle;
+
+// core/use-idle/index.ts
+var use_idle_default2 = use_idle_default;
+
+
+
+exports.use_idle_default = use_idle_default2;

package/dist/{chunk-GGD4BGH2.js → chunk-OOU3TSOA.js}

@@ -1,9 +1,4 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-current-state/use-current-state.ts
-
-
-
-
-
 var _react = require('react');
 var useCurrentState = (initialState) => {
   const [state, setState] = _react.useState.call(void 0, () => {

package/dist/chunk-OVJ5ECP5.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-set/use-set.ts
+var _react = require('react');
+var mutating = ["add", "delete", "clear"];
+var useSet = (values) => {
+  const [, update] = _react.useReducer.call(void 0, (tick) => tick + 1, 0);
+  const ref = _react.useRef.call(void 0, null);
+  if (!ref.current) {
+    const set = new Set(values);
+    mutating.forEach((method) => {
+      const original = set[method].bind(set);
+      Object.defineProperty(set, method, {
+        value: (...args) => {
+          const result = original(...args);
+          update();
+          return result;
+        }
+      });
+    });
+    ref.current = set;
+  }
+  return ref.current;
+};
+var use_set_default = useSet;
+
+// core/use-set/index.ts
+var use_set_default2 = use_set_default;
+
+
+
+exports.use_set_default = use_set_default2;

package/dist/chunk-OX3PUZOD.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-scroll-direction/use-scroll-direction.ts
+var _react = require('react');
+var useScrollDirection = () => {
+  const [direction, setDirection] = _react.useState.call(void 0, "up");
+  _react.useEffect.call(void 0, () => {
+    let previous = window.scrollY;
+    const update = () => {
+      const current = window.scrollY;
+      if (current !== previous) setDirection(current > previous ? "down" : "up");
+      previous = current;
+    };
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, []);
+  return direction;
+};
+var use_scroll_direction_default = useScrollDirection;
+
+// core/use-scroll-direction/index.ts
+var use_scroll_direction_default2 = use_scroll_direction_default;
+
+
+
+exports.use_scroll_direction_default = use_scroll_direction_default2;

package/dist/chunk-OXHT5DES.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-throttled-value/use-throttled-value.ts
+var _react = require('react');
+var useThrottledValue = (value, wait) => {
+  const [throttled, setThrottled] = _react.useState.call(void 0, value);
+  const lastRun = _react.useRef.call(void 0, 0);
+  _react.useEffect.call(void 0, () => {
+    const remaining = wait - (Date.now() - lastRun.current);
+    const run = () => {
+      lastRun.current = Date.now();
+      setThrottled(value);
+    };
+    if (remaining <= 0) {
+      run();
+      return;
+    }
+    const timer = setTimeout(run, remaining);
+    return () => clearTimeout(timer);
+  }, [value, wait]);
+  return throttled;
+};
+var use_throttled_value_default = useThrottledValue;
+
+// core/use-throttled-value/index.ts
+var use_throttled_value_default2 = use_throttled_value_default;
+
+
+
+exports.use_throttled_value_default = use_throttled_value_default2;

package/dist/chunk-P5ZQMZBG.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+// core/use-long-press/use-long-press.ts
+var _react = require('react');
+var useLongPress = (onLongPress, { threshold = 400 } = {}) => {
+  const latest = _chunkZRORQ2WHjs.use_latest_default.call(void 0, onLongPress);
+  const timer = _react.useRef.call(void 0, void 0);
+  const start = _react.useCallback.call(void 0, () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => latest.current(), threshold);
+  }, [latest, threshold]);
+  const cancel = _react.useCallback.call(void 0, () => clearTimeout(timer.current), []);
+  _react.useEffect.call(void 0, () => cancel, [cancel]);
+  return _react.useMemo.call(void 0, 
+    () => ({
+      onMouseDown: start,
+      onTouchStart: start,
+      onMouseUp: cancel,
+      onMouseLeave: cancel,
+      onTouchEnd: cancel
+    }),
+    [start, cancel]
+  );
+};
+var use_long_press_default = useLongPress;
+
+// core/use-long-press/index.ts
+var use_long_press_default2 = use_long_press_default;
+
+
+
+exports.use_long_press_default = use_long_press_default2;

package/dist/{chunk-X4TPC7HS.js → chunk-PMP2DFDQ.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+var _chunkCCKWTHUTjs = require('./chunk-CCKWTHUT.js');
 
 
 
@@ -45,7 +45,7 @@ var PinInputComponent = _react2.default.forwardRef(
   }, ref) => {
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
-    const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, error ? "error" : type, disabled, {
+    const colors = _chunkCCKWTHUTjs.getColors.call(void 0, theme.palette, error ? "error" : type, disabled, {
       filled,
       light,
       ghost,

package/dist/chunk-PSZNBTTF.js

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-splitter/use-splitter.ts
+var _react = require('react');
+var useSplitter = ({
+  initialSize = 50,
+  min = 10,
+  max = 90,
+  direction = "horizontal"
+} = {}) => {
+  const containerRef = _react.useRef.call(void 0, null);
+  const handleRef = _react.useRef.call(void 0, null);
+  const [size, setSize] = _react.useState.call(void 0, initialSize);
+  const [dragging, setDragging] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    const container = containerRef.current;
+    const handle = handleRef.current;
+    if (!container || !handle) return;
+    const down = (event) => {
+      var _a;
+      (_a = handle.setPointerCapture) == null ? void 0 : _a.call(handle, event.pointerId);
+      setDragging(true);
+    };
+    const move = (event) => {
+      var _a;
+      if (!((_a = handle.hasPointerCapture) == null ? void 0 : _a.call(handle, event.pointerId))) return;
+      const rect = container.getBoundingClientRect();
+      const percent = direction === "horizontal" ? (event.clientX - rect.left) / (rect.width || 1) * 100 : (event.clientY - rect.top) / (rect.height || 1) * 100;
+      setSize(Math.min(Math.max(percent, min), max));
+    };
+    const up = (event) => {
+      var _a;
+      (_a = handle.releasePointerCapture) == null ? void 0 : _a.call(handle, event.pointerId);
+      setDragging(false);
+    };
+    handle.addEventListener("pointerdown", down);
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", up);
+    handle.addEventListener("pointercancel", up);
+    return () => {
+      handle.removeEventListener("pointerdown", down);
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", up);
+      handle.removeEventListener("pointercancel", up);
+    };
+  }, [min, max, direction]);
+  return { containerRef, handleRef, size, dragging };
+};
+var use_splitter_default = useSplitter;
+
+// core/use-splitter/index.ts
+var use_splitter_default2 = use_splitter_default;
+
+
+
+exports.use_splitter_default = use_splitter_default2;

package/dist/{chunk-TPZUTHTQ.js → chunk-Q2K4VARR.js}

@@ -6,14 +6,14 @@ var _chunkBSDZWWUSjs = require('./chunk-BSDZWWUS.js');
 var _chunkNDERASK2js = require('./chunk-NDERASK2.js');
 
 
+var _chunkLMDBE6T6js = require('./chunk-LMDBE6T6.js');
 
-var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
 
 
-var _chunkRZBEZ26Ajs = require('./chunk-RZBEZ26A.js');
+var _chunkQ4FDY7EJjs = require('./chunk-Q4FDY7EJ.js');
 
 
-var _chunkLMDBE6T6js = require('./chunk-LMDBE6T6.js');
+var _chunkSELOBD66js = require('./chunk-SELOBD66.js');
 
 
 
@@ -26,11 +26,6 @@ var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
 var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
 
 // core/Button/Button.tsx
-
-
-
-
-
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // core/Button/ButtonDrip.tsx
@@ -116,9 +111,9 @@ var filterPropsWithGroup = (props, config) => {
 };
 
 // core/Button/styles.ts
-var getButtonGhostColors = (palette, type) => _chunkGJZT47MPjs.isSemanticColorType.call(void 0, type) ? _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "outline") : null;
-var getButtonLightColors = (palette, type) => _chunkGJZT47MPjs.isSemanticColorType.call(void 0, type) ? _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "light") : null;
-var getButtonSubtleColors = (palette, type) => _chunkGJZT47MPjs.isSemanticColorType.call(void 0, type) ? _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "subtle") : null;
+var getButtonGhostColors = (palette, type) => _chunkQ4FDY7EJjs.isSemanticColorType.call(void 0, type) ? _chunkQ4FDY7EJjs.getVariantColors.call(void 0, palette, type, "outline") : null;
+var getButtonLightColors = (palette, type) => _chunkQ4FDY7EJjs.isSemanticColorType.call(void 0, type) ? _chunkQ4FDY7EJjs.getVariantColors.call(void 0, palette, type, "light") : null;
+var getButtonSubtleColors = (palette, type) => _chunkQ4FDY7EJjs.isSemanticColorType.call(void 0, type) ? _chunkQ4FDY7EJjs.getVariantColors.call(void 0, palette, type, "subtle") : null;
 var getButtonColors = (palette, props) => {
   const { type, disabled, ghost, subtle } = props;
   const colors = {
@@ -219,7 +214,7 @@ var getButtonGhostHoverColors = (palette, type) => {
 var getButtonHoverColors = (palette, props) => {
   const { type, disabled, loading, shadow, ghost } = props;
   const defaultColor = getButtonColors(palette, props);
-  const alphaBackground = _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, defaultColor.bg, 0.85);
+  const alphaBackground = _chunkSELOBD66js.addColorAlpha.call(void 0, defaultColor.bg, 0.85);
   const colors = {
     default: {
       bg: palette.background,
@@ -315,10 +310,10 @@ var getButtonCursor = (disabled, loading) => {
 };
 var getButtonDripColor = (palette, props) => {
   const { type, subtle } = props;
-  if (subtle) return _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, getButtonColors(palette, props).color, 0.25);
+  if (subtle) return _chunkSELOBD66js.addColorAlpha.call(void 0, getButtonColors(palette, props).color, 0.25);
   const isLightHover = type == null ? void 0 : type.endsWith("light");
   const hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, hoverColors.bg, 0.65) : _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, palette.accents_3, 0.65);
+  return isLightHover ? _chunkSELOBD66js.addColorAlpha.call(void 0, hoverColors.bg, 0.65) : _chunkSELOBD66js.addColorAlpha.call(void 0, palette.accents_3, 0.65);
 };
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/Button.module.css.bolio-css-module-source
@@ -422,6 +417,7 @@ var ButtonComponent = _react2.default.forwardRef((btnProps, ref) => {
     "--bolio-ui-button-height": SCALES.height(2.5),
     "--bolio-ui-button-color": color,
     "--bolio-ui-button-bg": bg,
+    "--bolio-ui-button-focus": theme.palette.primary,
     minWidth: iconOnly ? SCALES.width(2.5) : auto ? "min-content" : SCALES.width(10.5),
     width: iconOnly ? SCALES.width(2.5) : auto ? "auto" : "initial",
     height: SCALES.height(2.5),

package/dist/chunk-Q2QKLG4O.js

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-uncontrolled/use-uncontrolled.ts
+var _react = require('react');
+var useUncontrolled = ({
+  value,
+  defaultValue,
+  finalValue,
+  onChange
+}) => {
+  const [uncontrolled, setUncontrolled] = _react.useState.call(void 0, 
+    defaultValue !== void 0 ? defaultValue : finalValue
+  );
+  if (value !== void 0) {
+    return [value, (next) => onChange == null ? void 0 : onChange(next), true];
+  }
+  return [
+    uncontrolled,
+    (next) => {
+      setUncontrolled(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    false
+  ];
+};
+var use_uncontrolled_default = useUncontrolled;
+
+// core/use-uncontrolled/index.ts
+var use_uncontrolled_default2 = use_uncontrolled_default;
+
+
+
+exports.use_uncontrolled_default = use_uncontrolled_default2;

package/dist/chunk-Q4FDY7EJ.js

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkSELOBD66js = require('./chunk-SELOBD66.js');
+
+// core/utils/variant-colors.ts
+var SEMANTIC_COLOR_TYPES = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "info"
+];
+var isSemanticColorType = (type) => !!type && SEMANTIC_COLOR_TYPES.includes(type);
+var isDarkPalette = (palette) => palette.background < palette.foreground;
+var mixWithPage = (palette, color, percent) => {
+  const from = _chunkSELOBD66js.colorToRgbValues.call(void 0, color);
+  const to = _chunkSELOBD66js.colorToRgbValues.call(void 0, palette.background);
+  const [r, g, b] = [0, 1, 2].map(
+    (i) => Math.round((from[i] * percent + to[i] * (100 - percent)) / 100)
+  );
+  return `rgb(${r}, ${g}, ${b})`;
+};
+var getVariantColors = (palette, type, variant) => {
+  const base = palette[type];
+  switch (variant) {
+    case "filled":
+      return { bg: base, border: base, color: "#fff" };
+    case "light":
+      if (isDarkPalette(palette))
+        return {
+          bg: mixWithPage(palette, base, 14),
+          border: mixWithPage(palette, base, 40),
+          color: base
+        };
+      return {
+        bg: palette[`${type}Lighter`],
+        border: palette[`${type}Lighter`],
+        color: palette[`${type}Dark`]
+      };
+    case "outline":
+      return { bg: palette.background, border: base, color: base };
+    case "subtle":
+      return { bg: "transparent", border: "transparent", color: base };
+  }
+};
+
+
+
+
+
+
+exports.isSemanticColorType = isSemanticColorType; exports.isDarkPalette = isDarkPalette; exports.mixWithPage = mixWithPage; exports.getVariantColors = getVariantColors;

package/dist/{chunk-J4K4LRBI.js → chunk-QCLQ5AJX.js}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+var _chunkE4LPRAZ6js = require('./chunk-E4LPRAZ6.js');
 
 // core/use-input/use-input.tsx
 var useInput = (initialValue) => {
-  const [state, setState, currentRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, initialValue);
+  const [state, setState, currentRef] = _chunkE4LPRAZ6js.use_current_state_default.call(void 0, initialValue);
   return {
     state,
     setState,

package/dist/{chunk-TWIOSRRP.js → chunk-QCPCIVDI.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkWEYAL53Ojs = require('./chunk-WEYAL53O.js');
+var _chunkTZ6SF6COjs = require('./chunk-TZ6SF6CO.js');
 
 
 
@@ -204,7 +204,7 @@ var getAddressInput = (url, showFullLink, colors, anchorProps) => /* @__PURE__ *
     style: { backgroundColor: colors.inputBgColor },
     children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ImageBrowser_module_css_default.https, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImageBrowserHttpsIcon_default, {}) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEYAL53Ojs.Link_default, { href: url, title: url, target: "_blank", ...anchorProps, children: showFullLink ? url : getHostFromUrl(url) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTZ6SF6COjs.Link_default, { href: url, title: url, target: "_blank", ...anchorProps, children: showFullLink ? url : getHostFromUrl(url) })
     ]
   }
 );

package/dist/{chunk-FQWH4PDK.js → chunk-QQWFZSAI.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+var _chunkQ4FDY7EJjs = require('./chunk-Q4FDY7EJ.js');
 
 
 
@@ -51,7 +51,7 @@ var ChipComponent = _react2.default.forwardRef(
       setSelfChecked(event.target.checked);
       if (onChange) onChange(event.target.checked);
     };
-    const { bg, color, border } = _chunkGJZT47MPjs.getVariantColors.call(void 0, theme.palette, type, "light");
+    const { bg, color, border } = _chunkQ4FDY7EJjs.getVariantColors.call(void 0, theme.palette, type, "light");
     const chipStyle = {
       height: SCALES.height(2),
       margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,

package/dist/{chunk-RWRFOGCU.js → chunk-QQY3MWML.js}

@@ -10,6 +10,11 @@ var _chunkLMDBE6T6js = require('./chunk-LMDBE6T6.js');
 
 
 
+
+var _chunkQ4FDY7EJjs = require('./chunk-Q4FDY7EJ.js');
+
+
+
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 
 
@@ -29,6 +34,7 @@ var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
 
 
 
+
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // core/ButtonDropdown/styles.ts
@@ -101,6 +107,15 @@ var getColor = (palette, type, disabled = false) => {
       hoverBgColor: palette.accents_2,
       hoverBorder: palette.accents_3
     };
+  if (type && _chunkQ4FDY7EJjs.isSemanticColorType.call(void 0, type) && _chunkQ4FDY7EJjs.isDarkPalette.call(void 0, palette)) {
+    const { bg, color } = _chunkQ4FDY7EJjs.getVariantColors.call(void 0, palette, type, "light");
+    return {
+      ...colors[type],
+      color,
+      bgColor: bg,
+      hoverBgColor: bg
+    };
+  }
   return type ? colors[type] : colors.default;
 };
 
@@ -228,6 +243,7 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
     loading = false,
     icon,
     style,
+    onKeyDown,
     ...props
   }, ref) => {
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
@@ -243,6 +259,54 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
       true
     );
     const [visible, setVisible] = _react.useState.call(void 0, false);
+    const summaryRef = _react.useRef.call(void 0, null);
+    const contentRef = _react.useRef.call(void 0, null);
+    const focusFirst = _react.useRef.call(void 0, false);
+    const items = () => {
+      var _a, _b;
+      return Array.from(
+        (_b = (_a = contentRef.current) == null ? void 0 : _a.querySelectorAll(
+          "button:not(:disabled)"
+        )) != null ? _b : []
+      );
+    };
+    _react.useEffect.call(void 0, () => {
+      var _a, _b;
+      if (!visible || !focusFirst.current) return;
+      focusFirst.current = false;
+      (_b = (_a = contentRef.current) == null ? void 0 : _a.querySelector("button:not(:disabled)")) == null ? void 0 : _b.focus();
+    }, [visible]);
+    const keyDownHandler = (event) => {
+      var _a, _b, _c;
+      if (onKeyDown) onKeyDown(event);
+      if (disabled || loading || event.defaultPrevented) return;
+      const { key, target } = event;
+      if (key === "Escape" && visible) {
+        event.preventDefault();
+        setVisible(false);
+        (_a = summaryRef.current) == null ? void 0 : _a.focus();
+        return;
+      }
+      if (key !== "ArrowDown" && key !== "ArrowUp") return;
+      if (target === summaryRef.current) {
+        if (key !== "ArrowDown") return;
+        event.preventDefault();
+        if (visible) (_b = items()[0]) == null ? void 0 : _b.focus();
+        else {
+          focusFirst.current = true;
+          setVisible(true);
+        }
+        return;
+      }
+      const list = items();
+      const current = list.indexOf(target);
+      if (current < 0) return;
+      event.preventDefault();
+      if (key === "ArrowDown")
+        list[Math.min(list.length - 1, current + 1)].focus();
+      else if (current === 0) (_c = summaryRef.current) == null ? void 0 : _c.focus();
+      else list[current - 1].focus();
+    };
     const clickHandler = _react.useCallback.call(void 0, 
       (event) => {
         event.preventDefault();
@@ -283,6 +347,7 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
       "--bolio-ui-dropdown-min-width": auto ? "min-content" : SCALES.width(10.5),
       "--bolio-ui-dropdown-padding": `${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
       "--bolio-ui-dropdown-font-size": SCALES.font(0.875),
+      "--bolio-ui-dropdown-focus": theme.palette.primary,
       ...style
     };
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonDropdownContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -292,6 +357,7 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
         className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ButtonDropdown_module_css_default.btnDropdown, className),
         onClick: stopPropagation,
         ...props,
+        onKeyDown: keyDownHandler,
         style: rootStyle,
         children: [
           mainItemChildren,
@@ -299,6 +365,7 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "summary",
               {
+                ref: summaryRef,
                 className: ButtonDropdown_module_css_default.summary,
                 "aria-label": "More options",
                 onClick: clickHandler,
@@ -330,6 +397,7 @@ var ButtonDropdownComponent = _react2.default.forwardRef(
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "div",
               {
+                ref: contentRef,
                 className: ButtonDropdown_module_css_default.content,
                 style: {
                   boxShadow: surface.shadow,

package/dist/chunk-QSHFISL4.js

@@ -0,0 +1,51 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-roving-index/use-roving-index.ts
+var _react = require('react');
+var useRovingIndex = ({
+  total,
+  initialIndex = 0,
+  orientation = "horizontal",
+  loop = true,
+  onChange
+}) => {
+  const [selected, setSelected] = _react.useState.call(void 0, initialIndex);
+  const items = _react.useRef.call(void 0, []);
+  const select = _react.useCallback.call(void 0, 
+    (index) => {
+      var _a;
+      setSelected(index);
+      (_a = items.current[index]) == null ? void 0 : _a.focus();
+      onChange == null ? void 0 : onChange(index);
+    },
+    [onChange]
+  );
+  const onKeyDown = (event, index) => {
+    const [prev, next] = orientation === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+    let target = index;
+    if (event.key === next) target = index + 1;
+    else if (event.key === prev) target = index - 1;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = total - 1;
+    else return;
+    event.preventDefault();
+    if (target < 0) target = loop ? total - 1 : 0;
+    if (target > total - 1) target = loop ? 0 : total - 1;
+    select(target);
+  };
+  const getItemProps = (index) => ({
+    ref: (element) => {
+      items.current[index] = element;
+    },
+    tabIndex: index === selected ? 0 : -1,
+    onFocus: () => setSelected(index),
+    onKeyDown: (event) => onKeyDown(event, index)
+  });
+  return { selected, setSelected: select, getItemProps };
+};
+var use_roving_index_default = useRovingIndex;
+
+// core/use-roving-index/index.ts
+var use_roving_index_default2 = use_roving_index_default;
+
+
+
+exports.use_roving_index_default = use_roving_index_default2;

package/dist/{chunk-KRSISARC.js → chunk-RG3CLJ6A.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+var _chunkCCKWTHUTjs = require('./chunk-CCKWTHUT.js');
 
 
 var _chunkEUYSKHRSjs = require('./chunk-EUYSKHRS.js');
@@ -55,7 +55,7 @@ var ComboboxComponent = _react2.default.forwardRef(
     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 colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
+    const colors = _chunkCCKWTHUTjs.getColors.call(void 0, theme.palette, type, disabled, {
       filled,
       light,
       ghost,