@mantis-core/ui 0.4.0 → 0.5.0

package/docs/components/hidden-field.md

@@ -1,19 +1,16 @@
-# HiddenField
-
-- Export: `HiddenField`
-- Extra exports: `HiddenFieldProps`
-- Import: `import { HiddenField } from "@mantis-core/ui";`
-- Base library: `react-hook-form`
-- Base typing: `ControllerProps & { hidden?: boolean }`
-- Form contract: [`ControllerProps`](../contracts/controller-props.md)
-- Required styles: none
-
+---
+name: HiddenField
+category: forms
+import: '@mantis-core/ui/components/Forms/HiddenField'
+whenToUse: Registers a hidden value in react-hook-form without rendering any UI.
+baseLibrary: react-hook-form
+formContract: ControllerProps
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+---
 ## Example
 
 ```tsx
-<HiddenField
-  name="tenantId"
-  control={form.control}
-  defaultValue={tenantId}
-/>
+<HiddenField controller={{ name: 'id' }} />
 ```

package/docs/components/index-column.md

@@ -1,13 +1,16 @@
-# IndexColumn
-
-- Export: `IndexColumn`
-- Import: `import { IndexColumn } from "@mantis-core/ui";`
-- Base library: `primereact/column`
-- Base typing: `(props?: ColumnProps) => JSX.Element`
-- Required styles: none beyond table context
-
+---
+name: IndexColumn
+category: tables
+import: '@mantis-core/ui/components/Tables/IndexColumn'
+whenToUse: Returns a PrimeReact Column that renders the row's 1-based visual index; call as IndexColumn(colProps).
+baseLibrary: primereact/column
+relatedComponents: [PaginatedTable]
+relatedNextCore: []
+props:
+  - { name: props, type: ColumnProps, required: false }
+---
 ## Example
 
 ```tsx
-<IndexColumn style={{ width: "4rem" }} />
+{IndexColumn({ style: { width: '50px' } })}
 ```

package/docs/components/line-chart.md

@@ -0,0 +1,21 @@
+---
+name: LineChart
+category: charts
+import: '@mantis-core/ui/components/charts/LineChart'
+whenToUse: Time-series or trend data rendered as a line chart. Zero-config defaults with full options override.
+baseLibrary: custom
+relatedComponents: [BarChart, DonutChart]
+relatedNextCore: []
+props:
+  - { name: labels, type: 'string[]', required: true }
+  - { name: datasets, type: 'LineChartDataset[]', required: true, description: 'Array of ChartDataset<''line''> minus ''data'' field, which is number[]' }
+  - { name: options, type: 'ChartOptions<''line''>', required: false, description: Deep-merged over defaults }
+  - { name: colors, type: 'string[]', required: false, default: DEFAULT_COLORS palette }
+  - { name: height, type: number, required: false, default: '300' }
+  - { name: className, type: string, required: false }
+---
+## Example
+
+```tsx
+<LineChart labels={['Jan','Feb','Mar']} datasets={[{ label: 'Revenue', data: [100,200,150] }]} height={250} />
+```

package/docs/components/loading.md

@@ -1,18 +1,20 @@
-# Loading
-
-- Export: `Loading`
-- Extra exports: `LoadingWrapperProps`
-- Import: `import { Loading } from "@mantis-core/ui";`
-- Base library: custom full-screen overlay
-- Base typing: `PropsWithChildren<{ loading?: boolean; texto?: string; className?: string }>`
-- Required styles: none
-
+---
+name: Loading
+category: feedback
+import: '@mantis-core/ui/components/Loaders/Loading'
+whenToUse: 'Full-screen loading overlay with animated spinner; renders children when loading=false.'
+baseLibrary: custom
+relatedNextCore: []
+props:
+  - { name: loading, type: boolean, required: false, default: 'false' }
+  - { name: texto, type: string, required: false, default: '''Cargando...''' }
+  - { name: className, type: string, required: false }
+  - { name: children, type: ReactNode, required: false }
+---
 ## Example
 
 ```tsx
-<Loading loading={isSubmitting} texto="Saving changes...">
-  <FormScreen />
-</Loading>
+<Loading loading={isLoading}><PageContent /></Loading>
 ```
 
 ## Notes

package/docs/components/login-form.md

