@plexui/ui 0.7.41 → 0.7.43

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js

@@ -69,7 +69,7 @@ export const FloatingLabelInput = forwardRef(function FloatingLabelInput(props,
         }
     }, [onAnimationStart, onAutofill]);
     return (_jsxs("div", { className: clsx(s.Root, className), children: [_jsxs("div", { className: clsx(s.FieldFootprint, {
-                    [s.HasValue]: hasValue,
+                    [s.HasValue]: hasValue || !!startAdornment,
                 }), "data-focused": focused ? "" : undefined, "data-has-value": hasValue ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, onMouseDown: handleContainerMouseDown, children: [_jsx("label", { className: s.TypeableLabel, htmlFor: inputId, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), startAdornment && (_jsx("div", { className: s.StartAdornment, children: startAdornment })), _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: inputId, name: name, type: type, className: s.Input, value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), endAdornment && (_jsx("div", { className: s.EndAdornment, children: endAdornment })), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.ClearButton, onClick: onClear, children: _jsx(X, {}) }))] }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
 });
 FloatingLabelInput.displayName = "FloatingLabelInput";

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { FieldError } from \"../FieldError\"\nimport { X } from \"../Icon\"\n\nimport s from \"./FloatingLabelInput.module.css\"\n\nexport type FloatingLabelInputProps = {\n  /**\n   * Label text for the floating label\n   */\n  label: string\n  /**\n   * Error message to display below the input\n   */\n  errorMessage?: string\n  /**\n   * Mark the input as invalid\n   * @default false (or true if errorMessage is provided)\n   */\n  invalid?: boolean\n  /**\n   * Disables the input visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Makes the input read-only\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Callback invoked when the clear button is clicked\n   */\n  onClear?: () => void\n  /**\n   * Callback invoked when the input is autofilled by the browser\n   */\n  onAutofill?: () => void\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Content rendered after the input, before the clear button.\n   * Useful for toggle buttons (e.g. password visibility), icons, or other interactive elements.\n   */\n  startAdornment?: React.ReactNode\n  endAdornment?: React.ReactNode\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nexport const FloatingLabelInput = forwardRef<HTMLInputElement, FloatingLabelInputProps>(\n  function FloatingLabelInput(props, ref) {\n    const {\n      label,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      readOnly = false,\n      onClear,\n      onAutofill,\n      allowAutofillExtensions = false,\n      startAdornment,\n      endAdornment,\n      className,\n      \"id\": idProp,\n      name,\n      type = \"text\",\n      value,\n      defaultValue,\n      onChange,\n      onFocus,\n      onBlur,\n      onAnimationStart,\n      \"aria-describedby\": ariaDescribedByProp,\n      ...restProps\n    } = props\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const generatedId = useId()\n    const inputId = idProp || `floating-label-input-${generatedId}`\n    const errorId = `${inputId}-error`\n\n    const [focused, setFocused] = useState(false)\n    const [hasValue, setHasValue] = useState(() => {\n      return !!(value !== undefined ? value : defaultValue)\n    })\n\n    // Sync hasValue with controlled value prop\n    useEffect(() => {\n      if (value !== undefined) {\n        setHasValue(!!value)\n      }\n    }, [value])\n\n    // Determine invalid state from prop or presence of errorMessage\n    const invalid = invalidProp ?? !!errorMessage\n\n    // Determine if clear button should be shown\n    const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n\n    // Merge aria-describedby with error id\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    // Handle clicks on the container to focus the input\n    const handleContainerMouseDown = useCallback((evt: React.MouseEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      if (input.contains(evt.target)) {\n        return\n      }\n      if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n        return\n      }\n      evt.preventDefault()\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n      const length = input.value.length\n      input.setSelectionRange(length, length)\n    }, [])\n\n    const handleFocus = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true)\n        onFocus?.(evt)\n      },\n      [onFocus],\n    )\n\n    const handleBlur = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(false)\n        onBlur?.(evt)\n      },\n      [onBlur],\n    )\n\n    const handleChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        setHasValue(!!evt.currentTarget.value)\n        onChange?.(evt)\n      },\n      [onChange],\n    )\n\n    const handleAnimationStart = useCallback(\n      (evt: React.AnimationEvent<HTMLInputElement>) => {\n        onAnimationStart?.(evt)\n        // Detect browser autofill\n        if (evt.animationName === \"native-autofill-in\") {\n          setHasValue(true)\n          onAutofill?.()\n        }\n      },\n      [onAnimationStart, onAutofill],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: hasValue,\n          })}\n          data-focused={focused ? \"\" : undefined}\n          data-has-value={hasValue ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <label className={s.TypeableLabel} htmlFor={inputId}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </label>\n          {startAdornment && (\n            <div className={s.StartAdornment}>{startAdornment}</div>\n          )}\n          <input\n            {...restProps}\n            ref={mergeRefs([ref, inputRef])}\n            id={inputId}\n            name={name}\n            type={type}\n            className={s.Input}\n            value={value}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={ariaDescribedBy}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onAnimationStart={handleAnimationStart}\n            data-lpignore={allowAutofillExtensions ? undefined : true}\n            data-1p-ignore={allowAutofillExtensions ? undefined : true}\n          />\n          {endAdornment && (\n            <div className={s.EndAdornment}>\n              {endAdornment}\n            </div>\n          )}\n          {showClearButton && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear input\"\n              className={s.ClearButton}\n              onClick={onClear}\n            >\n              <X />\n            </button>\n          )}\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelInput.displayName = \"FloatingLabelInput\"\n"]}
+{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { FieldError } from \"../FieldError\"\nimport { X } from \"../Icon\"\n\nimport s from \"./FloatingLabelInput.module.css\"\n\nexport type FloatingLabelInputProps = {\n  /**\n   * Label text for the floating label\n   */\n  label: string\n  /**\n   * Error message to display below the input\n   */\n  errorMessage?: string\n  /**\n   * Mark the input as invalid\n   * @default false (or true if errorMessage is provided)\n   */\n  invalid?: boolean\n  /**\n   * Disables the input visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Makes the input read-only\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Callback invoked when the clear button is clicked\n   */\n  onClear?: () => void\n  /**\n   * Callback invoked when the input is autofilled by the browser\n   */\n  onAutofill?: () => void\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Content rendered after the input, before the clear button.\n   * Useful for toggle buttons (e.g. password visibility), icons, or other interactive elements.\n   */\n  startAdornment?: React.ReactNode\n  endAdornment?: React.ReactNode\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nexport const FloatingLabelInput = forwardRef<HTMLInputElement, FloatingLabelInputProps>(\n  function FloatingLabelInput(props, ref) {\n    const {\n      label,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      readOnly = false,\n      onClear,\n      onAutofill,\n      allowAutofillExtensions = false,\n      startAdornment,\n      endAdornment,\n      className,\n      \"id\": idProp,\n      name,\n      type = \"text\",\n      value,\n      defaultValue,\n      onChange,\n      onFocus,\n      onBlur,\n      onAnimationStart,\n      \"aria-describedby\": ariaDescribedByProp,\n      ...restProps\n    } = props\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const generatedId = useId()\n    const inputId = idProp || `floating-label-input-${generatedId}`\n    const errorId = `${inputId}-error`\n\n    const [focused, setFocused] = useState(false)\n    const [hasValue, setHasValue] = useState(() => {\n      return !!(value !== undefined ? value : defaultValue)\n    })\n\n    // Sync hasValue with controlled value prop\n    useEffect(() => {\n      if (value !== undefined) {\n        setHasValue(!!value)\n      }\n    }, [value])\n\n    // Determine invalid state from prop or presence of errorMessage\n    const invalid = invalidProp ?? !!errorMessage\n\n    // Determine if clear button should be shown\n    const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n\n    // Merge aria-describedby with error id\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    // Handle clicks on the container to focus the input\n    const handleContainerMouseDown = useCallback((evt: React.MouseEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      if (input.contains(evt.target)) {\n        return\n      }\n      if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n        return\n      }\n      evt.preventDefault()\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n      const length = input.value.length\n      input.setSelectionRange(length, length)\n    }, [])\n\n    const handleFocus = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true)\n        onFocus?.(evt)\n      },\n      [onFocus],\n    )\n\n    const handleBlur = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(false)\n        onBlur?.(evt)\n      },\n      [onBlur],\n    )\n\n    const handleChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        setHasValue(!!evt.currentTarget.value)\n        onChange?.(evt)\n      },\n      [onChange],\n    )\n\n    const handleAnimationStart = useCallback(\n      (evt: React.AnimationEvent<HTMLInputElement>) => {\n        onAnimationStart?.(evt)\n        // Detect browser autofill\n        if (evt.animationName === \"native-autofill-in\") {\n          setHasValue(true)\n          onAutofill?.()\n        }\n      },\n      [onAnimationStart, onAutofill],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: hasValue || !!startAdornment,\n          })}\n          data-focused={focused ? \"\" : undefined}\n          data-has-value={hasValue ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <label className={s.TypeableLabel} htmlFor={inputId}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </label>\n          {startAdornment && (\n            <div className={s.StartAdornment}>{startAdornment}</div>\n          )}\n          <input\n            {...restProps}\n            ref={mergeRefs([ref, inputRef])}\n            id={inputId}\n            name={name}\n            type={type}\n            className={s.Input}\n            value={value}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={ariaDescribedBy}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onAnimationStart={handleAnimationStart}\n            data-lpignore={allowAutofillExtensions ? undefined : true}\n            data-1p-ignore={allowAutofillExtensions ? undefined : true}\n          />\n          {endAdornment && (\n            <div className={s.EndAdornment}>\n              {endAdornment}\n            </div>\n          )}\n          {showClearButton && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear input\"\n              className={s.ClearButton}\n              onClick={onClear}\n            >\n              <X />\n            </button>\n          )}\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelInput.displayName = \"FloatingLabelInput\"\n"]}

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.module.css

