@lightsparkdev/ui 1.0.5 → 1.0.7

package/dist/chunk-WI6IO34N.cjs

@@ -0,0 +1,327 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk3O67L2QOcjs = require('./chunk-3O67L2QO.cjs');
+
+
+var _chunkQR6XKKRKcjs = require('./chunk-QR6XKKRK.cjs');
+
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/components/CodeInput/CodeInput.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _lodashes = require('lodash-es');
+var _nanoid = require('nanoid');
+var _react = require('react');
+var _reactdevicedetect = require('react-device-detect');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function codeFromInputState(inputState) {
+  return Object.values(inputState).map((input) => input.value).join("");
+}
+function getRef(key, refsObj) {
+  if (key && refsObj && typeof refsObj === "object" && refsObj.current) {
+    const ref = refsObj.current[key];
+    if (ref && typeof ref === "object" && ref.current && ref.current instanceof HTMLInputElement) {
+      return ref.current;
+    }
+  }
+  return null;
+}
+function CodeInput({
+  codeLength = 8,
+  onChange,
+  onSubmit,
+  inputCSS,
+  autoFocus = true,
+  onBlur
+}) {
+  const componentId = _react.useRef.call(void 0, _nanoid.nanoid.call(void 0, 5));
+  const inputRefs = _react.useRef.call(void 0, {});
+  const autofillValuesRef = _react.useRef.call(void 0, "");
+  const getInputId = _react.useCallback.call(void 0, (index) => {
+    const idPrefix = `two-factor-input-${componentId.current}-`;
+    return `${idPrefix}-${index}`;
+  }, []);
+  function getInputIndex(id) {
+    return Number.parseInt(id.charAt(id.length - 1), 10);
+  }
+  const firstFieldRefCb = _react.useCallback.call(void 0, 
+    (ref) => {
+      if (ref) {
+        inputRefs.current[ref.id] = _react.createRef.call(void 0, );
+        inputRefs.current[ref.id].current = ref;
+        if (ref.id === getInputId(0) && autoFocus) {
+          ref.focus();
+        }
+      }
+    },
+    [getInputId, autoFocus]
+  );
+  const [inputState, setInputState] = _react.useState.call(void 0, 
+    Array(codeLength).fill(0).reduce((acc, item, i) => {
+      return _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, acc), {
+        [getInputId(i)]: {
+          value: ""
+        }
+      });
+    }, {})
+  );
+  const onKeyDown = _react.useCallback.call(void 0, 
+    (event, inputId) => {
+      const handleKeys = /* @__PURE__ */ new Set([
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "Enter",
+        "Escape",
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight"
+      ]);
+      if (["e", "E", "+", "-", "."].includes(event.key)) {
+        event.preventDefault();
+        return;
+      }
+      if (!handleKeys.has(event.key)) {
+        return;
+      }
+      let replaceEntireState = false;
+      const currentInputIndex = getInputIndex(inputId);
+      const isFirstInput = currentInputIndex === 0;
+      const isLastInput = currentInputIndex === codeLength - 1;
+      const nextInputIndex = isLastInput ? void 0 : currentInputIndex + 1;
+      const prevInputIndex = isFirstInput ? void 0 : currentInputIndex - 1;
+      const nextInputId = _lodashes.isNumber.call(void 0, nextInputIndex) ? getInputId(nextInputIndex) : void 0;
+      const prevInputId = _lodashes.isNumber.call(void 0, prevInputIndex) ? getInputId(prevInputIndex) : void 0;
+      const nextInput = nextInputId ? inputState[nextInputId] : void 0;
+      const prevInput = prevInputId ? inputState[prevInputId] : void 0;
+      const currentInputRef = getRef(inputId, inputRefs);
+      const nextInputRef = getRef(nextInputId, inputRefs);
+      const prevInputRef = getRef(prevInputId, inputRefs);
+      const firstInputRef = getRef(getInputId(0), inputRefs);
+      const lastInputRef = getRef(getInputId(codeLength - 1), inputRefs);
+      if (event.key === "ArrowLeft") {
+        if (firstInputRef && (event.metaKey || event.ctrlKey || event.altKey)) {
+          firstInputRef.focus();
+          return;
+        }
+        if (prevInput && prevInputRef) {
+          prevInputRef.focus();
+          prevInputRef.select();
+        }
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        if (lastInputRef && (event.metaKey || event.ctrlKey || event.altKey)) {
+          lastInputRef.focus();
+          return;
+        }
+        if (nextInput && nextInputRef) {
+          nextInputRef.focus();
+          nextInputRef.select();
+        }
+        return;
+      }
+      if (event.key === "Enter" && onSubmit) {
+        const code2 = codeFromInputState(inputState);
+        onSubmit(code2);
+        return;
+      }
+      if (event.key === "Escape" && currentInputRef) {
+        currentInputRef.blur();
+        return;
+      }
+      if (event.key === "Backspace" && (event.metaKey || event.ctrlKey || event.altKey)) {
+        replaceEntireState = _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, inputState);
+        Object.keys(replaceEntireState).forEach((inputId2) => {
+          const newState2 = replaceEntireState;
+          newState2[inputId2] = _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, newState2[inputId2]), {
+            value: ""
+          });
+        });
+      }
+      let value = event.key;
+      if (event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        value = "";
+        if (!isFirstInput && prevInput && prevInputRef) {
+          prevInputRef.focus();
+        }
+      } else if (event.key === "Delete") {
+        value = "";
+        if (!isLastInput && nextInput && nextInputRef) {
+          nextInputRef.focus();
+        }
+      } else if (replaceEntireState) {
+        const lastInputWithValue = Object.entries(replaceEntireState).reverse().find(([, { value: value2 }]) => value2 !== "");
+        if (lastInputWithValue) {
+          const inputId2 = lastInputWithValue[0];
+          const inputRef = getRef(inputId2, inputRefs);
+          inputRef == null ? void 0 : inputRef.focus();
+          inputRef == null ? void 0 : inputRef.select();
+        } else if (firstInputRef) {
+          firstInputRef.focus();
+        }
+      } else if (isLastInput) {
+      } else if (nextInput && nextInputRef) {
+        nextInputRef.focus();
+        nextInputRef.select();
+      }
+      const newState = replaceEntireState ? replaceEntireState : _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, inputState), {
+        [inputId]: { value }
+      });
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [onChange, setInputState, onSubmit, getInputId, inputState, codeLength]
+  );
+  const onPasteCb = _react.useCallback.call(void 0, 
+    (event) => {
+      event.preventDefault();
+      const rawText = event.clipboardData.getData("text");
+      const text = rawText == null ? void 0 : rawText.replace(/[\s.]/g, "");
+      if (!text || Number.isNaN(Number.parseInt(text))) {
+        return;
+      }
+      const inputValues = text.split("");
+      const newState = _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, inputState);
+      inputValues.forEach((value, i) => {
+        const inputId = getInputId(i);
+        newState[inputId] = _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, newState[inputId]), {
+          value
+        });
+      });
+      const firstInputRef = getRef(getInputId(0), inputRefs);
+      const lastInputWithValue = Object.entries(newState).reverse().find(([, { value }]) => value !== "");
+      if (lastInputWithValue) {
+        const inputId = lastInputWithValue[0];
+        const inputRef = getRef(inputId, inputRefs);
+        inputRef == null ? void 0 : inputRef.focus();
+        inputRef == null ? void 0 : inputRef.select();
+      } else if (firstInputRef) {
+        firstInputRef.focus();
+      }
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [getInputId, inputState, onChange, setInputState]
+  );
+  const onBlurCb = _react.useCallback.call(void 0, () => {
+    setTimeout(() => {
+      let hasCodeFocused = false;
+      if (inputRefs.current) {
+        Object.values(inputRefs.current).forEach((ref) => {
+          if (ref && ref.current && ref.current === document.activeElement) {
+            hasCodeFocused = true;
+          }
+        });
+        if (!hasCodeFocused && onBlur) {
+          onBlur();
+        }
+      }
+    }, 0);
+  }, [onBlur]);
+  const inputsPerGroup = Math.ceil(codeLength / 2);
+  const inputs = [];
+  for (let i = 0; i < codeLength; i += 1) {
+    const inputId = getInputId(i);
+    inputs.push(
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk3O67L2QOcjs.SingleCodeInput,
+        {
+          value: inputState[inputId].value,
+          id: inputId,
+          inputRef: firstFieldRefCb,
+          onPaste: onPasteCb,
+          onKeyDown: (event) => onKeyDown(event, inputId),
+          onChange: (event) => {
+            if (_reactdevicedetect.isMobileSafari && event.nativeEvent instanceof CustomEvent) {
+              autofillValuesRef.current += event.target.value;
+              if (autofillValuesRef.current.length === codeLength) {
+                const newState = Array(codeLength).fill(0).reduce((acc, item, i2) => {
+                  return _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, acc), {
+                    [getInputId(i2)]: {
+                      value: autofillValuesRef.current[i2]
+                    }
+                  });
+                }, {});
+                setInputState(newState);
+                if (onSubmit) {
+                  onSubmit(autofillValuesRef.current);
+                }
+                autofillValuesRef.current = "";
+              }
+            } else if (_reactdevicedetect.isMobile && _reactdevicedetect.isChrome && event.target.value.length === codeLength) {
+              const newState = Array(codeLength).fill(0).reduce((acc, item, i2) => {
+                return _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, acc), {
+                  [getInputId(i2)]: {
+                    value: event.target.value[i2]
+                  }
+                });
+              }, {});
+              setInputState(newState);
+              if (onSubmit) {
+                onSubmit(event.target.value);
+              }
+            }
+          },
+          type: "number",
+          ariaLabel: `Code input ${i + 1} of ${codeLength}`,
+          cssProp: inputCSS,
+          onBlur: onBlurCb,
+          width: `${(100 / inputsPerGroup).toFixed(2)}%`,
+          max: 9
+        },
+        inputId
+      )
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCodeInput, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroup, { children: inputs.slice(0, inputsPerGroup) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroupSeparator, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroup, { children: inputs.slice(inputsPerGroup, inputs.length) })
+  ] });
+}
+var StyledCodeInput = _styled2.default.div`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+var separatorWidth = 12;
+var separatorMargin = 8;
+var CodeInputGroup = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  width: calc(50% - ${(separatorWidth + separatorMargin * 2) / 2}px);
+`;
+var CodeInputGroupSeparator = _styled2.default.div`
+  width: ${separatorWidth}px;
+  height: 4px;
+  background-color: ${_chunkQR6XKKRKcjs.textInputBorderColor};
+  border-radius: 2px;
+  margin: 0 ${separatorMargin}px;
+`;
+
+
+
+
+exports.CodeInput = CodeInput; exports.StyledCodeInput = StyledCodeInput;

