@ttoss/forms 0.9.0 → 0.10.0

package/dist/esm/index.js

@@ -3,6 +3,11 @@
 // tsup.inject.js
 import * as React from "react";
 
+// src/index.ts
+import { yupResolver } from "@hookform/resolvers/yup";
+export * from "react-hook-form";
+import * as yup from "yup";
+
 // src/Form.tsx
 import { Box } from "@ttoss/ui";
 import { FormProvider } from "react-hook-form";
@@ -56,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 }
@@ -73,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
           })
@@ -96,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 }
@@ -108,6 +118,7 @@ var FormFieldInput = ({
   return /* @__PURE__ */ jsxs2(Box3, {
     children: [
       label && /* @__PURE__ */ jsx4(Label2, {
+        "aria-disabled": disabled,
         htmlFor: id,
         children: label
       }),
@@ -117,6 +128,8 @@ var FormFieldInput = ({
         onBlur,
         value,
         name,
+        disabled,
+        placeholder,
         id
       }),
       /* @__PURE__ */ jsx4(ErrorMessage, {
@@ -226,14 +239,13 @@ FormField.Input = FormFieldInput;
 FormField.Radio = FormFieldRadio;
 FormField.Select = FormFieldSelect;
 FormField.Checkbox = FormFieldCheckbox;
-
-// src/index.ts
-import { yupResolver } from "@hookform/resolvers/yup";
-export * from "react-hook-form";
-import * as yup from "yup";
 export {
   Form,
   FormField,
+  FormFieldCheckbox,
+  FormFieldInput,
+  FormFieldRadio,
+  FormFieldSelect,
   yup,
   yupResolver
 };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
+export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues, Path } from 'react-hook-form';
 export * from 'react-hook-form';
-import * as React from 'react';
-import { BoxProps } from '@ttoss/ui';
-export { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 export { yup };
+import * as React from 'react';
+import { BoxProps, SelectProps } from '@ttoss/ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -15,17 +15,24 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
 
+/**
+ * DEPRECATED: Use `FormFieldInput` instead.
+ */
 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;
         name: react_hook_form.Path<TFieldValues_1>;
         options: {
-            value: string | number;
+            value: string | number; /**
+             * DEPRECATED: Use `FormFieldInput` instead.
+             */
             label: string;
         }[];
     }) => JSX.Element;
@@ -38,10 +45,45 @@ 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;
 };
 
-export { Form, FormField };
+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, disabled, placeholder, }: {
+    label?: string | undefined;
+    name: Path<TFieldValues>;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+}) => JSX.Element;
+
+declare type FormRadioOption$1 = {
+    value: string | number;
+    label: string;
+};
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, }: {
+    label?: string | undefined;
+    name: Path<TFieldValues>;
+    options: FormRadioOption$1[];
+}) => JSX.Element;
+
+declare type FormRadioOption = {
+    value: string | number;
+    label: string;
+};
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, arrow, }: {
+    label?: string | undefined;
+    name: Path<TFieldValues>;
+    options: FormRadioOption[];
+    arrow?: SelectProps['arrow'];
+}) => JSX.Element;
+
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect };

package/dist/index.js

@@ -30,6 +30,10 @@ var src_exports = {};
 __export(src_exports, {
   Form: () => Form,
   FormField: () => FormField,
+  FormFieldCheckbox: () => FormFieldCheckbox,
+  FormFieldInput: () => FormFieldInput,
+  FormFieldRadio: () => FormFieldRadio,
+  FormFieldSelect: () => FormFieldSelect,
   yup: () => yup,
   yupResolver: () => import_yup.yupResolver
 });
@@ -38,6 +42,11 @@ module.exports = __toCommonJS(src_exports);
 // tsup.inject.js
 var React = __toESM(require("react"));
 
+// src/index.ts
+var import_yup = require("@hookform/resolvers/yup");
+__reExport(src_exports, require("react-hook-form"), module.exports);
+var yup = __toESM(require("yup"));
+
 // src/Form.tsx
 var import_ui = require("@ttoss/ui");
 var import_react_hook_form = require("react-hook-form");
@@ -91,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 }
@@ -108,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
           })
@@ -131,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 }
@@ -143,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
       }),
@@ -152,6 +167,8 @@ var FormFieldInput = ({
         onBlur,
         value,
         name,
+        disabled,
+        placeholder,
         id
       }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, {
@@ -261,15 +278,14 @@ FormField.Input = FormFieldInput;
 FormField.Radio = FormFieldRadio;
 FormField.Select = FormFieldSelect;
 FormField.Checkbox = FormFieldCheckbox;
-
-// src/index.ts
-var import_yup = require("@hookform/resolvers/yup");
-__reExport(src_exports, require("react-hook-form"), module.exports);
-var yup = __toESM(require("yup"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Form,
   FormField,
+  FormFieldCheckbox,
+  FormFieldInput,
+  FormFieldRadio,
+  FormFieldSelect,
   yup,
   yupResolver
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7283c8bffc1b432659339927173eee2ad19b622d"
+  "gitHead": "ec2101df23a183e667988b3ca78e3248de7c809b"
 }

package/src/FormField.tsx

@@ -3,6 +3,9 @@ import { FormFieldInput } from './FormFieldInput';
 import { FormFieldRadio } from './FormFieldRadio';
 import { FormFieldSelect } from './FormFieldSelect';
 
+/**
+ * DEPRECATED: Use `FormFieldInput` instead.
+ */
 const FormField = () => {
   // to be implemented
   return null;
@@ -11,7 +14,6 @@ const FormField = () => {
 FormField.Input = FormFieldInput;
 FormField.Radio = FormFieldRadio;
 FormField.Select = FormFieldSelect;
-
 FormField.Checkbox = FormFieldCheckbox;
 
 export { FormField };

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} />

package/src/index.ts

@@ -1,5 +1,10 @@
-export { Form } from './Form';
-export { FormField } from './FormField';
 export { yupResolver } from '@hookform/resolvers/yup';
 export * from 'react-hook-form';
 export * as yup from 'yup';
+
+export { Form } from './Form';
+export { FormField } from './FormField';
+export { FormFieldCheckbox } from './FormFieldCheckbox';
+export { FormFieldInput } from './FormFieldInput';
+export { FormFieldRadio } from './FormFieldRadio';
+export { FormFieldSelect } from './FormFieldSelect';