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

package/esm/chunk-A6N5PIXN.js

@@ -0,0 +1,166 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+
+// core/Text/Text.tsx
+import React2, { useMemo as useMemo2 } from "react";
+
+// core/Text/Child.tsx
+import React, { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var getTypeColor = (type, palette) => {
+  const colors = {
+    default: "inherit",
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return colors[type] || colors.default;
+};
+var TextChild = React.forwardRef(
+  ({
+    children,
+    tag,
+    className = "",
+    type = "default",
+    style,
+    ...props
+  }, ref) => {
+    const Component = tag;
+    const theme = use_theme_default();
+    const { SCALES, getScaleProps } = use_scale_default();
+    const font = getScaleProps("font");
+    const mx = getScaleProps([
+      "margin",
+      "marginLeft",
+      "marginRight",
+      "mx",
+      "ml",
+      "mr"
+    ]);
+    const my = getScaleProps([
+      "margin",
+      "marginTop",
+      "marginBottom",
+      "my",
+      "mt",
+      "mb"
+    ]);
+    const px = getScaleProps([
+      "padding",
+      "paddingLeft",
+      "paddingRight",
+      "pl",
+      "pr",
+      "px"
+    ]);
+    const py = getScaleProps([
+      "padding",
+      "paddingTop",
+      "paddingBottom",
+      "pt",
+      "pb",
+      "py"
+    ]);
+    const color = useMemo(
+      () => getTypeColor(type, theme.palette),
+      [type, theme.palette]
+    );
+    const childStyle = {
+      color,
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      ...typeof font !== "undefined" && {
+        fontSize: SCALES.font(1, "inherit")
+      },
+      ...typeof mx !== "undefined" && {
+        marginLeft: SCALES.ml(0, "revert"),
+        marginRight: SCALES.mr(0, "revert")
+      },
+      ...typeof my !== "undefined" && {
+        marginTop: SCALES.mt(0, "revert"),
+        marginBottom: SCALES.mb(0, "revert")
+      },
+      ...typeof px !== "undefined" && {
+        paddingLeft: SCALES.pl(0, "revert"),
+        paddingRight: SCALES.pr(0, "revert")
+      },
+      ...typeof py !== "undefined" && {
+        paddingTop: SCALES.pt(0, "revert"),
+        paddingBottom: SCALES.pb(0, "revert")
+      },
+      ...style
+    };
+    return /* @__PURE__ */ jsx(Component, { ref, className, ...props, style: childStyle, children });
+  }
+);
+TextChild.displayName = "BolioUITextChild";
+var Child_default = TextChild;
+
+// core/Text/Text.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var getModifierChild = (tags, children) => {
+  if (!tags.length) return children;
+  const nextTag = tags.slice(1, tags.length);
+  return /* @__PURE__ */ jsx2(Child_default, { tag: tags[0], children: getModifierChild(nextTag, children) });
+};
+var TextComponent = React2.forwardRef(
+  ({
+    h1 = false,
+    h2 = false,
+    h3 = false,
+    h4 = false,
+    h5 = false,
+    h6 = false,
+    p = false,
+    b = false,
+    small = false,
+    i = false,
+    span = false,
+    del = false,
+    em = false,
+    blockquote = false,
+    children,
+    className = "",
+    ...props
+  }, ref) => {
+    const elements = { h1, h2, h3, h4, h5, h6, p, blockquote };
+    const inlineElements = { span, small, b, em, i, del };
+    const names = Object.keys(elements).filter(
+      (name) => elements[name]
+    );
+    const inlineNames = Object.keys(inlineElements).filter(
+      (name) => inlineElements[name]
+    );
+    const tag = useMemo2(() => {
+      if (names[0]) return names[0];
+      if (inlineNames[0]) return inlineNames[0];
+      return "p";
+    }, [names, inlineNames]);
+    const renderableChildElements = inlineNames.filter(
+      (name) => name !== tag
+    );
+    const modifers = useMemo2(() => {
+      if (!renderableChildElements.length) return children;
+      return getModifierChild(renderableChildElements, children);
+    }, [renderableChildElements, children]);
+    return /* @__PURE__ */ jsx2(Child_default, { ref, className, tag, ...props, children: modifers });
+  }
+);
+TextComponent.displayName = "BolioUIText";
+var Text = with_scale_default(TextComponent);
+var Text_default = Text;
+
+// core/Text/index.ts
+var Text_default2 = Text_default;
+
+export {
+  Text_default2 as Text_default
+};

package/esm/chunk-AFBCMW2I.js

@@ -0,0 +1,100 @@
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+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/Note/Note.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Note/Note.module.css.bolio-css-module-source
+var Note_module_css_default = { "note": "Note-module_note__wbhzd", "label": "Note-module_label__MJvQf" };
+
+// core/Note/Note.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getStatusColor = (type, {
+  filled,
+  light,
+  subtle
+}, theme) => {
+  if (isSemanticColorType(type)) {
+    const variant = subtle ? "subtle" : light ? "light" : filled ? "filled" : "outline";
+    const { bg, border, color } = getVariantColors(theme.palette, type, variant);
+    return { color, borderColor: border, bgColor: bg };
+  }
+  const neutral = theme.palette.accents_6;
+  if (!filled)
+    return {
+      color: neutral,
+      borderColor: neutral,
+      bgColor: theme.palette.background
+    };
+  return { color: "white", borderColor: neutral, bgColor: neutral };
+};
+var NoteComponent = React.forwardRef(
+  ({
+    children,
+    type = "default",
+    label = "note",
+    filled = false,
+    light = false,
+    subtle = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const { color, borderColor, bgColor } = useMemo(
+      () => getStatusColor(type, { filled, light, subtle }, theme),
+      [type, filled, light, subtle, theme]
+    );
+    const noteStyle = {
+      border: `1px solid ${borderColor}`,
+      color,
+      backgroundColor: bgColor,
+      borderRadius: theme.layout.radius,
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0.667)} ${SCALES.pr(1.32)} ${SCALES.pb(0.667)} ${SCALES.pl(1.32)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Note_module_css_default.note, className),
+        ...props,
+        style: noteStyle,
+        children: [
+          label && /* @__PURE__ */ jsx("span", { className: Note_module_css_default.label, children: /* @__PURE__ */ jsxs("b", { children: [
+            label,
+            ":"
+          ] }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+NoteComponent.displayName = "BolioUINote";
+var Note = with_scale_default(NoteComponent);
+var Note_default = Note;
+
+// core/Note/index.ts
+var Note_default2 = Note_default;
+
+export {
+  Note_default2 as Note_default
+};

package/esm/chunk-AHWF22ZQ.js

@@ -0,0 +1,97 @@
+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/Timeline/Timeline.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Timeline/Timeline.module.css.bolio-css-module-source
+var Timeline_module_css_default = { "timeline": "Timeline-module_timeline__vSb-z", "item": "Timeline-module_item__F3aBP", "marker": "Timeline-module_marker__e1-0Y", "dot": "Timeline-module_dot__clYtj", "head": "Timeline-module_head__XzyXQ", "title": "Timeline-module_title__f6uWv", "time": "Timeline-module_time__OBQ6X", "body": "Timeline-module_body__oTyvi" };
+
+// core/Timeline/Timeline.tsx
+import { jsx } from "react/jsx-runtime";
+var TimelineComponent = React.forwardRef(({ className = "", style, children, ...props }, ref) => {
+  const { SCALES } = use_scale_default();
+  const timelineStyle = {
+    fontSize: SCALES.font(1),
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: use_classes_default(Timeline_module_css_default.timeline, className),
+      style: timelineStyle,
+      ...props,
+      children
+    }
+  );
+});
+TimelineComponent.displayName = "BolioUITimeline";
+var Timeline = with_scale_default(TimelineComponent);
+var Timeline_default = Timeline;
+
+// core/Timeline/TimelineItem.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TimelineItem = React2.forwardRef(({ title, time, icon, className = "", children, ...props }, ref) => {
+  const theme = use_theme_default();
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: use_classes_default(Timeline_module_css_default.item, className),
+      style: { "--timeline-line": theme.palette.accents_3 },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: Timeline_module_css_default.marker,
+            style: {
+              color: theme.palette.foreground,
+              backgroundColor: icon ? theme.palette.accents_2 : void 0
+            },
+            children: icon || /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: Timeline_module_css_default.dot,
+                style: { backgroundColor: theme.palette.foreground }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: Timeline_module_css_default.head, children: [
+          /* @__PURE__ */ jsx2("span", { className: Timeline_module_css_default.title, children: title }),
+          time && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: Timeline_module_css_default.time,
+              style: { color: theme.palette.accents_5 },
+              children: time
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsx2("div", { className: Timeline_module_css_default.body, style: { color: theme.palette.accents_5 }, children })
+      ]
+    }
+  );
+});
+TimelineItem.displayName = "BolioUITimelineItem";
+var TimelineItem_default = TimelineItem;
+
+// core/Timeline/index.ts
+Timeline_default.Item = TimelineItem_default;
+var Timeline_default2 = Timeline_default;
+
+export {
+  Timeline_default2 as Timeline_default
+};

package/esm/chunk-BJRUC4XL.js

@@ -0,0 +1,40 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Section/Section.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var SectionComponent = React.forwardRef(({ children, bg = "transparent", className = "", style, ...props }, ref) => {
+  const { SCALES } = use_scale_default();
+  const sectionStyle = {
+    backgroundColor: bg,
+    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)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref,
+      className: use_classes_default("section", className),
+      ...props,
+      style: sectionStyle,
+      children
+    }
+  );
+});
+SectionComponent.displayName = "BolioUISection";
+var Section = with_scale_default(SectionComponent);
+var Section_default = Section;
+
+// core/Section/index.ts
+var Section_default2 = Section_default;
+
+export {
+  Section_default2 as Section_default
+};

