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

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

package/esm/chunk-FSO65ZAH.js

@@ -0,0 +1,249 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
+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/Mention/Mention.tsx
+import React, {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Mention/Mention.module.css.bolio-css-module-source
+var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94" };
+
+// core/Mention/Mention.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getLabel = (option) => {
+  var _a;
+  return (_a = option.label) != null ? _a : option.value;
+};
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var MentionComponent = React.forwardRef(
+  ({
+    options,
+    trigger = "@",
+    value: customValue,
+    initialValue = "",
+    onChange,
+    onSelect,
+    placeholder,
+    rows = 3,
+    disabled = false,
+    type = "default",
+    emptyText = "No results",
+    className = "",
+    onKeyDown,
+    onBlur,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const surface = getSurface(theme);
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, type, disabled, {});
+    const baseId = useId();
+    const listId = `${baseId}-list`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const field = useRef(null);
+    const setRef = (node) => {
+      field.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const text = isControlled ? customValue : selfValue;
+    const [caret, setCaret] = useState(text.length);
+    const [dismissed, setDismissed] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const pendingCaret = useRef(null);
+    const token = useMemo(() => {
+      const t = escapeRegExp(trigger);
+      const match = new RegExp(`(^|\\s)${t}([^\\s${t}]*)$`).exec(
+        text.slice(0, caret)
+      );
+      return match ? { query: match[2], start: caret - match[2].length - trigger.length } : null;
+    }, [text, caret, trigger]);
+    const visible = useMemo(
+      () => token ? options.filter(
+        (option) => getLabel(option).toLowerCase().includes(token.query.toLowerCase())
+      ) : [],
+      [options, token]
+    );
+    const open = !!token && !dismissed && !disabled;
+    const expanded = open && visible.length > 0;
+    useEffect(() => {
+      setActiveIndex(
+        open ? visible.findIndex((option) => !option.disabled) : -1
+      );
+    }, [open, token == null ? void 0 : token.query]);
+    useEffect(() => {
+      var _a, _b;
+      if (activeIndex < 0) return;
+      (_b = (_a = document.getElementById(optionId(activeIndex))) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [activeIndex]);
+    useLayoutEffect(() => {
+      if (pendingCaret.current === null || !field.current) return;
+      field.current.setSelectionRange(
+        pendingCaret.current,
+        pendingCaret.current
+      );
+      pendingCaret.current = null;
+    }, [text]);
+    const update = (next) => {
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const choose = (option) => {
+      if (option.disabled || !token) return;
+      const inserted = `${trigger}${option.value} `;
+      const next = text.slice(0, token.start) + inserted + text.slice(caret);
+      const position = token.start + inserted.length;
+      pendingCaret.current = position;
+      setCaret(position);
+      update(next);
+      if (onSelect) onSelect(option);
+    };
+    const changeHandler = (event) => {
+      setCaret(event.target.selectionStart);
+      setDismissed(false);
+      update(event.target.value);
+    };
+    const move = (direction) => {
+      const count = visible.length;
+      let index = activeIndex;
+      for (let step = 0; step < count; step++) {
+        index = (index + direction + count) % count;
+        if (!visible[index].disabled) return setActiveIndex(index);
+      }
+    };
+    const keyDownHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented || !expanded) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        move(event.key === "ArrowDown" ? 1 : -1);
+      } else if ((event.key === "Enter" || event.key === "Tab") && activeIndex >= 0) {
+        event.preventDefault();
+        choose(visible[activeIndex]);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setDismissed(true);
+      }
+    };
+    const syncCaret = (event) => {
+      const next = event.currentTarget.selectionStart;
+      if (next !== caret) {
+        setCaret(next);
+        setDismissed(false);
+      }
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setDismissed(true);
+    };
+    const mentionStyle = {
+      "--mention-font-size": SCALES.font(0.875),
+      "--mention-width": SCALES.width(1, "100%"),
+      "--mention-height": SCALES.height(1, "auto"),
+      "--mention-margin-top": SCALES.mt(0),
+      "--mention-margin-right": SCALES.mr(0),
+      "--mention-margin-bottom": SCALES.mb(0),
+      "--mention-margin-left": SCALES.ml(0),
+      "--mention-text-color": theme.palette.foreground,
+      "--mention-bg": surface.bg,
+      "--mention-border-color": theme.palette.border,
+      "--mention-radius": theme.layout.radius,
+      "--mention-field-color": colors.color,
+      "--mention-field-bg": colors.bgColor,
+      "--mention-field-border": colors.borderColor,
+      "--mention-field-hover-bg": colors.hoverBgColor,
+      "--mention-field-hover-border": colors.hoverBorder,
+      "--mention-focus-border-color": colors.focusBorder,
+      "--mention-placeholder-color": colors.placeholderColor,
+      "--mention-shadow": surface.shadow,
+      "--mention-active-bg": surface.hover,
+      "--mention-empty-color": theme.palette.accents_5,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: use_classes_default(Mention_module_css_default.mention, className),
+        style: mentionStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: setRef,
+              "aria-autocomplete": "list",
+              "aria-controls": expanded ? listId : void 0,
+              "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              value: text,
+              rows,
+              placeholder,
+              disabled,
+              onChange: changeHandler,
+              onKeyDown: keyDownHandler,
+              onKeyUp: syncCaret,
+              onClick: syncCaret,
+              onSelect: syncCaret,
+              onBlur: blurHandler,
+              className: Mention_module_css_default.field,
+              ...props
+            }
+          ),
+          expanded && /* @__PURE__ */ jsx("ul", { id: listId, role: "listbox", className: Mention_module_css_default.list, children: visible.map((option, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": index === activeIndex,
+              "aria-disabled": option.disabled || void 0,
+              className: joinClasses(Mention_module_css_default.option, {
+                [Mention_module_css_default.active]: index === activeIndex,
+                [Mention_module_css_default.disabled]: option.disabled
+              }),
+              onMouseDown: (event) => {
+                event.preventDefault();
+                choose(option);
+              },
+              onMouseMove: () => !option.disabled && setActiveIndex(index),
+              children: getLabel(option)
+            },
+            option.value
+          )) }),
+          open && visible.length === 0 && /* @__PURE__ */ jsx("div", { className: Mention_module_css_default.empty, children: emptyText })
+        ]
+      }
+    );
+  }
+);
+MentionComponent.displayName = "BolioUIMention";
+var Mention = with_scale_default(MentionComponent);
+var Mention_default = Mention;
+
+// core/Mention/index.ts
+var Mention_default2 = Mention_default;
+
+export {
+  Mention_default2 as Mention_default
+};

