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

packages/twenty-docs/snippets/ui/generated/components/section.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
+ */}
+
+### Section.Root
+
+<ParamField body="Root.align" type="&quot;center&quot; | &quot;left&quot;" default="left">
+  Text alignment within the section. Defaults to `left`.
+</ParamField>
+
+<ParamField body="Root.color" type="&quot;primary&quot; | &quot;secondary&quot; | &quot;tertiary&quot;" default="primary">
+  Text color within the section. Defaults to `primary`.
+</ParamField>
+
+<ParamField body="Root.fullWidth" type="boolean" default="true">
+  Whether the section fills the available width. Defaults to `true`.
+</ParamField>
+
+<ParamField body="Root.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>
+
+### Section.Header
+
+<ParamField body="Header.adornment" type="ReactNode">
+  Content alongside the heading, such as an action button or status.
+</ParamField>
+
+<ParamField body="Header.color" type="&quot;primary&quot; | &quot;secondary&quot; | &quot;tertiary&quot;" default="primary">
+  Theme font color. Defaults to `primary`.
+</ParamField>
+
+<ParamField body="Header.description" type="ReactNode">
+  Supporting text associated with the heading. Strings support links and overflow tooltips; React nodes render as supplied.
+</ParamField>
+
+<ParamField body="Header.descriptionLineClamp" type="number" default="5">
+  Maximum visible lines for a string description. Defaults to `5`. Overflowing descriptions can be read in a tooltip on hover or focus.
+</ParamField>
+
+<ParamField body="Header.level" type="5 | 1 | 2 | 3 | 4 | 6" default="2">
+  Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.
+</ParamField>
+
+<ParamField body="Header.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="Header.size" type="&quot;sm&quot; | &quot;md&quot; | &quot;lg&quot; | &quot;xs&quot;" default="md">
+  Visual font size, independent of the heading level. Defaults to `md`.
+</ParamField>
+
+<ParamField body="Header.title" type="ReactNode" required>
+  Content of the section heading.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/data-display/avatar.mdx

@@ -0,0 +1,81 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="backgroundColor" type="string">
+  Background color override for a first-letter fallback.
+</ParamField>
+
+<ParamField body="borderColor" type="string">
+  Border color override for the outline fallback.
+</ParamField>
+
+<ParamField body="className" type="string | ((state: AvatarRootState) =&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="string">
+  Text color override for a first-letter fallback.
+</ParamField>
+
+<ParamField body="colorSeed" type="string">
+  Stable value used to choose fallback colors. Defaults to `name`.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Applies disabled styling and disables activation when `onClick` is supplied.
+</ParamField>
+
+<ParamField body="icon" type="ReactNode">
+  Icon rendered instead of the image and first-letter fallback.
+</ParamField>
+
+<ParamField body="name" type="string">
+  Name used for the first-letter fallback and the default accessible name when clickable.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="true">
+  Set to `false` when a clickable avatar uses `render` with an element other than a native button.
+</ParamField>
+
+<ParamField body="pulsing" type="boolean" default="false">
+  Animates the avatar opacity. Respects reduced-motion preferences.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, AvatarRootState&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="shape" type="&quot;circle&quot; | &quot;square&quot; | &quot;rounded-square&quot;" default="square">
+  Shape of the avatar and its fallback.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot; | &quot;lg&quot; | &quot;xl&quot; | &quot;xs&quot;" default="md">
+  Avatar size: `xs` (12px), `sm` (14px), `md` (16px), `lg` (24px), or `xl` (40px).
+</ParamField>
+
+<ParamField body="src" type="string | null">
+  Image URL. A missing or failed image shows the fallback.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: AvatarRootState) =&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;outline&quot; | &quot;soft&quot;" default="soft">
+  Visual treatment of the fallback.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/data-display/chip.mdx

@@ -0,0 +1,91 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="alwaysShowTooltip" type="boolean" default="false">
+  Shows the string-label tooltip even when the label is not truncated.
+</ParamField>
+
+<ParamField body="clickable" type="boolean" default="isDefined(onClick)">
+  Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not add button semantics by itself.
+</ParamField>
+
+<ParamField body="color" type="&quot;primary&quot; | &quot;secondary&quot;" default="primary">
+  Primary or secondary text color.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Applies disabled styling and disables activation when `onClick` is supplied.
+</ParamField>
+
+<ParamField body="emptyLabel" type="string" default="Untitled">
+  Placeholder shown when children are missing, empty, or false, unless `forceEmptyText` is enabled.
+</ParamField>
+
+<ParamField body="endElement" type="ReactNode">
+  Content after the label. Avoid interactive content when the chip itself is a button.
+</ParamField>
+
+<ParamField body="endElementDivider" type="boolean" default="false">
+  Adds a divider before `endElement` when that slot has content.
+</ParamField>
+
+<ParamField body="forceEmptyText" type="boolean" default="false">
+  Suppresses the empty label when children are missing, empty, or false.
+</ParamField>
+
+<ParamField body="isLabelHidden" type="boolean" default="false">
+  Hides the label while keeping the start and end elements. Supply an accessible name for an interactive chip.
+</ParamField>
+
+<ParamField body="maxWidth" type="number">
+  Maximum chip width in pixels, used to constrain and truncate the label.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="true">
+  Set to `false` when a clickable chip uses `render` with an element other than a native 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="shape" type="&quot;square&quot; | &quot;round&quot;" default="square">
+  Square or round corners.
+</ParamField>
+
+<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
+  Visual size of the chip.
+</ParamField>
+
+<ParamField body="startElement" type="ReactNode">
+  Content before the label, such as an avatar or icon.
+</ParamField>
+
+<ParamField body="tooltipLabel" type="string">
+  Tooltip content for a string label. Defaults to the label text.
+</ParamField>
+
+<ParamField body="tooltipPlace" type="&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot;">
+  Position of the string-label tooltip.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;ghost&quot; | &quot;soft&quot;" default="ghost">
+  Background treatment of the chip.
+</ParamField>
+
+<ParamField body="weight" type="&quot;regular&quot; | &quot;medium&quot;" default="regular">
+  Font weight of the label.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/data-display/status.mdx

@@ -0,0 +1,40 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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;ruby&quot; | &quot;red&quot; | &quot;crimson&quot; | &quot;tomato&quot; | &quot;orange&quot; | &quot;amber&quot; | &quot;yellow&quot; | &quot;lime&quot; | &quot;grass&quot; | &quot;green&quot; | &quot;jade&quot; | &quot;mint&quot; | &quot;turquoise&quot; | &quot;cyan&quot; | &quot;sky&quot; | &quot;blue&quot; | &quot;iris&quot; | &quot;violet&quot; | &quot;purple&quot; | &quot;plum&quot; | &quot;pink&quot; | &quot;bronze&quot; | &quot;gold&quot; | &quot;brown&quot; | &quot;gray&quot;" required>
+  Theme color used for the status background, text, and loader.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Applies disabled styling and disables activation when `onClick` is supplied.
+</ParamField>
+
+<ParamField body="loading" type="boolean" default="false">
+  Shows a loader after the label. Does not disable the control or announce a status change by itself.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="true">
+  Set to `false` when using `render` with an element other than a native button.
+</ParamField>
+
+<ParamField body="onClick" type="MouseEventHandler&lt;HTMLButtonElement&gt; | MouseEventHandler&lt;HTMLElement&gt;">
+  Handles activation and renders a native button by default. Without it, the default element is a span.
+</ParamField>
+
+<ParamField body="render" type="NonNullable&lt;ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt; | undefined&gt;">
+  Replaces the default element. Required when `nativeButton` is `false`.
+</ParamField>
+
+<ParamField body="weight" type="&quot;regular&quot; | &quot;medium&quot;" default="regular">
+  Font weight of the label.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/data-display/tag.mdx