package/dist/{chunk-4EV5IUUJ.js → chunk-WM2D54JJ.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-HNK2KIC7.js";
+} from "./chunk-J2NLRI2M.js";
 import {
   applyTypography
-} from "./chunk-OPUCWQMK.js";
+} from "./chunk-L3BNIBK3.js";
 
 // src/components/typography/Title.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-BNHCCR3C.js → chunk-WONQPE5P.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   toNonTypographicReactNodes
-} from "./chunk-HNK2KIC7.js";
+} from "./chunk-J2NLRI2M.js";
 import {
   applyTypography
-} from "./chunk-OPUCWQMK.js";
+} from "./chunk-L3BNIBK3.js";
 
 // src/components/typography/Headline.tsx
 import styled from "@emotion/styled";

package/dist/chunk-WRN66OMM.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/JavaTwoTone.tsx
+var _react = require('@emotion/react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function JavaTwoTone() {
+  const theme = _react.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "100%", viewBox: "0 0 25 24", fill: "none", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "24", height: "24", fill: "currentColor" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "path",
+      {
+        fill: theme.bg,
+        d: "M14.0284 15.104C13.631 15.2166 12.7358 15.4001 11.4558 15.4001C10.1996 15.4001 9.17311 15.185 9.16991 14.9318C9.16779 14.7633 9.37146 14.6899 9.37146 14.6899L9.33522 14.6689C8.73366 14.7752 8.17485 14.9396 8.17808 15.1856C8.18365 15.6322 9.89118 15.9675 11.4533 15.9675C12.7814 15.9675 14.0569 15.7447 14.6322 15.4527L14.0284 15.104ZM9.78311 16.4845C9.50413 16.54 8.89612 16.6796 8.89612 16.9753C8.89612 17.3849 10.197 17.6986 11.4528 17.6986C13.1809 17.6986 13.8887 17.2539 13.9207 17.2309L13.2022 16.8152C12.8966 16.888 12.3817 17.0024 11.4546 17.0024C10.4198 17.0024 9.74563 16.8252 9.74563 16.6312C9.74563 16.59 9.77137 16.5411 9.81932 16.5054L9.78311 16.4845ZM16.8447 13.7287C16.7963 14.6561 15.9395 15.2336 15.0831 15.7216L15.1607 15.7663C16.0745 15.5092 17.7051 14.7606 17.5703 13.6099C17.5031 13.036 16.9786 12.626 16.2948 12.626C16.0818 12.626 15.8924 12.6635 15.7388 12.7103L15.7383 12.7118L15.7059 12.7934C16.3175 12.6737 16.8764 13.1203 16.8447 13.7287ZM11.4292 19.1713C13.833 19.1504 16.5227 18.6799 16.5157 17.8891C16.5145 17.7458 16.4211 17.6476 16.34 17.5883L16.3006 17.6109C16.0784 18.2235 14.2 18.6761 11.4251 18.7003C9.63458 18.7159 7.15433 18.2869 7.15 17.7912C7.14566 17.2942 8.32496 17.0211 8.32496 17.0211L8.24164 16.9735C7.45136 17.0823 5.9952 17.4608 6.00001 18.0072C6.00694 18.7972 9.35354 19.1895 11.4292 19.1713ZM11.1792 19.7359C10.2237 19.7443 9.05699 19.6652 8.07554 19.5002L7.98466 19.5525C8.96228 19.8392 10.3233 20.0123 11.8189 19.9993C14.7561 19.9736 17.1375 19.2452 17.1846 18.3687L17.1506 18.3489C16.9537 18.5891 15.6833 19.6966 11.1792 19.7359ZM7.49957 13.5173C7.49957 13.0742 9.18017 12.8256 9.96266 12.7654L10.0373 12.8086C9.73673 12.8633 8.53072 13.076 8.53072 13.3534C8.53072 13.6555 10.3805 13.8535 11.4542 13.8535C13.2778 13.8535 14.5175 13.5775 14.8509 13.4865L15.3173 13.7579C14.9979 13.9143 13.6265 14.3242 11.4543 14.3242C9.04006 14.3242 7.49957 13.8519 7.49957 13.5173Z"
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "path",
+      {
+        fill: theme.bg,
+        d: "M14.7951 7.32458L14.7547 7.30147C14.0204 7.54741 11.7604 8.43947 11.7604 10.1028C11.7604 11.0435 12.679 11.5645 12.679 12.4467C12.679 12.7614 12.5013 13.0564 12.3566 13.2327L12.4293 13.2748C12.8117 13.0262 13.4887 12.4881 13.4887 11.7933C13.4887 11.2049 12.6743 10.498 12.6743 9.74167C12.6743 8.55001 14.2456 7.61505 14.7951 7.32458ZM13.6857 5.14453C13.6857 7.60625 10.3121 8.54827 10.3121 10.2985C10.3121 11.5272 11.1269 12.2977 11.5776 12.7847L11.541 12.8059C10.9719 12.4499 9.47461 11.5552 9.47461 10.0774C9.47461 8.00271 13.3494 7.01134 13.3494 4.65472C13.3494 4.36475 13.3065 4.14253 13.2765 4.02258L13.3157 3.99998C13.4385 4.1543 13.6857 4.54009 13.6857 5.14453Z"
+      }
+    )
+  ] });
+}
+
+
+
+exports.JavaTwoTone = JavaTwoTone;

package/dist/chunk-WRQEO3XT.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Pencil.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Pencil() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M6.88851 2.9033L1 8.79181V11H3.20819L9.0967 5.11149M6.88851 2.9033L8.57623 1.21559C8.86367 0.928136 9.32974 0.928136 9.61717 1.21559L10.7844 2.38283C11.0719 2.67028 11.0719 3.13633 10.7844 3.42378L9.0967 5.11149M6.88851 2.9033L9.0967 5.11149",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Pencil = Pencil;

package/dist/chunk-WTFNCHBK.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Trash.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Trash() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M0.5 2.85714H11.5M4.07143 11.5H7.92857C8.79647 11.5 9.5 10.7965 9.5 9.92857L9.92857 2.07143C9.92857 1.20355 9.22504 0.5 8.35714 0.5H3.64286C2.77498 0.5 2.07143 1.20355 2.07143 2.07143L2.5 9.92857C2.5 10.7965 3.20355 11.5 4.07143 11.5Z",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M5 5V9", stroke: "currentColor", strokeLinecap: "round" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7 5V9", stroke: "currentColor", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+
+
+
+exports.Trash = Trash;