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

package/esm/chunk-E5EDUOQT.js

@@ -0,0 +1,373 @@
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  addColorAlpha
+} from "./chunk-RZBEZ26A.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/Pagination/Pagination.tsx
+import React5, { useCallback as useCallback2, useEffect, useMemo as useMemo3 } from "react";
+
+// core/Pagination/PaginationItem.tsx
+import { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Pagination/PaginationItem.module.css.bolio-css-module-source
+var PaginationItem_module_css_default = { "li": "PaginationItem-module_li__luFDz", "button": "PaginationItem-module_button__MvU4S", "active": "PaginationItem-module_active__XzmCN", "disabled": "PaginationItem-module_disabled__NDjJA" };
+
+// core/Pagination/PaginationItem.tsx
+import { jsx } from "react/jsx-runtime";
+function PaginationItem({
+  active,
+  children,
+  disabled,
+  onClick,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const [hover, activeHover] = useMemo(
+    () => [
+      addColorAlpha(theme.palette.primary, 0.1),
+      addColorAlpha(theme.palette.primary, 0.8)
+    ],
+    [theme.palette.primary]
+  );
+  const classes = use_classes_default(PaginationItem_module_css_default.button, {
+    [PaginationItem_module_css_default.active]: active,
+    [PaginationItem_module_css_default.disabled]: disabled
+  });
+  const clickHandler = (event) => {
+    if (disabled) return;
+    if (onClick) onClick(event);
+  };
+  const buttonStyle = {
+    "--pagination-color": theme.palette.primary,
+    "--pagination-radius": theme.layout.radius,
+    "--pagination-bg": theme.palette.background,
+    "--pagination-hover-bg": hover,
+    "--pagination-active-bg": theme.palette.primary,
+    "--pagination-active-color": theme.palette.background,
+    "--pagination-active-shadow": theme.expressiveness.shadowSmall,
+    "--pagination-active-hover-bg": activeHover,
+    "--pagination-active-hover-shadow": theme.expressiveness.shadowMedium,
+    "--pagination-disabled-color": theme.palette.accents_4,
+    "--pagination-disabled-hover-bg": theme.palette.accents_2,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("li", { className: PaginationItem_module_css_default.li, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: classes,
+      "aria-current": active ? "page" : void 0,
+      onClick: clickHandler,
+      ...props,
+      style: buttonStyle,
+      children
+    }
+  ) });
+}
+PaginationItem.displayName = "BolioUIPaginationItem";
+var PaginationItem_default = PaginationItem;
+
+// core/Pagination/PaginationContext.ts
+import React2 from "react";
+var defaultContext = {};
+var PaginationContext = React2.createContext(defaultContext);
+var usePaginationContext = () => React2.useContext(PaginationContext);
+
+// core/Pagination/PaginationPrevious.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PaginationPrevious({ children, ...props }) {
+  const { update, isFirst } = usePaginationContext();
+  return /* @__PURE__ */ jsx2(
+    PaginationItem_default,
+    {
+      onClick: () => update && update("prev"),
+      disabled: isFirst,
+      ...props,
+      children
+    }
+  );
+}
+PaginationPrevious.displayName = "BolioUIPaginationPrevious";
+var PaginationPrevious_default = PaginationPrevious;
+
+// core/Pagination/PaginationNext.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PaginationNext({ children, ...props }) {
+  const { update, isLast } = usePaginationContext();
+  return /* @__PURE__ */ jsx3(
+    PaginationItem_default,
+    {
+      onClick: () => update && update("next"),
+      disabled: isLast,
+      ...props,
+      children
+    }
+  );
+}
+PaginationNext.displayName = "BolioUIPaginationNext";
+var PaginationNext_default = PaginationNext;
+
+// core/Pagination/PaginationPages.tsx
+import { useCallback, useMemo as useMemo2 } from "react";
+
+// core/Pagination/PaginationEllipsis.tsx
+import { useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Pagination/PaginationEllipsis.module.css.bolio-css-module-source
+var PaginationEllipsis_module_css_default = { "svg": "PaginationEllipsis-module_svg__2Fipb" };
+
+// core/Pagination/PaginationEllipsis.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function PaginationEllipsis({ isBefore, onClick }) {
+  const [showMore, setShowMore] = useState(false);
+  return /* @__PURE__ */ jsx4(
+    PaginationItem_default,
+    {
+      onClick: (e) => onClick && onClick(e),
+      onMouseEnter: () => setShowMore(true),
+      onMouseLeave: () => setShowMore(false),
+      children: showMore ? /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: PaginationEllipsis_module_css_default.svg,
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none",
+          shapeRendering: "geometricPrecision",
+          style: { transform: `rotate(${isBefore ? "180deg" : "0deg"})` },
+          children: [
+            /* @__PURE__ */ jsx4("path", { d: "M13 17l5-5-5-5" }),
+            /* @__PURE__ */ jsx4("path", { d: "M6 17l5-5-5-5" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: PaginationEllipsis_module_css_default.svg,
+          viewBox: "0 0 24 24",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none",
+          shapeRendering: "geometricPrecision",
+          children: [
+            /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+            /* @__PURE__ */ jsx4("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" }),
+            /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" })
+          ]
+        }
+      )
+    }
+  );
+}
+PaginationEllipsis.displayName = "BolioUIPaginationEllipsis";
+var PaginationEllipsis_default = PaginationEllipsis;
+
+// core/Pagination/PaginationPages.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function PaginationPages({ limit, count, current, setPage }) {
+  const showPages = useMemo2(() => {
+    const oddLimit = limit % 2 === 0 ? limit - 1 : limit;
+    return oddLimit - 2;
+  }, [limit]);
+  const middleNumber = (showPages + 1) / 2;
+  const [showBeforeEllipsis, showAfterEllipsis] = useMemo2(() => {
+    const showEllipsis = count > limit;
+    return [
+      showEllipsis && current > middleNumber + 1,
+      showEllipsis && current < count - middleNumber
+    ];
+  }, [current, middleNumber, count, limit]);
+  const pagesArray = useMemo2(() => [...new Array(showPages)], [showPages]);
+  const renderItem = useCallback(
+    (value, active) => /* @__PURE__ */ jsx5(
+      PaginationItem_default,
+      {
+        active: value === active,
+        onClick: () => setPage(value),
+        children: value
+      },
+      `pagination-item-${value}`
+    ),
+    [setPage]
+  );
+  const startPages = pagesArray.map((_, index) => {
+    const value = index + 2;
+    return renderItem(value, current);
+  });
+  const middlePages = pagesArray.map((_, index) => {
+    const middleIndexNumber = middleNumber - (index + 1);
+    const value = current - middleIndexNumber;
+    return /* @__PURE__ */ jsx5(
+      PaginationItem_default,
+      {
+        active: index + 1 === middleNumber,
+        onClick: () => setPage(value),
+        children: value
+      },
+      `pagination-middle-${index}`
+    );
+  });
+  const endPages = pagesArray.map((_, index) => {
+    const value = count - (showPages - index);
+    return renderItem(value, current);
+  });
+  if (count <= limit) {
+    return /* @__PURE__ */ jsx5(Fragment, { children: [...new Array(count)].map((_, index) => {
+      const value = index + 1;
+      return /* @__PURE__ */ jsx5(
+        PaginationItem_default,
+        {
+          active: value === current,
+          onClick: () => setPage(value),
+          children: value
+        },
+        `pagination-item-${value}`
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    renderItem(1, current),
+    showBeforeEllipsis && /* @__PURE__ */ jsx5(
+      PaginationEllipsis_default,
+      {
+        isBefore: true,
+        onClick: () => setPage((last) => last - 5 >= 1 ? last - 5 : 1)
+      },
+      "pagination-ellipsis-before"
+    ),
+    showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages,
+    showAfterEllipsis && /* @__PURE__ */ jsx5(
+      PaginationEllipsis_default,
+      {
+        onClick: () => setPage((last) => last + 5 <= count ? last + 5 : count)
+      },
+      "pagination-ellipsis-after"
+    ),
+    renderItem(count, current)
+  ] });
+}
+PaginationPages.displayName = "BolioUIPaginationPages";
+var PaginationPages_default = PaginationPages;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Pagination/Pagination.module.css.bolio-css-module-source
+var Pagination_module_css_default = { "list": "Pagination-module_list__7wh2a", "nav": "Pagination-module_nav__di9oF" };
+
+// core/Pagination/Pagination.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var PaginationComponent = React5.forwardRef(
+  ({
+    page: customPage,
+    initialPage = 1,
+    count = 1,
+    limit = 7,
+    children,
+    onChange,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const { SCALES } = use_scale_default();
+    const [page, setPage, pageRef] = use_current_state_default(initialPage);
+    const [, prevChildren] = pickChild(children, PaginationPrevious_default);
+    const [, nextChildren] = pickChild(children, PaginationNext_default);
+    const [prevItem, nextItem] = useMemo3(() => {
+      const hasChildren = (c) => React5.Children.count(c) > 0;
+      const prevDefault = /* @__PURE__ */ jsx6(PaginationPrevious_default, { children: "prev" });
+      const nextDefault = /* @__PURE__ */ jsx6(PaginationNext_default, { children: "next" });
+      return [
+        hasChildren(prevChildren) ? prevChildren : prevDefault,
+        hasChildren(nextChildren) ? nextChildren : nextDefault
+      ];
+    }, [prevChildren, nextChildren]);
+    const update = useCallback2(
+      (type) => {
+        if (type === "prev" && pageRef.current > 1) {
+          setPage((last) => last - 1);
+        }
+        if (type === "next" && pageRef.current < count) {
+          setPage((last) => last + 1);
+        }
+      },
+      [count, pageRef, setPage]
+    );
+    const values = useMemo3(
+      () => ({
+        isFirst: page <= 1,
+        isLast: page >= count,
+        update
+      }),
+      [page, count, update]
+    );
+    useEffect(() => {
+      if (onChange) onChange(page);
+    }, [onChange, page]);
+    useEffect(() => {
+      if (customPage !== void 0) {
+        setPage(customPage);
+      }
+    }, [customPage, setPage]);
+    const navStyle = {
+      "--pagination-size": SCALES.font(2),
+      fontSize: SCALES.font(0.875),
+      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)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsx6(PaginationContext.Provider, { value: values, children: /* @__PURE__ */ jsx6(
+      "nav",
+      {
+        ref,
+        className: `${Pagination_module_css_default.nav} ${className}`.trim(),
+        "aria-label": "Pagination",
+        ...props,
+        style: navStyle,
+        children: /* @__PURE__ */ jsxs3("ul", { className: Pagination_module_css_default.list, children: [
+          prevItem,
+          /* @__PURE__ */ jsx6(
+            PaginationPages_default,
+            {
+              count,
+              current: page,
+              limit,
+              setPage
+            }
+          ),
+          nextItem
+        ] })
+      }
+    ) });
+  }
+);
+PaginationComponent.displayName = "BolioUIPagination";
+var Pagination = with_scale_default(PaginationComponent);
+var Pagination_default = Pagination;
+
+// core/Pagination/index.ts
+Pagination_default.Previous = PaginationPrevious_default;
+Pagination_default.Next = PaginationNext_default;
+var Pagination_default2 = Pagination_default;
+
+export {
+  Pagination_default2 as Pagination_default
+};

package/esm/chunk-EAHIBHMI.js

@@ -0,0 +1,250 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.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/Checkbox/Checkbox.tsx
+import React3, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Checkbox/CheckboxContext.ts
+import React from "react";
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false,
+  values: []
+};
+var CheckboxContext = React.createContext(defaultContext);
+var useCheckbox = () => React.useContext(CheckboxContext);
+
+// core/Checkbox/CheckboxIcon.tsx
+import React2 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Checkbox/CheckboxIcon.module.css.bolio-css-module-source
+var CheckboxIcon_module_css_default = { "svg": "CheckboxIcon-module_svg__-DjXx" };
+
+// core/Checkbox/CheckboxIcon.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+function CheckboxIconComponent({ fill: propsFill, disabled, checked }) {
+  const { SCALES } = use_scale_default();
+  const iconStyle = {
+    height: SCALES.font(1),
+    width: SCALES.font(1),
+    opacity: disabled ? 0.4 : 1,
+    cursor: disabled ? "not-allowed" : "pointer"
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: checked ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: CheckboxIcon_module_css_default.svg, style: iconStyle, children: /* @__PURE__ */ jsx(
+    "g",
+    {
+      stroke: propsFill,
+      strokeWidth: "0.5",
+      fill: "none",
+      fillRule: "evenodd",
+      children: /* @__PURE__ */ jsx("g", { fill: propsFill, children: /* @__PURE__ */ jsx("path", { d: "M18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 L18.25,3 Z M18.25,4.5 L5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 Z M10,14.4393398 L16.4696699,7.96966991 C16.7625631,7.6767767 17.2374369,7.6767767 17.5303301,7.96966991 C17.7965966,8.23593648 17.8208027,8.65260016 17.6029482,8.94621165 L17.5303301,9.03033009 L10.5303301,16.0303301 C10.2640635,16.2965966 9.84739984,16.3208027 9.55378835,16.1029482 L9.46966991,16.0303301 L6.46966991,13.0303301 C6.1767767,12.7374369 6.1767767,12.2625631 6.46966991,11.9696699 C6.73593648,11.7034034 7.15260016,11.6791973 7.44621165,11.8970518 L7.53033009,11.9696699 L10,14.4393398 L16.4696699,7.96966991 L10,14.4393398 Z" }) })
+    }
+  ) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: CheckboxIcon_module_css_default.svg, style: iconStyle, children: /* @__PURE__ */ jsx(
+    "g",
+    {
+      stroke: propsFill,
+      strokeWidth: "0.5",
+      fill: "none",
+      fillRule: "evenodd",
+      children: /* @__PURE__ */ jsx("g", { fill: propsFill, children: /* @__PURE__ */ jsx("path", { d: "M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z" }) })
+    }
+  ) }) });
+}
+CheckboxIconComponent.displayName = "BolioUICheckboxIcon";
+var CheckboxIcon = React2.memo(CheckboxIconComponent);
+var CheckboxIcon_default = CheckboxIcon;
+
+// core/Checkbox/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: palette.foreground,
+    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/Checkbox/Checkbox.module.css.bolio-css-module-source
+var Checkbox_module_css_default = { "checkbox": "Checkbox-module_checkbox__5lSba", "text": "Checkbox-module_text__Kms0E", "input": "Checkbox-module_input__v6eip" };
+
+// core/Checkbox/Checkbox.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CheckboxComponent = React3.forwardRef(
+  ({
+    checked,
+    initialChecked = false,
+    disabled = false,
+    onChange,
+    className = "",
+    children,
+    type = "default",
+    value = "",
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [selfChecked, setSelfChecked] = useState(initialChecked);
+    const { updateState, inGroup, disabledAll, values } = useCheckbox();
+    const isDisabled = inGroup ? disabledAll || disabled : disabled;
+    const classes = use_classes_default(Checkbox_module_css_default.checkbox, className);
+    if (inGroup && checked) {
+      log_warning_default(
+        'Remove props "checked" when [Checkbox] component is in the group.',
+        "Checkbox"
+      );
+    }
+    useEffect(() => {
+      if (!inGroup) return;
+      const next = values.includes(value);
+      if (next === selfChecked) return;
+      setSelfChecked(next);
+    }, [inGroup, selfChecked, value, values]);
+    const fill = useMemo(
+      () => getColors(theme.palette, type),
+      [theme.palette, type]
+    );
+    const changeHandle = useCallback(
+      (ev) => {
+        if (isDisabled) return;
+        const selfEvent = {
+          target: {
+            checked: !selfChecked
+          },
+          stopPropagation: ev.stopPropagation,
+          preventDefault: ev.preventDefault,
+          nativeEvent: ev
+        };
+        if (inGroup && updateState) {
+          if (updateState) updateState(value, !selfChecked);
+        }
+        setSelfChecked(!selfChecked);
+        if (onChange) onChange(selfEvent);
+      },
+      [isDisabled, selfChecked, inGroup, updateState, onChange, value]
+    );
+    useEffect(() => {
+      if (checked === void 0) return;
+      setSelfChecked(checked);
+    }, [checked]);
+    const checkboxStyle = {
+      "--checkbox-size": SCALES.font(1),
+      "--checkbox-focus-color": theme.palette.primary,
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      opacity: isDisabled ? 0.75 : 1,
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "var(--checkbox-size)"),
+      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)}`
+    };
+    return /* @__PURE__ */ jsxs("label", { className: classes, style: checkboxStyle, children: [
+      /* @__PURE__ */ jsx2(CheckboxIcon_default, { fill, disabled: isDisabled, checked: selfChecked }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          disabled: isDisabled,
+          checked: selfChecked,
+          onChange: changeHandle,
+          ...props,
+          className: Checkbox_module_css_default.input
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: Checkbox_module_css_default.text,
+          style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+          children
+        }
+      )
+    ] });
+  }
+);
+CheckboxComponent.displayName = "BolioUICheckbox";
+var Checkbox = with_scale_default(CheckboxComponent);
+var Checkbox_default = Checkbox;
+
+// core/Checkbox/CheckboxGroup.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Checkbox/CheckboxGroup.module.css.bolio-css-module-source
+var CheckboxGroup_module_css_default = { "group": "CheckboxGroup-module_group__a5y2d" };
+
+// core/Checkbox/CheckboxGroup.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var noValue = [];
+function CheckboxGroupComponent({
+  disabled = false,
+  onChange,
+  value,
+  children,
+  className = "",
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const [selfVal, setSelfVal] = useState2([]);
+  const classes = use_classes_default(CheckboxGroup_module_css_default.group, className);
+  if (!value) {
+    value = noValue;
+    log_warning_default('Props "value" is required.', "Checkbox Group");
+  }
+  const updateState = useCallback2(
+    (val, checked) => {
+      const removed = selfVal.filter((v) => v !== val);
+      const next = checked ? [...removed, val] : removed;
+      setSelfVal(next);
+      if (onChange) onChange(next);
+    },
+    [selfVal, onChange]
+  );
+  const providerValue = useMemo2(() => {
+    return {
+      updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      values: selfVal
+    };
+  }, [updateState, disabled, selfVal]);
+  useEffect2(() => {
+    setSelfVal(value);
+  }, [value]);
+  const groupStyle = {
+    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)}`,
+    "--checkbox-group-gap": `calc(${SCALES.font(1)} * 2)`,
+    "--checkbox-group-item-size": SCALES.font(1),
+    ...style
+  };
+  return /* @__PURE__ */ jsx3(CheckboxContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx3("div", { className: classes, ...props, style: groupStyle, children }) });
+}
+CheckboxGroupComponent.displayName = "BolioUICheckboxGroup";
+var CheckboxGroup = with_scale_default(CheckboxGroupComponent);
+var CheckboxGroup_default = CheckboxGroup;
+
+// core/Checkbox/index.ts
+Checkbox_default.Group = CheckboxGroup_default;
+var Checkbox_default2 = Checkbox_default;
+
+export {
+  Checkbox_default2 as Checkbox_default
+};