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

package/esm/chunk-56NE4QGR.js

@@ -0,0 +1,284 @@
+import {
+  Image_default
+} from "./chunk-TWIOSRRP.js";
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  hasChild,
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Card/Card.tsx
+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"
+  };
+};
+
+// 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
+import { jsx } from "react/jsx-runtime";
+function CardFooterComponent({
+  children,
+  className = "",
+  disableAutoMargin = false,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const classes = use_classes_default(
+    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__ */ jsx("footer", { className: classes, ...props, style: footerStyle, children });
+}
+CardFooterComponent.displayName = "BolioUICardFooter";
+var CardFooter = with_scale_default(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
+import { jsx as jsx2 } from "react/jsx-runtime";
+function CardContentComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  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__ */ jsx2(
+    "div",
+    {
+      className: use_classes_default("content", CardContent_module_css_default.content, className),
+      ...props,
+      style: contentStyle,
+      children
+    }
+  );
+}
+CardContentComponent.displayName = "BolioUICardContent";
+var CardContent = with_scale_default(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
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CardComponent = React.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 = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const hoverShadow = useMemo(() => {
+      if (shadow) return theme.expressiveness.shadowMedium;
+      return hoverable || interactive ? theme.expressiveness.shadowSmall : "none";
+    }, [hoverable, interactive, 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);
+    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__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(
+          "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__ */ jsx3(CardContent_default, { children: withoutImageChildren }),
+          footerChildren
+        ]
+      }
+    );
+  }
+);
+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-5HRVN7L7.js

@@ -0,0 +1,16 @@
+import {
+  Themes_default
+} from "./chunk-SZIX7BM5.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-5KUROAEP.js

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

package/esm/chunk-5M4QUTS4.js

@@ -0,0 +1,74 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Stat/Stat.tsx
+import React from "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
+import { jsx, jsxs } from "react/jsx-runtime";
+var StatComponent = React.forwardRef(
+  ({ label, value, change, extra, className = "", style, ...props }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    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__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Stat_module_css_default.stat, className),
+        style: statStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: Stat_module_css_default.label,
+                style: { color: theme.palette.accents_5 },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: Stat_module_css_default.value, children: value }),
+            change && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: Stat_module_css_default.change,
+                style: {
+                  color: down ? theme.palette.error : theme.palette.success
+                },
+                children: change
+              }
+            )
+          ] }),
+          extra && /* @__PURE__ */ jsx("div", { className: Stat_module_css_default.extra, children: extra })
+        ]
+      }
+    );
+  }
+);
+StatComponent.displayName = "BolioUIStat";
+var Stat = with_scale_default(StatComponent);
+var Stat_default = Stat;
+
+// core/Stat/index.ts
+var Stat_default2 = Stat_default;
+
+export {
+  Stat_default2 as Stat_default
+};

package/esm/chunk-67WAS5AY.js

@@ -0,0 +1,84 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Skeleton/Skeleton.tsx
+import React from "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
+import { Fragment, jsx } from "react/jsx-runtime";
+var SkeletonComponent = React.forwardRef(
+  ({
+    lines = 1,
+    circle = false,
+    loading = true,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const hasChildren = children !== void 0 && children !== null;
+    const classes = use_classes_default(
+      Skeleton_module_css_default.skeleton,
+      { [Skeleton_module_css_default.circle]: circle },
+      className
+    );
+    if (hasChildren && !loading) return /* @__PURE__ */ jsx(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__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        "aria-busy": hasChildren || void 0,
+        "aria-hidden": hasChildren ? void 0 : true,
+        ...props,
+        style: skeletonStyle,
+        children: [...Array(count)].map((_, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: Skeleton_module_css_default.shape,
+            style: shapeStyle,
+            "aria-hidden": hasChildren || void 0
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+SkeletonComponent.displayName = "BolioUISkeleton";
+var Skeleton = with_scale_default(SkeletonComponent);
+var Skeleton_default = Skeleton;
+
+// core/Skeleton/index.ts
+var Skeleton_default2 = Skeleton_default;
+
+export {
+  Skeleton_default2 as Skeleton_default
+};