@admin-layout/tailwind-ui 10.0.9-alpha.71

package/lib/components/OTP/OTPInput.js

@@ -0,0 +1,82 @@
+import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';import {useOTPInput}from'./hooks.js';import {SingleInput}from'./SingleInput.js';import {getPlaceholderValue,isInputNumeric}from'./utils.js';const OTPInput = ({
+  value = '',
+  numInputs = 4,
+  onChange,
+  onPaste,
+  renderInput,
+  shouldAutoFocus = false,
+  inputType = 'text',
+  renderSeparator,
+  placeholder,
+  containerClassName,
+  inputClassName,
+  skipDefaultStyles = false
+}) => {
+  const [{
+    activeInput,
+    otp,
+    handleChange,
+    handleInputChange,
+    handleFocus,
+    handleBlur,
+    handleKeyDown,
+    handlePaste
+  }, inputRefs] = useOTPInput(value, numInputs, onChange, inputType, shouldAutoFocus);
+  // Create default input renderer if not provided
+  const defaultRenderInput = (props, index) => jsx(SingleInput, {
+    ...props,
+    focused: activeInput === index
+  });
+  // Use provided input renderer or default
+  const inputRenderer = renderInput || defaultRenderInput;
+  const placeholderValue = getPlaceholderValue(placeholder, numInputs);
+  const isInputNum = isInputNumeric(inputType);
+  // Handle paste across the whole component
+  const handleComponentPaste = e => {
+    if (onPaste) {
+      onPaste(e);
+      return;
+    }
+    // Default paste behavior
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text/plain');
+    // Prevent pasting if the clipboard data contains non-numeric values for number inputs
+    if (isInputNum && pastedData.split('').some(value => isNaN(Number(value)))) {
+      return;
+    }
+    // Let the hook handle the paste logic
+    handlePaste(e);
+  };
+  return jsx("div", {
+    className: `flex items-center justify-center space-x-2 md:space-x-4 ${containerClassName || ''}`,
+    onPaste: handleComponentPaste,
+    "data-testid": "otp-input-container",
+    children: Array.from({
+      length: numInputs
+    }, (_, index) => jsxs(React__default.Fragment, {
+      children: [inputRenderer({
+        value: otp[index] || '',
+        placeholder: placeholderValue?.[index],
+        ref: element => {
+          if (inputRefs.current) {
+            inputRefs.current[index] = element;
+          }
+        },
+        onChange: handleChange,
+        onFocus: event => handleFocus(event)(index),
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onPaste: handlePaste,
+        autoComplete: 'off',
+        'aria-label': `Please enter OTP character ${index + 1}`,
+        className: skipDefaultStyles ? inputClassName || '' : `${inputClassName || ''}`,
+        type: inputType,
+        inputMode: isInputNum ? 'numeric' : 'text',
+        onInput: handleInputChange
+      }, index), index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator || jsx("span", {
+        className: "text-gray-400",
+        children: "-"
+      }))]
+    }, index))
+  });
+};export{OTPInput};//# sourceMappingURL=OTPInput.js.map

package/lib/components/OTP/OTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/OTP/OTPVerification.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { OTPVerificationProps } from './types';
+export declare const OTPVerification: React.FC<OTPVerificationProps>;
+//# sourceMappingURL=OTPVerification.d.ts.map

package/lib/components/OTP/OTPVerification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPVerification.d.ts","sourceRoot":"","sources":["../../../src/components/OTP/OTPVerification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAG/C,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2K1D,CAAC"}

package/lib/components/OTP/OTPVerification.js

