forma-ui 0.0.21 → 0.0.23

package/dist/components/ui/Input.js

@@ -13,8 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { CloseSquareIcon, EmailIcon, MobielIcon, SunIcon, HideIcon, LockIcon, SearchIcon, ShowIcon, MoonIcon, } from "../icon/icon";
 import { cn } from "../../libs/cn";
-// Simple translation function replacement (no external library)
-import { inputTranslate } from "../../utils/translate";
 // InputText Component
 export function InputText(_a) {
     var { label, className, id, disabled, value, onChange, onClear } = _a, props = __rest(_a, ["label", "className", "id", "disabled", "value", "onChange", "onClear"]);
@@ -42,7 +40,7 @@ export const InputEmail = forwardRef((_a, ref) => {
         onClear === null || onClear === void 0 ? void 0 : onClear();
     };
     const emailPattern = "[\\-a-zA-Z0-9~!$%^&*_=+\\}\\{'?]+(\\.[-a-zA-Z0-9~!$%^&*_=+\\}\\{'?]+)*@[a-zA-Z0-9_][-a-zA-Z0-9_]*(\\.[-a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,}(:[0-9]{1,5})?";
-    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-Neutral-300 text-[10px] font-medium px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: "email", pattern: variant === "auth" ? emailPattern : undefined, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, {}) })), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(EmailIcon, {}) }), error && !showError && (_jsx("div", { className: "peer-focus:hidden absolute inset-x-0 mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: inputTranslate(error) }) }))] })] }));
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-Neutral-300 text-[10px] font-medium px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: "email", pattern: variant === "auth" ? emailPattern : undefined, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, {}) })), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(EmailIcon, {}) }), error && !showError && (_jsx("div", { className: "peer-focus:hidden absolute inset-x-0 mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: error }) }))] })] }));
 });
 InputEmail.displayName = "InputEmail";
 // InputMobile Component
@@ -57,7 +55,7 @@ export const InputMobile = forwardRef((_a, ref) => {
         }
         onClear === null || onClear === void 0 ? void 0 : onClear();
     };
-    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: "tel", inputMode: "numeric", pattern: "^09[0-9]{9}$", maxLength: 11, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, {}) })), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(MobielIcon, {}) }), error && !showError && (_jsx("div", { className: "peer-focus:hidden absolute inset-x-0 mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: inputTranslate(error) }) })), _jsx("div", { className: "hidden peer-invalid:flex absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: inputTranslate("error_invalid_mobile") }) })] })] }));
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3 mb-1", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: "tel", inputMode: "numeric", pattern: "^09[0-9]{9}$", maxLength: 11, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, onBlur: () => setShowError(false), onFocus: () => setShowError(false), className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", className) }, props)), !disabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center p-2", children: _jsx(CloseSquareIcon, {}) })), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(MobielIcon, {}) }), error && !showError && (_jsx("div", { className: "peer-focus:hidden absolute inset-x-0 mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: error }) })), _jsx("div", { className: "hidden peer-invalid:flex absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: error }) })] })] }));
 });
 InputMobile.displayName = "InputMobile";
 // InputTextArea Component
@@ -86,7 +84,7 @@ export const InputPassword = forwardRef((_a, ref) => {
         onClear === null || onClear === void 0 ? void 0 : onClear();
     };
     return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3", children: label })), _jsxs("div", { className: "w-full relative mt-1", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: showPassword ? "text" : "password", minLength: 5, placeholder: "xxxx xxxx xxxx xxxx", value: value, onChange: onChange, className: cn("autofill-input peer placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", variant === "change_password" &&
-                            "invalid:focus:border-Error-400 invalid:border-Error-400", className) }, props)), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(LockIcon, {}) }), _jsx("div", { className: "absolute inset-y-0 rtl:left-0 ltr:right-0 px-3 flex items-center", children: variant === "password" ? (_jsx("button", { type: "button", onClick: handleClear, children: _jsx(CloseSquareIcon, {}) })) : (_jsx("button", { type: "button", onClick: handleTogglePassword, children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) })) }), error && (_jsx("div", { className: "peer-focus:hidden absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: inputTranslate(error) }) }))] })] }));
+                            "invalid:focus:border-Error-400 invalid:border-Error-400", className) }, props)), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(LockIcon, {}) }), _jsx("div", { className: "absolute inset-y-0 rtl:left-0 ltr:right-0 px-3 flex items-center", children: variant === "password" ? (_jsx("button", { type: "button", onClick: handleClear, children: _jsx(CloseSquareIcon, {}) })) : (_jsx("button", { type: "button", onClick: handleTogglePassword, children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) })) }), error && (_jsx("div", { className: "peer-focus:hidden absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: error }) }))] })] }));
 });
 InputPassword.displayName = "InputPassword";
 // InputRePassword Component
@@ -107,7 +105,7 @@ export const InputRePassword = forwardRef((_a, ref) => {
             setError("");
         }
     };
-    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3", children: label })), _jsxs("div", { className: "w-full relative mt-1", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: showPassword ? "text" : "password", placeholder: "xxxx xxxx xxxx xxxx", value: value, onChange: handleChange, className: cn("autofill-input placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", error && "!border-Error-400 !focus:border-Error-400") }, props)), _jsx("button", { type: "button", onClick: handleTogglePassword, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 px-3 flex items-center cursor-pointer", children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(LockIcon, {}) }), error && (_jsx("div", { className: "absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: inputTranslate(error) }) }))] })] }));
+    return (_jsxs(_Fragment, { children: [label && (_jsx("label", { htmlFor: id, className: "text-base font-medium text-Neutral-300 px-3", children: label })), _jsxs("div", { className: "w-full relative mt-1", children: [_jsx("input", Object.assign({ ref: ref, id: id, type: showPassword ? "text" : "password", placeholder: "xxxx xxxx xxxx xxxx", value: value, onChange: handleChange, className: cn("autofill-input placeholder-Neutral-200 w-full px-[2.7rem] py-3 rounded-2xl bg-secondary-50 dark:bg-background-light border border-secondary-100 focus:outline-none focus:ring-0 focus:border-secondary-400 justify-between items-center text-Neutral-500 dark:text-white relative", error && "!border-Error-400 !focus:border-Error-400") }, props)), _jsx("button", { type: "button", onClick: handleTogglePassword, className: "absolute inset-y-0 rtl:left-0 ltr:right-0 px-3 flex items-center cursor-pointer", children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }), _jsx("div", { className: "absolute inset-y-0 rtl:right-0 ltr:left-0 rtl:pr-3 ltr:pl-3 flex items-center pointer-events-none", children: _jsx(LockIcon, {}) }), error && (_jsx("div", { className: "absolute mt-2 mx-3", children: _jsx("div", { className: "text-Error-400 text-xs font-medium", children: error }) }))] })] }));
 });
 InputRePassword.displayName = "InputRePassword";
 // InputDarkLight Component