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

package/dist/chunk-STYC6O24.js

@@ -0,0 +1,232 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
+
+
+var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
+
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunkDXHNQANXjs = require('./chunk-DXHNQANX.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Tour/Tour.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactdom = require('react-dom');
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tour/Tour.module.css.bolio-css-module-source
+var Tour_module_css_default = { "tour": "Tour-module_tour__FLAxG", "spotlight": "Tour-module_spotlight__o7ukV", "dim": "Tour-module_dim__ZPmGZ", "card": "Tour-module_card__p9LCI", "centered": "Tour-module_centered__KJvbZ", "count": "Tour-module_count__2K7-G", "title": "Tour-module_title__Z-spV", "content": "Tour-module_content__qLvnb", "actions": "Tour-module_actions__HKbHi", "spacer": "Tour-module_spacer__dkdPy" };
+
+// core/Tour/Tour.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var CARD_WIDTH = 320;
+var MARGIN = 8;
+var GAP = 8;
+var ROOM_BELOW = 240;
+var resolve = (target) => !target ? null : typeof target === "string" ? document.querySelector(target) : typeof target === "function" ? target() : target;
+var Tour = _react2.default.forwardRef(
+  ({
+    steps,
+    open,
+    onClose,
+    current: customCurrent,
+    initialCurrent = 0,
+    onCurrentChange,
+    onFinish,
+    previousLabel = "Back",
+    nextLabel = "Next",
+    finishLabel = "Done",
+    skipLabel = "Skip",
+    stepLabel = (index, count) => `${index + 1} of ${count}`,
+    spotlightPadding = 6,
+    className = "",
+    style,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const portal = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "tour");
+    const id = _react.useId.call(void 0, );
+    const [selfCurrent, setSelfCurrent] = _react.useState.call(void 0, initialCurrent);
+    const current = Math.max(
+      0,
+      Math.min(customCurrent != null ? customCurrent : selfCurrent, steps.length - 1)
+    );
+    const step = steps[current];
+    const last = current === steps.length - 1;
+    const [rect, setRect] = _react.useState.call(void 0, null);
+    const card = _react.useRef.call(void 0, null);
+    const previous = _react.useRef.call(void 0, null);
+    const latestSteps = _chunkZRORQ2WHjs.use_latest_default.call(void 0, steps);
+    _react.useEffect.call(void 0, () => {
+      var _a, _b;
+      const target = (_a = latestSteps.current[current]) == null ? void 0 : _a.target;
+      if (!open) return;
+      const element = resolve(target);
+      if (!element) {
+        if (target) _chunkAXYDJGTNjs.log_warning_default.call(void 0, "The target of the step was not found.", "Tour");
+        setRect(null);
+        return;
+      }
+      (_b = element.scrollIntoView) == null ? void 0 : _b.call(element, { block: "center", inline: "nearest" });
+      const update = () => setRect(element.getBoundingClientRect());
+      update();
+      window.addEventListener("resize", update);
+      window.addEventListener("scroll", update, true);
+      return () => {
+        window.removeEventListener("resize", update);
+        window.removeEventListener("scroll", update, true);
+      };
+    }, [open, current, latestSteps]);
+    _react.useEffect.call(void 0, () => {
+      if (!open) return;
+      previous.current = document.activeElement;
+      return () => {
+        var _a, _b;
+        return (_b = (_a = previous.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      };
+    }, [open]);
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (open && portal) (_a = card.current) == null ? void 0 : _a.focus({ preventScroll: true });
+    }, [open, current, portal]);
+    if (!open || !step || !portal) return null;
+    const go = (next) => {
+      if (customCurrent === void 0) setSelfCurrent(next);
+      if (onCurrentChange) onCurrentChange(next);
+    };
+    const finish = () => {
+      if (onFinish) onFinish();
+      onClose();
+    };
+    const keyDownHandler = (event) => {
+      var _a, _b;
+      if (onKeyDown) onKeyDown(event);
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        return onClose();
+      }
+      if (event.key !== "Tab") return;
+      const buttons = Array.from(
+        (_b = (_a = card.current) == null ? void 0 : _a.querySelectorAll("button")) != null ? _b : []
+      );
+      const [first, end] = [buttons[0], buttons[buttons.length - 1]];
+      const onCard = document.activeElement === card.current;
+      if (!first) return;
+      if (event.shiftKey && (onCard || document.activeElement === first)) {
+        event.preventDefault();
+        end.focus();
+      } else if (!event.shiftKey && (onCard || document.activeElement === end)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const width = Math.min(CARD_WIDTH, window.innerWidth - 2 * MARGIN);
+    const room = rect ? window.innerHeight - rect.bottom : 0;
+    const above = Boolean(rect && room < ROOM_BELOW && rect.top > room);
+    const cardStyle = rect ? {
+      width,
+      left: Math.max(
+        MARGIN,
+        Math.min(rect.left, window.innerWidth - width - MARGIN)
+      ),
+      ...above ? { bottom: window.innerHeight - rect.top + spotlightPadding + GAP } : { top: rect.bottom + spotlightPadding + GAP }
+    } : { width };
+    const dark = theme.type === "dark";
+    const tourStyle = {
+      "--tour-color": theme.palette.foreground,
+      "--tour-muted": theme.palette.accents_5,
+      "--tour-radius": theme.layout.radius,
+      "--tour-bg": dark ? theme.palette.accents_3 : theme.palette.background,
+      "--tour-shadow": theme.expressiveness.shadowMedium,
+      "--tour-dim": dark ? "rgb(0 0 0 / 60%)" : "rgb(0 0 0 / 55%)",
+      ...style
+    };
+    return _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          ref,
+          className: _chunk5KUROAEPjs.joinClasses.call(void 0, Tour_module_css_default.tour, className),
+          ...props,
+          style: tourStyle,
+          onKeyDown: keyDownHandler,
+          children: [
+            rect ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: Tour_module_css_default.spotlight,
+                style: {
+                  left: rect.left - spotlightPadding,
+                  top: rect.top - spotlightPadding,
+                  width: rect.width + 2 * spotlightPadding,
+                  height: rect.height + 2 * spotlightPadding
+                }
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Tour_module_css_default.dim }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "div",
+              {
+                ref: card,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": `${id}-title`,
+                "aria-describedby": `${id}-content`,
+                tabIndex: -1,
+                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Tour_module_css_default.card, { [Tour_module_css_default.centered]: !rect }),
+                style: cardStyle,
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Tour_module_css_default.count, children: stepLabel(current, steps.length) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: `${id}-title`, className: Tour_module_css_default.title, children: step.title }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: `${id}-content`, className: Tour_module_css_default.content, children: step.content }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Tour_module_css_default.actions, children: [
+                    !last && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDXHNQANXjs.Button_default, { auto: true, scale: 0.75, effect: false, onClick: onClose, children: skipLabel }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Tour_module_css_default.spacer }),
+                    current > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _chunkDXHNQANXjs.Button_default,
+                      {
+                        auto: true,
+                        scale: 0.75,
+                        effect: false,
+                        onClick: () => go(current - 1),
+                        children: previousLabel
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _chunkDXHNQANXjs.Button_default,
+                      {
+                        auto: true,
+                        scale: 0.75,
+                        type: "primary",
+                        effect: false,
+                        onClick: last ? finish : () => go(current + 1),
+                        children: last ? finishLabel : nextLabel
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      portal
+    );
+  }
+);
+Tour.displayName = "BolioUITour";
+var Tour_default = Tour;
+
+// core/Tour/index.ts
+var Tour_default2 = Tour_default;
+
+
+
+exports.Tour_default = Tour_default2;