package/esm/{chunk-2EYJZXS4.js → chunk-ICACLCJR.js}

@@ -6,10 +6,13 @@ import {
   fromISO,
   startOfDay,
   toISO
-} from "./chunk-P245HSVB.js";
+} from "./chunk-TLVSZCKU.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -52,6 +55,7 @@ var DatePickerComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const colors = getColors(theme.palette, type, disabled, {
       filled,
@@ -117,7 +121,8 @@ var DatePickerComponent = React.forwardRef(
       "--datepicker-margin-bottom": SCALES.mb(0),
       "--datepicker-margin-left": SCALES.ml(0),
       "--datepicker-text-color": theme.palette.foreground,
-      "--datepicker-bg": theme.palette.background,
+      "--datepicker-bg": surface.bg,
+      "--calendar-popup-hover": surface.hover,
       "--datepicker-border-color": theme.palette.border,
       "--datepicker-radius": rounded ? "25px" : theme.layout.radius,
       "--datepicker-popup-radius": theme.layout.radius,
@@ -131,7 +136,7 @@ var DatePickerComponent = React.forwardRef(
       "--datepicker-toggle-color": colors.iconColor,
       "--datepicker-toggle-hover-color": colors.color,
       "--datepicker-toggle-disabled-color": colors.iconColor,
-      "--datepicker-shadow": theme.expressiveness.shadowMedium
+      "--datepicker-shadow": surface.shadow
     };
     return /* @__PURE__ */ jsxs(
       "div",

package/esm/{chunk-XF4TPE2W.js → chunk-IL7L3BEL.js}

@@ -20,6 +20,9 @@ import {
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -319,6 +322,8 @@ var TooltipContent = ({
     [type, theme.palette, light, ghost, subtle]
   );
   const hasShadow = type === "default";
+  const surface = getSurface(theme);
+  const bgColor = hasShadow && colors.bgColor === theme.palette.background ? surface.bg : colors.bgColor;
   const classes = use_classes_default(
     "tooltip-content",
     TooltipContent_module_css_default.tooltipContent,
@@ -350,14 +355,14 @@ var TooltipContent = ({
   const contentStyle = {
     "--tooltip-icon-offset-x": iconOffset.x,
     "--tooltip-icon-offset-y": iconOffset.y,
-    "--tooltip-content-bg": colors.bgColor,
+    "--tooltip-content-bg": bgColor,
     top: rect.top,
     left: rect.left,
     transform: rect.transform,
     color: colors.color,
     border: `1px solid ${colors.borderColor}`,
     borderRadius: theme.layout.radius,
-    boxShadow: hasShadow ? theme.expressiveness.shadowMedium : "none",
+    boxShadow: hasShadow ? surface.shadow : "none",
     width: SCALES.width(1, "auto"),
     height: SCALES.height(1, "auto")
   };

package/esm/{chunk-MGHMAZRL.js → chunk-KRSISARC.js}

@@ -1,6 +1,9 @@
 import {
   getColors
 } from "./chunk-KBZEYKCZ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -50,6 +53,7 @@ var ComboboxComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const colors = getColors(theme.palette, type, disabled, {
       filled,
@@ -148,7 +152,7 @@ var ComboboxComponent = React.forwardRef(
       "--combobox-margin-bottom": SCALES.mb(0),
       "--combobox-margin-left": SCALES.ml(0),
       "--combobox-text-color": theme.palette.foreground,
-      "--combobox-bg": theme.palette.background,
+      "--combobox-bg": surface.bg,
       "--combobox-border-color": theme.palette.border,
       "--combobox-radius": rounded ? "25px" : theme.layout.radius,
       "--combobox-popup-radius": theme.layout.radius,
@@ -160,8 +164,8 @@ var ComboboxComponent = React.forwardRef(
       "--combobox-focus-border-color": colors.focusBorder,
       "--combobox-placeholder-color": colors.placeholderColor,
       "--combobox-disabled-color": theme.palette.accents_4,
-      "--combobox-shadow": theme.expressiveness.shadowMedium,
-      "--combobox-active-bg": theme.palette.accents_2,
+      "--combobox-shadow": surface.shadow,
+      "--combobox-active-bg": surface.hover,
       "--combobox-empty-color": theme.palette.accents_5
     };
     return /* @__PURE__ */ jsxs(

package/esm/{chunk-4QA7Z7VP.js → chunk-M64V32WO.js}

@@ -1,9 +1,12 @@
 import {
   Modal_default
-} from "./chunk-6ZBFUZSL.js";
+} from "./chunk-CU6SNPIM.js";
 import {
   Input_default
 } from "./chunk-NEG5UNM6.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_theme_default
 } from "./chunk-V5I4ORQQ.js";
@@ -97,7 +100,7 @@ var Command = ({
               "aria-selected": index === active,
               className: Command_module_css_default.item,
               style: {
-                backgroundColor: index === active ? theme.palette.accents_2 : void 0
+                backgroundColor: index === active ? getSurface(theme).hover : void 0
               },
               onMouseEnter: () => setActive(index),
               onClick: () => select(item),

package/esm/chunk-Q3I54DUS.js

@@ -0,0 +1,131 @@
+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/Toolbar/Toolbar.tsx
+import React, { useEffect, useRef } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Toolbar/Toolbar.module.css.bolio-css-module-source
+var Toolbar_module_css_default = { "toolbar": "Toolbar-module_toolbar__GZv6U", "vertical": "Toolbar-module_vertical__bTAsV", "separator": "Toolbar-module_separator__Gs9-M" };
+
+// core/Toolbar/Toolbar.tsx
+import { jsx } from "react/jsx-runtime";
+var ITEMS = "button, a[href], input, select, textarea";
+var ToolbarComponent = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    className = "",
+    children,
+    onKeyDown,
+    onFocus,
+    style,
+    ...props
+  }, innerRef) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const ref = useRef(null);
+    const current = useRef(null);
+    const getItems = () => {
+      var _a, _b;
+      return Array.from(
+        (_b = (_a = ref.current) == null ? void 0 : _a.querySelectorAll(ITEMS)) != null ? _b : []
+      ).filter(
+        (item) => !item.disabled && item.getAttribute("role") !== "separator"
+      );
+    };
+    useEffect(() => {
+      var _a;
+      const items = getItems();
+      const active = (_a = items.find((item) => item === current.current)) != null ? _a : items[0];
+      items.forEach(
+        (item) => item.setAttribute("tabindex", item === active ? "0" : "-1")
+      );
+    });
+    const setRef = (node) => {
+      ref.current = node;
+      if (typeof innerRef === "function") innerRef(node);
+      else if (innerRef) innerRef.current = node;
+    };
+    const focusHandler = (event) => {
+      if (onFocus) onFocus(event);
+      const items = getItems();
+      if (items.includes(event.target)) {
+        current.current = event.target;
+        items.forEach(
+          (item) => item.setAttribute("tabindex", item === event.target ? "0" : "-1")
+        );
+      }
+    };
+    const keyHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented) return;
+      const vertical = orientation === "vertical";
+      const items = getItems();
+      const index = items.indexOf(event.target);
+      if (index === -1) return;
+      let next = -1;
+      if (event.key === (vertical ? "ArrowDown" : "ArrowRight"))
+        next = (index + 1) % items.length;
+      else if (event.key === (vertical ? "ArrowUp" : "ArrowLeft"))
+        next = (index - 1 + items.length) % items.length;
+      else if (event.key === "Home") next = 0;
+      else if (event.key === "End") next = items.length - 1;
+      if (next === -1) return;
+      event.preventDefault();
+      items[next].focus();
+    };
+    const toolbarStyle = {
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--toolbar-border": theme.palette.border,
+      "--toolbar-radius": theme.layout.radius,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        role: "toolbar",
+        "aria-orientation": orientation,
+        className: use_classes_default(Toolbar_module_css_default.toolbar, Toolbar_module_css_default[orientation], className),
+        onKeyDown: keyHandler,
+        onFocus: focusHandler,
+        ...props,
+        style: toolbarStyle,
+        children
+      }
+    );
+  }
+);
+ToolbarComponent.displayName = "BolioUIToolbar";
+var Toolbar = with_scale_default(ToolbarComponent);
+var Toolbar_default = Toolbar;
+
+// core/Toolbar/ToolbarSeparator.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ToolbarSeparator = React2.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: use_classes_default(Toolbar_module_css_default.separator, className),
+    ...props
+  }
+));
+ToolbarSeparator.displayName = "BolioUIToolbarSeparator";
+var ToolbarSeparator_default = ToolbarSeparator;
+
+// core/Toolbar/index.ts
+Toolbar_default.Separator = ToolbarSeparator_default;
+var Toolbar_default2 = Toolbar_default;
+
+export {
+  Toolbar_default2 as Toolbar_default
+};