@mdigital_ui/ui 0.3.9 → 0.4.0

package/dist/chunk-KJTMZJ7V.js

@@ -1,239 +0,0 @@
-import { cn } from './chunk-NGYLRX6F.js';
-import React from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function getValidationStatus(props) {
-  if (props.error) return "error";
-  if (props.warning) return "warning";
-  if (props.info) return "info";
-  if (props.success) return "success";
-  return "default";
-}
-function getValidationMessage(props) {
-  const status = getValidationStatus(props);
-  if (status === "error" && typeof props.error === "string") return props.error;
-  if (status === "warning" && typeof props.warning === "string")
-    return props.warning;
-  if (status === "info" && typeof props.info === "string") return props.info;
-  if (status === "success" && typeof props.success === "string")
-    return props.success;
-  return props.helperText;
-}
-var InputOTP = React.memo(
-  ({
-    length = 6,
-    size = "md",
-    value = "",
-    onChange,
-    onComplete,
-    error,
-    warning,
-    info,
-    success,
-    helperText,
-    disabled = false,
-    autoFocus = false,
-    type = "text",
-    pattern,
-    label,
-    messagePosition = "bottom",
-    className,
-    classNames,
-    ref
-  }) => {
-    const inputRefs = React.useRef([]);
-    const [otp, setOtp] = React.useState(
-      value.split("").slice(0, length)
-    );
-    React.useEffect(() => {
-      setOtp(value.split("").slice(0, length));
-    }, [value, length]);
-    React.useEffect(() => {
-      if (autoFocus && inputRefs.current[0]) {
-        inputRefs.current[0].focus();
-      }
-    }, [autoFocus]);
-    const handleChange = React.useCallback(
-      (index, newValue) => {
-        const char = newValue.slice(-1);
-        if (pattern && char && !new RegExp(pattern).test(char)) {
-          return;
-        }
-        const newOtp = [...otp];
-        newOtp[index] = char;
-        setOtp(newOtp);
-        const otpValue = newOtp.join("");
-        onChange?.(otpValue);
-        if (char && index < length - 1) {
-          inputRefs.current[index + 1]?.focus();
-        }
-        if (otpValue.length === length) {
-          onComplete?.(otpValue);
-        }
-      },
-      [otp, length, onChange, onComplete, pattern]
-    );
-    const handleKeyDown = React.useCallback(
-      (index, e) => {
-        if (e.key === "Backspace") {
-          if (!otp[index] && index > 0) {
-            inputRefs.current[index - 1]?.focus();
-          }
-        } else if (e.key === "ArrowLeft" && index > 0) {
-          inputRefs.current[index - 1]?.focus();
-        } else if (e.key === "ArrowRight" && index < length - 1) {
-          inputRefs.current[index + 1]?.focus();
-        }
-      },
-      [otp, length]
-    );
-    const handlePaste = React.useCallback(
-      (e) => {
-        e.preventDefault();
-        const pastedData = e.clipboardData.getData("text").slice(0, length);
-        if (pattern && !new RegExp(`^${pattern}*$`).test(pastedData)) {
-          return;
-        }
-        const newOtp = pastedData.split("").slice(0, length);
-        setOtp(newOtp);
-        const otpValue = newOtp.join("");
-        onChange?.(otpValue);
-        const focusIndex = Math.min(newOtp.length, length - 1);
-        inputRefs.current[focusIndex]?.focus();
-        if (otpValue.length === length) {
-          onComplete?.(otpValue);
-        }
-      },
-      [length, onChange, onComplete, pattern]
-    );
-    const status = getValidationStatus({
-      error,
-      warning,
-      info,
-      success});
-    const message = getValidationMessage({
-      error,
-      warning,
-      info,
-      success,
-      helperText
-    });
-    const sizeClasses = {
-      xs: "h-(--otp-size-xs) w-(--otp-size-xs) text-xs",
-      sm: "h-(--otp-size-sm) w-(--otp-size-sm) text-sm",
-      md: "h-(--otp-size-md) w-(--otp-size-md) text-base",
-      lg: "h-(--otp-size-lg) w-(--otp-size-lg) text-lg"
-    };
-    const statusBorderClasses = {
-      default: "border-border focus:border-primary",
-      error: "border-error focus:border-error",
-      warning: "border-warning focus:border-warning",
-      info: "border-info focus:border-info",
-      success: "border-success focus:border-success"
-    };
-    const statusTextClasses = {
-      default: "text-text-secondary",
-      error: "text-error",
-      warning: "text-warning",
-      info: "text-info",
-      success: "text-success"
-    };
-    const MessageComponent = message && /* @__PURE__ */ jsx(
-      "p",
-      {
-        "data-slot": "inputOTP_helper",
-        className: cn(
-          "inputOTP_helper",
-          "text-xs mt-1",
-          statusTextClasses[status],
-          classNames?.helper
-        ),
-        children: message
-      }
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-slot": "inputOTP_root",
-        className: cn("inputOTP_root", "w-full", classNames?.root, className),
-        children: [
-          label && messagePosition === "top" && /* @__PURE__ */ jsx(
-            "label",
-            {
-              "data-slot": "inputOTP_label",
-              className: cn(
-                "inputOTP_label",
-                "block text-sm font-medium text-text-primary mb-1.5",
-                classNames?.label
-              ),
-              children: label
-            }
-          ),
-          messagePosition === "top" && MessageComponent,
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-slot": "inputOTP_wrapper",
-              className: cn("inputOTP_wrapper", "flex gap-2", classNames?.wrapper),
-              children: Array.from({ length }).map((_, index) => {
-                const isActive = otp[index] !== void 0 && otp[index] !== "";
-                return /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: (el) => {
-                      inputRefs.current[index] = el;
-                    },
-                    type: "text",
-                    inputMode: type === "number" ? "numeric" : "text",
-                    maxLength: 1,
-                    value: otp[index] || "",
-                    onChange: (e) => handleChange(index, e.target.value),
-                    onKeyDown: (e) => handleKeyDown(index, e),
-                    onPaste: handlePaste,
-                    disabled,
-                    "data-slot": "inputOTP_slot",
-                    className: cn(
-                      "inputOTP_slot",
-                      "text-center font-semibold",
-                      "border rounded-md outline-none transition-colors",
-                      "disabled:opacity-50 disabled:cursor-not-allowed",
-                      "hover:border-primary/50",
-                      "focus-visible:ring-1 focus-visible:ring-primary/20",
-                      "text-text-primary",
-                      sizeClasses[size],
-                      statusBorderClasses[status],
-                      classNames?.slot,
-                      isActive && classNames?.slotActive
-                    ),
-                    "aria-label": `OTP digit ${index + 1}`
-                  },
-                  index
-                );
-              })
-            }
-          ),
-          label && messagePosition === "bottom" && /* @__PURE__ */ jsx(
-            "label",
-            {
-              "data-slot": "inputOTP_label",
-              className: cn(
-                "inputOTP_label",
-                "block text-sm font-medium text-text-primary mt-1.5",
-                classNames?.label
-              ),
-              children: label
-            }
-          ),
-          messagePosition === "bottom" && MessageComponent
-        ]
-      }
-    );
-  }
-);
-InputOTP.displayName = "InputOTP";
-var input_otp_default = InputOTP;
-
-export { input_otp_default };
-//# sourceMappingURL=chunk-KJTMZJ7V.js.map
-//# sourceMappingURL=chunk-KJTMZJ7V.js.map