@@ -0,0 +1,22 @@
+---
+name: LoginForm
+category: auth
+import: '@mantis-core/ui/components/auth/LoginForm'
+whenToUse: Self-contained login form with email/username + password fields; pass onSubmit to wire signIn/Supabase from the app layer.
+baseLibrary: custom
+relatedNextCore: []
+props:
+  - { name: onSubmit, type: '(values: LoginFormValues) => void | Promise<void>', required: true }
+  - { name: brand, type: ReactNode, required: false }
+  - { name: title, type: string, required: false, default: '"Iniciar sesión"' }
+  - { name: subtitle, type: string, required: false }
+  - { name: footer, type: ReactNode, required: false }
+  - { name: identifierField, type: '''email'' | ''username''', required: false, default: '"email"' }
+  - { name: submitLabel, type: string, required: false, default: '"Ingresar"' }
+  - { name: className, type: string, required: false }
+---
+## Example
+
+```tsx
+<LoginForm onSubmit={async (v) => { await signIn('credentials', { email: v.identifier, password: v.password }); }} brand={<Logo />} />
+```

package/docs/components/map-picker-client.md

@@ -1,20 +1,20 @@
-# MapPickerClient
-
-- Export: `MapPickerClient`
-- Extra exports: `MapPickerClientProps`
-- Import: `import { MapPickerClient } from "@mantis-core/ui";`
-- Base library: `react-leaflet` + `leaflet`
-- Base typing: `{ onLocationSelect: (lat: number, lng: number) => void; initialLat?: number | null; initialLng?: number | null }`
-- Required styles: Leaflet CSS is imported by the component
-
+---
+name: MapPickerClient
+category: maps
+import: '@mantis-core/ui/components/Maps/MapPickerClient'
+whenToUse: Client-only Leaflet map that lets the user click to pick a coordinate; controlled via initialLat/initialLng.
+baseLibrary: react-leaflet
+relatedComponents: [MapPicker]
+relatedNextCore: []
+props:
+  - { name: onLocationSelect, type: '(lat: number, lng: number) => void', required: true, description: 'Callback fired on map click with the selected coordinates' }
+  - { name: initialLat, type: 'number | null', required: false, description: 'Initial latitude for the marker and map center' }
+  - { name: initialLng, type: 'number | null', required: false, description: 'Initial longitude for the marker and map center' }
+---
 ## Example
 
 ```tsx
-<MapPickerClient
-  initialLat={-2.9}
-  initialLng={-79.0}
-  onLocationSelect={(lat, lng) => console.log(lat, lng)}
-/>
+{/* TODO: add example */}
 ```
 
 ## Notes

package/docs/components/map-picker-osm.md

@@ -1,18 +1,20 @@
-# MapPickerOSM
-
-- Export: `MapPickerOSM`
-- Extra exports: `MapPickerOSMProps`, `LatLng`
-- Import: `import { MapPickerOSM } from "@mantis-core/ui";`
-- Base library: Leaflet loaded from CDN
-- Base typing: `{ initialPosition?: LatLng; zoom?: number; height?: string; onChange?: (pos: LatLng) => void; onSave?: (pos: LatLng) => void }`
-- Required styles: no `@mantis-core/styles` partial; Leaflet CSS is injected from CDN
-
+---
+name: MapPickerOSM
+category: maps
+import: '@mantis-core/ui/components/Maps/MapPickerOSM'
+whenToUse: Script-injected Leaflet map (no SSR bundle cost) with click/drag marker and a save-location button.
+baseLibrary: custom
+relatedComponents: [MapPicker]
+relatedNextCore: []
+props:
+  - { name: initialPosition, type: LatLng, required: false, default: '{ lat: -12.0464, lng: -77.0428 }', description: 'Initial marker and center position' }
+  - { name: zoom, type: number, required: false, default: '12', description: 'Initial zoom level' }
+  - { name: height, type: string, required: false, default: '''400px''', description: 'CSS height of the map container' }
+  - { name: onChange, type: '(pos: LatLng) => void', required: false, description: 'Called on every click or marker drag' }
+  - { name: onSave, type: '(pos: LatLng) => void', required: false, description: 'Called when user clicks "Guardar ubicación"' }
+---
 ## Example
 
 ```tsx
-<MapPickerOSM
-  initialPosition={{ lat: -12.0464, lng: -77.0428 }}
-  onChange={(pos) => console.log(pos)}
-  onSave={(pos) => saveCoordinates(pos)}
-/>
+{/* TODO: add example */}
 ```