@@ -88,11 +88,6 @@
   flex-shrink: 0;
   position: relative;
   z-index: 1;
-  opacity: 0;
-  transition: opacity var(--floating-input-transition-duration) ease-in-out;
-}.FieldFootprint[data-focused] .StartAdornment,
-.HasValue .StartAdornment {
-  opacity: 1;
 }/* Input element */.Input {
   background-color: transparent;
   outline: none;

package/dist/es/components/OTPInput/OTPInput.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Fragment, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { FieldError } from "../FieldError";
+import s from "./OTPInput.module.css";
+function sanitizeDigits(value, length) {
+    return value.replace(/\D/g, "").slice(0, length);
+}
+function shouldShowGap(index, grouping) {
+    let pos = 0;
+    for (const groupSize of grouping) {
+        pos += groupSize;
+        if (index === pos)
+            return true;
+    }
+    return false;
+}
+export const OTPInput = forwardRef(function OTPInput(props, ref) {
+    const { length: lengthProp = 6, value, onChange, onComplete, grouping, invalid = false, errorMessage, disabled = false, autoFocus = false, className, } = props;
+    const length = Math.max(1, Math.floor(lengthProp));
+    const controlledValue = useMemo(() => sanitizeDigits(value ?? "", length), [value, length]);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => sanitizeDigits(value ?? "", length));
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const rootRef = useRef(null);
+    const inputRefs = useRef([]);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    useEffect(() => {
+        if (isControlled) {
+            setInternalValue(controlledValue);
+            return;
+        }
+        setInternalValue((current) => sanitizeDigits(current, length));
+    }, [controlledValue, isControlled, length]);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const digits = useMemo(() => Array.from({ length }, (_, index) => currentValue[index] ?? ""), [currentValue, length]);
+    const errorId = `otp-input-${useId()}-error`;
+    useEffect(() => {
+        if (!autoFocus || disabled)
+            return;
+        inputRefs.current[0]?.focus();
+    }, [autoFocus, disabled]);
+    const commitValue = useCallback((nextValueRaw) => {
+        const nextValue = sanitizeDigits(nextValueRaw, length);
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        if (nextValue !== currentValue) {
+            onChange?.(nextValue);
+        }
+        if (nextValue.length === length) {
+            onComplete?.(nextValue);
+        }
+        return nextValue;
+    }, [currentValue, isControlled, length, onChange, onComplete]);
+    const focusCell = useCallback((index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length - 1));
+        const input = inputRefs.current[clampedIndex];
+        if (!input)
+            return;
+        input.focus();
+        input.setSelectionRange(1, 1);
+    }, [length]);
+    const handleCellClick = useCallback((index) => {
+        if (disabled)
+            return;
+        focusCell(index);
+    }, [disabled, focusCell]);
+    const handlePaste = useCallback((index, evt) => {
+        if (disabled)
+            return;
+        evt.preventDefault();
+        const pastedDigits = sanitizeDigits(evt.clipboardData.getData("text"), length);
+        if (!pastedDigits)
+            return;
+        const nextDigits = [...digits];
+        let writeIndex = index;
+        for (const digit of pastedDigits) {
+            if (writeIndex >= length)
+                break;
+            nextDigits[writeIndex] = digit;
+            writeIndex += 1;
+        }
+        const nextValue = commitValue(nextDigits.join(""));
+        const nextFocusIndex = Math.min(nextValue.length, length - 1);
+        focusCell(nextFocusIndex);
+    }, [commitValue, digits, disabled, focusCell, length]);
+    const handleChange = useCallback((index, evt) => {
+        if (disabled)
+            return;
+        const typedDigits = evt.currentTarget.value.replace(/\D/g, "");
+        if (!typedDigits) {
+            const nextDigits = [...digits];
+            nextDigits[index] = "";
+            commitValue(nextDigits.join(""));
+            return;
+        }
+        const nextDigits = [...digits];
+        if (typedDigits.length === 1) {
+            nextDigits[index] = typedDigits[0];
+            const nextValue = commitValue(nextDigits.join(""));
+            if (index < length - 1 && nextValue.length > index) {
+                focusCell(index + 1);
+            }
+            return;
+        }
+        let writeIndex = index;
+        for (const digit of typedDigits) {
+            if (writeIndex >= length)
+                break;
+            nextDigits[writeIndex] = digit;
+            writeIndex += 1;
+        }
+        const nextValue = commitValue(nextDigits.join(""));
+        const nextFocusIndex = Math.min(nextValue.length, length - 1);
+        focusCell(nextFocusIndex);
+    }, [commitValue, digits, disabled, focusCell, length]);
+    const handleKeyDown = useCallback((index, evt) => {
+        if (disabled)
+            return;
+        if (evt.key === "Backspace") {
+            evt.preventDefault();
+            const nextDigits = [...digits];
+            if (nextDigits[index]) {
+                nextDigits[index] = "";
+                commitValue(nextDigits.join(""));
+                return;
+            }
+            if (index > 0) {
+                nextDigits[index - 1] = "";
+                commitValue(nextDigits.join(""));
+                focusCell(index - 1);
+            }
+            return;
+        }
+        if (evt.key === "Delete") {
+            evt.preventDefault();
+            const nextDigits = [...digits];
+            nextDigits[index] = "";
+            commitValue(nextDigits.join(""));
+            return;
+        }
+        if (evt.key === "ArrowLeft") {
+            evt.preventDefault();
+            focusCell(index - 1);
+            return;
+        }
+        if (evt.key === "ArrowRight") {
+            evt.preventDefault();
+            focusCell(index + 1);
+        }
+    }, [commitValue, digits, disabled, focusCell]);
+    const handleBlur = useCallback(() => {
+        requestAnimationFrame(() => {
+            const activeElement = document.activeElement;
+            const isAnyCellFocused = inputRefs.current.some((input) => input === activeElement);
+            if (!isAnyCellFocused) {
+                setFocusedIndex(-1);
+            }
+        });
+    }, []);
+    return (_jsxs("div", { ref: rootRef, className: clsx(s.Root, className), children: [_jsx("div", { className: s.Cells, children: Array.from({ length }, (_, index) => {
+                    const isGroupGap = grouping ? shouldShowGap(index, grouping) : false;
+                    return (_jsxs(Fragment, { children: [isGroupGap && _jsx("div", { className: s.GroupGap, "aria-hidden": true }), _jsxs("div", { className: clsx(s.Cell, {
+                                    [s.CellFocused]: focusedIndex === index,
+                                    [s.CellFilled]: !!digits[index],
+                                }), "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, onClick: () => handleCellClick(index), children: [_jsx("input", { ref: (element) => {
+                                            inputRefs.current[index] = element;
+                                        }, type: "text", inputMode: "numeric", pattern: "[0-9]", maxLength: 1, value: digits[index], disabled: disabled, className: s.CellInput, onChange: (evt) => handleChange(index, evt), onKeyDown: (evt) => handleKeyDown(index, evt), onFocus: () => setFocusedIndex(index), onBlur: handleBlur, onPaste: (evt) => handlePaste(index, evt), "aria-label": `Digit ${index + 1}`, "aria-invalid": invalid ? true : undefined, "aria-describedby": errorMessage ? errorId : undefined, autoComplete: index === 0 ? "one-time-code" : "off" }), !digits[index] && focusedIndex !== index && _jsx("div", { className: s.DotPlaceholder })] })] }, index));
+                }) }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
+});
+OTPInput.displayName = "OTPInput";
+//# sourceMappingURL=OTPInput.js.map

