@page-speed/forms 0.3.5 → 0.3.7

package/dist/core.d.cts

@@ -1,5 +1,5 @@
-import { b as FormValues, U as UseFormOptions, c as UseFormReturn, d as UseFieldOptions, e as UseFieldReturn, f as FormProps, g as FieldProps } from './types-WxAFrgDW.cjs';
-export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, k as FormState, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-WxAFrgDW.cjs';
+import { b as FormValues, U as UseFormOptions, c as UseFormReturn, d as UseFieldOptions, e as UseFieldReturn, f as FormProps, g as FieldProps } from './types-BBif0kuP.cjs';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, k as FormState, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-BBif0kuP.cjs';
 import * as React from 'react';
 
 /**

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { b as FormValues, U as UseFormOptions, c as UseFormReturn, d as UseFieldOptions, e as UseFieldReturn, f as FormProps, g as FieldProps } from './types-WxAFrgDW.js';
-export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, k as FormState, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-WxAFrgDW.js';
+import { b as FormValues, U as UseFormOptions, c as UseFormReturn, d as UseFieldOptions, e as UseFieldReturn, f as FormProps, g as FieldProps } from './types-BBif0kuP.js';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, k as FormState, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-BBif0kuP.js';
 import * as React from 'react';
 
 /**

package/dist/index.d.cts

@@ -1,3 +1,3 @@
 export { Field, Form, FormContext, useField, useForm } from './core.cjs';
-export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, g as FieldProps, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, f as FormProps, k as FormState, b as FormValues, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, d as UseFieldOptions, e as UseFieldReturn, U as UseFormOptions, c as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-WxAFrgDW.cjs';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, g as FieldProps, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, f as FormProps, k as FormState, b as FormValues, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, d as UseFieldOptions, e as UseFieldReturn, U as UseFormOptions, c as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BBif0kuP.cjs';
 import 'react';

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { Field, Form, FormContext, useField, useForm } from './core.js';
-export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, g as FieldProps, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, f as FormProps, k as FormState, b as FormValues, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, d as UseFieldOptions, e as UseFieldReturn, U as UseFormOptions, c as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-WxAFrgDW.js';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, g as FieldProps, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, f as FormProps, k as FormState, b as FormValues, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, d as UseFieldOptions, e as UseFieldReturn, U as UseFormOptions, c as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BBif0kuP.js';
 import 'react';

package/dist/inputs.cjs

@@ -34,6 +34,7 @@ function TextInput({
   error = false,
   className = "",
   type = "text",
+  id = "text",
   ...props
 }) {
   const handleChange = (e) => {
@@ -49,6 +50,7 @@ function TextInput({
     "input",
     {
       type,
+      id,
       name,
       value: value ?? "",
       onChange: handleChange,
@@ -126,9 +128,11 @@ function Checkbox({
   className = "",
   indeterminate = false,
   label,
+  description,
   ...props
 }) {
   const inputRef = React7__namespace.useRef(null);
+  const checkboxId = props.id || `checkbox-${name}`;
   React7__namespace.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
@@ -142,27 +146,37 @@ function Checkbox({
   };
   const baseClassName = "checkbox";
   const errorClassName = error ? "checkbox--error" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
+  const checkedClassName = value ? "checkbox--checked" : "";
+  const disabledClassName = disabled ? "checkbox--disabled" : "";
+  const combinedClassName = `${baseClassName} ${errorClassName} ${checkedClassName} ${disabledClassName} ${className}`.trim();
   const checkbox = /* @__PURE__ */ React7__namespace.createElement(
     "input",
     {
       ref: inputRef,
       type: "checkbox",
+      id: checkboxId,
       name,
       checked: value,
       onChange: handleChange,
       onBlur: handleBlur,
       disabled,
       required,
-      className: combinedClassName,
+      className: "checkbox-input",
       "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": props["aria-describedby"],
+      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
       "aria-required": required || props["aria-required"],
       ...props
     }
   );
   if (label) {
-    return /* @__PURE__ */ React7__namespace.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React7__namespace.createElement("label", { className: `checkbox-field ${combinedClassName}`, htmlFor: checkboxId }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "checkbox-field-content" }, checkbox, /* @__PURE__ */ React7__namespace.createElement("div", { className: "checkbox-field-text" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "checkbox-label" }, label), description && /* @__PURE__ */ React7__namespace.createElement(
+      "span",
+      {
+        className: "checkbox-description",
+        id: `${checkboxId}-description`
+      },
+      description
+    ))));
   }
   return checkbox;
 }
@@ -358,10 +372,19 @@ function Radio({
         "label",
         {
           key: option.value,
-          className: `radio-option ${isDisabled ? "radio-option--disabled" : ""}`,
-          htmlFor: radioId
+          className: `radio-option ${isChecked ? "radio-option--checked" : ""} ${isDisabled ? "radio-option--disabled" : ""}`,
+          htmlFor: radioId,
+          onKeyDown: (e) => handleKeyDown(e, index),
+          tabIndex: 0
         },
-        /* @__PURE__ */ React7__namespace.createElement(
+        /* @__PURE__ */ React7__namespace.createElement("div", { className: "radio-option-content" }, /* @__PURE__ */ React7__namespace.createElement("div", { className: "radio-option-text" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7__namespace.createElement(
+          "span",
+          {
+            className: "radio-description",
+            id: `${radioId}-description`
+          },
+          option.description
+        )), /* @__PURE__ */ React7__namespace.createElement(
           "input",
           {
             type: "radio",
@@ -371,20 +394,11 @@ function Radio({
             checked: isChecked,
             onChange: (e) => handleChange(e.target.value),
             onBlur: handleBlur,
-            onKeyDown: (e) => handleKeyDown(e, index),
             disabled: isDisabled,
             required,
             className: "radio-input",
             "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
           }
-        ),
-        /* @__PURE__ */ React7__namespace.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React7__namespace.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7__namespace.createElement(
-          "span",
-          {
-            className: "radio-description",
-            id: `${radioId}-description`
-          },
-          option.description
         ))
       );
     }))