@ttoss/forms 0.9.1 → 0.11.0

package/dist/esm/index.js

@@ -61,7 +61,8 @@ import { useController } from "react-hook-form";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormFieldCheckbox = ({
   label,
-  name
+  name,
+  disabled
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
@@ -78,11 +79,13 @@ var FormFieldCheckbox = ({
           /* @__PURE__ */ jsx3(Checkbox, {
             id,
             ref,
+            disabled,
             checked: value,
             onChange,
             onBlur
           }),
           label && /* @__PURE__ */ jsx3(Label, {
+            "aria-disabled": disabled,
             htmlFor: id,
             children: label
           })
@@ -101,7 +104,9 @@ import { useController as useController2 } from "react-hook-form";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
-  name
+  name,
+  disabled,
+  placeholder
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
@@ -113,6 +118,7 @@ var FormFieldInput = ({
   return /* @__PURE__ */ jsxs2(Box3, {
     children: [
       label && /* @__PURE__ */ jsx4(Label2, {
+        "aria-disabled": disabled,
         htmlFor: id,
         children: label
       }),
@@ -122,6 +128,8 @@ var FormFieldInput = ({
         onBlur,
         value,
         name,
+        disabled,
+        placeholder,
         id
       }),
       /* @__PURE__ */ jsx4(ErrorMessage, {

package/dist/index.d.ts

@@ -20,9 +20,11 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
  */
 declare const FormField: {
     (): null;
-    Input: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, }: {
+    Input: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, disabled, placeholder, }: {
         label?: string | undefined;
         name: react_hook_form.Path<TFieldValues>;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
     }) => JSX.Element;
     Radio: <TFieldValues_1 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, options, }: {
         label?: string | undefined;
@@ -43,20 +45,24 @@ declare const FormField: {
         }[];
         arrow?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     }) => JSX.Element;
-    Checkbox: <TFieldValues_3 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, }: {
+    Checkbox: <TFieldValues_3 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, disabled, }: {
         label?: string | undefined;
         name: react_hook_form.Path<TFieldValues_3>;
+        disabled?: boolean | undefined;
     }) => JSX.Element;
 };
 
-declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, }: {
+declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, disabled, }: {
     label?: string | undefined;
     name: Path<TFieldValues>;
+    disabled?: boolean | undefined;
 }) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues>({ label, name, }: {
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues>({ label, name, disabled, placeholder, }: {
     label?: string | undefined;
     name: Path<TFieldValues>;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
 }) => JSX.Element;
 
 declare type FormRadioOption$1 = {

package/dist/index.js

@@ -100,7 +100,8 @@ var import_react_hook_form3 = require("react-hook-form");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var FormFieldCheckbox = ({
   label,
-  name
+  name,
+  disabled
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
@@ -117,11 +118,13 @@ var FormFieldCheckbox = ({
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Checkbox, {
             id,
             ref,
+            disabled,
             checked: value,
             onChange,
             onBlur
           }),
           label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, {
+            "aria-disabled": disabled,
             htmlFor: id,
             children: label
           })
@@ -140,7 +143,9 @@ var import_react_hook_form4 = require("react-hook-form");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
-  name
+  name,
+  disabled,
+  placeholder
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
@@ -152,6 +157,7 @@ var FormFieldInput = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
     children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, {
+        "aria-disabled": disabled,
         htmlFor: id,
         children: label
       }),
@@ -161,6 +167,8 @@ var FormFieldInput = ({
         onBlur,
         value,
         name,
+        disabled,
+        placeholder,
         id
       }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -30,8 +30,8 @@
   "devDependencies": {
     "@ttoss/config": "^1.21.0",
     "@ttoss/test-utils": "^1.18.1",
-    "@ttoss/ui": "^1.25.1",
-    "@types/jest": "^29.2.3",
+    "@ttoss/ui": "^1.26.0",
+    "@types/jest": "^29.2.4",
     "jest": "^29.3.1",
     "react": "^18.2.0",
     "react-hook-form": "^7.39.7",
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e7bef1331103e477af72cbd5c27a5c3deab92dd1"
+  "gitHead": "770c9a378b57b46158e533b505d53747f1b27a07"
 }

package/src/FormFieldCheckbox.tsx

@@ -7,9 +7,11 @@ export const FormFieldCheckbox = <
 >({
   label,
   name,
+  disabled,
 }: {
   label?: string;
   name: Path<TFieldValues>;
+  disabled?: boolean;
 }) => {
   const {
     field: { onChange, onBlur, value, ref },
@@ -26,11 +28,16 @@ export const FormFieldCheckbox = <
         <Checkbox
           id={id}
           ref={ref}
+          disabled={disabled}
           checked={value}
           onChange={onChange}
           onBlur={onBlur}
         />
-        {label && <Label htmlFor={id}>{label}</Label>}
+        {label && (
+          <Label aria-disabled={disabled} htmlFor={id}>
+            {label}
+          </Label>
+        )}
       </Flex>
       <ErrorMessage name={name} />
     </Box>

package/src/FormFieldInput.tsx

@@ -5,9 +5,13 @@ import { FieldValues, Path, useController } from 'react-hook-form';
 export const FormFieldInput = <TFieldValues extends FieldValues = FieldValues>({
   label,
   name,
+  disabled,
+  placeholder,
 }: {
   label?: string;
   name: Path<TFieldValues>;
+  disabled?: boolean;
+  placeholder?: string;
 }) => {
   const {
     field: { onChange, onBlur, value, ref },
@@ -20,13 +24,19 @@ export const FormFieldInput = <TFieldValues extends FieldValues = FieldValues>({
 
   return (
     <Box>
-      {label && <Label htmlFor={id}>{label}</Label>}
+      {label && (
+        <Label aria-disabled={disabled} htmlFor={id}>
+          {label}
+        </Label>
+      )}
       <Input
         ref={ref}
         onChange={onChange}
         onBlur={onBlur}
         value={value}
         name={name}
+        disabled={disabled}
+        placeholder={placeholder}
         id={id}
       />
       <ErrorMessage name={name} />