@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +53 -6
  3. package/dist/ajv/index.d.ts +358 -11
  4. package/dist/ajv/index.js +7 -9
  5. package/dist/ajv/index.js.map +1 -1
  6. package/dist/ajv/index.mjs +7 -10
  7. package/dist/ajv/index.mjs.map +1 -1
  8. package/dist/index.d.ts +448 -247
  9. package/dist/index.js +707 -682
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +691 -666
  12. package/dist/index.mjs.map +1 -1
  13. package/dist/yup/index.d.ts +580 -21
  14. package/dist/yup/index.js +6 -10
  15. package/dist/yup/index.js.map +1 -1
  16. package/dist/yup/index.mjs +4 -8
  17. package/dist/yup/index.mjs.map +1 -1
  18. package/dist/zod/index.d.ts +580 -11
  19. package/dist/zod/index.js +5 -0
  20. package/dist/zod/index.js.map +1 -1
  21. package/dist/zod/index.mjs +5 -1
  22. package/dist/zod/index.mjs.map +1 -1
  23. package/package.json +19 -10
  24. package/src/array-field.tsx +82 -45
  25. package/src/auto-form.tsx +7 -3
  26. package/src/base-field.tsx +54 -0
  27. package/src/create-field.tsx +144 -0
  28. package/src/create-form.tsx +54 -0
  29. package/src/default-fields.tsx +163 -0
  30. package/src/display-field.tsx +9 -11
  31. package/src/display-if.tsx +20 -13
  32. package/src/field-resolver.ts +10 -8
  33. package/src/field.tsx +18 -445
  34. package/src/fields-context.tsx +23 -0
  35. package/src/fields.tsx +34 -21
  36. package/src/form-context.tsx +84 -0
  37. package/src/form.tsx +69 -52
  38. package/src/index.ts +44 -4
  39. package/src/input-right-button/input-right-button.stories.tsx +1 -1
  40. package/src/input-right-button/input-right-button.tsx +0 -2
  41. package/src/layout.tsx +16 -11
  42. package/src/number-input/number-input.tsx +9 -5
  43. package/src/object-field.tsx +13 -8
  44. package/src/password-input/password-input.stories.tsx +23 -2
  45. package/src/password-input/password-input.tsx +6 -6
  46. package/src/pin-input/pin-input.tsx +1 -5
  47. package/src/radio/radio-input.stories.tsx +1 -1
  48. package/src/radio/radio-input.tsx +12 -10
  49. package/src/select/native-select.tsx +1 -4
  50. package/src/select/select-context.tsx +130 -0
  51. package/src/select/select.stories.tsx +116 -85
  52. package/src/select/select.test.tsx +1 -1
  53. package/src/select/select.tsx +160 -146
  54. package/src/step-form.tsx +29 -11
  55. package/src/submit-button.tsx +5 -1
  56. package/src/types.ts +144 -0
  57. package/src/use-array-field.tsx +9 -3
  58. package/src/utils.ts +23 -1
  59. package/src/watch-field.tsx +2 -6
  60. /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/src/form.tsx CHANGED
@@ -1,11 +1,10 @@
1
1
  import * as React from 'react'
2
2
 
3
3
  import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
4
- import { cx, runIfFn, __DEV__ } from '@chakra-ui/utils'
4
+ import { cx, runIfFn } from '@chakra-ui/utils'
5
5
 
