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

package/esm/chunk-CPIFYIT3.js

@@ -0,0 +1,465 @@
+import {
+  use_click_anywhere_default
+} from "./chunk-V57PNXMD.js";
+import {
+  use_resize_default
+} from "./chunk-JJFOGZ6V.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+import {
+  use_click_away_default
+} from "./chunk-DGXZP4VJ.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/Tooltip/Tooltip.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React3, { useEffect as useEffect2, useId, useImperativeHandle, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+
+// core/Tooltip/TooltipContent.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// core/Tooltip/styles.ts
+var getColors = (type, palette, { light, ghost, subtle } = {}) => {
+  if (isSemanticColorType(type)) {
+    const variant = subtle ? "subtle" : light ? "light" : ghost ? "outline" : "filled";
+    const { bg, border, color: color2 } = getVariantColors(palette, type, variant);
+    return { color: color2, bgColor: bg, borderColor: border };
+  }
+  const colors = {
+    default: palette.background,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info,
+    dark: palette.foreground,
+    lite: palette.background
+  };
+  const color = type === "lite" || type === "default" ? palette.foreground : palette.background;
+  return {
+    color,
+    bgColor: colors[type],
+    borderColor: colors[type]
+  };
+};
+
+// core/Tooltip/placement.ts
+var defaultTooltipPosition = {
+  top: "-1000px",
+  left: "-1000px",
+  transform: "none"
+};
+var getPosition = (placement, rect, offset) => {
+  const positions = {
+    top: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: "translate(-50%, -100%)"
+    },
+    topStart: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left}px`,
+      transform: "translate(0, -100%)"
+    },
+    topEnd: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left + rect.width}px`,
+      transform: "translate(-100%, -100%)"
+    },
+    bottom: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: "translate(-50%, 0)"
+    },
+    bottomStart: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left}px`,
+      transform: "translate(0, 0)"
+    },
+    bottomEnd: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left + rect.width}px`,
+      transform: "translate(-100%, 0)"
+    },
+    left: {
+      top: `${rect.top + rect.height / 2}px`,
+      left: `${rect.left - offset}px`,
+      transform: "translate(-100%, -50%)"
+    },
+    leftStart: {
+      top: `${rect.top}px`,
+      left: `${rect.left - offset}px`,
+      transform: "translate(-100%, 0)"
+    },
+    leftEnd: {
+      top: `${rect.top + rect.height}px`,
+      left: `${rect.left - offset}px`,
+      transform: "translate(-100%, -100%)"
+    },
+    right: {
+      top: `${rect.top + rect.height / 2}px`,
+      left: `${rect.right + offset}px`,
+      transform: "translate(0, -50%)"
+    },
+    rightStart: {
+      top: `${rect.top}px`,
+      left: `${rect.right + offset}px`,
+      transform: "translate(0, 0)"
+    },
+    rightEnd: {
+      top: `${rect.top + rect.height}px`,
+      left: `${rect.right + offset}px`,
+      transform: "translate(0, -100%)"
+    }
+  };
+  return positions[placement] || positions.top;
+};
+var getIconPosition = (placement, offsetX, offsetY, offsetAbsolute = "3px") => {
+  const positions = {
+    top: {
+      top: "auto",
+      right: "auto",
+      left: "50%",
+      bottom: `${offsetAbsolute}`,
+      transform: "translate(-50%, 100%) rotate(-90deg)"
+    },
+    topStart: {
+      top: "auto",
+      right: "auto",
+      left: `${offsetX}`,
+      bottom: `${offsetAbsolute}`,
+      transform: "translate(0, 100%) rotate(-90deg)"
+    },
+    topEnd: {
+      top: "auto",
+      right: `${offsetX}`,
+      left: "auto",
+      bottom: `${offsetAbsolute}`,
+      transform: "translate(0, 100%) rotate(-90deg)"
+    },
+    bottom: {
+      top: `${offsetAbsolute}`,
+      right: "auto",
+      left: "50%",
+      bottom: "auto",
+      transform: "translate(-50%, -100%) rotate(90deg)"
+    },
+    bottomStart: {
+      top: `${offsetAbsolute}`,
+      right: "auto",
+      left: `${offsetX}`,
+      bottom: "auto",
+      transform: "translate(0, -100%) rotate(90deg)"
+    },
+    bottomEnd: {
+      top: `${offsetAbsolute}`,
+      right: `${offsetX}`,
+      left: "auto",
+      bottom: "auto",
+      transform: "translate(0, -100%) rotate(90deg)"
+    },
+    left: {
+      top: "50%",
+      right: "0",
+      left: "auto",
+      bottom: "auto",
+      transform: "translate(100%, -50%) rotate(180deg)"
+    },
+    leftStart: {
+      top: `${offsetY}`,
+      right: "0",
+      left: "auto",
+      bottom: "auto",
+      transform: "translate(100%, -50%) rotate(180deg)"
+    },
+    leftEnd: {
+      top: "auto",
+      right: "0",
+      left: "auto",
+      bottom: `${offsetY}`,
+      transform: "translate(100%, 50%) rotate(180deg)"
+    },
+    right: {
+      top: "50%",
+      right: "auto",
+      left: "0",
+      bottom: "auto",
+      transform: "translate(-100%, -50%) rotate(0deg)"
+    },
+    rightStart: {
+      top: `${offsetY}`,
+      right: "auto",
+      left: "0",
+      bottom: "auto",
+      transform: "translate(-100%, -50%) rotate(0deg)"
+    },
+    rightEnd: {
+      top: "auto",
+      right: "auto",
+      left: "0",
+      bottom: `${offsetY}`,
+      transform: "translate(-100%, 50%) rotate(0deg)"
+    }
+  };
+  return positions[placement] || positions.top;
+};
+
+// core/Tooltip/TooltipIcon.tsx
+import _JSXStyle from "styled-jsx/style";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var TooltipIcon = ({
+  placement
+}) => {
+  const {
+    transform,
+    top,
+    left,
+    right,
+    bottom
+  } = useMemo(() => getIconPosition(placement, "var(--tooltip-icon-offset-x)", "var(--tooltip-icon-offset-y)"), [placement]);
+  return /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1429608490", [left, top, right, bottom, transform]]]), children: /* @__PURE__ */ jsx(_JSXStyle, { id: "1429608490", dynamic: [left, top, right, bottom, transform], children: `span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent var(--tooltip-content-bg) transparent transparent;position:absolute;left:${left};top:${top};right:${right};bottom:${bottom};-webkit-transform:${transform};-ms-transform:${transform};transform:${transform};}` }) });
+};
+var TooltipIcon_default = TooltipIcon;
+
+// core/Tooltip/helper.ts
+var defaultRect = {
+  top: -1e3,
+  left: -1e3,
+  right: -1e3,
+  bottom: -1e3,
+  width: 0,
+  height: 0
+};
+var getRect = (ref) => {
+  if (!ref || !ref.current) return defaultRect;
+  const rect = ref.current.getBoundingClientRect();
+  return {
+    ...rect,
+    width: rect.width || rect.right - rect.left,
+    height: rect.height || rect.bottom - rect.top,
+    top: rect.top + document.documentElement.scrollTop,
+    bottom: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+    right: rect.right + document.documentElement.scrollLeft
+  };
+};
+
+// core/Tooltip/TooltipContent.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TooltipContent = ({
+  children,
+  parent,
+  visible,
+  offset,
+  iconOffset,
+  placement,
+  type,
+  className,
+  hideArrow,
+  id,
+  role,
+  light = false,
+  ghost = false,
+  subtle = false
+}) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const el = use_portal_default("tooltip");
+  const selfRef = useRef(null);
+  const [rect, setRect] = useState(defaultTooltipPosition);
+  const colors = useMemo2(() => getColors(type, theme.palette, {
+    light,
+    ghost,
+    subtle
+  }), [type, theme.palette, light, ghost, subtle]);
+  const hasShadow = type === "default";
+  const classes = use_classes_default("tooltip-content", className);
+  const updateRect = () => {
+    const position = getPosition(placement, getRect(parent), offset);
+    setRect(position);
+  };
+  use_resize_default(updateRect);
+  use_click_anywhere_default(() => updateRect());
+  const latestUpdate = use_latest_default(updateRect);
+  useEffect(() => {
+    latestUpdate.current();
+  }, [visible, latestUpdate]);
+  useEffect(() => {
+    if (!visible) return;
+    const handleScroll = () => latestUpdate.current();
+    window.addEventListener("scroll", handleScroll, {
+      passive: true,
+      capture: true
+    });
+    return () => window.removeEventListener("scroll", handleScroll, {
+      capture: true
+    });
+  }, [visible, latestUpdate]);
+  const preventHandler = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
+  if (!parent || !el) return null;
+  return createPortal(/* @__PURE__ */ jsx2(css_transition_default, { visible, children: /* @__PURE__ */ jsxs("div", { id, role, ref: selfRef, onClick: preventHandler, className: _JSXStyle2.dynamic([["1478656486", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, colors.borderColor, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : "none", SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: _JSXStyle2.dynamic([["1478656486", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, colors.borderColor, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : "none", SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " inner", children: [
+      !hideArrow && /* @__PURE__ */ jsx2(TooltipIcon_default, { placement, shadow: hasShadow }),
+      children
+    ] }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1478656486", dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, colors.borderColor, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : "none", SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)], children: `.tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:${iconOffset.x};--tooltip-icon-offset-y:${iconOffset.y};--tooltip-content-bg:${colors.bgColor};box-sizing:border-box;position:absolute;top:${rect.top};left:${rect.left};-webkit-transform:${rect.transform};-ms-transform:${rect.transform};transform:${rect.transform};background-color:var(--tooltip-content-bg);color:${colors.color};border:1px solid ${colors.borderColor};border-radius:${theme.layout.radius};padding:0;z-index:1000;box-shadow:${hasShadow ? theme.expressiveness.shadowMedium : "none"};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:${SCALES.font(1)};padding:${SCALES.pt(0.65)} ${SCALES.pr(0.9)} ${SCALES.pb(0.65)} ${SCALES.pl(0.9)};height:100%;}` })
+  ] }) }), el);
+};
+var TooltipContent_default = TooltipContent;
+
+// core/Tooltip/Tooltip.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var focusableTags = ["a", "button", "input", "select", "textarea"];
+var getFocusableChild = (children) => {
+  if (!React3.isValidElement(children)) return null;
+  const {
+    type
+  } = children;
+  if (typeof type === "string" && !focusableTags.includes(type)) return null;
+  return children;
+};
+var TooltipComponent = React3.forwardRef(({
+  children,
+  initialVisible = false,
+  text = "",
+  offset = 12,
+  placement = "top",
+  portalClassName = "",
+  enterDelay = 100,
+  leaveDelay = 150,
+  trigger = "hover",
+  type = "default",
+  light = false,
+  ghost = false,
+  subtle = false,
+  className = "",
+  onVisibleChange = (() => {
+  }),
+  hideArrow = false,
+  visible: customVisible,
+  ...props
+}, ref) => {
+  const timer = useRef2(void 0);
+  const innerRef = useRef2(null);
+  const tooltipId = useId();
+  useImperativeHandle(ref, () => innerRef.current);
+  const [visible, setVisible] = useState2(initialVisible);
+  const triggerElement = innerRef.current;
+  const iconOffset = useMemo3(() => {
+    if (!triggerElement) return {
+      x: "0.75em",
+      y: "0.75em"
+    };
+    const rect = getRect(innerRef);
+    return {
+      x: `${rect.width ? rect.width / 2 : 0}px`,
+      y: `${rect.height ? rect.height / 2 : 0}px`
+    };
+  }, [triggerElement]);
+  const contentProps = {
+    type,
+    light,
+    ghost,
+    subtle,
+    visible,
+    offset,
+    placement,
+    hideArrow,
+    iconOffset,
+    parent: innerRef,
+    className: portalClassName,
+    id: tooltipId,
+    role: trigger === "hover" ? "tooltip" : void 0
+  };
+  const changeVisible = (nextState) => {
+    const clear = () => {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    };
+    const handler = (nextState2) => {
+      setVisible(nextState2);
+      onVisibleChange(nextState2);
+      clear();
+    };
+    clear();
+    if (nextState) {
+      timer.current = window.setTimeout(() => handler(true), enterDelay);
+      return;
+    }
+    const leaveDelayWithoutClick = trigger === "click" ? 0 : leaveDelay;
+    timer.current = window.setTimeout(() => handler(false), leaveDelayWithoutClick);
+  };
+  const mouseEventHandler = (next) => trigger === "hover" && changeVisible(next);
+  const clickEventHandler = () => trigger === "click" && changeVisible(!visible);
+  const focusableChild = getFocusableChild(children);
+  const isWrapperButton = trigger === "click" && !focusableChild;
+  const keyDownHandler = (event) => {
+    if (event.key === "Escape" && visible) changeVisible(false);
+    if (!isWrapperButton || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      changeVisible(!visible);
+    }
+  };
+  const triggerProps = trigger === "click" ? {
+    "aria-expanded": visible,
+    "aria-controls": visible ? tooltipId : void 0
+  } : {
+    "aria-describedby": [focusableChild == null ? void 0 : focusableChild.props["aria-describedby"], visible ? tooltipId : void 0].filter(Boolean).join(" ") || void 0
+  };
+  const wrapperProps = focusableChild ? {} : isWrapperButton ? {
+    role: "button",
+    tabIndex: 0,
+    ...triggerProps
+  } : triggerProps;
+  use_click_away_default(innerRef, () => trigger === "click" && changeVisible(false));
+  const latestChange = use_latest_default(changeVisible);
+  useEffect2(() => {
+    if (customVisible === void 0) return;
+    latestChange.current(customVisible);
+  }, [customVisible, latestChange]);
+  return /* @__PURE__ */ jsxs2("div", { ref: innerRef, onClick: clickEventHandler, onMouseEnter: () => mouseEventHandler(true), onMouseLeave: () => mouseEventHandler(false), onFocus: () => mouseEventHandler(true), onBlur: () => mouseEventHandler(false), onKeyDown: keyDownHandler, ...wrapperProps, ...props, className: "jsx-1653875468 " + (props && props.className != null && props.className || wrapperProps && wrapperProps.className != null && wrapperProps.className || use_classes_default("tooltip", className) || ""), children: [
+    focusableChild ? React3.cloneElement(focusableChild, triggerProps) : children,
+    /* @__PURE__ */ jsx3(TooltipContent_default, { ...contentProps, children: text }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "1653875468", children: ".tooltip.jsx-1653875468{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}" })
+  ] });
+});
+TooltipComponent.displayName = "BolioUITooltip";
+var Tooltip = with_scale_default(TooltipComponent);
+var Tooltip_default = Tooltip;
+
+// core/Tooltip/index.ts
+var Tooltip_default2 = Tooltip_default;
+
+export {
+  Tooltip_default2 as Tooltip_default
+};

package/esm/chunk-CV4DIXTB.js

@@ -0,0 +1,93 @@
+import {
+  addColorAlpha
+} from "./chunk-RZBEZ26A.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+
+// core/Code/Code.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeComponent = React.forwardRef(({
+  children,
+  block = false,
+  className = "",
+  name = "",
+  classic = false,
+  tabs = [],
+  activeTab = 0,
+  onTabChange,
+  ...props
+}, ref) => {
+  const {
+    SCALES
+  } = use_scale_default();
+  const theme = use_theme_default();
+  const id = React.useId();
+  const tabRefs = React.useRef([]);
+  const {
+    background,
+    border,
+    tab
+  } = useMemo(() => {
+    if (!classic) return {
+      border: theme.palette.accents_2,
+      background: addColorAlpha(theme.palette.accents_1, 0.75),
+      tab: theme.palette.accents_1
+    };
+    return {
+      border: theme.palette.accents_2,
+      background: theme.palette.background,
+      tab: theme.palette.background
+    };
+  }, [classic, theme.palette]);
+  const hasTabs = tabs.length > 0;
+  const moveTab = (event, index) => {
+    var _a;
+    const last = tabs.length - 1;
+    const target = {
+      ArrowRight: index === last ? 0 : index + 1,
+      ArrowLeft: index === 0 ? last : index - 1,
+      Home: 0,
+      End: last
+    }[event.key];
+    if (target === void 0) return;
+    event.preventDefault();
+    onTabChange == null ? void 0 : onTabChange(target);
+    (_a = tabRefs.current[target]) == null ? void 0 : _a.focus();
+  };
+  if (!block) return /* @__PURE__ */ jsx("code", { ref, ...props, children });
+  return /* @__PURE__ */ jsxs("div", { ref, className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " pre", children: [
+    /* @__PURE__ */ jsxs("header", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]), children: [
+      /* @__PURE__ */ jsxs("div", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " traffic", children: [
+        /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " close" }),
+        /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " mini" }),
+        /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " full" })
+      ] }),
+      hasTabs ? /* @__PURE__ */ jsx("div", { role: "tablist", className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " tabs", children: tabs.map((label, index) => /* @__PURE__ */ jsx("button", { ref: (element) => {
+        tabRefs.current[index] = element;
+      }, type: "button", role: "tab", id: `${id}-tab-${index}`, "aria-selected": index === activeTab, "aria-controls": `${id}-panel`, tabIndex: index === activeTab ? 0 : -1, onClick: () => onTabChange == null ? void 0 : onTabChange(index), onKeyDown: (event) => moveTab(event, index), className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + ` name tab${index === activeTab ? " active" : ""}`, children: /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]), children: label }) }, `${label}-${index}`)) }) : name && /* @__PURE__ */ jsx("div", { className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " name active", children: name })
+    ] }),
+    /* @__PURE__ */ jsx("pre", { ...hasTabs && {
+      role: "tabpanel",
+      id: `${id}-panel`,
+      "aria-labelledby": `${id}-tab-${activeTab}`
+    }, ...props, className: _JSXStyle.dynamic([["1321188974", [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || className || ""), children }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "1321188974", dynamic: [border, SCALES.font(0.875), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.palette.accents_2, theme.palette.border, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), tab, theme.palette.foreground, theme.palette.accents_5], children: `.pre.__jsx-style-dynamic-selector{max-width:100%;border:1px solid ${border};font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "initial")};height:${SCALES.height(1, "auto")};margin:${SCALES.mt(1.3)} ${SCALES.mr(0)} ${SCALES.mb(1.3)} ${SCALES.ml(0)};border-radius:${theme.layout.radius};background-color:${background};overflow:hidden;}pre.__jsx-style-dynamic-selector{max-width:100%;font-size:inherit;border:none;border-radius:0;margin:0;line-height:1.5em;padding:${SCALES.pt(1.1)} ${SCALES.pr(1)} ${SCALES.pb(1.1)} ${SCALES.pl(1)};}.dark.__jsx-style-dynamic-selector{color:white;background:black;}.dark.__jsx-style-dynamic-selector code.__jsx-style-dynamic-selector{color:white;}header.__jsx-style-dynamic-selector{height:2.5em;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid ${theme.palette.accents_2};background-color:${theme.palette.border};}.traffic.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ${theme.layout.gapHalf};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75em;height:0.75em;max-width:12px;max-height:12px;display:inline-block;margin-right:0.5em;}.traffic.__jsx-style-dynamic-selector .close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.traffic.__jsx-style-dynamic-selector .mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.traffic.__jsx-style-dynamic-selector .full.__jsx-style-dynamic-selector{background-color:#27c93f;}.tabs.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;}.tab.__jsx-style-dynamic-selector{min-width:0;}.tab.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;}.name.__jsx-style-dynamic-selector{margin-bottom:-1px;border:none;border-right:1px solid ${theme.palette.accents_2};background-color:transparent;color:${theme.palette.accents_5};height:auto;line-height:1.35em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:${SCALES.font(0.8125)};padding:${SCALES.font(0.32)} ${SCALES.font(0.5)} ${SCALES.font(0.32)} ${SCALES.font(0.5)};width:auto;white-space:nowrap;}.name.active.__jsx-style-dynamic-selector{background-color:${tab};}.tab.__jsx-style-dynamic-selector{font-family:inherit;cursor:pointer;}.tab.__jsx-style-dynamic-selector:hover,.tab.active.__jsx-style-dynamic-selector{color:${theme.palette.foreground};}.tab.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ${theme.palette.accents_5};outline-offset:-2px;}` })
+  ] });
+});
+CodeComponent.displayName = "BolioUICode";
+var Code = with_scale_default(CodeComponent);
+var Code_default = Code;
+
+// core/Code/index.ts
+var Code_default2 = Code_default;
+
+export {
+  Code_default2 as Code_default
+};

