@saas-ui/forms 2.6.3 → 2.6.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @saas-ui/forms
 
+## 2.6.4
+
+### Patch Changes
+
+- 4c03ddb: Added support for horizontal form fields
+  - @saas-ui/core@2.5.3
+
 ## 2.6.3
 
 ### Patch Changes
@@ -1203,12 +1210,12 @@
   Add this somewhere in the root of your project.
 
   ```ts
-  import { Form } from '@saas-ui/react'
-  import { yupResolver, yupFieldResolver } from '@saas-ui/forms/yup' // yupResolver is exported from here as well for convenience.
-  import { AnyObjectSchema } from 'yup'
+  import { Form } from "@saas-ui/react";
+  import { yupResolver, yupFieldResolver } from "@saas-ui/forms/yup"; // yupResolver is exported from here as well for convenience.
+  import { AnyObjectSchema } from "yup";
 
-  Form.getResolver = (schema: AnyObjectSchema) => yupResolver(schema) // @hookform/resolvers
-  Form.getFieldResolver = (schema: AnyObjectSchema) => yupFieldResolver(schema) // AutoForm field resolver
+  Form.getResolver = (schema: AnyObjectSchema) => yupResolver(schema); // @hookform/resolvers
+  Form.getFieldResolver = (schema: AnyObjectSchema) => yupFieldResolver(schema); // AutoForm field resolver
   ```
 
 - 9391c44: Fixed peer dependency issues.

package/dist/index.d.mts

@@ -491,6 +491,10 @@ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName e
      * The input placeholder
      */
     placeholder?: string;
+    /**
+     * Whether the label is positioned vertically or horizontally
+     */
+    direction?: 'row' | 'column';
 }
 type GetBaseField<TProps extends object = object> = () => {
     extraProps: string[];
@@ -871,7 +875,7 @@ type InputRightButtonProps = ButtonProps;
 declare const InputRightButton: _chakra_ui_react.ComponentWithAs<"div", ButtonProps>;
 
 declare const useBaseField: (props: BaseFieldProps) => {
-    controlProps: Pick<BaseFieldProps<react_hook_form.FieldValues, string>, "id" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly">;
+    controlProps: Pick<BaseFieldProps<react_hook_form.FieldValues, string>, "id" | "direction" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly">;
     error: any;
     touched: any;
     name: string;

package/dist/index.d.ts

@@ -491,6 +491,10 @@ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName e
      * The input placeholder
      */
     placeholder?: string;
+    /**
+     * Whether the label is positioned vertically or horizontally
+     */
+    direction?: 'row' | 'column';
 }
 type GetBaseField<TProps extends object = object> = () => {
     extraProps: string[];
@@ -871,7 +875,7 @@ type InputRightButtonProps = ButtonProps;
 declare const InputRightButton: _chakra_ui_react.ComponentWithAs<"div", ButtonProps>;
 
 declare const useBaseField: (props: BaseFieldProps) => {
-    controlProps: Pick<BaseFieldProps<react_hook_form.FieldValues, string>, "id" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly">;
+    controlProps: Pick<BaseFieldProps<react_hook_form.FieldValues, string>, "id" | "direction" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly">;
     error: any;
     touched: any;
     name: string;

package/dist/index.js

@@ -561,6 +561,7 @@ var useBaseField = (props) => {
   const [fieldProps] = (0, import_core3.splitProps)(props, ["name", "label", "help", "hideLabel"]);
   const [controlProps] = (0, import_core3.splitProps)(props, [
     "id",
+    "direction",
     "isDisabled",
     "isInvalid",
     "isReadOnly",
@@ -579,14 +580,23 @@ var useBaseField = (props) => {
 var BaseField = (props) => {
   const { controlProps, label, help, hideLabel, error } = useBaseField(props);
   const isInvalid = !!error || controlProps.isInvalid;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.FormControl, { ...controlProps, isInvalid, children: [
-    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormLabel, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.Box, { children: [
-      props.children,
-      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormHelperText, { children: help }) : null,
-      (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormErrorMessage, { children: error == null ? void 0 : error.message })
-    ] })
-  ] });
+  const { direction, ...rest } = controlProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react12.FormControl,
+    {
+      ...rest,
+      isInvalid,
+      variant: direction === "row" ? "horizontal" : void 0,
+      children: [
+        label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormLabel, { children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.Box, { children: [
+          props.children,
+          help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormHelperText, { children: help }) : null,
+          (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormErrorMessage, { children: error == null ? void 0 : error.message })
+        ] })
+      ]
+    }
+  );
 };
 BaseField.displayName = "BaseField";