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

package/esm/chunk-YHEIC6EK.js

@@ -0,0 +1,102 @@
+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/Toggle/Toggle.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Toggle/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      bg: palette.success
+    },
+    primary: {
+      bg: palette.primary
+    },
+    secondary: {
+      bg: palette.secondary
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    },
+    info: {
+      bg: palette.info
+    }
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// core/Toggle/Toggle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToggleComponent = React.forwardRef(({
+  initialChecked = false,
+  checked,
+  disabled = false,
+  onChange,
+  type = "default",
+  className = "",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const [selfChecked, setSelfChecked] = useState(initialChecked);
+  const classes = use_classes_default("toggle", {
+    checked: selfChecked,
+    disabled
+  });
+  const changeHandle = useCallback((ev) => {
+    if (disabled) return;
+    const selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    setSelfChecked(!selfChecked);
+    if (onChange) onChange(selfEvent);
+  }, [disabled, selfChecked, onChange]);
+  const {
+    bg
+  } = useMemo(() => getColors(theme.palette, type), [theme.palette, type]);
+  useEffect(() => {
+    if (checked === void 0) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /* @__PURE__ */ jsxs("label", { ...props, className: _JSXStyle.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", role: "switch", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, checked: selfChecked, onChange: changeHandle, className: _JSXStyle.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) }),
+    /* @__PURE__ */ jsx("div", { className: _JSXStyle.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || ""), children: /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " inner" }) }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "951079252", dynamic: [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg], children: `label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:${disabled ? "not-allowed" : "pointer"};--toggle-font-size:${SCALES.font(1)};--toggle-height:${SCALES.height(1)};width:${SCALES.width(1.75)};height:var(--toggle-height);padding:${SCALES.pt(0.1875)} ${SCALES.pr(0)} ${SCALES.pb(0.1875)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}input.__jsx-style-dynamic-selector{overflow:hidden;height:0;margin:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}input.__jsx-style-dynamic-selector:focus-visible+.toggle.__jsx-style-dynamic-selector{outline:2px solid ${theme.palette.primary};outline-offset:2px;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:${theme.palette.accents_2};padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow: rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:${theme.palette.accents_1};}.disabled.__jsx-style-dynamic-selector{border-color:${theme.palette.accents_2};background-color:${theme.palette.accents_1};}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:${theme.palette.accents_2};}.disabled.checked.__jsx-style-dynamic-selector{border-color:${theme.palette.accents_4};background-color:${theme.palette.accents_4};}.checked.__jsx-style-dynamic-selector{background-color:${bg};}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}` })
+  ] });
+});
+ToggleComponent.displayName = "BolioUIToggle";
+var Toggle = with_scale_default(ToggleComponent);
+var Toggle_default = Toggle;
+
+// core/Toggle/index.ts
+var Toggle_default2 = Toggle_default;
+
+export {
+  Toggle_default2 as Toggle_default
+};

package/esm/chunk-YS5PWRS7.js

