mimir-ui-kit 1.3.1 → 1.3.2

package/dist/components/OtpInput/hooks.js

@@ -0,0 +1,139 @@
+import { useRef, useMemo, useCallback } from "react";
+import { RE_DIGIT } from "./constants.js";
+const useOTPInput = ({
+  value = "",
+  valueLength = 6,
+  onChange
+}) => {
+  const inputRefs = useRef([]);
+  const valueItems = useMemo(() => {
+    const valueArray = value.split("");
+    const items = [];
+    for (let i = 0; i < valueLength; i++) {
+      const char = valueArray[i];
+      if (RE_DIGIT.test(char)) {
+        items.push(char);
+      } else {
+        items.push("");
+      }
+    }
+    return items;
+  }, [value, valueLength]);
+  const handleFocusToNextInput = useCallback(
+    (index) => {
+      var _a;
+      if (index < valueLength - 1) {
+        (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
+      }
+    },
+    [valueLength]
+  );
+  const handleFocusToPrevInput = useCallback((index) => {
+    var _a;
+    if (index > 0) {
+      (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
+    }
+  }, []);
+  const handleChange = useCallback(
+    (e, index) => {
+      const target = e.target;
+      let targetValue = target.value.trim();
+      const isTargetValueDigit = RE_DIGIT.test(targetValue);
+      if (!isTargetValueDigit && targetValue !== "") {
+        return;
+      }
+      const nextInputEl = inputRefs.current[index + 1];
+      if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
+        return;
+      }
+      targetValue = isTargetValueDigit ? targetValue.trim() : " ";
+      const targetValueLength = targetValue.length;
+      if (targetValueLength === 1) {
+        const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
+        onChange == null ? void 0 : onChange(newValue.trim());
+        if (isTargetValueDigit) {
+          handleFocusToNextInput(index);
+        }
+      } else if (targetValueLength === valueLength) {
+        onChange == null ? void 0 : onChange(targetValue.trim());
+        target.blur();
+      }
+    },
+    [handleFocusToNextInput, onChange, value, valueLength]
+  );
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      const { key } = e;
+      const target = e.target;
+      switch (key) {
+        case "ArrowRight":
+        case "ArrowDown": {
+          e.preventDefault();
+          return handleFocusToNextInput(index);
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          e.preventDefault();
+          return handleFocusToPrevInput(index);
+        }
+      }
+      const targetValue = target.value.trim();
+      target.setSelectionRange(0, targetValue.length);
+      if (e.key !== "Backspace" || targetValue !== "") {
+        return;
+      }
+      const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
+      onChange == null ? void 0 : onChange(newValue.trim());
+      handleFocusToPrevInput(index);
+    },
+    [handleFocusToNextInput, handleFocusToPrevInput, onChange, value]
+  );
+  const handleFocus = useCallback(
+    (e, index) => {
+      const target = e.target;
+      const prevInputEl = inputRefs.current[index - 1];
+      if (prevInputEl && prevInputEl.value === "") {
+        prevInputEl.focus();
+      }
+      target.setSelectionRange(0, target.value.length);
+    },
+    []
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      e.preventDefault();
+      const pasteData = e.clipboardData.getData("text");
+      if (RE_DIGIT.test(pasteData)) {
+        const pastedValue = pasteData.slice(0, valueLength);
+        const newValue = pastedValue.padEnd(valueLength, " ");
+        onChange == null ? void 0 : onChange(newValue.trim());
+      }
+    },
+    [onChange, valueLength]
+  );
+  return useMemo(
+    () => ({
+      handlers: {
+        handleChange,
+        handleFocus,
+        handleKeyDown,
+        handlePaste
+      },
+      data: {
+        valueItems,
+        inputRefs
+      }
+    }),
+    [
+      handleChange,
+      handleFocus,
+      handleKeyDown,
+      handlePaste,
+      valueItems,
+      inputRefs
+    ]
+  );
+};
+export {
+  useOTPInput
+};

package/dist/components/OtpInput/index.d.ts

@@ -0,0 +1 @@
+export { OtpInput } from './OtpInput';

package/dist/components/OtpInput/index.js

@@ -0,0 +1,4 @@
+import { OtpInput } from "./OtpInput.js";
+export {
+  OtpInput
+};

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,30 @@
+import { RadioGroupProps } from '@headlessui/react';
+
+export interface TRadioOption {
+    value: string;
+    label: string;
+}
+/**
+ * Свойства компонента RadioGroup.
+ */
+export type TProps = Omit<RadioGroupProps, 'value'> & {
+    /**
+     * Массив опций для радиогруппы.
+     * Каждая опция должна содержать значение и метку.
+     */
+    options: TRadioOption[];
+    /**
+     * Выбранное значение опции.
+     * Может быть необязательным, если нет выбранного значения.
+     */
+    value?: TRadioOption['value'];
+    /**
+     * Текст метки, отображаемой над радиогруппой.
+     * Может быть необязательным.
+     */
+    label?: string;
+};
+/**
+ * Компонент RadioGroup для выбора одной опции из нескольких.
+ */
+export declare function RadioGroup({ options, value, onChange, label, ...props }: TProps): import("react/jsx-runtime").JSX.Element;