package/docs/components/map-picker.md

@@ -1,21 +1,18 @@
-# MapPicker
-
-- Export: `MapPicker`
-- Extra exports: `MapPickerProps`
-- Import: `import { MapPicker } from "@mantis-core/ui";`
-- Base library: `next/dynamic` wrapper over `MapPickerClient`
-- Base typing: `{ onLocationSelect: (lat: number, lng: number) => void; initialLat?: number | null; initialLng?: number | null }`
-- Required styles: Leaflet CSS comes from the client implementation
-
+---
+name: MapPicker
+category: maps
+import: '@mantis-core/ui/components/Maps/MapPicker'
+whenToUse: Interactive Leaflet map that lets the user click to select a lat/lng coordinate; SSR-safe via next/dynamic.
+baseLibrary: next/dynamic
+relatedComponents: [MapPickerClient, MapPickerOSM]
+relatedNextCore: []
+props:
+  - { name: onLocationSelect, type: '(lat: number, lng: number) => void', required: true }
+  - { name: initialLat, type: 'number | null', required: false }
+  - { name: initialLng, type: 'number | null', required: false }
+---
 ## Example
 
 ```tsx
-<MapPicker
-  initialLat={-2.9}
-  initialLng={-79.0}
-  onLocationSelect={(lat, lng) => {
-    form.setValue("lat", lat);
-    form.setValue("lng", lng);
-  }}
-/>
+<MapPicker onLocationSelect={(lat, lng) => setValue('coords', { lat, lng })} initialLat={-3.26} initialLng={-79.28} />
 ```

package/docs/components/menu-button.md

@@ -1,22 +1,18 @@
-# MenuButton
-
-- Export: `MenuButton`
-- Extra exports: `MenuButtonProps`, `ActionMenuItem`
-- Import: `import { MenuButton } from "@mantis-core/ui";`
-- Base library: `primereact/tieredmenu`
-- Base typing:
-  - `ActionMenuItem extends MenuItem { route?: string; items?: ActionMenuItem[] | ActionMenuItem[][] }`
-  - `MenuButtonProps = { label?: string; icon?: string; items?: ActionMenuItem[] }`
-- Required styles: [`buttons.scss`](../../../../packages/mantis-core-styles/docs/styles/buttons.md) indirectly through `Button`
-
+---
+name: MenuButton
+category: tables
+import: '@mantis-core/ui/components/Tables/MenuButton'
+whenToUse: Dropdown button with a list of actions; used inside table rows.
+baseLibrary: primereact/tieredmenu
+relatedComponents: [ActionColumn]
+relatedNextCore: []
+props:
+  - { name: items, type: 'ActionMenuItem[]', required: true }
+  - { name: label, type: string, required: false }
+  - { name: icon, type: string, required: false }
+---
 ## Example
 
 ```tsx
-<MenuButton
-  label="Actions"
-  items={[
-    { label: "Edit", icon: "pi pi-pencil", route: "/admin/listings/1" },
-    { label: "Delete", icon: "pi pi-trash", command: () => setOpen(true) },
-  ]}
-/>
+<MenuButton items={[{ label: 'Edit', command: onEdit }, { label: 'Delete', command: onDelete }]} />
 ```

package/docs/components/modal.md

@@ -0,0 +1,20 @@
+---
+name: Modal
+category: overlays
+import: '@mantis-core/ui/components/overlays/Modal'
+whenToUse: Dialog/modal (PrimeReact Dialog wrapper); dismissable mask and non-draggable by default.
+baseLibrary: custom
+relatedNextCore: []
+props:
+  - { name: visible, type: boolean, required: true }
+  - { name: onHide, type: '() => void', required: true }
+  - { name: header, type: ReactNode, required: false }
+  - { name: footer, type: ReactNode, required: false }
+  - { name: style, type: CSSProperties, required: false }
+  - { name: className, type: string, required: false }
+---
+## Example
+
+```tsx
+<Modal visible={showModal} onHide={() => setShowModal(false)} header='Editar propiedad' style={{ width: '40rem' }}><PropertyForm /></Modal>
+```

