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

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

package/esm/chunk-HK6XCH2C.js

@@ -0,0 +1,76 @@
+import {
+  useProportions
+} from "./chunk-UF4IKEU2.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/Capacity/Capacity.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Capacity/Capacity.module.css.bolio-css-module-source
+var Capacity_module_css_default = { "capacity": "Capacity-module_capacity__q1bcu" };
+
+// core/Capacity/Capacity.tsx
+import { jsx } from "react/jsx-runtime";
+var getColor = (val, palette) => {
+  if (val < 33) return palette.info;
+  if (val < 66) return palette.warning;
+  return palette.errorDark;
+};
+var CapacityComponent = React.forwardRef(
+  ({
+    value = 0,
+    limit = 100,
+    color: userColor,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const percentValue = useProportions(value, limit);
+    const classes = use_classes_default(Capacity_module_css_default.capacity, className);
+    const color = useMemo(() => {
+      if (userColor && userColor !== "") return userColor;
+      return getColor(percentValue, theme.palette);
+    }, [userColor, percentValue, theme.palette]);
+    const capacityStyle = {
+      width: SCALES.width(3.125),
+      height: SCALES.height(0.625),
+      borderRadius: theme.layout.radius,
+      backgroundColor: theme.palette.accents_2,
+      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)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        title: `${percentValue}%`,
+        ...props,
+        style: capacityStyle,
+        children: /* @__PURE__ */ jsx("span", { style: { width: `${percentValue}%`, backgroundColor: color } })
+      }
+    );
+  }
+);
+CapacityComponent.displayName = "BolioUICapacity";
+var Capacity = with_scale_default(CapacityComponent);
+var Capacity_default = Capacity;
+
+// core/Capacity/index.ts
+var Capacity_default2 = Capacity_default;
+
+export {
+  Capacity_default2 as Capacity_default
+};

package/esm/chunk-IIKZQZXS.js

