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

package/dist/chunk-DIMJQLWY.js

@@ -0,0 +1,601 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkJFNYQSEZjs = require('./chunk-JFNYQSEZ.js');
+
+
+var _chunkAG2NWQYLjs = require('./chunk-AG2NWQYL.js');
+
+
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+
+
+var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
+
+
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Select/Select.tsx
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Select/SelectIcon.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectIcon.module.css.bolio-css-module-source
+var SelectIcon_module_css_default = { "icon": "SelectIcon-module_icon__vgja5" };
+
+// core/Select/SelectIcon.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function SelectIconComponent() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      strokeWidth: "1",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: SelectIcon_module_css_default.icon,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+SelectIconComponent.displayName = "BolioUISelectIcon";
+var SelectIcon = _react2.default.memo(SelectIconComponent);
+var SelectIcon_default = SelectIcon;
+
+// core/Select/SelectDropdown.tsx
+
+
+// core/Select/SelectContext.ts
+
+var defaultContext = {
+  visible: false,
+  disableAll: false
+};
+var SelectContext = _react2.default.createContext(defaultContext);
+var useSelectContext = () => _react2.default.useContext(SelectContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectDropdown.module.css.bolio-css-module-source
+var SelectDropdown_module_css_default = { "selectDropdown": "SelectDropdown-module_selectDropdown__gcGH-" };
+
+// core/Select/SelectDropdown.tsx
+
+var SelectDropdown = _react2.default.forwardRef(
+  ({
+    visible,
+    colors,
+    children,
+    className = "",
+    dropdownStyle = {},
+    disableMatchWidth,
+    getPopupContainer
+  }, dropdownRef) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const internalDropdownRef = _react.useRef.call(void 0, null);
+    const { ref } = useSelectContext();
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, SelectDropdown_module_css_default.selectDropdown, className);
+    _react.useImperativeHandle.call(void 0, 
+      dropdownRef,
+      () => internalDropdownRef.current
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkAG2NWQYLjs.dropdown_default,
+      {
+        parent: ref,
+        visible,
+        disableMatchWidth,
+        getPopupContainer,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            ref: internalDropdownRef,
+            className: classes,
+            style: {
+              "--select-dropdown-radius": theme.layout.radius,
+              "--select-dropdown-shadow": theme.expressiveness.shadowMedium,
+              "--select-dropdown-bg": colors.bgColor,
+              "--select-dropdown-border": colors.borderColor,
+              "--select-dropdown-color": colors.color,
+              ...dropdownStyle
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+SelectDropdown.displayName = "BolioUISelectDropdown";
+var SelectDropdown_default = SelectDropdown;
+
+// core/Select/SelectIconClear.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectIconClear.module.css.bolio-css-module-source
+var SelectIconClear_module_css_default = { "clearIcon": "SelectIconClear-module_clearIcon__p5IH4" };
+
+// core/Select/SelectIconClear.tsx
+
+function SelectIconClear({ onClick }) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const clickHandler = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      onClick: clickHandler,
+      className: _chunk5KUROAEPjs.joinClasses.call(void 0, "clear-icon", SelectIconClear_module_css_default.clearIcon),
+      style: {
+        "--select-clear-icon-color": theme.palette.accents_5,
+        "--select-clear-icon-hover-color": theme.palette.foreground
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none",
+          shapeRendering: "geometricPrecision",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6L6 18" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 6l12 12" })
+          ]
+        }
+      )
+    }
+  );
+}
+var MemoSelectIconClear = _react2.default.memo(SelectIconClear);
+var SelectIconClear_default = MemoSelectIconClear;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectMultipleValue.module.css.bolio-css-module-source
+var SelectMultipleValue_module_css_default = { "item": "SelectMultipleValue-module_item__P4Dn3" };
+
+// core/Select/SelectMultipleValue.tsx
+
+function SelectMultipleValue({ disabled, onClear, children }) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJFNYQSEZjs.Grid_default, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: SelectMultipleValue_module_css_default.item,
+      style: {
+        "--select-multiple-value-radius": theme.layout.radius,
+        "--select-multiple-value-bg": theme.palette.accents_3,
+        "--select-multiple-value-color": disabled ? theme.palette.accents_5 : theme.palette.accents_7
+      },
+      children: [
+        children,
+        !!onClear && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectIconClear_default, { onClick: onClear })
+      ]
+    }
+  ) });
+}
+SelectMultipleValue.displayName = "BolioUISelectMultipleValue";
+var SelectMultipleValue_default = SelectMultipleValue;
+
+// core/Shared/ellipsis.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Shared/ellipsis.module.css.bolio-css-module-source
+var ellipsis_module_css_default = { "ellipsis": "ellipsis-module_ellipsis__kLorN" };
+
+// core/Shared/ellipsis.tsx
+
+var Ellipsis = ({
+  children,
+  height
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ellipsis_module_css_default.ellipsis, style: { lineHeight: height }, children });
+};
+var ellipsis_default = _react2.default.memo(Ellipsis);
+
+// core/Select/SelectInput.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/SelectInput.module.css.bolio-css-module-source
+var SelectInput_module_css_default = { "input": "SelectInput-module_input__xsgNv" };
+
+// core/Select/SelectInput.tsx
+
+var SelectInput = _react2.default.forwardRef(
+  ({ visible, onBlur, onFocus, ariaLabel, ariaLabelledby }, inputRef) => {
+    const ref = _react.useRef.call(void 0, null);
+    _react.useImperativeHandle.call(void 0, 
+      inputRef,
+      () => ref.current
+    );
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (visible) {
+        (_a = ref.current) == null ? void 0 : _a.focus();
+      }
+    }, [visible]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        ref,
+        type: "search",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        readOnly: true,
+        unselectable: "on",
+        "aria-expanded": visible,
+        onBlur,
+        onFocus,
+        className: SelectInput_module_css_default.input
+      }
+    );
+  }
+);
+SelectInput.displayName = "BolioUISelectInput";
+var SelectInput_default = SelectInput;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Select/Select.module.css.bolio-css-module-source
+var Select_module_css_default = { "select": "Select-module_select__ehP4U", "multiple": "Select-module_multiple__QrOT5", "active": "Select-module_active__KKXEg", "icon": "Select-module_icon__EEohP", "value": "Select-module_value__TFknF", "placeholder": "Select-module_placeholder__dhhM0" };
+
+// core/Select/Select.tsx
+
+var noop = () => {
+};
+var SelectComponent = _react2.default.forwardRef(
+  ({
+    children,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    disabled = false,
+    initialValue: init,
+    value: customValue,
+    icon: Icon = SelectIcon_default,
+    onChange,
+    pure = false,
+    multiple = false,
+    clearable = true,
+    placeholder,
+    className = "",
+    dropdownClassName,
+    dropdownStyle,
+    disableMatchWidth = false,
+    getPopupContainer,
+    onDropdownVisibleChange = noop,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    style,
+    ...props
+  }, selectRef) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const ref = _react.useRef.call(void 0, null);
+    const inputRef = _react.useRef.call(void 0, null);
+    const dropdownRef = _react.useRef.call(void 0, null);
+    const [visible, setVisible] = _react.useState.call(void 0, false);
+    const [selectFocus, setSelectFocus] = _react.useState.call(void 0, false);
+    const [value, setValue, valueRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, () => {
+      if (!multiple) return init;
+      if (Array.isArray(init)) return init;
+      return typeof init === "undefined" ? [] : [init];
+    });
+    const isEmpty = _react.useMemo.call(void 0, () => {
+      if (!Array.isArray(value)) return !value;
+      return value.length === 0;
+    }, [value]);
+    const colors = _react.useMemo.call(void 0, 
+      () => _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, type, disabled, {
+        filled,
+        light,
+        ghost,
+        subtle
+      }),
+      [theme.palette, type, disabled, filled, light, ghost, subtle]
+    );
+    const updateVisible = _react.useCallback.call(void 0, 
+      (next) => {
+        onDropdownVisibleChange(next);
+        setVisible(next);
+      },
+      [onDropdownVisibleChange]
+    );
+    const updateValue = _react.useCallback.call(void 0, 
+      (next) => {
+        setValue((last) => {
+          if (!Array.isArray(last)) return next;
+          if (!last.includes(next)) return [...last, next];
+          return last.filter((item) => item !== next);
+        });
+        if (onChange) onChange(valueRef.current);
+        if (!multiple) {
+          updateVisible(false);
+        }
+      },
+      [setValue, onChange, valueRef, multiple, updateVisible]
+    );
+    const initialValue = _react.useMemo.call(void 0, 
+      () => ({
+        value,
+        visible,
+        updateValue,
+        updateVisible,
+        ref,
+        disableAll: disabled
+      }),
+      [visible, disabled, ref, value, updateValue, updateVisible]
+    );
+    const clickHandler = (event) => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      event.preventDefault();
+      if (disabled) return;
+      updateVisible(!visible);
+      event.preventDefault();
+    };
+    const mouseDownHandler = (event) => {
+      if (visible) {
+        event.preventDefault();
+      }
+    };
+    _react.useEffect.call(void 0, () => {
+      if (customValue === void 0) return;
+      setValue(customValue);
+    }, [customValue, setValue]);
+    _react.useImperativeHandle.call(void 0, 
+      selectRef,
+      () => ({
+        focus: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.focus();
+        },
+        blur: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.blur();
+        },
+        scrollTo: (options) => {
+          var _a;
+          return (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(options);
+        }
+      }),
+      [inputRef, dropdownRef]
+    );
+    const selectedChild = _react.useMemo.call(void 0, () => {
+      const [, optionChildren] = _chunkUX2B3G6Ujs.pickChildByProps.call(void 0, children, "value", value);
+      return _react2.default.Children.map(optionChildren, (child) => {
+        if (!_react2.default.isValidElement(
+          child
+        ))
+          return null;
+        const el = _react2.default.cloneElement(child, {
+          preventAllEvents: true
+        });
+        if (!multiple) return el;
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          SelectMultipleValue_default,
+          {
+            disabled,
+            onClear: clearable ? () => updateValue(child.props.value) : null,
+            children: el
+          }
+        );
+      });
+    }, [value, children, multiple, clearable, disabled, updateValue]);
+    const onInputBlur = () => {
+      updateVisible(false);
+      setSelectFocus(false);
+    };
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+      Select_module_css_default.select,
+      {
+        [Select_module_css_default.active]: selectFocus || visible,
+        [Select_module_css_default.multiple]: multiple
+      },
+      className
+    );
+    const selectStyle = {
+      "--select-cursor": disabled ? "not-allowed" : "pointer",
+      "--select-border-color": colors.borderColor,
+      "--select-radius": rounded ? "25px" : theme.layout.radius,
+      "--select-bg-color": colors.bgColor,
+      "--select-font-size": SCALES.font(0.875),
+      "--select-height": SCALES.height(2.25),
+      "--select-width": SCALES.width(1, "initial"),
+      "--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.875),
+      "--select-margin-top": SCALES.mt(0),
+      "--select-margin-right": SCALES.mr(0),
+      "--select-margin-bottom": SCALES.mb(0),
+      "--select-margin-left": SCALES.ml(0),
+      "--select-multiple-padding-top": SCALES.pt(0.334),
+      "--select-hover-border": colors.hoverBorder,
+      "--select-hover-bg-color": colors.hoverBgColor,
+      "--select-focus-border": colors.focusBorder,
+      "--select-placeholder-color": colors.placeholderColor,
+      "--select-icon-color": colors.iconColor,
+      "--select-color": colors.color,
+      "--select-placeholder-font-size": SCALES.font(0.875),
+      "--select-icon-right": theme.layout.gapQuarter,
+      "--select-icon-rotate": visible ? "180deg" : "0deg",
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: classes,
+        ref,
+        onClick: clickHandler,
+        onMouseDown: mouseDownHandler,
+        ...props,
+        style: selectStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SelectInput_default,
+            {
+              ref: inputRef,
+              ariaLabel: ariaLabel || (typeof placeholder === "string" ? placeholder : void 0),
+              ariaLabelledby,
+              visible,
+              onBlur: onInputBlur,
+              onFocus: () => setSelectFocus(true)
+            }
+          ),
+          isEmpty && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunk5KUROAEPjs.joinClasses.call(void 0, Select_module_css_default.value, Select_module_css_default.placeholder), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ellipsis_default, { height: "var(--select-height)", children: placeholder }) }),
+          value && !multiple && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Select_module_css_default.value, children: selectedChild }),
+          value && multiple && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJFNYQSEZjs.Grid_default.Container, { gap: 0.5, children: selectedChild }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SelectDropdown_default,
+            {
+              ref: dropdownRef,
+              visible,
+              colors,
+              className: dropdownClassName,
+              dropdownStyle,
+              disableMatchWidth,
+              getPopupContainer,
+              children
+            }
+          ),
+          !pure && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Select_module_css_default.icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, {}) })
+        ]
+      }
+    ) });
+  }
+);
+SelectComponent.displayName = "BolioUISelect";
+var Select = _chunkMAICNLTYjs.with_scale_default.call(void 0, SelectComponent);
+var Select_default = Select;
+
+// core/Select/SelectOption.tsx
+
+
+// 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", "label": "SelectOption-module_label__NtVM7", "divider": "SelectOption-module_divider__mmqJj", "disabled": "SelectOption-module_disabled__cDMWS", "selected": "SelectOption-module_selected__HOwTO" };
+
+// core/Select/SelectOption.tsx
+
+function SelectOptionComponent({
+  value: identValue = "",
+  className = "",
+  children,
+  disabled = false,
+  divider = false,
+  label = false,
+  preventAllEvents = false,
+  style,
+  ...props
+}) {
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const { updateValue, value, disableAll } = useSelectContext();
+  const isDisabled = _react.useMemo.call(void 0, 
+    () => disabled || disableAll,
+    [disabled, disableAll]
+  );
+  const isLabel = _react.useMemo.call(void 0, () => label || divider, [label, divider]);
+  if (!isLabel && identValue === void 0) {
+    _chunkAXYDJGTNjs.log_warning_default.call(void 0, 'The props "value" is required.', "Select Option");
+  }
+  const selected = _react.useMemo.call(void 0, () => {
+    if (!value) return false;
+    if (typeof value === "string") {
+      return identValue === value;
+    }
+    return value.includes(`${identValue}`);
+  }, [identValue, value]);
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+    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();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (isDisabled || isLabel) return;
+    if (updateValue) updateValue(identValue);
+  };
+  const optionStyle = {
+    "--select-option-cursor": isDisabled ? "not-allowed" : "pointer",
+    "--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.75),
+    "--select-option-padding-bottom": SCALES.pb(0),
+    "--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-divider-height": SCALES.height(1, 0),
+    "--select-option-divider-padding-top": SCALES.pt(0),
+    "--select-option-divider-padding-right": SCALES.pr(0),
+    "--select-option-divider-padding-bottom": SCALES.pb(0),
+    "--select-option-divider-padding-left": SCALES.pl(0),
+    "--select-option-divider-margin-top": SCALES.mt(0.5),
+    "--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-font-size": SCALES.font(0.875),
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: classes,
+      onClick: clickHandler,
+      style: optionStyle,
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ellipsis_default, { height: SCALES.height(2.25), children })
+    }
+  );
+}
+SelectOptionComponent.displayName = "BolioUISelectOption";
+var SelectOption = _chunkMAICNLTYjs.with_scale_default.call(void 0, SelectOptionComponent);
+var SelectOption_default = SelectOption;
+
+// core/Select/index.ts
+Select_default.Option = SelectOption_default;
+var Select_default2 = Select_default;
+
+
+
+exports.Select_default = Select_default2;