@@ -0,0 +1,155 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect}from'react';import {OTPInput}from'./OTPInput.js';import {icons}from'../../icons/index.js';const OTPVerification = ({
+  length = 4,
+  onVerificationSuccess,
+  onVerificationFailed,
+  onOtpChange,
+  onContinue,
+  onResendCode,
+  validCode = '1234',
+  title = 'Verification Required',
+  description = 'Please enter the code sent to your device to continue.',
+  successMessage = 'Thank you! Your identity has been verified successfully.',
+  errorMessage = 'Invalid code. Please try again.',
+  continueButtonText = 'Continue to Dashboard',
+  resendCodeText = 'Resend Code',
+  verificationDelay = 500,
+  resetDelay = 1000,
+  showFooter = true
+}) => {
+  const [otp, setOtp] = useState('');
+  const [isVerified, setIsVerified] = useState(false);
+  const [isInvalid, setIsInvalid] = useState(false);
+  const {
+    CheckIcon,
+    AlertIcon,
+    LockIcon,
+    KeyIcon
+  } = icons;
+  // Reset component when validCode changes
+  useEffect(() => {
+    setOtp('');
+    setIsVerified(false);
+    setIsInvalid(false);
+  }, [validCode]);
+  const handleChange = value => {
+    setOtp(value);
+    setIsInvalid(false);
+    // Call the external onChange handler if provided
+    if (onOtpChange) {
+      onOtpChange(value);
+    }
+    // Verify when the OTP is fully entered
+    if (value.length === length) {
+      if (value === validCode) {
+        setTimeout(() => {
+          setIsVerified(true);
+          setIsInvalid(false);
+          if (onVerificationSuccess) {
+            onVerificationSuccess();
+          }
+        }, verificationDelay);
+      } else {
+        setIsInvalid(true);
+        if (onVerificationFailed) {
+          onVerificationFailed();
+        }
+        // Reset after delay if incorrect
+        setTimeout(() => {
+          setOtp('');
+          setIsInvalid(false);
+        }, resetDelay);
+      }
+    } else {
+      setIsVerified(false);
+    }
+  };
+  const handleContinue = () => {
+    if (onContinue) {
+      onContinue();
+    } else {
+      setIsVerified(false);
+      setOtp('');
+    }
+  };
+  const handleResendCode = () => {
+    if (onResendCode) {
+      onResendCode();
+    } else {
+      alert('Code resent!');
+    }
+  };
+  return jsxs("div", {
+    className: "max-w-fit w-full bg-white rounded-2xl shadow-xl overflow-hidden",
+    children: [jsxs("div", {
+      className: "p-8",
+      children: [jsx("div", {
+        className: `flex items-center justify-center w-16 h-16 rounded-full mx-auto mb-6 transition-colors duration-300 ${isVerified ? 'bg-green-100' : isInvalid ? 'bg-red-100' : 'bg-blue-100'}`,
+        children: isVerified ? jsx(CheckIcon, {
+          className: "w-8 h-8 text-green-600"
+        }) : isInvalid ? jsx(AlertIcon, {
+          className: "w-8 h-8 text-red-600"
+        }) : jsx(LockIcon, {
+          className: "w-8 h-8 text-blue-600"
+        })
+      }), jsx("h1", {
+        className: `text-2xl font-bold text-center mb-2 ${isVerified ? 'text-green-800' : isInvalid ? 'text-red-800' : 'text-gray-800'}`,
+        children: isVerified ? 'Verification Complete' : title
+      }), jsx("p", {
+        className: `text-center mb-8 ${isVerified ? 'text-green-600' : isInvalid ? 'text-red-600' : 'text-gray-600'}`,
+        children: isVerified ? successMessage : isInvalid ? errorMessage : description
+      }), !isVerified ? jsxs(Fragment, {
+        children: [jsx("div", {
+          className: "mb-6",
+          children: jsx(OTPInput, {
+            value: otp,
+            onChange: handleChange,
+            numInputs: length,
+            shouldAutoFocus: true,
+            inputType: "number",
+            renderSeparator: jsx("span", {
+              className: "text-gray-300",
+              children: "\u2022"
+            }),
+            containerClassName: `justify-center ${isInvalid ? 'animate-shake' : ''}`,
+            inputClassName: isInvalid ? 'border-red-500 text-red-500' : ''
+          })
+        }), jsxs("div", {
+          className: "text-center mb-6",
+          children: [jsx("p", {
+            className: "text-sm text-gray-500",
+            children: "Didn't receive a code?"
+          }), jsx("button", {
+            className: "text-blue-600 font-medium text-sm hover:text-blue-800 transition-colors mt-1",
+            onClick: handleResendCode,
+            children: resendCodeText
+          })]
+        }), jsxs("div", {
+          className: "flex items-center justify-center text-sm text-gray-600",
+          children: [jsx(KeyIcon, {
+            className: "w-4 h-4 mr-2"
+          }), jsx("span", {
+            children: "Secured with end-to-end encryption"
+          })]
+        })]
+      }) : jsx("button", {
+        className: "w-full py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors",
+        onClick: handleContinue,
+        children: continueButtonText
+      })]
+    }), showFooter && jsx("div", {
+      className: "bg-gray-50 py-4 px-8 border-t border-gray-100",
+      children: jsxs("p", {
+        className: "text-xs text-center text-gray-500",
+        children: ["By continuing, you agree to our", ' ', jsx("a", {
+          href: "#",
+          className: "text-blue-600",
+          children: "Terms of Service"
+        }), ' ', "and", ' ', jsx("a", {
+          href: "#",
+          className: "text-blue-600",
+          children: "Privacy Policy"
+        })]
+      })
+    })]
+  });
+};export{OTPVerification};//# sourceMappingURL=OTPVerification.js.map

