@sytechui/input-otp 2.1.32

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @sytechui/input-otp
+
+InputOTP is a component that allows users to enter otp input. It can be used to get user otp in forms.
+
+This package contains the InputOTPcomponent.
+
+Please refer to the [documentation](https://heroui.com/docs/components/input-otp) for more information.
+
+## Installation
+
+```sh
+yarn add @sytechui/input-otp
+# or
+npm i @sytechui/input-otp
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-IJHHP6DJ.mjs

@@ -0,0 +1,46 @@
+"use client";
+import {
+  useInputOtpContext
+} from "./chunk-R2XKH6IK.mjs";
+
+// src/input-otp-segment.tsx
+import { useMemo } from "react";
+import { dataAttr } from "@sytechui/shared-utils";
+import { cn } from "@sytechui/theme";
+import { jsx } from "react/jsx-runtime";
+var InputOtpSegment = ({
+  ...props
+}) => {
+  var _a;
+  const { classNames, slots, type } = useInputOtpContext();
+  const passwordCharStyles = cn(classNames == null ? void 0 : classNames.passwordChar);
+  const caretStyles = cn(classNames == null ? void 0 : classNames.caret);
+  const segmentStyles = cn(classNames == null ? void 0 : classNames.segment);
+  const displayValue = useMemo(() => {
+    var _a2, _b;
+    if (props.isActive && !props.char) {
+      return /* @__PURE__ */ jsx("div", { className: cn((_a2 = slots.caret) == null ? void 0 : _a2.call(slots, { class: caretStyles })) });
+    }
+    if (props.char) {
+      return type === "password" ? /* @__PURE__ */ jsx("div", { className: cn((_b = slots.passwordChar) == null ? void 0 : _b.call(slots, { class: passwordCharStyles })) }) : /* @__PURE__ */ jsx("div", { children: props.char });
+    }
+    return /* @__PURE__ */ jsx("div", { children: props.placeholderChar });
+  }, [props.char, props.isActive, props.placeholderChar, type]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn((_a = slots.segment) == null ? void 0 : _a.call(slots, { class: segmentStyles })),
+      "data-active": dataAttr(props.isActive),
+      "data-focus": dataAttr(props.isFocused && props.isActive),
+      "data-focus-visible": dataAttr(props.isFocusVisible && props.isActive),
+      "data-has-value": dataAttr(!!props.char),
+      "data-slot": "segment2",
+      role: "presentation",
+      children: displayValue
+    }
+  );
+};
+
+export {
+  InputOtpSegment
+};

package/dist/chunk-R2XKH6IK.mjs

@@ -0,0 +1,13 @@
+"use client";
+
+// src/input-otp-context.ts
+import { createContext } from "@sytechui/react-utils";
+var [InputOtpProvider, useInputOtpContext] = createContext({
+  name: "InputOtpContext",
+  errorMessage: "useInputOtpContext: `context` is undefined. Seems like you forgot to wrap all input-otp components within `<InputOtp />`"
+});
+
+export {
+  InputOtpProvider,
+  useInputOtpContext
+};

package/dist/chunk-VZ7MKXTH.mjs

@@ -0,0 +1,250 @@
+"use client";
+
+// src/use-input-otp.ts
+import { mapPropsVariants, useProviderContext } from "@sytechui/system";
+import { inputOtp, cn } from "@sytechui/theme";
+import { filterDOMProps, useDOMRef } from "@sytechui/react-utils";
+import { dataAttr, objectToDeps, isPatternNumeric, chain, mergeProps } from "@sytechui/shared-utils";
+import { useFormReset } from "@sytechui/use-form-reset";
+import { useCallback, useMemo } from "react";
+import { useControlledState } from "@react-stately/utils";
+import { useFormValidationState } from "@react-stately/form";
+import { useFormValidation } from "@react-aria/form";
+import { useFocusRing } from "@react-aria/focus";
+import { FormContext, useSlottedContext } from "@sytechui/form";
+function useInputOtp(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = useProviderContext();
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const [props, variantProps] = mapPropsVariants(originalProps, inputOtp.variantKeys);
+  const {
+    ref,
+    baseRef,
+    as,
+    className,
+    classNames,
+    length = 4,
+    autoFocus,
+    "aria-label": ariaLabel = "One-time password input",
+    onValueChange = () => {
+    },
+    allowedKeys = "^[0-9]*$",
+    validationBehavior = (_a = formValidationBehavior != null ? formValidationBehavior : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _a : "native",
+    type,
+    name,
+    maxLength,
+    minLength,
+    textAlign = "center",
+    onComplete = () => {
+    },
+    pushPasswordManagerStrategy,
+    pasteTransformer,
+    containerClassName,
+    noScriptCSSFallback,
+    onChange,
+    inputMode,
+    ...otherProps
+  } = props;
+  const Component = as || "div";
+  const inputRef = useDOMRef(ref);
+  const baseDomRef = useDOMRef(baseRef);
+  const { isFocusVisible, isFocused, focusProps } = useFocusRing({
+    autoFocus,
+    isTextInput: true
+  });
+  const handleValueChange = useCallback(
+    (value2) => {
+      onValueChange(value2 != null ? value2 : "");
+    },
+    [onValueChange]
+  );
+  const [value, setValue] = useControlledState(
+    props.value,
+    (_b = props.defaultValue) != null ? _b : "",
+    handleValueChange
+  );
+  const disableAnimation = (_d = (_c = originalProps.disableAnimation) != null ? _c : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _d : false;
+  const isDisabled = originalProps.isDisabled;
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
+  const validationState = useFormValidationState({
+    ...props,
+    validationBehavior,
+    value
+  });
+  useFormReset(inputRef, value, setValue);
+  useFormValidation({ ...props, validationBehavior }, validationState, inputRef);
+  const {
+    isInvalid: isAriaInvalid,
+    validationErrors,
+    validationDetails
+  } = validationState.displayValidation;
+  const isReadOnly = originalProps.isReadOnly;
+  const isRequired = originalProps.isRequired;
+  const isInvalid = originalProps.isInvalid || isAriaInvalid;
+  const errorMessage = typeof props.errorMessage === "function" ? props.errorMessage({ isInvalid, validationErrors, validationDetails }) : props.errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" "));
+  const description = props.description;
+  const hasHelper = !!description || !!errorMessage;
+  const slots = useMemo(
+    () => inputOtp({
+      ...variantProps,
+      disableAnimation,
+      isInvalid,
+      isReadOnly
+    }),
+    [objectToDeps(variantProps), disableAnimation, isInvalid, isReadOnly]
+  );
+  const getBaseProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ref: baseDomRef,
+        className: slots.base({
+          class: baseStyles
+        }),
+        "data-slot": "base",
+        "data-disabled": dataAttr(isDisabled),
+        "data-invalid": dataAttr(isInvalid),
+        "data-required": dataAttr(originalProps == null ? void 0 : originalProps.isRequired),
+        "data-readonly": dataAttr(originalProps == null ? void 0 : originalProps.isReadOnly),
+        "data-filled": dataAttr(value.length === length),
+        "aria-label": ariaLabel,
+        "aria-required": dataAttr(originalProps.isRequired),
+        "aria-readonly": dataAttr(originalProps == null ? void 0 : originalProps.isReadOnly),
+        role: "base",
+        ...mergeProps(
+          filterDOMProps(otherProps, {
+            enabled: true
+          }),
+          filterDOMProps(props2)
+        ),
+        onChange: (e) => {
+          var _a2;
+          const val = (_a2 = e.target) == null ? void 0 : _a2.value;
+          const regex = new RegExp(allowedKeys);
+          if (regex.test(val)) {
+            onChange == null ? void 0 : onChange(e);
+          }
+        }
+      };
+    },
+    [baseDomRef, slots, baseStyles, isDisabled, isInvalid, isRequired, isReadOnly, value, length]
+  );
+  const getInputOtpProps = useCallback(
+    (props2 = {}) => {
+      var _a2;
+      const otpProps = {
+        ...focusProps,
+        required: isRequired,
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        pattern: allowedKeys,
+        maxLength: maxLength != null ? maxLength : length,
+        minLength: minLength != null ? minLength : length,
+        textAlign,
+        ref: inputRef,
+        name,
+        value,
+        autoFocus,
+        onChange: setValue,
+        onBlur: chain(focusProps.onBlur, props2 == null ? void 0 : props2.onBlur),
+        onComplete,
+        pushPasswordManagerStrategy,
+        pasteTransformer,
+        noScriptCSSFallback,
+        inputMode: inputMode != null ? inputMode : isPatternNumeric(allowedKeys) ? "numeric" : "text",
+        containerClassName: (_a2 = slots.wrapper) == null ? void 0 : _a2.call(slots, { class: cn(classNames == null ? void 0 : classNames.wrapper, containerClassName) }),
+        ...props2
+      };
+      return otpProps;
+    },
+    [
+      inputMode,
+      isRequired,
+      isDisabled,
+      isReadOnly,
+      allowedKeys,
+      inputRef,
+      name,
+      value,
+      length,
+      setValue,
+      props.onBlur,
+      onComplete,
+      autoFocus
+    ]
+  );
+  const getSegmentWrapperProps = useCallback(
+    (props2 = {}) => {
+      return {
+        className: slots.segmentWrapper({
+          class: cn(classNames == null ? void 0 : classNames.segmentWrapper, props2 == null ? void 0 : props2.className)
+        }),
+        "data-slot": "segment-wrapper",
+        "data-disabled": dataAttr(isDisabled),
+        "aria-label": ariaLabel,
+        ...props2
+      };
+    },
+    [classNames == null ? void 0 : classNames.segmentWrapper, isDisabled]
+  );
+  const getHelperWrapperProps = useCallback(
+    (props2 = {}) => {
+      return {
+        className: slots.helperWrapper({
+          class: cn(classNames == null ? void 0 : classNames.helperWrapper, props2 == null ? void 0 : props2.className)
+        }),
+        "data-slot": "helper-wrapper",
+        ...props2
+      };
+    },
+    [classNames == null ? void 0 : classNames.helperWrapper]
+  );
+  const getErrorMessageProps = useCallback(
+    (props2 = {}) => {
+      return {
+        className: slots.errorMessage({
+          class: cn(classNames == null ? void 0 : classNames.errorMessage, props2 == null ? void 0 : props2.className)
+        }),
+        "data-slot": "error-message",
+        ...props2
+      };
+    },
+    [classNames == null ? void 0 : classNames.errorMessage]
+  );
+  const getDescriptionProps = useCallback(
+    (props2 = {}) => {
+      return {
+        className: slots.description({
+          class: cn(classNames == null ? void 0 : classNames.description, props2 == null ? void 0 : props2.className)
+        }),
+        "data-slot": "description",
+        ...props2
+      };
+    },
+    [classNames == null ? void 0 : classNames.description]
+  );
+  return {
+    Component,
+    inputRef,
+    length,
+    value,
+    type,
+    slots,
+    hasHelper,
+    classNames,
+    isInvalid,
+    description,
+    errorMessage,
+    isFocusVisible,
+    isFocused,
+    getBaseProps,
+    getInputOtpProps,
+    getSegmentWrapperProps,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps
+  };
+}
+
+export {
+  useInputOtp
+};

package/dist/chunk-ZVXVMEIW.mjs

@@ -0,0 +1,72 @@
+"use client";
+import {
+  InputOtpSegment
+} from "./chunk-IJHHP6DJ.mjs";
+import {
+  InputOtpProvider
+} from "./chunk-R2XKH6IK.mjs";
+import {
+  useInputOtp
+} from "./chunk-VZ7MKXTH.mjs";
+
+// src/input-otp.tsx
+import { forwardRef } from "@sytechui/system";
+import { useMemo } from "react";
+import { OTPInput } from "input-otp";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOtp = forwardRef((props, ref) => {
+  const context = useInputOtp({ ...props, ref });
+  const {
+    Component,
+    hasHelper,
+    isInvalid,
+    errorMessage,
+    description,
+    isFocusVisible,
+    isFocused,
+    getBaseProps,
+    getInputOtpProps,
+    getSegmentWrapperProps,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps
+  } = context;
+  const helperSection = useMemo(() => {
+    if (!hasHelper) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: isInvalid && errorMessage ? /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: errorMessage }) : /* @__PURE__ */ jsx("div", { ...getDescriptionProps(), children: description }) });
+  }, [
+    hasHelper,
+    isInvalid,
+    errorMessage,
+    description,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps
+  ]);
+  return /* @__PURE__ */ jsx(InputOtpProvider, { value: context, children: /* @__PURE__ */ jsxs(Component, { ...getBaseProps(), children: [
+    /* @__PURE__ */ jsx(
+      OTPInput,
+      {
+        ...getInputOtpProps(),
+        render: ({ slots }) => /* @__PURE__ */ jsx("div", { ...getSegmentWrapperProps(), children: slots.map((slot, idx) => /* @__PURE__ */ jsx(
+          InputOtpSegment,
+          {
+            ...slot,
+            isFocusVisible,
+            isFocused
+          },
+          idx
+        )) })
+      }
+    ),
+    helperSection
+  ] }) });
+});
+InputOtp.displayName = "HeroUI.InputOtp";
+var input_otp_default = InputOtp;
+
+export {
+  input_otp_default
+};

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+export { default as InputOtp, InputOtpProps } from './input-otp.mjs';
+export { useInputOtp } from './use-input-otp.mjs';
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import '@sytechui/system';
+import 'tailwind-variants';
+import 'react';
+import '@sytechui/theme';
+import '@sytechui/react-utils';
+import '@react-types/textfield';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as InputOtp, InputOtpProps } from './input-otp.js';
+export { useInputOtp } from './use-input-otp.js';
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import '@sytechui/system';
+import 'tailwind-variants';
+import 'react';
+import '@sytechui/theme';
+import '@sytechui/react-utils';
+import '@react-types/textfield';