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

package/esm/chunk-GGCVPMXO.js

@@ -0,0 +1,188 @@
+import {
+  Tooltip_default
+} from "./chunk-XF4TPE2W.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  use_default_props_default
+} from "./chunk-BSDZWWUS.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  getReactNode
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Popover/Popover.tsx
+import React2, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Popover/PopoverContext.ts
+import React, { useContext } from "react";
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: () => {
+  }
+};
+var PopoverContext = React.createContext(defaultContext);
+var usePopoverContext = () => useContext(PopoverContext);
+
+// core/Popover/Popover.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultProps = {
+  disableItemsAutoClose: false,
+  trigger: "click",
+  placement: "bottom",
+  portalClassName: "",
+  initialVisible: false,
+  hideArrow: false,
+  type: "default",
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: "",
+  onVisibleChange: (() => {
+  }),
+  visible: false
+};
+var PopoverComponent = React2.forwardRef((popoverProps, ref) => {
+  const {
+    content,
+    children,
+    trigger,
+    placement,
+    initialVisible,
+    portalClassName,
+    disableItemsAutoClose,
+    onVisibleChange,
+    visible: customVisible,
+    type = "default",
+    ...props
+  } = use_default_props_default(popoverProps, defaultProps);
+  const [visible, setVisible] = useState(initialVisible);
+  const textNode = useMemo(() => getReactNode(content), [content]);
+  const onPopoverVisibleChange = useCallback(
+    (next) => {
+      setVisible(next);
+      onVisibleChange(next);
+    },
+    [onVisibleChange]
+  );
+  const onChildClick = useCallback(() => {
+    onPopoverVisibleChange(false);
+  }, [onPopoverVisibleChange]);
+  const value = useMemo(
+    () => ({
+      onItemClick: onChildClick,
+      disableItemsAutoClose
+    }),
+    [onChildClick, disableItemsAutoClose]
+  );
+  const classes = use_classes_default("popover", portalClassName);
+  const latestChange = use_latest_default(onPopoverVisibleChange);
+  useEffect(() => {
+    if (customVisible === void 0) return;
+    latestChange.current(customVisible);
+  }, [customVisible, latestChange]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    Tooltip_default,
+    {
+      ref,
+      initialVisible: false,
+      text: textNode,
+      trigger,
+      placement,
+      portalClassName: classes,
+      visible,
+      type,
+      onVisibleChange: onPopoverVisibleChange,
+      ...props,
+      children
+    }
+  ) });
+});
+PopoverComponent.displayName = "BolioUIPopover";
+var Popover = with_scale_default(PopoverComponent);
+var Popover_default = Popover;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Popover/PopoverItem.module.css.bolio-css-module-source
+var PopoverItem_module_css_default = { "item": "PopoverItem-module_item__ntzzC", "line": "PopoverItem-module_line__AtYEN", "title": "PopoverItem-module_title__ARsPq" };
+
+// core/Popover/PopoverItem.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PopoverItemComponent({
+  children,
+  line = false,
+  title = false,
+  className = "",
+  onClick,
+  disableAutoClose = false,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const { disableItemsAutoClose, onItemClick } = usePopoverContext();
+  const hasHandler = Boolean(onClick);
+  const dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line;
+  const classes = use_classes_default(
+    PopoverItem_module_css_default.item,
+    { [PopoverItem_module_css_default.line]: line, [PopoverItem_module_css_default.title]: title },
+    className
+  );
+  const clickHandler = (event) => {
+    if (onClick) onClick(event);
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+    onItemClick(event);
+  };
+  const itemStyle = line ? {
+    backgroundColor: theme.palette.border,
+    height: SCALES.height(0.0625),
+    margin: `${SCALES.mt(0.35)} ${SCALES.mr(0)} ${SCALES.mb(0.35)} ${SCALES.ml(0)}`,
+    width: SCALES.width(1, "100%"),
+    "--popover-item-hover-color": theme.palette.foreground
+  } : {
+    color: title ? theme.palette.foreground : theme.palette.accents_5,
+    fontSize: title ? SCALES.font(0.925) : SCALES.font(0.875),
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    padding: `${SCALES.pt(0.5)} ${SCALES.pr(0.75)} ${SCALES.pb(0.5)} ${SCALES.pl(0.75)}`,
+    cursor: hasHandler ? "pointer" : "default",
+    "--popover-item-hover-color": theme.palette.foreground
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: classes,
+        onClick: clickHandler,
+        ...props,
+        style: { ...itemStyle, ...style },
+        children
+      }
+    ),
+    title && /* @__PURE__ */ jsx2(PopoverItem, { line: true, title: false })
+  ] });
+}
+PopoverItemComponent.displayName = "BolioUIPopoverItem";
+var PopoverItem = with_scale_default(PopoverItemComponent);
+var PopoverItem_default = PopoverItem;
+
+// core/Popover/index.ts
+Popover_default.Item = PopoverItem_default;
+Popover_default.Option = PopoverItem_default;
+var Popover_default2 = Popover_default;
+
+export {
+  Popover_default2 as Popover_default
+};

