@bolio-ui/core 3.0.4 → 3.1.0

package/esm/{chunk-NEG5UNM6.js → chunk-YH2NWDFO.js}

@@ -1,12 +1,12 @@
 import {
   Textarea_default
-} from "./chunk-ISLUC2SD.js";
+} from "./chunk-NTNFTNRA.js";
+import {
+  getColors
+} from "./chunk-CCKWTHUT.js";
 import {
   InputBlockLabel_default
 } from "./chunk-UOGCO6CV.js";
-import {
-  getColors
-} from "./chunk-KBZEYKCZ.js";
 import {
   use_default_props_default
 } from "./chunk-BSDZWWUS.js";
@@ -42,10 +42,11 @@ var InputLabel_module_css_default = { "span": "InputLabel-module_span__ek5IE" };
 import { jsx } from "react/jsx-runtime";
 function InputLabel({ children, isRight }) {
   const theme = use_theme_default();
+  const dark = theme.type === "dark";
   const labelStyle = {
     padding: `0 ${theme.layout.gapHalf}`,
-    color: theme.palette.accents_4,
-    backgroundColor: theme.palette.accents_1,
+    color: dark ? theme.palette.accents_7 : theme.palette.accents_4,
+    backgroundColor: dark ? theme.palette.accents_3 : theme.palette.accents_1,
     borderTopLeftRadius: isRight ? 0 : theme.layout.radius,
     borderBottomLeftRadius: isRight ? 0 : theme.layout.radius,
     borderTopRightRadius: isRight ? theme.layout.radius : 0,
@@ -108,23 +109,34 @@ function InputIconClear({ onClick, disabled, visible, hoverColor }) {
     cursor: disabled ? "not-allowed" : "pointer",
     "--clear-icon-hover-color": hoverColor
   };
-  return /* @__PURE__ */ jsx3("div", { onClick: clickHandler, className: classes, style: iconStyle, children: /* @__PURE__ */ jsxs(
-    "svg",
+  return /* @__PURE__ */ jsx3(
+    "button",
     {
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      className: InputIconClear_module_css_default.svg,
-      children: [
-        /* @__PURE__ */ jsx3("path", { d: "M18 6L6 18" }),
-        /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12" })
-      ]
+      type: "button",
+      "aria-label": "Clear",
+      disabled,
+      onClick: clickHandler,
+      className: classes,
+      style: iconStyle,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none",
+          shapeRendering: "geometricPrecision",
+          className: InputIconClear_module_css_default.svg,
+          children: [
+            /* @__PURE__ */ jsx3("path", { d: "M18 6L6 18" }),
+            /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12" })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 var MemoInputIconClear = React3.memo(InputIconClear);
 var InputIconClear_default = MemoInputIconClear;
@@ -215,13 +227,13 @@ var InputComponent = React4.forwardRef((inputComponentProps, ref) => {
     [icon, iconRight]
   );
   const colors = useMemo(
-    () => getColors(theme.palette, type, disabled, {
+    () => getColors(theme.palette, error ? "error" : type, disabled, {
       filled,
       light,
       ghost,
       subtle
     }),
-    [theme.palette, type, disabled, filled, light, ghost, subtle]
+    [theme.palette, type, error, disabled, filled, light, ghost, subtle]
   );
   const changeHandler = (event) => {
     if (disabled || readOnly) return;

package/esm/{chunk-BUB6MDGJ.js → chunk-YORZYBVH.js}

@@ -1,9 +1,9 @@
 import {
   Modal_default
-} from "./chunk-DAPM4M4A.js";
+} from "./chunk-5ZFJSGCA.js";
 import {
   Input_default
-} from "./chunk-NEG5UNM6.js";
+} from "./chunk-YH2NWDFO.js";
 import {
   getSurface
 } from "./chunk-EUYSKHRS.js";

package/esm/{chunk-Y5CFWIGV.js → chunk-YR5JHUOB.js}

@@ -1,6 +1,6 @@
 import {
   Pagination_default
-} from "./chunk-E5EDUOQT.js";
+} from "./chunk-E5ALJNBL.js";
 import {
   use_real_shape_default
 } from "./chunk-HKOESPKZ.js";
@@ -10,6 +10,9 @@ import {
 import {
   log_warning_default
 } from "./chunk-AXYDJGTN.js";
+import {
+  activateOnKey
+} from "./chunk-YTIXCWZO.js";
 import {
   use_scale_default,
   with_scale_default
@@ -23,7 +26,7 @@ import {
 } from "./chunk-5KUROAEP.js";
 
 // core/Table/Table.tsx
-import React5, {
+import React3, {
   useCallback,
   useEffect as useEffect3,
   useImperativeHandle,
@@ -191,6 +194,8 @@ var TableCell = ({
       "td",
       {
         onClick: () => onCellClick && onCellClick(currentRowValue, rowIndex, index),
+        tabIndex: onCellClick ? 0 : void 0,
+        onKeyDown: onCellClick ? activateOnKey : void 0,
         className: column.className,
         children: /* @__PURE__ */ jsx3("div", { className: "cell", children: shouldBeRenderElement ? shouldBeRenderElement : cellValue })
       },
@@ -201,14 +206,14 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // core/Table/TableContext.ts
-import React3 from "react";
+import React2 from "react";
 var defaultContext = {
   columns: [],
   updateColumn: () => {
   }
 };
-var TableContext = React3.createContext(defaultContext);
-var useTableContext = () => React3.useContext(TableContext);
+var TableContext = React2.createContext(defaultContext);
+var useTableContext = () => React2.useContext(TableContext);
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableBody.module.css.bolio-css-module-source
 var TableBody_module_css_default = { "tr": "TableBody-module_tr__lTn-M", "hover": "TableBody-module_hover__AjVlq", "selected": "TableBody-module_selected__7adtQ", "selectCell": "TableBody-module_selectCell__S8ZZn" };
@@ -248,6 +253,8 @@ var TableBody = ({
           className
         ),
         onClick: () => rowClickHandler(row, index),
+        tabIndex: onRow ? 0 : void 0,
+        onKeyDown: onRow ? activateOnKey : void 0,
         style: trStyle,
         children: [
           selection && /* @__PURE__ */ jsx4("td", { className: TableBody_module_css_default.selectCell, children: /* @__PURE__ */ jsx4("div", { className: "cell", children: /* @__PURE__ */ jsx4(
@@ -530,7 +537,7 @@ function TableComponent(tableProps, forwardedRef) {
 TableComponent.displayName = "BolioUITable";
 TableComponent.Column = TableColumn_default;
 var Table = with_scale_default(
-  React5.forwardRef(TableComponent)
+  React3.forwardRef(TableComponent)
 );
 Table.Column = TableColumn_default;
 var Table_default = Table;

package/esm/chunk-YTIXCWZO.js

@@ -0,0 +1,11 @@
+// core/utils/activate-on-key.ts
+var activateOnKey = (event) => {
+  if (event.target !== event.currentTarget) return;
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  event.currentTarget.click();
+};
+
+export {
+  activateOnKey
+};

package/esm/chunk-YX4QMKYJ.js

@@ -0,0 +1,13 @@
+import {
+  use_previous_default
+} from "./chunk-45Y5OGFM.js";
+
+// core/use-previous/use-previous.ts
+var use_previous_default2 = use_previous_default;
+
+// core/use-previous/index.ts
+var use_previous_default3 = use_previous_default2;
+
+export {
+  use_previous_default3 as use_previous_default
+};

package/esm/{chunk-EAHIBHMI.js → chunk-ZJUVOARM.js}

@@ -1,3 +1,6 @@
+import {
+  InputBlockLabel_default
+} from "./chunk-UOGCO6CV.js";
 import {
   log_warning_default
 } from "./chunk-AXYDJGTN.js";
@@ -13,7 +16,7 @@ import {
 } from "./chunk-5KUROAEP.js";
 
 // core/Checkbox/Checkbox.tsx
-import React3, { useCallback, useEffect, useMemo, useState } from "react";
+import React3, { useCallback, useEffect, useId, useMemo, useState } from "react";
 
 // core/Checkbox/CheckboxContext.ts
 import React from "react";
@@ -84,7 +87,7 @@ var getColors = (palette, status) => {
 var Checkbox_module_css_default = { "checkbox": "Checkbox-module_checkbox__5lSba", "text": "Checkbox-module_text__Kms0E", "input": "Checkbox-module_input__v6eip" };
 
 // core/Checkbox/Checkbox.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var CheckboxComponent = React3.forwardRef(
   ({
     checked,
@@ -95,6 +98,8 @@ var CheckboxComponent = React3.forwardRef(
     children,
     type = "default",
     value = "",
+    error = false,
+    errorMessage,
     ...props
   }, ref) => {
     const theme = use_theme_default();
@@ -103,6 +108,9 @@ var CheckboxComponent = React3.forwardRef(
     const { updateState, inGroup, disabledAll, values } = useCheckbox();
     const isDisabled = inGroup ? disabledAll || disabled : disabled;
     const classes = use_classes_default(Checkbox_module_css_default.checkbox, className);
+    const generatedId = useId();
+    const errorId = `${props.id || generatedId}-error`;
+    const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
     if (inGroup && checked) {
       log_warning_default(
         'Remove props "checked" when [Checkbox] component is in the group.',
@@ -116,8 +124,8 @@ var CheckboxComponent = React3.forwardRef(
       setSelfChecked(next);
     }, [inGroup, selfChecked, value, values]);
     const fill = useMemo(
-      () => getColors(theme.palette, type),
-      [theme.palette, type]
+      () => getColors(theme.palette, error ? "error" : type),
+      [theme.palette, type, error]
     );
     const changeHandle = useCallback(
       (ev) => {
@@ -152,28 +160,40 @@ var CheckboxComponent = React3.forwardRef(
       padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
       margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
     };
-    return /* @__PURE__ */ jsxs("label", { className: classes, style: checkboxStyle, children: [
-      /* @__PURE__ */ jsx2(CheckboxIcon_default, { fill, disabled: isDisabled, checked: selfChecked }),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          ref,
-          type: "checkbox",
-          disabled: isDisabled,
-          checked: selfChecked,
-          onChange: changeHandle,
-          ...props,
-          className: Checkbox_module_css_default.input
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "span",
-        {
-          className: Checkbox_module_css_default.text,
-          style: { cursor: isDisabled ? "not-allowed" : "pointer" },
-          children
-        }
-      )
+    return /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsxs("label", { className: classes, style: checkboxStyle, children: [
+        /* @__PURE__ */ jsx2(
+          CheckboxIcon_default,
+          {
+            fill,
+            disabled: isDisabled,
+            checked: selfChecked
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            disabled: isDisabled,
+            checked: selfChecked,
+            onChange: changeHandle,
+            ...props,
+            "aria-invalid": error || void 0,
+            "aria-describedby": describedBy,
+            className: Checkbox_module_css_default.input
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: Checkbox_module_css_default.text,
+            style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+            children
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx2(InputBlockLabel_default, { error, id: errorId, children: errorMessage })
     ] });
   }
 );

package/esm/chunk-ZLZ66ER3.js

@@ -0,0 +1,58 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+
+// core/use-move/use-move.ts
+import { useEffect, useRef, useState } from "react";
+var clamp = (value) => Math.min(Math.max(value, 0), 1);
+var useMove = (onChange, onScrubEnd) => {
+  const ref = useRef(null);
+  const [active, setActive] = useState(false);
+  const callbacks = use_latest_default({ onChange, onScrubEnd });
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = (event) => {
+      const rect = node.getBoundingClientRect();
+      callbacks.current.onChange({
+        x: clamp((event.clientX - rect.left) / (rect.width || 1)),
+        y: clamp((event.clientY - rect.top) / (rect.height || 1))
+      });
+    };
+    const down = (event) => {
+      var _a;
+      (_a = node.setPointerCapture) == null ? void 0 : _a.call(node, event.pointerId);
+      setActive(true);
+      update(event);
+    };
+    const move = (event) => {
+      var _a;
+      if ((_a = node.hasPointerCapture) == null ? void 0 : _a.call(node, event.pointerId)) update(event);
+    };
+    const up = (event) => {
+      var _a, _b, _c;
+      (_a = node.releasePointerCapture) == null ? void 0 : _a.call(node, event.pointerId);
+      setActive(false);
+      (_c = (_b = callbacks.current).onScrubEnd) == null ? void 0 : _c.call(_b);
+    };
+    node.addEventListener("pointerdown", down);
+    node.addEventListener("pointermove", move);
+    node.addEventListener("pointerup", up);
+    node.addEventListener("pointercancel", up);
+    return () => {
+      node.removeEventListener("pointerdown", down);
+      node.removeEventListener("pointermove", move);
+      node.removeEventListener("pointerup", up);
+      node.removeEventListener("pointercancel", up);
+    };
+  }, [callbacks]);
+  return { ref, active };
+};
+var use_move_default = useMove;
+
+// core/use-move/index.ts
+var use_move_default2 = use_move_default;
+
+export {
+  use_move_default2 as use_move_default
+};

package/esm/chunk-ZMEJNCUR.js

@@ -0,0 +1,41 @@
+// core/use-list-state/use-list-state.ts
+import { useMemo, useState } from "react";
+var useListState = (initialValue = []) => {
+  const [state, setState] = useState(initialValue);
+  const handlers = useMemo(
+    () => ({
+      setState,
+      append: (...items) => setState((list) => [...list, ...items]),
+      prepend: (...items) => setState((list) => [...items, ...list]),
+      insert: (index, ...items) => setState((list) => [
+        ...list.slice(0, index),
+        ...items,
+        ...list.slice(index)
+      ]),
+      remove: (...indices) => setState((list) => list.filter((_, index) => !indices.includes(index))),
+      reorder: ({ from, to }) => setState((list) => {
+        const copy = [...list];
+        const [moved] = copy.splice(from, 1);
+        copy.splice(to, 0, moved);
+        return copy;
+      }),
+      setItem: (index, item) => setState((list) => {
+        const copy = [...list];
+        copy[index] = item;
+        return copy;
+      }),
+      filter: (fn) => setState((list) => list.filter(fn)),
+      apply: (fn) => setState((list) => list.map(fn))
+    }),
+    []
+  );
+  return [state, handlers];
+};
+var use_list_state_default = useListState;
+
+// core/use-list-state/index.ts
+var use_list_state_default2 = use_list_state_default;
+
+export {
+  use_list_state_default2 as use_list_state_default
+};

package/esm/chunk-ZP2KTH2H.js

@@ -0,0 +1,27 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+
+// core/use-debounced-callback/use-debounced-callback.ts
+import { useEffect, useMemo, useRef } from "react";
+var useDebouncedCallback = (callback, wait) => {
+  const latest = use_latest_default(callback);
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  return useMemo(() => {
+    const debounced = (...args) => {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => latest.current(...args), wait);
+    };
+    debounced.cancel = () => clearTimeout(timer.current);
+    return debounced;
+  }, [latest, wait]);
+};
+var use_debounced_callback_default = useDebouncedCallback;
+
+// core/use-debounced-callback/index.ts
+var use_debounced_callback_default2 = use_debounced_callback_default;
+
+export {
+  use_debounced_callback_default2 as use_debounced_callback_default
+};

package/esm/css/Button.css

@@ -20,6 +20,11 @@
   overflow: hidden;
 }
 
+.Button-module_root__LhkYq:focus-visible {
+  outline: 2px solid var(--bolio-ui-button-focus);
+  outline-offset: 2px;
+}
+
 .Button-module_root__LhkYq:active {
   transform: scale(0.98, 0.98);
 }

package/esm/css/ButtonDropdown.css

@@ -41,6 +41,11 @@
     border-color 0.2s ease 0s;
 }
 
+.ButtonDropdown-module_summary__NGCte:focus-visible {
+  outline: 2px solid var(--bolio-ui-dropdown-focus);
+  outline-offset: -2px;
+}
+
 .ButtonDropdown-module_content__O7uo- {
   position: absolute;
   right: 0;

package/esm/css/Input-InputIconClear.css

@@ -12,6 +12,10 @@
   padding: 0;
   visibility: hidden;
   opacity: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
 }
 
 .InputIconClear-module_visible__5nUZb {

package/esm/css/Mark.css

@@ -0,0 +1,9 @@
+@layer Mark {
+.Mark-module_mark__MnjwZ {
+  padding: 0 0.15em;
+  border-radius: 0.2em;
+  background-color: var(--mark-bg);
+  color: inherit;
+}
+
+}

package/esm/css/NumberInput.css

@@ -61,8 +61,9 @@
   padding: 0;
   font: inherit;
   color: var(--control-color);
-  background-color: none;
+  background-color: transparent;
   border: 0;
+  border-radius: calc(var(--input-radius) - 1px);
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
@@ -72,6 +73,14 @@
   color: var(--control-hover-color);
 }
 
+.NumberInput-module_control__mog-- svg {
+  transition: transform 0.1s ease;
+}
+
+.NumberInput-module_control__mog--:active:not(:disabled) svg {
+  transform: scale(0.8);
+}
+
 .NumberInput-module_control__mog--:disabled {
   color: var(--control-disabled-color);
   cursor: not-allowed;

package/esm/css/ScrollArea.css

@@ -0,0 +1,116 @@
+@layer ScrollArea {
+.ScrollArea-module_scrollArea__hWDno {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  --scroll-thumb: var(--scroll-thumb-visible);
+}
+
+/* the thumb only shows while the pointer or the focus is inside */
+.ScrollArea-module_hover__BdieF {
+  --scroll-thumb: transparent;
+}
+
+.ScrollArea-module_hover__BdieF:hover,
+.ScrollArea-module_hover__BdieF:focus-within {
+  --scroll-thumb: var(--scroll-thumb-visible);
+}
+
+.ScrollArea-module_viewport__NsNP8 {
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-thumb) transparent;
+}
+
+/* Chrome and Safari draw an overlay scrollbar that only shows while
+   scrolling when the standard properties are set, so they get a real one */
+@supports selector(::-webkit-scrollbar) {
+  .ScrollArea-module_viewport__NsNP8 {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+
+  .ScrollArea-module_viewport__NsNP8::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .ScrollArea-module_viewport__NsNP8::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: var(--scroll-thumb);
+  }
+
+  .ScrollArea-module_viewport__NsNP8::-webkit-scrollbar-thumb:hover {
+    background: var(--scroll-thumb-active);
+  }
+
+  .ScrollArea-module_viewport__NsNP8::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+.ScrollArea-module_viewport__NsNP8:focus-visible {
+  outline: 2px solid var(--scroll-focus);
+  outline-offset: -2px;
+}
+
+.ScrollArea-module_vertical__pLVjR {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.ScrollArea-module_horizontal__04fX0 {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.ScrollArea-module_both__SLatS {
+  overflow: auto;
+}
+
+/* Firefox keeps an overlay scrollbar that never shows on hover, so its
+   native one is hidden and the area draws these thumbs instead */
+.ScrollArea-module_viewport__NsNP8.ScrollArea-module_custom__EmB3p {
+  scrollbar-width: none;
+}
+
+.ScrollArea-module_track__vGrOF {
+  position: absolute;
+  pointer-events: none;
+}
+
+.ScrollArea-module_trackX__VM9bC {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 8px;
+}
+
+.ScrollArea-module_trackY__Apbnh {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 8px;
+}
+
+.ScrollArea-module_thumb__DLvTa {
+  height: 100%;
+  border-radius: 4px;
+  background: var(--scroll-thumb);
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.ScrollArea-module_trackY__Apbnh .ScrollArea-module_thumb__DLvTa {
+  width: 100%;
+  height: auto;
+}
+
+.ScrollArea-module_thumb__DLvTa:hover {
+  background: var(--scroll-thumb-active);
+}
+
+}

package/esm/css/Select-SelectIconClear.css

@@ -11,6 +11,9 @@
   color: var(--select-clear-icon-color);
   visibility: visible;
   opacity: 1;
+  border: 0;
+  background: none;
+  font: inherit;
 }
 
 .SelectIconClear-module_clearIcon__p5IH4:hover {

package/esm/css/Select-SelectOption.css

@@ -27,6 +27,10 @@
   background-color: color-mix(in srgb, currentColor 12%, transparent);
 }
 
+.SelectOption-module_option__NAlFp.SelectOption-module_active__vxHSF {
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
+}
+
 .SelectOption-module_label__NtVM7:hover,
 .SelectOption-module_divider__mmqJj:hover {
   background-color: transparent;

package/esm/css/Snippet.css

@@ -36,6 +36,9 @@
   cursor: pointer;
   user-select: none;
   opacity: 0.65;
+  border: 0;
+  padding: 0;
+  font: inherit;
 }
 
 .Snippet-module_copy__vSMCk:hover {