@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/{chunk-6JGNJI5T.js → chunk-7RT65ZGV.js}

@@ -1,6 +1,6 @@
-import { getValidationStatus, cn, statusMessageVariants } from './chunk-NGYLRX6F.js';
+import { getValidationStatus, cn, statusMessageVariants } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import React, { useId } from 'react';
+import React, { useId, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var textareaVariants = cva(
@@ -13,10 +13,10 @@ var textareaVariants = cva(
       },
       status: {
         default: "",
-        error: "!border-error focus:!border-error",
-        warning: "!border-warning focus:!border-warning",
-        info: "!border-info focus:!border-info",
-        success: "!border-success focus:!border-success"
+        error: "border-error focus:border-error",
+        warning: "border-warning focus:border-warning",
+        info: "border-info focus:border-info",
+        success: "border-success focus:border-success"
       },
       size: {
         xs: "min-h-(--textarea-min-height-xs) p-(--textarea-padding-xs) text-xs",
@@ -67,40 +67,51 @@ var Textarea = React.memo(
     ref,
     ...props
   }) => {
-    const internalRef = React.useRef(null);
-    const textareaRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React.useState(value || "");
+    const [internalValue, setInternalValue] = React.useState(props.defaultValue ?? "");
     const currentValue = value !== void 0 ? value : internalValue;
+    const internalRef = React.useRef(null);
     const currentLength = String(currentValue).length;
+    const mergedRef = React.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
     const uniqueId = useId();
     const textareaId = props.id || `textarea-${uniqueId}`;
     const helperId = `textarea-helper-${uniqueId}`;
-    const { status, message: helperMessage } = getValidationStatus({
-      error,
-      warning,
-      info,
-      success,
-      helperText
-    });
+    const { status, message: helperMessage } = useMemo(
+      () => getValidationStatus({
+        error,
+        warning,
+        info,
+        success,
+        helperText
+      }),
+      [error, warning, info, success, helperText]
+    );
     const handleChange = React.useCallback(
       (e) => {
-        if (value === void 0) {
-          setInternalValue(e.target.value);
-        }
+        if (value === void 0) setInternalValue(e.target.value);
         onChange?.(e);
       },
       [value, onChange]
     );
     React.useEffect(() => {
-      if (autoResize && textareaRef.current) {
-        textareaRef.current.style.height = "auto";
-        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      if (autoResize && internalRef.current) {
+        internalRef.current.style.height = "auto";
+        internalRef.current.style.height = `${internalRef.current.scrollHeight}px`;
       }
-    }, [currentValue, autoResize, textareaRef]);
+    }, [currentValue, autoResize]);
     const textareaElement = /* @__PURE__ */ jsx(
       "textarea",
       {
-        ref: textareaRef,
+        ref: mergedRef,
         id: textareaId,
         className: cn(
           "textarea_textarea",
@@ -126,6 +137,7 @@ var Textarea = React.memo(
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-slot": "root",
         className: cn(
           "textarea_root",
           "w-full flex flex-col relative",
@@ -170,5 +182,5 @@ Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
 
 export { textarea_default };
-//# sourceMappingURL=chunk-6JGNJI5T.js.map
-//# sourceMappingURL=chunk-6JGNJI5T.js.map
+//# sourceMappingURL=chunk-7RT65ZGV.js.map
+//# sourceMappingURL=chunk-7RT65ZGV.js.map

package/dist/chunk-7RT65ZGV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/textarea/index.tsx"],"names":[],"mappings":"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","file":"chunk-7RT65ZGV.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React, { useId, useMemo } from 'react'\n\nimport { cn, getValidationStatus, statusMessageVariants } from '../utils'\nimport type { TextareaProps } from './types'\n\nconst textareaVariants = cva(\n  'w-full rounded-md focus:border-primary transition-colors text-text-primary placeholder:text-text-secondary/50 disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none',\n  {\n    variants: {\n      variant: {\n        outline: 'bg-background border border-border',\n        filled: 'bg-surface border border-transparent',\n      },\n      status: {\n        default: '',\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      size: {\n        xs: 'min-h-(--textarea-min-height-xs) p-(--textarea-padding-xs) text-xs',\n        sm: 'min-h-(--textarea-min-height-sm) p-(--textarea-padding-sm) text-sm',\n        md: 'min-h-(--textarea-min-height-md) p-(--textarea-padding-md) text-base',\n        lg: 'min-h-(--textarea-min-height-lg) p-(--textarea-padding-lg) text-lg',\n      },\n      resize: {\n        none: 'resize-none',\n        vertical: 'resize-y',\n        horizontal: 'resize-x',\n        both: 'resize',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'max-w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n      status: 'default',\n      size: 'md',\n      resize: 'vertical',\n      fullWidth: true,\n    },\n  },\n)\n\nconst Textarea = React.memo<TextareaProps>(\n  ({\n    variant = 'outline',\n    size = 'md',\n    label,\n    helperText,\n    messagePosition = 'bottom',\n    error,\n    warning,\n    info,\n    success,\n    resize = 'vertical',\n    showCount = false,\n    maxLength,\n    autoResize = false,\n    fullWidth = true,\n    className,\n    classNames,\n    value,\n    onChange,\n    ref,\n    ...props\n  }) => {\n    const [internalValue, setInternalValue] = React.useState(props.defaultValue ?? '')\n    const currentValue = value !== undefined ? value : internalValue\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n\n    const currentLength = String(currentValue).length\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        internalRef.current = node\n        if (typeof ref === 'function') {\n          ref(node)\n        } else if (ref) {\n          ;(ref as React.MutableRefObject<HTMLTextAreaElement | null>).current =\n            node\n        }\n      },\n      [ref],\n    )\n\n    // Generate unique IDs for accessibility\n    const uniqueId = useId()\n    const textareaId = props.id || `textarea-${uniqueId}`\n    const helperId = `textarea-helper-${uniqueId}`\n\n    const { status, message: helperMessage } = useMemo(\n      () =>\n        getValidationStatus({\n          error,\n          warning,\n          info,\n          success,\n          helperText,\n        }),\n      [error, warning, info, success, helperText],\n    )\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        if (value === undefined) setInternalValue(e.target.value)\n        onChange?.(e)\n      },\n      [value, onChange],\n    )\n\n    React.useEffect(() => {\n      if (autoResize && internalRef.current) {\n        internalRef.current.style.height = 'auto'\n        internalRef.current.style.height = `${internalRef.current.scrollHeight}px`\n      }\n    }, [currentValue, autoResize])\n\n    const textareaElement = (\n      <textarea\n        ref={mergedRef}\n        id={textareaId}\n        className={cn(\n          'textarea_textarea',\n          textareaVariants({\n            variant,\n            status,\n            size,\n            resize: autoResize ? 'none' : resize,\n            fullWidth,\n          }),\n          autoResize && 'overflow-hidden',\n          className,\n          classNames?.textarea,\n        )}\n        maxLength={maxLength}\n        value={currentValue}\n        onChange={handleChange}\n        aria-invalid={status === 'error'}\n        aria-describedby={helperMessage ? helperId : undefined}\n        {...props}\n      />\n    )\n\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'textarea_root',\n          'w-full flex flex-col relative',\n          !fullWidth && 'inline-block',\n          classNames?.root,\n        )}\n      >\n        <div className={cn('textarea_wrapper', 'flex gap-2 items-center relative mb-0.5', classNames?.wrapper)}>\n          {label && (\n            <label htmlFor={textareaId} className={cn('textarea_label', 'text-sm font-medium text-text-secondary', classNames?.label)}>\n              {label}\n              {props.required && <span className={cn('textarea_error', 'text-error ml-1', classNames?.error)}>*</span>}\n            </label>\n          )}\n          {helperMessage && messagePosition === 'top' && (\n            <p\n              id={helperId}\n              className={cn('textarea_helper', statusMessageVariants({ status }), classNames?.helper)}\n            >\n              {helperMessage}\n            </p>\n          )}\n          {showCount && maxLength && (\n            <span className={cn('textarea_counter', 'text-xs text-text-secondary absolute right-0', classNames?.counter)}>\n              {currentLength}/{maxLength}\n            </span>\n          )}\n        </div>\n        {textareaElement}\n        {helperMessage && messagePosition === 'bottom' && (\n          <p\n            id={helperId}\n            className={cn('textarea_helper', statusMessageVariants({ status }), 'mt-0.5', classNames?.helper)}\n          >\n            {helperMessage}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\n\nTextarea.displayName = 'Textarea'\n\nexport type * from './types'\nexport default Textarea\n"]}

package/dist/{chunk-I32ZQUYY.js → chunk-A4MYCEGM.js}

@@ -1,5 +1,5 @@
-import { checkboxBorderColorClasses, focusRingColorClasses, textColorClasses } from './chunk-POXI7JJ4.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import { Minus, Check } from 'lucide-react';
 import React, { useState, useId, useCallback, useEffect } from 'react';
@@ -22,7 +22,7 @@ var checkboxVariants = cva(
   "appearance-none rounded border bg-background cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   {
     variants: {
-      color: checkboxBorderColorClasses,
+      color: colorVars,
       size: {
         xs: "w-(--checkbox-size-xs) h-(--checkbox-size-xs)",
         sm: "w-(--checkbox-size-sm) h-(--checkbox-size-sm)",
@@ -55,17 +55,15 @@ var Checkbox = React.memo(
     classNames,
     ...props
   }) => {
-    const [internalChecked, setInternalChecked] = useState(
-      defaultChecked ?? false
-    );
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? checked : internalChecked;
     const internalRef = React.useRef(null);
     const uniqueId = useId();
     const checkboxId = props.id || `checkbox-${uniqueId}`;
     const helperId = `checkbox-helper-${uniqueId}`;
     const hasHelperText = !!(helperText || error);
     const mergedRef = useMergeRefs(ref, internalRef);
-    const isControlled = checked !== void 0;
-    const currentChecked = isControlled ? checked : internalChecked;
     const onChangeRef = React.useRef(props.onChange);
     onChangeRef.current = props.onChange;
     const onChange = useCallback(
@@ -91,21 +89,22 @@ var Checkbox = React.memo(
           className: cn(
             "checkbox_checkbox",
             checkboxVariants({ color, size, error: !!error }),
-            focusRingColorClasses[color],
+            "border-border checked:border-slot indeterminate:border-slot",
+            "focus-visible:ring-slot",
             className,
             classNames?.checkbox
           ),
-          "aria-checked": indeterminate ? "mixed" : currentChecked,
+          "aria-checked": indeterminate ? "mixed" : isChecked,
           "aria-invalid": !!error || void 0,
           "aria-describedby": hasHelperText ? helperId : void 0,
           ...props,
           id: checkboxId,
           onChange,
-          checked: currentChecked,
+          checked: isChecked,
           "data-slot": "checkbox"
         }
       ),
-      (currentChecked || indeterminate) && /* @__PURE__ */ jsx(
+      (isChecked || indeterminate) && /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
@@ -117,10 +116,10 @@ var Checkbox = React.memo(
           children: indeterminate ? /* @__PURE__ */ jsx(
             Minus,
             {
-              className: cn(iconSizes[size], textColorClasses[color]),
+              className: cn(iconSizes[size], "text-slot"),
               strokeWidth: 3
             }
-          ) : /* @__PURE__ */ jsx(Check, { className: cn(iconSizes[size], textColorClasses[color]) })
+          ) : /* @__PURE__ */ jsx(Check, { className: cn(iconSizes[size], "text-slot") })
         }
       )
     ] });
@@ -180,5 +179,5 @@ Checkbox.displayName = "Checkbox";
 var checkbox_default = Checkbox;
 
 export { checkbox_default };
-//# sourceMappingURL=chunk-I32ZQUYY.js.map
-//# sourceMappingURL=chunk-I32ZQUYY.js.map
+//# sourceMappingURL=chunk-A4MYCEGM.js.map
+//# sourceMappingURL=chunk-A4MYCEGM.js.map

package/dist/chunk-A4MYCEGM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox/index.tsx"],"names":[],"mappings":"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","file":"chunk-A4MYCEGM.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Check, Minus } from \"lucide-react\";\nimport React, { useState, useCallback, useEffect, useId } from \"react\";\n\nimport { cn, iconSizes } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type { CheckboxProps } from \"./types\";\n\nfunction useMergeRefs<T>(\n  ...refs: (React.Ref<T> | undefined)[]\n): React.RefCallback<T> {\n  const refsRef = React.useRef(refs);\n  refsRef.current = refs;\n\n  return useCallback((instance: T | null) => {\n    refsRef.current.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(instance);\n      } else if (ref && typeof ref === \"object\") {\n        (ref as React.MutableRefObject<T | null>).current = instance;\n      }\n    });\n  }, []);\n}\n\nconst checkboxVariants = cva(\n  \"appearance-none rounded border bg-background cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n  {\n    variants: {\n      color: colorVars,\n      size: {\n        xs: \"w-(--checkbox-size-xs) h-(--checkbox-size-xs)\",\n        sm: \"w-(--checkbox-size-sm) h-(--checkbox-size-sm)\",\n        md: \"w-(--checkbox-size-md) h-(--checkbox-size-md)\",\n        lg: \"w-(--checkbox-size-lg) h-(--checkbox-size-lg)\",\n      },\n      error: {\n        true: \"border-error checked:border-error\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      color: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nconst Checkbox = React.memo<CheckboxProps>(\n  ({\n    color = \"primary\",\n    size = \"md\",\n    label,\n    helperText,\n    error,\n    indeterminate = false,\n    className,\n    checked,\n    defaultChecked,\n    ref,\n    classNames,\n    ...props\n  }) => {\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checked !== undefined;\n    const isChecked = isControlled ? checked : internalChecked;\n    const internalRef = React.useRef<HTMLInputElement>(null);\n\n    const uniqueId = useId();\n    const checkboxId = props.id || `checkbox-${uniqueId}`;\n    const helperId = `checkbox-helper-${uniqueId}`;\n    const hasHelperText = !!(helperText || error);\n\n    const mergedRef = useMergeRefs(ref, internalRef);\n\n    const onChangeRef = React.useRef(props.onChange);\n    onChangeRef.current = props.onChange;\n\n    const onChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) {\n          setInternalChecked(event.target.checked);\n        }\n        onChangeRef.current?.(event);\n      },\n      [isControlled],\n    );\n\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const checkboxElement = (\n      <span className=\"relative inline-flex\" data-slot=\"wrapper\">\n        <input\n          ref={mergedRef}\n          type=\"checkbox\"\n          className={cn(\n            \"checkbox_checkbox\",\n            checkboxVariants({ color, size, error: !!error }),\n            \"border-border checked:border-slot indeterminate:border-slot\",\n            \"focus-visible:ring-slot\",\n            className,\n            classNames?.checkbox,\n          )}\n          aria-checked={indeterminate ? \"mixed\" : isChecked}\n          aria-invalid={!!error || undefined}\n          aria-describedby={hasHelperText ? helperId : undefined}\n          {...props}\n          id={checkboxId}\n          onChange={onChange}\n          checked={isChecked}\n          data-slot=\"checkbox\"\n        />\n        {(isChecked || indeterminate) && (\n          <span\n            className={cn(\n              \"checkbox_indicator\",\n              \"absolute inset-0 flex items-center justify-center pointer-events-none\",\n              classNames?.indicator,\n            )}\n            data-slot=\"indicator\"\n          >\n            {indeterminate ? (\n              <Minus\n                className={cn(iconSizes[size], \"text-slot\")}\n                strokeWidth={3}\n              />\n            ) : (\n              <Check className={cn(iconSizes[size], \"text-slot\")} />\n            )}\n          </span>\n        )}\n      </span>\n    );\n\n    return (\n      <div\n        className={cn(\"checkbox_root\", label && \"w-full\", classNames?.root)}\n        data-slot=\"root\"\n      >\n        <label\n          htmlFor={checkboxId}\n          className={cn(\n            \"flex items-center gap-2\",\n            !props.disabled && \"cursor-pointer\",\n          )}\n        >\n          {checkboxElement}\n          {label && (\n            <span\n              className={cn(\n                \"checkbox_label\",\n                \"text-sm text-text-primary select-none\",\n                error && \"text-error\",\n                props.disabled && \"opacity-50\",\n                classNames?.label,\n              )}\n              data-slot=\"label\"\n            >\n              {label}\n            </span>\n          )}\n        </label>\n        {(helperText || error) && (\n          <p\n            id={helperId}\n            className={cn(\n              \"checkbox_description\",\n              \"mt-1 ml-0 text-xs\",\n              error ? \"text-error\" : \"text-text-secondary\",\n              classNames?.description,\n            )}\n            data-slot=\"description\"\n          >\n            {typeof error === \"string\" ? error : helperText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport type * from \"./types\";\nexport default Checkbox;\n"]}

package/dist/{chunk-KJTMZJ7V.js → chunk-ADZWWBAX.js}

@@ -1,29 +1,25 @@
-import { cn } from './chunk-NGYLRX6F.js';
+import { getValidationStatus, cn, statusMessageVariants } from './chunk-RAS6HUEI.js';
 import React from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } 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 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"
+};
+var 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"
+};
 var InputOTP = React.memo(
   ({
     length = 6,
     size = "md",
-    value = "",
+    value,
     onChange,
     onComplete,
     error,
@@ -42,41 +38,51 @@ var InputOTP = React.memo(
     ref
   }) => {
     const inputRefs = React.useRef([]);
+    const otpRef = React.useRef([]);
     const [otp, setOtp] = React.useState(
-      value.split("").slice(0, length)
+      value !== void 0 ? value.split("").slice(0, length) : []
     );
+    otpRef.current = otp;
     React.useEffect(() => {
-      setOtp(value.split("").slice(0, length));
+      if (value !== void 0) {
+        setOtp(value.split("").slice(0, length));
+      }
     }, [value, length]);
     React.useEffect(() => {
       if (autoFocus && inputRefs.current[0]) {
         inputRefs.current[0].focus();
       }
     }, [autoFocus]);
+    const compiledPattern = React.useMemo(() => {
+      if (!pattern) return null;
+      try {
+        return new RegExp(pattern);
+      } catch {
+        return null;
+      }
+    }, [pattern]);
     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 (compiledPattern && char && !compiledPattern.test(char)) return;
+        setOtp((prev) => {
+          const newOtp = [...prev];
+          newOtp[index] = char;
+          const otpValue = newOtp.join("");
+          onChange?.(otpValue);
+          if (otpValue.length === length) onComplete?.(otpValue);
+          return newOtp;
+        });
         if (char && index < length - 1) {
           inputRefs.current[index + 1]?.focus();
         }
-        if (otpValue.length === length) {
-          onComplete?.(otpValue);
-        }
       },
-      [otp, length, onChange, onComplete, pattern]
+      [length, onChange, onComplete, compiledPattern]
     );
     const handleKeyDown = React.useCallback(
       (index, e) => {
         if (e.key === "Backspace") {
-          if (!otp[index] && index > 0) {
+          if (!otpRef.current[index] && index > 0) {
             inputRefs.current[index - 1]?.focus();
           }
         } else if (e.key === "ArrowLeft" && index > 0) {
@@ -85,72 +91,28 @@ var InputOTP = React.memo(
           inputRefs.current[index + 1]?.focus();
         }
       },
-      [otp, length]
+      [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);
-        }
+        if (compiledPattern && pattern && !new RegExp(`^${pattern}*$`).test(pastedData)) return;
+        setOtp((prevOtp) => {
+          const newOtp = pastedData.split("").slice(0, length);
+          const otpValue = newOtp.join("");
+          onChange?.(otpValue);
+          const focusIndex = Math.min(newOtp.length, length - 1);
+          inputRefs.current[focusIndex]?.focus();
+          if (prevOtp.length < length && otpValue.length === length) {
+            onComplete?.(otpValue);
+          }
+          return newOtp;
+        });
       },
-      [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
-      }
+      [length, onChange, onComplete, compiledPattern, pattern]
     );
+    const { status, message } = getValidationStatus({ error, warning, info, success, helperText });
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -158,7 +120,7 @@ var InputOTP = React.memo(
         "data-slot": "inputOTP_root",
         className: cn("inputOTP_root", "w-full", classNames?.root, className),
         children: [
-          label && messagePosition === "top" && /* @__PURE__ */ jsx(
+          label && /* @__PURE__ */ jsx(
             "label",
             {
               "data-slot": "inputOTP_label",
@@ -170,12 +132,21 @@ var InputOTP = React.memo(
               children: label
             }
           ),
-          messagePosition === "top" && MessageComponent,
+          messagePosition === "top" && message && /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "inputOTP_helper",
+              className: cn("inputOTP_helper", statusMessageVariants({ status }), "mb-1.5", classNames?.helper),
+              children: message
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
               "data-slot": "inputOTP_wrapper",
               className: cn("inputOTP_wrapper", "flex gap-2", classNames?.wrapper),
+              role: "group",
+              "aria-label": "One-time password",
               children: Array.from({ length }).map((_, index) => {
                 const isActive = otp[index] !== void 0 && otp[index] !== "";
                 return /* @__PURE__ */ jsx(
@@ -199,7 +170,7 @@ var InputOTP = React.memo(
                       "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",
+                      "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary",
                       "text-text-primary",
                       sizeClasses[size],
                       statusBorderClasses[status],
@@ -213,19 +184,14 @@ var InputOTP = React.memo(
               })
             }
           ),
-          label && messagePosition === "bottom" && /* @__PURE__ */ jsx(
-            "label",
+          messagePosition === "bottom" && message && /* @__PURE__ */ jsx(
+            "p",
             {
-              "data-slot": "inputOTP_label",
-              className: cn(
-                "inputOTP_label",
-                "block text-sm font-medium text-text-primary mt-1.5",
-                classNames?.label
-              ),
-              children: label
+              "data-slot": "inputOTP_helper",
+              className: cn("inputOTP_helper", statusMessageVariants({ status }), "mt-1.5", classNames?.helper),
+              children: message
             }
-          ),
-          messagePosition === "bottom" && MessageComponent
+          )
         ]
       }
     );
@@ -235,5 +201,5 @@ InputOTP.displayName = "InputOTP";
 var input_otp_default = InputOTP;
 
 export { input_otp_default };
-//# sourceMappingURL=chunk-KJTMZJ7V.js.map
-//# sourceMappingURL=chunk-KJTMZJ7V.js.map
+//# sourceMappingURL=chunk-ADZWWBAX.js.map
+//# sourceMappingURL=chunk-ADZWWBAX.js.map

package/dist/chunk-ADZWWBAX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input-otp/index.tsx"],"names":[],"mappings":"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","file":"chunk-ADZWWBAX.js","sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { cn, getValidationStatus as getStatus, statusMessageVariants } from '../utils'\nimport type { InputOTPProps } from './types'\n\nconst 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\nconst 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\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 otpRef = React.useRef<string[]>([])\n    const [otp, setOtp] = React.useState<string[]>(\n      value !== undefined ? value.split('').slice(0, length) : [],\n    )\n    otpRef.current = otp\n\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setOtp(value.split('').slice(0, length))\n      }\n    }, [value, length])\n\n    React.useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus()\n      }\n    }, [autoFocus])\n\n    const compiledPattern = React.useMemo(() => {\n      if (!pattern) return null\n      try { return new RegExp(pattern) } catch { return null }\n    }, [pattern])\n\n    const handleChange = React.useCallback(\n      (index: number, newValue: string) => {\n        const char = newValue.slice(-1)\n        if (compiledPattern && char && !compiledPattern.test(char)) return\n\n        setOtp((prev) => {\n          const newOtp = [...prev]\n          newOtp[index] = char\n          const otpValue = newOtp.join('')\n          onChange?.(otpValue)\n          if (otpValue.length === length) onComplete?.(otpValue)\n          return newOtp\n        })\n\n        if (char && index < length - 1) {\n          inputRefs.current[index + 1]?.focus()\n        }\n      },\n      [length, onChange, onComplete, compiledPattern],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Backspace') {\n          if (!otpRef.current[index] && index > 0) {\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      [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        if (compiledPattern && pattern && !new RegExp(`^${pattern}*$`).test(pastedData)) return\n\n        setOtp((prevOtp) => {\n          const newOtp = pastedData.split('').slice(0, length)\n          const otpValue = newOtp.join('')\n          onChange?.(otpValue)\n          const focusIndex = Math.min(newOtp.length, length - 1)\n          inputRefs.current[focusIndex]?.focus()\n          if (prevOtp.length < length && otpValue.length === length) {\n            onComplete?.(otpValue)\n          }\n          return newOtp\n        })\n      },\n      [length, onChange, onComplete, compiledPattern, pattern],\n    )\n\n    const { status, message } = getStatus({ error, warning, info, success, helperText })\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 && (\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\n        {messagePosition === 'top' && message && (\n          <p\n            data-slot=\"inputOTP_helper\"\n            className={cn('inputOTP_helper', statusMessageVariants({ status }), 'mb-1.5', classNames?.helper)}\n          >\n            {message}\n          </p>\n        )}\n\n        <div\n          data-slot=\"inputOTP_wrapper\"\n          className={cn('inputOTP_wrapper', 'flex gap-2', classNames?.wrapper)}\n          role=\"group\"\n          aria-label=\"One-time password\"\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) => { inputRefs.current[index] = el }}\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-2 focus-visible:ring-offset-2 focus-visible:ring-primary',\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        {messagePosition === 'bottom' && message && (\n          <p\n            data-slot=\"inputOTP_helper\"\n            className={cn('inputOTP_helper', statusMessageVariants({ status }), 'mt-1.5', classNames?.helper)}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\n\nInputOTP.displayName = 'InputOTP'\n\nexport type { InputOTPClassNames } from './types'\nexport type * from './types'\nexport default InputOTP\n"]}

package/dist/{chunk-YXLIGJTN.js → chunk-AFW2ORFT.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-NGYLRX6F.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
@@ -42,13 +42,13 @@ function ModalClose({
   );
 }
 var modalOverlayVariants = cva(
-  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[var(--z-modal)] backdrop-blur-sm",
   {
     variants: {
       opacity: {
-        light: "bg-black/10",
-        medium: "bg-black/20",
-        heavy: "bg-black/40"
+        light: "bg-overlay/20",
+        medium: "bg-overlay/40",
+        heavy: "bg-overlay/80"
       }
     },
     defaultVariants: {
@@ -77,7 +77,7 @@ function ModalOverlay({
   );
 }
 var modalContentVariants = cva(
-  "bg-background will-change-[transform,_opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-md border duration-200",
+  "bg-background will-change-[transform,_opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[var(--z-modal)] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-md border duration-200",
   {
     variants: {
       size: {
@@ -197,6 +197,7 @@ var ModalHeader = React.memo(function ModalHeader2({ className, size = "md", cla
     }
   );
 });
+ModalHeader.displayName = "ModalHeader";
 var modalFooterVariants = cva(
   "flex flex-col-reverse sm:flex-row sm:justify-end",
   {
@@ -228,6 +229,7 @@ var ModalFooter = React.memo(function ModalFooter2({ className, size = "md", cla
     }
   );
 });
+ModalFooter.displayName = "ModalFooter";
 var modalTitleVariants = cva("leading-none font-semibold text-text-primary", {
   variants: {
     size: {
@@ -256,6 +258,7 @@ var ModalTitle = React.memo(function ModalTitle2({ className, size = "md", class
     }
   );
 });
+ModalTitle.displayName = "ModalTitle";
 var modalDescriptionVariants = cva("text-text-secondary", {
   variants: {
     size: {
@@ -284,6 +287,7 @@ var ModalDescription = React.memo(function ModalDescription2({ className, size =
     }
   );
 });
+ModalDescription.displayName = "ModalDescription";
 function ComposedModal({
   open,
   onOpenChange,
@@ -297,6 +301,8 @@ function ComposedModal({
   showCloseButton = true,
   hideHeader = false,
   hideFooter = false,
+  onInteractOutside,
+  onEscapeKeyDown,
   className,
   contentClassName,
   classNames
@@ -308,6 +314,8 @@ function ComposedModal({
       color,
       centered,
       showCloseButton,
+      onInteractOutside,
+      onEscapeKeyDown,
       className: contentClassName,
       classNames,
       children: [
@@ -332,5 +340,5 @@ function ComposedModal({
 var modal_default = ComposedModal;
 
 export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modal_default };
-//# sourceMappingURL=chunk-YXLIGJTN.js.map
-//# sourceMappingURL=chunk-YXLIGJTN.js.map
+//# sourceMappingURL=chunk-AFW2ORFT.js.map
+//# sourceMappingURL=chunk-AFW2ORFT.js.map