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

package/esm/chunk-UF4IKEU2.js

@@ -0,0 +1,17 @@
+// core/utils/calculations.ts
+import { useMemo } from "react";
+var getProportions = (value, max, maxFixed = 2) => {
+  const val = value / max;
+  const couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100;
+  if (couldBeDecimalValue > 100) return 100;
+  if (couldBeDecimalValue < 0) return 0;
+  if (!`${couldBeDecimalValue}`.includes(".")) return couldBeDecimalValue;
+  const decimal = `${couldBeDecimalValue}`.split(".")[1];
+  if (decimal.length < maxFixed) return couldBeDecimalValue;
+  return +couldBeDecimalValue.toFixed(maxFixed);
+};
+var useProportions = (value, max, maxFixed = 2) => useMemo(() => getProportions(value, max, maxFixed), [value, max, maxFixed]);
+
+export {
+  useProportions
+};

package/esm/chunk-UVCSH6DW.js

@@ -0,0 +1,16 @@
+import {
+  Themes_default
+} from "./chunk-VCTKX4AS.js";
+
+// core/use-all-themes/all-themes-context.ts
+import React from "react";
+var defaultAllThemesConfig = {
+  themes: Themes_default.getPresets()
+};
+var AllThemesContext = React.createContext(defaultAllThemesConfig);
+var useAllThemes = () => React.useContext(AllThemesContext);
+
+export {
+  AllThemesContext,
+  useAllThemes
+};

package/esm/chunk-UX2B3G6U.js

@@ -0,0 +1,106 @@
+// core/utils/collections.ts
+import React from "react";
+var getId = () => {
+  return Math.random().toString(32).slice(2, 10);
+};
+var hasChild = (children, child) => {
+  const types = React.Children.map(children, (item) => {
+    if (!React.isValidElement(item)) return null;
+    return item.type;
+  });
+  return (types || []).includes(child);
+};
+var pickChild = (children, targetChild) => {
+  const target = [];
+  const withoutTargetChildren = React.Children.map(children, (item) => {
+    if (!React.isValidElement(item)) return item;
+    if (item.type === targetChild) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  });
+  const targetChildren = target.length >= 0 ? target : void 0;
+  return [withoutTargetChildren, targetChildren];
+};
+var pickChildByProps = (children, key, value) => {
+  const target = [];
+  const isArray = Array.isArray(value);
+  const withoutPropChildren = React.Children.map(children, (item) => {
+    if (!React.isValidElement(item)) return null;
+    if (!item.props) return item;
+    if (isArray) {
+      if (value.includes(item.props[key])) {
+        target.push(item);
+        return null;
+      }
+      return item;
+    }
+    if (item.props[key] === value) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  });
+  const targetChildren = target.length >= 0 ? target : void 0;
+  return [withoutPropChildren, targetChildren];
+};
+var setChildrenIndex = (children, targetComponents = []) => {
+  if (React.Children.count(children) === 0) return [];
+  const allowAll = targetComponents.length === 0;
+  const clone = (child, props = {}) => React.cloneElement(child, props);
+  let index = 0;
+  return React.Children.map(children, (item) => {
+    if (!React.isValidElement(item)) return item;
+    index = index + 1;
+    if (allowAll) return clone(item, { index });
+    const isAllowed = targetComponents.find((child) => child === item.type);
+    if (isAllowed) return clone(item, { index });
+    index = index - 1;
+    return item;
+  });
+};
+var getReactNode = (node) => {
+  if (!node) return null;
+  if (typeof node !== "function") return node;
+  return node();
+};
+var isChildElement = (parent, child) => {
+  if (!parent || !child) return false;
+  let node = child;
+  while (node) {
+    if (node === parent) return true;
+    node = node.parentNode;
+  }
+  return false;
+};
+var isBolioUIElement = (el) => {
+  if (!el) return false;
+  if ((el == null ? void 0 : el.dataset) && (el == null ? void 0 : el.dataset["bolio-ui"])) return true;
+  el.attributes.getNamedItem("data-bolio-ui");
+  return !!el.attributes.getNamedItem("data-bolio-ui");
+};
+var isBrowser = () => {
+  return Boolean(
+    typeof window !== "undefined" && window.document && window.document.createElement
+  );
+};
+var isMac = () => {
+  if (!isBrowser()) return false;
+  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+};
+var isCSSNumberValue = (value) => value !== void 0 && !Number.isNaN(+value);
+
+export {
+  getId,
+  hasChild,
+  pickChild,
+  pickChildByProps,
+  setChildrenIndex,
+  getReactNode,
+  isChildElement,
+  isBolioUIElement,
+  isBrowser,
+  isMac,
+  isCSSNumberValue
+};

