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

package/esm/chunk-CY5KTINE.js

@@ -0,0 +1,107 @@
+import {
+  getStatusColor
+} from "./chunk-26KDVRFS.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/Alert/Alert.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Alert/Alert.module.css.bolio-css-module-source
+var Alert_module_css_default = { "alert": "Alert-module_alert__Ghxl7", "icon": "Alert-module_icon__hcZdu", "body": "Alert-module_body__SuUYD", "title": "Alert-module_title__8yipK", "close": "Alert-module_close__ZPg5d" };
+
+// core/Alert/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AlertComponent = React.forwardRef(
+  ({
+    children,
+    type = "default",
+    title,
+    icon,
+    filled = false,
+    light = false,
+    subtle = false,
+    onClose,
+    closeLabel = "Close",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const { color, borderColor, bgColor } = useMemo(
+      () => getStatusColor(type, { filled, light, subtle }, theme),
+      [type, filled, light, subtle, theme]
+    );
+    const alertStyle = {
+      border: `1px solid ${borderColor}`,
+      color,
+      backgroundColor: bgColor,
+      borderRadius: theme.layout.radius,
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0.75)} ${SCALES.pr(1)} ${SCALES.pb(0.75)} ${SCALES.pl(1)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: type === "error" || type === "warning" ? "alert" : "status",
+        className: use_classes_default(Alert_module_css_default.alert, className),
+        ...props,
+        style: alertStyle,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: Alert_module_css_default.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: Alert_module_css_default.body, children: [
+            title && /* @__PURE__ */ jsx("div", { className: Alert_module_css_default.title, children: title }),
+            children
+          ] }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: Alert_module_css_default.close,
+              "aria-label": closeLabel,
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertComponent.displayName = "BolioUIAlert";
+var Alert = with_scale_default(AlertComponent);
+var Alert_default = Alert;
+
+// core/Alert/index.ts
+var Alert_default2 = Alert_default;
+
+export {
+  Alert_default2 as Alert_default
+};

package/esm/{chunk-IJGIEX5J.js → chunk-DEMQXB46.js}

@@ -11,6 +11,9 @@ import {
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -57,6 +60,7 @@ var ColorInputComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const generatedId = useId();
     const inputId = props.id || generatedId;
@@ -122,9 +126,9 @@ var ColorInputComponent = React.forwardRef(
       "--colorinput-focus-border": colors.focusBorder,
       "--colorinput-placeholder": colors.placeholderColor,
       "--colorinput-color": colors.color,
-      "--colorinput-popup-bg": theme.palette.background,
+      "--colorinput-popup-bg": surface.bg,
       "--colorinput-popup-border": theme.palette.border,
-      "--colorinput-shadow": theme.expressiveness.shadowMedium
+      "--colorinput-shadow": surface.shadow
     };
     return /* @__PURE__ */ jsxs(
       "div",

package/esm/{chunk-AVO2SK2I.js → chunk-DYYSUJ35.js}

@@ -1,6 +1,6 @@
 import {
   Menu_default
-} from "./chunk-XLPOECCE.js";
+} from "./chunk-FLUNRVVG.js";
 import {
   with_scale_default
 } from "./chunk-MAICNLTY.js";

package/esm/chunk-EUYSKHRS.js

@@ -0,0 +1,13 @@
+// core/utils/surface.ts
+var getSurface = (theme, shadow = theme.expressiveness.shadowMedium) => {
+  const dark = theme.type === "dark";
+  return {
+    bg: dark ? theme.palette.accents_3 : theme.palette.background,
+    hover: dark ? theme.palette.accents_4 : theme.palette.accents_2,
+    shadow: dark ? `0 2px 6px rgb(0 0 0 / 40%), ${shadow}` : shadow
+  };
+};
+
+export {
+  getSurface
+};

package/esm/chunk-FFEAKF3A.js

@@ -0,0 +1,220 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Splitter/Splitter.tsx
+import React2, { useId, useRef, useState } from "react";
+
+// core/Splitter/SplitterContext.ts
+import React from "react";
+var SplitterPanelContext = React.createContext(null);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Splitter/Splitter.module.css.bolio-css-module-source
+var Splitter_module_css_default = { "splitter": "Splitter-module_splitter__ZxGeO", "horizontal": "Splitter-module_horizontal__1LuP6", "vertical": "Splitter-module_vertical__APNTT", "panel": "Splitter-module_panel__UyXwt", "handle": "Splitter-module_handle__zkBUq" };
+
+// core/Splitter/Splitter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var initialSizes = (panels) => {
+  const given = panels.map((panel) => panel.props.defaultSize);
+  const used = given.reduce((sum, size) => sum + (size != null ? size : 0), 0);
+  const open = given.filter((size) => size === void 0).length;
+  return given.map(
+    (size) => size === void 0 ? Math.max(0, 100 - used) / open : size
+  );
+};
+var SplitterComponent = React2.forwardRef(
+  ({
+    direction = "horizontal",
+    onResize,
+    handleLabel = "Resize",
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const baseId = useId();
+    const panels = React2.Children.toArray(children).filter(
+      React2.isValidElement
+    );
+    const horizontal = direction === "horizontal";
+    const [sizes, setSizes] = useState(() => initialSizes(panels));
+    if (sizes.length !== panels.length) setSizes(initialSizes(panels));
+    const elements = useRef([]);
+    const drag = useRef(void 0);
+    const minOf = (index) => {
+      var _a;
+      return (_a = panels[index].props.minSize) != null ? _a : 0;
+    };
+    const maxOf = (index) => {
+      var _a;
+      return (_a = panels[index].props.maxSize) != null ? _a : 100;
+    };
+    const move = (index, delta, from) => {
+      const [a, b] = [from[index], from[index + 1]];
+      const low = Math.max(minOf(index) - a, b - maxOf(index + 1));
+      const high = Math.min(maxOf(index) - a, b - minOf(index + 1));
+      const applied = Math.min(Math.max(delta, low), high);
+      if (!applied && sizes[index] === a) return;
+      const next = [...from];
+      next[index] = a + applied;
+      next[index + 1] = b - applied;
+      setSizes(next);
+      if (onResize) onResize(next);
+    };
+    const pointerDown = (event) => {
+      var _a, _b;
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      const room = elements.current.reduce((sum, element) => {
+        const rect = element == null ? void 0 : element.getBoundingClientRect();
+        return sum + (rect ? horizontal ? rect.width : rect.height : 0);
+      }, 0);
+      drag.current = {
+        from: horizontal ? event.clientX : event.clientY,
+        sizes: [...sizes],
+        room
+      };
+    };
+    const pointerMove = (event, index) => {
+      var _a, _b;
+      const start = drag.current;
+      if (!start || !start.room) return;
+      if (!((_b = (_a = event.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId))) return;
+      const travelled = (horizontal ? event.clientX : event.clientY) - start.from;
+      move(index, travelled / start.room * 100, start.sizes);
+    };
+    const keyDown = (event, index) => {
+      const step = event.shiftKey ? 10 : 1;
+      const [less, more] = horizontal ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+      const deltas = {
+        [less]: -step,
+        [more]: step,
+        Home: -100,
+        End: 100
+      };
+      if (!(event.key in deltas)) return;
+      event.preventDefault();
+      move(index, deltas[event.key], sizes);
+    };
+    const template = sizes.map((size) => `minmax(0, ${size}fr)`).join(" auto ");
+    const splitterStyle = {
+      "--splitter-template": template,
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "100%"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--splitter-line": theme.palette.border,
+      "--splitter-active": theme.palette.primary,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Splitter_module_css_default.splitter, className, {
+          [Splitter_module_css_default.horizontal]: horizontal,
+          [Splitter_module_css_default.vertical]: !horizontal
+        }),
+        ...props,
+        style: splitterStyle,
+        children: panels.map((panel, index) => {
+          var _a;
+          const [a, b] = [sizes[index], sizes[index + 1]];
+          return /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SplitterPanelContext.Provider,
+              {
+                value: {
+                  id: `${baseId}-panel-${index}`,
+                  setElement: (element) => {
+                    elements.current[index] = element;
+                  }
+                },
+                children: panel
+              }
+            ),
+            index < panels.length - 1 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "separator",
+                tabIndex: 0,
+                "aria-label": handleLabel,
+                "aria-orientation": horizontal ? "vertical" : "horizontal",
+                "aria-controls": `${baseId}-panel-${index}`,
+                "aria-valuenow": Math.round(a),
+                "aria-valuemin": Math.round(
+                  Math.max(minOf(index), a + b - maxOf(index + 1))
+                ),
+                "aria-valuemax": Math.round(
+                  Math.min(maxOf(index), a + b - minOf(index + 1))
+                ),
+                className: joinClasses(Splitter_module_css_default.handle),
+                onPointerDown: pointerDown,
+                onPointerMove: (event) => pointerMove(event, index),
+                onPointerUp: () => drag.current = void 0,
+                onPointerCancel: () => drag.current = void 0,
+                onKeyDown: (event) => keyDown(event, index)
+              }
+            )
+          ] }, (_a = panel.key) != null ? _a : index);
+        })
+      }
+    );
+  }
+);
+SplitterComponent.displayName = "BolioUISplitter";
+var Splitter = with_scale_default(SplitterComponent);
+var Splitter_default = Splitter;
+
+// core/Splitter/SplitterPanel.tsx
+import React3, { useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SplitterPanel = React3.forwardRef(
+  ({
+    // read by the Splitter
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    defaultSize,
+    minSize,
+    maxSize,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const config = useContext(SplitterPanelContext);
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: (element) => {
+          config == null ? void 0 : config.setElement(element);
+          if (typeof ref === "function") ref(element);
+          else if (ref) ref.current = element;
+        },
+        id: config == null ? void 0 : config.id,
+        className: use_classes_default(Splitter_module_css_default.panel, className),
+        ...props,
+        style,
+        children
+      }
+    );
+  }
+);
+SplitterPanel.displayName = "BolioUISplitterPanel";
+var SplitterPanel_default = SplitterPanel;
+
+// core/Splitter/index.ts
+Splitter_default.Panel = SplitterPanel_default;
+var Splitter_default2 = Splitter_default;
+
+export {
+  Splitter_default2 as Splitter_default
+};

