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

package/esm/chunk-6BHDVSPB.js

@@ -0,0 +1,226 @@
+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-S62PPQHN.js";
+import {
+  hasChild,
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Fieldset/Fieldset.tsx
+import _JSXStyle5 from "styled-jsx/style";
+import React2, { useEffect, useMemo, useState } from "react";
+
+// core/Fieldset/FieldsetTitle.tsx
+import _JSXStyle from "styled-jsx/style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FieldsetTitle({
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = use_classes_default("title", className);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ...props, className: "jsx-4105044205 " + (props && props.className != null && props.className || classes || ""), children }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "4105044205", children: ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}" })
+  ] });
+}
+FieldsetTitle.displayName = "BolioUIFieldsetTitle";
+var FieldsetTitle_default = FieldsetTitle;
+
+// core/Fieldset/FieldsetSubtitle.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FieldsetSubtitle({
+  className = "",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("div", { ...props, className: "jsx-2265168013 " + (props && props.className != null && props.className || className || ""), children }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "2265168013", children: "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}" })
+  ] });
+}
+FieldsetSubtitle.displayName = "BolioUIFieldsetSubtitle";
+var FieldsetSubtitle_default = FieldsetSubtitle;
+
+// core/Fieldset/FieldsetFooter.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FieldsetFooterComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs3("footer", { ...props, className: _JSXStyle3.dynamic([["4117809613", [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    children,
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "4117809613", dynamic: [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `footer.__jsx-style-dynamic-selector{background-color:${theme.palette.accents_1};border-top:1px solid ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:${theme.palette.accents_6};padding:${theme.layout.gapHalf} ${theme.layout.gap};box-sizing:border-box;font-size:${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)};}` })
+  ] });
+}
+FieldsetFooterComponent.displayName = "BolioUIFieldsetFooter";
+var FieldsetFooter = with_scale_default(FieldsetFooterComponent);
+var FieldsetFooter_default = FieldsetFooter;
+
+// core/Fieldset/FieldsetContent.tsx
+import _JSXStyle4 from "styled-jsx/style";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function FieldsetContentComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default("content", className);
+  return /* @__PURE__ */ jsxs4("div", { ...props, className: _JSXStyle4.dynamic([["1553218241", [SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx4(_JSXStyle4, { id: "1553218241", dynamic: [SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.content.__jsx-style-dynamic-selector{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)};}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}` })
+  ] });
+}
+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 as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FieldsetComponent = React2.forwardRef(({
+  className = "",
+  title = "",
+  subtitle = "",
+  children,
+  value = "",
+  label = "",
+  ...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__ */ jsxs5(Fragment3, { children: [
+    withoutFooterChildren,
+    !hasTitle && title && /* @__PURE__ */ jsx5(FieldsetTitle_default, { children: title }),
+    !hasSubtitle && subtitle && /* @__PURE__ */ jsx5(FieldsetSubtitle_default, { children: subtitle })
+  ] }), [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
+  return /* @__PURE__ */ jsxs5("div", { ref, ...props, className: _JSXStyle5.dynamic([["1598137352", [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? "none" : "block", SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    hasContent ? content : /* @__PURE__ */ jsx5(FieldsetContent_default, { children: content }),
+    FooterChildren && FooterChildren,
+    /* @__PURE__ */ jsx5(_JSXStyle5, { id: "1598137352", dynamic: [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? "none" : "block", SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.fieldset.__jsx-style-dynamic-selector{background-color:${theme.palette.background};border:1px solid ${theme.palette.border};border-radius:${theme.layout.radius};overflow:hidden;display:${hidden ? "none" : "block"};font-size:${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)};}` })
+  ] });
+});
+FieldsetComponent.displayName = "BolioUIFieldset";
+var Fieldset = with_scale_default(FieldsetComponent);
+var Fieldset_default = Fieldset;
+
+// core/Fieldset/FieldsetGroup.tsx
+import _JSXStyle6 from "styled-jsx/style";
+import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function FieldsetGroupComponent({
+  className = "",
+  children,
+  value,
+  onChange,
+  ...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]);
+  return /* @__PURE__ */ jsx6(FieldsetContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs6("div", { ...props, className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ jsx6("div", { className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " group-tabs", children: items.map((item) => /* @__PURE__ */ jsx6("button", { onClick: () => clickHandle(item.value), className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + ((selfVal === item.value ? "active" : "") || ""), children: item.label }, item.value)) }),
+    /* @__PURE__ */ jsx6("div", { className: _JSXStyle6.dynamic([["4025768429", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " group-content", children }),
+    /* @__PURE__ */ jsx6(_JSXStyle6, { id: "4025768429", dynamic: [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius], children: `.group.__jsx-style-dynamic-selector{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, 0)} ${SCALES.ml(0)};}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:${SCALES.font(1)};margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${theme.palette.accents_3};background-color:${theme.palette.accents_1};font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ${theme.palette.border};-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:${theme.palette.background};color:${theme.palette.foreground};cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:${theme.layout.radius};}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:${theme.layout.radius};}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}` })
+  ] }) });
+}
+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
+};