@@ -0,0 +1,55 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="borderStyle" type="&quot;solid&quot; | &quot;dashed&quot;" default="solid">
+  Border style used by the outline variant.
+</ParamField>
+
+<ParamField body="color" type="&quot;ruby&quot; | &quot;red&quot; | &quot;crimson&quot; | &quot;tomato&quot; | &quot;orange&quot; | &quot;amber&quot; | &quot;yellow&quot; | &quot;lime&quot; | &quot;grass&quot; | &quot;green&quot; | &quot;jade&quot; | &quot;mint&quot; | &quot;turquoise&quot; | &quot;cyan&quot; | &quot;sky&quot; | &quot;blue&quot; | &quot;iris&quot; | &quot;violet&quot; | &quot;purple&quot; | &quot;plum&quot; | &quot;pink&quot; | &quot;bronze&quot; | &quot;gold&quot; | &quot;brown&quot; | &quot;gray&quot; | &quot;transparent&quot;" required>
+  Theme color for the tag, or `transparent` for an unfilled label.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Applies disabled styling and prevents pointer and keyboard activation.
+</ParamField>
+
+<ParamField body="nativeButton" type="boolean" default="true">
+  Set to `false` when a clickable tag uses `render` with an element other than a native button.
+</ParamField>
+
+<ParamField body="preventPadding" type="boolean" default="false">
+  Removes the tag padding.
+</ParamField>
+
+<ParamField body="preventShrink" type="boolean" default="false">
+  Keeps the tag from shrinking and disables string-label truncation and its tooltip.
+</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="startIcon" type="ReactNode">
+  Decorative icon before the label. Hidden from assistive technology.
+</ParamField>
+
+<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;" default="soft">
+  Visual treatment of the tag background and border.
+</ParamField>
+
+<ParamField body="weight" type="&quot;regular&quot; | &quot;medium&quot;" default="regular">
+  Font weight of the label.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/feedback/toast.mdx

@@ -0,0 +1,66 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="action" type="ReactNode">
+  Content rendered in the footer, such as an action button.
+</ParamField>
+
+<ParamField body="cancelLabel" type="string" default="Cancel">
+  Label of the cancel button.
+</ParamField>
+
+<ParamField body="closeLabel" type="string" default="Close">
+  Accessible name of the close button.
+</ParamField>
+
+<ParamField body="description" type="ReactNode">
+  Supporting content rendered below the message.
+</ParamField>
+
+<ParamField body="duration" type="number" default="6000">
+  Milliseconds before `onClose` is called. The countdown pauses while the
+  pointer is over the toast.
+</ParamField>
+
+<ParamField body="icon" type="ReactNode">
+  Replaces the variant's icon.
+</ParamField>
+
+<ParamField body="iconLabel" type="string">
+  Accessible name of the default icon. Without it, the icon is hidden from
+  assistive technology.
+</ParamField>
+
+<ParamField body="onCancel" type="(() =&gt; void)">
+  Called when the cancel button is clicked. The button renders only when
+  this callback is provided.
+</ParamField>
+
+<ParamField body="onClose" type="(() =&gt; void)">
+  Called when the close button is clicked or the countdown completes. The
+  button renders only when this callback is provided.
+</ParamField>
+
+<ParamField body="progress" type="number">
+  Completion percentage shown in the progress bar. When set, the countdown
+  is disabled.
+</ParamField>
+
+<ParamField body="render" type="RenderProp&lt;Record&lt;string, unknown&gt;&gt;">
+  Replaces the rendered element or composes it with another component.
+  Accepts a React element or a function that returns the element to render.
+</ParamField>
+
+<ParamField body="variant" type="&quot;success&quot; | &quot;warning&quot; | &quot;default&quot; | &quot;error&quot; | &quot;info&quot;" default="default">
+  Visual variant that selects the icon and colors.
+</ParamField>

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>

packages/twenty-docs/snippets/ui/generated/navigation/list-item.mdx

@@ -0,0 +1,71 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="actions" type="ReactNode">
+  Trailing content, such as buttons, rendered after the content.
+</ParamField>
+
+<ParamField body="color" type="&quot;neutral&quot; | &quot;danger&quot;" default="neutral">
+  Color of the text and icons. `danger` marks a destructive action.
+</ParamField>
+
+<ParamField body="description" type="ReactNode">
+  Supporting text, placed according to `descriptionPlacement`.
+</ParamField>
+
+<ParamField body="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="disabled" type="boolean" default="false">
+  Prevents clicks and applies the disabled style.
+</ParamField>
+
+<ParamField body="endIcon" type="ReactNode">
+  Icon rendered after the content.
+</ParamField>
+
+<ParamField body="focused" type="boolean" default="false">
+  Applies the highlighted style, for example to the focused item of a list.
+</ParamField>
+
+<ParamField body="hasSubmenu" type="boolean" default="false">
+  Shows a chevron indicating that the item opens a submenu.
+</ParamField>
+
+<ParamField body="hotkeys" type="string[]">
+  Keyboard shortcut keys displayed at the end of the row. Registering the
+  shortcut is up to the application.
+</ParamField>
+
+<ParamField body="indicator" type="&quot;none&quot; | &quot;checkbox&quot; | &quot;check&quot;" default="none">
+  Selection indicator: a check icon after the content or a checkbox before
+  it.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ListItemState&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="selected" type="boolean" default="false">
+  Whether the item is selected. Shows the check or checkbox indicator when
+  `indicator` is set.
+</ParamField>
+
+<ParamField body="startIcon" type="ReactNode">
+  Icon rendered before the content.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/navigation/tabs.mdx

