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

package/esm/chunk-XXMCR322.js

@@ -0,0 +1,199 @@
+import {
+  Image_default
+} from "./chunk-CNY7HPMQ.js";
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  hasChild,
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Card/Card.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React, { useMemo } from "react";
+
+// core/Card/styles.ts
+var getStyles = (type, palette, { isShadow, filled, ghost, subtle } = {}) => {
+  if (isSemanticColorType(type)) {
+    if (subtle) {
+      const { bg, border, color } = getVariantColors(palette, type, "subtle");
+      return { color, bgColor: bg, borderColor: border };
+    }
+    if (ghost) {
+      const { bg, border, color } = getVariantColors(palette, type, "outline");
+      return { color, bgColor: bg, borderColor: border };
+    }
+    if (filled) {
+      const { bg, border, color } = getVariantColors(palette, type, "filled");
+      return { color, bgColor: bg, borderColor: border };
+    }
+  }
+  const colors = {
+    default: {
+      color: palette.foreground,
+      bgColor: palette.accents_1,
+      borderColor: palette.accents_2
+    },
+    primary: {
+      color: palette.primaryDark,
+      bgColor: palette.primaryLighter,
+      borderColor: palette.primaryDark
+    },
+    secondary: {
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLighter,
+      borderColor: palette.secondaryDark
+    },
+    success: {
+      color: palette.successDark,
+      bgColor: palette.successLighter,
+      borderColor: palette.successDark
+    },
+    warning: {
+      color: palette.warningDark,
+      bgColor: palette.warningLighter,
+      borderColor: palette.warningDark
+    },
+    error: {
+      color: palette.errorDark,
+      bgColor: palette.errorLighter,
+      borderColor: palette.errorDark
+    },
+    info: {
+      color: palette.infoDark,
+      bgColor: palette.infoLighter,
+      borderColor: palette.infoDark
+    },
+    dark: {
+      color: palette.background,
+      bgColor: palette.foreground,
+      borderColor: palette.foreground
+    },
+    lite: {
+      color: palette.foreground,
+      bgColor: palette.background,
+      borderColor: palette.foreground
+    }
+  };
+  const showBorder = type === "default" && !isShadow;
+  return {
+    ...colors[type],
+    borderColor: showBorder ? palette.border : "transparent"
+  };
+};
+
+// core/Card/CardFooter.tsx
+import _JSXStyle from "styled-jsx/style";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CardFooterComponent({
+  children,
+  className = "",
+  disableAutoMargin = false,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default({
+    "auto-margin": !disableAutoMargin
+  }, className);
+  return /* @__PURE__ */ jsxs("footer", { ...props, className: _JSXStyle.dynamic([["2898207213", [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2898207213", dynamic: [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter], children: `footer.__jsx-style-dynamic-selector{padding:${SCALES.py(0.66)} ${SCALES.px(1.31)};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;overflow:hidden;color:inherit;background-color:inherit;font-size:${SCALES.font(0.875)};border-top:1px solid ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};min-height:${SCALES.height(3.3)};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:${theme.layout.gapQuarter};}` })
+  ] });
+}
+CardFooterComponent.displayName = "BolioUICardFooter";
+var CardFooter = with_scale_default(CardFooterComponent);
+var CardFooter_default = CardFooter;
+
+// core/Card/CardContent.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function CardContentComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs2("div", { ...props, className: _JSXStyle2.dynamic([["3819126313", [SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || use_classes_default("content", className) || ""), children: [
+    children,
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "3819126313", dynamic: [SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `.content.__jsx-style-dynamic-selector{width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(1)} ${SCALES.pr(1)} ${SCALES.pb(1)} ${SCALES.pl(1)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.content.__jsx-style-dynamic-selector>p:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>p:last-child{margin-bottom:0;}` })
+  ] });
+}
+CardContentComponent.displayName = "BolioUICardContent";
+var CardContent = with_scale_default(CardContentComponent);
+var CardContent_default = CardContent;
+
+// core/Card/Card.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CardComponent = React.forwardRef(({
+  children,
+  hoverable = false,
+  rounded,
+  bordered = false,
+  className = "",
+  shadow = false,
+  filled = false,
+  ghost = false,
+  subtle = false,
+  type = "default",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const hoverShadow = useMemo(() => {
+    if (shadow) return theme.expressiveness.shadowMedium;
+    return hoverable ? theme.expressiveness.shadowSmall : "none";
+  }, [hoverable, shadow, theme.expressiveness]);
+  const {
+    color,
+    bgColor,
+    borderColor
+  } = useMemo(() => getStyles(type, theme.palette, {
+    isShadow: shadow,
+    filled,
+    ghost,
+    subtle
+  }), [type, theme.palette, shadow, filled, ghost, subtle]);
+  const showBorder = bordered || ghost;
+  const [withoutFooterChildren, footerChildren] = pickChild(children, CardFooter_default);
+  const [withoutImageChildren, imageChildren] = pickChild(withoutFooterChildren, Image_default);
+  const hasContent = hasChild(withoutImageChildren, CardContent_default);
+  return /* @__PURE__ */ jsxs3("div", { ref, ...props, className: _JSXStyle3.dynamic([["3020660875", [theme.palette.background, rounded ? "25px" : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : "none", color, bgColor, showBorder ? "1px solid" + borderColor : "none", 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), hoverShadow]]]) + " " + (props && props.className != null && props.className || use_classes_default("card", className) || ""), children: [
+    imageChildren,
+    hasContent ? withoutImageChildren : /* @__PURE__ */ jsx3(CardContent_default, { children: withoutImageChildren }),
+    footerChildren,
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "3020660875", dynamic: [theme.palette.background, rounded ? "25px" : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : "none", color, bgColor, showBorder ? "1px solid" + borderColor : "none", 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), hoverShadow], children: `.card.__jsx-style-dynamic-selector{background:${theme.palette.background};-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:${rounded ? "25px" : theme.layout.radius};box-shadow:${shadow ? theme.expressiveness.shadowSmall : "none"};box-sizing:border-box;color:${color};background-color:${bgColor};border:${showBorder ? "1px solid" + borderColor : "none"};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)};}.card.__jsx-style-dynamic-selector:hover{box-shadow:${hoverShadow};}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}` })
+  ] });
+});
+CardComponent.displayName = "BolioUICard";
+var Card = with_scale_default(CardComponent);
+var Card_default = Card;
+
+// core/Card/index.ts
+Card_default.Footer = CardFooter_default;
+Card_default.Actions = CardFooter_default;
+Card_default.Content = CardContent_default;
+Card_default.Body = CardContent_default;
+var Card_default2 = Card_default;
+
+export {
+  Card_default2 as Card_default
+};