@@ -0,0 +1,269 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Radio/Radio.tsx
+import React2, { useEffect, useMemo, useState } from "react";
+
+// core/Radio/RadioContext.ts
+import React from "react";
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false
+};
+var RadioContext = React.createContext(defaultContext);
+var useRadioContext = () => React.useContext(RadioContext);
+
+// core/Radio/RadioDescription.tsx
+import { jsx } from "react/jsx-runtime";
+function RadioDescriptionComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const descriptionStyle = {
+    color: theme.palette.accents_3,
+    fontSize: SCALES.font(0.85, "calc(var(--radio-size) * 0.85)"),
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    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, "calc(var(--radio-size) * 1.625)")}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("span", { className, ...props, style: descriptionStyle, children });
+}
+RadioDescriptionComponent.displayName = "BolioUIRadioDescription";
+var RadioDescription = with_scale_default(RadioDescriptionComponent);
+var RadioDescription_default = RadioDescription;
+
+// core/Radio/styles.ts
+var getColor = (palette, status) => {
+  const colors = {
+    default: palette.accents_8,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Radio/Radio.module.css.bolio-css-module-source
+var Radio_module_css_default = { "input": "Radio-module_input__bPgim", "name": "Radio-module_name__9QrEM", "point": "Radio-module_point__O2nmm", "radio": "Radio-module_radio__o2X4H", "label": "Radio-module_label__eRJLf", "active": "Radio-module_active__W254J" };
+
+// core/Radio/Radio.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var RadioComponent = React2.forwardRef(
+  ({
+    className = "",
+    checked,
+    onChange,
+    disabled = false,
+    type = "default",
+    value: radioValue,
+    children,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [selfChecked, setSelfChecked] = useState(!!checked);
+    const {
+      value: groupValue,
+      disabledAll,
+      inGroup,
+      updateState
+    } = useRadioContext();
+    const [withoutDescChildren, DescChildren] = pickChild(
+      children,
+      RadioDescription_default
+    );
+    if (inGroup) {
+      if (checked !== void 0) {
+        log_warning_default('Remove props "checked" if in the Radio.Group.', "Radio");
+      }
+      if (radioValue === void 0) {
+        log_warning_default(
+          'Props "value" must be deinfed if in the Radio.Group.',
+          "Radio"
+        );
+      }
+    }
+    useEffect(() => {
+      if (!inGroup) return;
+      setSelfChecked(groupValue === radioValue);
+    }, [inGroup, groupValue, radioValue]);
+    const color = useMemo(
+      () => getColor(theme.palette, type),
+      [theme.palette, type]
+    );
+    const isDisabled = useMemo(
+      () => disabled || disabledAll,
+      [disabled, disabledAll]
+    );
+    const changeHandler = (event) => {
+      if (isDisabled) return;
+      const selfEvent = {
+        target: {
+          checked: true
+        },
+        stopPropagation: event.stopPropagation.bind(event),
+        preventDefault: event.preventDefault.bind(event),
+        nativeEvent: event
+      };
+      setSelfChecked(true);
+      if (inGroup) {
+        if (updateState) updateState(radioValue);
+      }
+      if (onChange) onChange(selfEvent);
+    };
+    useEffect(() => {
+      if (checked === void 0) return;
+      setSelfChecked(Boolean(checked));
+    }, [checked]);
+    const radioStyle = {
+      width: SCALES.width(1, "initial"),
+      height: SCALES.height(1, "auto"),
+      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)}`,
+      "--radio-own-size": SCALES.font(1),
+      "--radio-label-color": isDisabled ? theme.palette.accents_4 : theme.palette.foreground,
+      "--radio-cursor": isDisabled ? "not-allowed" : "pointer",
+      "--radio-color": isDisabled ? theme.palette.accents_3 : color,
+      "--radio-border": selfChecked ? "var(--radio-color)" : isDisabled ? theme.palette.accents_2 : `color-mix(in srgb, var(--radio-color) 55%, ${theme.palette.background})`,
+      "--radio-hover-border": isDisabled ? void 0 : "var(--radio-color)",
+      "--radio-bg": isDisabled ? theme.palette.accents_1 : theme.palette.background
+    };
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: use_classes_default("radio", Radio_module_css_default.radio, className),
+        style: radioStyle,
+        children: /* @__PURE__ */ jsxs("label", { className: Radio_module_css_default.label, children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              ref,
+              type: "radio",
+              value: radioValue,
+              checked: selfChecked,
+              onChange: changeHandler,
+              ...props,
+              className: Radio_module_css_default.input
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: Radio_module_css_default.name, children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: use_classes_default(Radio_module_css_default.point, {
+                  [Radio_module_css_default.active]: selfChecked
+                })
+              }
+            ),
+            withoutDescChildren
+          ] }),
+          DescChildren && DescChildren
+        ] })
+      }
+    );
+  }
+);
+RadioComponent.displayName = "BolioUIRadio";
+var Radio = with_scale_default(RadioComponent);
+var Radio_default = Radio;
+
+// core/Radio/RadioGroup.tsx
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Radio/RadioGroup.module.css.bolio-css-module-source
+var RadioGroup_module_css_default = { "radioGroup": "RadioGroup-module_radioGroup__6XPZE" };
+
+// core/Radio/RadioGroup.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function RadioGroupComponent({
+  disabled = false,
+  onChange,
+  value,
+  children,
+  className = "",
+  initialValue,
+  useRow = false,
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const [selfVal, setSelfVal] = useState2(
+    initialValue
+  );
+  const updateState = useCallback(
+    (nextValue) => {
+      setSelfVal(nextValue);
+      if (onChange) onChange(nextValue);
+    },
+    [onChange]
+  );
+  const providerValue = useMemo2(() => {
+    return {
+      updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      value: selfVal
+    };
+  }, [updateState, disabled, selfVal]);
+  useEffect2(() => {
+    if (value === void 0) return;
+    setSelfVal(value);
+  }, [value]);
+  const groupStyle = {
+    flexDirection: useRow ? "row" : "column",
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    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)}`,
+    "--radio-group-item-size": SCALES.font(1),
+    "--radio-group-margin-top": useRow ? 0 : SCALES.font(1),
+    "--radio-group-margin-left": useRow ? SCALES.font(1) : 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsx3(RadioContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: use_classes_default(RadioGroup_module_css_default.radioGroup, className),
+      ...props,
+      style: groupStyle,
+      children
+    }
+  ) });
+}
+RadioGroupComponent.displayName = "BolioUIRadioGroup";
+var RadioGroup = with_scale_default(RadioGroupComponent);
+var RadioGroup_default = RadioGroup;
+
+// core/Radio/index.ts
+Radio_default.Group = RadioGroup_default;
+Radio_default.Description = RadioDescription_default;
+Radio_default.Desc = RadioDescription_default;
+var Radio_default2 = Radio_default;
+
+export {
+  Radio_default2 as Radio_default
+};