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

package/dist/chunk-JFNYQSEZ.js

@@ -0,0 +1,200 @@
+"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 _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Grid/Grid.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Grid/BasicItem.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Grid/BasicItem.module.css.bolio-css-module-source
+var BasicItem_module_css_default = { "item": "BasicItem-module_item__Jar5a", "justify": "BasicItem-module_justify__RY7v5", "direction": "BasicItem-module_direction__DKP7a", "alignContent": "BasicItem-module_alignContent__KMzjY", "alignItems": "BasicItem-module_alignItems__0o0MQ", "xs": "BasicItem-module_xs__VjPCw", "sm": "BasicItem-module_sm__83Nx4", "md": "BasicItem-module_md__-XqXQ", "lg": "BasicItem-module_lg__1gvck", "xl": "BasicItem-module_xl__zTNsS" };
+
+// core/Grid/BasicItem.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var defaultProps = {
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  className: ""
+};
+var getItemLayout = (val) => {
+  const display = val === 0 ? "none" : "block";
+  if (typeof val === "number") {
+    const width = 100 / 12 * val;
+    const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
+    return {
+      grow: 0,
+      display,
+      width: ratio,
+      basis: ratio
+    };
+  }
+  return {
+    grow: 1,
+    display,
+    width: "100%",
+    basis: "0"
+  };
+};
+var GridBasicItem = _react2.default.forwardRef(
+  ({
+    xs = defaultProps.xs,
+    sm = defaultProps.sm,
+    md = defaultProps.md,
+    lg = defaultProps.lg,
+    xl = defaultProps.xl,
+    justify,
+    direction,
+    alignItems,
+    alignContent,
+    children,
+    className = defaultProps.className,
+    style,
+    ...props
+  }, ref) => {
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const classes = _react.useMemo.call(void 0, () => {
+      const aligns = {
+        [BasicItem_module_css_default.justify]: justify,
+        [BasicItem_module_css_default.direction]: direction,
+        [BasicItem_module_css_default.alignItems]: alignItems,
+        [BasicItem_module_css_default.alignContent]: alignContent,
+        [BasicItem_module_css_default.xs]: xs,
+        [BasicItem_module_css_default.sm]: sm,
+        [BasicItem_module_css_default.md]: md,
+        [BasicItem_module_css_default.lg]: lg,
+        [BasicItem_module_css_default.xl]: xl
+      };
+      const classString = Object.keys(aligns).reduce((pre, name) => {
+        if (aligns[name] !== void 0 && aligns[name] !== false)
+          return `${pre} ${name}`;
+        return pre;
+      }, "");
+      return _chunk5KUROAEPjs.joinClasses.call(void 0, BasicItem_module_css_default.item, classString, className);
+    }, [
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      className
+    ]);
+    const layout = _react.useMemo.call(void 0, 
+      () => ({
+        xs: getItemLayout(xs),
+        sm: getItemLayout(sm),
+        md: getItemLayout(md),
+        lg: getItemLayout(lg),
+        xl: getItemLayout(xl)
+      }),
+      [xs, sm, md, lg, xl]
+    );
+    const itemStyle = {
+      "--grid-font-size": SCALES.font(1, "inherit"),
+      "--grid-height": SCALES.height(1, "auto"),
+      "--grid-justify": justify,
+      "--grid-direction": direction,
+      "--grid-align-content": alignContent,
+      "--grid-align-items": alignItems,
+      "--grid-xs-grow": layout.xs.grow,
+      "--grid-xs-max-width": layout.xs.width,
+      "--grid-xs-basis": layout.xs.basis,
+      "--grid-xs-display": layout.xs.display,
+      "--grid-sm-grow": layout.sm.grow,
+      "--grid-sm-max-width": layout.sm.width,
+      "--grid-sm-basis": layout.sm.basis,
+      "--grid-sm-display": layout.sm.display,
+      "--grid-md-grow": layout.md.grow,
+      "--grid-md-max-width": layout.md.width,
+      "--grid-md-basis": layout.md.basis,
+      "--grid-md-display": layout.md.display,
+      "--grid-lg-grow": layout.lg.grow,
+      "--grid-lg-max-width": layout.lg.width,
+      "--grid-lg-basis": layout.lg.basis,
+      "--grid-lg-display": layout.lg.display,
+      "--grid-xl-grow": layout.xl.grow,
+      "--grid-xl-max-width": layout.xl.width,
+      "--grid-xl-basis": layout.xl.basis,
+      "--grid-xl-display": layout.xl.display,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: classes, ...props, style: itemStyle, children });
+  }
+);
+GridBasicItem.displayName = "BolioUIGridBasicItem";
+var BasicItem_default = GridBasicItem;
+
+// core/Grid/Grid.tsx
+
+var GridComponent = _react2.default.forwardRef(({ children, className = "", style, ...props }, ref) => {
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const gridGapUnit = "var(--grid-gap-unit)";
+  const gridStyle = {
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    boxSizing: "border-box",
+    padding: `${SCALES.pt(0, gridGapUnit)} ${SCALES.pr(0, gridGapUnit)} ${SCALES.pb(0, gridGapUnit)} ${SCALES.pl(0, gridGapUnit)}`,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BasicItem_default, { ref, className, style: gridStyle, ...props, children });
+});
+GridComponent.displayName = "BolioUIGrid";
+var Grid = _chunkMAICNLTYjs.with_scale_default.call(void 0, GridComponent);
+var Grid_default = Grid;
+
+// core/Grid/GridContainer.tsx
+
+
+var GridContainerComponent = _react2.default.forwardRef(
+  ({
+    gap = 0,
+    wrap = "wrap",
+    children,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const { unit, SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const gapUnit = _react.useMemo.call(void 0, () => `calc(${gap} * ${unit} * 1/3)`, [gap, unit]);
+    const containerStyle = {
+      "--grid-gap-unit": gapUnit,
+      display: "flex",
+      flexWrap: wrap,
+      boxSizing: "border-box",
+      width: SCALES.width(1, "100%"),
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      BasicItem_default,
+      {
+        ref,
+        className,
+        style: containerStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+GridContainerComponent.displayName = "BolioUIGridContainer";
+var GridContainer = _chunkMAICNLTYjs.with_scale_default.call(void 0, GridContainerComponent);
+var GridContainer_default = GridContainer;
+
+// core/Grid/index.ts
+Grid_default.Container = GridContainer_default;
+var Grid_default2 = Grid_default;
+
+
+
+exports.Grid_default = Grid_default2;

package/dist/chunk-JJFOGZ6V.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+// core/utils/use-resize.ts
+var _react = require('react');
+var useResize = (callback, immediatelyInvoke = true) => {
+  const latest = _chunkZRORQ2WHjs.use_latest_default.call(void 0, callback);
+  _react.useEffect.call(void 0, () => {
+    const fn = () => latest.current();
+    if (immediatelyInvoke) {
+      fn();
+    }
+    window.addEventListener("resize", fn);
+    return () => window.removeEventListener("resize", fn);
+  }, [immediatelyInvoke, latest]);
+};
+var use_resize_default = useResize;
+
+
+
+exports.use_resize_default = use_resize_default;

package/dist/chunk-KBZEYKCZ.js

@@ -0,0 +1,98 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+// core/Input/styles.ts
+var getColors = (palette, status, disabled, { filled, light, ghost, subtle } = {}) => {
+  if (disabled)
+    return {
+      color: palette.accents_4,
+      bgColor: palette.accents_1,
+      borderColor: palette.border,
+      hoverBgColor: palette.accents_1,
+      hoverBorder: palette.border,
+      focusBorder: palette.border,
+      placeholderColor: palette.accents_4,
+      iconColor: palette.accents_3
+    };
+  if (!status || !_chunkGJZT47MPjs.isSemanticColorType.call(void 0, status))
+    return {
+      color: palette.foreground,
+      bgColor: palette.background,
+      borderColor: palette.border,
+      hoverBgColor: palette.background,
+      hoverBorder: palette.accents_4,
+      focusBorder: palette.primary,
+      placeholderColor: palette.accents_6,
+      iconColor: palette.accents_5
+    };
+  const base = palette[status];
+  const dark = palette[`${status}Dark`];
+  if (subtle) {
+    const { bg, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, status, "subtle");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: palette[`${status}Light`],
+      hoverBgColor: palette[`${status}Light`],
+      hoverBorder: base,
+      focusBorder: dark,
+      placeholderColor: color,
+      iconColor: color
+    };
+  }
+  if (light) {
+    const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, status, "light");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: border,
+      hoverBgColor: bg,
+      hoverBorder: base,
+      focusBorder: dark,
+      placeholderColor: color,
+      iconColor: color
+    };
+  }
+  if (ghost) {
+    const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, status, "outline");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: border,
+      hoverBgColor: bg,
+      hoverBorder: dark,
+      focusBorder: dark,
+      placeholderColor: palette[`${status}Light`],
+      iconColor: color
+    };
+  }
+  if (filled) {
+    const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, status, "filled");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: border,
+      hoverBgColor: bg,
+      hoverBorder: dark,
+      focusBorder: dark,
+      placeholderColor: "rgba(255, 255, 255, 0.7)",
+      iconColor: color
+    };
+  }
+  return {
+    color: dark,
+    bgColor: palette[`${status}Light`],
+    borderColor: base,
+    hoverBgColor: palette[`${status}Light`],
+    hoverBorder: base,
+    focusBorder: dark,
+    placeholderColor: palette.accents_6,
+    iconColor: dark
+  };
+};
+
+
+
+exports.getColors = getColors;

