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

package/dist/chunk-LSSL324I.js

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Row/Row.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Row/Row.module.css.bolio-css-module-source
+var Row_module_css_default = { "row": "Row-module_row__KhY-H" };
+
+// core/Row/Row.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var defaultProps = {
+  gap: 0,
+  justify: "start",
+  align: "top",
+  component: "div",
+  className: ""
+};
+var getFlexAlignment = (justify, align) => {
+  const flexJustifyMap = {
+    end: "flex-end",
+    center: "center",
+    "space-around": "space-around",
+    "space-between": "space-between"
+  };
+  const flexAlignMap = {
+    middle: "center",
+    bottom: "flex-end"
+  };
+  return {
+    justifyValue: flexJustifyMap[justify] || "normal",
+    alignValue: flexAlignMap[align] || "normal"
+  };
+};
+var Row = _react2.default.forwardRef(
+  ({
+    children,
+    component = defaultProps.component,
+    gap = defaultProps.gap,
+    justify = defaultProps.justify,
+    align = defaultProps.align,
+    className = defaultProps.className,
+    style,
+    ...props
+  }, ref) => {
+    const Component = component;
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { justifyValue, alignValue } = _react.useMemo.call(void 0, 
+      () => getFlexAlignment(justify, align),
+      [justify, align]
+    );
+    const rowStyle = {
+      marginLeft: `calc(${gap} * ${theme.layout.gap} / 2)`,
+      marginRight: `calc(${gap} * ${theme.layout.gap} / 2)`,
+      "--row-gap": `calc(${gap} * ${theme.layout.gap})`,
+      justifyContent: justifyValue,
+      alignItems: alignValue,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Component,
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "row", Row_module_css_default.row, className),
+        ...props,
+        style: rowStyle,
+        children
+      }
+    );
+  }
+);
+Row.displayName = "BolioUIRow";
+var Row_default = Row;
+
+// core/Row/index.ts
+var Row_default2 = Row_default;
+
+
+
+exports.Row_default = Row_default2;

package/dist/{chunk-S62PPQHN.js → chunk-MAICNLTY.js}

@@ -3,7 +3,7 @@
 var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
 
 