package/dist/chunk-KJTMZJ7V.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/input-otp/index.tsx"],"names":[],"mappings":"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","file":"chunk-KJTMZJ7V.js","sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { InputOTPProps } from './types'\n\n/**\n * Determine the current validation status\n */\nfunction getValidationStatus(\n  props: InputOTPProps,\n): 'default' | 'error' | 'warning' | 'info' | 'success' {\n  if (props.error) return 'error'\n  if (props.warning) return 'warning'\n  if (props.info) return 'info'\n  if (props.success) return 'success'\n  return 'default'\n}\n\n/**\n * Get the validation message to display\n */\nfunction getValidationMessage(props: InputOTPProps): string | undefined {\n  const status = getValidationStatus(props)\n  if (status === 'error' && typeof props.error === 'string') return props.error\n  if (status === 'warning' && typeof props.warning === 'string')\n    return props.warning\n  if (status === 'info' && typeof props.info === 'string') return props.info\n  if (status === 'success' && typeof props.success === 'string')\n    return props.success\n  return props.helperText\n}\n\nconst InputOTP = React.memo<InputOTPProps>(\n  ({\n    length = 6,\n    size = 'md',\n    value = '',\n    onChange,\n    onComplete,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n    disabled = false,\n    autoFocus = false,\n    type = 'text',\n    pattern,\n    label,\n    messagePosition = 'bottom',\n    className,\n    classNames,\n    ref,\n  }) => {\n    const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])\n    const [otp, setOtp] = React.useState<string[]>(\n      value.split('').slice(0, length),\n    )\n\n    // Update OTP when controlled value changes\n    React.useEffect(() => {\n      setOtp(value.split('').slice(0, length))\n    }, [value, length])\n\n    // Auto-focus first input\n    React.useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus()\n      }\n    }, [autoFocus])\n\n    const handleChange = React.useCallback(\n      (index: number, newValue: string) => {\n        // Only allow single character or clear\n        const char = newValue.slice(-1)\n\n        // Validate pattern if provided\n        if (pattern && char && !new RegExp(pattern).test(char)) {\n          return\n        }\n\n        const newOtp = [...otp]\n        newOtp[index] = char\n        setOtp(newOtp)\n\n        const otpValue = newOtp.join('')\n        onChange?.(otpValue)\n\n        // Auto-focus next input\n        if (char && index < length - 1) {\n          inputRefs.current[index + 1]?.focus()\n        }\n\n        // Call onComplete when all fields filled\n        if (otpValue.length === length) {\n          onComplete?.(otpValue)\n        }\n      },\n      [otp, length, onChange, onComplete, pattern],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Backspace') {\n          if (!otp[index] && index > 0) {\n            // Move to previous input if current is empty\n            inputRefs.current[index - 1]?.focus()\n          }\n        } else if (e.key === 'ArrowLeft' && index > 0) {\n          inputRefs.current[index - 1]?.focus()\n        } else if (e.key === 'ArrowRight' && index < length - 1) {\n          inputRefs.current[index + 1]?.focus()\n        }\n      },\n      [otp, length],\n    )\n\n    const handlePaste = React.useCallback(\n      (e: React.ClipboardEvent) => {\n        e.preventDefault()\n        const pastedData = e.clipboardData.getData('text').slice(0, length)\n\n        // Validate pasted data against pattern if provided\n        if (pattern && !new RegExp(`^${pattern}*$`).test(pastedData)) {\n          return\n        }\n\n        const newOtp = pastedData.split('').slice(0, length)\n        setOtp(newOtp)\n\n        const otpValue = newOtp.join('')\n        onChange?.(otpValue)\n\n        // Focus last filled input or first empty\n        const focusIndex = Math.min(newOtp.length, length - 1)\n        inputRefs.current[focusIndex]?.focus()\n\n        // Call onComplete if all fields filled\n        if (otpValue.length === length) {\n          onComplete?.(otpValue)\n        }\n      },\n      [length, onChange, onComplete, pattern],\n    )\n\n    const status = getValidationStatus({\n      error,\n      warning,\n      info,\n      success,\n      helperText,\n    })\n    const message = getValidationMessage({\n      error,\n      warning,\n      info,\n      success,\n      helperText,\n    })\n\n    const sizeClasses = {\n      xs: 'h-(--otp-size-xs) w-(--otp-size-xs) text-xs',\n      sm: 'h-(--otp-size-sm) w-(--otp-size-sm) text-sm',\n      md: 'h-(--otp-size-md) w-(--otp-size-md) text-base',\n      lg: 'h-(--otp-size-lg) w-(--otp-size-lg) text-lg',\n    }\n\n    const statusBorderClasses = {\n      default: 'border-border focus:border-primary',\n      error: 'border-error focus:border-error',\n      warning: 'border-warning focus:border-warning',\n      info: 'border-info focus:border-info',\n      success: 'border-success focus:border-success',\n    }\n\n    const statusTextClasses = {\n      default: 'text-text-secondary',\n      error: 'text-error',\n      warning: 'text-warning',\n      info: 'text-info',\n      success: 'text-success',\n    }\n\n    const MessageComponent = message && (\n      <p\n        data-slot=\"inputOTP_helper\"\n        className={cn(\n          'inputOTP_helper',\n          'text-xs mt-1',\n          statusTextClasses[status],\n          classNames?.helper,\n        )}\n      >\n        {message}\n      </p>\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"inputOTP_root\"\n        className={cn('inputOTP_root', 'w-full', classNames?.root, className)}\n      >\n        {label && messagePosition === 'top' && (\n          <label\n            data-slot=\"inputOTP_label\"\n            className={cn(\n              'inputOTP_label',\n              'block text-sm font-medium text-text-primary mb-1.5',\n              classNames?.label,\n            )}\n          >\n            {label}\n          </label>\n        )}\n        {messagePosition === 'top' && MessageComponent}\n\n        <div\n          data-slot=\"inputOTP_wrapper\"\n          className={cn('inputOTP_wrapper', 'flex gap-2', classNames?.wrapper)}\n        >\n          {Array.from({ length }).map((_, index) => {\n            const isActive = otp[index] !== undefined && otp[index] !== ''\n            return (\n              <input\n                key={index}\n                ref={(el) => {\n                  inputRefs.current[index] = el\n                }}\n                type=\"text\"\n                inputMode={type === 'number' ? 'numeric' : 'text'}\n                maxLength={1}\n                value={otp[index] || ''}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={handlePaste}\n                disabled={disabled}\n                data-slot=\"inputOTP_slot\"\n                className={cn(\n                  'inputOTP_slot',\n                  'text-center font-semibold',\n                  'border rounded-md outline-none transition-colors',\n                  'disabled:opacity-50 disabled:cursor-not-allowed',\n                  'hover:border-primary/50',\n                  'focus-visible:ring-1 focus-visible:ring-primary/20',\n                  'text-text-primary',\n                  sizeClasses[size],\n                  statusBorderClasses[status],\n                  classNames?.slot,\n                  isActive && classNames?.slotActive,\n                )}\n                aria-label={`OTP digit ${index + 1}`}\n              />\n            )\n          })}\n        </div>\n\n        {label && messagePosition === 'bottom' && (\n          <label\n            data-slot=\"inputOTP_label\"\n            className={cn(\n              'inputOTP_label',\n              'block text-sm font-medium text-text-primary mt-1.5',\n              classNames?.label,\n            )}\n          >\n            {label}\n          </label>\n        )}\n        {messagePosition === 'bottom' && MessageComponent}\n      </div>\n    )\n  },\n)\n\nInputOTP.displayName = 'InputOTP'\n\nexport type { InputOTPClassNames } from './types'\nexport type * from './types'\nexport default InputOTP\n"]}