@saas-ui/forms 2.6.3 → 2.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -104,7 +104,7 @@
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.0.15",
     "@hookform/resolvers": "^3.3.4",
-    "@saas-ui/core": "2.5.2",
+    "@saas-ui/core": "2.5.3",
     "react-hook-form": "^7.50.1"
   },
   "peerDependencies": {

package/src/base-field.tsx

@@ -7,6 +7,7 @@ import {
   FormLabel,
   FormHelperText,
   FormErrorMessage,
+  useBreakpointValue,
 } from '@chakra-ui/react'
 
 import { splitProps } from '@saas-ui/core'
@@ -31,6 +32,7 @@ export const useBaseField = (props: BaseFieldProps) => {
 
   const [controlProps] = splitProps(props, [
     'id',
+    'direction',
     'isDisabled',
     'isInvalid',
     'isReadOnly',
@@ -59,8 +61,14 @@ export const BaseField: React.FC<BaseFieldProps> = (props) => {
 
   const isInvalid = !!error || controlProps.isInvalid
 
+  const { direction, ...rest } = controlProps
+
   return (
-    <FormControl {...controlProps} isInvalid={isInvalid}>
+    <FormControl
+      {...rest}
+      isInvalid={isInvalid}
+      variant={direction === 'row' ? 'horizontal' : undefined}
+    >
       {label && !hideLabel ? <FormLabel>{label}</FormLabel> : null}
       <Box>
         {props.children}

package/src/types.ts

@@ -77,6 +77,10 @@ export interface BaseFieldProps<
    * The input placeholder
    */
   placeholder?: string
+  /**
+   * Whether the label is positioned vertically or horizontally
+   */
+  direction?: 'row' | 'column'
 }
 
 export type GetBaseField<TProps extends object = object> = () => {