package/esm/chunk-CGEUUDJ4.js

@@ -0,0 +1,250 @@
+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-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Snippet/Snippet.tsx
+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 React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Snippet/SnippetIcon.module.css.bolio-css-module-source
+var SnippetIcon_module_css_default = { "icon": "SnippetIcon-module_icon__HUZlq" };
+
+// core/Snippet/SnippetIcon.tsx
+import { jsx } from "react/jsx-runtime";
+function SnippetIconComponent() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: SnippetIcon_module_css_default.icon,
+      style: { color: "currentcolor" },
+      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" })
+    }
+  );
+}
+SnippetIconComponent.displayName = "BolioUISnippetIcon";
+var SnippetIcon = React.memo(SnippetIconComponent);
+var SnippetIcon_default = SnippetIcon;
+
+// core/utils/use-clipboard.ts
+var use_clipboard_default2 = use_clipboard_default;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Snippet/Snippet.module.css.bolio-css-module-source
+var Snippet_module_css_default = { "snippet": "Snippet-module_snippet__M4eX8", "copy": "Snippet-module_copy__vSMCk" };
+
+// core/Snippet/Snippet.tsx
+import { jsx as jsx2, jsxs } 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 = "",
+    style: styleProp,
+    ...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 });
+    };
+    const fontSize = SCALES.font(0.8125);
+    const borderRadius = rounded ? "25px" : theme.layout.radius;
+    const snippetStyle = {
+      color: style.color,
+      backgroundColor: style.bgColor,
+      border: `1px solid ${style.border}`,
+      borderRadius,
+      fontSize,
+      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)}`,
+      ...{
+        "--snippet-symbol": JSON.stringify(symbolBefore)
+      },
+      ...styleProp
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Snippet_module_css_default.snippet, className),
+        ...props,
+        style: snippetStyle,
+        children: [
+          isMultiLine ? text.map((t, index) => /* @__PURE__ */ jsx2("pre", { children: t }, `snippet-${index}-${t}`)) : /* @__PURE__ */ jsx2("pre", { ref: preRef, children: children || text }),
+          showCopyIcon && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: Snippet_module_css_default.copy,
+              onClick: clickHandler,
+              style: {
+                backgroundColor: style.bgColor,
+                alignItems: isMultiLine ? "flex-start" : "center",
+                width: `calc(3.281 * ${fontSize})`,
+                borderRadius,
+                paddingTop: isMultiLine ? SCALES.pt(0.667) : 0
+              },
+              children: /* @__PURE__ */ jsx2(SnippetIcon_default, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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
+};