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

package/dist/chunk-4QA7Z7VP.js

@@ -0,0 +1,132 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk6ZBFUZSLjs = require('./chunk-6ZBFUZSL.js');
+
+
+var _chunkNEG5UNM6js = require('./chunk-NEG5UNM6.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Command/Command.tsx
+var _react = require('react');
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Command/Command.module.css.bolio-css-module-source
+var Command_module_css_default = { "command": "Command-module_command__Gmila", "list": "Command-module_list__6p8VU", "item": "Command-module_item__bARSH", "icon": "Command-module_icon__D2tGK", "label": "Command-module_label__tKuEy", "hint": "Command-module_hint__DZc8-", "empty": "Command-module_empty__UDNuo" };
+
+// core/Command/Command.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Command = ({
+  visible,
+  onClose,
+  items,
+  placeholder = "Type a command or search",
+  emptyText = "No results. Try another word.",
+  className = ""
+}) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const [active, setActive] = _react.useState.call(void 0, 0);
+  const filtered = _react.useMemo.call(void 0, () => {
+    const term = query.trim().toLowerCase();
+    return term ? items.filter((item) => item.label.toLowerCase().includes(term)) : items;
+  }, [items, query]);
+  _react.useEffect.call(void 0, () => {
+    if (!visible) return;
+    setQuery("");
+    setActive(0);
+  }, [visible]);
+  const select = (item) => {
+    var _a;
+    if (!item) return;
+    (_a = item.onSelect) == null ? void 0 : _a.call(item);
+    onClose == null ? void 0 : onClose();
+  };
+  const keyDownHandler = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      const count = filtered.length;
+      if (count) setActive((last) => (last + step + count) % count);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      select(filtered[active]);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk6ZBFUZSLjs.Modal_default,
+    {
+      visible,
+      onClose,
+      "aria-label": "Command",
+      wrapClassName: _chunk5KUROAEPjs.use_classes_default.call(void 0, Command_module_css_default.command, className),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { onKeyDown: keyDownHandler, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkNEG5UNM6js.Input_default,
+          {
+            autoFocus: true,
+            width: "100%",
+            placeholder,
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setActive(0);
+            },
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": "bolioui-command-list",
+            "aria-label": placeholder
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { id: "bolioui-command-list", role: "listbox", className: Command_module_css_default.list, children: [
+          filtered.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: Command_module_css_default.empty,
+              style: { color: theme.palette.accents_5 },
+              children: emptyText
+            }
+          ),
+          filtered.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              role: "option",
+              "aria-selected": index === active,
+              className: Command_module_css_default.item,
+              style: {
+                backgroundColor: index === active ? theme.palette.accents_2 : void 0
+              },
+              onMouseEnter: () => setActive(index),
+              onClick: () => select(item),
+              children: [
+                item.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Command_module_css_default.icon, children: item.icon }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Command_module_css_default.label, children: item.label }),
+                item.hint && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "span",
+                  {
+                    className: Command_module_css_default.hint,
+                    style: { color: theme.palette.accents_5 },
+                    children: item.hint
+                  }
+                )
+              ]
+            },
+            item.value
+          ))
+        ] })
+      ] })
+    }
+  );
+};
+Command.displayName = "BolioUICommand";
+var Command_default = Command;
+
+// core/Command/index.ts
+var Command_default2 = Command_default;
+
+
+
+exports.Command_default = Command_default2;

package/dist/chunk-56NE4QGR.js

