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

package/esm/chunk-SZIX7BM5.js

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

package/esm/chunk-T5BYQGC3.js

@@ -0,0 +1,79 @@
+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/Display/Display.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Display/Display.module.css.bolio-css-module-source
+var Display_module_css_default = { "display": "Display-module_display__CLUNC", "content": "Display-module_content__UhaMN", "caption": "Display-module_caption__hWuj5" };
+
+// core/Display/Display.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DisplayComponent = React.forwardRef(
+  ({
+    children,
+    caption = "",
+    shadow = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const classes = use_classes_default(Display_module_css_default.display, className);
+    const showShadow = useMemo(
+      () => shadow && theme.type !== "dark",
+      [theme.type, shadow]
+    );
+    const displayStyle = {
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(2.5)} ${SCALES.mr(0, "auto")} ${SCALES.mb(2.5)} ${SCALES.ml(0, "auto")}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...props, style: displayStyle, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: Display_module_css_default.content,
+          style: {
+            width: SCALES.width(1, "max-content"),
+            boxShadow: showShadow ? theme.expressiveness.shadowLarge : "none"
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: Display_module_css_default.caption,
+          style: {
+            color: theme.palette.accents_5,
+            margin: `${shadow ? "2.5em" : "1.3em"} auto 0`
+          },
+          children: caption
+        }
+      )
+    ] });
+  }
+);
+DisplayComponent.displayName = "BolioUIDisplay";
+var Display = with_scale_default(DisplayComponent);
+var Display_default = Display;
+
+// core/Display/index.ts
+var Display_default2 = Display_default;
+
+export {
+  Display_default2 as Display_default
+};

package/esm/chunk-T74YHCG6.js

@@ -0,0 +1,151 @@
+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/Toggle/Toggle.tsx
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Toggle/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      bg: palette.success
+    },
+    primary: {
+      bg: palette.primary
+    },
+    secondary: {
+      bg: palette.secondary
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    },
+    info: {
+      bg: palette.info
+    }
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Toggle/Toggle.module.css.bolio-css-module-source
+var Toggle_module_css_default = { "label": "Toggle-module_label__M08Fl", "input": "Toggle-module_input__Odswo", "toggle": "Toggle-module_toggle__-4tZB", "inner": "Toggle-module_inner__aQgyY", "disabled": "Toggle-module_disabled__klv4j", "checked": "Toggle-module_checked__53mGq" };
+
+// core/Toggle/Toggle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToggleComponent = React.forwardRef(
+  ({
+    initialChecked = false,
+    checked,
+    disabled = false,
+    onChange,
+    type = "default",
+    icon,
+    checkedIcon,
+    className = "",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [selfChecked, setSelfChecked] = useState(initialChecked);
+    const classes = use_classes_default(Toggle_module_css_default.toggle, {
+      [Toggle_module_css_default.checked]: selfChecked,
+      [Toggle_module_css_default.disabled]: disabled
+    });
+    const changeHandle = useCallback(
+      (ev) => {
+        if (disabled) return;
+        const selfEvent = {
+          target: {
+            checked: !selfChecked
+          },
+          stopPropagation: ev.stopPropagation,
+          preventDefault: ev.preventDefault,
+          nativeEvent: ev
+        };
+        setSelfChecked(!selfChecked);
+        if (onChange) onChange(selfEvent);
+      },
+      [disabled, selfChecked, onChange]
+    );
+    const { bg } = useMemo(
+      () => getColors(theme.palette, type),
+      [theme.palette, type]
+    );
+    useEffect(() => {
+      if (checked === void 0) return;
+      setSelfChecked(checked);
+    }, [checked]);
+    const labelStyle = {
+      cursor: disabled ? "not-allowed" : "pointer",
+      "--toggle-font-size": SCALES.font(1),
+      "--toggle-height": SCALES.height(1),
+      width: SCALES.width(1.75),
+      height: "var(--toggle-height)",
+      padding: `${SCALES.pt(0.1875)} ${SCALES.pr(0)} ${SCALES.pb(0.1875)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--toggle-focus-color": theme.palette.primary,
+      "--toggle-bg": theme.palette.accents_2,
+      "--toggle-inner-bg": theme.palette.accents_1,
+      "--toggle-disabled-border": theme.palette.accents_2,
+      "--toggle-disabled-bg": theme.palette.accents_1,
+      "--toggle-disabled-inner-bg": theme.palette.accents_2,
+      "--toggle-disabled-checked-border": theme.palette.accents_4,
+      "--toggle-disabled-checked-bg": theme.palette.accents_4,
+      "--toggle-checked-bg": bg,
+      "--toggle-icon-color": theme.palette.accents_6,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `${Toggle_module_css_default.label} ${className}`.trim(),
+        ...props,
+        style: labelStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              role: "switch",
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              disabled,
+              checked: selfChecked,
+              onChange: changeHandle,
+              className: Toggle_module_css_default.input
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("span", { className: Toggle_module_css_default.inner, children: selfChecked ? checkedIcon != null ? checkedIcon : icon : icon }) })
+        ]
+      }
+    );
+  }
+);
+ToggleComponent.displayName = "BolioUIToggle";
+var Toggle = with_scale_default(ToggleComponent);
+var Toggle_default = Toggle;
+
+// core/Toggle/index.ts
+var Toggle_default2 = Toggle_default;
+
+export {
+  Toggle_default2 as Toggle_default
+};

package/esm/chunk-TJUNBMNF.js

@@ -0,0 +1,65 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Marquee/Marquee.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Marquee/Marquee.module.css.bolio-css-module-source
+var Marquee_module_css_default = { "marquee": "Marquee-module_marquee__sIUoV", "track": "Marquee-module_track__mS66p", "pause": "Marquee-module_pause__rM3H6" };
+
+// core/Marquee/Marquee.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MarqueeComponent = React.forwardRef(
+  ({
+    duration = 30,
+    pauseOnHover = true,
+    reverse = false,
+    gap = "2rem",
+    className = "",
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const { SCALES } = use_scale_default();
+    const marqueeStyle = {
+      width: SCALES.width(1, "100%"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--marquee-duration": `${duration}s`,
+      "--marquee-gap": gap,
+      "--marquee-direction": reverse ? "reverse" : "normal",
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(
+          Marquee_module_css_default.marquee,
+          { [Marquee_module_css_default.pause]: pauseOnHover },
+          className
+        ),
+        style: marqueeStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: Marquee_module_css_default.track, children }),
+          /* @__PURE__ */ jsx("div", { className: Marquee_module_css_default.track, "aria-hidden": true, children })
+        ]
+      }
+    );
+  }
+);
+MarqueeComponent.displayName = "BolioUIMarquee";
+var Marquee = with_scale_default(MarqueeComponent);
+var Marquee_default = Marquee;
+
+// core/Marquee/index.ts
+var Marquee_default2 = Marquee_default;
+
+export {
+  Marquee_default2 as Marquee_default
+};