package/dist/es/components/OTPInput/OTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n  Fragment,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\n\nimport { FieldError } from \"../FieldError\"\n\nimport s from \"./OTPInput.module.css\"\n\nexport type OTPInputProps = {\n  length?: number\n  value?: string\n  onChange?: (value: string) => void\n  onComplete?: (value: string) => void\n  grouping?: number[]\n  invalid?: boolean\n  errorMessage?: string\n  disabled?: boolean\n  autoFocus?: boolean\n  className?: string\n}\n\nfunction sanitizeDigits(value: string, length: number): string {\n  return value.replace(/\\D/g, \"\").slice(0, length)\n}\n\nfunction shouldShowGap(index: number, grouping: number[]): boolean {\n  let pos = 0\n  for (const groupSize of grouping) {\n    pos += groupSize\n    if (index === pos) return true\n  }\n  return false\n}\n\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(function OTPInput(props, ref) {\n  const {\n    length: lengthProp = 6,\n    value,\n    onChange,\n    onComplete,\n    grouping,\n    invalid = false,\n    errorMessage,\n    disabled = false,\n    autoFocus = false,\n    className,\n  } = props\n\n  const length = Math.max(1, Math.floor(lengthProp))\n  const controlledValue = useMemo(() => sanitizeDigits(value ?? \"\", length), [value, length])\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = useState(() => sanitizeDigits(value ?? \"\", length))\n  const [focusedIndex, setFocusedIndex] = useState(-1)\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([])\n\n  useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, [])\n\n  useEffect(() => {\n    if (isControlled) {\n      setInternalValue(controlledValue)\n      return\n    }\n    setInternalValue((current) => sanitizeDigits(current, length))\n  }, [controlledValue, isControlled, length])\n\n  const currentValue = isControlled ? controlledValue : internalValue\n  const digits = useMemo(\n    () => Array.from({ length }, (_, index) => currentValue[index] ?? \"\"),\n    [currentValue, length],\n  )\n\n  const errorId = `otp-input-${useId()}-error`\n\n  useEffect(() => {\n    if (!autoFocus || disabled) return\n    inputRefs.current[0]?.focus()\n  }, [autoFocus, disabled])\n\n  const commitValue = useCallback(\n    (nextValueRaw: string) => {\n      const nextValue = sanitizeDigits(nextValueRaw, length)\n      if (!isControlled) {\n        setInternalValue(nextValue)\n      }\n      if (nextValue !== currentValue) {\n        onChange?.(nextValue)\n      }\n      if (nextValue.length === length) {\n        onComplete?.(nextValue)\n      }\n      return nextValue\n    },\n    [currentValue, isControlled, length, onChange, onComplete],\n  )\n\n  const focusCell = useCallback((index: number) => {\n    const clampedIndex = Math.max(0, Math.min(index, length - 1))\n    const input = inputRefs.current[clampedIndex]\n    if (!input) return\n    input.focus()\n    input.setSelectionRange(1, 1)\n  }, [length])\n\n  const handleCellClick = useCallback((index: number) => {\n    if (disabled) return\n    focusCell(index)\n  }, [disabled, focusCell])\n\n  const handlePaste = useCallback(\n    (index: number, evt: React.ClipboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n      evt.preventDefault()\n      const pastedDigits = sanitizeDigits(evt.clipboardData.getData(\"text\"), length)\n      if (!pastedDigits) return\n\n      const nextDigits = [...digits]\n      let writeIndex = index\n\n      for (const digit of pastedDigits) {\n        if (writeIndex >= length) break\n        nextDigits[writeIndex] = digit\n        writeIndex += 1\n      }\n\n      const nextValue = commitValue(nextDigits.join(\"\"))\n      const nextFocusIndex = Math.min(nextValue.length, length - 1)\n      focusCell(nextFocusIndex)\n    },\n    [commitValue, digits, disabled, focusCell, length],\n  )\n\n  const handleChange = useCallback(\n    (index: number, evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return\n      const typedDigits = evt.currentTarget.value.replace(/\\D/g, \"\")\n\n      if (!typedDigits) {\n        const nextDigits = [...digits]\n        nextDigits[index] = \"\"\n        commitValue(nextDigits.join(\"\"))\n        return\n      }\n\n      const nextDigits = [...digits]\n\n      if (typedDigits.length === 1) {\n        nextDigits[index] = typedDigits[0]\n        const nextValue = commitValue(nextDigits.join(\"\"))\n        if (index < length - 1 && nextValue.length > index) {\n          focusCell(index + 1)\n        }\n        return\n      }\n\n      let writeIndex = index\n      for (const digit of typedDigits) {\n        if (writeIndex >= length) break\n        nextDigits[writeIndex] = digit\n        writeIndex += 1\n      }\n\n      const nextValue = commitValue(nextDigits.join(\"\"))\n      const nextFocusIndex = Math.min(nextValue.length, length - 1)\n      focusCell(nextFocusIndex)\n    },\n    [commitValue, digits, disabled, focusCell, length],\n  )\n\n  const handleKeyDown = useCallback(\n    (index: number, evt: React.KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n\n      if (evt.key === \"Backspace\") {\n        evt.preventDefault()\n        const nextDigits = [...digits]\n\n        if (nextDigits[index]) {\n          nextDigits[index] = \"\"\n          commitValue(nextDigits.join(\"\"))\n          return\n        }\n\n        if (index > 0) {\n          nextDigits[index - 1] = \"\"\n          commitValue(nextDigits.join(\"\"))\n          focusCell(index - 1)\n        }\n        return\n      }\n\n      if (evt.key === \"Delete\") {\n        evt.preventDefault()\n        const nextDigits = [...digits]\n        nextDigits[index] = \"\"\n        commitValue(nextDigits.join(\"\"))\n        return\n      }\n\n      if (evt.key === \"ArrowLeft\") {\n        evt.preventDefault()\n        focusCell(index - 1)\n        return\n      }\n\n      if (evt.key === \"ArrowRight\") {\n        evt.preventDefault()\n        focusCell(index + 1)\n      }\n    },\n    [commitValue, digits, disabled, focusCell],\n  )\n\n  const handleBlur = useCallback(() => {\n    requestAnimationFrame(() => {\n      const activeElement = document.activeElement\n      const isAnyCellFocused = inputRefs.current.some((input) => input === activeElement)\n      if (!isAnyCellFocused) {\n        setFocusedIndex(-1)\n      }\n    })\n  }, [])\n\n  return (\n    <div ref={rootRef} className={clsx(s.Root, className)}>\n      <div className={s.Cells}>\n        {Array.from({ length }, (_, index) => {\n          const isGroupGap = grouping ? shouldShowGap(index, grouping) : false\n\n          return (\n            <Fragment key={index}>\n              {isGroupGap && <div className={s.GroupGap} aria-hidden />}\n              <div\n                className={clsx(s.Cell, {\n                  [s.CellFocused]: focusedIndex === index,\n                  [s.CellFilled]: !!digits[index],\n                })}\n                data-invalid={invalid ? \"\" : undefined}\n                data-disabled={disabled ? \"\" : undefined}\n                onClick={() => handleCellClick(index)}\n              >\n                <input\n                  ref={(element) => {\n                    inputRefs.current[index] = element\n                  }}\n                  type=\"text\"\n                  inputMode=\"numeric\"\n                  pattern=\"[0-9]\"\n                  maxLength={1}\n                  value={digits[index]}\n                  disabled={disabled}\n                  className={s.CellInput}\n                  onChange={(evt) => handleChange(index, evt)}\n                  onKeyDown={(evt) => handleKeyDown(index, evt)}\n                  onFocus={() => setFocusedIndex(index)}\n                  onBlur={handleBlur}\n                  onPaste={(evt) => handlePaste(index, evt)}\n                  aria-label={`Digit ${index + 1}`}\n                  aria-invalid={invalid ? true : undefined}\n                  aria-describedby={errorMessage ? errorId : undefined}\n                  autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                />\n                {!digits[index] && focusedIndex !== index && <div className={s.DotPlaceholder} />}\n              </div>\n            </Fragment>\n          )\n        })}\n      </div>\n      {errorMessage && (\n        <FieldError id={errorId} className={s.ErrorMessage}>\n          {errorMessage}\n        </FieldError>\n      )}\n    </div>\n  )\n})\n\nOTPInput.displayName = \"OTPInput\"\n"]}