package/lib/components/OTP/OTPVerification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPVerification.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/OTP/SingleInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const SingleInput: React.ForwardRefExoticComponent<Omit<Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onPaste" | "aria-label" | "autoComplete" | "inputMode" | "onInput"> & {
+    ref: React.RefCallback<HTMLInputElement>;
+    placeholder: string | undefined;
+    className: string;
+    type: import("./types").AllowedInputTypes;
+}>, "ref"> & {
+    focused: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=SingleInput.d.ts.map

package/lib/components/OTP/SingleInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleInput.d.ts","sourceRoot":"","sources":["../../../src/components/OTP/SingleInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,WAAW;SAcZ,MAAA,WAAQ;;;;;aAdyE,OAAO;0CAgDnG,CAAC"}

package/lib/components/OTP/SingleInput.js

@@ -0,0 +1,43 @@
+import {jsx}from'react/jsx-runtime';import {forwardRef}from'react';const SingleInput = forwardRef(({
+  value,
+  focused,
+  type,
+  inputMode,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onPaste,
+  placeholder,
+  onInput,
+  className,
+  ...props
+}, ref) => {
+  return jsx("input", {
+    ref: ref,
+    className: `
+          w-12 h-12 md:w-14 md:h-14 
+          text-center text-xl font-medium 
+          bg-white border rounded-md
+          transition-all duration-200 ease-in-out
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+          ${focused ? 'border-blue-500 ring-2 ring-blue-500' : 'border-gray-300'}
+          ${value ? 'text-gray-900' : 'text-gray-400'}
+          ${className}
+        `,
+    value: value,
+    placeholder: placeholder,
+    type: type,
+    inputMode: inputMode,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    onInput: onInput,
+    "aria-label": props['aria-label'],
+    autoComplete: props.autoComplete,
+    maxLength: 1
+  });
+});
+SingleInput.displayName = 'SingleInput';export{SingleInput};//# sourceMappingURL=SingleInput.js.map

package/lib/components/OTP/SingleInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleInput.js","sources":["../../../src/components/OTP/SingleInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"mEAiBY,MAAA,WAAQ,GAAA,UAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/OTP/hooks.d.ts

@@ -0,0 +1,3 @@
+import { AllowedInputTypes, OTPContextValue } from './types';
+export declare const useOTPInput: (value: string, numInputs: number, onChange: (otp: string) => void, inputType?: AllowedInputTypes, shouldAutoFocus?: boolean) => [OTPContextValue, React.RefObject<(HTMLInputElement | null)[]>];
+//# sourceMappingURL=hooks.d.ts.map

package/lib/components/OTP/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/OTP/hooks.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,eAAO,MAAM,WAAW,UACb,MAAM,aACF,MAAM,YACP,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,cACpB,iBAAiB,oBACX,OAAO,KACzB,CAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,CA2GhE,CAAC"}

package/lib/components/OTP/hooks.js

@@ -0,0 +1,95 @@
+import {useRef,useState,useMemo,useEffect}from'react';import {createOTPInputMachine}from'../../machines/otpMachine.js';import {useMachine}from'@xstate/react';import {otpStringToArray}from'./utils.js';const useOTPInput = (value = '', numInputs = 4, onChange, inputType = 'text', shouldAutoFocus = false) => {
+  const inputRefs = useRef([]);
+  const [prevOtp, setPrevOtp] = useState(value);
+  const otpMachine = useMemo(() => createOTPInputMachine(numInputs, inputType), [numInputs, inputType]);
+  const [state, send] = useMachine(otpMachine);
+  const {
+    otp,
+    activeInput
+  } = state.context;
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, numInputs);
+  }, [numInputs]);
+  useEffect(() => {
+    if (shouldAutoFocus) {
+      inputRefs.current[0]?.focus();
+    }
+  }, [shouldAutoFocus]);
+  useEffect(() => {
+    if (value !== prevOtp) {
+      setPrevOtp(value);
+      send({
+        type: 'SET_OTP',
+        otp: otpStringToArray(value, numInputs)
+      });
+    }
+  }, [value, numInputs, prevOtp, send]);
+  useEffect(() => {
+    inputRefs.current[activeInput]?.focus();
+    inputRefs.current[activeInput]?.select();
+  }, [activeInput]);
+  useEffect(() => {
+    const otpValue = otp.join('');
+    if (otpValue !== prevOtp) {
+      setPrevOtp(otpValue);
+      onChange(otpValue);
+    }
+  }, [otp, onChange, prevOtp]);
+  const handleChange = e => {
+    send({
+      type: 'CHANGE',
+      value: e.target.value
+    });
+  };
+  const handleInputChange = e => {
+    send({
+      type: 'INPUT_CHANGE',
+      value: e.target.value
+    });
+    const nativeEvent = e.nativeEvent;
+    if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
+      e.preventDefault();
+      send({
+        type: 'KEY_DOWN',
+        key: 'Backspace',
+        code: 'Backspace'
+      });
+    }
+  };
+  const handleFocus = e => index => {
+    send({
+      type: 'FOCUS',
+      index
+    });
+    e.target.select();
+  };
+  const handleBlur = () => {
+    send({
+      type: 'BLUR'
+    });
+  };
+  const handleKeyDown = e => {
+    send({
+      type: 'KEY_DOWN',
+      key: e.key,
+      code: e.code
+    });
+  };
+  const handlePaste = e => {
+    e.preventDefault();
+    send({
+      type: 'PASTE',
+      pastedData: e.clipboardData.getData('text/plain')
+    });
+  };
+  return [{
+    activeInput,
+    otp,
+    handleChange,
+    handleInputChange,
+    handleFocus,
+    handleBlur,
+    handleKeyDown,
+    handlePaste
+  }, inputRefs];
+};export{useOTPInput};//# sourceMappingURL=hooks.js.map

