snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-docs/snippets/ui/generated/input/button-group.mdx

@@ -0,0 +1,31 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="color" type="&quot;neutral&quot; | &quot;accent&quot; | &quot;danger&quot; | &quot;success&quot;">
+  Shared semantic color that overrides the color of buttons in the group.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;">
+  Shared button height that overrides the size of buttons in the group.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;">
+  Shared surface treatment that overrides the variant of buttons in the group.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/button.mdx

@@ -0,0 +1,74 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="className" type="string | ((state: ButtonState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="color" type="&quot;neutral&quot; | &quot;accent&quot; | &quot;danger&quot; | &quot;success&quot;" default="neutral">
+  Semantic color of the button.
+</ParamField>
+
+<ParamField body="elevated" type="boolean" default="false">
+  Adds a shadow to the button.
+</ParamField>
+
+<ParamField body="endIcon" type="ReactNode">
+  Decorative content displayed after the label.
+</ParamField>
+
+<ParamField body="focusableWhenDisabled" type="boolean" default="false">
+  Whether the button should be focusable when disabled.
+</ParamField>
+
+<ParamField body="fullWidth" type="boolean" default="false">
+  Expands the button to fill its container width.
+</ParamField>
+
+<ParamField body="hotkeys" type="string[]">
+  Keyboard shortcut hints displayed on non-mobile screens.
+</ParamField>
+
+<ParamField body="loading" type="boolean" default="false">
+  Shows a loading indicator and disables activation while preserving the button width.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ButtonState&gt;">
+  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="md">
+  Button height: `sm` (24px) or `md` (32px).
+</ParamField>
+
+<ParamField body="soon" type="boolean" default="false">
+  Displays a coming-soon label and disables activation.
+</ParamField>
+
+<ParamField body="soonLabel" type="string">
+  Text for the coming-soon label.
+</ParamField>
+
+<ParamField body="startIcon" type="ReactNode">
+  Decorative content displayed before the label.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: ButtonState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;" default="outline">
+  Visual treatment of the button surface.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/checkbox.mdx

@@ -0,0 +1,121 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="checked" type="boolean">
+  Whether the checkbox is currently ticked.
+
+  To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
+</ParamField>
+
+<ParamField body="className" type="string | ((state: CheckboxRootState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="color" type="&quot;accent&quot; | &quot;success&quot; | &quot;warning&quot;" default="accent">
+  Color used while the checkbox is checked or indeterminate.
+</ParamField>
+
+<ParamField body="defaultChecked" type="boolean" default="false">
+  Whether the checkbox is initially ticked.
+
+  To render a controlled checkbox, use the `checked` prop instead.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="form" type="string">
+  Identifies the form that owns the hidden input.
+  Useful when the checkbox is rendered outside the form.
+</ParamField>
+
+<ParamField body="hoverable" type="boolean" default="true">
+  Adds padding around the box and a hover background. Disable it for a
+  compact checkbox inside another interactive element.
+</ParamField>
+
+<ParamField body="id" type="string">
+  The id of the input element.
+</ParamField>
+
+<ParamField body="indeterminate" type="boolean" default="false">
+  Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+</ParamField>
+
+<ParamField body="inputRef" type="Ref&lt;HTMLInputElement&gt;">
+  A ref to access the hidden `<input>` element.
+</ParamField>
+
+<ParamField body="name" type="string">
+  Identifies the field when a form is submitted.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="false">
+  Whether the component renders a native `<button>` element when replacing it
+  via the `render` prop.
+  Set to `true` if the rendered element is a native button.
+</ParamField>
+
+<ParamField body="onCheckedChange" type="((checked: boolean, eventDetails: { reason: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; void)">
+  Event handler called when the checkbox is ticked or unticked.
+</ParamField>
+
+<ParamField body="parent" type="boolean" default="false">
+  Whether the checkbox controls a group of child checkboxes.
+
+  Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
+</ParamField>
+
+<ParamField body="readOnly" type="boolean" default="false">
+  Whether the user should be unable to tick or untick the checkbox.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, CheckboxRootState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="required" type="boolean" default="false">
+  Whether the user must tick the checkbox before submitting a form.
+</ParamField>
+
+<ParamField body="shape" type="&quot;square&quot; | &quot;round&quot;" default="square">
+  Corner shape of the box.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
+  Visual size of the checkbox.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: CheckboxRootState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="uncheckedValue" type="string">
+  The value submitted with the form when the checkbox is unchecked.
+  By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
+</ParamField>
+
+<ParamField body="value" type="string">
+  The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted.
+  When submitting a form, a checked box submits `value`; with no `value`, it submits the native "on".
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;soft&quot;" default="solid">
+  Visual style of the box: filled, outlined, or tinted.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/field.mdx