package/dist/es/components/OTPInput/OTPInput.module.css

@@ -0,0 +1,66 @@
+@layer components {.Root {
+  position: relative;
+  --field-error-padding-inline: 0;
+  --field-error-margin-top: 0.5rem;
+}.Cells {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}.GroupGap {
+  width: 8px;
+}.Cell {
+  position: relative;
+  width: 44px;
+  height: 52px;
+  border-radius: var(--floating-input-border-radius);
+  border: 1px solid var(--floating-input-border-color);
+  background-color: var(--floating-input-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: text;
+  transition: border-color var(--floating-input-transition-duration) ease-in-out;
+}.Cell:hover:not([data-disabled]) {
+  border-color: var(--floating-input-border-color-hover);
+}.CellFocused {
+  border-color: var(--floating-input-border-color-focus);
+}.Cell[data-invalid] {
+  border-color: var(--floating-input-border-color-invalid);
+}.Cell[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}.CellInput {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--color-text);
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  caret-color: var(--color-text);
+  border-radius: inherit;
+}.CellInput:disabled {
+  cursor: not-allowed;
+}.DotPlaceholder {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-text-tertiary);
+  opacity: 0.5;
+  pointer-events: none;
+}.CellFilled .DotPlaceholder {
+  display: none;
+}.ErrorMessage {
+  margin-top: var(--field-error-margin-top);
+}@media (prefers-reduced-motion: reduce) {
+  .Cell {
+    transition: none;
+  }
+}
+}

package/dist/es/components/OTPInput/index.js

@@ -0,0 +1,2 @@
+export { OTPInput } from "./OTPInput";
+//# sourceMappingURL=index.js.map

package/dist/es/components/OTPInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA","sourcesContent":["export { OTPInput, type OTPInputProps } from \"./OTPInput\"\n"]}

package/dist/types/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,13 @@
+export type OTPInputProps = {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    grouping?: number[];
+    invalid?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+};
+export declare const OTPInput: import("react").ForwardRefExoticComponent<OTPInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/OTPInput/index.d.ts

@@ -0,0 +1 @@
+export { OTPInput, type OTPInputProps } from "./OTPInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.41",
+  "version": "0.7.43",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",