@evershop/evershop 2.1.0 → 2.1.1

package/dist/components/common/form/PasswordField.js

@@ -1,61 +1,44 @@
 import { Tooltip } from '@components/common/form/Tooltip.js';
 import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldError, FieldLabel } from '@components/common/ui/Field.js';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '@components/common/ui/InputGroup.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { Eye, EyeClosed } from 'lucide-react';
 import React from 'react';
-import { useFormContext } from 'react-hook-form';
-export function PasswordField({ name, label, placeholder, className = '', wrapperClassName, required = false, disabled = false, minLength = 6, showToggle = false, error, helperText, validation, onChange, prefixIcon, suffixIcon, ...props }) {
-    const { register, unregister, formState: { errors } } = useFormContext();
-    React.useEffect(() => {
-        return () => {
-            unregister(name);
-        };
-    }, [name, unregister]);
+import { useFormContext, Controller } from 'react-hook-form';
+export function PasswordField({ name, label, error, helperText, required, minLength = 6, showToggle = false, validation, wrapperClassName, className, defaultValue, prefixIcon, suffixIcon, ...props }) {
+    const { control, formState: { errors } } = useFormContext();
     const fieldError = getNestedError(name, errors, error);
     const fieldId = `field-${name}`;
     const [showPassword, setShowPassword] = React.useState(false);
-    const validationRules = {};
-    if (validation) {
-        Object.assign(validationRules, validation);
-    }
-    if (required && !validationRules.required) {
-        validationRules.required = _('${field} is required', {
-            field: label || 'This field'
-        });
-    }
-    if (!validationRules.minLength) {
-        validationRules.minLength = {
+    const validationRules = {
+        ...validation,
+        ...(required &&
+            !(validation === null || validation === void 0 ? void 0 : validation.required) && {
+            required: _('${field} is required', { field: label || name })
+        }),
+        minLength: (validation === null || validation === void 0 ? void 0 : validation.minLength) || {
             value: minLength,
             message: _('Password must be at least ${minLength} characters long', {
                 minLength: minLength.toString()
             })
-        };
-    }
-    const handleChange = (e) => {
-        if (onChange) {
-            onChange(e.target.value);
         }
     };
-    const hasIcons = prefixIcon || suffixIcon || showToggle;
-    const inputClassName = `${fieldError !== undefined ? 'error' : ''} ${hasIcons ? '!pr-3' : ''} ${prefixIcon ? '!pl-10' : ''} ${suffixIcon || showToggle ? '!pr-10' : ''} ${className || ''}`.trim();
-    const renderToggleButton = () => showToggle ? (React.createElement("button", { type: "button", className: "text-gray-400 hover:text-gray-600 transition-colors", onClick: () => setShowPassword(!showPassword), tabIndex: -1 }, showPassword ? (React.createElement("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
-        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" }))) : (React.createElement("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
-        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
-        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" }))))) : null;
-    const renderInput = () => (React.createElement("input", { id: fieldId, type: showToggle && showPassword ? 'text' : 'password', placeholder: placeholder, disabled: disabled, className: inputClassName, "aria-invalid": fieldError !== undefined ? 'true' : 'false', "aria-describedby": fieldError !== undefined ? `${fieldId}-error` : undefined, ...register(name, validationRules), onChange: (e) => {
-            register(name).onChange(e);
-            handleChange(e);
-        }, ...props }));
-    return (React.createElement("div", { className: `form-field ${wrapperClassName || ''}`.trim() },
-        label && (React.createElement("label", { htmlFor: fieldId },
-            label,
-            required && React.createElement("span", { className: "required-indicator" }, "*"),
-            helperText && React.createElement(Tooltip, { content: helperText, position: "top" }))),
-        hasIcons ? (React.createElement("div", { className: `input__wrapper relative flex group items-center`.trim() },
-            prefixIcon && (React.createElement("div", { className: "prefix absolute left-3 z-10 flex items-center justify-center" }, prefixIcon)),
+    const renderToggleButton = () => showToggle ? (React.createElement("button", { type: "button", className: "transition-colors", onClick: () => setShowPassword(!showPassword), tabIndex: -1 }, showPassword ? (React.createElement(Eye, { className: "h-5 w-5" })) : (React.createElement(EyeClosed, { className: "h-5 w-5" })))) : null;
+    const renderInput = () => (React.createElement(Controller, { name: name, control: control, defaultValue: defaultValue, rules: validationRules, render: ({ field }) => {
+            var _a;
+            return (React.createElement(InputGroupInput, { ...field, value: (_a = field.value) !== null && _a !== void 0 ? _a : '', id: fieldId, type: showToggle && showPassword ? 'text' : 'password', "aria-invalid": fieldError !== undefined ? 'true' : 'false', "aria-describedby": fieldError !== undefined ? `${fieldId}-error` : undefined, ...props }));
+        } }));
+    return (React.createElement(Field, { "data-invalid": fieldError ? 'true' : 'false', className: wrapperClassName },
+        label && (React.createElement(FieldLabel, { htmlFor: fieldId },
+            React.createElement(React.Fragment, null,
+                label,
+                required && React.createElement("span", { className: "text-destructive" }, "*"),
+                helperText && React.createElement(Tooltip, { content: helperText, position: "top" })))),
+        React.createElement(InputGroup, null,
             renderInput(),
-            (suffixIcon || showToggle) && (React.createElement("div", { className: "suffix absolute right-3 z-10 flex items-center justify-center" }, suffixIcon || renderToggleButton())))) : (React.createElement("div", { className: "relative" },
-            renderInput(),
-            showToggle && (React.createElement("button", { type: "button", className: "absolute inset-y-0 right-0 pr-3 flex items-center", onClick: () => setShowPassword(!showPassword), tabIndex: -1 }, renderToggleButton())))),
-        fieldError && (React.createElement("p", { id: `${fieldId}-error`, className: "field-error" }, fieldError))));
+            prefixIcon && (React.createElement(InputGroupAddon, { align: 'inline-start' }, prefixIcon)),
+            (suffixIcon || showToggle) && (React.createElement(InputGroupAddon, { align: 'inline-end' }, suffixIcon || renderToggleButton()))),
+        fieldError && React.createElement(FieldError, null, fieldError)));
 }
 //# sourceMappingURL=PasswordField.js.map

package/dist/components/common/form/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../../src/components/common/form/PasswordField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../../src/components/common/form/PasswordField.tsx"],"names":[],"mappings":"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"}

package/dist/components/common/form/RadioGroupField.d.ts

@@ -11,12 +11,11 @@ interface RadioGroupFieldProps<T extends FieldValues = FieldValues> extends Omit
     label?: string;
     error?: string;
     helperText?: string;
-    direction?: 'horizontal' | 'vertical';
     required?: boolean;
     disabled?: boolean;
     validation?: RegisterOptions<T>;
     defaultValue?: string | number;
     wrapperClassName?: string;
 }
-export declare function RadioGroupField<T extends FieldValues = FieldValues>({ name, options, label, error, wrapperClassName, helperText, className, direction, required, disabled, validation, defaultValue, ...props }: RadioGroupFieldProps<T>): React.JSX.Element;
+export declare function RadioGroupField<T extends FieldValues = FieldValues>({ name, options, label, error, wrapperClassName, helperText, className, required, disabled, validation, defaultValue, ...props }: RadioGroupFieldProps<T>): React.JSX.Element;
 export {};

package/dist/components/common/form/RadioGroupField.js

@@ -1,9 +1,11 @@
 import { Tooltip } from '@components/common/form/Tooltip.js';
 import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldError, FieldLabel } from '@components/common/ui/Field.js';
+import { RadioGroup, RadioGroupItem } from '@components/common/ui/RadioGroup.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
-export function RadioGroupField({ name, options, label, error, wrapperClassName, helperText, className = '', direction = 'vertical', required = false, disabled = false, validation, defaultValue, ...props }) {
+export function RadioGroupField({ name, options, label, error, wrapperClassName, helperText, className = '', required = false, disabled = false, validation, defaultValue, ...props }) {
     const { control, formState: { errors } } = useFormContext();
     const fieldError = getNestedError(name, errors, error);
     const fieldId = `field-${name}`;
@@ -14,16 +16,23 @@ export function RadioGroupField({ name, options, label, error, wrapperClassName,
             required: _('${field} is required', { field: label || name })
         })
     };
-    const containerClass = direction === 'horizontal' ? 'radio-group horizontal' : 'radio-group';
-    return (React.createElement("div", { className: `form-field ${wrapperClassName} ${fieldError ? 'error' : ''}` },
-        label && (React.createElement("fieldset", null,
-            React.createElement("legend", null,
+    return (React.createElement(Field, { "data-invalid": fieldError ? 'true' : 'false', className: wrapperClassName },
+        label && (React.createElement(FieldLabel, null,
+            React.createElement(React.Fragment, null,
                 label,
-                required && React.createElement("span", { className: "required-indicator" }, "*"),
+                required && React.createElement("span", { className: "text-destructive" }, "*"),
                 helperText && React.createElement(Tooltip, { content: helperText, position: "top" })))),
-        React.createElement(Controller, { name: name, control: control, rules: validationRules, defaultValue: defaultValue, render: ({ field }) => (React.createElement("div", { className: containerClass }, options.map((option) => (React.createElement("div", { key: option.value, className: "radio-item" },
-                React.createElement("input", { type: "radio", id: `${fieldId}-${option.value}`, value: option.value, disabled: disabled || option.disabled, checked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur, className: className, "aria-invalid": fieldError !== undefined ? 'true' : 'false', "aria-describedby": fieldError !== undefined ? `${fieldId}-error` : undefined, ...props }),
-                React.createElement("label", { htmlFor: `${fieldId}-${option.value}`, className: option.disabled ? 'disabled' : '' }, option.label)))))) }),
-        fieldError && (React.createElement("p", { id: `${fieldId}-error`, className: "field-error" }, fieldError))));
+        React.createElement(Controller, { name: name, control: control, rules: validationRules, defaultValue: defaultValue, render: ({ field }) => {
+                var _a;
+                return (React.createElement(RadioGroup, { value: String((_a = field.value) !== null && _a !== void 0 ? _a : ''), onValueChange: (value) => {
+                        const option = options.find((o) => String(o.value) === value);
+                        if (option) {
+                            field.onChange(option.value);
+                        }
+                    }, className: className, "aria-invalid": fieldError !== undefined ? 'true' : 'false', "aria-describedby": fieldError !== undefined ? `${fieldId}-error` : undefined }, options.map((option) => (React.createElement("div", { key: option.value, className: "flex items-center gap-2" },
+                    React.createElement(RadioGroupItem, { value: String(option.value), id: `${fieldId}-${option.value}`, disabled: disabled || option.disabled }),
+                    React.createElement(FieldLabel, { htmlFor: `${fieldId}-${option.value}`, className: `text-sm font-normal cursor-pointer ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}` }, option.label))))));
+            } }),
+        fieldError && React.createElement(FieldError, null, fieldError)));
 }
 //# sourceMappingURL=RadioGroupField.js.map

package/dist/components/common/form/RadioGroupField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupField.js","sourceRoot":"","sources":["../../../../src/components/common/form/RadioGroupField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RadioGroupField.js","sourceRoot":"","sources":["../../../../src/components/common/form/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACjF,OAAO,EACL,KAAK,EACL,UAAU,EACV,UAAU,EAEX,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACL,UAAU,EACV,cAAc,EACf,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,CAAC,EAAE,MAAM,2CAA2C,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EAId,UAAU,EACX,MAAM,iBAAiB,CAAC;AAyBzB,MAAM,UAAU,eAAe,CAAsC,EACnE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACgB;IACxB,MAAM,EACJ,OAAO,EACP,SAAS,EAAE,EAAE,MAAM,EAAE,EACtB,GAAG,cAAc,EAAK,CAAC;IAExB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,SAAS,IAAI,EAAE,CAAC;IAEhC,MAAM,eAAe,GAAG;QACtB,GAAG,UAAU;QACb,GAAG,CAAC,QAAQ;YACV,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA,IAAI;YACvB,QAAQ,EAAE,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;SAC9D,CAAC;KACL,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,oBACU,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3C,SAAS,EAAE,gBAAgB;QAE1B,KAAK,IAAI,CACR,oBAAC,UAAU;YACT;gBACG,KAAK;gBACL,QAAQ,IAAI,8BAAM,SAAS,EAAC,kBAAkB,QAAS;gBACvD,UAAU,IAAI,oBAAC,OAAO,IAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAC,KAAK,GAAG,CAC7D,CACQ,CACd;QAED,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,EACtB,YAAY,EAAE,YAAmB,EACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;;gBAAC,OAAA,CACrB,oBAAC,UAAU,IACT,KAAK,EAAE,MAAM,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,EAChC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;wBACvB,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC;wBAC9D,IAAI,MAAM,EAAE,CAAC;4BACX,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC/B,CAAC;oBACH,CAAC,EACD,SAAS,EAAE,SAAS,kBACN,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBAEvD,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,IAG1D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,6BAAK,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,EAAC,yBAAyB;oBACzD,oBAAC,cAAc,IACb,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3B,EAAE,EAAE,GAAG,OAAO,IAAI,MAAM,CAAC,KAAK,EAAE,EAChC,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,GACrC;oBACF,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,OAAO,IAAI,MAAM,CAAC,KAAK,EAAE,EACrC,SAAS,EAAE,sCACT,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EACtD,EAAE,IAED,MAAM,CAAC,KAAK,CACF,CACT,CACP,CAAC,CACS,CACd,CAAA;aAAA,GACD;QAED,UAAU,IAAI,oBAAC,UAAU,QAAE,UAAU,CAAc,CAC9C,CACT,CAAC;AACJ,CAAC"}

package/dist/components/common/form/RangeField.js

@@ -19,7 +19,7 @@ export function RangeField({ name, label, error, wrapperClassName, helperText, r
     return (React.createElement("div", { className: `form-field ${wrapperClassName} ${fieldError ? 'error' : ''}` },
         label && (React.createElement("label", { htmlFor: fieldId },
             label,
-            required && React.createElement("span", { className: "required-indicator" }, "*"),
+            required && React.createElement("span", { className: "text-destructive" }, "*"),
             showValue && React.createElement("span", { className: "range-value" },
                 "(",
                 value,

package/dist/components/common/form/RangeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeField.js","sourceRoot":"","sources":["../../../../src/components/common/form/RangeField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACjF,OAAO,EAAE,CAAC,EAAE,MAAM,2CAA2C,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EAIf,MAAM,iBAAiB,CAAC;AAezB,MAAM,UAAU,UAAU,CAAsC,EAC9D,IAAI,EACJ,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,SAAS,EACT,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,GAAG,KAAK,EACW;IACnB,MAAM,EACJ,QAAQ,EACR,SAAS,EAAE,EAAE,MAAM,EAAE,EACrB,KAAK,EACN,GAAG,cAAc,EAAK,CAAC;IAExB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,SAAS,IAAI,EAAE,CAAC;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;IACjC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,GAAG,UAAU,IAAI,EAAE,CAAC;IACtE,MAAM,eAAe,GAAG;QACtB,GAAG,eAAe;QAClB,GAAG,CAAC,QAAQ,IAAI;YACd,QAAQ,EAAE,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;SAC9D,CAAC;QACF,aAAa,EAAE,IAAI;KACX,CAAC;IAEX,OAAO,CACL,6BACE,SAAS,EAAE,cAAc,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QAEvE,KAAK,IAAI,CACR,+BAAO,OAAO,EAAE,OAAO;YACpB,KAAK;YACL,QAAQ,IAAI,8BAAM,SAAS,EAAC,oBAAoB,QAAS;YACzD,SAAS,IAAI,8BAAM,SAAS,EAAC,aAAa;;gBAAG,KAAK;oBAAS;YAC3D,UAAU,IAAI,oBAAC,OAAO,IAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAC,KAAK,GAAG,CACxD,CACT;QAED,+BACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,KACN,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,EACnC,SAAS,EAAE,SAAS,kBACN,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBAEvD,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,KAEvD,KAAK,GACT;QAEF,6BAAK,SAAS,EAAC,cAAc;YAC3B,kCAAO,GAAG,CAAQ;YAClB,kCAAO,GAAG,CAAQ,CACd;QAEL,UAAU,IAAI,CACb,2BAAG,EAAE,EAAE,GAAG,OAAO,QAAQ,EAAE,SAAS,EAAC,aAAa,IAC/C,UAAU,CACT,CACL,CACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RangeField.js","sourceRoot":"","sources":["../../../../src/components/common/form/RangeField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACjF,OAAO,EAAE,CAAC,EAAE,MAAM,2CAA2C,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EAIf,MAAM,iBAAiB,CAAC;AAezB,MAAM,UAAU,UAAU,CAAsC,EAC9D,IAAI,EACJ,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,SAAS,EACT,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,GAAG,KAAK,EACW;IACnB,MAAM,EACJ,QAAQ,EACR,SAAS,EAAE,EAAE,MAAM,EAAE,EACrB,KAAK,EACN,GAAG,cAAc,EAAK,CAAC;IAExB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,SAAS,IAAI,EAAE,CAAC;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;IACjC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,GAAG,UAAU,IAAI,EAAE,CAAC;IACtE,MAAM,eAAe,GAAG;QACtB,GAAG,eAAe;QAClB,GAAG,CAAC,QAAQ,IAAI;YACd,QAAQ,EAAE,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;SAC9D,CAAC;QACF,aAAa,EAAE,IAAI;KACX,CAAC;IAEX,OAAO,CACL,6BACE,SAAS,EAAE,cAAc,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QAEvE,KAAK,IAAI,CACR,+BAAO,OAAO,EAAE,OAAO;YACpB,KAAK;YACL,QAAQ,IAAI,8BAAM,SAAS,EAAC,kBAAkB,QAAS;YACvD,SAAS,IAAI,8BAAM,SAAS,EAAC,aAAa;;gBAAG,KAAK;oBAAS;YAC3D,UAAU,IAAI,oBAAC,OAAO,IAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAC,KAAK,GAAG,CACxD,CACT;QAED,+BACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,KACN,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,EACnC,SAAS,EAAE,SAAS,kBACN,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBAEvD,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,KAEvD,KAAK,GACT;QAEF,6BAAK,SAAS,EAAC,cAAc;YAC3B,kCAAO,GAAG,CAAQ;YAClB,kCAAO,GAAG,CAAQ,CACd;QAEL,UAAU,IAAI,CACb,2BAAG,EAAE,EAAE,GAAG,OAAO,QAAQ,EAAE,SAAS,EAAC,aAAa,IAC/C,UAAU,CACT,CACL,CACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/common/form/ReactSelectCreatableField.js

@@ -1,9 +1,11 @@
+import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldLabel } from '@components/common/ui/Field.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import CreatableSelect from 'react-select/creatable';
 export function ReactSelectCreatableField({ name, label, error, wrapperClassName = 'form-field', helperText, required, validation, options, className, isMulti = false, defaultValue, onCreateOption, formatCreateLabel = (inputValue) => `Create "${inputValue}"`, ...selectProps }) {
-    const { control, unregister } = useFormContext();
+    const { control, unregister, formState: { errors } } = useFormContext();
     const fieldId = `field-${name}`;
     const [dynamicOptions, setDynamicOptions] = React.useState(options);
     React.useEffect(() => {
@@ -20,81 +22,79 @@ export function ReactSelectCreatableField({ name, label, error, wrapperClassName
             required: _('${field} is required', { field: label || name })
         })
     };
-    return (React.createElement("div", { className: `${wrapperClassName} ${className || ''}` },
-        label && (React.createElement("label", { htmlFor: fieldId },
-            label,
-            required && React.createElement("span", { className: "required-indicator" }, "*"))),
-        React.createElement(Controller, { name: name, control: control, rules: validationRules, defaultValue: defaultValue, render: ({ field, fieldState }) => {
-                var _a;
-                const fieldError = error || ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
-                const handleCreateOption = (inputValue) => {
-                    const newOption = {
-                        value: inputValue.toLowerCase().replace(/\W/g, ''),
-                        label: inputValue
-                    };
-                    const optionExists = dynamicOptions.some((option) => option.value === newOption.value ||
-                        option.label === newOption.label);
-                    if (!optionExists) {
-                        setDynamicOptions((prev) => {
-                            const updated = [...prev, newOption];
-                            return updated;
-                        });
-                    }
-                    if (onCreateOption) {
-                        onCreateOption(inputValue);
+    const fieldError = getNestedError(name, errors, error);
+    return (React.createElement(Controller, { name: name, control: control, rules: validationRules, defaultValue: defaultValue, render: ({ field, fieldState }) => {
+            const handleCreateOption = (inputValue) => {
+                const newOption = {
+                    value: inputValue.toLowerCase().replace(/\W/g, ''),
+                    label: inputValue
+                };
+                const optionExists = dynamicOptions.some((option) => option.value === newOption.value ||
+                    option.label === newOption.label);
+                if (!optionExists) {
+                    setDynamicOptions((prev) => {
+                        const updated = [...prev, newOption];
+                        return updated;
+                    });
+                }
+                if (onCreateOption) {
+                    onCreateOption(inputValue);
+                }
+                if (isMulti) {
+                    const currentValues = field.value || [];
+                    if (!currentValues.includes(newOption.value)) {
+                        const newValues = [...currentValues, newOption.value];
+                        field.onChange(newValues);
                     }
-                    if (isMulti) {
-                        const currentValues = field.value || [];
-                        if (!currentValues.includes(newOption.value)) {
-                            const newValues = [...currentValues, newOption.value];
-                            field.onChange(newValues);
+                }
+                else {
+                    field.onChange(newOption.value);
+                }
+            };
+            return (React.createElement(Field, { "data-invalid": fieldError ? 'true' : 'false', className: wrapperClassName },
+                label && (React.createElement(FieldLabel, { htmlFor: fieldId },
+                    label,
+                    required && React.createElement("span", { className: "text-destructive" }, "*"))),
+                React.createElement(CreatableSelect, { ...field, ...selectProps, inputId: fieldId, options: dynamicOptions, isMulti: isMulti, formatCreateLabel: formatCreateLabel, onCreateOption: handleCreateOption, value: isMulti
+                        ? dynamicOptions.filter((option) => { var _a; return (_a = field.value) === null || _a === void 0 ? void 0 : _a.includes(option.value); })
+                        : dynamicOptions.find((option) => option.value === field.value) || null, onChange: (selectedOption) => {
+                        if (isMulti) {
+                            const values = selectedOption
+                                ? selectedOption.map((option) => option.value)
+                                : [];
+                            field.onChange(values);
                         }
-                    }
-                    else {
-                        field.onChange(newOption.value);
-                    }
-                };
-                return (React.createElement("div", { className: fieldError !== undefined ? 'error' : '' },
-                    React.createElement(CreatableSelect, { ...field, ...selectProps, inputId: fieldId, options: dynamicOptions, isMulti: isMulti, formatCreateLabel: formatCreateLabel, onCreateOption: handleCreateOption, value: isMulti
-                            ? dynamicOptions.filter((option) => { var _a; return (_a = field.value) === null || _a === void 0 ? void 0 : _a.includes(option.value); })
-                            : dynamicOptions.find((option) => option.value === field.value) || null, onChange: (selectedOption) => {
-                            if (isMulti) {
-                                const values = selectedOption
-                                    ? selectedOption.map((option) => option.value)
-                                    : [];
-                                field.onChange(values);
-                            }
-                            else {
-                                field.onChange(selectedOption
-                                    ? selectedOption.value
-                                    : null);
-                            }
-                        }, classNamePrefix: "react-select", styles: {
-                            control: (base, state) => ({
-                                ...base,
-                                minHeight: 'auto',
-                                border: '1px solid #d1d5db',
-                                borderRadius: '0.375rem',
-                                boxShadow: 'none',
-                                transition: 'border-color 0.15s ease-in-out',
-                                '&:hover': {
-                                    borderColor: '#d1d5db'
-                                },
-                                ...(state.isFocused && {
-                                    borderColor: '#3b82f6',
-                                    boxShadow: '0 0 0 1px rgb(59, 130, 246)'
-                                })
-                            }),
-                            input: (base) => ({
-                                ...base,
-                                '& input': {
-                                    boxShadow: 'none !important',
-                                    outline: 'none !important'
-                                }
+                        else {
+                            field.onChange(selectedOption
+                                ? selectedOption.value
+                                : null);
+                        }
+                    }, classNamePrefix: "react-select", styles: {
+                        control: (base, state) => ({
+                            ...base,
+                            minHeight: 'auto',
+                            border: '1px solid #d1d5db',
+                            borderRadius: '0.375rem',
+                            boxShadow: 'none',
+                            transition: 'border-color 0.15s ease-in-out',
+                            '&:hover': {
+                                borderColor: '#d1d5db'
+                            },
+                            ...(state.isFocused && {
+                                borderColor: '#3b82f6',
+                                boxShadow: '0 0 0 1px rgb(59, 130, 246)'
                             })
-                        } }),
-                    fieldError && (React.createElement("p", { id: `${fieldId}-error`, className: "field-error" }, fieldError)),
-                    helperText && !fieldError && (React.createElement("p", { id: `${fieldId}-helper`, className: "field-helper" }, helperText))));
-            } })));
+                        }),
+                        input: (base) => ({
+                            ...base,
+                            '& input': {
+                                boxShadow: 'none !important',
+                                outline: 'none !important'
+                            }
+                        })
+                    } }),
+                fieldError && (React.createElement("p", { id: `${fieldId}-error`, className: "field-error" }, fieldError)),
+                helperText && !fieldError && (React.createElement("p", { id: `${fieldId}-helper`, className: "field-helper" }, helperText))));
+        } }));
 }
 //# sourceMappingURL=ReactSelectCreatableField.js.map

package/dist/components/common/form/ReactSelectCreatableField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactSelectCreatableField.js","sourceRoot":"","sources":["../../../../src/components/common/form/ReactSelectCreatableField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ReactSelectCreatableField.js","sourceRoot":"","sources":["../../../../src/components/common/form/ReactSelectCreatableField.tsx"],"names":[],"mappings":"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"}

package/dist/components/common/form/ReactSelectField.js

@@ -1,9 +1,14 @@
+import { Tooltip } from '@components/common/form/Tooltip.js';
+import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldError, FieldLabel } from '@components/common/ui/Field.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { cn } from '@evershop/evershop/lib/util/cn';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import Select from 'react-select';
 export function ReactSelectField({ name, label, error, wrapperClassName = 'form-field', helperText, required, validation, options, className, isMulti = false, defaultValue, ...selectProps }) {
-    const { control } = useFormContext();
+    const { control, formState: { errors } } = useFormContext();
+    const fieldError = getNestedError(name, errors, error);
     const fieldId = `field-${name}`;
     const validationRules = {
         ...validation,
@@ -12,57 +17,31 @@ export function ReactSelectField({ name, label, error, wrapperClassName = 'form-
             required: _('${field} is required', { field: label || name })
         })
     };
-    return (React.createElement("div", { className: `${wrapperClassName} ${className || ''}` },
-        label && (React.createElement("label", { htmlFor: fieldId },
-            label,
-            required && React.createElement("span", { className: "required-indicator" }, "*"))),
-        React.createElement(Controller, { name: name, control: control, rules: validationRules, defaultValue: defaultValue, render: ({ field, fieldState }) => {
-                var _a;
-                const fieldError = error || ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
-                return (React.createElement("div", { className: fieldError !== undefined ? 'error' : '' },
-                    React.createElement(Select, { ...field, ...selectProps, inputId: fieldId, options: options, isMulti: isMulti, value: isMulti
-                            ? options.filter((option) => {
-                                var _a;
-                                return (_a = (field.value || defaultValue || [])) === null || _a === void 0 ? void 0 : _a.includes(option.value);
-                            })
-                            : options.find((option) => { var _a; return option.value === ((_a = field.value) !== null && _a !== void 0 ? _a : defaultValue); }) || null, onChange: (selectedOption) => {
-                            if (isMulti) {
-                                const values = selectedOption
-                                    ? selectedOption.map((option) => option.value)
-                                    : [];
-                                field.onChange(values);
-                            }
-                            else {
-                                field.onChange(selectedOption
-                                    ? selectedOption.value
-                                    : null);
-                            }
-                        }, classNamePrefix: "react-select", styles: {
-                            control: (base, state) => ({
-                                ...base,
-                                minHeight: 'auto',
-                                border: '1px solid #d1d5db',
-                                borderRadius: '0.375rem',
-                                boxShadow: 'none',
-                                transition: 'border-color 0.15s ease-in-out',
-                                '&:hover': {
-                                    borderColor: '#d1d5db'
-                                },
-                                ...(state.isFocused && {
-                                    borderColor: '#3b82f6',
-                                    boxShadow: '0 0 0 1px rgb(59, 130, 246)'
-                                })
-                            }),
-                            input: (base) => ({
-                                ...base,
-                                '& input': {
-                                    boxShadow: 'none !important',
-                                    outline: 'none !important'
-                                }
-                            })
-                        } }),
-                    fieldError && (React.createElement("p", { id: `${fieldId}-error`, className: "field-error" }, fieldError)),
-                    helperText && !fieldError && (React.createElement("p", { id: `${fieldId}-helper`, className: "field-helper" }, helperText))));
-            } })));
+    return (React.createElement(Field, { "data-invalid": fieldError ? 'true' : 'false', className: wrapperClassName, id: `field-${name}` },
+        label && (React.createElement(FieldLabel, { htmlFor: fieldId },
+            React.createElement(React.Fragment, null,
+                label,
+                required && React.createElement("span", { className: "text-destructive" }, "*"),
+                helperText && React.createElement(Tooltip, { content: helperText, position: "top" })))),
+        React.createElement(Controller, { name: name, control: control, rules: validationRules, defaultValue: defaultValue, render: ({ field }) => (React.createElement(Select, { ...field, ...selectProps, inputId: fieldId, options: options, isMulti: isMulti, className: cn(className), value: isMulti
+                    ? options.filter((option) => { var _a; return (_a = (field.value || defaultValue || [])) === null || _a === void 0 ? void 0 : _a.includes(option.value); })
+                    : options.find((option) => { var _a; return option.value === ((_a = field.value) !== null && _a !== void 0 ? _a : defaultValue); }) || null, onChange: (selectedOption) => {
+                    if (isMulti) {
+                        const values = selectedOption
+                            ? selectedOption.map((option) => option.value)
+                            : [];
+                        field.onChange(values);
+                    }
+                    else {
+                        field.onChange(selectedOption ? selectedOption.value : null);
+                    }
+                }, classNamePrefix: "react-select", "aria-invalid": fieldError !== undefined ? 'true' : 'false', "aria-describedby": fieldError !== undefined ? `${fieldId}-error` : undefined, classNames: {
+                    control: (state) => cn('min-h-auto border border-input rounded-md shadow-xs transition-[color,box-shadow]', state.isFocused && 'border-ring ring-[3px] ring-ring/50', fieldError &&
+                        'border-destructive ring-[3px] ring-destructive/20'),
+                    input: () => 'outline-none shadow-none',
+                    menu: () => 'bg-popover border border-input rounded-md shadow-md',
+                    option: (state) => cn('px-3 py-2 cursor-pointer', state.isSelected && 'bg-primary text-primary-foreground', state.isFocused && !state.isSelected && 'bg-accent')
+                } })) }),
+        fieldError && React.createElement(FieldError, null, fieldError)));
 }
 //# sourceMappingURL=ReactSelectField.js.map

package/dist/components/common/form/ReactSelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactSelectField.js","sourceRoot":"","sources":["../../../../src/components/common/form/ReactSelectField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ReactSelectField.js","sourceRoot":"","sources":["../../../../src/components/common/form/ReactSelectField.tsx"],"names":[],"mappings":"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"}

package/dist/components/common/form/SelectField.d.ts

@@ -5,7 +5,7 @@ interface SelectOption {
     label: string;
     disabled?: boolean;
 }
-interface SelectFieldProps<T extends FieldValues = FieldValues> extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'name'> {
+interface SelectFieldProps<T extends FieldValues = FieldValues> {
     name: FieldPath<T>;
     label?: string;
     error?: string;
@@ -13,9 +13,13 @@ interface SelectFieldProps<T extends FieldValues = FieldValues> extends Omit<Rea
     required?: boolean;
     validation?: RegisterOptions<T>;
     options: SelectOption[];
-    multiple?: boolean;
     placeholder?: string;
     wrapperClassName?: string;
+    className?: string;
+    disabled?: boolean;
+    defaultValue?: string | number;
+    id?: string;
+    onChange?: (value: string | number) => void;
 }
-export declare function SelectField<T extends FieldValues = FieldValues>({ name, label, error, helperText, required, validation, options, placeholder, wrapperClassName, className, defaultValue, multiple, ...props }: SelectFieldProps<T>): React.JSX.Element;
+export declare function SelectField<T extends FieldValues = FieldValues>({ name, label, error, helperText, required, validation, options, placeholder, wrapperClassName, className, defaultValue, disabled, id, onChange: onChangeCallback }: SelectFieldProps<T>): React.JSX.Element;
 export {};