package/docs/components/multi-select-filter.md

@@ -1,20 +1,18 @@
-# MultiSelectFilter
-
-- Export: `MultiSelectFilter`
-- Import: `import { MultiSelectFilter } from "@mantis-core/ui";`
-- Base library: `primereact/multiselect`
-- Base typing: `Omit<MultiSelectProps, "value" | "onChange"> & { filterProps: ColumnFilterElementTemplateOptions }`
-- Required styles: `@mantis-core/styles/scss/inputs.scss`
-
+---
+name: MultiSelectFilter
+category: tables
+import: '@mantis-core/ui/components/Tables/filters/MultiSelectFilter'
+whenToUse: PrimeReact MultiSelect wired for use as a DataTable column filter template.
+baseLibrary: primereact/multiselect
+relatedComponents: [FilterPannel]
+relatedNextCore: []
+props:
+  - { name: filterProps, type: ColumnFilterElementTemplateOptions, required: true }
+  - { name: options, type: 'any[]', required: false }
+  - { name: loading, type: boolean, required: false }
+---
 ## Example
 
 ```tsx
-filterElement={(filterProps) => (
-  <MultiSelectFilter
-    filterProps={filterProps}
-    options={statusOptions}
-    optionLabel="label"
-    optionValue="value"
-  />
-)}
+<Column field='status' filterElement={(opts) => <MultiSelectFilter filterProps={opts} options={statusOptions} />} />
 ```

package/docs/components/multi-select.md

@@ -1,23 +1,22 @@
-# MultiSelect
-
-- Export: `MultiSelect`
-- Import: `import { MultiSelect } from "@mantis-core/ui";`
-- Base library: `primereact/multiselect`
-- Base typing: `Omit<PrimeMultiSelectProps, "name" | "defaultValue"> & { controller: ControllerProps; block?: boolean }`
-- Form contract: [`ControllerProps`](../contracts/controller-props.md)
-- Required styles: `@mantis-core/styles/scss/inputs.scss`
-
+---
+name: MultiSelect
+category: forms
+import: '@mantis-core/ui/components/Forms/MultiSelect'
+whenToUse: Multi-value select (PrimeReact) wired to react-hook-form.
+baseLibrary: primereact/multiselect
+formContract: ControllerProps
+requiredStyles: [scss/inputs.scss]
+relatedComponents: [FormFieldRender, MultiSelectFilter]
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+  - { name: options, type: 'any[]', required: false }
+  - { name: optionLabel, type: string, required: false }
+  - { name: optionValue, type: string, required: false }
+  - { name: block, type: boolean, required: false }
+---
 ## Example
 
 ```tsx
-<MultiSelect
-  controller={{ name: "tags", control: form.control }}
-  block
-  options={[
-    { label: "Featured", value: "featured" },
-    { label: "Luxury", value: "luxury" },
-  ]}
-  optionLabel="label"
-  optionValue="value"
-/>
+<MultiSelect controller={{ name: 'tags' }} options={tagOptions} optionLabel='name' optionValue='id' block />
 ```

package/docs/components/number-input.md

@@ -1,20 +1,21 @@
-# NumberInput
-
-- Export: `NumberInput`
-- Extra exports: `NumberInputProps`
-- Import: `import { NumberInput } from "@mantis-core/ui";`
-- Base library: `primereact/inputnumber`
-- Base typing: `Omit<InputNumberProps, "name" | "defaultValue"> & { controller: ControllerProps; block?: boolean }`
-- Form contract: [`ControllerProps`](../contracts/controller-props.md)
-- Required styles: `@mantis-core/styles/scss/inputs.scss`
-
+---
+name: NumberInput
+category: forms
+import: '@mantis-core/ui/components/Forms/NumberInput'
+whenToUse: Numeric input (integer or decimal) wired to react-hook-form.
+baseLibrary: primereact/inputnumber
+formContract: ControllerProps
+requiredStyles: [scss/inputs.scss]
+relatedComponents: [FormFieldRender]
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+  - { name: block, type: boolean, required: false }
+  - { name: min, type: number, required: false }
+  - { name: max, type: number, required: false }
+---
 ## Example
 
 ```tsx
-<NumberInput
-  controller={{ name: "price", control: form.control }}
-  block
-  mode="currency"
-  currency="USD"
-/>
+<NumberInput controller={{ name: 'price', rules: { min: 0 } }} block />
 ```

