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

package/esm/chunk-WFGUAR7K.js

@@ -0,0 +1,346 @@
+import {
+  use_real_shape_default
+} from "./chunk-HKOESPKZ.js";
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  setChildrenIndex
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Collapse/Collapse.tsx
+import React4, { useEffect as useEffect2, useId } from "react";
+
+// core/Collapse/CollapseIcon.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/CollapseIcon.module.css.bolio-css-module-source
+var CollapseIcon_module_css_default = { "svg": "CollapseIcon-module_svg__-RvD-" };
+
+// core/Collapse/CollapseIcon.tsx
+import { jsx } from "react/jsx-runtime";
+function CollapseIcon({ active }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: CollapseIcon_module_css_default.svg,
+      style: {
+        color: "currentColor",
+        transform: `rotateZ(${active ? "-180deg" : "0"})`
+      },
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+var MemoCollapseIcon = React.memo(CollapseIcon);
+var CollapseIcon_default = MemoCollapseIcon;
+
+// core/Shared/expand.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Expand({
+  isExpanded = false,
+  delay = 200,
+  children
+}) {
+  const [height, setHeight] = useState(isExpanded ? "auto" : "0");
+  const [selfExpanded, setSelfExpanded] = useState(isExpanded);
+  const [visible, setVisible] = useState(isExpanded);
+  const contentRef = useRef(null);
+  const entryTimer = useRef(void 0);
+  const leaveTimer = useRef(void 0);
+  const resetTimer = useRef(void 0);
+  const [state, updateShape] = use_real_shape_default(contentRef);
+  useEffect(() => setHeight(`${state.height}px`), [state.height]);
+  const latest = use_latest_default({ delay, shapeHeight: state.height });
+  useEffect(() => {
+    const { delay: delay2, shapeHeight } = latest.current;
+    if (isExpanded) {
+      setVisible(isExpanded);
+    } else {
+      updateShape();
+      setHeight(`${shapeHeight}px`);
+    }
+    entryTimer.current = window.setTimeout(() => {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30);
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(() => {
+        setHeight("auto");
+        clearTimeout(resetTimer.current);
+      }, delay2);
+    } else {
+      leaveTimer.current = window.setTimeout(() => {
+        setVisible(isExpanded);
+        clearTimeout(leaveTimer.current);
+      }, delay2 / 2);
+    }
+    return () => {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded, updateShape, latest]);
+  const containerStyle = {
+    padding: 0,
+    margin: 0,
+    overflow: "hidden",
+    transition: `height ${delay}ms ease`,
+    height: selfExpanded ? height : 0,
+    visibility: selfExpanded ? "visible" : visible ? "visible" : "hidden"
+  };
+  return /* @__PURE__ */ jsx2("div", { style: containerStyle, children: /* @__PURE__ */ jsx2("div", { ref: contentRef, children }) });
+}
+Expand.displayName = "BolioUIExpand";
+var expand_default = Expand;
+
+// core/Collapse/CollapseContext.ts
+import React3 from "react";
+var defaultContext = {
+  values: []
+};
+var CollapseContext = React3.createContext(defaultContext);
+var useCollapseContext = () => React3.useContext(CollapseContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/Collapse.module.css.bolio-css-module-source
+var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "trigger": "Collapse-module_trigger__0Q0YR", "label": "Collapse-module_label__tdCh3", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
+
+// core/Collapse/Collapse.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CollapseComponent = React4.forwardRef(
+  ({
+    children,
+    title,
+    subtitle,
+    initialVisible = false,
+    visible: controlledVisible,
+    onVisibleChange,
+    disabled = false,
+    shadow = false,
+    className = "",
+    index,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const { values, updateValues } = useCollapseContext();
+    const [selfVisible, setVisible, visibleRef] = use_current_state_default(initialVisible);
+    const isControlled = controlledVisible !== void 0;
+    const visible = isControlled ? controlledVisible : selfVisible;
+    const baseId = useId();
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    if (!title) {
+      log_warning_default('"title" is required.', "Collapse");
+    }
+    useEffect2(() => {
+      if (!values.length) return;
+      const isActive = !!values.find((item) => item === index);
+      setVisible(isActive);
+    }, [index, setVisible, values]);
+    const clickHandler = () => {
+      if (disabled) return;
+      const next = !(isControlled ? controlledVisible : visibleRef.current);
+      if (!isControlled) setVisible(next);
+      if (onVisibleChange) onVisibleChange(next);
+      if (updateValues) updateValues(index, next);
+    };
+    const collapseStyle = shadow ? {
+      boxShadow: theme.expressiveness.shadowSmall,
+      border: "none",
+      borderRadius: theme.layout.radius,
+      padding: theme.layout.gap,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    } : {
+      borderTop: `1px solid ${theme.palette.border}`,
+      borderBottom: `1px solid ${theme.palette.border}`,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default("collapse", className),
+        ...props,
+        style: { ...collapseStyle, ...style },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: Collapse_module_css_default.view,
+              onClick: clickHandler,
+              style: {
+                "--collapse-focus-color": theme.palette.primary,
+                cursor: disabled ? "not-allowed" : void 0
+              },
+              children: [
+                /* @__PURE__ */ jsx3("h3", { className: Collapse_module_css_default.title, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    id: triggerId,
+                    className: Collapse_module_css_default.trigger,
+                    "data-collapse-trigger": "",
+                    "aria-expanded": visible,
+                    "aria-controls": panelId,
+                    disabled,
+                    style: { color: theme.palette.foreground },
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { className: Collapse_module_css_default.label, children: title }),
+                      /* @__PURE__ */ jsx3(CollapseIcon_default, { active: visible })
+                    ]
+                  }
+                ) }),
+                subtitle && /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: Collapse_module_css_default.subtitle,
+                    style: { color: theme.palette.accents_5 },
+                    children: subtitle
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(expand_default, { isExpanded: visible, children: /* @__PURE__ */ jsx3(
+            "div",
+            {
+              id: panelId,
+              className: Collapse_module_css_default.content,
+              style: {
+                padding: `${SCALES.pt(0.6)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`
+              },
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+CollapseComponent.displayName = "BolioUICollapse";
+var Collapse = with_scale_default(CollapseComponent);
+var Collapse_default = Collapse;
+
+// core/Collapse/CollapseGroup.tsx
+import { useCallback, useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/CollapseGroup.module.css.bolio-css-module-source
+var CollapseGroup_module_css_default = { "collapseGroup": "CollapseGroup-module_collapseGroup__01F3X" };
+
+// core/Collapse/CollapseGroup.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CollapseGroupComponent({
+  children,
+  accordion = true,
+  className = "",
+  style,
+  onKeyDown,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const [state, setState, stateRef] = use_current_state_default([]);
+  const classes = use_classes_default(CollapseGroup_module_css_default.collapseGroup, className);
+  const updateValues = useCallback(
+    (currentIndex, nextState) => {
+      const hasChild = stateRef.current.find((val) => val === currentIndex);
+      if (accordion) {
+        if (nextState) return setState([currentIndex]);
+        return setState([]);
+      }
+      if (nextState) {
+        if (hasChild) return;
+        return setState([...stateRef.current, currentIndex]);
+      }
+      setState(stateRef.current.filter((item) => item !== currentIndex));
+    },
+    [accordion, stateRef, setState]
+  );
+  const initialValue = useMemo(
+    () => ({
+      values: state,
+      updateValues
+    }),
+    [state, updateValues]
+  );
+  const hasIndexChildren = useMemo(
+    () => setChildrenIndex(children, [Collapse_default]),
+    [children]
+  );
+  const keyDownHandler = (event) => {
+    if (onKeyDown) onKeyDown(event);
+    const { key } = event;
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return;
+    const triggers = Array.from(
+      event.currentTarget.querySelectorAll(
+        "[data-collapse-trigger]"
+      )
+    ).filter((trigger) => !trigger.disabled);
+    const current = triggers.indexOf(event.target);
+    if (current < 0) return;
+    event.preventDefault();
+    const last = triggers.length - 1;
+    const next = key === "Home" ? 0 : key === "End" ? last : key === "ArrowDown" ? (current + 1) % triggers.length : (current + last) % triggers.length;
+    triggers[next].focus();
+  };
+  const groupStyle = {
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0.6)} ${SCALES.pb(0)} ${SCALES.pl(0.6)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx4(CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: classes,
+      ...props,
+      onKeyDown: keyDownHandler,
+      style: groupStyle,
+      children: hasIndexChildren
+    }
+  ) });
+}
+CollapseGroupComponent.displayName = "BolioUICollapseGroup";
+var CollapseGroup = with_scale_default(CollapseGroupComponent);
+var CollapseGroup_default = CollapseGroup;
+
+// core/Collapse/index.ts
+Collapse_default.Group = CollapseGroup_default;
+var Collapse_default2 = Collapse_default;
+
+export {
+  Collapse_default2 as Collapse_default
+};

package/esm/chunk-WXW7BYE7.js

@@ -0,0 +1,297 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  hasChild,
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Fieldset/Fieldset.tsx
+import React2, { useEffect, useMemo, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Fieldset/FieldsetTitle.module.css.bolio-css-module-source
+var FieldsetTitle_module_css_default = { "title": "FieldsetTitle-module_title__B1QAm" };
+
+// core/Fieldset/FieldsetTitle.tsx
+import { jsx } from "react/jsx-runtime";
+function FieldsetTitle({
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = use_classes_default("title", FieldsetTitle_module_css_default.title, className);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+}
+FieldsetTitle.displayName = "BolioUIFieldsetTitle";
+var FieldsetTitle_default = FieldsetTitle;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Fieldset/FieldsetSubtitle.module.css.bolio-css-module-source
+var FieldsetSubtitle_module_css_default = { "subtitle": "FieldsetSubtitle-module_subtitle__h-9Hh" };
+
+// core/Fieldset/FieldsetSubtitle.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FieldsetSubtitle({
+  className = "",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: `${FieldsetSubtitle_module_css_default.subtitle} ${className}`.trim(), ...props, children });
+}
+FieldsetSubtitle.displayName = "BolioUIFieldsetSubtitle";
+var FieldsetSubtitle_default = FieldsetSubtitle;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Fieldset/FieldsetFooter.module.css.bolio-css-module-source
+var FieldsetFooter_module_css_default = { "footer": "FieldsetFooter-module_footer__UiJ17" };
+
+// core/Fieldset/FieldsetFooter.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FieldsetFooterComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const footerStyle = {
+    backgroundColor: theme.palette.accents_1,
+    borderTop: `1px solid ${theme.palette.border}`,
+    borderBottomLeftRadius: theme.layout.radius,
+    borderBottomRightRadius: theme.layout.radius,
+    color: theme.palette.accents_6,
+    fontSize: SCALES.font(0.875),
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(2.875),
+    padding: `${SCALES.pt(0.625)} ${SCALES.pr(1.31)} ${SCALES.pb(0.625)} ${SCALES.pl(1.31)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx3(
+    "footer",
+    {
+      className: `${FieldsetFooter_module_css_default.footer} ${className}`.trim(),
+      ...props,
+      style: footerStyle,
+      children
+    }
+  );
+}
+FieldsetFooterComponent.displayName = "BolioUIFieldsetFooter";
+var FieldsetFooter = with_scale_default(FieldsetFooterComponent);
+var FieldsetFooter_default = FieldsetFooter;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Fieldset/FieldsetContent.module.css.bolio-css-module-source
+var FieldsetContent_module_css_default = { "content": "FieldsetContent-module_content__x6tfV" };
+
+// core/Fieldset/FieldsetContent.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FieldsetContentComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const classes = use_classes_default("content", FieldsetContent_module_css_default.content, className);
+  const contentStyle = {
+    width: SCALES.width(1, "100%"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(1.3)} ${SCALES.pr(1.3)} ${SCALES.pb(1.3)} ${SCALES.pl(1.3)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx4("div", { className: classes, ...props, style: contentStyle, children });
+}
+FieldsetContentComponent.displayName = "BolioUIFieldsetContent";
+var FieldsetContent = with_scale_default(FieldsetContentComponent);
+var FieldsetContent_default = FieldsetContent;
+
+// core/Fieldset/FieldsetContext.ts
+import React from "react";
+var defaultContext = {
+  inGroup: false,
+  currentValue: ""
+};
+var FieldsetContext = React.createContext(defaultContext);
+var useFieldset = () => React.useContext(FieldsetContext);
+
+// core/Fieldset/Fieldset.tsx
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+var FieldsetComponent = React2.forwardRef(
+  ({
+    className = "",
+    title = "",
+    subtitle = "",
+    children,
+    value = "",
+    label = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const { inGroup, currentValue, register } = useFieldset();
+    const [hidden, setHidden] = useState(inGroup);
+    const classes = use_classes_default("fieldset", className);
+    const [withoutFooterChildren, FooterChildren] = pickChild(
+      children,
+      FieldsetFooter_default
+    );
+    const hasTitle = hasChild(withoutFooterChildren, FieldsetTitle_default);
+    const hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle_default);
+    const hasContent = hasChild(withoutFooterChildren, FieldsetContent_default);
+    if (inGroup) {
+      if (!label) {
+        log_warning_default(
+          'Props "label" is required when in a group.',
+          "Fieldset Group"
+        );
+      }
+      if (!value || value === "") {
+        value = label;
+      }
+    }
+    useEffect(() => {
+      if (!inGroup) return;
+      if (register) register({ value, label });
+    }, []);
+    useEffect(() => {
+      if (!inGroup) return;
+      if (!currentValue || currentValue === "") return;
+      setHidden(currentValue !== value);
+    }, [inGroup, currentValue, value]);
+    const content = useMemo(
+      () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        withoutFooterChildren,
+        !hasTitle && title && /* @__PURE__ */ jsx5(FieldsetTitle_default, { children: title }),
+        !hasSubtitle && subtitle && /* @__PURE__ */ jsx5(FieldsetSubtitle_default, { children: subtitle })
+      ] }),
+      [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]
+    );
+    const fieldsetStyle = {
+      backgroundColor: theme.palette.background,
+      border: `1px solid ${theme.palette.border}`,
+      borderRadius: theme.layout.radius,
+      overflow: "hidden",
+      display: hidden ? "none" : "block",
+      fontSize: SCALES.font(1),
+      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__ */ jsxs("div", { ref, className: classes, ...props, style: fieldsetStyle, children: [
+      hasContent ? content : /* @__PURE__ */ jsx5(FieldsetContent_default, { children: content }),
+      FooterChildren && FooterChildren
+    ] });
+  }
+);
+FieldsetComponent.displayName = "BolioUIFieldset";
+var Fieldset = with_scale_default(FieldsetComponent);
+var Fieldset_default = Fieldset;
+
+// core/Fieldset/FieldsetGroup.tsx
+import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Fieldset/FieldsetGroup.module.css.bolio-css-module-source
+var FieldsetGroup_module_css_default = { "groupTabs": "FieldsetGroup-module_groupTabs__p2Txr", "groupContent": "FieldsetGroup-module_groupContent__WavmJ", "button": "FieldsetGroup-module_button__kXAoU", "active": "FieldsetGroup-module_active__tJFHM" };
+
+// core/Fieldset/FieldsetGroup.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function FieldsetGroupComponent({
+  className = "",
+  children,
+  value,
+  onChange,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const [selfVal, setSelfVal] = useState2(value);
+  const [items, setItems, ref] = use_current_state_default([]);
+  const classes = use_classes_default("group", className);
+  const register = useCallback(
+    (newItem) => {
+      const hasItem = ref.current.find((item) => item.value === newItem.value);
+      if (hasItem) {
+        log_warning_default('The "value" of each "Fieldset" must be unique.', "Fieldset");
+      }
+      setItems([...ref.current, newItem]);
+    },
+    [ref, setItems]
+  );
+  const providerValue = useMemo2(
+    () => ({
+      currentValue: selfVal,
+      inGroup: true,
+      register
+    }),
+    [selfVal, register]
+  );
+  const clickHandle = useCallback(
+    (nextValue) => {
+      setSelfVal(nextValue);
+      if (onChange) onChange(nextValue);
+    },
+    [onChange]
+  );
+  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)}`,
+    "--fieldset-group-color": theme.palette.accents_3,
+    "--fieldset-group-bg": theme.palette.accents_1,
+    "--fieldset-group-border": theme.palette.border,
+    "--fieldset-group-radius": theme.layout.radius,
+    "--fieldset-group-active-bg": theme.palette.background,
+    "--fieldset-group-active-color": theme.palette.foreground,
+    ...style
+  };
+  return /* @__PURE__ */ jsx6(FieldsetContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs2("div", { className: classes, ...props, style: groupStyle, children: [
+    /* @__PURE__ */ jsx6("div", { className: FieldsetGroup_module_css_default.groupTabs, style: { fontSize: SCALES.font(1) }, children: items.map((item) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        onClick: () => clickHandle(item.value),
+        className: joinClasses(FieldsetGroup_module_css_default.button, {
+          [FieldsetGroup_module_css_default.active]: selfVal === item.value
+        }),
+        children: item.label
+      },
+      item.value
+    )) }),
+    /* @__PURE__ */ jsx6("div", { className: FieldsetGroup_module_css_default.groupContent, children })
+  ] }) });
+}
+FieldsetGroupComponent.displayName = "BolioUIFieldsetGroup";
+var FieldsetGroup = with_scale_default(FieldsetGroupComponent);
+var FieldsetGroup_default = FieldsetGroup;
+
+// core/Fieldset/index.ts
+Fieldset_default.Title = FieldsetTitle_default;
+Fieldset_default.Subtitle = FieldsetSubtitle_default;
+Fieldset_default.Footer = FieldsetFooter_default;
+Fieldset_default.Group = FieldsetGroup_default;
+Fieldset_default.Content = FieldsetContent_default;
+Fieldset_default.Body = FieldsetContent_default;
+var Fieldset_default2 = Fieldset_default;
+
+export {
+  Fieldset_default2 as Fieldset_default
+};