package/dist/{chunk-FQU5SKDF.js → chunk-WFGUAR7K.js}

@@ -6,10 +6,10 @@ var _chunkHKOESPKZjs = require('./chunk-HKOESPKZ.js');
 var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
 
 
-var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
 
 
-var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
 
 
 
@@ -127,7 +127,7 @@ var CollapseContext = _react2.default.createContext(defaultContext);
 var useCollapseContext = () => _react2.default.useContext(CollapseContext);
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/Collapse.module.css.bolio-css-module-source
-var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
+var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "trigger": "Collapse-module_trigger__0Q0YR", "label": "Collapse-module_label__tdCh3", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
 
 // core/Collapse/Collapse.tsx
 
@@ -137,6 +137,9 @@ var CollapseComponent = _react2.default.forwardRef(
     title,
     subtitle,
     initialVisible = false,
+    visible: controlledVisible,
+    onVisibleChange,
+    disabled = false,
     shadow = false,
     className = "",
     index,
@@ -146,7 +149,12 @@ var CollapseComponent = _react2.default.forwardRef(
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
     const { values, updateValues } = useCollapseContext();
-    const [visible, setVisible, visibleRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, initialVisible);
+    const [selfVisible, setVisible, visibleRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, initialVisible);
+    const isControlled = controlledVisible !== void 0;
+    const visible = isControlled ? controlledVisible : selfVisible;
+    const baseId = _react.useId.call(void 0, );
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
     if (!title) {
       _chunkAXYDJGTNjs.log_warning_default.call(void 0, '"title" is required.', "Collapse");
     }
@@ -156,15 +164,12 @@ var CollapseComponent = _react2.default.forwardRef(
       setVisible(isActive);
     }, [index, setVisible, values]);
     const clickHandler = () => {
-      const next = !visibleRef.current;
-      setVisible(next);
+      if (disabled) return;
+      const next = !(isControlled ? controlledVisible : visibleRef.current);
+      if (!isControlled) setVisible(next);
+      if (onVisibleChange) onVisibleChange(next);
       if (updateValues) updateValues(index, next);
     };
-    const keyDownHandler = (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      clickHandler();
-    };
     const collapseStyle = shadow ? {
       boxShadow: theme.expressiveness.shadowSmall,
       border: "none",
@@ -195,27 +200,29 @@ var CollapseComponent = _react2.default.forwardRef(
             "div",
             {
               className: Collapse_module_css_default.view,
-              role: "button",
-              tabIndex: 0,
-              "aria-expanded": visible,
               onClick: clickHandler,
-              onKeyDown: keyDownHandler,
               style: {
-                "--collapse-focus-color": theme.palette.primary
+                "--collapse-focus-color": theme.palette.primary,
+                cursor: disabled ? "not-allowed" : void 0
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  "div",
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: Collapse_module_css_default.title, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "button",
                   {
-                    className: Collapse_module_css_default.title,
+                    type: "button",
+                    id: triggerId,
+                    className: Collapse_module_css_default.trigger,
+                    "data-collapse-trigger": "",
+                    "aria-expanded": visible,
+                    "aria-controls": panelId,
+                    disabled,
                     style: { color: theme.palette.foreground },
                     children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: title }),
-                      " ",
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Collapse_module_css_default.label, children: title }),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseIcon_default, { active: visible })
                     ]
                   }