package/docs/components/otp-input.md

@@ -0,0 +1,18 @@
+---
+name: OtpInput
+category: forms
+import: '@mantis-core/ui/components/Forms/OtpInput'
+whenToUse: One-time password input (PrimeReact InputOtp) wired to react-hook-form.
+baseLibrary: custom
+formContract: ControllerProps
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+  - { name: length, type: number, required: false, default: '6' }
+  - { name: block, type: boolean, required: false }
+---
+## Example
+
+```tsx
+<OtpInput controller={{ name: 'otp', rules: { required: true } }} length={6} />
+```

package/docs/components/page-tabs.md

@@ -0,0 +1,16 @@
+---
+name: PageTabs
+category: navigation
+import: '@mantis-core/ui/components/navigation/PageTabs'
+whenToUse: Tab menu bar for page-level navigation; auto-detects active tab from Next.js pathname when tabs have href.
+baseLibrary: custom
+relatedNextCore: []
+props:
+  - { name: tabs, type: '{ label: string; icon?: ReactNode; href?: string; command?: () => void }[]', required: true }
+  - { name: activeIndex, type: number, required: false }
+---
+## Example
+
+```tsx
+<PageTabs tabs={[{ label: 'General', href: '/admin/settings' }, { label: 'Seguridad', href: '/admin/settings/security' }]} />
+```

package/docs/components/page-title.md

@@ -1,13 +1,15 @@
-# PageTitle
-
-- Export: `PageTitle`
-- Import: `import { PageTitle } from "@mantis-core/ui";`
-- Base library: custom typographic wrapper
-- Base typing: `PropsWithChildren`
-- Required styles: none
-
+---
+name: PageTitle
+category: pages
+import: '@mantis-core/ui/components/pages/PageTitle'
+whenToUse: Centered display-font heading for public-facing pages.
+baseLibrary: custom
+relatedNextCore: []
+props:
+  - { name: children, type: ReactNode, required: true }
+---
 ## Example
 
 ```tsx
-<PageTitle>Inventory Overview</PageTitle>
+<PageTitle>Propiedades en Venta</PageTitle>
 ```

package/docs/components/paginated-table.md

@@ -1,32 +1,25 @@
-# PaginatedTable
-
-- Export: `PaginatedTable`
-- Extra exports: `PaginatedTableProps`
-- Import: `import { PaginatedTable } from "@mantis-core/ui";`
-- Base library: `primereact/datatable` + `primereact/column`
-- Base typing: `DataTableBaseProps<TValue> & { showIndexColumn?; showActionColumn?; useMantisCoreStyles?; indexColumnProps?; actionColumnProps?; actionColumnItems? }`
-- Required styles: `@mantis-core/styles/scss/table.scss`
-
+---
+name: PaginatedTable
+category: tables
+import: '@mantis-core/ui/components/Tables/PaginatedTable'
+whenToUse: 'Generic server-side paginated DataTable with built-in index column, action column, and Mantis Core CSS. Wraps PrimeReact DataTable.'
+baseLibrary: primereact/datatable
+requiredStyles: [scss/table.scss]
+relatedComponents: [ActionColumn, IndexColumn, TableToolbar, FilterPannel]
+relatedNextCore: []
+props:
+  - { name: value, type: TValue, required: true }
+  - { name: totalRecords, type: number, required: false }
+  - { name: showIndexColumn, type: boolean, required: false, default: 'true' }
+  - { name: showActionColumn, type: boolean, required: false, default: 'false' }
+  - { name: actionColumnItems, type: '(rowData: TValue[number]) => ActionMenuItem[]', required: false }
+  - { name: useMantisCoreStyles, type: boolean, required: false, default: 'true' }
+  - { name: lazy, type: boolean, required: false, default: 'true' }
+---
 ## Example
 
 ```tsx
-import { Column } from "primereact/column";
-
-<PaginatedTable
-  value={rows}
-  totalRecords={total}
-  lazy
-  first={first}
-  rows={pageSize}
-  onPage={onPage}
-  showActionColumn
-  actionColumnItems={(row) => [
-    { label: "Edit", icon: "pi pi-pencil", route: `/admin/listings/${row.id}` },
-  ]}
->
-  <Column field="name" header="Name" sortable />
-  <Column field="status" header="Status" />
-</PaginatedTable>
+<PaginatedTable value={rows} totalRecords={total} showActionColumn actionColumnItems={(row) => [{ label: 'Edit', command: () => edit(row) }]}><Column field='name' header='Name' /></PaginatedTable>
 ```
 
 ## Notes