6
6
  import {
7
7
  useForm,
8
- FormProvider,
9
8
  UseFormProps,
10
9
  UseFormReturn,
11
10
  FieldValues,
@@ -15,27 +14,41 @@ import {
15
14
  ResolverResult,
16
15
  WatchObserver,
17
16
  } from 'react-hook-form'
18
- import { objectFieldResolver, FieldResolver } from './field-resolver'
17
+ import { FormProvider } from './form-context'
18
+ import { FieldResolver } from './field-resolver'
19
19
  import { MaybeRenderProp } from '@chakra-ui/react-utils'
20
20
 
21
21
  export type { UseFormReturn, FieldValues, SubmitHandler }
22
22
 
23
- import { Field as DefaultField, FieldProps } from './field'
23
+ import { FieldProps, DefaultFieldOverrides } from './types'
24
24
 
25
- interface FormRenderContext<
25
+ import { Field as DefaultField } from './field'
26
+ import { FormLayout } from './layout'
27
+ import { AutoFields } from './fields'
28
+ import { SubmitButton } from './submit-button'
29
+ import { DisplayIf, DisplayIfProps } from './display-if'
30
+ import { ArrayField, ArrayFieldProps } from './array-field'
31
+ import { ObjectField, ObjectFieldProps } from './object-field'
32
+
33
+ export interface FormRenderContext<
26
34
  TFieldValues extends FieldValues = FieldValues,
27
- TContext extends object = object
35
+ TContext extends object = object,
36
+ TFieldTypes = FieldProps<TFieldValues>
28
37
  > extends UseFormReturn<TFieldValues, TContext> {
29
- Field: React.FC<FieldProps<TFieldValues>>
38
+ Field: React.FC<TFieldTypes>
39
+ DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
40
+ ArrayField: React.FC<ArrayFieldProps<TFieldValues>>
41
+ ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
30
42
  }
31
43
 
32
44
  interface FormOptions<
33
45
  TFieldValues extends FieldValues = FieldValues,
34
46
  TContext extends object = object,
35
- TSchema = any
47
+ TSchema = any,
48
+ TFieldTypes = FieldProps<TFieldValues>
36
49
  > {
37
50
  /**
38
- * The form schema, supports Yup, Zod, and AJV.
51
+ * The form schema.
39
52
  */
40
53
  schema?: TSchema
41
54
  /**
@@ -57,32 +70,51 @@ interface FormOptions<
57
70
  /**
58
71
  * The form children, can be a render prop or a ReactNode.
59
72
  */
60
- children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>
73
+ children?: MaybeRenderProp<
74
+ FormRenderContext<TFieldValues, TContext, TFieldTypes>
75
+ >
76
+ /**
77
+ * The field resolver, used to resolve the fields from schemas.
78
+ */
79
+ fieldResolver?: FieldResolver
80
+ /**
81
+ * Field overrides
82
+ */
83
+ fields?: DefaultFieldOverrides
61
84
  }
62
85
 
63
86
  export interface FormProps<
64
87
  TFieldValues extends FieldValues = FieldValues,
65
88
  TContext extends object = object,
66
- TSchema = any
89
+ TSchema = any,
90
+ TFieldTypes = FieldProps<TFieldValues>
67
91
  > extends UseFormProps<TFieldValues, TContext>,
68
92
  Omit<
69
93
  HTMLChakraProps<'form'>,
70
94
  'children' | 'onChange' | 'onSubmit' | 'onError'
71
95
  >,
72
- FormOptions<TFieldValues, TContext, TSchema> {}
96
+ FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {}
73
97
 
98
+ /**
99
+ * The wrapper component provides context, state, and focus management.
100
+ *
101
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
102
+ */
74
103
  export const Form = forwardRef(
75
104
  <
76
105
  TFieldValues extends FieldValues = FieldValues,
77
106
  TContext extends object = object,
78
- TSchema = any
107
+ TSchema = any,
108
+ TFieldTypes = FieldProps<TFieldValues>
79
109
  >(
80
- props: FormProps<TFieldValues, TContext, TSchema>,
110
+ props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
81
111
  ref: React.ForwardedRef<HTMLFormElement>
82
112
  ) => {
83
113
  const {
84
114
  mode = 'all',
85
115
  resolver,
116
+ fieldResolver,
117
+ fields,
86
118
  reValidateMode,
87
119
  shouldFocusError,
88
120
  shouldUnregister,
@@ -117,10 +149,6 @@ export const Form = forwardRef(
117
149
  resetOptions,
118
150
  }
119
151
 
120
- if (schema && !resolver) {
121
- form.resolver = Form.getResolver?.(schema)
122
- }
123
-
124
152
  const methods = useForm<TFieldValues, TContext>(form)
125
153
  const { handleSubmit } = methods
126
154
 
@@ -135,21 +163,34 @@ export const Form = forwardRef(
135
163
  return () => subscription?.unsubscribe()
136
164
  }, [methods, onChange])
137
165
 
138
- const Field: React.FC<FieldProps<TFieldValues>> = React.useMemo(
139
- () => (props) => <DefaultField<TFieldValues> {...props} />,
140
- []
141
- )
166
+ let _children = children
167
+ if (!_children && fieldResolver) {
168
+ _children = (
169
+ <FormLayout>
170
+ <AutoFields />
171
+ <SubmitButton {...fields?.submit} />
172
+ </FormLayout>
173
+ )
174
+ }
142
175
 
143
176
  return (
144
- <FormProvider {...methods}>
177
+ <FormProvider
178
+ {...methods}
179
+ schema={schema}
180
+ fieldResolver={fieldResolver}
181
+ fields={fields}
182
+ >
145
183
  <chakra.form
146
184
  ref={ref}
147
185
  onSubmit={handleSubmit(onSubmit, onError)}
148
186
  {...rest}
149
187
  className={cx('sui-form', props.className)}
150
188
  >
151
- {runIfFn(children, {
152
- Field,
189
+ {runIfFn(_children, {
190
+ Field: DefaultField as any,
191
+ DisplayIf: DisplayIf,
192
+ ArrayField: ArrayField as any,
193
+ ObjectField: ObjectField as any,
153
194
  ...methods,
154
195
  })}
155
196
  </chakra.form>
@@ -159,19 +200,16 @@ export const Form = forwardRef(
159
200
  ) as (<
160
201
  TFieldValues extends FieldValues,
161
202
  TContext extends object = object,
162
- TSchema = any
203
+ TSchema = any,
204
+ TFieldTypes = FieldProps<TFieldValues>
163
205
  >(
164
- props: FormProps<TFieldValues, TContext, TSchema> & {
206
+ props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
165
207
  ref?: React.ForwardedRef<HTMLFormElement>
166
208
  }
167
209
  ) => React.ReactElement) & {
168
210
  displayName?: string
169
- getResolver?: GetResolver
170
- getFieldResolver: GetFieldResolver
171
211
  }
172
212
 
173
- Form.getFieldResolver = objectFieldResolver
174
-
175
213
  Form.displayName = 'Form'
176
214
 
177
215
  export type GetResolver = <
@@ -184,24 +222,3 @@ export type GetResolver = <
184
222
  context: TContext | undefined,
185
223
  options: ResolverOptions<TFieldValues>
186
224
  ) => Promise<ResolverResult<TFieldValues>>
187
-
188
- export type GetFieldResolver = (schema: any) => FieldResolver
189
-
190
- export interface CreateFormProps {
191
- resolver?: GetResolver
192
- }
193
-
194
- export function createForm<Schema = any>({ resolver }: CreateFormProps) {
195
- const CreateForm = <
196
- TFieldValues extends FieldValues,
197
- TContext extends object = object,
198
- TSchema extends Schema = Schema
199
- >(
200
- props: FormProps<TFieldValues, TContext, TSchema>
201
- ) => {
202
- const { schema, ...rest } = props
203
- return <Form resolver={resolver?.(props.schema)} {...rest} />
204
- }
205
-
206
- return CreateForm
207
- }
package/src/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  export * from './display-field'
2
2
  export * from './field'
3
3
  export * from './fields'
4
- export * from './form'
5
- export * from './auto-form'
4
+ export * from './fields-context'
5
+ // export * from './auto-form'
6
6
  export * from './layout'
7
7
  export * from './submit-button'
8
8
  export * from './array-field'
@@ -16,6 +16,48 @@ export * from './watch-field'
16
16
  export * from './input-right-button'
17
17
  export * from './select'
18
18
  export * from './password-input'
19
+ export * from './radio'
20
+
21
+ export * from './base-field'
22
+
23
+ export {
24
+ CheckboxField,
25
+ InputField,
26
+ NativeSelectField,
27
+ NumberInputField,
28
+ PasswordInputField,
29
+ PinField,
30
+ RadioField,
31
+ SelectField,
32
+ SwitchField,
33
+ TextareaField,
34
+ defaultFieldTypes,
35
+ type DefaultFields,
36
+ type InputFieldProps,
37
+ type NumberInputFieldProps,
38
+ type PinFieldProps,
39
+ } from './default-fields'
40
+
41
+ export type {
42
+ FieldProps,
43
+ WithFields,
44
+ BaseFieldProps,
45
+ FieldOptions,
46
+ } from './types'
47
+
48
+ export { createForm, type CreateFormProps } from './create-form'
49
+ export { createField, type CreateFieldOptions } from './create-field'
50
+
51
+ export {
52
+ Form as BaseForm,
53
+ type FormProps,
54
+ type FormRenderContext,
55
+ } from './form'
56
+
57
+ export { FormProvider, useFormContext } from './form-context'
58
+
59
+ import { createForm } from './create-form'
60
+ export const Form = createForm()
19
61
 
20
62
  export type {
21
63
  BatchFieldArrayUpdate,
@@ -120,9 +162,7 @@ export {
120
162
  useController,
121
163
  useFieldArray,
122
164
  useForm,
123
- useFormContext,
124
165
  useFormState,
125
166
  useWatch,
126
167
  Controller,
127
- FormProvider,
128
168
  } from 'react-hook-form'
@@ -37,7 +37,7 @@ const Template: ComponentStory<typeof InputRightButton> = (args) => (
37
37
 
38
38
  export const Basic = Template.bind({})
39
39
  Basic.args = {
40
- label: 'Save',
40
+ children: 'Save',
41
41
  }
42
42
 
43
43
  export const WithIcon = Template.bind({})
@@ -7,8 +7,6 @@ import {
7
7
  InputRightElement,
8
8
  } from '@chakra-ui/react'
9
9
 
10
- import { __DEV__ } from '@chakra-ui/utils'
11
-
12
10
  export type InputRightButtonProps = ButtonProps
13
11
 
14
12
  export const InputRightButton = forwardRef<InputRightButtonProps, 'div'>(
package/src/layout.tsx CHANGED
@@ -1,9 +1,15 @@
1
1
  import * as React from 'react'
2
2
 
3
- import { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'
4
- import { cx, __DEV__ } from '@chakra-ui/utils'
3
+ import {
4
+ chakra,
5
+ ResponsiveValue,
6
+ SimpleGrid,
7
+ SimpleGridProps,
8
+ useTheme,
9
+ } from '@chakra-ui/react'
10
+ import { cx } from '@chakra-ui/utils'
5
11
 
6
- export type FormLayoutProps = SimpleGridProps
12
+ export interface FormLayoutProps extends SimpleGridProps {}
7
13
 
8
14
  interface FormLayoutItemProps {
9
15
  children: React.ReactNode
@@ -13,20 +19,21 @@ const FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {
13
19
  return <chakra.div>{children}</chakra.div>
14
20
  }
15
21
 
16
- if (__DEV__) {
17
- FormLayoutItem.displayName = 'FormLayoutItem'
18
- }
22
+ FormLayoutItem.displayName = 'FormLayoutItem'
19
23
 
20
24
  /**
21
- * FormLayout
25
+ * Create consistent field spacing and positioning.
26
+ *
22
27
  *
23
28
  * Renders form items in a `SimpleGrid`
24
29
  * @see https://chakra-ui.com/docs/layout/simple-grid
30
+ *
31
+ * @see https://saas-ui.dev/docs/components/forms/form
25
32
  */
26
33
  export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
27
34
  const theme = useTheme()
28
35
 
29
- const defaultProps = theme.components?.FormLayout?.defaultProps ?? {
36
+ const defaultProps = theme.components?.SuiFormLayout?.defaultProps ?? {
30
37
  spacing: 4,
31
38
  }
32
39
 
@@ -50,6 +57,4 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
50
57
  )
51
58
  }
52
59
 
53
- if (__DEV__) {
54
- FormLayout.displayName = 'FormLayout'
55
- }
60
+ FormLayout.displayName = 'FormLayout'
@@ -9,7 +9,8 @@ import {
9
9
  NumberDecrementStepper,
10
10
  NumberInputProps as ChakraNumberInputProps,
11
11
  } from '@chakra-ui/react'
12
- import { __DEV__ } from '@chakra-ui/utils'
12
+
13
+ import { ChevronDownIcon, ChevronUpIcon } from '@saas-ui/core'
13
14
 
14
15
  interface NumberInputOptions {
15
16
  /**
@@ -31,7 +32,12 @@ export interface NumberInputProps
31
32
  NumberInputOptions {}
32
33
 
33
34
  export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
34
- const { hideStepper, incrementIcon, decrementIcon, ...rest } = props
35
+ const {
36
+ hideStepper,
37
+ incrementIcon = <ChevronUpIcon />,
38
+ decrementIcon = <ChevronDownIcon />,
39
+ ...rest
40
+ } = props
35
41
 
36
42
  return (
37
43
  <ChakraNumberInput {...rest} ref={ref}>
@@ -51,6 +57,4 @@ NumberInput.defaultProps = {
51
57
  hideStepper: false,
52
58
  }
53
59
 
54
- if (__DEV__) {
55
- NumberInput.displayName = 'NumberInput'
56
- }
60
+ NumberInput.displayName = 'NumberInput'
@@ -6,15 +6,18 @@ import {
6
6
  ResponsiveValue,
7
7
  useStyleConfig,
8
8
  } from '@chakra-ui/react'
9
- import { __DEV__ } from '@chakra-ui/utils'
10
9
 
11
10
  import { FormLayout } from './layout'
12
- import { FieldProps } from './field'
11
+ import { BaseFieldProps } from './types'
13
12
 
14
13
  import { mapNestedFields } from './utils'
14
+ import { FieldPath, FieldValues } from 'react-hook-form'
15
15
 
16
- export interface ObjectFieldProps extends FieldProps {
17
- name: string
16
+ export interface ObjectFieldProps<
17
+ TFieldValues extends FieldValues = FieldValues,
18
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
19
+ > extends BaseFieldProps {
20
+ name: TName
18
21
  children: React.ReactNode
19
22
  columns?: ResponsiveValue<number>
20
23
  spacing?: ResponsiveValue<string | number>
@@ -24,7 +27,11 @@ export const FormLegend = (props: FormLabelProps) => {
24
27
  const styles = useStyleConfig('SuiFormLegend')
25
28
  return <FormLabel as="legend" sx={styles} {...props} />
26
29
  }
27
-
30
+ /**
31
+ * The object field component.
32
+ *
33
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
34
+ */
28
35
  export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
29
36
  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } =
30
37
  props
@@ -39,6 +46,4 @@ export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
39
46
  )
40
47
  }
41
48
 
42
- if (__DEV__) {
43
- ObjectField.displayName = 'ObjectField'
44
- }
49
+ ObjectField.displayName = 'ObjectField'
@@ -1,8 +1,15 @@
1
- import { Container, FormControl, FormLabel, Icon } from '@chakra-ui/react'
1
+ import {
2
+ Container,
3
+ FormControl,
4
+ FormLabel,
5
+ Icon,
6
+ InputLeftAddon,
7
+ InputLeftElement,
8
+ } from '@chakra-ui/react'
2
9
  import { Story } from '@storybook/react'
3
10
  import * as React from 'react'
4
11
 
5
- import { FiEye, FiEyeOff } from 'react-icons/fi'
12
+ import { FiEye, FiEyeOff, FiLock } from 'react-icons/fi'
6
13
 
7
14
  import { PasswordInput } from './password-input'
8
15
 
@@ -48,3 +55,17 @@ export const CustomWidth: Story = () => (
48
55
  <PasswordInput name="password" width="200px" />
49
56
  </FormControl>
50
57
  )
58
+
59
+ export const LeftAddon: Story = () => (
60
+ <FormControl>
61
+ <FormLabel>Password</FormLabel>
62
+ <PasswordInput
63
+ name="password"
64
+ leftAddon={
65
+ <InputLeftElement>
66
+ <FiLock />
67
+ </InputLeftElement>
68
+ }
69
+ />
70
+ </FormControl>
71
+ )
@@ -1,14 +1,15 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
3
  import { forwardRef, InputGroup, Input, InputProps } from '@chakra-ui/react'
4
- import { __DEV__ } from '@chakra-ui/utils'
5
- import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
4
+
5
+ import { ViewIcon, ViewOffIcon } from '@saas-ui/core/icons'
6
6
 
7
7
  import { InputRightButton } from '../input-right-button'
8
8
 
9
9
  interface PasswordOptions {
10
10
  viewIcon?: React.ReactNode
11
11
  viewOffIcon?: React.ReactNode
12
+ leftAddon?: React.ReactNode
12
13
  }
13
14
 
14
15
  export interface PasswordInputProps extends InputProps, PasswordOptions {}
@@ -23,6 +24,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
23
24
  width,
24
25
  size,
25
26
  variant,
27
+ leftAddon,
26
28
  ...inputProps
27
29
  } = props
28
30
  const [show, setShow] = useState(false)
@@ -45,13 +47,13 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
45
47
 
46
48
  return (
47
49
  <InputGroup {...groupProps}>
50
+ {leftAddon}
48
51
  <Input
49
52
  {...inputProps}
50
53
  ref={ref}
51
54
  type={show ? 'text' : 'password'}
52
55
  autoComplete={show ? 'off' : autoComplete}
53
56
  />
54
-
55
57
  <InputRightButton
56
58
  onClick={handleClick}
57
59
  aria-label={label}
@@ -64,6 +66,4 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
64
66
  }
65
67
  )
66
68
 
67
- if (__DEV__) {
68
- PasswordInput.displayName = 'PasswordInput'
69
- }
69
+ PasswordInput.displayName = 'PasswordInput'
@@ -8,8 +8,6 @@ import {
8
8
  SystemProps,
9
9
  } from '@chakra-ui/react'
10
10
 
11
- import { __DEV__ } from '@chakra-ui/utils'
12
-
13
11
  interface PinInputOptions {
14
12
  /**
15
13
  * The pin length.
@@ -45,6 +43,4 @@ PinInput.defaultProps = {
45
43
  pinLength: 4,
46
44
  }
47
45
 
48
- if (__DEV__) {
49
- PinInput.displayName = 'PinInput'
50
- }
46
+ PinInput.displayName = 'PinInput'
@@ -6,7 +6,7 @@ import { ComponentStory } from '@storybook/react'
6
6
  import { RadioInput } from './'
7
7
 
8
8
  export default {
9
- title: 'Components/Forms/Radio',
9
+ title: 'Components/Forms/RadioInput',
10
10
  decorators: [
11
11
  (Story: any) => (
12
12
  <Container mt="40px">
@@ -10,15 +10,17 @@ import {
10
10
  SystemProps,
11
11
  StackDirection,
12
12
  } from '@chakra-ui/react'
13
- import { __DEV__ } from '@chakra-ui/utils'
13
+ import { FieldOptions, FieldOption } from '../types'
14
+ import { mapOptions } from '../utils'
14
15
 
15
- interface Option extends RadioProps {
16
- value: string
17
- label?: string
18
- }
16
+ export interface RadioOption
17
+ extends Omit<RadioProps, 'value' | 'label'>,
18
+ FieldOption {}
19
+
20
+ export type RadioOptions = FieldOptions<RadioOption>
19
21
 
20
22
  interface RadioInputOptions {
21
- options: Option[]
23
+ options: RadioOptions
22
24
  spacing?: SystemProps['margin']
23
25
  direction?: StackDirection
24
26
  }
@@ -28,9 +30,11 @@ export interface RadioInputProps
28
30
  RadioInputOptions {}
29
31
 
30
32
  export const RadioInput = forwardRef<RadioInputProps, 'div'>(
31
- ({ options, spacing, direction, ...props }, ref) => {
33
+ ({ options: optionsProp, spacing, direction, ...props }, ref) => {
32
34
  const { onBlur, onChange, ...groupProps } = props
33
35
 
36
+ const options = mapOptions(optionsProp)
37
+
34
38
  return (
35
39
  <RadioGroup onChange={onChange} {...groupProps}>
36
40
  <Stack spacing={spacing} direction={direction}>
@@ -53,6 +57,4 @@ export const RadioInput = forwardRef<RadioInputProps, 'div'>(
53
57
  }
54
58
  )
55
59
 
56
- if (__DEV__) {
57
- RadioInput.displayName = 'RadioInput'
58
- }
60
+ RadioInput.displayName = 'RadioInput'
@@ -5,7 +5,6 @@ import {
5
5
  Select as ChakraSelect,
6
6
  SelectProps as ChakraSelectProps,
7
7
  } from '@chakra-ui/react'
8
- import { __DEV__ } from '@chakra-ui/utils'
9
8
 
10
9
  interface Option {
11
10
  value: string
@@ -37,6 +36,4 @@ export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
37
36
  }
38
37
  )
39
38
 
40
- if (__DEV__) {
41
- NativeSelect.displayName = 'NativeSelect'
42
- }
39
+ NativeSelect.displayName = 'NativeSelect'