package/esm/{chunk-XLPOECCE.js → chunk-FLUNRVVG.js}

@@ -1,9 +1,12 @@
 import {
   dropdown_default
-} from "./chunk-AG2NWQYL.js";
+} from "./chunk-WCTANCLG.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -64,10 +67,11 @@ var MenuList = ({
   };
   useEffect(() => {
     var _a, _b;
-    if (focus === "list") return (_a = listRef.current) == null ? void 0 : _a.focus();
+    const options = { preventScroll: true };
+    if (focus === "list") return (_a = listRef.current) == null ? void 0 : _a.focus(options);
     const items = getItems();
     const target = focus === "first" ? items[0] : items[items.length - 1];
-    (_b = target != null ? target : listRef.current) == null ? void 0 : _b.focus();
+    (_b = target != null ? target : listRef.current) == null ? void 0 : _b.focus(options);
   }, []);
   const typeahead = (key, items, index) => {
     const now = Date.now();
@@ -129,13 +133,14 @@ var MenuList = ({
     const isCharacter = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
     if (isCharacter) typeahead(event.key, items, index);
   };
+  const surface = getSurface(theme);
   const listStyle = {
     "--menu-list-font-size": SCALES.font(0.875),
     "--menu-list-color": theme.palette.foreground,
-    "--menu-list-bg": theme.palette.background,
+    "--menu-list-bg": surface.bg,
     "--menu-list-border-color": theme.palette.border,
     "--menu-list-radius": theme.layout.radius,
-    "--menu-list-shadow": theme.expressiveness.shadowMedium
+    "--menu-list-shadow": surface.shadow
   };
   return /* @__PURE__ */ jsx(MenuListContext.Provider, { value: { openSub, setOpenSub }, children: /* @__PURE__ */ jsx(
     "div",
@@ -320,7 +325,7 @@ var MenuItemBase = React4.forwardRef(
     };
     const itemStyle = {
       "--menu-item-color": theme.palette.foreground,
-      "--menu-item-focus-bg": theme.palette.accents_2,
+      "--menu-item-focus-bg": getSurface(theme).hover,
       "--menu-item-error-color": theme.palette.error,
       "--menu-item-error-focus-bg": theme.palette.errorLight,
       "--menu-item-error-focus-color": theme.palette.errorDark,

package/esm/chunk-FQWH4PDK.js

@@ -0,0 +1,165 @@
+import {
+  getVariantColors
+} from "./chunk-GJZT47MP.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/Chip/Chip.tsx
+import React2, { useState } from "react";
+
+// core/Chip/ChipContext.ts
+import React from "react";
+var ChipContext = React.createContext(null);
+var useChipContext = () => React.useContext(ChipContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Chip/Chip.module.css.bolio-css-module-source
+var Chip_module_css_default = { "chip": "Chip-module_chip__r494r", "input": "Chip-module_input__GhNGk", "text": "Chip-module_text__sYRMh" };
+
+// core/Chip/Chip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChipComponent = React2.forwardRef(
+  ({
+    value,
+    checked: customChecked,
+    initialChecked = false,
+    onChange,
+    type = "primary",
+    disabled = false,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const group = useChipContext();
+    const [selfChecked, setSelfChecked] = useState(initialChecked);
+    const checked = group ? group.value.includes(value) : customChecked !== void 0 ? customChecked : selfChecked;
+    const changeHandler = (event) => {
+      if (group) {
+        if (group.toggle) group.toggle(value);
+        return;
+      }
+      setSelfChecked(event.target.checked);
+      if (onChange) onChange(event.target.checked);
+    };
+    const { bg, color, border } = getVariantColors(theme.palette, type, "light");
+    const chipStyle = {
+      height: SCALES.height(2),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--chip-color": theme.palette.accents_6,
+      "--chip-border": theme.palette.accents_3,
+      "--chip-hover-bg": theme.palette.accents_1,
+      "--chip-checked-bg": bg,
+      "--chip-checked-color": color,
+      "--chip-checked-border": border,
+      "--chip-focus": theme.palette[type],
+      ...style
+    };
+    return /* @__PURE__ */ jsxs("label", { className: use_classes_default(Chip_module_css_default.chip, className), style: chipStyle, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: group && !group.multiple ? "radio" : "checkbox",
+          className: Chip_module_css_default.input,
+          name: group == null ? void 0 : group.name,
+          value,
+          checked,
+          disabled: disabled || (group == null ? void 0 : group.disabled),
+          onChange: changeHandler,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: Chip_module_css_default.text, children: [
+        checked && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            width: "14",
+            height: "14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m5 12 5 5L20 7" })
+          }
+        ),
+        children
+      ] })
+    ] });
+  }
+);
+ChipComponent.displayName = "BolioUIChip";
+var Chip = with_scale_default(ChipComponent);
+var Chip_default = Chip;
+
+// core/Chip/ChipGroup.tsx
+import React3, { useId, useMemo, useState as useState2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Chip/ChipGroup.module.css.bolio-css-module-source
+var ChipGroup_module_css_default = { "group": "ChipGroup-module_group__6ARIk" };
+
+// core/Chip/ChipGroup.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChipGroup = React3.forwardRef(
+  ({
+    value: customValue,
+    initialValue = [],
+    onChange,
+    multiple = false,
+    disabled = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const name = useId();
+    const [selfValue, setSelfValue] = useState2(initialValue);
+    const value = customValue !== void 0 ? customValue : selfValue;
+    const providerValue = useMemo(
+      () => ({
+        name,
+        multiple,
+        value,
+        disabled,
+        toggle: (chip) => {
+          const next = !multiple ? [chip] : value.includes(chip) ? value.filter((v) => v !== chip) : [...value, chip];
+          setSelfValue(next);
+          if (onChange) onChange(next);
+        }
+      }),
+      [name, multiple, value, disabled, onChange]
+    );
+    return /* @__PURE__ */ jsx2(ChipContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref,
+        role: multiple ? "group" : "radiogroup",
+        className: use_classes_default(ChipGroup_module_css_default.group, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ChipGroup.displayName = "BolioUIChipGroup";
+var ChipGroup_default = ChipGroup;
+
+// core/Chip/index.ts
+Chip_default.Group = ChipGroup_default;
+var Chip_default2 = Chip_default;
+
+export {
+  Chip_default2 as Chip_default
+};