@@ -0,0 +1,284 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkTWIOSRRPjs = require('./chunk-TWIOSRRP.js');
+
+
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Card/Card.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Card/styles.ts
+var getStyles = (type, palette, { isShadow, filled, ghost, subtle } = {}) => {
+  if (_chunkGJZT47MPjs.isSemanticColorType.call(void 0, type)) {
+    if (subtle) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "subtle");
+      return { color, bgColor: bg, borderColor: border };
+    }
+    if (ghost) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "outline");
+      return { color, bgColor: bg, borderColor: border };
+    }
+    if (filled) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, 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"
+  };
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Card/CardFooter.module.css.bolio-css-module-source
+var CardFooter_module_css_default = { "footer": "CardFooter-module_footer__8Kn09", "autoMargin": "CardFooter-module_autoMargin__Sthqq" };
+
+// core/Card/CardFooter.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function CardFooterComponent({
+  children,
+  className = "",
+  disableAutoMargin = false,
+  style,
+  ...props
+}) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+    CardFooter_module_css_default.footer,
+    {
+      [CardFooter_module_css_default.autoMargin]: !disableAutoMargin
+    },
+    className
+  );
+  const footerStyle = {
+    padding: `${SCALES.py(0.66)} ${SCALES.px(1.31)}`,
+    fontSize: SCALES.font(0.875),
+    borderTop: `1px solid ${theme.palette.border}`,
+    borderBottomLeftRadius: theme.layout.radius,
+    borderBottomRightRadius: theme.layout.radius,
+    minHeight: 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)}`,
+    "--card-footer-gap": theme.layout.gapQuarter,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "footer", { className: classes, ...props, style: footerStyle, children });
+}
+CardFooterComponent.displayName = "BolioUICardFooter";
+var CardFooter = _chunkMAICNLTYjs.with_scale_default.call(void 0, CardFooterComponent);
+var CardFooter_default = CardFooter;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Card/CardContent.module.css.bolio-css-module-source
+var CardContent_module_css_default = { "content": "CardContent-module_content__DDLlz" };
+
+// core/Card/CardContent.tsx
+
+function CardContentComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const contentStyle = {
+    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)}`,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "content", CardContent_module_css_default.content, className),
+      ...props,
+      style: contentStyle,
+      children
+    }
+  );
+}
+CardContentComponent.displayName = "BolioUICardContent";
+var CardContent = _chunkMAICNLTYjs.with_scale_default.call(void 0, CardContentComponent);
+var CardContent_default = CardContent;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Card/Card.module.css.bolio-css-module-source
+var Card_module_css_default = { "card": "Card-module_card__8s48l", "spotlight": "Card-module_spotlight__rAO8q", "glass": "Card-module_glass__Cn0c3", "interactive": "Card-module_interactive__rUtQX" };
+
+// core/Card/Card.tsx
+
+var CardComponent = _react2.default.forwardRef(
+  ({
+    children,
+    hoverable = false,
+    rounded,
+    bordered = false,
+    className = "",
+    shadow = false,
+    filled = false,
+    ghost = false,
+    subtle = false,
+    spotlight = false,
+    glass = false,
+    interactive = false,
+    type = "default",
+    style,
+    onMouseMove,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const hoverShadow = _react.useMemo.call(void 0, () => {
+      if (shadow) return theme.expressiveness.shadowMedium;
+      return hoverable || interactive ? theme.expressiveness.shadowSmall : "none";
+    }, [hoverable, interactive, shadow, theme.expressiveness]);
+    const { color, bgColor, borderColor } = _react.useMemo.call(void 0, 
+      () => getStyles(type, theme.palette, {
+        isShadow: shadow,
+        filled,
+        ghost,
+        subtle
+      }),
+      [type, theme.palette, shadow, filled, ghost, subtle]
+    );
+    const showBorder = bordered || ghost;
+    const [withoutFooterChildren, footerChildren] = _chunkUX2B3G6Ujs.pickChild.call(void 0, 
+      children,
+      CardFooter_default
+    );
+    const [withoutImageChildren, imageChildren] = _chunkUX2B3G6Ujs.pickChild.call(void 0, 
+      withoutFooterChildren,
+      _chunkTWIOSRRPjs.Image_default
+    );
+    const hasContent = _chunkUX2B3G6Ujs.hasChild.call(void 0, withoutImageChildren, CardContent_default);
+    const cardStyle = {
+      borderRadius: rounded ? "25px" : theme.layout.radius,
+      boxShadow: shadow ? theme.expressiveness.shadowSmall : "none",
+      color,
+      backgroundColor: glass ? `color-mix(in srgb, ${bgColor} 55%, transparent)` : 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-hover-shadow": hoverShadow,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+          "card",
+          Card_module_css_default.card,
+          {
+            [Card_module_css_default.spotlight]: spotlight,
+            [Card_module_css_default.glass]: glass,
+            [Card_module_css_default.interactive]: interactive
+          },
+          className
+        ),
+        tabIndex: interactive ? 0 : void 0,
+        onMouseMove: (event) => {
+          if (spotlight) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            event.currentTarget.style.setProperty(
+              "--x",
+              `${event.clientX - rect.left}px`
+            );
+            event.currentTarget.style.setProperty(
+              "--y",
+              `${event.clientY - rect.top}px`
+            );
+          }
+          onMouseMove == null ? void 0 : onMouseMove(event);
+        },
+        ...props,
+        style: cardStyle,
+        children: [
+          imageChildren,
+          hasContent ? withoutImageChildren : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardContent_default, { children: withoutImageChildren }),
+          footerChildren
+        ]
+      }
+    );
+  }
+);
+CardComponent.displayName = "BolioUICard";
+var Card = _chunkMAICNLTYjs.with_scale_default.call(void 0, 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;
+
+
+
+exports.Card_default = Card_default2;

package/dist/{chunk-UVCSH6DW.js → chunk-5HRVN7L7.js}

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkVCTKX4ASjs = require('./chunk-VCTKX4AS.js');
+var _chunkSZIX7BM5js = require('./chunk-SZIX7BM5.js');
 
 // core/use-all-themes/all-themes-context.ts
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var defaultAllThemesConfig = {
-  themes: _chunkVCTKX4ASjs.Themes_default.getPresets()
+  themes: _chunkSZIX7BM5js.Themes_default.getPresets()
 };
 var AllThemesContext = _react2.default.createContext(defaultAllThemesConfig);
 var useAllThemes = () => _react2.default.useContext(AllThemesContext);

package/dist/chunk-5M4QUTS4.js

@@ -0,0 +1,74 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Stat/Stat.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Stat/Stat.module.css.bolio-css-module-source
+var Stat_module_css_default = { "stat": "Stat-module_stat__aLq0n", "label": "Stat-module_label__SmGam", "value": "Stat-module_value__Nz3n9", "change": "Stat-module_change__cCQ6Q", "extra": "Stat-module_extra__R4o8v" };
+
+// core/Stat/Stat.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var StatComponent = _react2.default.forwardRef(
+  ({ label, value, change, extra, className = "", style, ...props }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const down = change == null ? void 0 : change.trim().startsWith("-");
+    const statStyle = {
+      width: SCALES.width(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Stat_module_css_default.stat, className),
+        style: statStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: Stat_module_css_default.label,
+                style: { color: theme.palette.accents_5 },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Stat_module_css_default.value, children: value }),
+            change && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: Stat_module_css_default.change,
+                style: {
+                  color: down ? theme.palette.error : theme.palette.success
+                },
+                children: change
+              }
+            )
+          ] }),
+          extra && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Stat_module_css_default.extra, children: extra })
+        ]
+      }
+    );
+  }
+);
+StatComponent.displayName = "BolioUIStat";
+var Stat = _chunkMAICNLTYjs.with_scale_default.call(void 0, StatComponent);
+var Stat_default = Stat;
+
+// core/Stat/index.ts
+var Stat_default2 = Stat_default;
+
+
+
+exports.Stat_default = Stat_default2;