-var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
 
 // core/use-scale/with-scale.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -109,7 +109,7 @@ function withScale(Render) {
   const ScaleFC = _react.forwardRef.call(void 0, 
     ({ children, ...props }, ref) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
-      const { layout } = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+      const { layout } = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
       const {
         paddingLeft,
         pl,

package/dist/chunk-MGHMAZRL.js

@@ -0,0 +1,231 @@
+"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 _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Combobox/Combobox.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Combobox/Combobox.module.css.bolio-css-module-source
+var Combobox_module_css_default = { "combobox": "Combobox-module_combobox__-928S", "input": "Combobox-module_input__ti3bv", "list": "Combobox-module_list__2otmP", "empty": "Combobox-module_empty__OHL8R", "option": "Combobox-module_option__7vlGK", "active": "Combobox-module_active__hBOFz", "selected": "Combobox-module_selected__SPX5y", "disabled": "Combobox-module_disabled__P6bkw", "srOnly": "Combobox-module_srOnly__g2BKO" };
+
+// core/Combobox/Combobox.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var getLabel = (option) => {
+  var _a;
+  return option ? (_a = option.label) != null ? _a : option.value : "";
+};
+var defaultFilter = (option, text) => getLabel(option).toLowerCase().includes(text.trim().toLowerCase());
+var firstEnabled = (options) => options.findIndex((option) => !option.disabled);
+var ComboboxComponent = _react2.default.forwardRef(
+  ({
+    options,
+    value: customValue,
+    initialValue = null,
+    onChange,
+    onInputChange,
+    placeholder,
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    emptyText = "No results",
+    filter = defaultFilter,
+    className = "",
+    onKeyDown,
+    onBlur,
+    ...props
+  }, 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, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const baseId = _react.useId.call(void 0, );
+    const listId = `${baseId}-list`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
+    const selected = isControlled ? customValue : selfValue;
+    const selectedOption = options.find((option) => option.value === selected);
+    const selectedLabel = getLabel(selectedOption);
+    const [text, setText] = _react.useState.call(void 0, selectedLabel);
+    const [open, setOpen] = _react.useState.call(void 0, false);
+    const [activeIndex, setActiveIndex] = _react.useState.call(void 0, -1);
+    _react.useEffect.call(void 0, () => {
+      setText(selectedLabel);
+    }, [selectedLabel]);
+    const query = selectedOption && text === selectedLabel ? "" : text;
+    const visible = _react.useMemo.call(void 0, 
+      () => options.filter((option) => filter(option, query)),
+      [options, filter, query]
+    );
+    const expanded = open && visible.length > 0;
+    _react.useEffect.call(void 0, () => {
+      setActiveIndex(open ? firstEnabled(visible) : -1);
+    }, [open, query]);
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (activeIndex < 0) return;
+      const element = document.getElementById(optionId(activeIndex));
+      (_a = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a.call(element, { block: "nearest" });
+    }, [activeIndex]);
+    const choose = (option) => {
+      if (option.disabled) return;
+      if (!isControlled) setSelfValue(option.value);
+      setText(getLabel(option));
+      setOpen(false);
+      if (onChange) onChange(option.value);
+    };
+    const inputHandler = (event) => {
+      const next = event.target.value;
+      setText(next);
+      setOpen(true);
+      if (onInputChange) onInputChange(next);
+      if (next === "" && selected !== null) {
+        if (!isControlled) setSelfValue(null);
+        if (onChange) onChange(null);
+      }
+    };
+    const move = (direction) => {
+      const count = visible.length;
+      if (!count) return;
+      let index = activeIndex === -1 ? direction === 1 ? -1 : count : activeIndex;
+      for (let step = 0; step < count; step++) {
+        index = (index + direction + count) % count;
+        if (!visible[index].disabled) return setActiveIndex(index);
+      }
+    };
+    const keyDownHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) return setOpen(true);
+        return move(event.key === "ArrowDown" ? 1 : -1);
+      }
+      if (event.key === "Enter" && expanded && activeIndex >= 0) {
+        event.preventDefault();
+        return choose(visible[activeIndex]);
+      }
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setOpen(false);
+      setText(selectedLabel);
+    };
+    const comboboxStyle = {
+      "--combobox-font-size": SCALES.font(0.875),
+      "--combobox-input-height": SCALES.height(2.25),
+      "--combobox-width": SCALES.width(1, "initial"),
+      "--combobox-height": SCALES.height(1, "auto"),
+      "--combobox-padding-top": SCALES.pt(0),
+      "--combobox-padding-right": SCALES.pr(0),
+      "--combobox-padding-bottom": SCALES.pb(0),
+      "--combobox-padding-left": SCALES.pl(0),
+      "--combobox-margin-top": SCALES.mt(0),
+      "--combobox-margin-right": SCALES.mr(0),
+      "--combobox-margin-bottom": SCALES.mb(0),
+      "--combobox-margin-left": SCALES.ml(0),
+      "--combobox-text-color": theme.palette.foreground,
+      "--combobox-bg": theme.palette.background,
+      "--combobox-border-color": theme.palette.border,
+      "--combobox-radius": rounded ? "25px" : theme.layout.radius,
+      "--combobox-popup-radius": theme.layout.radius,
+      "--combobox-field-color": colors.color,
+      "--combobox-field-bg": colors.bgColor,
+      "--combobox-field-border": colors.borderColor,
+      "--combobox-field-hover-bg": colors.hoverBgColor,
+      "--combobox-field-hover-border": colors.hoverBorder,
+      "--combobox-focus-border-color": colors.focusBorder,
+      "--combobox-placeholder-color": colors.placeholderColor,
+      "--combobox-disabled-color": theme.palette.accents_4,
+      "--combobox-shadow": theme.expressiveness.shadowMedium,
+      "--combobox-active-bg": theme.palette.accents_2,
+      "--combobox-empty-color": theme.palette.accents_5
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Combobox_module_css_default.combobox, className),
+        style: comboboxStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              ref,
+              type: "text",
+              role: "combobox",
+              autoComplete: "off",
+              "aria-autocomplete": "list",
+              "aria-expanded": expanded,
+              "aria-controls": expanded ? listId : void 0,
+              "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              value: text,
+              placeholder,
+              disabled,
+              onChange: inputHandler,
+              onKeyDown: keyDownHandler,
+              onBlur: blurHandler,
+              className: Combobox_module_css_default.input,
+              ...props
+            }
+          ),
+          expanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { id: listId, role: "listbox", className: Combobox_module_css_default.list, children: visible.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "li",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": option.value === selected,
+              "aria-disabled": option.disabled || void 0,
+              className: _chunk5KUROAEPjs.joinClasses.call(void 0, Combobox_module_css_default.option, {
+                [Combobox_module_css_default.active]: index === activeIndex,
+                [Combobox_module_css_default.selected]: option.value === selected,
+                [Combobox_module_css_default.disabled]: option.disabled
+              }),
+              onMouseDown: (event) => {
+                event.preventDefault();
+                choose(option);
+              },
+              onMouseMove: () => !option.disabled && setActiveIndex(index),
+              children: getLabel(option)
+            },
+            option.value
+          )) }),
+          open && visible.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Combobox_module_css_default.empty, children: emptyText }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "status", className: Combobox_module_css_default.srOnly, children: expanded ? `${visible.length} result${visible.length === 1 ? "" : "s"} available` : "" })
+        ]
+      }
+    );
+  }
+);
+ComboboxComponent.displayName = "BolioUICombobox";
+var Combobox = _chunkMAICNLTYjs.with_scale_default.call(void 0, ComboboxComponent);
+var Combobox_default = Combobox;
+
+// core/Combobox/index.ts
+var Combobox_default2 = Combobox_default;
+
+
+
+exports.Combobox_default = Combobox_default2;