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

package/esm/chunk-X4TPC7HS.js

@@ -0,0 +1,160 @@
+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/PinInput/PinInput.tsx
+import React, { useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/PinInput/PinInput.module.css.bolio-css-module-source
+var PinInput_module_css_default = { "pin": "PinInput-module_pin__XgaDZ", "box": "PinInput-module_box__DIU85" };
+
+// core/PinInput/PinInput.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultBoxLabel = (index, length) => `Character ${index + 1} of ${length}`;
+var PinInputComponent = React.forwardRef(
+  ({
+    length = 6,
+    value: customValue,
+    initialValue = "",
+    onChange,
+    onComplete,
+    numeric = false,
+    mask = false,
+    boxLabel = defaultBoxLabel,
+    disabled = false,
+    error = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, error ? "error" : type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue.slice(0, length));
+    const value = isControlled ? customValue : selfValue;
+    const boxes = useRef([]);
+    const latest = useRef(value);
+    latest.current = value;
+    const focusBox = (index) => {
+      var _a;
+      return (_a = boxes.current[Math.max(0, Math.min(index, length - 1))]) == null ? void 0 : _a.focus();
+    };
+    const commit = (next) => {
+      if (next === value) return;
+      latest.current = next;
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+      if (onComplete && next.length === length) onComplete(next);
+    };
+    const remove = (index) => commit(value.slice(0, index) + value.slice(index + 1));
+    const changeHandler = (index) => (event) => {
+      const typed = event.target.value;
+      if (typed === "") return remove(index);
+      const chars = typed.split("").filter((char) => !numeric || /\d/.test(char));
+      if (!chars.length) return;
+      const at = Math.min(index, value.length);
+      const rest = chars.length === 1 ? value.slice(at + 1) : "";
+      commit((value.slice(0, at) + chars.join("") + rest).slice(0, length));
+      focusBox(at + chars.length);
+    };
+    const keyDownHandler = (index) => (event) => {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        if (index < value.length) return remove(index);
+        if (index > 0) {
+          remove(index - 1);
+          focusBox(index - 1);
+        }
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        focusBox(index - 1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        focusBox(index + 1);
+      }
+    };
+    const focusHandler = (index) => (event) => {
+      if (index > latest.current.length)
+        return focusBox(latest.current.length);
+      event.target.select();
+    };
+    const pinStyle = {
+      "--pin-size": SCALES.height(2.75),
+      "--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-color": colors.color,
+      fontSize: SCALES.font(1),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: use_classes_default(PinInput_module_css_default.pin, className),
+        ...props,
+        style: pinStyle,
+        children: Array.from({ length }, (_, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (node) => {
+                boxes.current[index] = node;
+              },
+              type: mask ? "password" : "text",
+              inputMode: numeric ? "numeric" : "text",
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              "aria-label": boxLabel(index, length),
+              "aria-invalid": error || void 0,
+              className: PinInput_module_css_default.box,
+              value: (_a = value[index]) != null ? _a : "",
+              disabled,
+              onChange: changeHandler(index),
+              onKeyDown: keyDownHandler(index),
+              onFocus: focusHandler(index)
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+PinInputComponent.displayName = "BolioUIPinInput";
+var PinInput = with_scale_default(PinInputComponent);
+var PinInput_default = PinInput;
+
+// core/PinInput/index.ts
+var PinInput_default2 = PinInput_default;
+
+export {
+  PinInput_default2 as PinInput_default
+};

package/esm/{chunk-QUMM6MGX.js → chunk-X5PGXMVQ.js}

@@ -1,6 +1,6 @@
 import {
   Themes_default
-} from "./chunk-VCTKX4AS.js";
+} from "./chunk-SZIX7BM5.js";
 
 // core/Themes/index.ts
 var Themes_default2 = Themes_default;

package/esm/chunk-XC33TGGT.js

@@ -0,0 +1,110 @@
+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/Tag/Tag.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tag/Tag.module.css.bolio-css-module-source
+var Tag_module_css_default = { "tag": "Tag-module_tag__gmGAL" };
+
+// core/Tag/Tag.tsx
+import { jsx } from "react/jsx-runtime";
+var getColors = (type, palette, {
+  invert,
+  light,
+  subtle
+}) => {
+  if (isSemanticColorType(type)) {
+    const variant = subtle ? "subtle" : light ? "light" : invert ? "filled" : "outline";
+    const { bg, border, color } = getVariantColors(palette, type, variant);
+    return { color, bgColor: bg, borderColor: border };
+  }
+  const colors = {
+    default: {
+      color: palette.foreground
+    },
+    dark: {
+      color: palette.background,
+      bgColor: palette.foreground
+    },
+    lite: {
+      color: palette.foreground,
+      bgColor: palette.accents_2
+    }
+  };
+  const hideBorder = invert || type === "lite";
+  const key = type;
+  const cardStyle = {
+    ...colors[key],
+    bgColor: colors[key].bgColor || palette.background,
+    borderColor: hideBorder ? "transparent" : colors[key].color
+  };
+  return !invert ? cardStyle : {
+    ...cardStyle,
+    color: cardStyle.bgColor,
+    bgColor: cardStyle.color
+  };
+};
+var TagComponent = React.forwardRef(
+  ({
+    type = "default",
+    children,
+    className = "",
+    invert = false,
+    light = false,
+    subtle = false,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const { color, bgColor, borderColor } = useMemo(
+      () => getColors(type, theme.palette, { invert, light, subtle }),
+      [type, theme.palette, invert, light, subtle]
+    );
+    const tagStyle = {
+      border: `1px solid ${borderColor}`,
+      backgroundColor: bgColor,
+      color,
+      borderRadius: SCALES.height(0.3125),
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1.75),
+      padding: `${SCALES.pt(0.375)} ${SCALES.pr(0.375)} ${SCALES.pb(0.375)} ${SCALES.pl(0.375)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: use_classes_default(Tag_module_css_default.tag, className),
+        ...props,
+        style: tagStyle,
+        children
+      }
+    );
+  }
+);
+TagComponent.displayName = "BolioUITag";
+var Tag = with_scale_default(TagComponent);
+var Tag_default = Tag;
+
+// core/Tag/index.ts
+var Tag_default2 = Tag_default;
+
+export {
+  Tag_default2 as Tag_default
+};