package/dist/chunk-67WAS5AY.js

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Skeleton/Skeleton.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Skeleton/Skeleton.module.css.bolio-css-module-source
+var Skeleton_module_css_default = { "skeleton": "Skeleton-module_skeleton__c22xA", "shape": "Skeleton-module_shape__j2aRX", "skeletonShimmer": "Skeleton-module_skeletonShimmer__Yz1Km", "circle": "Skeleton-module_circle__xNX3i" };
+
+// core/Skeleton/Skeleton.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var SkeletonComponent = _react2.default.forwardRef(
+  ({
+    lines = 1,
+    circle = false,
+    loading = true,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const hasChildren = children !== void 0 && children !== null;
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+      Skeleton_module_css_default.skeleton,
+      { [Skeleton_module_css_default.circle]: circle },
+      className
+    );
+    if (hasChildren && !loading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
+    const width = SCALES.width(1, circle ? "2.5em" : "100%");
+    const height = SCALES.height(1, circle ? width : "1em");
+    const count = circle ? 1 : Math.max(1, Math.floor(lines));
+    const skeletonStyle = {
+      width,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    const shapeStyle = {
+      height,
+      borderRadius: theme.layout.radius,
+      "--skeleton-shimmer-1": theme.palette.accents_1,
+      "--skeleton-shimmer-2": theme.palette.accents_2
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: classes,
+        "aria-busy": hasChildren || void 0,
+        "aria-hidden": hasChildren ? void 0 : true,
+        ...props,
+        style: skeletonStyle,
+        children: [...Array(count)].map((_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: Skeleton_module_css_default.shape,
+            style: shapeStyle,
+            "aria-hidden": hasChildren || void 0
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+SkeletonComponent.displayName = "BolioUISkeleton";
+var Skeleton = _chunkMAICNLTYjs.with_scale_default.call(void 0, SkeletonComponent);
+var Skeleton_default = Skeleton;
+
+// core/Skeleton/index.ts
+var Skeleton_default2 = Skeleton_default;
+
+
+
+exports.Skeleton_default = Skeleton_default2;