package/esm/chunk-V57PNXMD.js

@@ -0,0 +1,14 @@
+// core/utils/use-click-anywhere.ts
+import { useEffect } from "react";
+var useClickAnyWhere = (handler) => {
+  useEffect(() => {
+    const callback = (event) => handler(event);
+    document.addEventListener("click", callback);
+    return () => document.removeEventListener("click", callback);
+  }, [handler]);
+};
+var use_click_anywhere_default = useClickAnyWhere;
+
+export {
+  use_click_anywhere_default
+};

package/esm/chunk-VCTKX4AS.js

@@ -0,0 +1,247 @@
+// core/Themes/Presets/Shared.ts
+var defaultFont = {
+  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  mono: "Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace",
+  prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
+};
+var defaultBreakpoints = {
+  xs: {
+    min: "0",
+    max: "650px"
+  },
+  sm: {
+    min: "650px",
+    max: "900px"
+  },
+  md: {
+    min: "900px",
+    max: "1280px"
+  },
+  lg: {
+    min: "1280px",
+    max: "1920px"
+  },
+  xl: {
+    min: "1920px",
+    max: "10000px"
+  }
+};
+var defaultLayout = {
+  gap: "16pt",
+  gapNegative: "-16pt",
+  gapHalf: "8pt",
+  gapHalfNegative: "-8pt",
+  gapQuarter: "4pt",
+  gapQuarterNegative: "-4pt",
+  pageMargin: "16pt",
+  pageWidth: "900pt",
+  pageWidthWithMargin: "930pt",
+  breakpointMobile: defaultBreakpoints.xs.max,
+  breakpointTablet: defaultBreakpoints.sm.max,
+  radius: "10px",
+  unit: "16px"
+};
+
+// core/Themes/Presets/Default.ts
+var palette = {
+  background: "#fff",
+  foreground: "#000",
+  accents_1: "#fafafa",
+  accents_2: "#eaeaea",
+  accents_3: "#999",
+  accents_4: "#888",
+  accents_5: "#666",
+  accents_6: "#444",
+  accents_7: "#333",
+  accents_8: "#111",
+  selection: "rgba(206,228,254, 0.5)",
+  code: "#C25FFF",
+  border: "#eaeaea",
+  primary: "#60A5FA",
+  primaryLight: "#D7E9FE",
+  primaryLighter: "#A6CDFC",
+  primaryDark: "#03346F",
+  secondary: "#A78BFA",
+  secondaryLight: "#E1D8FD",
+  secondaryLighter: "#BCA7FB",
+  secondaryDark: "#23057B",
+  error: "#F87171",
+  errorLight: "#FDD8D8",
+  errorLighter: "#FBA8A8",
+  errorDark: "#720606",
+  success: "#4ADE80",
+  successLight: "#DCF9E7",
+  successLighter: "#B1F1C9",
+  successDark: "#0F5328",
+  warning: "#FFD666",
+  warningLight: "#FFF4D6",
+  warningLighter: "#FFE6A3",
+  warningDark: "#765600",
+  info: "#FF6A3D",
+  infoLight: "#FFE0D6",
+  infoLighter: "#FFB8A3",
+  infoDark: "#681800",
+  purple: "#F472B6",
+  alert: "#ff0080",
+  link: "#0070f3",
+  pre: "#363450"
+};
+var expressiveness = {
+  linkStyle: "none",
+  linkHoverStyle: "none",
+  dropdownBoxShadow: "0 4px 4px 0 rgba(0, 0, 0, 0.02)",
+  scrollerStart: "rgba(255, 255, 255, 1)",
+  scrollerEnd: "rgba(255, 255, 255, 0)",
+  shadowSmall: "0 5px 10px rgba(0, 0, 0, 0.12)",
+  shadowMedium: "0 8px 30px rgba(0, 0, 0, 0.12)",
+  shadowLarge: "0 30px 60px rgba(0, 0, 0, 0.12)",
+  portalOpacity: 0.25
+};
+var font = defaultFont;
+var breakpoints = defaultBreakpoints;
+var layout = defaultLayout;
+var themes = {
+  type: "light",
+  font,
+  layout,
+  palette,
+  breakpoints,
+  expressiveness
+};
+var Default_default = themes;
+
+// core/Themes/Presets/Dark.ts
+var palette2 = {
+  background: "#08090c",
+  foreground: "#fff",
+  accents_1: "#0d0e12",
+  accents_2: "#101216",
+  accents_3: "#171a20",
+  accents_4: "#23262e",
+  accents_5: "#757b88",
+  accents_6: "#7e838d",
+  accents_7: "#9aa0aa",
+  accents_8: "#f2f3f5",
+  selection: "rgba(248,28,229, 0.5)",
+  code: "#C25FFF",
+  border: "#101216",
+  primary: "#60A5FA",
+  primaryLight: "#D7E9FE",
+  primaryLighter: "#A6CDFC",
+  primaryDark: "#03346F",
+  secondary: "#A78BFA",
+  secondaryLight: "#E1D8FD",
+  secondaryLighter: "#BCA7FB",
+  secondaryDark: "#23057B",
+  error: "#F87171",
+  errorLight: "#FDD8D8",
+  errorLighter: "#FBA8A8",
+  errorDark: "#720606",
+  success: "#4ADE80",
+  successLight: "#DCF9E7",
+  successLighter: "#B1F1C9",
+  successDark: "#0F5328",
+  warning: "#FFD666",
+  warningLight: "#FFF4D6",
+  warningLighter: "#FFE6A3",
+  warningDark: "#765600",
+  info: "#FF6A3D",
+  infoLight: "#FFE0D6",
+  infoLighter: "#FFB8A3",
+  infoDark: "#681800",
+  purple: "#F472B6",
+  alert: "#ff0080",
+  link: "#3291ff",
+  pre: "#0d0e12"
+};
+var expressiveness2 = {
+  linkStyle: "none",
+  linkHoverStyle: "none",
+  dropdownBoxShadow: "0 0 0 1px #101216",
+  scrollerStart: "rgba(255, 255, 255, 1)",
+  scrollerEnd: "rgba(255, 255, 255, 0)",
+  shadowSmall: "0 5px 10px rgba(0, 0, 0, 0.3)",
+  shadowMedium: "0 8px 30px rgba(0, 0, 0, 0.35)",
+  shadowLarge: "0 30px 60px rgba(0, 0, 0, 0.45)",
+  portalOpacity: 0.75
+};
+var font2 = defaultFont;
+var breakpoints2 = defaultBreakpoints;
+var layout2 = defaultLayout;
+var themes2 = {
+  type: "dark",
+  font: font2,
+  layout: layout2,
+  palette: palette2,
+  breakpoints: breakpoints2,
+  expressiveness: expressiveness2
+};
+var Dark_default = themes2;
+
+// core/Themes/Themes.ts
+var isObject = (target) => target && typeof target === "object";
+var deepDuplicable = (source, target) => {
+  if (!isObject(target) || !isObject(source)) return source;
+  const sourceKeys = Object.keys(source);
+  const result = {};
+  for (const key of sourceKeys) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
+      result[key] = targetValue.concat(sourceValue);
+    } else if (isObject(sourceValue) && isObject(targetValue)) {
+      result[key] = deepDuplicable(sourceValue, {
+        ...targetValue
+      });
+    } else if (targetValue) {
+      result[key] = targetValue;
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+};
+var getPresets = () => {
+  return [Default_default, Dark_default];
+};
+var getPresetStaticTheme = () => {
+  return Default_default;
+};
+var isAvailableThemeType = (type) => {
+  if (!type) return false;
+  const presetThemes = getPresets();
+  const hasType = presetThemes.find((theme) => theme.type === type);
+  return !hasType;
+};
+var isPresetTheme = (themeOrType) => {
+  if (!themeOrType) return false;
+  const isType = typeof themeOrType === "string";
+  const type = isType ? themeOrType : themeOrType.type;
+  return !isAvailableThemeType(type);
+};
+var hasUserCustomTheme = (themes3 = []) => {
+  return !!themes3.find((item) => isAvailableThemeType(item.type));
+};
+var create = (base, custom) => {
+  if (!isAvailableThemeType(custom.type)) {
+    throw new Error("Duplicate or unavailable theme type");
+  }
+  return deepDuplicable(base, custom);
+};
+var createFromDark = (custom) => create(Dark_default, custom);
+var createFromLight = (custom) => create(Default_default, custom);
+var Themes = {
+  isPresetTheme,
+  isAvailableThemeType,
+  hasUserCustomTheme,
+  getPresets,
+  getPresetStaticTheme,
+  create,
+  createFromDark,
+  createFromLight
+};
+var Themes_default = Themes;
+
+export {
+  Themes_default
+};

