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

package/esm/chunk-ISLUC2SD.js

@@ -0,0 +1,140 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.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/Textarea/Textarea.tsx
+import React, {
+  useRef,
+  useImperativeHandle,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Textarea/Textarea.module.css.bolio-css-module-source
+var Textarea_module_css_default = { "wrapper": "Textarea-module_wrapper__AgIvs", "hover": "Textarea-module_hover__pK4xh", "disabled": "Textarea-module_disabled__M-zKD", "textarea": "Textarea-module_textarea__F0GAR" };
+
+// core/Textarea/Textarea.tsx
+import { jsx } from "react/jsx-runtime";
+var TextareaComponent = React.forwardRef(
+  ({
+    type = "default",
+    disabled = false,
+    readOnly = false,
+    onFocus,
+    onBlur,
+    className = "",
+    initialValue = "",
+    onChange,
+    value,
+    placeholder,
+    resize = "none",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const textareaRef = useRef(null);
+    useImperativeHandle(ref, () => textareaRef.current);
+    const isControlledComponent = useMemo(() => value !== void 0, [value]);
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const [hover, setHover] = useState(false);
+    const colors = useMemo(
+      () => getColors(theme.palette, type, disabled, {
+        filled,
+        light,
+        ghost,
+        subtle
+      }),
+      [theme.palette, type, disabled, filled, light, ghost, subtle]
+    );
+    const classes = use_classes_default(
+      Textarea_module_css_default.wrapper,
+      { [Textarea_module_css_default.hover]: hover, [Textarea_module_css_default.disabled]: disabled },
+      className
+    );
+    const changeHandler = (event) => {
+      if (disabled || readOnly) return;
+      setSelfValue(event.target.value);
+      if (onChange) onChange(event);
+    };
+    const focusHandler = (e) => {
+      setHover(true);
+      if (onFocus) onFocus(e);
+    };
+    const blurHandler = (e) => {
+      setHover(false);
+      if (onBlur) onBlur(e);
+    };
+    useEffect(() => {
+      if (isControlledComponent) {
+        setSelfValue(value);
+      }
+    }, [isControlledComponent, value]);
+    const controlledValue = isControlledComponent ? { value: selfValue } : { defaultValue: initialValue };
+    const textareaProps = {
+      ...props,
+      ...controlledValue
+    };
+    const wrapperStyle = {
+      "--textarea-radius": rounded ? "25px" : theme.layout.radius,
+      "--textarea-border": colors.borderColor,
+      "--textarea-color": colors.color,
+      "--textarea-hover-border": colors.hoverBorder,
+      "--textarea-hover-bg": colors.hoverBgColor,
+      "--textarea-focus-border": colors.focusBorder,
+      "--textarea-bg": colors.bgColor,
+      "--textarea-placeholder-color": colors.placeholderColor,
+      "--textarea-font-family": theme.font.sans,
+      "--textarea-font-size": SCALES.font(0.875),
+      "--textarea-resize": resize,
+      "--textarea-autofill-bg": colors.bgColor === "transparent" ? theme.palette.background : colors.bgColor,
+      "--textarea-autofill-color": colors.color,
+      width: SCALES.width(1, "initial"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    };
+    return /* @__PURE__ */ jsx("div", { className: classes, style: wrapperStyle, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        disabled,
+        placeholder,
+        readOnly,
+        onFocus: focusHandler,
+        onBlur: blurHandler,
+        onChange: changeHandler,
+        ...textareaProps,
+        className: Textarea_module_css_default.textarea,
+        style: {
+          padding: `${SCALES.pt(0.5)} ${SCALES.pr(0.5)} ${SCALES.pb(0.5)} ${SCALES.pl(0.5)}`,
+          ...textareaProps.style
+        }
+      }
+    ) });
+  }
+);
+TextareaComponent.displayName = "BolioUITextarea";
+var Textarea = with_scale_default(TextareaComponent);
+var Textarea_default = Textarea;
+
+// core/Textarea/index.ts
+var Textarea_default2 = Textarea_default;
+
+export {
+  Textarea_default2 as Textarea_default
+};

package/esm/chunk-JAVXTBV2.js

@@ -0,0 +1,238 @@
+import {
+  InputBlockLabel_default
+} from "./chunk-UOGCO6CV.js";
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.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/NumberInput/NumberInput.tsx
+import React, { useEffect, useId, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/NumberInput/NumberInput.module.css.bolio-css-module-source
+var NumberInput_module_css_default = { "withLabel": "NumberInput-module_withLabel__NYE52", "numberInput": "NumberInput-module_numberInput__hOY3x", "disabled": "NumberInput-module_disabled__gDhCu", "input": "NumberInput-module_input__LsKWE", "control": "NumberInput-module_control__mog--" };
+
+// core/NumberInput/NumberInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var decimalsOf = (num) => {
+  const [, decimals = ""] = String(num).split(".");
+  return decimals.length;
+};
+var PARTIAL_NUMBER = /^-?\d*([.,]\d*)?$/;
+var parse = (text) => {
+  const normalized = text.replace(",", ".");
+  if (normalized === "" || normalized === "-" || normalized === ".") return null;
+  const num = Number(normalized);
+  return Number.isNaN(num) ? null : num;
+};
+var NumberInputComponent = React.forwardRef(
+  ({
+    value: customValue,
+    initialValue = null,
+    onChange,
+    min,
+    max,
+    step = 1,
+    precision,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    disabled = false,
+    readOnly = false,
+    hideControls = false,
+    error = false,
+    errorMessage,
+    className = "",
+    children,
+    onKeyDown,
+    onBlur,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const generatedId = useId();
+    const inputId = props.id || generatedId;
+    const errorId = `${inputId}-error`;
+    const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+    const colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const places = precision != null ? precision : decimalsOf(step);
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const value = isControlled ? customValue : selfValue;
+    const format = (num) => num === null ? "" : String(num);
+    const [text, setText] = useState(format(value));
+    useEffect(() => {
+      if (parse(text) !== value) setText(format(value));
+    }, [value]);
+    const clamp = (num) => {
+      let next = num;
+      if (max !== void 0) next = Math.min(next, max);
+      if (min !== void 0) next = Math.max(next, min);
+      return Number(next.toFixed(places));
+    };
+    const commit = (next) => {
+      setText(format(next));
+      if (next === value) return;
+      if (!isControlled) setSelfValue(next);
+      onChange == null ? void 0 : onChange(next);
+    };
+    const locked = disabled || readOnly;
+    const increment = (direction, multiplier = 1) => {
+      if (locked) return;
+      commit(clamp((value != null ? value : 0) + direction * step * multiplier));
+    };
+    const changeHandler = (event) => {
+      const next = event.target.value;
+      if (!PARTIAL_NUMBER.test(next)) return;
+      setText(next);
+      const parsed = parse(next);
+      if (parsed === value) return;
+      if (!isControlled) setSelfValue(parsed);
+      onChange == null ? void 0 : onChange(parsed);
+    };
+    const blurHandler = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      const parsed = parse(text);
+      commit(parsed === null ? null : clamp(parsed));
+    };
+    const keyDownHandler = (event) => {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (event.defaultPrevented) return;
+      const actions = {
+        ArrowUp: () => increment(1),
+        ArrowDown: () => increment(-1),
+        PageUp: () => increment(1, 10),
+        PageDown: () => increment(-1, 10),
+        Home: () => min !== void 0 && !locked && commit(min),
+        End: () => max !== void 0 && !locked && commit(max)
+      };
+      const action = actions[event.key];
+      if (!action) return;
+      event.preventDefault();
+      action();
+    };
+    const atMin = min !== void 0 && value !== null && value <= min;
+    const atMax = max !== void 0 && value !== null && value >= max;
+    const control = (direction) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: NumberInput_module_css_default.control,
+        "aria-label": direction === 1 ? "Increase" : "Decrease",
+        "aria-controls": inputId,
+        disabled: disabled || readOnly || (direction === 1 ? atMax : atMin),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => increment(direction),
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: direction === 1 ? "M12 5v14M5 12h14" : "M5 12h14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ) })
+      }
+    );
+    const withLabelStyle = {
+      "--input-height": SCALES.height(2.25),
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "initial"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    };
+    const numberInputStyle = {
+      "--input-border": colors.borderColor,
+      "--input-radius": rounded ? "25px" : theme.layout.radius,
+      "--input-bg": colors.bgColor,
+      "--input-hover-border": colors.hoverBorder,
+      "--input-hover-bg": colors.hoverBgColor,
+      "--input-focus-border": colors.focusBorder,
+      "--input-placeholder-color": colors.placeholderColor,
+      "--input-color": colors.color,
+      "--control-color": colors.iconColor,
+      "--control-hover-color": colors.color,
+      "--control-disabled-color": theme.palette.accents_3
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: use_classes_default(NumberInput_module_css_default.withLabel, className),
+        style: withLabelStyle,
+        children: [
+          children && /* @__PURE__ */ jsx(InputBlockLabel_default, { htmlFor: inputId, children }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: use_classes_default(NumberInput_module_css_default.numberInput, {
+                [NumberInput_module_css_default.disabled]: disabled
+              }),
+              style: numberInputStyle,
+              children: [
+                !hideControls && control(-1),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    type: "text",
+                    role: "spinbutton",
+                    inputMode: places > 0 ? "decimal" : "numeric",
+                    autoComplete: "off",
+                    value: text,
+                    disabled,
+                    readOnly,
+                    onChange: changeHandler,
+                    onKeyDown: keyDownHandler,
+                    onBlur: blurHandler,
+                    ...props,
+                    id: inputId,
+                    "aria-valuenow": value != null ? value : void 0,
+                    "aria-valuemin": min,
+                    "aria-valuemax": max,
+                    "aria-invalid": error || void 0,
+                    "aria-describedby": describedBy,
+                    className: NumberInput_module_css_default.input,
+                    style: {
+                      textAlign: hideControls ? "left" : "center",
+                      ...props.style
+                    }
+                  }
+                ),
+                !hideControls && control(1)
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ jsx(InputBlockLabel_default, { error, id: errorId, children: errorMessage })
+        ]
+      }
+    );
+  }
+);
+NumberInputComponent.displayName = "BolioUINumberInput";
+var NumberInput = with_scale_default(NumberInputComponent);
+var NumberInput_default = NumberInput;
+
+// core/NumberInput/index.ts
+var NumberInput_default2 = NumberInput_default;
+
+export {
+  NumberInput_default2 as NumberInput_default
+};