package/esm/chunk-DD72MTCX.js

@@ -0,0 +1,55 @@
+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/Dot/Dot.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColor = (type, theme) => {
+  const colors = {
+    default: theme.palette.accents_2,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info
+  };
+  return colors[type] || colors.default;
+};
+var DotComponent = React.forwardRef(({
+  type = "default",
+  children,
+  className = "",
+  color = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const typeColor = useMemo(() => getColor(type, theme), [type, theme]);
+  return /* @__PURE__ */ jsxs("span", { ref, ...props, className: _JSXStyle.dynamic([["2211116772", [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), color ? color : typeColor]]]) + " " + (props && props.className != null && props.className || use_classes_default("dot", className) || ""), children: [
+    /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["2211116772", [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), color ? color : typeColor]]]) + " icon" }),
+    /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["2211116772", [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), color ? color : typeColor]]]) + " label", children }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2211116772", dynamic: [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), color ? color : typeColor], children: `.dot.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;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)};}.icon.__jsx-style-dynamic-selector{width:0.625em;height:0.625em;min-width:calc(0.625 * 12px);min-height:calc(0.625 * 12px);line-height:0.625em;border-radius:50%;background-color:${color ? color : typeColor};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.label.__jsx-style-dynamic-selector{margin-left:0.5em;font-size:1em;line-height:1em;text-transform:capitalize;}` })
+  ] });
+});
+DotComponent.displayName = "BolioUIDot";
+var Dot = with_scale_default(DotComponent);
+var Dot_default = Dot;
+
+// core/Dot/index.ts
+var Dot_default2 = Dot_default;
+
+export {
+  Dot_default2 as Dot_default
+};

package/esm/chunk-DGXZP4VJ.js

@@ -0,0 +1,10 @@
+import {
+  use_click_away_default
+} from "./chunk-3WPRUUZ6.js";
+
+// core/utils/use-click-away.ts
+var use_click_away_default2 = use_click_away_default;
+
+export {
+  use_click_away_default2 as use_click_away_default
+};