package/esm/chunk-6XJS3KMW.js

@@ -0,0 +1,436 @@
+import {
+  use_default_props_default
+} from "./chunk-BSDZWWUS.js";
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+import {
+  addColorAlpha
+} from "./chunk-RZBEZ26A.js";
+import {
+  Loading_default
+} from "./chunk-BDEBNBW6.js";
+import {
+  useButtonGroupContext
+} from "./chunk-NDERASK2.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Button/Button.tsx
+import _JSXStyle5 from "styled-jsx/style";
+import React3, { useRef as useRef2, useState, useMemo, useImperativeHandle } from "react";
+
+// core/Button/ButtonDrip.tsx
+import _JSXStyle from "styled-jsx/style";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ButtonDrip = ({
+  x = 0,
+  y = 0,
+  color,
+  onCompleted
+}) => {
+  const dripRef = useRef(null);
+  const top = Number.isNaN(+y) ? 0 : y - 10;
+  const left = Number.isNaN(+x) ? 0 : x - 10;
+  useEffect(() => {
+    const drip = dripRef.current;
+    if (!drip) return;
+    drip.addEventListener("animationend", onCompleted);
+    return () => drip.removeEventListener("animationend", onCompleted);
+  });
+  return /* @__PURE__ */ jsxs("div", { ref: dripRef, className: "jsx-3424889537 drip", children: [
+    /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", style: {
+      top,
+      left
+    }, className: "jsx-3424889537", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", className: "jsx-3424889537", children: /* @__PURE__ */ jsx("g", { fill: color, className: "jsx-3424889537", children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", rx: "10", className: "jsx-3424889537" }) }) }) }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "3424889537", children: ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}" })
+  ] });
+};
+ButtonDrip.displayName = "BolioUItButtonDrip";
+var ButtonDrip_default = ButtonDrip;
+
+// core/Button/ButtonLoading.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ButtonLoading({
+  color
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "jsx-412966635 btn-loading", children: [
+    /* @__PURE__ */ jsx2(Loading_default, { color }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "412966635", children: ".btn-loading.jsx-412966635{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--bolio-ui-button-bg);}" })
+  ] });
+}
+ButtonLoading.displayName = "BolioUIButtonLoading";
+var ButtonLoading_default = ButtonLoading;
+
+// core/Button/utils.tsx
+import _JSXStyle4 from "styled-jsx/style";
+import React2 from "react";
+
+// core/Button/ButtonIcon.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ButtonIcon({
+  isRight = false,
+  isSingle,
+  children,
+  className = "",
+  ...props
+}) {
+  const classes = use_classes_default("icon", {
+    right: isRight,
+    single: isSingle
+  }, className);
+  return /* @__PURE__ */ jsxs3("span", { ...props, className: "jsx-2499243154 " + (props && props.className != null && props.className || classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "2499243154", children: ".icon.jsx-2499243154{position:absolute;left:var(--bolio-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--bolio-ui-button-color);z-index:1;}.right.jsx-2499243154{right:var(--bolio-ui-button-icon-padding);left:auto;}.icon.jsx-2499243154 svg{background:transparent;height:calc(var(--bolio-ui-button-height) / 2.35);width:calc(var(--bolio-ui-button-height) / 2.35);}.single.jsx-2499243154{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}" })
+  ] });
+}
+ButtonIcon.displayName = "BolioUIButtonIcon";
+var ButtonIcon_default = ButtonIcon;
+
+// core/Button/utils.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var getButtonChildrenWithIcon = (auto = false, children, icons) => {
+  const {
+    icon,
+    iconRight
+  } = icons;
+  const hasIcon = icon || iconRight;
+  const isRight = Boolean(iconRight);
+  const paddingForAutoMode = auto ? `calc(var(--bolio-ui-button-height) / 2 + var(--bolio-ui-button-icon-padding) * .5)` : 0;
+  const classes = use_classes_default("text", isRight ? "right" : "left");
+  if (!hasIcon) return /* @__PURE__ */ jsx4("div", { className: "text", children });
+  if (React2.Children.count(children) === 0) {
+    return /* @__PURE__ */ jsx4(ButtonIcon_default, { isRight, isSingle: true, children: hasIcon });
+  }
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4(ButtonIcon_default, { isRight, children: hasIcon }),
+    /* @__PURE__ */ jsxs4("div", { className: _JSXStyle4.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""), children: [
+      children,
+      /* @__PURE__ */ jsx4(_JSXStyle4, { id: "3568181479", dynamic: [paddingForAutoMode, paddingForAutoMode], children: `.left.__jsx-style-dynamic-selector{padding-left:${paddingForAutoMode};}.right.__jsx-style-dynamic-selector{padding-right:${paddingForAutoMode};}` })
+    ] })
+  ] });
+};
+var filterPropsWithGroup = (props, config) => {
+  if (!config.isButtonGroup) return props;
+  return {
+    ...props,
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  };
+};
+
+// core/Button/styles.ts
+var getButtonGhostColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "outline") : null;
+var getButtonLightColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "light") : null;
+var getButtonSubtleColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "subtle") : null;
+var getButtonColors = (palette, props) => {
+  const { type, disabled, ghost, subtle } = props;
+  const colors = {
+    default: {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.foreground
+    },
+    primary: {
+      bg: palette.primary,
+      border: palette.primary,
+      color: "#fff"
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.secondary,
+      color: "#fff"
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: "#fff"
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: "#fff"
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: "#fff"
+    },
+    info: {
+      bg: palette.info,
+      border: palette.info,
+      color: "#fff"
+    },
+    abort: {
+      bg: "transparent",
+      border: "transparent",
+      color: palette.accents_5
+    }
+  };
+  if (disabled)
+    return {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.accents_4
+    };
+  const withoutLightType = type == null ? void 0 : type.replace("-light", "");
+  const isLight = type == null ? void 0 : type.endsWith("-light");
+  const defaultColor = colors.default;
+  if (ghost)
+    return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  if (subtle)
+    return getButtonSubtleColors(palette, withoutLightType) || defaultColor;
+  if (isLight)
+    return getButtonLightColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = (palette, type) => {
+  const colors = {
+    primary: {
+      bg: palette.primary,
+      border: palette.background,
+      color: "white"
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.background,
+      color: "white"
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: "white"
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: "white"
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: "white"
+    },
+    info: {
+      bg: palette.info,
+      border: palette.background,
+      color: "white"
+    }
+  };
+  const withoutLightType = type.replace("-light", "");
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = (palette, props) => {
+  const { type, disabled, loading, shadow, ghost } = props;
+  const defaultColor = getButtonColors(palette, props);
+  const alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  const colors = {
+    default: {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    primary: {
+      bg: palette.background,
+      border: palette.primary
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.secondary
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    info: {
+      bg: palette.background,
+      border: palette.info
+    },
+    abort: {
+      bg: "transparent",
+      border: "transparent",
+      color: palette.accents_5
+    },
+    "primary-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "secondary-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "success-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "warning-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "error-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "info-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    }
+  };
+  if (disabled)
+    return {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: "#ccc"
+    };
+  if (loading)
+    return {
+      ...defaultColor,
+      color: "transparent"
+    };
+  if (shadow) return defaultColor;
+  const hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors.default;
+  return {
+    ...hoverColor,
+    color: hoverColor.color || hoverColor.border
+  };
+};
+var getButtonCursor = (disabled, loading) => {
+  if (disabled)
+    return {
+      cursor: "not-allowed",
+      events: "auto"
+    };
+  if (loading)
+    return {
+      cursor: "default",
+      events: "none"
+    };
+  return {
+    cursor: "pointer",
+    events: "auto"
+  };
+};
+var getButtonDripColor = (palette, props) => {
+  const { type, subtle } = props;
+  if (subtle) return addColorAlpha(getButtonColors(palette, props).color, 0.25);
+  const isLightHover = type == null ? void 0 : type.endsWith("light");
+  const hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
+};
+
+// core/Button/Button.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultProps = {
+  type: "default",
+  htmlType: "button",
+  ghost: false,
+  subtle: false,
+  rounded: false,
+  loading: false,
+  shadow: false,
+  auto: false,
+  effect: true,
+  disabled: false,
+  className: ""
+};
+var ButtonComponent = React3.forwardRef((btnProps, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const buttonRef = useRef2(null);
+  useImperativeHandle(ref, () => buttonRef.current);
+  const [dripShow, setDripShow] = useState(false);
+  const [dripX, setDripX] = useState(0);
+  const [dripY, setDripY] = useState(0);
+  const groupConfig = useButtonGroupContext();
+  const filteredProps = filterPropsWithGroup(use_default_props_default(btnProps, defaultProps), groupConfig);
+  const {
+    children,
+    disabled,
+    type,
+    loading,
+    shadow,
+    ghost,
+    subtle,
+    rounded,
+    effect,
+    onClick,
+    auto,
+    icon,
+    htmlType,
+    iconRight,
+    className,
+    ...props
+  } = filteredProps;
+  const {
+    bg,
+    border,
+    color
+  } = useMemo(() => getButtonColors(theme.palette, filteredProps), [theme.palette, filteredProps]);
+  const hover = useMemo(() => getButtonHoverColors(theme.palette, filteredProps), [theme.palette, filteredProps]);
+  const {
+    cursor,
+    events
+  } = useMemo(() => getButtonCursor(disabled, loading), [disabled, loading]);
+  const dripColor = useMemo(() => getButtonDripColor(theme.palette, filteredProps), [theme.palette, filteredProps]);
+  const dripCompletedHandle = () => {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  const clickHandler = (event) => {
+    if (disabled || loading) return;
+    const showDrip = effect;
+    if (showDrip && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    if (onClick) onClick(event);
+  };
+  const childrenWithIcon = useMemo(() => getButtonChildrenWithIcon(auto, children, {
+    icon,
+    iconRight
+  }), [auto, children, icon, iconRight]);
+  const [paddingLeft, paddingRight] = [auto ? SCALES.pl(1.15) : SCALES.pl(1.15), auto ? SCALES.pr(1.15) : SCALES.pr(1.15)];
+  return /* @__PURE__ */ jsxs5("button", { ref: buttonRef, type: htmlType, disabled, onClick: clickHandler, ...props, className: _JSXStyle5.dynamic([["2171430373", [rounded ? "25px" : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? "0 4px 10px 0" + bg : "none", SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? "min-content" : SCALES.width(10.5), auto ? "auto" : "initial", SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || use_classes_default("btn", className) || ""), children: [
+    loading && /* @__PURE__ */ jsx5(ButtonLoading_default, { color }),
+    childrenWithIcon,
+    dripShow && /* @__PURE__ */ jsx5(ButtonDrip_default, { x: dripX, y: dripY, color: dripColor, onCompleted: dripCompletedHandle }),
+    /* @__PURE__ */ jsx5(_JSXStyle5, { id: "2171430373", dynamic: [rounded ? "25px" : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? "0 4px 10px 0" + bg : "none", SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? "min-content" : SCALES.width(10.5), auto ? "auto" : "initial", SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events], children: `.btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:${rounded ? "25px" : theme.layout.radius};font-weight:bold;font-size:${SCALES.font(0.875)};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms;transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms;position:relative;overflow:hidden;color:${color};background-color:${bg};border:1px solid ${border};cursor:${cursor};pointer-events:${events};box-shadow:${shadow ? "0 4px 10px 0" + bg : "none"};--bolio-ui-button-icon-padding:${SCALES.pl(0.75)};--bolio-ui-button-height:${SCALES.height(2.5)};--bolio-ui-button-color:${color};--bolio-ui-button-bg:${bg};min-width:${auto ? "min-content" : SCALES.width(10.5)};width:${auto ? "auto" : "initial"};height:${SCALES.height(2.5)};padding:${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{cursor:${cursor};pointer-events:${events};}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}` })
+  ] });
+});
+ButtonComponent.displayName = "BolioUIButton";
+var Button = with_scale_default(ButtonComponent);
+var Button_default = Button;
+
+// core/Button/index.ts
+var Button_default2 = Button_default;
+
+export {
+  Button_default2 as Button_default
+};