package/esm/chunk-JFNYQSEZ.js

@@ -0,0 +1,200 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  joinClasses
+} from "./chunk-5KUROAEP.js";
+
+// core/Grid/Grid.tsx
+import React2 from "react";
+
+// core/Grid/BasicItem.tsx
+import React, { useMemo } from "react";
+
+// 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
+import { jsx } from "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 = React.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 } = use_scale_default();
+    const classes = useMemo(() => {
+      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 joinClasses(BasicItem_module_css_default.item, classString, className);
+    }, [
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      className
+    ]);
+    const layout = useMemo(
+      () => ({
+        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__ */ jsx("div", { ref, className: classes, ...props, style: itemStyle, children });
+  }
+);
+GridBasicItem.displayName = "BolioUIGridBasicItem";
+var BasicItem_default = GridBasicItem;
+
+// core/Grid/Grid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var GridComponent = React2.forwardRef(({ children, className = "", style, ...props }, ref) => {
+  const { SCALES } = use_scale_default();
+  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__ */ jsx2(BasicItem_default, { ref, className, style: gridStyle, ...props, children });
+});
+GridComponent.displayName = "BolioUIGrid";
+var Grid = with_scale_default(GridComponent);
+var Grid_default = Grid;
+
+// core/Grid/GridContainer.tsx
+import React3, { useMemo as useMemo2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GridContainerComponent = React3.forwardRef(
+  ({
+    gap = 0,
+    wrap = "wrap",
+    children,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const { unit, SCALES } = use_scale_default();
+    const gapUnit = useMemo2(() => `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__ */ jsx3(
+      BasicItem_default,
+      {
+        ref,
+        className,
+        style: containerStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+GridContainerComponent.displayName = "BolioUIGridContainer";
+var GridContainer = with_scale_default(GridContainerComponent);
+var GridContainer_default = GridContainer;
+
+// core/Grid/index.ts
+Grid_default.Container = GridContainer_default;
+var Grid_default2 = Grid_default;
+
+export {
+  Grid_default2 as Grid_default
+};

package/esm/chunk-KBZEYKCZ.js

@@ -0,0 +1,98 @@
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./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 || !isSemanticColorType(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 } = getVariantColors(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 } = getVariantColors(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 } = getVariantColors(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 } = getVariantColors(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
+  };
+};
+
+export {
+  getColors
+};