@@ -0,0 +1,288 @@
+import {
+  ModalContent_default,
+  ModalContext,
+  ModalSubtitle_default,
+  ModalTitle_default,
+  backdrop_default,
+  useModalContext,
+  use_body_scroll_default
+} from "./chunk-K53ERLS7.js";
+import {
+  use_keyboard_default
+} from "./chunk-F3AL4TQZ.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  Button_default
+} from "./chunk-6XJS3KMW.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  hasChild,
+  isChildElement,
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Modal/Modal.tsx
+import React4, {
+  useCallback,
+  useEffect as useEffect3,
+  useId,
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
+import { createPortal } from "react-dom";
+
+// core/Modal/ModalWrapper.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalWrapper = React.forwardRef(({
+  className = "",
+  children,
+  visible = false,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const modalContent = useRef(null);
+  useImperativeHandle(ref, () => modalContent.current);
+  const tabStart = useRef(null);
+  const tabEnd = useRef(null);
+  useEffect(() => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = isChildElement(modalContent.current, activeElement);
+    if (isChild) return;
+    if (tabStart.current) tabStart.current.focus();
+  }, [visible]);
+  const onKeyDown = (event) => {
+    const isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        if (tabEnd.current) tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        if (tabStart.current) tabStart.current.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(css_transition_default, { name: "wrapper", visible, clearTime: 300, children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown, ref: modalContent, ...props, className: _JSXStyle.dynamic([["356685991", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, "auto"), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || use_classes_default("wrapper", className) || ""), children: [
+    /* @__PURE__ */ jsx("div", { tabIndex: 0, "aria-hidden": "true", ref: tabStart, className: _JSXStyle.dynamic([["356685991", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, "auto"), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " hide-tab" }),
+    children,
+    /* @__PURE__ */ jsx("div", { tabIndex: 0, "aria-hidden": "true", ref: tabEnd, className: _JSXStyle.dynamic([["356685991", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, "auto"), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " hide-tab" }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "356685991", dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, "auto"), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:${theme.palette.background};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};opacity:0;outline:none;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);-webkit-transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, -webkit-transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;-webkit-transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;width:100%;font-size:${SCALES.font(1)};height:${SCALES.height(1, "auto")};--modal-wrapper-padding-left:${SCALES.pl(1.3125)};--modal-wrapper-padding-right:${SCALES.pr(1.3125)};padding:${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right) ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left);margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}` })
+  ] }) });
+});
+ModalWrapper.displayName = "BolioUIModalWrapper";
+var ModalWrapper_default = ModalWrapper;
+
+// core/Modal/ModalAction.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React2, { useImperativeHandle as useImperativeHandle2, useMemo, useRef as useRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ModalActionComponent = React2.forwardRef(function({
+  className = "",
+  children,
+  onClick,
+  passive = false,
+  disabled = false,
+  ...props
+}, ref) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const btnRef = useRef2(null);
+  const {
+    close
+  } = useModalContext();
+  useImperativeHandle2(ref, () => btnRef.current);
+  const clickHandler = (event) => {
+    if (disabled) return;
+    const actionEvent = Object.assign({}, event, {
+      close: () => close && close()
+    });
+    if (onClick) onClick(actionEvent);
+  };
+  const color = useMemo(() => {
+    return passive ? theme.palette.accents_5 : theme.palette.foreground;
+  }, [theme.palette, passive]);
+  const bgColor = useMemo(() => {
+    return disabled ? theme.palette.accents_1 : theme.palette.background;
+  }, [theme.palette, disabled]);
+  const {
+    className: resolveClassName,
+    styles
+  } = {
+    styles: /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1003252629", dynamic: [SCALES.font(0.75), color, theme.palette.background, SCALES.height(3.5625), disabled ? color : theme.palette.foreground, disabled ? bgColor : theme.palette.accents_1], children: `button.btn.__jsx-style-dynamic-selector{font-size:${SCALES.font(0.75)};border:none;color:${color};background-color:${theme.palette.background};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex:1;-ms-flex:1;flex:1;height:${SCALES.height(3.5625)};border-radius:0;min-width:0;}button.btn.__jsx-style-dynamic-selector:hover,button.btn.__jsx-style-dynamic-selector:focus{color:${disabled ? color : theme.palette.foreground};background-color:${disabled ? bgColor : theme.palette.accents_1};}` }),
+    className: _JSXStyle2.dynamic([["1003252629", [SCALES.font(0.75), color, theme.palette.background, SCALES.height(3.5625), disabled ? color : theme.palette.foreground, disabled ? bgColor : theme.palette.accents_1]]])
+  };
+  const classes = use_classes_default(resolveClassName, className);
+  const overrideProps = {
+    ...props,
+    effect: false,
+    ref: btnRef
+  };
+  return /* @__PURE__ */ jsxs2(Button_default, { className: classes, onClick: clickHandler, disabled, ...overrideProps, children: [
+    children,
+    styles
+  ] });
+});
+ModalActionComponent.displayName = "BolioUIModalAction";
+var ModalAction = with_scale_default(ModalActionComponent);
+var ModalAction_default = ModalAction;
+
+// core/Modal/ModalActions.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React3, { useEffect as useEffect2, useRef as useRef3, useState } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ModalActionsComponent = ({
+  children,
+  ...props
+}) => {
+  const theme = use_theme_default();
+  const ref = useRef3(null);
+  const [height, setHeight] = useState("auto");
+  useEffect2(() => {
+    if (!ref.current) return;
+    setHeight(`${ref.current.clientHeight}px`);
+  }, [ref]);
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { className: _JSXStyle3.dynamic([["2914444644", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]]]) }),
+    /* @__PURE__ */ jsx3("footer", { ref, ...props, className: _JSXStyle3.dynamic([["2914444644", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]]]) + " " + (props && props.className != null && props.className || ""), children }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "2914444644", dynamic: [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height], children: `footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:auto;position:absolute;bottom:0;left:0;right:0;border-top:1px solid ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};}footer.__jsx-style-dynamic-selector>button.btn + button.btn{border-left:1px solid ${theme.palette.border};}div.__jsx-style-dynamic-selector{height:${height};-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}` })
+  ] });
+};
+ModalActionsComponent.displayName = "BolioUIModalActions";
+var ModalActions = React3.memo(ModalActionsComponent);
+var ModalActions_default = ModalActions;
+
+// core/Modal/Modal.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ModalComponent = React4.forwardRef(
+  ({
+    visible: customVisible,
+    onClose,
+    children,
+    keyboard = true,
+    wrapClassName = "",
+    onContentClick,
+    disableBackdropClick = false,
+    positionClassName = "",
+    backdropClassName = "",
+    layerClassName = "",
+    role = "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby
+  }, ref) => {
+    const portal = use_portal_default("modal");
+    const baseId = useId();
+    const titleId = `${baseId}-title`;
+    const descriptionId = `${baseId}-description`;
+    const { SCALES } = use_scale_default();
+    const [, setBodyHidden] = use_body_scroll_default(null, { delayReset: 300 });
+    const [visible, setVisible] = useState2(false);
+    const [withoutActionsChildren, ActionsChildren] = pickChild(
+      children,
+      ModalAction_default
+    );
+    const hasActions = ActionsChildren && React4.Children.count(ActionsChildren) > 0;
+    const closeModal = useCallback(() => {
+      if (onClose) onClose();
+      setVisible(false);
+      setBodyHidden(false);
+    }, [onClose, setBodyHidden]);
+    useEffect3(() => {
+      if (typeof customVisible === "undefined") return;
+      setVisible(customVisible);
+      setBodyHidden(customVisible);
+    }, [customVisible, setBodyHidden]);
+    const { bindings } = use_keyboard_default(
+      () => {
+        if (keyboard) closeModal();
+      },
+      27 /* Escape */,
+      {
+        disableGlobalEvent: true
+      }
+    );
+    const closeFromBackdrop = () => {
+      if (disableBackdropClick) return;
+      closeModal();
+    };
+    const modalConfig = useMemo2(
+      () => ({
+        close: closeModal,
+        titleId,
+        descriptionId
+      }),
+      [closeModal, titleId, descriptionId]
+    );
+    if (!portal) return null;
+    return createPortal(
+      /* @__PURE__ */ jsx4(ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ jsx4(
+        backdrop_default,
+        {
+          onClick: closeFromBackdrop,
+          onContentClick,
+          visible,
+          width: SCALES.width(26),
+          positionClassName,
+          backdropClassName,
+          layerClassName,
+          ...bindings,
+          children: /* @__PURE__ */ jsxs4(
+            ModalWrapper_default,
+            {
+              ref,
+              visible,
+              className: wrapClassName,
+              role,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby || (hasChild(children, ModalTitle_default) ? titleId : void 0),
+              "aria-describedby": ariaDescribedby || (hasChild(children, ModalSubtitle_default) ? descriptionId : void 0),
+              children: [
+                withoutActionsChildren,
+                hasActions && /* @__PURE__ */ jsx4(ModalActions_default, { children: ActionsChildren })
+              ]
+            }
+          )
+        }
+      ) }),
+      portal
+    );
+  }
+);
+ModalComponent.displayName = "BolioUIModal";
+var Modal = with_scale_default(ModalComponent);
+var Modal_default = Modal;
+
+// core/Modal/index.ts
+Modal_default.Title = ModalTitle_default;
+Modal_default.Subtitle = ModalSubtitle_default;
+Modal_default.Content = ModalContent_default;
+Modal_default.Action = ModalAction_default;
+var Modal_default2 = Modal_default;
+
+export {
+  Modal_default2 as Modal_default
+};

package/esm/chunk-ZNNLYTW5.js

@@ -0,0 +1,64 @@
+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/Divider/Divider.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColor = (type, palette) => {
+  const colors = {
+    default: palette.border,
+    primary: palette.primaryLight,
+    secondary: palette.secondaryLight,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    info: palette.infoLight,
+    dark: palette.foreground,
+    lite: palette.accents_1
+  };
+  return colors[type];
+};
+var DividerComponent = React.forwardRef(({
+  type = "default",
+  align = "center",
+  children,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default("divider", className);
+  const color = useMemo(() => getColor(type, theme.palette), [type, theme.palette]);
+  const alignClassName = useMemo(() => {
+    if (!align || align === "center") return "";
+    if (align === "left" || align === "start") return "start";
+    return "end";
+  }, [align]);
+  const alignClasses = use_classes_default("text", alignClassName);
+  const textColor = type === "default" ? theme.palette.foreground : color;
+  return /* @__PURE__ */ jsxs("div", { ref, role: "separator", ...props, className: _JSXStyle.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    children && /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || ""), children }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "1488853092", dynamic: [color, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor], children: `.divider.__jsx-style-dynamic-selector{max-width:100%;background-color:${color};position:relative;font-size:${SCALES.font(1)};width:${SCALES.width(1, "auto")};height:${SCALES.height(0.0625)};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)};}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;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;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 0.75em;font-size:inherit;font-weight:bold;text-transform:capitalize;background-color:${theme.palette.background};color:${textColor};z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}` })
+  ] });
+});
+DividerComponent.displayName = "BolioUIDivider";
+var Divider = with_scale_default(DividerComponent);
+var Divider_default = Divider;
+
+// core/Divider/index.ts
+var Divider_default2 = Divider_default;
+
+export {
+  Divider_default2 as Divider_default
+};

package/esm/chunk-ZQ25CQCG.js

@@ -0,0 +1,153 @@
+import {
+  Tooltip_default
+} from "./chunk-CPIFYIT3.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  use_default_props_default
+} from "./chunk-BSDZWWUS.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  getReactNode
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Popover/Popover.tsx
+import _JSXStyle from "styled-jsx/style";
+import React2, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Popover/PopoverContext.ts
+import React, { useContext } from "react";
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: () => {
+  }
+};
+var PopoverContext = React.createContext(defaultContext);
+var usePopoverContext = () => useContext(PopoverContext);
+
+// core/Popover/Popover.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultProps = {
+  disableItemsAutoClose: false,
+  trigger: "click",
+  placement: "bottom",
+  portalClassName: "",
+  initialVisible: false,
+  hideArrow: false,
+  type: "default",
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: "",
+  onVisibleChange: (() => {
+  }),
+  visible: false
+};
+var PopoverComponent = React2.forwardRef((popoverProps, ref) => {
+  const {
+    content,
+    children,
+    trigger,
+    placement,
+    initialVisible,
+    portalClassName,
+    disableItemsAutoClose,
+    onVisibleChange,
+    visible: customVisible,
+    type = "default",
+    ...props
+  } = use_default_props_default(popoverProps, defaultProps);
+  const {
+    SCALES
+  } = use_scale_default();
+  const [visible, setVisible] = useState(initialVisible);
+  const textNode = useMemo(() => getReactNode(content), [content]);
+  const onPopoverVisibleChange = useCallback((next) => {
+    setVisible(next);
+    onVisibleChange(next);
+  }, [onVisibleChange]);
+  const onChildClick = useCallback(() => {
+    onPopoverVisibleChange(false);
+  }, [onPopoverVisibleChange]);
+  const value = useMemo(() => ({
+    onItemClick: onChildClick,
+    disableItemsAutoClose
+  }), [onChildClick, disableItemsAutoClose]);
+  const classes = use_classes_default("popover", portalClassName);
+  const latestChange = use_latest_default(onPopoverVisibleChange);
+  useEffect(() => {
+    if (customVisible === void 0) return;
+    latestChange.current(customVisible);
+  }, [customVisible, latestChange]);
+  return /* @__PURE__ */ jsxs(PopoverContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx(Tooltip_default, { ref, initialVisible: false, text: textNode, trigger, placement, portalClassName: classes, visible, type, onVisibleChange: onPopoverVisibleChange, ...props, children }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "340951371", dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)], children: `.tooltip-content.popover > .inner{padding:${SCALES.pt(0.9)} ${SCALES.pr(0)} ${SCALES.pb(0.9)} ${SCALES.pl(0)};}` })
+  ] });
+});
+PopoverComponent.displayName = "BolioUIPopover";
+var Popover = with_scale_default(PopoverComponent);
+var Popover_default = Popover;
+
+// core/Popover/PopoverItem.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PopoverItemComponent({
+  children,
+  line = false,
+  title = false,
+  className = "",
+  onClick,
+  disableAutoClose = false,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const {
+    disableItemsAutoClose,
+    onItemClick
+  } = usePopoverContext();
+  const hasHandler = Boolean(onClick);
+  const dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line;
+  const classes = use_classes_default("item", {
+    line,
+    title
+  }, className);
+  const clickHandler = (event) => {
+    if (onClick) onClick(event);
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+    onItemClick(event);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2("div", { onClick: clickHandler, ...props, className: _JSXStyle2.dynamic([["3536126017", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? "pointer" : "default", theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+      children,
+      /* @__PURE__ */ jsx2(_JSXStyle2, { id: "3536126017", dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? "pointer" : "default", theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.font(0.925), theme.palette.foreground], children: `.item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.accents_5};-webkit-transition: color, background-color 150ms linear;transition: color, background-color 150ms linear;line-height:1.25em;font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};padding:${SCALES.pt(0.5)} ${SCALES.pr(0.75)} ${SCALES.pb(0.5)} ${SCALES.pl(0.75)};cursor:${hasHandler ? "pointer" : "default"};}.item.__jsx-style-dynamic-selector:hover{color:${theme.palette.foreground};}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:${theme.palette.border};height:${SCALES.height(0.0625)};margin:${SCALES.mt(0.35)} ${SCALES.mr(0)} ${SCALES.mb(0.35)} ${SCALES.ml(0)};width:${SCALES.width(1, "100%")};}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:${SCALES.font(0.925)};color:${theme.palette.foreground};}` })
+    ] }),
+    title && /* @__PURE__ */ jsx2(PopoverItem, { line: true, title: false })
+  ] });
+}
+PopoverItemComponent.displayName = "BolioUIPopoverItem";
+var PopoverItem = with_scale_default(PopoverItemComponent);
+var PopoverItem_default = PopoverItem;
+
+// core/Popover/index.ts
+Popover_default.Item = PopoverItem_default;
+Popover_default.Option = PopoverItem_default;
+var Popover_default2 = Popover_default;
+
+export {
+  Popover_default2 as Popover_default
+};

package/esm/chunk-ZRORQ2WH.js

@@ -0,0 +1,14 @@
+// core/utils/use-latest.ts
+import { useEffect, useRef } from "react";
+var useLatest = (value) => {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+};
+var use_latest_default = useLatest;
+
+export {
+  use_latest_default
+};

package/esm/index.d.ts

@@ -56,10 +56,14 @@ export { default as Link } from './Link';
 export type { LinkProps } from './Link';
 export { default as Loading } from './Loading';
 export type { LoadingProps } from './Loading';
+export { default as Menu } from './Menu';
+export type { MenuProps, MenuItemProps, MenuCheckboxItemProps, MenuRadioItemProps, MenuRadioGroupProps, MenuLabelProps, MenuDividerProps, MenuSubProps } from './Menu';
 export { default as Modal } from './Modal';
 export type { ModalProps, ModalTitleProps, ModalSubtitleProps, ModalContentProps, ModalActionProps } from './Modal';
 export { default as Note } from './Note';
 export type { NoteProps } from './Note';
+export { default as NumberInput } from './NumberInput';
+export type { NumberInputProps } from './NumberInput';
 export { default as Page } from './Page';
 export type { PageProps, PageHeaderProps, PageContentProps, PageFooterProps } from './Page';
 export { default as Pagination } from './Pagination';
@@ -78,6 +82,8 @@ export { default as Section } from './Section';
 export type { SectionProps } from './Section';
 export { default as Select } from './Select';
 export type { SelectProps, SelectOptionProps } from './Select';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
 export { default as Slider } from './Slider';
 export type { SliderProps } from './Slider';
 export { default as Snippet } from './Snippet';
@@ -86,6 +92,8 @@ export { default as Spacer } from './Spacer';
 export type { SpacerProps } from './Spacer';
 export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
+export { default as Stepper } from './Stepper';
+export type { StepperProps, StepperOrientation, StepperStepProps } from './Stepper';
 export { default as Table } from './Table';
 export type { TableProps, TableColumnProps } from './Table';
 export { default as Tabs } from './Tabs';