@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.2

package/esm/{chunk-YHZFOVVI.js → chunk-DIMJQLWY.js}

@@ -1,15 +1,15 @@
-import {
-  dropdown_default
-} from "./chunk-UVVBMWR4.js";
 import {
   Grid_default
 } from "./chunk-JFNYQSEZ.js";
 import {
-  log_warning_default
-} from "./chunk-AXYDJGTN.js";
+  dropdown_default
+} from "./chunk-AG2NWQYL.js";
 import {
   getColors
 } from "./chunk-KBZEYKCZ.js";
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
 import {
   use_current_state_default
 } from "./chunk-33BUV2RX.js";
@@ -85,6 +85,7 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var SelectDropdown = React3.forwardRef(
   ({
     visible,
+    colors,
     children,
     className = "",
     dropdownStyle = {},
@@ -113,8 +114,10 @@ var SelectDropdown = React3.forwardRef(
             className: classes,
             style: {
               "--select-dropdown-radius": theme.layout.radius,
-              "--select-dropdown-shadow": theme.expressiveness.shadowLarge,
-              "--select-dropdown-bg": theme.palette.accents_2,
+              "--select-dropdown-shadow": theme.expressiveness.shadowMedium,
+              "--select-dropdown-bg": colors.bgColor,
+              "--select-dropdown-border": colors.borderColor,
+              "--select-dropdown-color": colors.color,
               ...dropdownStyle
             },
             children
@@ -431,7 +434,7 @@ var SelectComponent = React7.forwardRef(
       "--select-padding-top": SCALES.pt(0),
       "--select-padding-right": SCALES.pr(0.334),
       "--select-padding-bottom": SCALES.pb(0),
-      "--select-padding-left": SCALES.pl(0.667),
+      "--select-padding-left": SCALES.pl(0.875),
       "--select-margin-top": SCALES.mt(0),
       "--select-margin-right": SCALES.mr(0),
       "--select-margin-bottom": SCALES.mb(0),
@@ -443,7 +446,7 @@ var SelectComponent = React7.forwardRef(
       "--select-placeholder-color": colors.placeholderColor,
       "--select-icon-color": colors.iconColor,
       "--select-color": colors.color,
-      "--select-placeholder-font-size": SCALES.font(0.775),
+      "--select-placeholder-font-size": SCALES.font(0.875),
       "--select-icon-right": theme.layout.gapQuarter,
       "--select-icon-rotate": visible ? "180deg" : "0deg",
       ...style
@@ -477,6 +480,7 @@ var SelectComponent = React7.forwardRef(
             {
               ref: dropdownRef,
               visible,
+              colors,
               className: dropdownClassName,
               dropdownStyle,
               disableMatchWidth,
@@ -498,7 +502,7 @@ var Select_default = Select;
 import { useMemo as useMemo2 } from "react";
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectOption.module.css.bolio-css-module-source
-var SelectOption_module_css_default = { "option": "SelectOption-module_option__NAlFp", "divider": "SelectOption-module_divider__mmqJj", "label": "SelectOption-module_label__NtVM7" };
+var SelectOption_module_css_default = { "option": "SelectOption-module_option__NAlFp", "label": "SelectOption-module_label__NtVM7", "divider": "SelectOption-module_divider__mmqJj", "disabled": "SelectOption-module_disabled__cDMWS", "selected": "SelectOption-module_selected__HOwTO" };
 
 // core/Select/SelectOption.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -513,7 +517,6 @@ function SelectOptionComponent({
   style,
   ...props
 }) {
-  const theme = use_theme_default();
   const { SCALES } = use_scale_default();
   const { updateValue, value, disableAll } = useSelectContext();
   const isDisabled = useMemo2(
@@ -521,11 +524,6 @@ function SelectOptionComponent({
     [disabled, disableAll]
   );
   const isLabel = useMemo2(() => label || divider, [label, divider]);
-  const classes = use_classes_default(
-    SelectOption_module_css_default.option,
-    { [SelectOption_module_css_default.divider]: divider, [SelectOption_module_css_default.label]: label },
-    className
-  );
   if (!isLabel && identValue === void 0) {
     log_warning_default('The props "value" is required.', "Select Option");
   }
@@ -536,18 +534,16 @@ function SelectOptionComponent({
     }
     return value.includes(`${identValue}`);
   }, [identValue, value]);
-  const bgColor = useMemo2(() => {
-    if (isDisabled) return theme.palette.accents_3;
-    return selected ? theme.palette.accents_3 : theme.palette.accents_2;
-  }, [selected, isDisabled, theme.palette]);
-  const hoverBgColor = useMemo2(() => {
-    if (isDisabled || isLabel || selected) return bgColor;
-    return theme.palette.accents_1;
-  }, [selected, isDisabled, theme.palette, isLabel, bgColor]);
-  const color = useMemo2(() => {
-    if (isDisabled) return theme.palette.accents_4;
-    return selected ? theme.palette.foreground : theme.palette.accents_5;
-  }, [selected, isDisabled, theme.palette]);
+  const classes = use_classes_default(
+    SelectOption_module_css_default.option,
+    {
+      [SelectOption_module_css_default.divider]: divider,
+      [SelectOption_module_css_default.label]: label,
+      [SelectOption_module_css_default.selected]: selected,
+      [SelectOption_module_css_default.disabled]: isDisabled
+    },
+    className
+  );
   const clickHandler = (event) => {
     if (preventAllEvents) return;
     event.stopPropagation();
@@ -557,23 +553,18 @@ function SelectOptionComponent({
     if (updateValue) updateValue(identValue);
   };
   const optionStyle = {
-    "--select-option-bg": bgColor,
-    "--select-option-color": color,
     "--select-option-cursor": isDisabled ? "not-allowed" : "pointer",
-    "--select-font-size": SCALES.font(0.75),
+    "--select-font-size": SCALES.font(0.875),
     "--select-option-width": SCALES.width(1, "100%"),
     "--select-option-height": SCALES.height(2.25),
     "--select-option-padding-top": SCALES.pt(0),
-    "--select-option-padding-right": SCALES.pr(0.667),
+    "--select-option-padding-right": SCALES.pr(0.75),
     "--select-option-padding-bottom": SCALES.pb(0),
-    "--select-option-padding-left": SCALES.pl(0.667),
+    "--select-option-padding-left": SCALES.pl(0.75),
     "--select-option-margin-top": SCALES.mt(0),
     "--select-option-margin-right": SCALES.mr(0),
     "--select-option-margin-bottom": SCALES.mb(0),
     "--select-option-margin-left": SCALES.ml(0),
-    "--select-option-hover-bg": hoverBgColor,
-    "--select-option-hover-color": theme.palette.accents_7,
-    "--select-option-divider-border": theme.palette.accents_3,
     "--select-option-divider-height": SCALES.height(1, 0),
     "--select-option-divider-padding-top": SCALES.pt(0),
     "--select-option-divider-padding-right": SCALES.pr(0),
@@ -583,7 +574,6 @@ function SelectOptionComponent({
     "--select-option-divider-margin-right": SCALES.mr(0),
     "--select-option-divider-margin-bottom": SCALES.mb(0.5),
     "--select-option-divider-margin-left": SCALES.ml(0),
-    "--select-option-label-color": theme.palette.accents_7,
     "--select-option-label-font-size": SCALES.font(0.875),
     ...style
   };

package/esm/chunk-FFEAKF3A.js

@@ -0,0 +1,220 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Splitter/Splitter.tsx
+import React2, { useId, useRef, useState } from "react";
+
+// core/Splitter/SplitterContext.ts
+import React from "react";
+var SplitterPanelContext = React.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
+import { jsx, jsxs } from "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.forwardRef(
+  ({
+    direction = "horizontal",
+    onResize,
+    handleLabel = "Resize",
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const baseId = useId();
+    const panels = React2.Children.toArray(children).filter(
+      React2.isValidElement
+    );
+    const horizontal = direction === "horizontal";
+    const [sizes, setSizes] = useState(() => initialSizes(panels));
+    if (sizes.length !== panels.length) setSizes(initialSizes(panels));
+    const elements = useRef([]);
+    const drag = useRef(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__ */ jsx(
+      "div",
+      {
+        ref,
+        className: use_classes_default(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__ */ jsxs(React2.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SplitterPanelContext.Provider,
+              {
+                value: {
+                  id: `${baseId}-panel-${index}`,
+                  setElement: (element) => {
+                    elements.current[index] = element;
+                  }
+                },
+                children: panel
+              }
+            ),
+            index < panels.length - 1 && /* @__PURE__ */ jsx(
+              "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: joinClasses(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 = with_scale_default(SplitterComponent);
+var Splitter_default = Splitter;
+
+// core/Splitter/SplitterPanel.tsx
+import React3, { useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SplitterPanel = React3.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 = useContext(SplitterPanelContext);
+    return /* @__PURE__ */ jsx2(
+      "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: use_classes_default(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;
+
+export {
+  Splitter_default2 as Splitter_default
+};

package/esm/{chunk-6BCLZSSK.js → chunk-FL6J36B7.js}

@@ -1,6 +1,6 @@
 import {
   dropdown_default
-} from "./chunk-UVVBMWR4.js";
+} from "./chunk-AG2NWQYL.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
@@ -64,10 +64,11 @@ var MenuList = ({
   };
   useEffect(() => {
     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();

package/esm/chunk-G4KB56RO.js

@@ -0,0 +1,217 @@
+import {
+  InputBlockLabel_default
+} from "./chunk-UOGCO6CV.js";
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/TagsInput/TagsInput.tsx
+import React, { useId, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/TagsInput/TagsInput.module.css.bolio-css-module-source
+var TagsInput_module_css_default = { "withLabel": "TagsInput-module_withLabel__-n8Kq", "field": "TagsInput-module_field__ieR7N", "disabled": "TagsInput-module_disabled__cCN-w", "tag": "TagsInput-module_tag__dhER4", "remove": "TagsInput-module_remove__oullb", "input": "TagsInput-module_input__RFYNn" };
+
+// core/TagsInput/TagsInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var noTags = [];
+var TagsInputComponent = React.forwardRef(
+  ({
+    value: customValue,
+    initialValue = noTags,
+    onChange,
+    max,
+    allowDuplicates = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    disabled = false,
+    readOnly = false,
+    error = false,
+    errorMessage,
+    className = "",
+    children,
+    style,
+    onKeyDown,
+    onBlur,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const generatedId = useId();
+    const inputId = props.id || generatedId;
+    const errorId = `${inputId}-error`;
+    const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+    const colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const tags = isControlled ? customValue : selfValue;
+    const [text, setText] = useState("");
+    const locked = disabled || readOnly;
+    const commit = (next) => {
+      if (!isControlled) setSelfValue(next);
+      onChange == null ? void 0 : onChange(next);
+    };
+    const add = (entries) => {
+      const next = [...tags];
+      entries.map((entry) => entry.trim()).filter(Boolean).forEach((entry) => {
+        if (max !== void 0 && next.length >= max) return;
+        if (!allowDuplicates && next.includes(entry)) return;
+        next.push(entry);
+      });
+      if (next.length !== tags.length) commit(next);
+    };
+    const remove = (index) => {
+      if (locked) return;
+      commit(tags.filter((_, i) => i !== index));
+    };
+    const changeHandler = (event) => {
+      const parts = event.target.value.split(",");
+      if (parts.length === 1) return setText(parts[0]);
+      add(parts.slice(0, -1));
+      setText(parts[parts.length - 1]);
+    };
+    const keyDownHandler = (event) => {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (event.defaultPrevented || locked) return;
+      if (event.key === "Enter" && text.trim()) {
+        event.preventDefault();
+        add([text]);
+        setText("");
+      } else if (event.key === "Backspace" && !text && tags.length) {
+        remove(tags.length - 1);
+      }
+    };
+    const blurHandler = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      if (locked || !text) return;
+      add([text]);
+      setText("");
+    };
+    const rootStyle = {
+      "--input-height": SCALES.height(2.25),
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "100%"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    const fieldStyle = {
+      "--input-border": colors.borderColor,
+      "--input-radius": rounded ? "25px" : theme.layout.radius,
+      "--input-bg": colors.bgColor,
+      "--input-hover-border": colors.hoverBorder,
+      "--input-hover-bg": colors.hoverBgColor,
+      "--input-focus-border": colors.focusBorder,
+      "--input-placeholder-color": colors.placeholderColor,
+      "--input-color": colors.color,
+      "--tag-bg": theme.palette.accents_2,
+      "--tag-color": disabled ? theme.palette.accents_4 : theme.palette.foreground,
+      "--tag-remove-color": colors.iconColor,
+      "--tag-remove-hover-color": colors.color
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: use_classes_default(TagsInput_module_css_default.withLabel, className),
+        style: rootStyle,
+        children: [
+          children && /* @__PURE__ */ jsx(InputBlockLabel_default, { htmlFor: inputId, children }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: use_classes_default(TagsInput_module_css_default.field, {
+                [TagsInput_module_css_default.disabled]: disabled
+              }),
+              style: fieldStyle,
+              onClick: (event) => {
+                var _a;
+                return (_a = event.currentTarget.querySelector("input")) == null ? void 0 : _a.focus();
+              },
+              children: [
+                tags.map((tag, index) => /* @__PURE__ */ jsxs("span", { className: TagsInput_module_css_default.tag, children: [
+                  tag,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: TagsInput_module_css_default.remove,
+                      "aria-label": `Remove ${tag}`,
+                      disabled: locked,
+                      onClick: () => remove(index),
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          width: "1em",
+                          height: "1em",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M6 6l12 12M18 6L6 18",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }, `${tag}-${index}`)),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    type: "text",
+                    autoComplete: "off",
+                    value: text,
+                    disabled,
+                    readOnly,
+                    onChange: changeHandler,
+                    onKeyDown: keyDownHandler,
+                    onBlur: blurHandler,
+                    ...props,
+                    id: inputId,
+                    "aria-invalid": error || void 0,
+                    "aria-describedby": describedBy,
+                    className: TagsInput_module_css_default.input
+                  }
+                )
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ jsx(InputBlockLabel_default, { error, id: errorId, children: errorMessage })
+        ]
+      }
+    );
+  }
+);
+TagsInputComponent.displayName = "BolioUITagsInput";
+var TagsInput = with_scale_default(TagsInputComponent);
+var TagsInput_default = TagsInput;
+
+// core/TagsInput/index.ts
+var TagsInput_default2 = TagsInput_default;
+
+export {
+  TagsInput_default2 as TagsInput_default
+};