package/docs/components/pagination.md

@@ -1,24 +1,21 @@
-# Pagination, PaginationInfo, and PageSizeSelector
-
-- Exports: `Pagination`, `PaginationInfo`, `PageSizeSelector`
-- Extra exports: `PaginationProps`, `PaginationInfoProps`, `PageSizeSelectorProps`
-- Import: `import { Pagination, PaginationInfo, PageSizeSelector } from "@mantis-core/ui";`
-- Base library: custom pagination UI using `@mantis-core/utils`
-- Required styles: none
-
+---
+name: Pagination
+category: feedback
+import: '@mantis-core/ui/components/ui/Pagination'
+whenToUse: Standalone pagination control; use when not relying on PaginatedTable's built-in paginator.
+baseLibrary: custom
+relatedComponents: [PaginationInfo, PageSizeSelector]
+relatedNextCore: []
+props:
+  - { name: totalRecords, type: number, required: true }
+  - { name: pageSize, type: number, required: true }
+  - { name: currentPage, type: number, required: true }
+  - { name: onPageChange, type: '(page: number) => void', required: true }
+---
 ## Example
 
 ```tsx
-<Pagination
-  currentPage={page}
-  totalPages={totalPages}
-  onPageChange={setPage}
-  maxVisible={5}
-/>
-
-<PaginationInfo currentPage={page} pageSize={pageSize} totalCount={total} />
-
-<PageSizeSelector pageSize={pageSize} onPageSizeChange={setPageSize} />
+<Pagination totalRecords={200} pageSize={20} currentPage={page} onPageChange={setPage} />
 ```
 
 ## Notes

package/docs/components/password-input.md

@@ -0,0 +1,19 @@
+---
+name: PasswordInput
+category: forms
+import: '@mantis-core/ui/components/Forms/PasswordInput'
+whenToUse: 'Password field with show/hide toggle; Controller pattern, same API as TextInput.'
+baseLibrary: custom
+formContract: ControllerProps
+requiredStyles: [scss/inputs.scss]
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+  - { name: block, type: boolean, required: false }
+  - { name: showToggle, type: boolean, required: false, default: 'true' }
+---
+## Example
+
+```tsx
+<PasswordInput controller={{ name: 'password', rules: notEmptyRule() }} block />
+```

package/docs/components/phone-input.md

@@ -0,0 +1,18 @@
+---
+name: PhoneInput
+category: forms
+import: '@mantis-core/ui/components/Forms/PhoneInput'
+whenToUse: Masked phone number input; default mask (999) 999-9999.
+baseLibrary: custom
+formContract: ControllerProps
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+  - { name: mask, type: string, required: false, default: '''(999) 999-9999''' }
+  - { name: block, type: boolean, required: false }
+---
+## Example
+
+```tsx
+<PhoneInput controller={{ name: 'phone', rules: { required: true } }} block />
+```

package/docs/components/radio-group.md

@@ -0,0 +1,20 @@
+---
+name: RadioGroup
+category: forms
+import: '@mantis-core/ui/components/Forms/RadioGroup'
+whenToUse: Renders a set of radio buttons from an options array; value is the selected option's value.
+baseLibrary: custom
+formContract: ControllerProps
+relatedNextCore: []
+props:
+  - { name: controller, type: ControllerProps, required: true }
+  - { name: options, type: '{ label: string; value: any }[]', required: true }
+  - { name: block, type: boolean, required: false }
+  - { name: disabled, type: boolean, required: false }
+  - { name: className, type: string, required: false }
+---
+## Example
+
+```tsx
+<RadioGroup controller={{ name: 'role' }} options={[{ label: 'Admin', value: 'admin' }, { label: 'User', value: 'user' }]} />
+```