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

package/esm/chunk-5JAYTLFV.js

@@ -0,0 +1,227 @@
+import {
+  use_real_shape_default
+} from "./chunk-HKOESPKZ.js";
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  setChildrenIndex
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Collapse/Collapse.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React4, { useEffect as useEffect2 } from "react";
+
+// core/Collapse/CollapseIcon.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CollapseIcon({
+  active
+}) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", style: {
+    color: "currentColor"
+  }, className: _JSXStyle.dynamic([["2249786880", [active ? "-180deg" : "0"]]]), children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", className: _JSXStyle.dynamic([["2249786880", [active ? "-180deg" : "0"]]]) }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2249786880", dynamic: [active ? "-180deg" : "0"], children: `svg.__jsx-style-dynamic-selector{-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;-webkit-transform:rotateZ(${active ? "-180deg" : "0"});-ms-transform:rotateZ(${active ? "-180deg" : "0"});transform:rotateZ(${active ? "-180deg" : "0"});width:1.5em;height:1.5em;}` })
+  ] });
+}
+var MemoCollapseIcon = React.memo(CollapseIcon);
+var CollapseIcon_default = MemoCollapseIcon;
+
+// core/Shared/expand.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } 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);
+  const classes = use_classes_default("container", {
+    expanded: selfExpanded
+  });
+  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]);
+  return /* @__PURE__ */ jsxs2("div", { className: _JSXStyle2.dynamic([["1918690829", [visible ? "visible" : "hidden", delay, height]]]) + " " + (classes || ""), children: [
+    /* @__PURE__ */ jsx2("div", { ref: contentRef, className: _JSXStyle2.dynamic([["1918690829", [visible ? "visible" : "hidden", delay, height]]]) + " content", children }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1918690829", dynamic: [visible ? "visible" : "hidden", delay, height], children: `.container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:${visible ? "visible" : "hidden"};-webkit-transition:height ${delay}ms ease;transition:height ${delay}ms ease;}.expanded.__jsx-style-dynamic-selector{height:${height};visibility:visible;}` })
+  ] });
+}
+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);
+
+// core/Collapse/Collapse.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CollapseComponent = React4.forwardRef(({
+  children,
+  title,
+  subtitle,
+  initialVisible = false,
+  shadow = false,
+  className = "",
+  index,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const {
+    values,
+    updateValues
+  } = useCollapseContext();
+  const [visible, setVisible, visibleRef] = use_current_state_default(initialVisible);
+  const classes = use_classes_default("collapse", {
+    shadow
+  }, className);
+  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 = () => {
+    const next = !visibleRef.current;
+    setVisible(next);
+    if (updateValues) updateValues(index, next);
+  };
+  const keyDownHandler = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    clickHandler();
+  };
+  return /* @__PURE__ */ jsxs3("div", { ref, ...props, className: _JSXStyle3.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ jsxs3("div", { role: "button", tabIndex: 0, "aria-expanded": visible, onClick: clickHandler, onKeyDown: keyDownHandler, className: _JSXStyle3.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " view", children: [
+      /* @__PURE__ */ jsxs3("div", { className: _JSXStyle3.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " title", children: [
+        /* @__PURE__ */ jsx3("h3", { className: _JSXStyle3.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]), children: title }),
+        " ",
+        /* @__PURE__ */ jsx3(CollapseIcon_default, { active: visible })
+      ] }),
+      subtitle && /* @__PURE__ */ jsx3("div", { className: _JSXStyle3.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " subtitle", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx3(expand_default, { isExpanded: visible, children: /* @__PURE__ */ jsx3("div", { className: _JSXStyle3.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " content", children }) }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "1468217834", dynamic: [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)], children: `.collapse.__jsx-style-dynamic-selector{border-top:1px solid ${theme.palette.border};border-bottom:1px solid ${theme.palette.border};font-size:${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)};}.shadow.__jsx-style-dynamic-selector{box-shadow:${theme.expressiveness.shadowSmall};border:none;border-radius:${theme.layout.radius};padding:${theme.layout.gap};}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.view.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ${theme.palette.primary};outline-offset:4px;}.title.__jsx-style-dynamic-selector{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;color:${theme.palette.foreground};}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;font-size:1.5em;}.subtitle.__jsx-style-dynamic-selector{color:${theme.palette.accents_5};margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.6em;padding:${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)};}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}` })
+  ] });
+});
+CollapseComponent.displayName = "BolioUICollapse";
+var Collapse = with_scale_default(CollapseComponent);
+var Collapse_default = Collapse;
+
+// core/Collapse/CollapseGroup.tsx
+import _JSXStyle4 from "styled-jsx/style";
+import { useCallback, useMemo } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function CollapseGroupComponent({
+  children,
+  accordion = true,
+  className = "",
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  const [state, setState, stateRef] = use_current_state_default([]);
+  const classes = use_classes_default("collapse-group", 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]);
+  return /* @__PURE__ */ jsx4(CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsxs4("div", { ...props, className: _JSXStyle4.dynamic([["1712563073", [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    hasIndexChildren,
+    /* @__PURE__ */ jsx4(_JSXStyle4, { id: "1712563073", dynamic: [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.collapse-group.__jsx-style-dynamic-selector{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)};}.collapse-group.__jsx-style-dynamic-selector>div + div{border-top:none;}` })
+  ] }) });
+}
+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-5KUROAEP.js

@@ -0,0 +1,39 @@
+// core/use-classes/use-classes.ts
+var classObjectToString = (className) => {
+  const keys = Object.keys(className);
+  const len = keys.length;
+  let str = "";
+  for (let index = 0; index < len; index++) {
+    const key = keys[index];
+    const val = className[keys[index]];
+    if (!val) continue;
+    str = str ? `${str} ${String(key)}` : String(key);
+  }
+  return str;
+};
+var isObjectClassName = (value) => typeof value === "object" && !Array.isArray(value);
+var joinClasses = (...classNames) => {
+  const len = classNames.length;
+  let classes = "";
+  if (len === 0) return classes;
+  for (let index = 0; index < len; index++) {
+    const val = classNames[index];
+    if (!val) continue;
+    if (isObjectClassName(val)) {
+      classes += ` ${classObjectToString(val)}`;
+    } else {
+      classes += ` ${String(val).trim()}`;
+    }
+  }
+  return classes.trim();
+};
+var useClasses = joinClasses;
+var use_classes_default = useClasses;
+
+// core/use-classes/index.ts
+var use_classes_default2 = use_classes_default;
+
+export {
+  joinClasses,
+  use_classes_default2 as use_classes_default
+};

package/esm/chunk-5KWSYI7C.js

@@ -0,0 +1,143 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  hasChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Page/Page.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React, { useEffect, useMemo, useState } from "react";
+
+// core/Page/PageContent.tsx
+import _JSXStyle from "styled-jsx/style";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageContentComponent({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs("main", { ...props, className: _JSXStyle.dynamic([["1765662596", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), 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 || className || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "1765662596", dynamic: [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), 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: `main.__jsx-style-dynamic-selector{font-size:${SCALES.font(1)};width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "100%")};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)};}` })
+  ] });
+}
+PageContentComponent.displayName = "BolioUIPageContent";
+var PageContent = with_scale_default(PageContentComponent);
+var PageContent_default = PageContent;
+
+// core/Page/Page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DotStyles = ({
+  dotSpace,
+  dotSize
+}) => {
+  const background = useMemo(() => ({
+    position: `calc(${dotSpace} * 25px)`,
+    size: `calc(${dotSpace} * 50px)`
+  }), [dotSpace]);
+  return /* @__PURE__ */ jsx2("span", { className: _JSXStyle2.dynamic([["4292652034", [dotSize, dotSize, background.position, background.position, background.size, background.size]]]), children: /* @__PURE__ */ jsx2(_JSXStyle2, { id: "4292652034", dynamic: [dotSize, dotSize, background.position, background.position, background.size, background.size], children: `body{background-image: radial-gradient(#e3e3e3 ${dotSize},transparent 0), radial-gradient(#e3e3e3 ${dotSize},transparent 0);background-position: 0 0, ${background.position} ${background.position};background-attachment:fixed;background-size:${background.size} ${background.size};}` }) });
+};
+var PageComponent = React.forwardRef(({
+  children,
+  render = "default",
+  dotBackdrop = false,
+  className,
+  dotSize = "1px",
+  dotSpace = 1,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const showDot = useMemo(() => {
+    if (theme.type === "dark") return false;
+    return dotBackdrop;
+  }, [dotBackdrop, theme.type]);
+  const [preventRender, setPreventRender] = useState(render !== "default");
+  useEffect(() => {
+    setPreventRender(false);
+  }, []);
+  if (preventRender) {
+    const renderSEO = render === "effect-seo";
+    if (!renderSEO) return null;
+    return /* @__PURE__ */ jsxs2("div", { "aria-hidden": "true", className: "jsx-1746763067 hidden", children: [
+      children,
+      /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1746763067", children: ".hidden.jsx-1746763067{opacity:0;display:none;}" })
+    ] });
+  }
+  const hasContent = hasChild(children, PageContent_default);
+  return /* @__PURE__ */ jsxs2("section", { ref, ...props, className: _JSXStyle2.dynamic([["891651194", [SCALES.font(1), SCALES.width(1, "calc(100% - 100pt)"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(1.34), SCALES.pb(0), SCALES.pl(1.34), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto")]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    hasContent ? children : /* @__PURE__ */ jsx2(PageContent_default, { children }),
+    showDot && /* @__PURE__ */ jsx2(DotStyles, { dotSize, dotSpace }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "891651194", dynamic: [SCALES.font(1), SCALES.width(1, "calc(100% - 100pt)"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(1.34), SCALES.pb(0), SCALES.pl(1.34), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto")], children: `section.__jsx-style-dynamic-selector{max-width:100vw;min-height:100vh;box-sizing:border-box;position:relative;font-size:${SCALES.font(1)};height:${SCALES.height(1, "auto")};-webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;min-height:100vh;}` })
+  ] });
+});
+PageComponent.displayName = "BolioUIPage";
+var Page = with_scale_default(PageComponent);
+var Page_default = Page;
+
+// core/Page/PageHeader.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PageHeaderComponent({
+  children,
+  center = false,
+  className = "",
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default({
+    center
+  }, className);
+  return /* @__PURE__ */ jsxs3("header", { ...props, className: _JSXStyle3.dynamic([["3497030820", [SCALES.font(1), SCALES.width(1, "100%"), 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: [
+    children,
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "3497030820", dynamic: [SCALES.font(1), SCALES.width(1, "100%"), 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: `header.__jsx-style-dynamic-selector{font-size:${SCALES.font(1)};width:${SCALES.width(1, "100%")};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)};}.center.__jsx-style-dynamic-selector{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;}` })
+  ] });
+}
+PageHeaderComponent.displayName = "BolioUIPageHeader";
+var PageHeader = with_scale_default(PageHeaderComponent);
+var PageHeader_default = PageHeader;
+
+// core/Page/PageFooter.tsx
+import _JSXStyle4 from "styled-jsx/style";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PageFooterComponent({
+  children,
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs4("footer", { ...props, className: _JSXStyle4.dynamic([["4216345865", [SCALES.font(1), SCALES.width(1, "100%"), 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 || ""), children: [
+    children,
+    /* @__PURE__ */ jsx4(_JSXStyle4, { id: "4216345865", dynamic: [SCALES.font(1), SCALES.width(1, "100%"), 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: `footer.__jsx-style-dynamic-selector{font-size:${SCALES.font(1)};width:${SCALES.width(1, "100%")};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)};}` })
+  ] });
+}
+PageFooterComponent.displayName = "BolioUIPageFooter";
+var PageFooter = with_scale_default(PageFooterComponent);
+var PageFooter_default = PageFooter;
+
+// core/Page/index.ts
+Page_default.Header = PageHeader_default;
+Page_default.Content = PageContent_default;
+Page_default.Body = PageContent_default;
+Page_default.Footer = PageFooter_default;
+var Page_default2 = Page_default;
+
+export {
+  Page_default2 as Page_default
+};

package/esm/chunk-5W4MJC2K.js

@@ -0,0 +1,55 @@
+import {
+  useProportions
+} from "./chunk-UF4IKEU2.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/Capacity/Capacity.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColor = (val, palette) => {
+  if (val < 33) return palette.info;
+  if (val < 66) return palette.warning;
+  return palette.errorDark;
+};
+var CapacityComponent = React.forwardRef(({
+  value = 0,
+  limit = 100,
+  color: userColor,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const percentValue = useProportions(value, limit);
+  const classes = use_classes_default("capacity", className);
+  const color = useMemo(() => {
+    if (userColor && userColor !== "") return userColor;
+    return getColor(percentValue, theme.palette);
+  }, [userColor, percentValue, theme.palette]);
+  return /* @__PURE__ */ jsxs("div", { ref, title: `${percentValue}%`, ...props, className: _JSXStyle.dynamic([["3030733389", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["3030733389", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "3030733389", dynamic: [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color], children: `.capacity.__jsx-style-dynamic-selector{width:${SCALES.width(3.125)};height:${SCALES.height(0.625)};border-radius:${theme.layout.radius};overflow:hidden;background-color:${theme.palette.accents_2};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)};}span.__jsx-style-dynamic-selector{width:${percentValue}%;background-color:${color};height:100%;margin:0;padding:0;display:block;}` })
+  ] });
+});
+CapacityComponent.displayName = "BolioUICapacity";
+var Capacity = with_scale_default(CapacityComponent);
+var Capacity_default = Capacity;
+
+// core/Capacity/index.ts
+var Capacity_default2 = Capacity_default;
+
+export {
+  Capacity_default2 as Capacity_default
+};