@@ -0,0 +1,171 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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
+ */}
+
+### Tabs.Root
+
+<ParamField body="Root.className" type="string | ((state: TabsRootState) =&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.defaultValue" type="any" default="0">
+  The default value. Use when the component is not controlled.
+  When the value is `null`, no Tab will be active.
+</ParamField>
+
+<ParamField body="Root.onValueChange" type="((value: any, eventDetails: TabsRootChangeEventDetails) =&gt; void)">
+  Callback invoked when new value is being set.
+
+  The event `reason` is `'none'` for user-initiated changes, such as a click
+  or keyboard navigation; `'initial'` for the first automatic selection or
+  fallback in uncontrolled roots when `defaultValue` is omitted or
+  `undefined`, including when the implicit initial value is disabled or
+  missing; `'disabled'` for automatic fallback when the selected tab becomes
+  disabled in uncontrolled roots; or `'missing'` for automatic fallback when
+  the selected tab is removed, or when an explicit `defaultValue` never
+  matches a mounted tab in uncontrolled roots.
+
+  For automatic changes, the selected value can be `null` when no enabled Tab
+  is available as a fallback.
+
+  Automatic changes cannot be canceled; calling `eventDetails.cancel()` for
+  `'initial'`, `'disabled'`, or `'missing'` has no effect.
+</ParamField>
+
+<ParamField body="Root.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="horizontal">
+  The component orientation (layout flow direction).
+</ParamField>
+
+<ParamField body="Root.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsRootState&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: TabsRootState) =&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.value" type="any">
+  The value of the currently active `Tab`. Use when the component is controlled.
+  When the value is `null`, no Tab will be active.
+</ParamField>
+
+### Tabs.List
+
+<ParamField body="List.activateOnFocus" type="boolean" default="false">
+  Whether to automatically change the active tab on arrow key focus.
+  Otherwise, tabs will be activated using &lt;kbd>Enter&lt;/kbd> or &lt;kbd>Space&lt;/kbd> key press.
+</ParamField>
+
+<ParamField body="List.className" type="string | ((state: TabsListState) =&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="List.loopFocus" type="boolean" default="true">
+  Whether to loop keyboard focus back to the first item
+  when the end of the list is reached while using the arrow keys.
+</ParamField>
+
+<ParamField body="List.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsListState&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="List.style" type="CSSProperties | ((state: TabsListState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Tabs.Tab
+
+<ParamField body="Tab.badge" type="ReactNode">
+  Content rendered after the label, such as a count.
+</ParamField>
+
+<ParamField body="Tab.className" type="string | ((state: TabsTabState) =&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="Tab.disabled" type="boolean">
+  Whether the Tab is disabled.
+
+  If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.
+  Instead, the next enabled Tab will be selected.
+  However, it does not work like this during server-side rendering, as it is not known
+  during pre-rendering which Tabs are disabled.
+  To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
+</ParamField>
+
+<ParamField body="Tab.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="Tab.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsTabState&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="Tab.size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
+  Visual size of the tab.
+</ParamField>
+
+<ParamField body="Tab.startIcon" type="ReactNode">
+  Icon rendered before the label.
+</ParamField>
+
+<ParamField body="Tab.style" type="CSSProperties | ((state: TabsTabState) =&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="Tab.value" type="any" required>
+  The value of the Tab.
+</ParamField>
+
+### Tabs.Panel
+
+<ParamField body="Panel.className" type="string | ((state: TabsPanelState) =&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="Panel.keepMounted" type="boolean" default="false">
+  Whether to keep the HTML element in the DOM while the panel is hidden.
+</ParamField>
+
+<ParamField body="Panel.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsPanelState&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="Panel.style" type="CSSProperties | ((state: TabsPanelState) =&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="Panel.value" type="any" required>
+  The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/surfaces/alert-dialog.mdx

@@ -0,0 +1,244 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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
+ */}
+
+### AlertDialog.Root
+
+<ParamField body="Root.actionsRef" type="RefObject&lt;DialogRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Manually unmounts the alert dialog.
+  Call this after any externally controlled closing animation finishes.
+  - `close`: Closes the alert dialog imperatively when called.
+</ParamField>
+
+<ParamField body="Root.children" type="ReactNode | PayloadChildRenderFunction&lt;Payload&gt;">
+  The content of the dialog.
+  This can be a regular React node or a render function that receives the `payload` of the active trigger.
+</ParamField>
+
+<ParamField body="Root.defaultOpen" type="boolean" default="false">
+  Whether the dialog is initially open.
+
+  To render a controlled dialog, use the `open` prop instead.
+</ParamField>
+
+<ParamField body="Root.defaultTriggerId" type="string | null">
+  ID of the trigger that the dialog is associated with.
+  This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
+</ParamField>
+
+<ParamField body="Root.handle" type="AlertDialogHandle&lt;Payload&gt;">
+  A handle to associate the alert dialog with a trigger.
+  If specified, allows external triggers to control the alert dialog's open state.
+  Can be created with the AlertDialog.createHandle() method.
+</ParamField>
+
+<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) =&gt; void)">
+  Event handler called when the alert dialog is opened or closed.
+</ParamField>
+
+<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the dialog is opened or closed.
+</ParamField>
+
+<ParamField body="Root.open" type="boolean">
+  Whether the dialog is currently open.
+</ParamField>
+
+<ParamField body="Root.triggerId" type="string | null">
+  ID of the trigger that the dialog is associated with.
+  This is useful in conjunction with the `open` prop to create a controlled dialog.
+  There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).
+</ParamField>
+
+### AlertDialog.Trigger
+
+<ParamField body="Trigger.className" type="string | ((state: DialogTriggerState) =&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.handle" type="AlertDialogHandle&lt;Payload&gt;">
+  A handle to associate the trigger with an alert dialog.
+  Can be created with the AlertDialog.createHandle() method.
+</ParamField>
+
+<ParamField body="Trigger.id" type="string">
+  ID of the trigger. In addition to being forwarded to the rendered element,
+  it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).
+</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.payload" type="Payload">
+  A payload to pass to the dialog when it is opened.
+</ParamField>
+
+<ParamField body="Trigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogTriggerState&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.style" type="CSSProperties | ((state: DialogTriggerState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### AlertDialog.Popup
+
+<ParamField body="Popup.className" type="string | ((state: DialogPopupState) =&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 dialog 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 dialog 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, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
+</ParamField>
+
+<ParamField body="Popup.initialFocus" type="boolean | RefObject&lt;HTMLElement | null&gt; | ((openType: InteractionType) =&gt; boolean | void | HTMLElement | null)">
+  Determines the element to focus when the dialog is opened.
+  By default, focus moves to the first tabbable element inside the popup, except when the dialog
+  is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.
+
+  - `false`: Do not move focus.
+  - `true`: Move focus based on the default behavior (first tabbable element or popup).
+  - `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, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
+</ParamField>
+
+<ParamField body="Popup.keepMounted" type="boolean">
+  Keeps the dialog mounted in the DOM while it is closed.
+</ParamField>
+
+<ParamField body="Popup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogPopupState&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.size" type="&quot;sm&quot; | &quot;md&quot; | &quot;lg&quot; | &quot;xl&quot; | &quot;fullscreen&quot;" default="md">
+  Width of the dialog, or `fullscreen` to fill the viewport.
+</ParamField>
+
+<ParamField body="Popup.style" type="CSSProperties | ((state: DialogPopupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### AlertDialog.Title
+
+<ParamField body="Title.className" type="string | ((state: DialogTitleState) =&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="Title.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogTitleState&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="Title.style" type="CSSProperties | ((state: DialogTitleState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### AlertDialog.Description
+
+<ParamField body="Description.className" type="string | ((state: DialogDescriptionState) =&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, DialogDescriptionState&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: DialogDescriptionState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### AlertDialog.Close
+
+<ParamField body="Close.className" type="string | ((state: DialogCloseState) =&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="Close.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="Close.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogCloseState&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="Close.style" type="CSSProperties | ((state: DialogCloseState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### AlertDialog.Header
+
+<ParamField body="Header.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>
+
+### AlertDialog.Body
+
+<ParamField body="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>
+
+### AlertDialog.Footer
+
+<ParamField body="Footer.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>

packages/twenty-docs/snippets/ui/generated/surfaces/dialog.mdx

@@ -0,0 +1,43 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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
+ */}
+
+### Dialog.Title
+
+<ParamField body="Title.className" type="string | ((state: DialogTitleState) =&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="Title.color" type="&quot;primary&quot; | &quot;secondary&quot; | &quot;tertiary&quot;" default="primary">
+  Theme font color. Defaults to `primary`.
+</ParamField>
+
+<ParamField body="Title.level" type="5 | 1 | 2 | 3 | 4 | 6" default="2">
+  Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.
+</ParamField>
+
+<ParamField body="Title.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogTitleState&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="Title.size" type="&quot;sm&quot; | &quot;md&quot; | &quot;lg&quot; | &quot;xs&quot;" default="lg">
+  Visual font size, independent of the heading level. Defaults to `lg`.
+</ParamField>
+
+<ParamField body="Title.style" type="CSSProperties | ((state: DialogTitleState) =&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/surfaces/menu.mdx

@@ -0,0 +1,674 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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
+ */}
+
+### Menu.Root
+
+<ParamField body="Root.actionsRef" type="RefObject&lt;MenuRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Manually unmounts the menu.
+    Call this after any externally controlled closing animation finishes.
+  - `close`: When specified, the menu can be closed imperatively.
+</ParamField>
+
+<ParamField body="Root.children" type="ReactNode | PayloadChildRenderFunction&lt;Payload&gt;">
+  The content of the menu.
+  This can be a regular React node or a render function that receives the `payload` of the active trigger.
+</ParamField>
+
+<ParamField body="Root.closeParentOnEsc" type="boolean" default="false">
+  When in a submenu, determines whether pressing the Escape key
+  closes the entire menu, or only the current child menu.
+</ParamField>
+
+<ParamField body="Root.defaultOpen" type="boolean" default="false">
+  Whether the menu is initially open.
+
+  To render a controlled menu, use the `open` prop instead.
+</ParamField>
+
+<ParamField body="Root.defaultTriggerId" type="string | null">
+  ID of the trigger that the menu is associated with.
+  This is useful in conjunction with the `defaultOpen` prop to create an initially open menu.
+</ParamField>
+
+<ParamField body="Root.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="Root.handle" type="MenuHandle&lt;Payload&gt;">
+  A handle to associate the menu with a trigger.
+  If specified, allows external triggers to control the menu's open state.
+</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.loopFocus" type="boolean" default="true">
+  Whether to loop keyboard focus back to the first item
+  when the end of the list is reached while using the arrow keys.
+</ParamField>
+
+<ParamField body="Root.modal" type="boolean" default="true">
+  Determines if the menu enters a modal state when open.
+  - `true`: user interaction is limited to the menu: 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.
+
+  Nested menus ignore this prop, and menus opened by hover are never modal.
+</ParamField>
+
+<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: MenuRootChangeEventDetails) =&gt; void)">
+  Event handler called when the menu is opened or closed.
+</ParamField>
+
+<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the menu is opened or closed.
+</ParamField>
+
+<ParamField body="Root.open" type="boolean">
+  Whether the menu is currently open.
+</ParamField>
+
+<ParamField body="Root.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="vertical">
+  The visual orientation of the menu.
+  Controls whether roving focus uses up/down or left/right arrow keys.
+</ParamField>
+
+<ParamField body="Root.triggerId" type="string | null">
+  ID of the trigger that the menu is associated with.
+  This is useful in conjunction with the `open` prop to create a controlled menu.
+  There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).
+</ParamField>
+
+### Menu.Trigger
+
+<ParamField body="Trigger.className" type="string | ((state: MenuTriggerState) =&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.closeDelay" type="number" default="0">
+  How long to wait before closing the menu that was opened on hover.
+  Specified in milliseconds.
+
+  Requires the `openOnHover` prop.
+</ParamField>
+
+<ParamField body="Trigger.delay" type="number" default="100">
+  How long to wait before the menu may be opened on hover. Specified in milliseconds.
+
+  Requires the `openOnHover` prop.
+</ParamField>
+
+<ParamField body="Trigger.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="Trigger.handle" type="MenuHandle&lt;Payload&gt;">
+  A handle to associate the trigger with a menu.
+</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.openOnHover" type="boolean">
+  Whether the menu should also open when the trigger is hovered.
+</ParamField>
+
+<ParamField body="Trigger.payload" type="Payload">
+  A payload to pass to the menu when it is opened.
+</ParamField>
+
+<ParamField body="Trigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuTriggerState&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.style" type="CSSProperties | ((state: MenuTriggerState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.Popup
+
+<ParamField body="Popup.align" type="&quot;center&quot; | &quot;start&quot; | &quot;end&quot;">
+  Alignment of the popup along the anchor. Defaults to `start`.
+</ParamField>
+
+<ParamField body="Popup.alignOffset" type="number">
+  Offset in pixels along the alignment axis. Defaults to `0` for a menu and
+  `-4` for a submenu.
+</ParamField>
+
+<ParamField body="Popup.anchor" type="Element | VirtualElement | RefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null) | null">
+  Element or position the popup is anchored to. Defaults to the trigger.
+</ParamField>
+
+<ParamField body="Popup.className" type="string | ((state: MenuPopupState) =&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 menu 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.keepMounted" type="boolean">
+  Keeps the popup mounted in the DOM while the menu is closed.
+</ParamField>
+
+<ParamField body="Popup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuPopupState&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;">
+  Side of the anchor the popup is placed on. Defaults to `bottom` for a menu
+  and `inline-end` for a submenu.
+</ParamField>
+
+<ParamField body="Popup.sideOffset" type="number">
+  Distance in pixels between the anchor and the popup. Defaults to `8` for a
+  menu and `0` for a submenu.
+</ParamField>
+
+<ParamField body="Popup.style" type="CSSProperties | ((state: MenuPopupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.Item
+
+<ParamField body="Item.className" type="string | ((state: MenuItemState) =&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.closeOnClick" type="boolean" default="true">
+  Whether to close the menu when the item is clicked.
+</ParamField>
+
+<ParamField body="Item.color" type="&quot;neutral&quot; | &quot;danger&quot;">
+  Color of the text and icons. `danger` marks a destructive action.
+</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;">
+  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.hotkeys" type="string[]">
+  Keyboard shortcut keys displayed at the end of the row. Registering the
+  shortcut is up to the application.
+</ParamField>
+
+<ParamField body="Item.label" type="string">
+  Overrides the text label to use when the item is matched during keyboard text navigation.
+</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.onClick" type="((event: BaseUIEvent&lt;MouseEvent&lt;HTMLDivElement, MouseEvent&gt;&gt;) =&gt; void)">
+  The click handler for the menu item.
+</ParamField>
+
+<ParamField body="Item.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuItemState&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: MenuItemState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.CheckboxItem
+
+<ParamField body="CheckboxItem.checked" type="boolean">
+  Whether the checkbox item is currently ticked.
+
+  To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
+</ParamField>
+
+<ParamField body="CheckboxItem.className" type="string | ((state: MenuCheckboxItemState) =&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="CheckboxItem.closeOnClick" type="boolean" default="false">
+  Whether to close the menu when the item is clicked.
+</ParamField>
+
+<ParamField body="CheckboxItem.color" type="&quot;neutral&quot; | &quot;danger&quot;">
+  Color of the text and icons. `danger` marks a destructive action.
+</ParamField>
+
+<ParamField body="CheckboxItem.defaultChecked" type="boolean" default="false">
+  Whether the checkbox item is initially ticked.
+
+  To render a controlled checkbox item, use the `checked` prop instead.
+</ParamField>
+
+<ParamField body="CheckboxItem.description" type="ReactNode">
+  Supporting text, placed according to `descriptionPlacement`.
+</ParamField>
+
+<ParamField body="CheckboxItem.descriptionPlacement" type="&quot;inline&quot; | &quot;end&quot;">
+  Where the description renders: inline after the content or at the end of
+  the row.
+</ParamField>
+
+<ParamField body="CheckboxItem.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="CheckboxItem.endIcon" type="ReactNode">
+  Icon rendered after the content.
+</ParamField>
+
+<ParamField body="CheckboxItem.hotkeys" type="string[]">
+  Keyboard shortcut keys displayed at the end of the row. Registering the
+  shortcut is up to the application.
+</ParamField>
+
+<ParamField body="CheckboxItem.label" type="string">
+  Overrides the text label to use when the item is matched during keyboard text navigation.
+</ParamField>
+
+<ParamField body="CheckboxItem.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="CheckboxItem.onCheckedChange" type="((checked: boolean, eventDetails: MenuRootChangeEventDetails) =&gt; void)">
+  Event handler called when the checkbox item is ticked or unticked.
+</ParamField>
+
+<ParamField body="CheckboxItem.onClick" type="((event: BaseUIEvent&lt;MouseEvent&lt;HTMLDivElement, MouseEvent&gt;&gt;) =&gt; void)">
+  The click handler for the menu item.
+</ParamField>
+
+<ParamField body="CheckboxItem.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuCheckboxItemState&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="CheckboxItem.startIcon" type="ReactNode">
+  Icon rendered before the content.
+</ParamField>
+
+<ParamField body="CheckboxItem.style" type="CSSProperties | ((state: MenuCheckboxItemState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.RadioGroup
+
+<ParamField body="RadioGroup.children" type="ReactNode">
+  The content of the component.
+</ParamField>
+
+<ParamField body="RadioGroup.className" type="string | ((state: MenuRadioGroupState) =&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="RadioGroup.defaultValue" type="any">
+  The uncontrolled value of the radio item that should be initially selected.
+
+  To render a controlled radio group, use the `value` prop instead.
+</ParamField>
+
+<ParamField body="RadioGroup.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="RadioGroup.onValueChange" type="((value: any, eventDetails: MenuRootChangeEventDetails) =&gt; void)">
+  Function called when the selected value changes.
+</ParamField>
+
+<ParamField body="RadioGroup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuRadioGroupState&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="RadioGroup.style" type="CSSProperties | ((state: MenuRadioGroupState) =&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="RadioGroup.value" type="any">
+  The controlled value of the radio item that should be currently selected.
+
+  To render an uncontrolled radio group, use the `defaultValue` prop instead.
+</ParamField>
+
+### Menu.RadioItem
+
+<ParamField body="RadioItem.className" type="string | ((state: MenuRadioItemState) =&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="RadioItem.closeOnClick" type="boolean" default="false">
+  Whether to close the menu when the item is clicked.
+</ParamField>
+
+<ParamField body="RadioItem.color" type="&quot;neutral&quot; | &quot;danger&quot;">
+  Color of the text and icons. `danger` marks a destructive action.
+</ParamField>
+
+<ParamField body="RadioItem.description" type="ReactNode">
+  Supporting text, placed according to `descriptionPlacement`.
+</ParamField>
+
+<ParamField body="RadioItem.descriptionPlacement" type="&quot;inline&quot; | &quot;end&quot;">
+  Where the description renders: inline after the content or at the end of
+  the row.
+</ParamField>
+
+<ParamField body="RadioItem.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="RadioItem.endIcon" type="ReactNode">
+  Icon rendered after the content.
+</ParamField>
+
+<ParamField body="RadioItem.hotkeys" type="string[]">
+  Keyboard shortcut keys displayed at the end of the row. Registering the
+  shortcut is up to the application.
+</ParamField>
+
+<ParamField body="RadioItem.label" type="string">
+  Overrides the text label to use when the item is matched during keyboard text navigation.
+</ParamField>
+
+<ParamField body="RadioItem.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="RadioItem.onClick" type="((event: BaseUIEvent&lt;MouseEvent&lt;HTMLDivElement, MouseEvent&gt;&gt;) =&gt; void)">
+  The click handler for the menu item.
+</ParamField>
+
+<ParamField body="RadioItem.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuRadioItemState&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="RadioItem.startIcon" type="ReactNode">
+  Icon rendered before the content.
+</ParamField>
+
+<ParamField body="RadioItem.style" type="CSSProperties | ((state: MenuRadioItemState) =&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="RadioItem.value" type="any" required>
+  Value of the radio item.
+  This is the value that will be set in the MenuRadioGroup when the item is selected.
+</ParamField>
+
+### Menu.Group
+
+<ParamField body="Group.children" type="ReactNode">
+  The content of the component.
+</ParamField>
+
+<ParamField body="Group.className" type="string | ((state: MenuGroupState) =&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, MenuGroupState&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: MenuGroupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.GroupLabel
+
+<ParamField body="GroupLabel.className" type="string | ((state: MenuGroupLabelState) =&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, MenuGroupLabelState&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: MenuGroupLabelState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.Separator
+
+<ParamField body="Separator.className" type="string | ((state: SeparatorState) =&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, SeparatorState&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: SeparatorState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Menu.SubmenuRoot
+
+<ParamField body="SubmenuRoot.actionsRef" type="RefObject&lt;MenuRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Manually unmounts the menu.
+    Call this after any externally controlled closing animation finishes.
+  - `close`: When specified, the menu can be closed imperatively.
+</ParamField>
+
+<ParamField body="SubmenuRoot.children" type="ReactNode">
+  The content of the submenu.
+</ParamField>
+
+<ParamField body="SubmenuRoot.closeParentOnEsc" type="boolean" default="false">
+  When in a submenu, determines whether pressing the Escape key
+  closes the entire menu, or only the current child menu.
+</ParamField>
+
+<ParamField body="SubmenuRoot.defaultOpen" type="boolean" default="false">
+  Whether the menu is initially open.
+
+  To render a controlled menu, use the `open` prop instead.
+</ParamField>
+
+<ParamField body="SubmenuRoot.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="SubmenuRoot.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="SubmenuRoot.loopFocus" type="boolean" default="true">
+  Whether to loop keyboard focus back to the first item
+  when the end of the list is reached while using the arrow keys.
+</ParamField>
+
+<ParamField body="SubmenuRoot.onOpenChange" type="((open: boolean, eventDetails: MenuRootChangeEventDetails) =&gt; void)">
+  Event handler called when the menu is opened or closed.
+</ParamField>
+
+<ParamField body="SubmenuRoot.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the menu is opened or closed.
+</ParamField>
+
+<ParamField body="SubmenuRoot.open" type="boolean">
+  Whether the menu is currently open.
+</ParamField>
+
+<ParamField body="SubmenuRoot.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="vertical">
+  The visual orientation of the menu.
+  Controls whether roving focus uses up/down or left/right arrow keys.
+</ParamField>
+
+### Menu.SubmenuTrigger
+
+<ParamField body="SubmenuTrigger.className" type="string | ((state: MenuSubmenuTriggerState) =&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="SubmenuTrigger.closeDelay" type="number" default="0">
+  How long to wait before closing the menu that was opened on hover.
+  Specified in milliseconds.
+
+  Requires the `openOnHover` prop.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.color" type="&quot;neutral&quot; | &quot;danger&quot;">
+  Color of the text and icons. `danger` marks a destructive action.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.delay" type="number" default="100">
+  How long to wait before the menu may be opened on hover. Specified in milliseconds.
+
+  Requires the `openOnHover` prop.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.description" type="ReactNode">
+  Supporting text, placed according to `descriptionPlacement`.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.descriptionPlacement" type="&quot;inline&quot; | &quot;end&quot;">
+  Where the description renders: inline after the content or at the end of
+  the row.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.disabled" type="boolean" default="false">
+  Whether the component should ignore user interaction.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.endIcon" type="ReactNode">
+  Icon rendered after the content.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.hotkeys" type="string[]">
+  Keyboard shortcut keys displayed at the end of the row. Registering the
+  shortcut is up to the application.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.label" type="string">
+  Overrides the text label to use when the item is matched during keyboard text navigation.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.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="SubmenuTrigger.onClick" type="((event: BaseUIEvent&lt;MouseEvent&lt;HTMLDivElement, MouseEvent&gt;&gt;) =&gt; void)">
+
+</ParamField>
+
+<ParamField body="SubmenuTrigger.openOnHover" type="boolean" default="true">
+  Whether the menu should also open when the trigger is hovered.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, MenuSubmenuTriggerState&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="SubmenuTrigger.startIcon" type="ReactNode">
+  Icon rendered before the content.
+</ParamField>
+
+<ParamField body="SubmenuTrigger.style" type="CSSProperties | ((state: MenuSubmenuTriggerState) =&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/surfaces/popover.mdx

@@ -0,0 +1,268 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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
+ */}
+
+### Popover.Root
+
+<ParamField body="Root.actionsRef" type="RefObject&lt;PopoverRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Manually unmounts the popover.
+  Call this after any externally controlled closing animation finishes.
+  - `close`: Closes the popover imperatively when called.
+</ParamField>
+
+<ParamField body="Root.children" type="ReactNode | PayloadChildRenderFunction&lt;Payload&gt;">
+  The content of the popover.
+  This can be a regular React node or a render function that receives the `payload` of the active trigger.
+</ParamField>
+
+<ParamField body="Root.defaultOpen" type="boolean" default="false">
+  Whether the popover is initially open.
+
+  To render a controlled popover, use the `open` prop instead.
+</ParamField>
+
+<ParamField body="Root.defaultTriggerId" type="string | null">
+  ID of the trigger that the popover is associated with.
+  This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
+</ParamField>
+
+<ParamField body="Root.handle" type="PopoverHandle&lt;Payload&gt;">
+  A handle to associate the popover with a trigger.
+  If specified, allows external triggers to control the popover's open state.
+</ParamField>
+
+<ParamField body="Root.modal" type="boolean | &quot;trap-focus&quot;" default="false">
+  Determines if the popover enters a modal state when open.
+  - `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.
+  - `false`: user interaction with the rest of the document is allowed.
+  - `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+
+  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.
+
+  When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered
+  inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as
+  Tailwind's `sr-only` utility.
+
+  When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch
+  screen readers can escape the popup.
+</ParamField>
+
+<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: PopoverRootChangeEventDetails) =&gt; void)">
+  Event handler called when the popover is opened or closed.
+</ParamField>
+
+<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the popover is opened or closed.
+</ParamField>
+
+<ParamField body="Root.open" type="boolean">
+  Whether the popover is currently open.
+</ParamField>
+
+<ParamField body="Root.triggerId" type="string | null">
+  ID of the trigger that the popover is associated with.
+  This is useful in conjunction with the `open` prop to create a controlled popover.
+  There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
+</ParamField>
+
+### Popover.Trigger
+
+<ParamField body="Trigger.className" type="string | ((state: PopoverTriggerState) =&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.closeDelay" type="number" default="0">
+  How long to wait before closing the popover that was opened on hover.
+  Specified in milliseconds.
+
+  Requires the `openOnHover` prop.
+</ParamField>
+
+<ParamField body="Trigger.delay" type="number" default="300">
+  How long to wait before the popover may be opened on hover. Specified in milliseconds.
+
+  Requires the `openOnHover` prop.
+</ParamField>
+
+<ParamField body="Trigger.handle" type="PopoverHandle&lt;Payload&gt;">
+  A handle to associate the trigger with a popover.
+</ParamField>
+
+<ParamField body="Trigger.id" type="string">
+  ID of the trigger. In addition to being forwarded to the rendered element,
+  it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop).
+</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 (e.g. `<div>`).
+</ParamField>
+
+<ParamField body="Trigger.openOnHover" type="boolean" default="false">
+  Whether the popover should also open when the trigger is hovered.
+</ParamField>
+
+<ParamField body="Trigger.payload" type="Payload">
+  A payload to pass to the popover when it is opened.
+</ParamField>
+
+<ParamField body="Trigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, PopoverTriggerState&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.style" type="CSSProperties | ((state: PopoverTriggerState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Popover.Popup
+
+<ParamField body="Popup.align" type="&quot;center&quot; | &quot;start&quot; | &quot;end&quot;" default="center">
+  Alignment of the popup along the anchor.
+</ParamField>
+
+<ParamField body="Popup.alignOffset" type="number">
+  Offset in pixels along the alignment axis.
+</ParamField>
+
+<ParamField body="Popup.anchor" type="Element | VirtualElement | RefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null) | null">
+  Element or position the popup is anchored to. Defaults to the trigger.
+</ParamField>
+
+<ParamField body="Popup.arrow" type="boolean" default="false">
+  Shows an arrow pointing at the anchor.
+</ParamField>
+
+<ParamField body="Popup.className" type="string | ((state: PopoverPopupState) =&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 popover 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, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
+</ParamField>
+
+<ParamField body="Popup.initialFocus" type="boolean | RefObject&lt;HTMLElement | null&gt; | ((openType: InteractionType) =&gt; boolean | void | HTMLElement | null)">
+  Determines the element to focus when the popover is opened.
+  By default, focus moves to the first tabbable element inside the popup, except when the popover
+  is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.
+
+  - `false`: Do not move focus.
+  - `true`: Move focus based on the default behavior (first tabbable element or popup).
+  - `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, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
+</ParamField>
+
+<ParamField body="Popup.keepMounted" type="boolean">
+  Keeps the popup mounted in the DOM while the popover is closed.
+</ParamField>
+
+<ParamField body="Popup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, PopoverPopupState&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">
+  Side of the anchor the popup is placed on.
+</ParamField>
+
+<ParamField body="Popup.sideOffset" type="number" default="8">
+  Distance in pixels between the anchor and the popup.
+</ParamField>
+
+<ParamField body="Popup.style" type="CSSProperties | ((state: PopoverPopupState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Popover.Title
+
+<ParamField body="Title.className" type="string | ((state: PopoverTitleState) =&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="Title.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, PopoverTitleState&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="Title.style" type="CSSProperties | ((state: PopoverTitleState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Popover.Description
+
+<ParamField body="Description.className" type="string | ((state: PopoverDescriptionState) =&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, PopoverDescriptionState&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: PopoverDescriptionState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Popover.Close
+
+<ParamField body="Close.className" type="string | ((state: PopoverCloseState) =&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="Close.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="Close.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, PopoverCloseState&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="Close.style" type="CSSProperties | ((state: PopoverCloseState) =&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/surfaces/tooltip.mdx

@@ -0,0 +1,416 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="actionsRef" type="RefObject&lt;TooltipRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Unmounts the tooltip popup.
+  - `close`: Closes the tooltip imperatively when called.
+</ParamField>
+
+<ParamField body="align" type="&quot;center&quot; | &quot;start&quot; | &quot;end&quot;">
+  Alignment relative to the trigger. Defaults to center.
+</ParamField>
+
+<ParamField body="alignOffset" type="number | OffsetFunction" default="0">
+  Offset along the alignment axis in pixels.
+</ParamField>
+
+<ParamField body="anchor" type="Element | VirtualElement | RefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null) | null">
+  An explicit positioning anchor for the popup.
+</ParamField>
+
+<ParamField body="arrow" type="boolean">
+  Displays an arrow pointing to the trigger. Defaults to false.
+</ParamField>
+
+<ParamField body="children" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt;" required>
+  A single trigger element. Custom components must forward their ref, native attributes, and event handlers.
+</ParamField>
+
+<ParamField body="className" type="string | ((state: TooltipPopupState) =&gt; string | undefined)">
+  Additional CSS class for the popup.
+</ParamField>
+
+<ParamField body="closeDelay" type="number" default="0">
+  Delay in milliseconds before closing after hover ends. Defaults to 0.
+</ParamField>
+
+<ParamField body="closeOnClick" type="boolean" default="true">
+  Whether the tooltip should close when this trigger is clicked.
+</ParamField>
+
+<ParamField body="collisionAvoidance" type="CollisionAvoidance">
+  Determines how to handle collisions when positioning the popup.
+
+  `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
+  - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
+    (`top` and `bottom`, or `left` and `right`).
+  - `'shift'`: never change side; keep the requested side and move the popup within
+    the clipping boundary so it stays visible.
+  - `'none'`: do not correct side-axis overflow.
+
+  `align` controls overflow on the alignment axis (`start`/`center`/`end`):
+  - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
+  - `'shift'`: keep side and requested alignment, then nudge the popup along the
+    alignment axis to fit.
+  - `'none'`: do not correct alignment-axis overflow.
+
+  `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
+  preferred axis cannot fit:
+  - `'start'`: allow perpendicular fallback and try the logical start side first
+    (`top` before `bottom`, or `left` before `right` in LTR).
+  - `'end'`: allow perpendicular fallback and try the logical end side first
+    (`bottom` before `top`, or `right` before `left` in LTR).
+  - `'none'`: do not fallback to the perpendicular axis.
+
+  When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
+  If `align` is omitted, it defaults to `'flip'`.
+</ParamField>
+
+<ParamField body="collisionBoundary" type="Boundary" default="clipping-ancestors">
+  An element or a rectangle that delimits the area that the popup is confined to.
+</ParamField>
+
+<ParamField body="collisionPadding" type="Padding" default="5">
+  Additional space to maintain from the edge of the collision boundary.
+</ParamField>
+
+<ParamField body="container" type="HTMLElement | ShadowRoot | RefObject&lt;HTMLElement | ShadowRoot | null&gt; | null">
+  Portal destination. Defaults to the current theme container.
+</ParamField>
+
+<ParamField body="content" type="ReactNode" required>
+  Supplementary content displayed in the tooltip.
+</ParamField>
+
+<ParamField body="defaultOpen" type="boolean" default="false">
+  Initial visibility when the tooltip manages its own state.
+</ParamField>
+
+<ParamField body="defaultTriggerId" type="string | null">
+  ID of the trigger that the tooltip is associated with.
+  This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
+</ParamField>
+
+<ParamField body="delay" type="number" default="600">
+  Delay in milliseconds before opening on hover. Defaults to 600.
+</ParamField>
+
+<ParamField body="disableAnchorTracking" type="boolean" default="false">
+  Whether to disable the popup from tracking any layout shift of its positioning anchor.
+</ParamField>
+
+<ParamField body="disabled" type="boolean" default="false">
+  Prevents the tooltip from opening.
+</ParamField>
+
+<ParamField body="disableHoverablePopup" type="boolean" default="false">
+  Prevents hovering over the popup from keeping it open.
+</ParamField>
+
+<ParamField body="keepMounted" type="boolean">
+  Keeps the popup mounted while closed.
+</ParamField>
+
+<ParamField body="maxWidth" type="MaxWidth&lt;string | number&gt;">
+  Maximum popup width. Defaults to 300 pixels.
+</ParamField>
+
+<ParamField body="onOpenChange" type="((open: boolean, eventDetails: TooltipRootChangeEventDetails) =&gt; void)">
+  Called when an interaction requests a visibility change.
+</ParamField>
+
+<ParamField body="onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the tooltip is opened or closed.
+</ParamField>
+
+<ParamField body="open" type="boolean">
+  Controlled visibility of the tooltip.
+</ParamField>
+
+<ParamField body="positionMethod" type="&quot;absolute&quot; | &quot;fixed&quot;" default="absolute">
+  CSS positioning method for the popup.
+</ParamField>
+
+<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TooltipPopupState&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="side" type="&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot;">
+  Preferred side of the trigger. Defaults to top and may change to avoid collisions.
+</ParamField>
+
+<ParamField body="sideOffset" type="number | OffsetFunction" default="10">
+  Distance from the trigger in pixels. Defaults to 10.
+</ParamField>
+
+<ParamField body="sticky" type="boolean" default="false">
+  Whether to maintain the popup in the viewport after
+  the anchor element was scrolled out of view.
+</ParamField>
+
+<ParamField body="style" type="CSSProperties | ((state: TooltipPopupState) =&gt; CSSProperties | undefined)">
+  Inline styles for the popup.
+</ParamField>
+
+<ParamField body="trackCursorAxis" type="&quot;none&quot; | &quot;both&quot; | &quot;x&quot; | &quot;y&quot;" default="none">
+  Determines which axis the tooltip should track the cursor on.
+</ParamField>
+
+<ParamField body="triggerId" type="string | null">
+  ID of the trigger that the tooltip is associated with.
+  This is useful in conjunction with the `open` prop to create a controlled tooltip.
+  There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).
+</ParamField>
+
+### Tooltip.Root
+
+<ParamField body="Root.actionsRef" type="RefObject&lt;TooltipRootActions | null&gt;">
+  A ref to imperative actions.
+  - `unmount`: Unmounts the tooltip popup.
+  - `close`: Closes the tooltip imperatively when called.
+</ParamField>
+
+<ParamField body="Root.children" type="ReactNode | PayloadChildRenderFunction&lt;Payload&gt;">
+  The content of the tooltip.
+  This can be a regular React node or a render function that receives the `payload` of the active trigger.
+</ParamField>
+
+<ParamField body="Root.defaultOpen" type="boolean" default="false">
+  Whether the tooltip is initially open.
+
+  To render a controlled tooltip, use the `open` prop instead.
+</ParamField>
+
+<ParamField body="Root.defaultTriggerId" type="string | null">
+  ID of the trigger that the tooltip is associated with.
+  This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
+</ParamField>
+
+<ParamField body="Root.disabled" type="boolean" default="false">
+  Whether the tooltip is disabled.
+</ParamField>
+
+<ParamField body="Root.disableHoverablePopup" type="boolean" default="false">
+  Whether the tooltip contents can be hovered without closing the tooltip.
+</ParamField>
+
+<ParamField body="Root.handle" type="TooltipHandle&lt;Payload&gt;">
+  A handle to associate the tooltip with a trigger.
+  If specified, allows external triggers to control the tooltip's open state.
+  Can be created with the Tooltip.createHandle() method.
+</ParamField>
+
+<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: TooltipRootChangeEventDetails) =&gt; void)">
+  Event handler called when the tooltip is opened or closed.
+</ParamField>
+
+<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
+  Event handler called after any animations complete when the tooltip is opened or closed.
+</ParamField>
+
+<ParamField body="Root.open" type="boolean">
+  Whether the tooltip is currently open.
+</ParamField>
+
+<ParamField body="Root.trackCursorAxis" type="&quot;none&quot; | &quot;both&quot; | &quot;x&quot; | &quot;y&quot;" default="none">
+  Determines which axis the tooltip should track the cursor on.
+</ParamField>
+
+<ParamField body="Root.triggerId" type="string | null">
+  ID of the trigger that the tooltip is associated with.
+  This is useful in conjunction with the `open` prop to create a controlled tooltip.
+  There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).
+</ParamField>
+
+### Tooltip.Trigger
+
+<ParamField body="Trigger.className" type="string | ((state: TooltipTriggerState) =&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.closeDelay" type="number" default="0">
+  How long to wait before closing the tooltip. Specified in milliseconds.
+</ParamField>
+
+<ParamField body="Trigger.closeOnClick" type="boolean" default="true">
+  Whether the tooltip should close when this trigger is clicked.
+</ParamField>
+
+<ParamField body="Trigger.delay" type="number" default="600">
+  How long to wait before opening the tooltip on hover. Specified in milliseconds.
+</ParamField>
+
+<ParamField body="Trigger.disabled" type="boolean" default="false">
+  If `true`, the tooltip will not open when interacting with this trigger.
+  Note that this doesn't apply the `disabled` attribute to the trigger element.
+  If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop.
+</ParamField>
+
+<ParamField body="Trigger.handle" type="TooltipHandle&lt;Payload&gt;">
+  A handle to associate the trigger with a tooltip.
+</ParamField>
+
+<ParamField body="Trigger.payload" type="Payload">
+  A payload to pass to the tooltip when it is opened.
+</ParamField>
+
+<ParamField body="Trigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TooltipTriggerState&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.style" type="CSSProperties | ((state: TooltipTriggerState) =&gt; CSSProperties | undefined)">
+  Style applied to the element, or a function that
+  returns a style object based on the component's state.
+</ParamField>
+
+### Tooltip.Popup
+
+<ParamField body="Popup.align" type="&quot;center&quot; | &quot;start&quot; | &quot;end&quot;" default="center">
+  Alignment relative to the trigger. Defaults to center.
+</ParamField>
+
+<ParamField body="Popup.alignOffset" type="number | OffsetFunction" default="0">
+  Offset along the alignment axis in pixels.
+</ParamField>
+
+<ParamField body="Popup.anchor" type="Element | VirtualElement | RefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null) | null">
+  An explicit positioning anchor for the popup.
+</ParamField>
+
+<ParamField body="Popup.arrow" type="boolean" default="false">
+  Displays an arrow pointing to the trigger. Defaults to false.
+</ParamField>
+
+<ParamField body="Popup.className" type="string | ((state: TooltipPopupState) =&gt; string | undefined)">
+  Additional CSS class for the popup.
+</ParamField>
+
+<ParamField body="Popup.collisionAvoidance" type="CollisionAvoidance">
+  Determines how to handle collisions when positioning the popup.
+
+  `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
+  - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
+    (`top` and `bottom`, or `left` and `right`).
+  - `'shift'`: never change side; keep the requested side and move the popup within
+    the clipping boundary so it stays visible.
+  - `'none'`: do not correct side-axis overflow.
+
+  `align` controls overflow on the alignment axis (`start`/`center`/`end`):
+  - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
+  - `'shift'`: keep side and requested alignment, then nudge the popup along the
+    alignment axis to fit.
+  - `'none'`: do not correct alignment-axis overflow.
+
+  `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
+  preferred axis cannot fit:
+  - `'start'`: allow perpendicular fallback and try the logical start side first
+    (`top` before `bottom`, or `left` before `right` in LTR).
+  - `'end'`: allow perpendicular fallback and try the logical end side first
+    (`bottom` before `top`, or `right` before `left` in LTR).
+  - `'none'`: do not fallback to the perpendicular axis.
+
+  When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
+  If `align` is omitted, it defaults to `'flip'`.
+</ParamField>
+
+<ParamField body="Popup.collisionBoundary" type="Boundary" default="clipping-ancestors">
+  An element or a rectangle that delimits the area that the popup is confined to.
+</ParamField>
+
+<ParamField body="Popup.collisionPadding" type="Padding" default="5">
+  Additional space to maintain from the edge of the collision boundary.
+</ParamField>
+
+<ParamField body="Popup.container" type="HTMLElement | ShadowRoot | RefObject&lt;HTMLElement | ShadowRoot | null&gt; | null">
+  Portal destination. Defaults to the current theme container.
+</ParamField>
+
+<ParamField body="Popup.disableAnchorTracking" type="boolean" default="false">
+  Whether to disable the popup from tracking any layout shift of its positioning anchor.
+</ParamField>
+
+<ParamField body="Popup.keepMounted" type="boolean">
+  Keeps the popup mounted while closed.
+</ParamField>
+
+<ParamField body="Popup.maxWidth" type="MaxWidth&lt;string | number&gt;" default="300px">
+  Maximum popup width. Defaults to 300 pixels.
+</ParamField>
+
+<ParamField body="Popup.positionMethod" type="&quot;absolute&quot; | &quot;fixed&quot;" default="absolute">
+  CSS positioning method for the popup.
+</ParamField>
+
+<ParamField body="Popup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TooltipPopupState&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;" default="top">
+  Preferred side of the trigger. Defaults to top and may change to avoid collisions.
+</ParamField>
+
+<ParamField body="Popup.sideOffset" type="number | OffsetFunction" default="10">
+  Distance from the trigger in pixels. Defaults to 10.
+</ParamField>
+
+<ParamField body="Popup.sticky" type="boolean" default="false">
+  Whether to maintain the popup in the viewport after
+  the anchor element was scrolled out of view.
+</ParamField>
+
+<ParamField body="Popup.style" type="CSSProperties | ((state: TooltipPopupState) =&gt; CSSProperties | undefined)">
+  Inline styles for the popup.
+</ParamField>
+
+### Tooltip.Content
+
+<ParamField body="Content.description" type="ReactNode">
+  Secondary explanation beneath the primary text.
+</ParamField>
+
+<ParamField body="Content.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="Content.startIcon" type="ReactNode">
+  An icon displayed before the text.
+</ParamField>
+
+### Tooltip.Provider
+
+<ParamField body="Provider.closeDelay" type="number">
+  How long to wait before closing a tooltip. Specified in milliseconds.
+</ParamField>
+
+<ParamField body="Provider.delay" type="number">
+  How long to wait before opening the tooltip on hover. Specified in milliseconds.
+</ParamField>
+
+<ParamField body="Provider.timeout" type="number" default="400">
+  Another tooltip will open instantly if the previous tooltip
+  is closed within this timeout. Specified in milliseconds.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/typography/heading.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;primary&quot; | &quot;secondary&quot; | &quot;tertiary&quot;" default="primary">
+  Theme font color. Defaults to `primary`.
+</ParamField>
+
+<ParamField body="level" type="5 | 1 | 2 | 3 | 4 | 6" default="2">
+  Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.
+</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; | &quot;lg&quot; | &quot;xs&quot;" default="md">
+  Visual font size, independent of the heading level. Defaults to `md`.
+</ParamField>

packages/twenty-docs/snippets/ui/generated/typography/text.mdx

@@ -0,0 +1,29 @@
+{/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="lineClamp" type="number">
+  Maximum number of lines before the text is truncated with an ellipsis.
+  Cannot be combined with `truncate`.
+</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="truncate" type="boolean">
+  Truncates overflowing text on one line with an ellipsis. Cannot be
+  combined with `lineClamp`.
+</ParamField>