@@ -0,0 +1,195 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+### Field.Root
+
+<ParamField body="Root.actionsRef" type="RefObject&lt;FieldRootActions | null&gt;">
+  A ref to imperative actions.
+  - `validate`: Validates the field when called.
+</ParamField>
+
+<ParamField body="Root.className" type="string | ((state: FieldRootState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Root.dirty" type="boolean">
+  Whether the field's value has been changed from its initial value.
+  Useful when the field state is controlled by an external library.
+</ParamField>
+
+<ParamField body="Root.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+  Takes precedence over the `disabled` prop on the `<Field.Control>` component.
+</ParamField>
+
+<ParamField body="Root.invalid" type="boolean">
+  Whether the field is invalid.
+  Useful when the field state is controlled by an external library.
+</ParamField>
+
+<ParamField body="Root.name" type="string">
+  Identifies the field when a form is submitted.
+  Takes precedence over the `name` prop on the `<Field.Control>` component.
+</ParamField>
+
+<ParamField body="Root.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, FieldRootState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Root.style" type="CSSProperties | ((state: FieldRootState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="Root.touched" type="boolean">
+  Whether the field has been touched.
+  Useful when the field state is controlled by an external library.
+</ParamField>
+
+<ParamField body="Root.validate" type="((value: unknown, formValues: Record&lt;string, any&gt;) =&gt; string | void | string[] | Promise&lt;string | void | string[] | null&gt; | null)">
+  A function for custom validation. Return a string or an array of strings with
+  the error message(s) if the value is invalid. Returning nothing, `null`, an empty
+  string, or an empty array means the value is valid.
+  Asynchronous functions are supported, but they do not prevent form submission
+  when using `validationMode="onSubmit"`.
+</ParamField>
+
+<ParamField body="Root.validationDebounceTime" type="number" default="0">
+  How long to wait between `validate` callbacks if
+  `validationMode="onChange"` is used. Specified in milliseconds.
+</ParamField>
+
+<ParamField body="Root.validationMode" type="&quot;onBlur&quot; | &quot;onChange&quot; | &quot;onSubmit&quot;" default="onSubmit">
+  Determines when the field should be validated.
+  This takes precedence over the `validationMode` prop on `<Form>`.
+
+  - `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.
+  - `onBlur`: triggers validation when the control loses focus.
+  - `onChange`: triggers validation on every change to the control value.
+</ParamField>
+
+### Field.Label
+
+<ParamField body="Label.className" type="string | ((state: FieldLabelState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Label.nativeLabel" type="boolean" default="true">
+  Whether the component renders a native `<label>` element when replacing it via the `render` prop.
+  Set to `false` if the rendered element is not a label (for example, `<div>`).
+
+  This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.
+</ParamField>
+
+<ParamField body="Label.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, FieldLabelState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Label.style" type="CSSProperties | ((state: FieldLabelState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Field.Control
+
+<ParamField body="Control.className" type="string | ((state: FieldControlState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Control.defaultValue" type="string | number | readonly string[]">
+
+</ParamField>
+
+<ParamField body="Control.onValueChange" type="((value: string, eventDetails: { reason: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; void)">
+  Callback fired when the `value` changes. Use when controlled.
+</ParamField>
+
+<ParamField body="Control.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, FieldControlState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Control.style" type="CSSProperties | ((state: FieldControlState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Field.Description
+
+<ParamField body="Description.className" type="string | ((state: FieldDescriptionState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Description.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, FieldDescriptionState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Description.style" type="CSSProperties | ((state: FieldDescriptionState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Field.Error
+
+<ParamField body="Error.className" type="string | ((state: FieldErrorState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Error.match" type="boolean | keyof ValidityState">
+  Determines whether to show the error message according to the field's
+  [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
+  Specifying `true` will always show the error message, and lets external libraries
+  control the visibility.
+</ParamField>
+
+<ParamField body="Error.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, FieldErrorState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Error.style" type="CSSProperties | ((state: FieldErrorState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Field.Validity
+
+<ParamField body="Validity.children" type="(state: FieldValidityState) =&gt; ReactNode" required>
+  A function that accepts the field validity state as an argument.
+
+  ```jsx
+  <Field.Validity>
+    {(validity) => {
+      return <div>...</div>
+    }}
+  </Field.Validity>
+  ```
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/icon-button.mdx

@@ -0,0 +1,74 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="aria-label" type="string" required>
+  Required accessible name describing the action.
+</ParamField>
+
+<ParamField body="children" type="ReactNode" required>
+  Icon content. Decorative and hidden from assistive technology.
+</ParamField>
+
+<ParamField body="className" type="string | ((state: ButtonState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="color" type="&quot;neutral&quot; | &quot;accent&quot; | &quot;danger&quot; | &quot;success&quot;">
+  Semantic color of the button.
+</ParamField>
+
+<ParamField body="elevated" type="boolean">
+  Adds a shadow to the button.
+</ParamField>
+
+<ParamField body="focusableWhenDisabled" type="boolean" default="false">
+  Whether the button should be focusable when disabled.
+</ParamField>
+
+<ParamField body="loading" type="boolean">
+  Shows a loading indicator and disables activation while preserving the button width.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ButtonState&gt;">
+  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;">
+  Square button size: `sm` (24px) or `md` (32px).
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: ButtonState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="tooltip" type="string">
+  Text displayed when hovering or focusing the button.
+</ParamField>
+
+<ParamField body="tooltipDelay" type="number" default="1000">
+  Delay before showing the tooltip.
+</ParamField>
+
+<ParamField body="tooltipOffset" type="number" default="5">
+  Distance in pixels between the button and the tooltip.
+</ParamField>
+
+<ParamField body="tooltipPlace" type="&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot;" default="bottom">
+  Preferred placement of the tooltip relative to the button.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;">
+  Visual treatment of the button surface.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/input-group.mdx

@@ -0,0 +1,31 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="endElement" type="ReactNode">
+  Content rendered after the input, such as a suffix or a button.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="md">
+  Visual size of the group and its input.
+</ParamField>
+
+<ParamField body="startElement" type="ReactNode">
+  Content rendered before the input, such as a prefix or an icon.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/input.mdx

@@ -0,0 +1,45 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="className" type="string | ((state: InputState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="defaultValue" type="string | number | readonly string[]">
+  The default value of the input. Use when uncontrolled.
+</ParamField>
+
+<ParamField body="onValueChange" type="((value: string, eventDetails: { reason: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; void)">
+  Callback fired when the `value` changes. Use when controlled.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, InputState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;">
+  Visual size of the input. Inside an `InputGroup`, the group's size applies.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: InputState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="value" type="string | number | readonly string[]">
+  The value of the input. Use when controlled.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/light-button.mdx

@@ -0,0 +1,78 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="className" type="string | ((state: ButtonState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="color" type="&quot;neutral&quot; | &quot;accent&quot; | &quot;danger&quot; | &quot;success&quot;">
+  Semantic color of the button.
+</ParamField>
+
+<ParamField body="elevated" type="boolean">
+  Adds a shadow to the button.
+</ParamField>
+
+<ParamField body="emphasis" type="&quot;standard&quot; | &quot;subtle&quot;" default="standard">
+  Uses secondary or tertiary text for neutral buttons. Semantic colors and solid surfaces retain their contrast treatment.
+</ParamField>
+
+<ParamField body="endIcon" type="ReactNode">
+  Decorative content displayed after the label.
+</ParamField>
+
+<ParamField body="focusableWhenDisabled" type="boolean" default="false">
+  Whether the button should be focusable when disabled.
+</ParamField>
+
+<ParamField body="fullWidth" type="boolean">
+  Expands the button to fill its container width.
+</ParamField>
+
+<ParamField body="hotkeys" type="string[]">
+  Keyboard shortcut hints displayed on non-mobile screens.
+</ParamField>
+
+<ParamField body="loading" type="boolean">
+  Shows a loading indicator and disables activation while preserving the button width.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ButtonState&gt;">
+  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
+  Button height: `sm` (24px) or `md` (32px).
+</ParamField>
+
+<ParamField body="soon" type="boolean">
+  Displays a coming-soon label and disables activation.
+</ParamField>
+
+<ParamField body="soonLabel" type="string">
+  Text for the coming-soon label.
+</ParamField>
+
+<ParamField body="startIcon" type="ReactNode">
+  Decorative content displayed before the label.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: ButtonState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;" default="ghost">
+  Visual treatment of the button surface.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/main-button.mdx

@@ -0,0 +1,74 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="className" type="string | ((state: ButtonState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="color" type="&quot;neutral&quot; | &quot;accent&quot; | &quot;danger&quot; | &quot;success&quot;">
+  Semantic color of the button.
+</ParamField>
+
+<ParamField body="elevated" type="boolean" default="true">
+  Adds a shadow to the button.
+</ParamField>
+
+<ParamField body="endIcon" type="ReactNode">
+  Decorative content displayed after the label.
+</ParamField>
+
+<ParamField body="focusableWhenDisabled" type="boolean" default="false">
+  Whether the button should be focusable when disabled.
+</ParamField>
+
+<ParamField body="fullWidth" type="boolean">
+  Expands the button to fill its container width.
+</ParamField>
+
+<ParamField body="hotkeys" type="string[]">
+  Keyboard shortcut hints displayed on non-mobile screens.
+</ParamField>
+
+<ParamField body="loading" type="boolean">
+  Shows a loading indicator and disables activation while preserving the button width.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ButtonState&gt;">
+  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;">
+  Button height: `sm` (24px) or `md` (32px).
+</ParamField>
+
+<ParamField body="soon" type="boolean">
+  Displays a coming-soon label and disables activation.
+</ParamField>
+
+<ParamField body="soonLabel" type="string">
+  Text for the coming-soon label.
+</ParamField>
+
+<ParamField body="startIcon" type="ReactNode">
+  Decorative content displayed before the label.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: ButtonState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;" default="solid">
+  Visual treatment of the button surface.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/radio-group.mdx

@@ -0,0 +1,70 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="className" type="string | ((state: RadioGroupState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="defaultValue" type="TValue">
+  The uncontrolled value of the radio button that should be initially selected.
+
+  To render a controlled radio group, use the `value` prop instead.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="form" type="string">
+  Identifies the form that owns the radio inputs.
+  Useful when the radio group is rendered outside the form.
+</ParamField>
+
+<ParamField body="inputRef" type="Ref&lt;HTMLInputElement&gt;">
+  A ref to access the hidden input element.
+</ParamField>
+
+<ParamField body="name" type="string">
+  Identifies the field when a form is submitted.
+</ParamField>
+
+<ParamField body="onValueChange" type="((value: TValue, eventDetails: { reason: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; void)">
+  Callback fired when the value changes.
+</ParamField>
+
+<ParamField body="readOnly" type="boolean" default="false">
+  Whether the user should be unable to select a different radio button in the group.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, RadioGroupState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="required" type="boolean" default="false">
+  Whether the user must choose a value before submitting a form.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: RadioGroupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="value" type="TValue">
+  The controlled value of the radio item that should be currently selected.
+
+  To render an uncontrolled radio group, use the `defaultValue` prop instead.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/radio.mdx

@@ -0,0 +1,59 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="className" type="string | ((state: RadioRootState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="disabled" type="boolean">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="inputRef" type="Ref&lt;HTMLInputElement&gt;">
+  A ref to access the hidden input element.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="false">
+  Whether the component renders a native `<button>` element when replacing it
+  via the `render` prop.
+  Set to `true` if the rendered element is a native button.
+</ParamField>
+
+<ParamField body="readOnly" type="boolean">
+  Whether the user should be unable to select the radio button.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, RadioRootState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="required" type="boolean">
+  Whether the user must choose a value before submitting a form.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
+  Visual size of the radio.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: RadioRootState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="value" type="TValue" required>
+  The unique identifying value of the radio in a group.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/select.mdx

@@ -0,0 +1,378 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+### Select.Root
+
+<ParamField body="Root.actionsRef" type="RefObject&lt;SelectRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Manually unmounts the select.
+  Call this after any externally controlled closing animation finishes.
+</ParamField>
+
+<ParamField body="Root.autoComplete" type="string">
+  Provides a hint to the browser for autofill.
+</ParamField>
+
+<ParamField body="Root.defaultOpen" type="boolean" default="false">
+  Whether the select popup is initially open.
+
+  To render a controlled select popup, use the `open` prop instead.
+</ParamField>
+
+<ParamField body="Root.defaultValue" type="SelectValueType&lt;Value, Multiple&gt; | null">
+  The uncontrolled value of the select when it's initially rendered.
+
+  To render a controlled select, use the `value` prop instead.
+</ParamField>
+
+<ParamField body="Root.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="Root.form" type="string">
+  Identifies the form that owns the hidden input.
+  Useful when the select is rendered outside the form.
+</ParamField>
+
+<ParamField body="Root.highlightItemOnHover" type="boolean" default="true">
+  Whether moving the pointer over items should highlight them.
+  Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
+</ParamField>
+
+<ParamField body="Root.id" type="string">
+  The id of the Select.
+</ParamField>
+
+<ParamField body="Root.inputRef" type="Ref&lt;HTMLInputElement&gt;">
+  A ref to access the hidden input element.
+</ParamField>
+
+<ParamField body="Root.isItemEqualToValue" type="((itemValue: Value, value: Value) =&gt; boolean)">
+  Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
+  Defaults to `Object.is` comparison.
+</ParamField>
+
+<ParamField body="Root.items" type="Record&lt;string, ReactNode&gt; | readonly { label: ReactNode; value: any; }[] | readonly Group&lt;any&gt;[]">
+  Data structure of the items rendered in the select popup.
+  When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.
+</ParamField>
+
+<ParamField body="Root.itemToStringLabel" type="((itemValue: Value) =&gt; string)">
+  When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
+  If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
+</ParamField>
+
+<ParamField body="Root.itemToStringValue" type="((itemValue: Value) =&gt; string)">
+  When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
+  If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
+</ParamField>
+
+<ParamField body="Root.modal" type="boolean" default="true">
+  Determines if the select enters a modal state when open.
+  - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
+  - `false`: user interaction with the rest of the document is allowed.
+
+  On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
+</ParamField>
+
+<ParamField body="Root.multiple" type="boolean" default="false">
+  Whether multiple items can be selected.
+</ParamField>
+
+<ParamField body="Root.name" type="string">
+  Identifies the field when a form is submitted.
+</ParamField>
+
+<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: SelectRootChangeEventDetails) =&gt; void)">
+  Event handler called when the select popup is opened or closed.
+</ParamField>
+
+<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the select popup is opened or closed.
+</ParamField>
+
+<ParamField body="Root.onValueChange" type="((value: SelectValueType&lt;Value, Multiple&gt; | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) =&gt; void)">
+  Event handler called when the value of the select changes.
+</ParamField>
+
+<ParamField body="Root.open" type="boolean">
+  Whether the select popup is currently open.
+</ParamField>
+
+<ParamField body="Root.readOnly" type="boolean" default="false">
+  Whether the user should be unable to choose a different option from the select popup.
+</ParamField>
+
+<ParamField body="Root.required" type="boolean" default="false">
+  Whether the user must choose a value before submitting a form.
+</ParamField>
+
+<ParamField body="Root.value" type="SelectValueType&lt;Value, Multiple&gt; | null">
+  The value of the select. Use when controlled.
+</ParamField>
+
+### Select.Trigger
+
+<ParamField body="Trigger.className" type="string | ((state: SelectTriggerState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Trigger.disabled" type="boolean">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="Trigger.nativeButton" type="boolean" default="true">
+  Whether the component renders a native `<button>` element when replacing it
+  via the `render` prop.
+  Set to `false` if the rendered element is not a button (for example, `<div>`).
+</ParamField>
+
+<ParamField body="Trigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectTriggerState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Trigger.size" type="&quot;sm&quot; | &quot;md&quot;" default="md">
+  Visual size of the trigger.
+</ParamField>
+
+<ParamField body="Trigger.style" type="CSSProperties | ((state: SelectTriggerState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Select.Value
+
+<ParamField body="Value.children" type="ReactNode | ((value: any) =&gt; ReactNode)">
+  Accepts a function that returns a `ReactNode` to format the selected value.
+  Treat the value as read-only: in `multiple` mode it may be a shared frozen array
+  when nothing is selected.
+</ParamField>
+
+<ParamField body="Value.className" type="string | ((state: SelectValueState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Value.placeholder" type="ReactNode">
+  The placeholder value to display when no value is selected.
+  This is overridden by `children` if specified, or by a null item's label in `items`.
+</ParamField>
+
+<ParamField body="Value.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectValueState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Value.style" type="CSSProperties | ((state: SelectValueState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Select.Popup
+
+<ParamField body="Popup.align" type="&quot;center&quot; | &quot;start&quot; | &quot;end&quot;" default="start">
+  How to align the popup relative to the specified side.
+</ParamField>
+
+<ParamField body="Popup.alignItemWithTrigger" type="boolean" default="false">
+  Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space.
+</ParamField>
+
+<ParamField body="Popup.alignOffset" type="number | OffsetFunction" default="0">
+  Additional offset along the alignment axis in pixels.
+  Also accepts a function that returns the offset to read the dimensions of the anchor
+  and positioner elements, along with its side and alignment.
+
+  The function takes a `data` object parameter with the following properties:
+  - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
+  - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
+  - `data.side`: which side of the anchor element the positioner is aligned against.
+  - `data.align`: how the positioner is aligned relative to the specified side.
+</ParamField>
+
+<ParamField body="Popup.anchor" type="Element | VirtualElement | RefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null) | null">
+  An element to position the popup against.
+  By default, the popup will be positioned against the trigger.
+</ParamField>
+
+<ParamField body="Popup.className" type="string | ((state: SelectPopupState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Popup.container" type="HTMLElement | ShadowRoot | RefObject&lt;HTMLElement | ShadowRoot | null&gt; | null">
+  Element the popup is portaled into. Defaults to the theme's portal
+  container.
+</ParamField>
+
+<ParamField body="Popup.finalFocus" type="boolean | RefObject&lt;HTMLElement | null&gt; | ((closeType: InteractionType) =&gt; boolean | void | HTMLElement | null)">
+  Determines the element to focus when the select popup is closed.
+
+  - `false`: Do not move focus.
+  - `true`: Move focus based on the default behavior (trigger or previously focused element).
+  - `RefObject`: Move focus to the ref element.
+  - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
+    Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
+</ParamField>
+
+<ParamField body="Popup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectPopupState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Popup.side" type="&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot; | &quot;inline-end&quot; | &quot;inline-start&quot;" default="bottom">
+  Which side of the anchor element to align the popup against.
+  May automatically change to avoid collisions.
+</ParamField>
+
+<ParamField body="Popup.sideOffset" type="number | OffsetFunction" default="8">
+  Distance between the anchor and the popup in pixels.
+  Also accepts a function that returns the distance to read the dimensions of the anchor
+  and positioner elements, along with its side and alignment.
+
+  The function takes a `data` object parameter with the following properties:
+  - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
+  - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
+  - `data.side`: which side of the anchor element the positioner is aligned against.
+  - `data.align`: how the positioner is aligned relative to the specified side.
+</ParamField>
+
+<ParamField body="Popup.style" type="CSSProperties | ((state: SelectPopupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Select.Item
+
+<ParamField body="Item.className" type="string | ((state: SelectItemState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Item.description" type="ReactNode">
+  Supporting text, placed according to `descriptionPlacement`.
+</ParamField>
+
+<ParamField body="Item.descriptionPlacement" type="&quot;inline&quot; | &quot;end&quot;" default="inline">
+  Where the description renders: inline after the content or at the end of
+  the row.
+</ParamField>
+
+<ParamField body="Item.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="Item.endIcon" type="ReactNode">
+  Icon rendered after the content.
+</ParamField>
+
+<ParamField body="Item.label" type="string">
+  Specifies the text label to use when the item is matched during keyboard text navigation.
+
+  Defaults to the item text content if not provided.
+</ParamField>
+
+<ParamField body="Item.nativeButton" type="boolean" default="false">
+  Whether the component renders a native `<button>` element when replacing it
+  via the `render` prop.
+  Set to `true` if the rendered element is a native button.
+</ParamField>
+
+<ParamField body="Item.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectItemState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Item.startIcon" type="ReactNode">
+  Icon rendered before the content.
+</ParamField>
+
+<ParamField body="Item.style" type="CSSProperties | ((state: SelectItemState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="Item.value" type="any" default="null">
+  A unique value that identifies this select item.
+</ParamField>
+
+### Select.Group
+
+<ParamField body="Group.className" type="string | ((state: SelectGroupState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Group.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectGroupState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Group.style" type="CSSProperties | ((state: SelectGroupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Select.GroupLabel
+
+<ParamField body="GroupLabel.className" type="string | ((state: SelectGroupLabelState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="GroupLabel.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectGroupLabelState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="GroupLabel.style" type="CSSProperties | ((state: SelectGroupLabelState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Select.Separator
+
+<ParamField body="Separator.className" type="string | ((state: SelectSeparatorState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Separator.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="horizontal">
+  The orientation of the separator.
+</ParamField>
+
+<ParamField body="Separator.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SelectSeparatorState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Separator.style" type="CSSProperties | ((state: SelectSeparatorState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/slider.mdx

@@ -0,0 +1,299 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+### Slider.Root
+
+<ParamField body="Root.className" type="string | ((state: SliderRootState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Root.color" type="&quot;accent&quot; | &quot;success&quot;" default="accent">
+  Color of the indicator and thumbs.
+</ParamField>
+
+<ParamField body="Root.defaultValue" type="number | readonly number[]">
+  The uncontrolled value of the slider when it's initially rendered.
+
+  To render a controlled slider, use the `value` prop instead.
+</ParamField>
+
+<ParamField body="Root.disabled" type="boolean" default="false">
+  Whether the slider should ignore user interaction.
+</ParamField>
+
+<ParamField body="Root.form" type="string">
+  Identifies the form that owns the slider inputs.
+  Useful when the slider is rendered outside the form.
+</ParamField>
+
+<ParamField body="Root.format" type="NumberFormatOptions">
+  Options to format the value.
+</ParamField>
+
+<ParamField body="Root.largeStep" type="number" default="10">
+  The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+</ParamField>
+
+<ParamField body="Root.locale" type="LocalesArgument">
+  The locale used by `Intl.NumberFormat` when formatting the value.
+  Defaults to the user's runtime locale.
+</ParamField>
+
+<ParamField body="Root.max" type="number" default="100">
+  The maximum allowed value of the slider.
+  Should not be equal to min.
+</ParamField>
+
+<ParamField body="Root.min" type="number" default="0">
+  The minimum allowed value of the slider.
+  Should not be equal to max.
+</ParamField>
+
+<ParamField body="Root.minStepsBetweenValues" type="number" default="0">
+  The minimum steps between values in a range slider.
+</ParamField>
+
+<ParamField body="Root.name" type="string">
+  Identifies the field when a form is submitted.
+</ParamField>
+
+<ParamField body="Root.onValueChange" type="((value: TValue extends number ? number : TValue, eventDetails: SliderRootChangeEventDetails) =&gt; void)">
+  Callback function that is fired when the slider's value changed.
+  Receives the new value as the first argument; the originating event is
+  available as `eventDetails.event`. The value is also reflected on
+  `eventDetails.event.target.value` for form integration.
+
+  The `eventDetails.reason` indicates what triggered the change:
+
+  - `'input-change'` when the hidden range input emits a change event (for example, via form integration)
+  - `'track-press'` when the control track is pressed
+  - `'drag'` while dragging a thumb
+  - `'keyboard'` for keyboard input
+  - `'none'` when the change is triggered without a specific interaction
+</ParamField>
+
+<ParamField body="Root.onValueCommitted" type="((value: TValue extends number ? number : TValue, eventDetails: SliderRootCommitEventDetails) =&gt; void)">
+  Callback function that is fired when a value change is committed.
+  Does not fire if the value did not change, or if the change was canceled.
+  **Warning**: This is a generic event, not a change event.
+
+  The `eventDetails.reason` indicates what triggered the commit:
+
+  - `'drag'` while dragging a thumb
+  - `'track-press'` when the control track is pressed
+  - `'keyboard'` for keyboard input
+  - `'input-change'` when the hidden range input emits a change event (for example, via form integration)
+  - `'none'` when the commit occurs without a specific interaction
+</ParamField>
+
+<ParamField body="Root.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="horizontal">
+  The component orientation.
+</ParamField>
+
+<ParamField body="Root.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderRootState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Root.step" type="number" default="1">
+  The granularity with which the slider can step through values. (A "discrete" slider.)
+  The `min` prop serves as the origin for the valid values.
+  We recommend (max - min) to be evenly divisible by the step.
+</ParamField>
+
+<ParamField body="Root.style" type="CSSProperties | ((state: SliderRootState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="Root.thumbAlignment" type="&quot;center&quot; | &quot;edge&quot; | &quot;edge-client-only&quot;" default="edge">
+  How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`:
+  - `center`: The center of the thumb is aligned with the control edge
+  - `edge`: The thumb is inset within the control such that its edge is aligned with the control edge
+  - `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return
+</ParamField>
+
+<ParamField body="Root.thumbCollisionBehavior" type="&quot;none&quot; | &quot;push&quot; | &quot;swap&quot;" default="push">
+  Controls how thumbs behave when they collide during pointer interactions.
+
+  - `'push'` (default): Thumbs push each other without restoring their previous positions when dragged back.
+  - `'swap'`: Thumbs swap places when dragged past each other.
+  - `'none'`: Thumbs cannot move past each other; excess movement is ignored.
+</ParamField>
+
+<ParamField body="Root.value" type="number | readonly number[]">
+  The value of the slider.
+  For range sliders, provide an array with one value per thumb.
+</ParamField>
+
+### Slider.Control
+
+<ParamField body="Control.className" type="string | ((state: SliderControlState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Control.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderControlState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Control.style" type="CSSProperties | ((state: SliderControlState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Slider.Track
+
+<ParamField body="Track.className" type="string | ((state: SliderTrackState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Track.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderTrackState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Track.style" type="CSSProperties | ((state: SliderTrackState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Slider.Indicator
+
+<ParamField body="Indicator.className" type="string | ((state: SliderIndicatorState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Indicator.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderIndicatorState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Indicator.style" type="CSSProperties | ((state: SliderIndicatorState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Slider.Thumb
+
+<ParamField body="Thumb.aria-valuetext" type="string">
+  A string value forwarded to the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
+  Ignored when `getAriaValueText` is provided.
+</ParamField>
+
+<ParamField body="Thumb.className" type="string | ((state: SliderThumbState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Thumb.disabled" type="boolean" default="false">
+  Whether the thumb should ignore user interaction.
+</ParamField>
+
+<ParamField body="Thumb.getAriaLabel" type="((index: number) =&gt; string) | null">
+  A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
+</ParamField>
+
+<ParamField body="Thumb.getAriaValueText" type="((formattedValue: string, value: number, index: number) =&gt; string) | null">
+  A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
+  This is important for screen reader users.
+</ParamField>
+
+<ParamField body="Thumb.index" type="number">
+  The index of the thumb which corresponds to the index of its value in the
+  `value` or `defaultValue` array.
+  This prop is required to support server-side rendering for range sliders
+  with multiple thumbs.
+</ParamField>
+
+<ParamField body="Thumb.inputRef" type="Ref&lt;HTMLInputElement&gt;">
+  A ref to access the nested input element.
+</ParamField>
+
+<ParamField body="Thumb.onBlur" type="FocusEventHandler&lt;HTMLInputElement&gt;">
+  A blur handler forwarded to the `input`.
+</ParamField>
+
+<ParamField body="Thumb.onFocus" type="FocusEventHandler&lt;HTMLInputElement&gt;">
+  A focus handler forwarded to the `input`.
+</ParamField>
+
+<ParamField body="Thumb.onKeyDown" type="KeyboardEventHandler&lt;HTMLInputElement&gt;">
+  A keydown handler forwarded to the `input`.
+</ParamField>
+
+<ParamField body="Thumb.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderThumbState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Thumb.style" type="CSSProperties | ((state: SliderThumbState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="Thumb.tabIndex" type="number">
+  Optional tab index attribute forwarded to the `input`.
+</ParamField>
+
+### Slider.Label
+
+<ParamField body="Label.className" type="string | ((state: SliderRootState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Label.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderRootState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Label.style" type="CSSProperties | ((state: SliderRootState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Slider.Value
+
+<ParamField body="Value.className" type="string | ((state: SliderValueState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="Value.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderValueState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="Value.style" type="CSSProperties | ((state: SliderValueState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/switch.mdx

@@ -0,0 +1,96 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="checked" type="boolean">
+  Whether the switch is currently active.
+
+  To render an uncontrolled switch, use the `defaultChecked` prop instead.
+</ParamField>
+
+<ParamField body="className" type="string | ((state: SwitchRootState) =&gt; string | undefined)">
+  CSS class applied to the element, or a function that
+  returns a class based on the component's state.
+</ParamField>
+
+<ParamField body="defaultChecked" type="boolean" default="false">
+  Whether the switch is initially active.
+
+  To render a controlled switch, use the `checked` prop instead.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="form" type="string">
+  Identifies the form that owns the hidden input.
+  Useful when the switch is rendered outside the form.
+</ParamField>
+
+<ParamField body="id" type="string">
+  The id of the hidden input element.
+
+  When `nativeButton` is `true`, the id is applied to the root element.
+</ParamField>
+
+<ParamField body="inputRef" type="Ref&lt;HTMLInputElement&gt;">
+  A ref to access the hidden `<input>` element.
+</ParamField>
+
+<ParamField body="name" type="string">
+  Identifies the field when a form is submitted.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="false">
+  Whether the component renders a native `<button>` element when replacing it
+  via the `render` prop.
+  Set to `true` if the rendered element is a native button.
+</ParamField>
+
+<ParamField body="onCheckedChange" type="((checked: boolean, eventDetails: { reason: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; void)">
+  Event handler called when the switch is activated or deactivated.
+</ParamField>
+
+<ParamField body="readOnly" type="boolean" default="false">
+  Whether the user should be unable to activate or deactivate the switch.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SwitchRootState&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="required" type="boolean" default="false">
+  Whether the user must activate the switch before submitting a form.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="md">
+  Visual size of the switch.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: SwitchRootState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+<ParamField body="uncheckedValue" type="string">
+  The value submitted with the form when the switch is off.
+  By default, unchecked switches do not submit any value, matching native checkbox behavior.
+</ParamField>
+
+<ParamField body="value" type="string">
+  The value submitted with the form when the switch is on.
+  By default, switch submits the "on" value, matching native checkbox behavior.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/input/textarea.mdx

@@ -0,0 +1,41 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
+ *                              |___/
+ *
+ * This file is generated from the documentation data in packages/twenty-ui/generated.
+ * To update it, edit the component prop types or design tokens in twenty-ui and run:
+ *   npx nx generate:ui twenty-docs
+ */}
+
+<ParamField body="autoResize" type="boolean" default="false">
+  Grows the textarea with its content instead of showing a scrollbar.
+</ParamField>
+
+<ParamField body="className" type="string | ((state: InputState) =&gt; string | undefined)">
+  CSS class applied to the textarea, or a function that returns a class
+  based on the input state.
+</ParamField>
+
+<ParamField body="maxRows" type="number">
+  Maximum number of rows the textarea grows to when `autoResize` is set.
+  Longer content scrolls.
+</ParamField>
+
+<ParamField body="onValueChange" type="((value: string, eventDetails: { reason: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; void)">
+  Called with the new value when the textarea value changes.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;" default="&lt;textarea /&gt;">
+  Allows you to replace the component's HTML element
+  with a different tag, or compose it with another component.
+
+  Accepts a `ReactElement` or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="md">
+  Visual size of the textarea.
+</ParamField>