-                ),
+                ) }),
                 subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "div",
                   {
@@ -230,9 +237,10 @@ var CollapseComponent = _react2.default.forwardRef(
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, expand_default, { isExpanded: visible, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "div",
             {
+              id: panelId,
               className: Collapse_module_css_default.content,
               style: {
-                padding: `${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)}`
+                padding: `${SCALES.pt(0.6)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`
               },
               children
             }
@@ -259,6 +267,7 @@ function CollapseGroupComponent({
   accordion = true,
   className = "",
   style,
+  onKeyDown,
   ...props
 }) {
   const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
@@ -290,6 +299,22 @@ function CollapseGroupComponent({
     () => _chunkUX2B3G6Ujs.setChildrenIndex.call(void 0, children, [Collapse_default]),
     [children]
   );
+  const keyDownHandler = (event) => {
+    if (onKeyDown) onKeyDown(event);
+    const { key } = event;
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return;
+    const triggers = Array.from(
+      event.currentTarget.querySelectorAll(
+        "[data-collapse-trigger]"
+      )
+    ).filter((trigger) => !trigger.disabled);
+    const current = triggers.indexOf(event.target);
+    if (current < 0) return;
+    event.preventDefault();
+    const last = triggers.length - 1;
+    const next = key === "Home" ? 0 : key === "End" ? last : key === "ArrowDown" ? (current + 1) % triggers.length : (current + last) % triggers.length;
+    triggers[next].focus();
+  };
   const groupStyle = {
     width: SCALES.width(1, "auto"),
     height: SCALES.height(1, "auto"),
@@ -297,7 +322,16 @@ function CollapseGroupComponent({
     margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
     ...style
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classes, ...props, style: groupStyle, children: hasIndexChildren }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: classes,
+      ...props,
+      onKeyDown: keyDownHandler,
+      style: groupStyle,
+      children: hasIndexChildren
+    }
+  ) });
 }
 CollapseGroupComponent.displayName = "BolioUICollapseGroup";
 var CollapseGroup = _chunkMAICNLTYjs.with_scale_default.call(void 0, CollapseGroupComponent);

package/dist/{chunk-6KMHJRCY.js → chunk-WIIDIZYK.js}

@@ -25,6 +25,10 @@ var CssBaseline = ({
         html {
           font-size: 16px;
           --bolioui-icons-background: ${theme.palette.background};
+          box-sizing: border-box;
+          /* the native parts of the page follow the theme: the clock of a time
+             field, the scrollbars and the pickers of the browser */
+          color-scheme: ${theme.type};
         }
 
         body {
@@ -52,7 +56,6 @@ var CssBaseline = ({
         *:before,
         *:after {
           box-sizing: inherit;
-          text-rendering: geometricPrecision;
           -webkit-tap-highlight-color: transparent;
         }
 

package/dist/chunk-X4TPC7HS.js

@@ -0,0 +1,160 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/PinInput/PinInput.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+var defaultBoxLabel = (index, length) => `Character ${index + 1} of ${length}`;
+var PinInputComponent = _react2.default.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 = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const colors = _chunkKBZEYKCZjs.getColors.call(void 0, theme.palette, error ? "error" : type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue.slice(0, length));
+    const value = isControlled ? customValue : selfValue;
+    const boxes = _react.useRef.call(void 0, []);
+    const latest = _react.useRef.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "group",
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, PinInput_module_css_default.pin, className),
+        ...props,
+        style: pinStyle,
+        children: Array.from({ length }, (_, index) => {
+          var _a;
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "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 = _chunkMAICNLTYjs.with_scale_default.call(void 0, PinInputComponent);
+var PinInput_default = PinInput;
+
+// core/PinInput/index.ts
+var PinInput_default2 = PinInput_default;
+
+
+
+exports.PinInput_default = PinInput_default2;