package/lib/components/OTP/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/OTP/index.d.ts

@@ -0,0 +1,6 @@
+export { OTPInput } from './OTPInput';
+export { SingleInput } from './SingleInput';
+export type { OTPInputProps, InputProps, AllowedInputTypes } from './types';
+export { useOTPInput } from './hooks';
+export { OTPVerification } from './OTPVerification';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/OTP/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OTP/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/OTP/types.d.ts

@@ -0,0 +1,110 @@
+import { ReactNode } from 'react';
+export type AllowedInputTypes = 'password' | 'text' | 'number' | 'tel';
+export type InputProps = Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onPaste' | 'aria-label' | 'autoComplete' | 'inputMode' | 'onInput'> & {
+    ref: React.RefCallback<HTMLInputElement>;
+    placeholder: string | undefined;
+    className: string;
+    type: AllowedInputTypes;
+}>;
+export type OTPInputProps = {
+    /** Value of the OTP input */
+    value?: string;
+    /** Number of OTP inputs to be rendered */
+    numInputs?: number;
+    /** Callback to be called when the OTP value changes */
+    onChange: (otp: string) => void;
+    /** Callback to be called when pasting content into the component */
+    onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    /** Function to render the input */
+    renderInput?: (inputProps: InputProps, index: number) => ReactNode;
+    /** Whether the first input should be auto focused */
+    shouldAutoFocus?: boolean;
+    /** Placeholder for the inputs */
+    placeholder?: string;
+    /** Function to render the separator */
+    renderSeparator?: ((index: number) => ReactNode) | ReactNode;
+    /** Additional classes for the container */
+    containerClassName?: string;
+    /** Additional classes for the input */
+    inputClassName?: string;
+    /** The type that will be passed to the input being rendered */
+    inputType?: AllowedInputTypes;
+    /** Set to true to use a custom input renderer without default styling */
+    skipDefaultStyles?: boolean;
+};
+export type OTPContextValue = {
+    activeInput: number;
+    otp: string[];
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => (index: number) => void;
+    handleBlur: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+};
+export type OTPInputMachineContext = {
+    otp: string[];
+    activeInput: number;
+    numInputs: number;
+    inputType: AllowedInputTypes;
+};
+export type OTPInputMachineEvent = {
+    type: 'CHANGE';
+    value: string;
+} | {
+    type: 'INPUT_CHANGE';
+    value: string;
+} | {
+    type: 'FOCUS';
+    index: number;
+} | {
+    type: 'BLUR';
+} | {
+    type: 'KEY_DOWN';
+    key: string;
+    code: string;
+} | {
+    type: 'PASTE';
+    pastedData: string;
+} | {
+    type: 'SET_OTP';
+    otp: string[];
+};
+/**
+ * OTP Verification Component Props
+ */
+export interface OTPVerificationProps {
+    /** Number of OTP input fields */
+    length?: number;
+    /** Function to call when OTP is verified successfully */
+    onVerificationSuccess?: () => void;
+    /** Function to call when verification fails */
+    onVerificationFailed?: () => void;
+    /** Function to handle OTP change */
+    onOtpChange?: (value: string) => void;
+    /** Function to call when continue button is clicked after successful verification */
+    onContinue?: () => void;
+    /** Function to call when resend code is clicked */
+    onResendCode?: () => void;
+    /** Valid OTP code for verification (for demo purposes - in production this would come from a backend) */
+    validCode?: string;
+    /** Title text displayed above the OTP input */
+    title?: string;
+    /** Description text below the title */
+    description?: string;
+    /** Success message shown after verification */
+    successMessage?: string;
+    /** Error message shown for invalid OTP */
+    errorMessage?: string;
+    /** Text for continue button after verification */
+    continueButtonText?: string;
+    /** Text for resend code */
+    resendCodeText?: string;
+    /** Verification delay in milliseconds */
+    verificationDelay?: number;
+    /** Reset delay after invalid code in milliseconds */
+    resetDelay?: number;
+    /** Whether to show the footer with Terms and Privacy links */
+    showFooter?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/OTP/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/OTP/types.ts"],"names":[],"mappings":"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"}

package/lib/components/OTP/utils.d.ts

@@ -0,0 +1,26 @@
+import { AllowedInputTypes } from './types';
+/**
+ * Checks if an object is a style object (not null and is an object)
+ */
+export declare const isStyleObject: (obj: unknown) => obj is Record<string, unknown>;
+/**
+ * Checks if the input value is valid based on the input type
+ */
+export declare const isInputValueValid: (value: string, isInputNum: boolean) => boolean;
+/**
+ * Determines if the input is numeric based on the input type
+ */
+export declare const isInputNumeric: (inputType: AllowedInputTypes) => boolean;
+/**
+ * Converts the OTP string to an array of characters
+ */
+export declare const otpStringToArray: (value?: string, length?: number) => string[];
+/**
+ * Gets the placeholder value for the OTP input
+ */
+export declare const getPlaceholderValue: (placeholder?: string, numInputs?: number) => string | undefined;
+/**
+ * Calculates the next input index to focus
+ */
+export declare const getNextInputIndex: (currentIndex: number, direction: 1 | -1, maxIndex: number) => number;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/OTP/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/OTP/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,aAAa,QAAS,OAAO,KAAG,GAAG,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAA4C,CAAC;AAEvH;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,cAAc,OAAO,KAAG,OAGtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,cAAe,iBAAiB,KAAG,OAAwD,CAAC;AAEvH;;GAEG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,sBAAe,MAAM,EACY,CAAC;AAEjF;;GAEG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,MAAM,cAAc,MAAM,KAAG,MAAM,GAAG,SAWvF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,MAAM,KAAG,MACjC,CAAC"}

package/lib/components/OTP/utils.js

@@ -0,0 +1,36 @@
+/**
+ * Checks if an object is a style object (not null and is an object)
+ */
+/**
+ * Checks if the input value is valid based on the input type
+ */
+const isInputValueValid = (value, isInputNum) => {
+  const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
+  return isTypeValid && value.trim().length === 1;
+};
+/**
+ * Determines if the input is numeric based on the input type
+ */
+const isInputNumeric = inputType => inputType === 'number' || inputType === 'tel';
+/**
+ * Converts the OTP string to an array of characters
+ */
+const otpStringToArray = (value, length = 0) => value ? value.toString().split('').slice(0, length) : Array(length).fill('');
+/**
+ * Gets the placeholder value for the OTP input
+ */
+const getPlaceholderValue = (placeholder, numInputs) => {
+  if (typeof placeholder === 'string') {
+    if (placeholder.length === numInputs) {
+      return placeholder;
+    }
+    if (placeholder.length > 0) {
+      console.error('Length of the placeholder should be equal to the number of inputs.');
+    }
+  }
+  return undefined;
+};
+/**
+ * Calculates the next input index to focus
+ */
+const getNextInputIndex = (currentIndex, direction, maxIndex) => Math.max(Math.min(maxIndex, currentIndex + direction), 0);export{getNextInputIndex,getPlaceholderValue,isInputNumeric,isInputValueValid,otpStringToArray};//# sourceMappingURL=utils.js.map

package/lib/components/OTP/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/OTP/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AAEA;;AAGA;AAEA;;AAEG,MAAA,iBAAA,GAAA,CAAA,KAAA,EAAA,UAAA,KAAA;AACH,EAAO,MAAA,WAAA,sBAAkC,CAAA,MAAA,CAAA,KAAM,iBAAqB,KAAA;AAKpE,EAAA,OAAA,WAAA,IAAA,KAAA,CAAA,IAAA,EAAA,CAAA,MAAA,KAAA,CAAA;;AAEG;AACH;AAEA;;AAEG;AACH;AAGA;;AAEG;AACH;AAaA;;AAEG,EAAA,IAAA,OAAA,WAAA,KAAA,QAAA,EAAA;AACH,IAAA,IAAA,WAAa,CAAA,MAAA,KAAA,SAAmC,EAAA;;;;;;;;;;;;"}

package/lib/components/PageContainer/PageContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PageContainerProps } from './types';
+export declare const PageContainer: React.FC<PageContainerProps>;
+//# sourceMappingURL=PageContainer.d.ts.map

package/lib/components/PageContainer/PageContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/PageContainer/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0DtD,CAAC"}