package/esm/chunk-W4T2KO5B.js

@@ -0,0 +1,129 @@
+import {
+  Link_default
+} from "./chunk-3XTTDT42.js";
+import {
+  addColorAlpha
+} from "./chunk-RZBEZ26A.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Breadcrumbs/Breadcrumbs.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React, { useMemo } from "react";
+
+// core/Breadcrumbs/BreadcrumbsSeparator.tsx
+import _JSXStyle from "styled-jsx/style";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Separator({
+  children,
+  className = ""
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default("separator", className);
+  return /* @__PURE__ */ jsxs("div", { className: _JSXStyle.dynamic([["2295921440", [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.5), SCALES.mb(0), SCALES.ml(0.5)]]]) + " " + (classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2295921440", dynamic: [SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)], children: `.separator.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;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.5)} ${SCALES.mb(0)} ${SCALES.ml(0.5)};}` })
+  ] });
+}
+Separator.displayName = "BolioUIBreadcrumbsSeparator";
+var BreadcrumbsSeparator = with_scale_default(Separator);
+var BreadcrumbsSeparator_default = BreadcrumbsSeparator;
+
+// core/Breadcrumbs/Breadcrumbs.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var BreadcrumbsComponent = React.forwardRef(({
+  separator = "/",
+  children,
+  className = ""
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const hoverColor = useMemo(() => {
+    return addColorAlpha(theme.palette.link, 0.85);
+  }, [theme.palette.link]);
+  const childrenArray = React.Children.toArray(children);
+  const withSeparatorChildren = childrenArray.map((item, index) => {
+    if (!React.isValidElement(item)) return item;
+    const last = childrenArray[index - 1];
+    const lastIsSeparator = React.isValidElement(last) && last.type === BreadcrumbsSeparator_default;
+    const currentIsSeparator = item.type === BreadcrumbsSeparator_default;
+    if (!lastIsSeparator && !currentIsSeparator && index > 0) {
+      return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+        /* @__PURE__ */ jsx2(BreadcrumbsSeparator_default, { children: separator }),
+        item
+      ] }, index);
+    }
+    return item;
+  });
+  return /* @__PURE__ */ jsxs2("nav", { ref, className: _JSXStyle2.dynamic([["3435904432", [theme.palette.accents_5, 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), hoverColor, theme.palette.accents_7]]]) + " " + (className || ""), children: [
+    withSeparatorChildren,
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "3435904432", dynamic: [theme.palette.accents_5, 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), hoverColor, theme.palette.accents_7], children: `nav.__jsx-style-dynamic-selector{line-height:inherit;color:${theme.palette.accents_5};box-sizing:border-box;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;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)};}nav.__jsx-style-dynamic-selector .link:hover{color:${hoverColor};}nav.__jsx-style-dynamic-selector>span:last-of-type{color:${theme.palette.accents_7};}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{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;}` })
+  ] });
+});
+BreadcrumbsComponent.displayName = "BolioUIBreadcrumbs";
+var Breadcrumbs = with_scale_default(BreadcrumbsComponent);
+var Breadcrumbs_default = Breadcrumbs;
+
+// core/Breadcrumbs/BreadcrumbsItem.tsx
+import React2, { useMemo as useMemo2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BreadcrumbsItem = React2.forwardRef(
+  ({
+    href,
+    nextLink = false,
+    onClick,
+    children,
+    className = "",
+    ...props
+  }, ref) => {
+    const isLink = useMemo2(
+      () => href !== void 0 || nextLink,
+      [href, nextLink]
+    );
+    const [withoutSepChildren] = pickChild(children, BreadcrumbsSeparator_default);
+    const classes = use_classes_default("breadcrumbs-item", className);
+    const clickHandler = (event) => {
+      if (onClick) onClick(event);
+    };
+    if (!isLink) {
+      return /* @__PURE__ */ jsx3("span", { className: classes, onClick: clickHandler, children: withoutSepChildren });
+    }
+    return /* @__PURE__ */ jsx3(
+      Link_default,
+      {
+        className: classes,
+        href,
+        onClick: clickHandler,
+        ref,
+        ...props,
+        children: withoutSepChildren
+      }
+    );
+  }
+);
+BreadcrumbsItem.displayName = "BolioUIBreadcrumbsItem";
+var BreadcrumbsItem_default = BreadcrumbsItem;
+
+// core/Breadcrumbs/index.ts
+Breadcrumbs_default.Item = BreadcrumbsItem_default;
+Breadcrumbs_default.Separator = BreadcrumbsSeparator_default;
+var Breadcrumbs_default2 = Breadcrumbs_default;
+
+export {
+  Breadcrumbs_default2 as Breadcrumbs_default
+};

package/esm/chunk-XSXJO2KP.js

@@ -0,0 +1,29 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+
+// core/Spacer/Spacer.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var SpacerComponent = React.forwardRef(({
+  inline = false,
+  className = "",
+  ...props
+}, ref) => {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsx("span", { ref, ...props, className: _JSXStyle.dynamic([["677603432", [inline ? "inline-block" : "block", SCALES.width(1), SCALES.height(1), 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: /* @__PURE__ */ jsx(_JSXStyle, { id: "677603432", dynamic: [inline ? "inline-block" : "block", SCALES.width(1), SCALES.height(1), 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: `span.__jsx-style-dynamic-selector{display:${inline ? "inline-block" : "block"};width:${SCALES.width(1)};height:${SCALES.height(1)};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)};}` }) });
+});
+SpacerComponent.displayName = "BolioUISpacer";
+var Spacer = with_scale_default(SpacerComponent);
+var Spacer_default = Spacer;
+
+// core/Spacer/index.ts
+var Spacer_default2 = Spacer_default;
+
+export {
+  Spacer_default2 as Spacer_default
+};