package/esm/chunk-Y6X5SEN7.js

@@ -0,0 +1,232 @@
+import {
+  use_click_away_default
+} from "./chunk-DGXZP4VJ.js";
+import {
+  Loading_default
+} from "./chunk-BDEBNBW6.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  pickChild,
+  pickChildByProps
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ButtonDropdown/ButtonDropdown.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React3, { useCallback, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
+
+// core/ButtonDropdown/styles.ts
+var getColor = (palette, type, disabled = false) => {
+  const colors = {
+    default: {
+      color: palette.foreground,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      borderLeftColor: palette.accents_3,
+      hoverBgColor: palette.accents_3,
+      hoverBorder: palette.accents_7
+    },
+    primary: {
+      color: palette.primaryDark,
+      bgColor: palette.primaryLight,
+      borderColor: palette.primary,
+      borderLeftColor: palette.primary,
+      hoverBgColor: palette.primaryLight,
+      hoverBorder: palette.primary
+    },
+    secondary: {
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLight,
+      borderColor: palette.secondary,
+      borderLeftColor: palette.secondary,
+      hoverBgColor: palette.secondaryLight,
+      hoverBorder: palette.secondary
+    },
+    success: {
+      color: palette.successDark,
+      bgColor: palette.successLight,
+      borderColor: palette.success,
+      borderLeftColor: palette.success,
+      hoverBgColor: palette.successLight,
+      hoverBorder: palette.success
+    },
+    warning: {
+      color: palette.warningDark,
+      bgColor: palette.warningLight,
+      borderColor: palette.warning,
+      borderLeftColor: palette.warning,
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
+    },
+    error: {
+      color: palette.errorDark,
+      bgColor: palette.errorLight,
+      borderColor: palette.error,
+      borderLeftColor: palette.error,
+      hoverBgColor: palette.errorLight,
+      hoverBorder: palette.error
+    },
+    info: {
+      color: palette.infoDark,
+      bgColor: palette.infoLight,
+      borderColor: palette.info,
+      borderLeftColor: palette.info,
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
+    }
+  };
+  if (disabled)
+    return {
+      ...colors.default,
+      color: palette.accents_4,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      borderLeftColor: palette.accents_3,
+      hoverBgColor: palette.accents_2,
+      hoverBorder: palette.accents_3
+    };
+  return type ? colors[type] : colors.default;
+};
+
+// core/ButtonDropdown/Icon.tsx
+import _JSXStyle from "styled-jsx/style";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ButtonDropdownIcon({
+  color,
+  height
+}) {
+  return /* @__PURE__ */ jsxs("svg", { stroke: color, style: {
+    color
+  }, viewBox: "0 0 24 24", width: height, height, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", className: "jsx-3359574434", children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", className: "jsx-3359574434" }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "3359574434", children: "svg.jsx-3359574434{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}" })
+  ] });
+}
+ButtonDropdownIcon.displayName = "BolioUIButtonDropdownIcon";
+var Icon_default = ButtonDropdownIcon;
+
+// core/ButtonDropdown/ButtonDropdownItem.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { useMemo } from "react";
+
+// core/ButtonDropdown/ButtonDropdownContext.ts
+import React from "react";
+var defaultContext = {
+  type: "default",
+  auto: false,
+  disabled: false,
+  loading: false
+};
+var ButtonDropdownContext = React.createContext(defaultContext);
+var useButtonDropdown = () => React.useContext(ButtonDropdownContext);
+
+// core/ButtonDropdown/ButtonDropdownItem.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ButtonDropdownItem({
+  children,
+  onClick,
+  className = "",
+  main = false,
+  type: selfType = "default",
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    type: parentType,
+    disabled,
+    loading
+  } = useButtonDropdown();
+  const type = main ? parentType : selfType;
+  const colors = getColor(theme.palette, type, disabled);
+  const clickHandler = (event) => {
+    if (disabled || loading) return;
+    if (onClick) onClick(event);
+  };
+  const cursor = useMemo(() => {
+    if (loading) return "default";
+    return disabled ? "not-allowed" : "pointer";
+  }, [loading, disabled]);
+  return /* @__PURE__ */ jsxs2("button", { onClick: clickHandler, ...props, className: _JSXStyle2.dynamic([["313713234", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    loading ? /* @__PURE__ */ jsx2(Loading_default, {}) : children,
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "313713234", dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor], children: `button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;-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;vertical-align:middle;text-align:center;cursor:${cursor};box-sizing:border-box;margin:0;border:none;background-color:${colors.bgColor};color:${colors.color};width:100%;height:var(--bolio-ui-dropdown-height);min-width:var(--bolio-ui-dropdown-min-width);padding:var(--bolio-ui-dropdown-padding);font-size:var(--bolio-ui-dropdown-font-size);font-weight:bold;}button.__jsx-style-dynamic-selector:hover{border-color:${colors.hoverBorder};background-color:${colors.hoverBgColor};}` })
+  ] });
+}
+ButtonDropdownItem.displayName = "BolioUIButtonDropdownItem";
+var ButtonDropdownItem_default = ButtonDropdownItem;
+
+// core/ButtonDropdown/ButtonDropdown.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var stopPropagation = (event) => {
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};
+var ButtonDropdownComponent = React3.forwardRef(({
+  children,
+  type = "default",
+  auto = false,
+  className = "",
+  disabled = false,
+  loading = false,
+  icon,
+  ...props
+}, ref) => {
+  const {
+    SCALES
+  } = use_scale_default();
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current);
+  const theme = use_theme_default();
+  const colors = getColor(theme.palette, type);
+  const itemChildren = pickChild(children, ButtonDropdownItem_default)[1];
+  const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(itemChildren, "main", true);
+  const [visible, setVisible] = useState(false);
+  const clickHandler = useCallback((event) => {
+    event.preventDefault();
+    stopPropagation(event);
+    if (disabled || loading) return;
+    setVisible(!visible);
+  }, [disabled, loading, visible]);
+  const initialValue = {
+    type,
+    auto,
+    disabled,
+    loading
+  };
+  const bgColor = useMemo2(() => {
+    if (disabled || loading) return theme.palette.accents_2;
+    return visible ? colors.hoverBgColor : colors.bgColor;
+  }, [disabled, loading, theme.palette.accents_2, visible, colors.hoverBgColor, colors.bgColor]);
+  const [paddingLeft, paddingRight] = [auto ? SCALES.pl(1.15) : SCALES.pl(1.375), auto ? SCALES.pr(1.15) : SCALES.pr(1.375)];
+  use_click_away_default(innerRef, () => setVisible(false));
+  return /* @__PURE__ */ jsx3(ButtonDropdownContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsxs3("div", { ref: innerRef, onClick: stopPropagation, ...props, className: _JSXStyle3.dynamic([["339827776", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || use_classes_default("btn-dropdown", className) || ""), children: [
+    mainItemChildren,
+    /* @__PURE__ */ jsxs3("details", { open: visible, className: _JSXStyle3.dynamic([["339827776", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]), children: [
+      /* @__PURE__ */ jsx3("summary", { "aria-label": "More options", onClick: clickHandler, className: _JSXStyle3.dynamic([["339827776", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]), children: /* @__PURE__ */ jsx3("div", { className: _JSXStyle3.dynamic([["339827776", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " dropdown-box", children: icon ? /* @__PURE__ */ jsx3("span", { style: {
+        color: disabled || loading ? theme.palette.error : colors.color,
+        height: SCALES.height(2.5),
+        width: SCALES.height(2.5)
+      }, className: _JSXStyle3.dynamic([["339827776", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " dropdown-icon", children: icon }) : /* @__PURE__ */ jsx3(Icon_default, { color: disabled || loading ? theme.palette.accents_4 : colors.color, height: SCALES.height(2.5) }) }) }),
+      /* @__PURE__ */ jsx3("div", { className: _JSXStyle3.dynamic([["339827776", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " content", children: itemChildrenWithoutMain })
+    ] }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "339827776", dynamic: [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? "min-content" : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? "not-allowed" : "pointer", colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius], children: `.btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border-radius:${theme.layout.radius};--bolio-ui-dropdown-height:${SCALES.height(2.5)};--bolio-ui-dropdown-min-width:${auto ? "min-content" : SCALES.width(10.5)};--bolio-ui-dropdown-padding:${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft};--bolio-ui-dropdown-font-size:${SCALES.font(0.875)};}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:${theme.layout.radius};border-bottom-left-radius:${theme.layout.radius};}details.__jsx-style-dynamic-selector{border-top-right-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:${SCALES.height(2.5)};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;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:${colors.color};background-color:${bgColor};height:${SCALES.height(2.5)};cursor:${disabled || loading ? "not-allowed" : "pointer"};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;width:auto;padding:0 1px;-webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;transition: background 0.2s ease 0s, border-color 0.2s ease 0s;}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowSmall};-webkit-transform:translateY(${theme.layout.gapHalf});-ms-transform:translateY(${theme.layout.gapHalf});transform:translateY(${theme.layout.gapHalf});background-color:${theme.palette.background};}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:${theme.layout.radius};border-top-right-radius:${theme.layout.radius};}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};}.dropdown-icon.__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;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}` })
+  ] }) });
+});
+ButtonDropdownComponent.displayName = "BolioUIButtonDropdown";
+var ButtonDropdown = with_scale_default(ButtonDropdownComponent);
+var ButtonDropdown_default = ButtonDropdown;
+
+// core/ButtonDropdown/index.ts
+ButtonDropdown_default.Item = ButtonDropdownItem_default;
+var ButtonDropdown_default2 = ButtonDropdown_default;
+
+export {
+  ButtonDropdown_default2 as ButtonDropdown_default
+};

package/esm/chunk-YDYRM2KN.js

@@ -0,0 +1,25 @@
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+
+// core/use-modal/use-modal.ts
+var useModal = (initialVisible = false) => {
+  const [visible, setVisible, currentRef] = use_current_state_default(initialVisible);
+  return {
+    visible,
+    setVisible,
+    currentRef,
+    bindings: {
+      visible,
+      onClose: () => setVisible(false)
+    }
+  };
+};
+var use_modal_default = useModal;
+
+// core/use-modal/index.ts
+var use_modal_default2 = use_modal_default;
+
+export {
+  use_modal_default2 as use_modal_default
+};

package/esm/chunk-YFQOB5OC.js

@@ -0,0 +1,204 @@
+import {
+  use_toasts_default
+} from "./chunk-NCUSKYUE.js";
+import {
+  use_clipboard_default
+} from "./chunk-C3ZZPIUO.js";
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.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/Snippet/Snippet.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React2, { useMemo, useRef } from "react";
+
+// core/Snippet/styles.ts
+var getStyles = (type, palette, { fill, light, ghost, subtle } = {}) => {
+  if (isSemanticColorType(type)) {
+    if (subtle) {
+      const { bg, border, color } = getVariantColors(palette, type, "subtle");
+      return { color, border, bgColor: bg };
+    }
+    if (light) {
+      const { bg, border, color } = getVariantColors(palette, type, "light");
+      return { color, border, bgColor: bg };
+    }
+    if (ghost) {
+      const { bg, border, color } = getVariantColors(palette, type, "outline");
+      return { color, border, bgColor: bg };
+    }
+  }
+  const styles = {
+    default: {
+      color: palette.foreground,
+      border: palette.accents_2,
+      bgColor: palette.accents_2
+    },
+    primary: {
+      color: palette.primary,
+      border: palette.primary,
+      bgColor: palette.accents_1
+    },
+    secondary: {
+      color: palette.secondary,
+      border: palette.secondary,
+      bgColor: palette.accents_1
+    },
+    success: {
+      color: palette.success,
+      border: palette.success,
+      bgColor: palette.accents_1
+    },
+    warning: {
+      color: palette.warning,
+      border: palette.warning,
+      bgColor: palette.accents_1
+    },
+    error: {
+      color: palette.error,
+      border: palette.error,
+      bgColor: palette.accents_1
+    },
+    info: {
+      color: palette.info,
+      border: palette.info,
+      bgColor: palette.accents_1
+    },
+    lite: {
+      color: palette.foreground,
+      border: palette.border,
+      bgColor: palette.accents_1
+    },
+    dark: {
+      color: palette.background,
+      border: palette.foreground,
+      bgColor: palette.foreground
+    }
+  };
+  const filledTypes = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "error",
+    "info"
+  ];
+  const style = styles[type];
+  const shouldFilled = filledTypes.includes(type);
+  if (!fill || !shouldFilled) return style;
+  return {
+    ...style,
+    color: style.bgColor,
+    bgColor: style.color
+  };
+};
+
+// core/Snippet/SnippetIcon.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SnippetIconComponent() {
+  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: "jsx-418323402", children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z", className: "jsx-418323402" }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "418323402", children: "svg.jsx-418323402{width:calc(var(--snippet-font-size) * 1.69);height:calc(var(--snippet-font-size) * 1.69);}" })
+  ] });
+}
+SnippetIconComponent.displayName = "BolioUISnippetIcon";
+var SnippetIcon = React.memo(SnippetIconComponent);
+var SnippetIcon_default = SnippetIcon;
+
+// core/utils/use-clipboard.ts
+var use_clipboard_default2 = use_clipboard_default;
+
+// core/Snippet/Snippet.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var textArrayToString = (text) => {
+  return text.reduce((pre, current) => {
+    if (!current) return pre;
+    return pre ? `${pre}
+${current}` : current;
+  }, "");
+};
+var SnippetComponent = React2.forwardRef(({
+  type = "default",
+  filled = false,
+  light = false,
+  ghost = false,
+  subtle = false,
+  rounded = false,
+  children,
+  symbol = "$",
+  toastText = "Copied!",
+  toastType = "primary",
+  text,
+  copy: copyType,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const {
+    copy
+  } = use_clipboard_default2();
+  const {
+    setToast
+  } = use_toasts_default();
+  const preRef = useRef(null);
+  const isMultiLine = text && Array.isArray(text);
+  const style = useMemo(() => getStyles(type, theme.palette, {
+    fill: filled,
+    light,
+    ghost,
+    subtle
+  }), [type, theme.palette, filled, light, ghost, subtle]);
+  const showCopyIcon = useMemo(() => copyType !== "prevent", [copyType]);
+  const childText = useMemo(() => {
+    if (isMultiLine) return textArrayToString(text);
+    if (!children) return text;
+    if (!preRef.current) return "";
+    return preRef.current.textContent;
+  }, [isMultiLine, text, children]);
+  const symbolBefore = useMemo(() => {
+    const str = symbol.trim();
+    return str ? `${str} ` : "";
+  }, [symbol]);
+  const clickHandler = () => {
+    if (!childText || !showCopyIcon) return;
+    copy(childText);
+    if (copyType === "silent") return;
+    setToast({
+      text: toastText,
+      type: toastType
+    });
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref, ...props, className: _JSXStyle2.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]) + " " + (props && props.className != null && props.className || use_classes_default("snippet", className) || ""), children: [
+    isMultiLine ? text.map((t, index) => /* @__PURE__ */ jsx2("pre", { className: _JSXStyle2.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]), children: t }, `snippet-${index}-${t}`)) : /* @__PURE__ */ jsx2("pre", { ref: preRef, className: _JSXStyle2.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]), children: children || text }),
+    showCopyIcon && /* @__PURE__ */ jsx2("div", { onClick: clickHandler, className: _JSXStyle2.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]) + " copy", children: /* @__PURE__ */ jsx2(SnippetIcon_default, {}) }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "3243552610", dynamic: [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0], children: `.snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:${style.color};background-color:${style.bgColor};border:1px solid ${style.border};border-radius:${rounded ? "25px" : theme.layout.radius};--snippet-font-size:${SCALES.font(0.8125)};--snippet-padding-top:${SCALES.pt(0.667)};font-size:var(--snippet-font-size);width:${SCALES.width(1, "initial")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0.667)} ${SCALES.pr(2.667)} ${SCALES.pb(0.667)} ${SCALES.pl(0.667)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:${style.color};font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'${symbolBefore}';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:${style.bgColor};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:${isMultiLine ? "flex-start" : "center"};-webkit-box-align:${isMultiLine ? "flex-start" : "center"};-ms-flex-align:${isMultiLine ? "flex-start" : "center"};align-items:${isMultiLine ? "flex-start" : "center"};width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:${rounded ? "25px" : theme.layout.radius};cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:${isMultiLine ? "var(--snippet-padding-top)" : 0};opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}` })
+  ] });
+});
+SnippetComponent.displayName = "BolioUISnippet";
+var Snippet = with_scale_default(SnippetComponent);
+var Snippet_default = Snippet;
+
+// core/Snippet/index.ts
+var Snippet_default2 = Snippet_default;
+
+export {
+  Snippet_default2 as Snippet_default
+};