package/esm/chunk-GGD4BGH2.js

@@ -0,0 +1,30 @@
+// core/use-current-state/use-current-state.ts
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+var useCurrentState = (initialState) => {
+  const [state, setState] = useState(() => {
+    return typeof initialState === "function" ? initialState() : initialState;
+  });
+  const ref = useRef(initialState);
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  const setValue = useCallback((val) => {
+    const result = typeof val === "function" ? val(ref.current) : val;
+    ref.current = result;
+    setState(result);
+  }, []);
+  return [state, setValue, ref];
+};
+var use_current_state_default = useCurrentState;
+
+// core/use-current-state/index.ts
+var use_current_state_default2 = use_current_state_default;
+
+export {
+  use_current_state_default2 as use_current_state_default
+};

package/esm/chunk-GJ77XHZ3.js

@@ -0,0 +1,83 @@
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Container/Container.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Container/Container.module.css.bolio-css-module-source
+var Container_module_css_default = { "container": "Container-module_container__qKv1a" };
+
+// core/Container/Container.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultProps = {
+  gap: 0,
+  justify: "start",
+  align: "top",
+  component: "div",
+  className: "",
+  fluid: false
+};
+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 Container = React.forwardRef(
+  ({
+    children,
+    component = defaultProps.component,
+    justify = defaultProps.justify,
+    align = defaultProps.align,
+    fluid = defaultProps.fluid,
+    className = defaultProps.className,
+    style,
+    ...props
+  }, ref) => {
+    const Component = component;
+    const theme = use_theme_default();
+    const { justifyValue, alignValue } = useMemo(
+      () => getFlexAlignment(justify, align),
+      [justify, align]
+    );
+    const containerStyle = {
+      maxWidth: fluid ? void 0 : theme.layout.pageWidthWithMargin,
+      justifyContent: justifyValue,
+      alignItems: alignValue,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: use_classes_default("container", Container_module_css_default.container, className),
+        ...props,
+        style: containerStyle,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "BolioUIContainer";
+var Container_default = Container;
+
+// core/Container/index.ts
+var Container_default2 = Container_default;
+
+export {
+  Container_default2 as Container_default
+};

package/esm/chunk-GJZT47MP.js

@@ -0,0 +1,32 @@
+// core/utils/variant-colors.ts
+var SEMANTIC_COLOR_TYPES = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "info"
+];
+var isSemanticColorType = (type) => !!type && SEMANTIC_COLOR_TYPES.includes(type);
+var getVariantColors = (palette, type, variant) => {
+  const base = palette[type];
+  switch (variant) {
+    case "filled":
+      return { bg: base, border: base, color: "#fff" };
+    case "light":
+      return {
+        bg: palette[`${type}Lighter`],
+        border: palette[`${type}Lighter`],
+        color: palette[`${type}Dark`]
+      };
+    case "outline":
+      return { bg: palette.background, border: base, color: base };
+    case "subtle":
+      return { bg: "transparent", border: "transparent", color: base };
+  }
+};
+
+export {
+  isSemanticColorType,
+  getVariantColors
+};

package/esm/chunk-HIFS4JIO.js

@@ -0,0 +1,225 @@
+import {
+  Calendar_default,
+  fromISO,
+  startOfDay,
+  toISO
+} from "./chunk-IBC5BABS.js";
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.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/DatePicker/DatePicker.tsx
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/DatePicker/DatePicker.module.css.bolio-css-module-source
+var DatePicker_module_css_default = { "datepicker": "DatePicker-module_datepicker__QDqg5", "input": "DatePicker-module_input__e7dhN", "toggle": "DatePicker-module_toggle__I8ARg", "popup": "DatePicker-module_popup__rGvVR" };
+
+// core/DatePicker/DatePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DatePickerComponent = React.forwardRef(
+  ({
+    value: customValue,
+    initialValue = null,
+    onChange,
+    min,
+    max,
+    locale,
+    weekStartsOn,
+    placeholder = "YYYY-MM-DD",
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    calendarLabel = "Choose date",
+    className = "",
+    onBlur,
+    ...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 selected = isControlled ? customValue : selfValue;
+    const selectedText = selected ? toISO(selected) : "";
+    const [text, setText] = useState(selectedText);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+      setText(selectedText);
+    }, [selectedText]);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    use_click_away_default(rootRef, () => setOpen(false));
+    const isInRange = (date) => !(min && date < startOfDay(min) || max && date > startOfDay(max));
+    const commit = (date) => {
+      if (!isControlled) setSelfValue(date);
+      if (onChange) onChange(date);
+    };
+    const inputHandler = (event) => {
+      const next = event.target.value;
+      setText(next);
+      if (next === "") return commit(null);
+      const date = fromISO(next);
+      if (date && isInRange(date)) commit(date);
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setText(selectedText);
+    };
+    const pick = (date) => {
+      var _a;
+      commit(date);
+      setText(toISO(date));
+      setOpen(false);
+      (_a = inputRef.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 datepickerStyle = {
+      "--datepicker-font-size": SCALES.font(0.875),
+      "--datepicker-input-height": SCALES.height(2.25),
+      "--datepicker-width": SCALES.width(1, "initial"),
+      "--datepicker-height": SCALES.height(1, "auto"),
+      "--datepicker-padding-top": SCALES.pt(0),
+      "--datepicker-padding-right": SCALES.pr(0),
+      "--datepicker-padding-bottom": SCALES.pb(0),
+      "--datepicker-padding-left": SCALES.pl(0),
+      "--datepicker-margin-top": SCALES.mt(0),
+      "--datepicker-margin-right": SCALES.mr(0),
+      "--datepicker-margin-bottom": SCALES.mb(0),
+      "--datepicker-margin-left": SCALES.ml(0),
+      "--datepicker-text-color": theme.palette.foreground,
+      "--datepicker-bg": theme.palette.background,
+      "--datepicker-border-color": theme.palette.border,
+      "--datepicker-radius": rounded ? "25px" : theme.layout.radius,
+      "--datepicker-popup-radius": theme.layout.radius,
+      "--datepicker-field-color": colors.color,
+      "--datepicker-field-bg": colors.bgColor,
+      "--datepicker-field-border": colors.borderColor,
+      "--datepicker-field-hover-bg": colors.hoverBgColor,
+      "--datepicker-field-hover-border": colors.hoverBorder,
+      "--datepicker-focus-border-color": colors.focusBorder,
+      "--datepicker-placeholder-color": colors.placeholderColor,
+      "--datepicker-toggle-color": colors.iconColor,
+      "--datepicker-toggle-hover-color": colors.color,
+      "--datepicker-toggle-disabled-color": colors.iconColor,
+      "--datepicker-shadow": theme.expressiveness.shadowMedium
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: use_classes_default(DatePicker_module_css_default.datepicker, className),
+        style: datepickerStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              autoComplete: "off",
+              inputMode: "numeric",
+              value: text,
+              placeholder,
+              disabled,
+              onChange: inputHandler,
+              onBlur: blurHandler,
+              className: DatePicker_module_css_default.input,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              className: DatePicker_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: DatePicker_module_css_default.popup,
+              onKeyDown: keyDownHandler,
+              children: /* @__PURE__ */ jsx(
+                Calendar_default,
+                {
+                  autoFocus: true,
+                  value: selected,
+                  min,
+                  max,
+                  locale,
+                  weekStartsOn,
+                  onChange: pick
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DatePickerComponent.displayName = "BolioUIDatePicker";
+var DatePicker = with_scale_default(DatePickerComponent);
+var DatePicker_default = DatePicker;
+
+// core/DatePicker/index.ts
+var DatePicker_default2 = DatePicker_default;
+
+export {
+  DatePicker_default2 as DatePicker_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-HKOESPKZ.js

@@ -0,0 +1,35 @@
+// core/utils/use-real-shape.ts
+import { useCallback, useEffect, useState } from "react";
+var getRealShape = (el) => {
+  const defaultShape = { width: 0, height: 0 };
+  if (!el || typeof window === "undefined") return defaultShape;
+  const rect = el.getBoundingClientRect();
+  const { width, height } = window.getComputedStyle(el);
+  const getCSSStyleVal = (str, parentNum) => {
+    if (!str) return 0;
+    const strVal = str.includes("px") ? +str.split("px")[0] : str.includes("%") ? +str.split("%")[0] * parentNum * 0.01 : str;
+    return Number.isNaN(+strVal) ? 0 : +strVal;
+  };
+  return {
+    width: getCSSStyleVal(`${width}`, rect.width),
+    height: getCSSStyleVal(`${height}`, rect.height)
+  };
+};
+var useRealShape = (ref) => {
+  const [state, setState] = useState({
+    width: 0,
+    height: 0
+  });
+  const update = useCallback(() => {
+    const { width, height } = getRealShape(ref.current);
+    setState({ width, height });
+  }, [ref]);
+  const element = ref.current;
+  useEffect(() => update(), [element, update]);
+  return [state, update];
+};
+var use_real_shape_default = useRealShape;
+
+export {
+  use_real_shape_default
+};

package/esm/chunk-I6WWABJN.js

@@ -0,0 +1,27 @@
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+
+// core/use-tabs/use-tabs.ts
+var useTabs = (initialValue) => {
+  const [state, setState, currentRef] = use_current_state_default(initialValue);
+  return {
+    state,
+    setState,
+    currentRef,
+    bindings: {
+      value: state,
+      onChange: (val) => {
+        setState(val);
+      }
+    }
+  };
+};
+var use_tabs_default = useTabs;
+
+// core/use-tabs/index.ts
+var use_tabs_default2 = use_tabs_default;
+
+export {
+  use_tabs_default2 as use_tabs_default
+};