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

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-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
+};

package/esm/chunk-GYFW5NLU.js

@@ -0,0 +1,257 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  Calendar_default,
+  fromISO,
+  startOfDay,
+  toISO
+} from "./chunk-P245HSVB.js";
+import {
+  use_click_away_default
+} from "./chunk-DGXZP4VJ.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/DateRangePicker/DateRangePicker.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/DateRangePicker/DateRangePicker.module.css.bolio-css-module-source
+var DateRangePicker_module_css_default = { "daterange": "DateRangePicker-module_daterange__id9HF", "field": "DateRangePicker-module_field__4UZhH", "input": "DateRangePicker-module_input__h9sDj", "separator": "DateRangePicker-module_separator__StR3E", "toggle": "DateRangePicker-module_toggle__gNukh", "popup": "DateRangePicker-module_popup__hKExw" };
+
+// core/DateRangePicker/DateRangePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var emptyRange = [null, null];
+var format = (date) => date ? toISO(date) : "";
+var DateRangePickerComponent = React.forwardRef(
+  ({
+    value: customValue,
+    initialValue = emptyRange,
+    onChange,
+    min,
+    max,
+    locale,
+    weekStartsOn,
+    startPlaceholder = "YYYY-MM-DD",
+    endPlaceholder = "YYYY-MM-DD",
+    startLabel = "Start date",
+    endLabel = "End date",
+    calendarLabel = "Choose dates",
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const range = isControlled ? customValue : selfValue;
+    const [start, end] = range;
+    const startText = format(start);
+    const endText = format(end);
+    const [texts, setTexts] = useState({ start: startText, end: endText });
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+      setTexts({ start: startText, end: endText });
+    }, [startText, endText]);
+    const rootRef = useRef(null);
+    const endRef = useRef(null);
+    const buttonRef = useRef(null);
+    use_click_away_default(rootRef, () => setOpen(false));
+    const isInBounds = (date) => !(min && date < startOfDay(min) || max && date > startOfDay(max));
+    const commit = (next) => {
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const inputHandler = (edge) => (event) => {
+      const next = event.target.value;
+      setTexts((last) => ({ ...last, [edge]: next }));
+      const other = edge === "start" ? end : start;
+      if (next === "") {
+        return commit(edge === "start" ? [null, other] : [other, null]);
+      }
+      const date = fromISO(next);
+      if (!date || !isInBounds(date)) return;
+      if (other && (edge === "start" ? date > other : date < other)) return;
+      commit(edge === "start" ? [date, other] : [other, date]);
+    };
+    const blurHandler = () => setTexts({ start: startText, end: endText });
+    const pick = (next) => {
+      var _a;
+      commit(next);
+      if (!next[1]) return;
+      setOpen(false);
+      (_a = endRef.current) == null ? void 0 : _a.focus();
+    };
+    const keyDownHandler = (event) => {
+      var _a;
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      setOpen(false);
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    };
+    const rangeStyle = {
+      "--daterange-font-size": SCALES.font(0.875),
+      "--daterange-input-height": SCALES.height(2.25),
+      "--daterange-width": SCALES.width(1, "initial"),
+      "--daterange-height": SCALES.height(1, "auto"),
+      "--daterange-padding-top": SCALES.pt(0),
+      "--daterange-padding-right": SCALES.pr(0),
+      "--daterange-padding-bottom": SCALES.pb(0),
+      "--daterange-padding-left": SCALES.pl(0),
+      "--daterange-margin-top": SCALES.mt(0),
+      "--daterange-margin-right": SCALES.mr(0),
+      "--daterange-margin-bottom": SCALES.mb(0),
+      "--daterange-margin-left": SCALES.ml(0),
+      "--daterange-bg": theme.palette.background,
+      "--daterange-border-color": theme.palette.border,
+      "--daterange-radius": rounded ? "25px" : theme.layout.radius,
+      "--daterange-popup-radius": theme.layout.radius,
+      "--daterange-field-color": colors.color,
+      "--daterange-field-bg": colors.bgColor,
+      "--daterange-field-border": colors.borderColor,
+      "--daterange-field-hover-bg": colors.hoverBgColor,
+      "--daterange-field-hover-border": colors.hoverBorder,
+      "--daterange-focus-border-color": colors.focusBorder,
+      "--daterange-placeholder-color": colors.placeholderColor,
+      "--daterange-separator-color": colors.iconColor,
+      "--daterange-toggle-color": colors.iconColor,
+      "--daterange-toggle-hover-color": colors.color,
+      "--daterange-shadow": theme.expressiveness.shadowMedium,
+      ...style
+    };
+    const inputProps = {
+      type: "text",
+      autoComplete: "off",
+      inputMode: "numeric",
+      disabled,
+      onBlur: blurHandler,
+      className: DateRangePicker_module_css_default.input
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: use_classes_default(DateRangePicker_module_css_default.daterange, className),
+        style: rangeStyle,
+        role: "group",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: DateRangePicker_module_css_default.field, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...inputProps,
+                value: texts.start,
+                placeholder: startPlaceholder,
+                "aria-label": startLabel,
+                onChange: inputHandler("start")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: DateRangePicker_module_css_default.separator, "aria-hidden": "true", children: "\u2013" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: endRef,
+                value: texts.end,
+                placeholder: endPlaceholder,
+                "aria-label": endLabel,
+                onChange: inputHandler("end")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: buttonRef,
+                type: "button",
+                className: DateRangePicker_module_css_default.toggle,
+                "aria-label": calendarLabel,
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                disabled,
+                onClick: () => setOpen((last) => !last),
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.25em",
+                    height: "1.25em",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                      /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          open && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "dialog",
+              "aria-label": calendarLabel,
+              className: DateRangePicker_module_css_default.popup,
+              onKeyDown: keyDownHandler,
+              children: /* @__PURE__ */ jsx(
+                Calendar_default,
+                {
+                  mode: "range",
+                  numberOfMonths: 2,
+                  autoFocus: true,
+                  value: range,
+                  min,
+                  max,
+                  locale,
+                  weekStartsOn,
+                  onChange: pick
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DateRangePickerComponent.displayName = "BolioUIDateRangePicker";
+var DateRangePicker = with_scale_default(DateRangePickerComponent);
+var DateRangePicker_default = DateRangePicker;
+
+// core/DateRangePicker/index.ts
+var DateRangePicker_default2 = DateRangePicker_default;
+
+export {
+  DateRangePicker_default2 as DateRangePicker_default
+};