package/dist/chunk-KWKFVS32.js

@@ -0,0 +1,225 @@
+"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/Stepper/Stepper.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Stepper/StepperContext.ts
+
+var StepperContext = _react2.default.createContext({
+  index: 0,
+  active: 0,
+  isLast: true,
+  orientation: "horizontal"
+});
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Stepper/Stepper.module.css.bolio-css-module-source
+var Stepper_module_css_default = { "stepper": "Stepper-module_stepper__voFJp", "vertical": "Stepper-module_vertical__XlHRx" };
+
+// core/Stepper/Stepper.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var StepperComponent = _react2.default.forwardRef(
+  ({
+    active,
+    onStepClick,
+    orientation = "horizontal",
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const steps = _react2.default.Children.toArray(children).filter(_react2.default.isValidElement);
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, Stepper_module_css_default.stepper, Stepper_module_css_default[orientation], className);
+    const stepperStyle = {
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      width: SCALES.width(1, "auto"),
+      fontSize: SCALES.font(0.875),
+      color: theme.palette.foreground,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { ref, className: classes, ...props, style: stepperStyle, children: steps.map((step, index) => {
+      var _a;
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        StepperContext.Provider,
+        {
+          value: {
+            index,
+            active,
+            isLast: index === steps.length - 1,
+            orientation,
+            onStepClick
+          },
+          children: step
+        },
+        (_a = step.key) != null ? _a : index
+      );
+    }) });
+  }
+);
+StepperComponent.displayName = "BolioUIStepper";
+var Stepper = _chunkMAICNLTYjs.with_scale_default.call(void 0, StepperComponent);
+var Stepper_default = Stepper;
+
+// core/Stepper/StepperStep.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Stepper/StepperStep.module.css.bolio-css-module-source
+var StepperStep_module_css_default = { "step": "StepperStep-module_step__Of2Aj", "last": "StepperStep-module_last__OvXfG", "vertical": "StepperStep-module_vertical__Nd0eQ", "head": "StepperStep-module_head__9GMkW", "indicator": "StepperStep-module_indicator__FCCY6", "text": "StepperStep-module_text__DxOjn", "label": "StepperStep-module_label__FPtyS", "description": "StepperStep-module_description__HyHso", "connector": "StepperStep-module_connector__8b1i-", "srOnly": "StepperStep-module_srOnly__1yOBy" };
+
+// core/Stepper/StepperStep.tsx
+
+var Check = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "path",
+  {
+    d: "M20 6 9 17l-5-5",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var StepperStep = _react2.default.forwardRef(
+  ({
+    label,
+    description,
+    icon,
+    error = false,
+    disabled = false,
+    className = "",
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { index, active, isLast, orientation, onStepClick } = _react.useContext.call(void 0, StepperContext);
+    const state = index < active ? "completed" : index === active ? "current" : "upcoming";
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+      StepperStep_module_css_default.step,
+      state,
+      StepperStep_module_css_default[orientation],
+      { [StepperStep_module_css_default.error]: error, [StepperStep_module_css_default.last]: isLast },
+      className
+    );
+    const status = error ? "Error" : state === "completed" ? "Completed" : "";
+    let indicatorStyle = {
+      color: theme.palette.accents_5,
+      border: `1px solid ${theme.palette.border}`,
+      backgroundColor: theme.palette.background
+    };
+    if (state === "current") {
+      indicatorStyle = {
+        ...indicatorStyle,
+        color: theme.palette.primary,
+        border: `2px solid ${theme.palette.primary}`
+      };
+    }
+    if (state === "completed") {
+      indicatorStyle = {
+        ...indicatorStyle,
+        color: theme.palette.background,
+        backgroundColor: theme.palette.primary,
+        border: `1px solid ${theme.palette.primary}`
+      };
+    }
+    if (error) {
+      indicatorStyle = {
+        ...indicatorStyle,
+        color: theme.palette.background,
+        backgroundColor: theme.palette.error,
+        border: `1px solid ${theme.palette.error}`
+      };
+    }
+    let labelStyle;
+    if (state === "upcoming") labelStyle = { color: theme.palette.accents_5 };
+    if (error) labelStyle = { color: theme.palette.error };
+    const connectorStyle = {
+      backgroundColor: state === "completed" ? theme.palette.primary : theme.palette.border
+    };
+    const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "span",
+        {
+          className: StepperStep_module_css_default.indicator,
+          style: indicatorStyle,
+          "aria-hidden": "true",
+          children: icon != null ? icon : error ? "!" : state === "completed" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Check, {}) : index + 1
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: StepperStep_module_css_default.text, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: StepperStep_module_css_default.label, style: labelStyle, children: label }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: StepperStep_module_css_default.description,
+            style: { color: theme.palette.accents_5 },
+            children: description
+          }
+        ),
+        status && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: StepperStep_module_css_default.srOnly, children: [
+          ", ",
+          status
+        ] })
+      ] })
+    ] });
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "li",
+      {
+        ref,
+        className: classes,
+        "aria-current": state === "current" ? "step" : void 0,
+        ...props,
+        children: [
+          onStepClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              className: StepperStep_module_css_default.head,
+              disabled,
+              style: {
+                borderRadius: theme.layout.radius,
+                "--stepper-focus-color": theme.palette.primary
+              },
+              onClick: () => onStepClick(index),
+              children: content
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: StepperStep_module_css_default.head,
+              style: { borderRadius: theme.layout.radius },
+              children: content
+            }
+          ),
+          !isLast && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: StepperStep_module_css_default.connector,
+              style: connectorStyle,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "BolioUIStepperStep";
+var StepperStep_default = StepperStep;
+
+// core/Stepper/index.ts
+Stepper_default.Step = StepperStep_default;
+var Stepper_default2 = Stepper_default;
+
+
+
+exports.Stepper_default = Stepper_default2;