+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx b/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx
new file mode 100644
index 0000000000..8b26d33d1a
--- /dev/null
+++ b/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx
@@ -0,0 +1,64 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { IconBuildingSkyscraper, IconUser } from '@ui/display';
+import { ComponentDecorator, JotaiRootDecorator } from '@ui/testing';
+import { AvatarOrIcon } from '../AvatarOrIcon';
+
+const meta: Meta
+ {leftComponent}
+ {!isLabelHidden && isDefined(label) && isNonEmptyString(label) ? (
+
+ );
+};
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.module.scss b/packages/twenty-ui/src/components/chip/LinkChip.module.scss
new file mode 100644
index 0000000000..e5da170d02
--- /dev/null
+++ b/packages/twenty-ui/src/components/chip/LinkChip.module.scss
@@ -0,0 +1,11 @@
+.linkContainer {
+ display: inline-flex;
+ min-width: 0;
+ vertical-align: middle;
+
+ & > a {
+ max-width: 100%;
+ min-width: 0;
+ text-decoration: none;
+ }
+}
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.module.scss.d.ts b/packages/twenty-ui/src/components/chip/LinkChip.module.scss.d.ts
new file mode 100644
index 0000000000..b084afd07e
--- /dev/null
+++ b/packages/twenty-ui/src/components/chip/LinkChip.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly linkContainer: 'linkContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.tsx b/packages/twenty-ui/src/components/chip/LinkChip.tsx
new file mode 100644
index 0000000000..d055957523
--- /dev/null
+++ b/packages/twenty-ui/src/components/chip/LinkChip.tsx
@@ -0,0 +1,82 @@
+import {
+ Chip,
+ ChipAccent,
+ type ChipProps,
+ ChipSize,
+ ChipVariant,
+} from '@ui/components/chip/Chip';
+import { LINK_CHIP_CLICK_OUTSIDE_ID } from '@ui/components/chip/constants/LinkChipClickOutsideId';
+import { type TriggerEventType, useMouseDownNavigation } from '@ui/utilities';
+import { type MouseEvent } from 'react';
+import { Link } from 'react-router-dom';
+
+import styles from './LinkChip.module.scss';
+
+export type LinkChipProps = Omit<
+ ChipProps,
+ 'onClick' | 'disabled' | 'clickable'
+> & {
+ to: string;
+ onClick?: (event: MouseEvent{emptyLabel}
+ ) : (
+ ''
+ )}
+ {renderRightComponent(rightComponent, rightComponentDivider)}
+
+
+ ) : (
+ <>
+ )}
+ {preventShrink ? (
+ {text}
+ ) : (
+
+
+ {Icon ? (
+ 
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss
new file mode 100644
index 0000000000..68c8c0de25
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss
@@ -0,0 +1,12 @@
+.container {
+ align-items: center;
+ display: flex;
+}
+
+.itemContainer {
+ margin-right: -3px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
diff --git a/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss.d.ts b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss.d.ts
new file mode 100644
index 0000000000..605772e081
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly container: 'container';
+ readonly itemContainer: 'itemContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/avatar/components/AvatarGroup.tsx b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.tsx
new file mode 100644
index 0000000000..0b38fd19ed
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.tsx
@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+
+import styles from './AvatarGroup.module.scss';
+
+export type AvatarGroupProps = {
+ avatars: ReactNode[];
+};
+
+const MAX_AVATARS_NB = 4;
+
+export const AvatarGroup = ({ avatars }: AvatarGroupProps) => {
+ if (!avatars.length) return null;
+
+ return (
+
+ {avatars.slice(0, MAX_AVATARS_NB).map((avatar, index) => (
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
new file mode 100644
index 0000000000..2d3146926e
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
@@ -0,0 +1,50 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import {
+ AVATAR_URL_MOCK,
+ ComponentDecorator,
+ JotaiRootDecorator,
+} from '@ui/testing';
+
+import { Avatar } from '../Avatar';
+
+const meta: Meta
+ {avatar}
+
+ ))}
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss
new file mode 100644
index 0000000000..23dbcdd0df
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss
@@ -0,0 +1,15 @@
+.banner {
+ border-radius: var(--t-border-radius-md);
+ margin-bottom: var(--t-spacing-4);
+}
+
+.bannerContent {
+ align-items: center;
+ display: flex;
+ flex: 1;
+ gap: var(--t-spacing-2);
+}
+
+.bannerText {
+ flex: 1;
+}
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss.d.ts b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss.d.ts
new file mode 100644
index 0000000000..c3c16a1e1b
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly banner: 'banner';
+ readonly bannerContent: 'bannerContent';
+ readonly bannerText: 'bannerText';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx b/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx
new file mode 100644
index 0000000000..9044dee3a1
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx
@@ -0,0 +1,53 @@
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { ThemeContext } from '@ui/theme-constants';
+import { Button } from '@ui/input/button/components/Button/Button';
+import { type IconComponent } from '@ui/display/icon/types/IconComponent';
+import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
+import { Banner, type BannerColor } from './Banner';
+
+import styles from './InlineBanner.module.scss';
+
+type InlineBannerProps = {
+ color?: BannerColor;
+ message: string;
+ button?: {
+ title?: string;
+ onClick?: () => void;
+ hidden?: boolean;
+ };
+ LeftIcon?: IconComponent;
+ className?: string;
+};
+
+export const InlineBanner = ({
+ color,
+ message,
+ button,
+ LeftIcon = IconInfoCircle,
+ className,
+}: InlineBannerProps) => {
+ const { theme } = useContext(ThemeContext);
+
+ return (
+
+
+ {button && !button.hidden && (
+
+ )}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss
new file mode 100644
index 0000000000..3459b395ad
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss
@@ -0,0 +1,15 @@
+.bannerContent {
+ align-items: center;
+ display: flex;
+ flex: 1;
+ gap: 8px;
+ justify-content: center;
+}
+
+.container {
+ width: 100%;
+}
+
+.invertedIconButton {
+ color: var(--t-font-color-inverted) !important;
+}
diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss.d.ts b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss.d.ts
new file mode 100644
index 0000000000..ec6d7fac3e
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly bannerContent: 'bannerContent';
+ readonly container: 'container';
+ readonly invertedIconButton: 'invertedIconButton';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx
new file mode 100644
index 0000000000..b6804e02e0
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx
@@ -0,0 +1,133 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { IconX } from '@ui/display';
+import {
+ CatalogDecorator,
+ type CatalogStory,
+ ComponentDecorator,
+} from '@ui/testing';
+import { Button } from '../../../../input/button/components/Button/Button';
+import { IconButton } from '../../../../input/button/components/IconButton';
+import { Banner, type BannerColor, type BannerVariant } from '../Banner';
+
+import styles from './Banner.stories.module.scss';
+
+const getButtonAccent = (color?: BannerColor) =>
+ color === 'danger' ? 'danger' : 'blue';
+
+const BannerCloseButton = ({
+ color,
+ variant,
+}: {
+ color?: BannerColor;
+ variant?: BannerVariant;
+}) =>
+ variant === 'primary' ? (
+
+ {variant === 'default' ? (
+
+ {message}
+ {isDefined(tooltipMessage) && ( +
+ {/* oxlint-disable-next-line react/jsx-props-no-spreading */}
+
+
+
+ ),
+ decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory
+ Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
+
+
+
+ Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
+
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/callout/__stories__/Callout.stories.tsx b/packages/twenty-ui/src/display/callout/__stories__/Callout.stories.tsx
new file mode 100644
index 0000000000..48a232907c
--- /dev/null
+++ b/packages/twenty-ui/src/display/callout/__stories__/Callout.stories.tsx
@@ -0,0 +1,73 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import {
+ CatalogDecorator,
+ type CatalogStory,
+ ComponentDecorator,
+} from '@ui/testing';
+
+import { Callout } from '@ui/display';
+import { type CalloutVariant } from '@ui/display/callout/Callout';
+
+const meta: Meta
+
+
+
+ {title}
+ {isClosable && (
+
+
+ {isDefined(action) && (
+ {description}
+
+
+ )}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx b/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx
new file mode 100644
index 0000000000..5ca4350241
--- /dev/null
+++ b/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx
@@ -0,0 +1,20 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+
+import { Checkmark } from '../Checkmark';
+
+const meta: Meta
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/components/LinkifiedText.module.scss b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss
new file mode 100644
index 0000000000..861a4f33c1
--- /dev/null
+++ b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss
@@ -0,0 +1,8 @@
+.link {
+ color: var(--t-color-blue);
+ text-decoration: underline;
+
+ &:hover {
+ text-decoration-color: var(--t-color-blue);
+ }
+}
diff --git a/packages/twenty-ui/src/display/components/LinkifiedText.module.scss.d.ts b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss.d.ts
new file mode 100644
index 0000000000..0361a30bb3
--- /dev/null
+++ b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly link: 'link';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/components/LinkifiedText.tsx b/packages/twenty-ui/src/display/components/LinkifiedText.tsx
new file mode 100644
index 0000000000..fb074a7000
--- /dev/null
+++ b/packages/twenty-ui/src/display/components/LinkifiedText.tsx
@@ -0,0 +1,36 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { linkifyText } from '@ui/utilities/utils/linkifyText';
+
+import styles from './LinkifiedText.module.scss';
+
+type LinkifiedTextProps = {
+ text: string;
+};
+
+export const LinkifiedText = ({ text }: LinkifiedTextProps) => {
+ if (!isNonEmptyString(text)) {
+ return null;
+ }
+
+ return (
+ <>
+ {linkifyText(text).map((part, index) =>
+ part.type === 'link' ? (
+ e.stopPropagation()}
+ >
+ {part.content}
+
+ ) : (
+ part.content
+ ),
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/icon/components/Icon.tsx b/packages/twenty-ui/src/display/icon/components/Icon.tsx
new file mode 100644
index 0000000000..a692a9dacf
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/Icon.tsx
@@ -0,0 +1,29 @@
+import { useIcons } from '@ui/display/icon/hooks/useIcons';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+export type IconProps = IconComponentProps & {
+ name: string;
+};
+
+export const Icon = ({
+ name,
+ className,
+ style,
+ size,
+ stroke,
+ color,
+}: IconProps) => {
+ const { getIcon } = useIcons();
+
+ const ResolvedIcon = getIcon(name);
+
+ return (
+
+ <>
+ {commands.map((line, i) => (
+
+ {button &&
+ {'> '}
+ {line}
+
+ ))}
+
+ {button}
}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/icon/components/IconGmail.tsx b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx
new file mode 100644
index 0000000000..961fc5d688
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx
@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import IconGmailRaw from '@assets/icons/gmail.svg?react';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+import { ThemeContext } from '@ui/theme-constants';
+
+type IconGmailProps = Pick
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/info/components/__stories__/Info.stories.tsx b/packages/twenty-ui/src/display/info/components/__stories__/Info.stories.tsx
new file mode 100644
index 0000000000..3b4a8c39c0
--- /dev/null
+++ b/packages/twenty-ui/src/display/info/components/__stories__/Info.stories.tsx
@@ -0,0 +1,51 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import {
+ CatalogDecorator,
+ type CatalogStory,
+ ComponentDecorator,
+} from '@ui/testing';
+
+import { Info, type InfoAccent } from '../Info';
+
+const meta: Meta
+
+ {buttonTitle && to && (
+
+
+
+
+
+ )}
+ {buttonTitle && onClick && !to && (
+
+ )}
+
+ {text}
+ {isLoaderVisible ?
+ );
+};
diff --git a/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx b/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx
new file mode 100644
index 0000000000..fa785b3e76
--- /dev/null
+++ b/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx
@@ -0,0 +1,71 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import {
+ CatalogDecorator,
+ type CatalogStory,
+ ComponentDecorator,
+} from '@ui/testing';
+import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { Status } from '../Status';
+
+const meta: Meta
+
+
+
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/text/components/SeparatorLineText.module.scss b/packages/twenty-ui/src/display/text/components/SeparatorLineText.module.scss
new file mode 100644
index 0000000000..e2537443f7
--- /dev/null
+++ b/packages/twenty-ui/src/display/text/components/SeparatorLineText.module.scss
@@ -0,0 +1,24 @@
+.container {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ font-size: var(--t-font-size-md);
+ font-weight: var(--t-font-weight-semi-bold);
+ color: var(--t-font-color-extra-light);
+
+ &::before,
+ &::after {
+ content: '';
+ height: 1px;
+ flex-grow: 1;
+ background: var(--t-background-transparent-light);
+ }
+
+ &::before {
+ margin: 0 var(--t-spacing-4) 0 0;
+ }
+
+ &::after {
+ margin: 0 0 0 var(--t-spacing-4);
+ }
+}
diff --git a/packages/twenty-ui/src/display/text/components/SeparatorLineText.module.scss.d.ts b/packages/twenty-ui/src/display/text/components/SeparatorLineText.module.scss.d.ts
new file mode 100644
index 0000000000..8df71b4dea
--- /dev/null
+++ b/packages/twenty-ui/src/display/text/components/SeparatorLineText.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly container: 'container';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx b/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx
new file mode 100644
index 0000000000..46f0d64f27
--- /dev/null
+++ b/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx
@@ -0,0 +1,9 @@
+import styles from './SeparatorLineText.module.scss';
+
+export const SeparatorLineText = ({
+ children,
+}: {
+ children: React.ReactNode;
+}) => {
+ return {children}
;
+};
diff --git a/packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx b/packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx
new file mode 100644
index 0000000000..2b72597e1c
--- /dev/null
+++ b/packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx
@@ -0,0 +1,15 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { ComponentDecorator } from '@ui/testing';
+
+import { HorizontalSeparator } from '../HorizontalSeparator';
+
+const meta: Meta
+ {isNonEmptyString(text) ?
+ ) : (
+
+ {isNonEmptyString(text) ?
+ )}
+
+ {shouldRenderTooltip &&
+ (isTitleOverflowing || alwaysShowTooltip) &&
+ isDefined(tooltipText) &&
+ createPortal(
+
+
+ {isTooltipMultiline ? (
+
+
,
+ document.body,
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx b/packages/twenty-ui/src/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
new file mode 100644
index 0000000000..4f66dbf251
--- /dev/null
+++ b/packages/twenty-ui/src/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
@@ -0,0 +1,137 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { userEvent, within } from 'storybook/test';
+
+import { ComponentDecorator } from '@ui/testing';
+
+import { OverflowingTextWithTooltip } from '../OverflowingTextWithTooltip';
+
+const longText =
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus diam, rhoncus nec consequat quis, dapibus quis massa. Praesent tincidunt augue at ex bibendum, non finibus augue faucibus. In at gravida orci. Nulla facilisi. Proin ut augue ut nisi pellentesque tristique. Proin sodales libero id turpis tincidunt posuere. Sed euismod, nunc at aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nunc. Donec euismod, nunc quis aliquam ultricies, nunc nisl aliquet nunc.';
+
+const meta: Meta{tooltipText}
+ ) : (
+ tooltipText
+ )}
+ + Hover me! +
++ Hover me! +
++ Hover me to see custom width! +
++ {title} +
+ ); +}; diff --git a/packages/twenty-ui/src/display/typography/components/H2Title.module.scss b/packages/twenty-ui/src/display/typography/components/H2Title.module.scss new file mode 100644 index 0000000000..a0129ea151 --- /dev/null +++ b/packages/twenty-ui/src/display/typography/components/H2Title.module.scss @@ -0,0 +1,26 @@ +.container { + display: flex; + flex-direction: column; + margin-bottom: var(--t-spacing-4); +} + +.titleContainer { + align-items: center; + display: flex; + justify-content: space-between; +} + +.title { + color: var(--t-font-color-primary); + font-size: var(--t-font-size-md); + font-weight: var(--t-font-weight-semi-bold); + margin: 0; +} + +.description { + color: var(--t-font-color-tertiary); + font-size: var(--t-font-size-md); + font-weight: var(--t-font-weight-regular); + margin: 0; + margin-top: var(--t-spacing-2); +} diff --git a/packages/twenty-ui/src/display/typography/components/H2Title.module.scss.d.ts b/packages/twenty-ui/src/display/typography/components/H2Title.module.scss.d.ts new file mode 100644 index 0000000000..6f9a3f97b1 --- /dev/null +++ b/packages/twenty-ui/src/display/typography/components/H2Title.module.scss.d.ts @@ -0,0 +1,7 @@ +declare const classNames: { + readonly container: 'container'; + readonly titleContainer: 'titleContainer'; + readonly title: 'title'; + readonly description: 'description'; +}; +export default classNames; diff --git a/packages/twenty-ui/src/display/typography/components/H2Title.tsx b/packages/twenty-ui/src/display/typography/components/H2Title.tsx new file mode 100644 index 0000000000..ceca604430 --- /dev/null +++ b/packages/twenty-ui/src/display/typography/components/H2Title.tsx @@ -0,0 +1,37 @@ +import { clsx } from 'clsx'; + +import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; + +import styles from './H2Title.module.scss'; + +type H2TitleProps = { + title: string; + description?: string; + adornment?: React.ReactNode; + className?: string; +}; + +export const H2Title = ({ + title, + description, + adornment, + className, +}: H2TitleProps) => { + return ( +
+
+
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/typography/components/H3Title.module.scss b/packages/twenty-ui/src/display/typography/components/H3Title.module.scss
new file mode 100644
index 0000000000..a0751fdd94
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/H3Title.module.scss
@@ -0,0 +1,19 @@
+.container {
+ display: flex;
+ flex-direction: column;
+}
+
+.title {
+ color: var(--t-font-color-primary);
+ font-size: var(--t-font-size-lg);
+ font-weight: var(--t-font-weight-semi-bold);
+ margin: 0;
+}
+
+.description {
+ color: var(--t-font-color-tertiary);
+ font-size: var(--t-font-size-md);
+ font-weight: var(--t-font-weight-regular);
+ margin: 0;
+ margin-top: var(--t-spacing-2);
+}
diff --git a/packages/twenty-ui/src/display/typography/components/H3Title.module.scss.d.ts b/packages/twenty-ui/src/display/typography/components/H3Title.module.scss.d.ts
new file mode 100644
index 0000000000..1b98f93c04
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/H3Title.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly container: 'container';
+ readonly title: 'title';
+ readonly description: 'description';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/typography/components/H3Title.tsx b/packages/twenty-ui/src/display/typography/components/H3Title.tsx
new file mode 100644
index 0000000000..9252d38e50
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/H3Title.tsx
@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { clsx } from 'clsx';
+
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
+
+import styles from './H3Title.module.scss';
+
+type H3TitleProps = {
+ title: ReactNode;
+ description?: string;
+ className?: string;
+};
+
+export const H3Title = ({ title, description, className }: H3TitleProps) => {
+ return (
+
+
+ {description && (
+ {title}
+ {adornment} +
+
+ )}
+
+
+
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/typography/components/Label.module.scss b/packages/twenty-ui/src/display/typography/components/Label.module.scss
new file mode 100644
index 0000000000..21a490a5fa
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/Label.module.scss
@@ -0,0 +1,12 @@
+.label {
+ color: var(--t-font-color-light);
+ font-weight: var(--t-font-weight-semi-bold);
+}
+
+.default {
+ font-size: 11px;
+}
+
+.small {
+ font-size: 9px;
+}
diff --git a/packages/twenty-ui/src/display/typography/components/Label.module.scss.d.ts b/packages/twenty-ui/src/display/typography/components/Label.module.scss.d.ts
new file mode 100644
index 0000000000..17dd1e5c59
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/Label.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly label: 'label';
+ readonly default: 'default';
+ readonly small: 'small';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/typography/components/Label.tsx b/packages/twenty-ui/src/display/typography/components/Label.tsx
new file mode 100644
index 0000000000..c9c6c71d65
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/Label.tsx
@@ -0,0 +1,23 @@
+import { clsx } from 'clsx';
+
+import styles from './Label.module.scss';
+
+export type LabelVariant = 'default' | 'small';
+
+type LabelProps = {
+ variant?: LabelVariant;
+ children?: React.ReactNode;
+ className?: string;
+};
+
+export const Label = ({
+ variant = 'default',
+ children,
+ className,
+}: LabelProps) => {
+ return (
+ {title}
+ {description && ( + // Design rule: Never set a description for H3 if there are any H2 in the page + // (in that case, each H2 must have its own description) +
+
+ )}
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/typography/components/StyledText.module.scss b/packages/twenty-ui/src/display/typography/components/StyledText.module.scss
new file mode 100644
index 0000000000..296c89c73e
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/StyledText.module.scss
@@ -0,0 +1,28 @@
+.content {
+ font-size: var(--t-font-size-sm);
+ font-weight: var(--t-font-weight-regular);
+
+ overflow: hidden;
+ padding-left: 0;
+
+ white-space: nowrap;
+}
+
+.wrapper {
+ --horizontal-padding: var(--t-spacing-1);
+ --vertical-padding: var(--t-spacing-2);
+
+ cursor: initial;
+
+ display: flex;
+
+ flex-direction: row;
+
+ font-size: var(--t-font-size-sm);
+
+ gap: var(--t-spacing-2);
+
+ padding: var(--vertical-padding) 0;
+
+ color: var(--styled-text-color, var(--t-font-color-primary));
+}
diff --git a/packages/twenty-ui/src/display/typography/components/StyledText.module.scss.d.ts b/packages/twenty-ui/src/display/typography/components/StyledText.module.scss.d.ts
new file mode 100644
index 0000000000..98d24e6a05
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/StyledText.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly content: 'content';
+ readonly wrapper: 'wrapper';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/typography/components/StyledText.tsx b/packages/twenty-ui/src/display/typography/components/StyledText.tsx
new file mode 100644
index 0000000000..404788a661
--- /dev/null
+++ b/packages/twenty-ui/src/display/typography/components/StyledText.tsx
@@ -0,0 +1,55 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { clsx } from 'clsx';
+
+import styles from './StyledText.module.scss';
+
+type StyledTextProps = {
+ PrefixComponent?: ReactElement;
+ text: ReactNode;
+ color?: string;
+};
+
+type StyledTextContentProps = React.ComponentPropsWithoutRef<'div'>;
+
+export const StyledTextContent = ({
+ className,
+ ...divProps
+}: StyledTextContentProps) => (
+ // oxlint-disable-next-line react/jsx-props-no-spreading
+
+);
+
+type StyledTextWrapperProps = React.ComponentPropsWithoutRef<'div'> & {
+ color?: string;
+};
+
+export const StyledTextWrapper = ({
+ color,
+ className,
+ style,
+ ...divProps
+}: StyledTextWrapperProps) => (
+
+);
+
+export const StyledText = ({
+ PrefixComponent,
+ text,
+ color,
+}: StyledTextProps) => {
+ return (
+
+
+ ),
+ ],
+ play: async ({ canvasElement }) => {
+ await waitFor(() => {
+ const element = canvasElement.querySelector(':first-child');
+
+ expect(element).toBeVisible();
+
+ return element;
+ });
+ },
+};
+
+export const WithDefaultColor: Story = {
+ play: async ({ canvasElement }) => {
+ await waitFor(() => {
+ const element = canvasElement.querySelector(':first-child');
+
+ expect(element).toBeVisible();
+
+ return element;
+ });
+ },
+};
+
+export const WithDifferentColors: Story = {
+ render: () => (
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const loaders = await waitFor(() => {
+ const elements = canvasElement.querySelectorAll('#container > *');
+
+ expect(elements).toHaveLength(4);
+
+ return elements;
+ });
+
+ expect(loaders[0]).toHaveStyle({
+ borderColor: expect.stringContaining('red'),
+ });
+ expect(loaders[1]).toHaveStyle({
+ borderColor: expect.stringContaining('blue'),
+ });
+ expect(loaders[2]).toHaveStyle({
+ borderColor: expect.stringContaining('yellow'),
+ });
+ expect(loaders[3]).toHaveStyle({
+ borderColor: expect.stringContaining('green'),
+ });
+ },
+};
diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.module.scss b/packages/twenty-ui/src/feedback/loader/components/Loader.module.scss
new file mode 100644
index 0000000000..81888e2b40
--- /dev/null
+++ b/packages/twenty-ui/src/feedback/loader/components/Loader.module.scss
@@ -0,0 +1,47 @@
+.container {
+ box-sizing: border-box;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ gap: var(--t-spacing-2);
+ width: var(--t-spacing-6);
+ height: var(--t-spacing-3);
+ border-radius: var(--t-border-radius-pill);
+ border: 1px solid
+ var(--loader-color, var(--tw-button-color, var(--t-font-color-tertiary)));
+ overflow: hidden;
+}
+
+.dot {
+ background-color: var(
+ --loader-color,
+ var(--tw-button-color, var(--t-font-color-tertiary))
+ );
+ border-radius: var(--t-border-radius-pill);
+ height: 8px;
+ width: 8px;
+ animation: loaderDot 0.8s ease-in-out infinite;
+}
+
+// Replicates the framer keyframes: x [-16, 0, 16], width [8, 12, 8],
+// height [8, 2, 8] with times [0, 0.15, 0.3] over a 0.8s loop.
+@keyframes loaderDot {
+ 0% {
+ transform: translateX(-16px);
+ width: 8px;
+ height: 8px;
+ }
+
+ 15% {
+ transform: translateX(0);
+ width: 12px;
+ height: 2px;
+ }
+
+ 30%,
+ 100% {
+ transform: translateX(16px);
+ width: 8px;
+ height: 8px;
+ }
+}
diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.module.scss.d.ts b/packages/twenty-ui/src/feedback/loader/components/Loader.module.scss.d.ts
new file mode 100644
index 0000000000..d926ea2493
--- /dev/null
+++ b/packages/twenty-ui/src/feedback/loader/components/Loader.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly container: 'container';
+ readonly dot: 'dot';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx
new file mode 100644
index 0000000000..bc8a4ae4b6
--- /dev/null
+++ b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx
@@ -0,0 +1,25 @@
+import { type ThemeColor } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
+
+import styles from './Loader.module.scss';
+
+type LoaderProps = {
+ color?: ThemeColor;
+};
+
+export const Loader = ({ color }: LoaderProps) => {
+ return (
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx b/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx
new file mode 100644
index 0000000000..9964b49106
--- /dev/null
+++ b/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx
@@ -0,0 +1,71 @@
+import { motion, useAnimation } from 'framer-motion';
+import { useEffect, useMemo } from 'react';
+
+type CircularProgressBarProps = {
+ size?: number;
+ barWidth?: number;
+ barColor?: string;
+};
+
+export const CircularProgressBar = ({
+ size = 50,
+ barWidth = 5,
+ barColor = 'currentColor',
+}: CircularProgressBarProps) => {
+ const controls = useAnimation();
+
+ const circumference = useMemo(
+ () => 2 * Math.PI * (size / 2 - barWidth),
+ [size, barWidth],
+ );
+
+ useEffect(() => {
+ const animateIndeterminate = async () => {
+ const baseSegment = Math.max(5, circumference / 10); // Adjusting for smaller values
+
+ // Adjusted sequence based on baseSegment
+ const dashSequences = [
+ `${baseSegment} ${circumference - baseSegment}`,
+ `${baseSegment * 2} ${circumference - baseSegment * 2}`,
+ `${baseSegment * 3} ${circumference - baseSegment * 3}`,
+ `${baseSegment * 2} ${circumference - baseSegment * 2}`,
+ `${baseSegment} ${circumference - baseSegment}`,
+ ];
+
+ await controls.start({
+ strokeDasharray: dashSequences,
+ rotate: [0, 720],
+ transition: {
+ strokeDasharray: {
+ duration: 2,
+ ease: 'linear',
+ repeat: Infinity,
+ repeatType: 'loop',
+ },
+ rotate: {
+ duration: 2,
+ ease: 'linear',
+ repeat: Infinity,
+ repeatType: 'loop',
+ },
+ },
+ });
+ };
+
+ animateIndeterminate();
+ }, [circumference, controls]);
+
+ return (
+
+
+);
diff --git a/packages/twenty-ui/src/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx b/packages/twenty-ui/src/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
new file mode 100644
index 0000000000..36dc05b944
--- /dev/null
+++ b/packages/twenty-ui/src/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
@@ -0,0 +1,56 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { CatalogDecorator, type CatalogStory } from '@ui/testing';
+
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+import { CircularProgressBar } from '../CircularProgressBar';
+
+const meta: Meta 0 ? MIN_BAR_WIDTH_PX : 0,
+ width: `${Math.ceil(value)}%`,
+ transition: 'width 0.3s linear',
+ }}
+ >
+
+
+
+ {hotkeys.join(getOsShortcutSeparator())}
+
+
+ )}
+ {soon && (
+
+
+ setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ style={{ '--btn-justify': justify } as React.CSSProperties}
+ >
+ {(isLoading || Icon) && (
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/Button/constant.ts b/packages/twenty-ui/src/input/button/components/Button/constant.ts
new file mode 100644
index 0000000000..62b9b9e064
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/constant.ts
@@ -0,0 +1 @@
+export const baseTransitionTiming = 300;
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.module.scss b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.module.scss
new file mode 100644
index 0000000000..c7b46a754d
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.module.scss
@@ -0,0 +1,35 @@
+.separator {
+ background: var(--t-font-color-light);
+ height: var(--t-spacing-4);
+ margin: 0;
+ width: 1px;
+
+ &[data-size='small'] {
+ height: var(--t-spacing-2);
+ }
+
+ &[data-accent='blue'] {
+ background: var(--t-buttons-secondary-text-color);
+ }
+
+ &[data-accent='danger'] {
+ background: var(--t-border-color-danger);
+ }
+}
+
+.shortcutLabel {
+ color: var(--t-font-color-light);
+ font-weight: var(--t-font-weight-medium);
+
+ &[data-accent='blue'] {
+ color: var(--t-buttons-secondary-text-color);
+ }
+
+ &[data-accent='danger'] {
+ color: var(--t-color-red8);
+ }
+
+ &[data-accent='danger'][data-variant='primary'] {
+ color: var(--t-border-color-danger);
+ }
+}
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.module.scss.d.ts
new file mode 100644
index 0000000000..f8d905ac62
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly separator: 'separator';
+ readonly shortcutLabel: 'shortcutLabel';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
new file mode 100644
index 0000000000..07ab119c99
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
@@ -0,0 +1,33 @@
+import {
+ type ButtonAccent,
+ type ButtonSize,
+ type ButtonVariant,
+} from '@ui/input/button/components/Button/Button';
+import { getOsShortcutSeparator } from '@ui/utilities';
+
+import styles from './ButtonHotKeys.module.scss';
+
+export const ButtonHotkeys = ({
+ size,
+ accent,
+ variant,
+ hotkeys,
+}: {
+ size: ButtonSize;
+ accent: ButtonAccent;
+ variant: ButtonVariant;
+ hotkeys: string[];
+}) => {
+ return (
+ <>
+
+
+ {hotkeys.join(getOsShortcutSeparator())}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.module.scss b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.module.scss
new file mode 100644
index 0000000000..475e5f8a46
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.module.scss
@@ -0,0 +1,32 @@
+// Mirrors baseTransitionTiming (300) in ../constant.ts — keep in sync.
+$base-transition-timing: 300ms;
+
+.iconWrapper {
+ align-items: center;
+ display: flex;
+ pointer-events: none;
+}
+
+.icon {
+ align-items: center;
+ color: var(--tw-button-color);
+ display: flex;
+ height: calc(100% - var(--t-spacing-4));
+ opacity: 1;
+ transition: opacity ($base-transition-timing * 0.5) ease;
+ transition-delay: $base-transition-timing * 0.5;
+
+ &[data-loading] {
+ opacity: 0;
+ transition-delay: 0ms;
+ }
+}
+
+.loader {
+ left: var(--t-spacing-2);
+ opacity: 1;
+ position: absolute;
+ transition: opacity ($base-transition-timing * 0.5) ease;
+ transition-delay: $base-transition-timing * 0.5;
+ width: var(--t-spacing-6);
+}
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.module.scss.d.ts
new file mode 100644
index 0000000000..acd6652bf4
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly iconWrapper: 'iconWrapper';
+ readonly icon: 'icon';
+ readonly loader: 'loader';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx
new file mode 100644
index 0000000000..8d8f5fb1f9
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx
@@ -0,0 +1,31 @@
+import { type IconComponent } from '@ui/display';
+import { Loader } from '@ui/feedback';
+import { ThemeContext } from '@ui/theme-constants';
+import { useContext } from 'react';
+
+import styles from './ButtonIcon.module.scss';
+
+export const ButtonIcon = ({
+ Icon,
+ isLoading,
+}: {
+ Icon?: IconComponent;
+ isLoading?: boolean;
+}) => {
+ const { theme } = useContext(ThemeContext);
+
+ return (
+
+ {isLoading && (
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.module.scss b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.module.scss
new file mode 100644
index 0000000000..57cd7cbad8
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.module.scss
@@ -0,0 +1,4 @@
+.soonPillContainer {
+ display: flex;
+ margin-left: auto;
+}
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.module.scss.d.ts
new file mode 100644
index 0000000000..6f168cd4be
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly soonPillContainer: 'soonPillContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx
new file mode 100644
index 0000000000..50abfde4e0
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx
@@ -0,0 +1,13 @@
+import { Pill } from '@ui/components';
+
+import styles from './ButtonSoon.module.scss';
+
+type ButtonSoonProps = {
+ label?: string;
+};
+
+export const ButtonSoon = ({ label = 'Soon' }: ButtonSoonProps) => (
+
+
+
+ )}
+ {Icon && (
+
+
+ )}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/ButtonGroup.module.scss b/packages/twenty-ui/src/input/button/components/ButtonGroup.module.scss
new file mode 100644
index 0000000000..f93d20c4ba
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/ButtonGroup.module.scss
@@ -0,0 +1,4 @@
+.container {
+ border-radius: var(--t-border-radius-md);
+ display: flex;
+}
diff --git a/packages/twenty-ui/src/input/button/components/ButtonGroup.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/ButtonGroup.module.scss.d.ts
new file mode 100644
index 0000000000..8df71b4dea
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/ButtonGroup.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly container: 'container';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx
new file mode 100644
index 0000000000..d612400206
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx
@@ -0,0 +1,57 @@
+import { clsx } from 'clsx';
+import React, { type ReactNode } from 'react';
+import { isDefined } from '@ui/utilities/utils/isDefined';
+
+import { type ButtonPosition, type ButtonProps } from './Button/Button';
+
+import styles from './ButtonGroup.module.scss';
+
+export type ButtonGroupProps = Partial<
+ Pick
+ {title}
+
+
+ ...
+
+
+ {React.Children.map(children, (child, index) => {
+ if (!React.isValidElement(child)) return null;
+
+ let position: ButtonPosition;
+
+ if (index === 0) {
+ position = 'left';
+ } else if (index === children.length - 1) {
+ position = 'right';
+ } else {
+ position = 'middle';
+ }
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const additionalProps: any = { position, variant, accent, size };
+
+ if (isDefined(variant)) {
+ additionalProps.variant = variant;
+ }
+
+ if (isDefined(accent)) {
+ additionalProps.accent = accent;
+ }
+
+ if (isDefined(size)) {
+ additionalProps.size = size;
+ }
+
+ return React.cloneElement(child, additionalProps);
+ })}
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/ColorPickerButton.module.scss b/packages/twenty-ui/src/input/button/components/ColorPickerButton.module.scss
new file mode 100644
index 0000000000..96b6e0849c
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/ColorPickerButton.module.scss
@@ -0,0 +1,15 @@
+// The :hover rule is kept separate on purpose: at (0,1,2) it out-specifies
+// the inner LightIconButton's own hover background at (0,1,1) regardless of
+// stylesheet order, exactly like the legacy Linaria wrapper did.
+
+.wrapper button {
+ background-color: var(--color-picker-button-bg, transparent);
+}
+
+.wrapper button:hover {
+ background-color: var(--color-picker-button-bg, transparent);
+}
+
+.wrapper[data-selected] {
+ --color-picker-button-bg: var(--t-background-transparent-medium);
+}
diff --git a/packages/twenty-ui/src/input/button/components/ColorPickerButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/ColorPickerButton.module.scss.d.ts
new file mode 100644
index 0000000000..6f9e27f1e2
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/ColorPickerButton.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly wrapper: 'wrapper';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx
new file mode 100644
index 0000000000..842e8977f7
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx
@@ -0,0 +1,28 @@
+import { ColorSample, type ColorSampleProps } from '@ui/display';
+import {
+ LightIconButton,
+ type LightIconButtonProps,
+} from '@ui/input/button/components/LightIconButton';
+
+import styles from './ColorPickerButton.module.scss';
+
+type ColorPickerButtonProps = Pick
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.module.scss b/packages/twenty-ui/src/input/button/components/FloatingButton.module.scss
new file mode 100644
index 0000000000..421f58fbe6
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/FloatingButton.module.scss
@@ -0,0 +1,102 @@
+// State rules below only assign CSS custom properties; the actual
+// declarations live on the flat .button class so twenty-front
+// styled(FloatingButton) overrides keep beating them at (0,1,0) specificity,
+// exactly like the legacy single Linaria class did.
+
+.button {
+ align-items: center;
+ backdrop-filter: var(--floating-button-backdrop-filter, none);
+ background: var(--t-background-primary);
+ border: var(--floating-button-border, none);
+ border-radius: var(--floating-button-radius, var(--t-border-radius-sm));
+ box-shadow: var(--floating-button-box-shadow, none);
+ color: var(--floating-button-color, var(--t-font-color-secondary));
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ font-family: var(--t-font-family);
+ font-weight: var(--t-font-weight-regular);
+ gap: var(--t-spacing-1);
+ padding: 0 var(--t-spacing-2);
+ text-decoration: none;
+ transition: background 0.1s ease;
+ white-space: nowrap;
+
+ &:hover {
+ background: var(
+ --floating-button-hover-bg,
+ var(--t-background-transparent-lighter)
+ );
+ }
+
+ &:active {
+ background: var(
+ --floating-button-active-bg,
+ var(--t-background-transparent-medium)
+ );
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &[data-disabled] {
+ cursor: not-allowed;
+ }
+}
+
+.small {
+ height: 24px;
+}
+
+.medium {
+ height: 32px;
+}
+
+// position only reshapes the radius; standalone keeps the .button default.
+.button[data-position='left'] {
+ --floating-button-radius: var(--t-border-radius-sm) 0px 0px
+ var(--t-border-radius-sm);
+}
+
+.button[data-position='middle'] {
+ --floating-button-radius: 0px;
+}
+
+.button[data-position='right'] {
+ --floating-button-radius: 0px var(--t-border-radius-sm)
+ var(--t-border-radius-sm) 0px;
+}
+
+.button[data-apply-blur] {
+ --floating-button-backdrop-filter: blur(20px);
+}
+
+// box-shadow matrix from the legacy nested ternary: shadow, focus, and
+// shadow+focus — the combined rule comes last so it wins the cascade.
+.button[data-apply-shadow] {
+ --floating-button-box-shadow:
+ 0px 2px 4px 0px var(--t-background-transparent-light),
+ 0px 0px 4px 0px var(--t-background-transparent-medium);
+}
+
+// focus is gated by !disabled in the component, like the legacy call-site.
+.button[data-focus] {
+ --floating-button-border: 1px solid var(--t-color-blue);
+ --floating-button-box-shadow: 0 0 0 3px var(--t-color-blue3);
+ --floating-button-color: var(--t-color-blue);
+}
+
+.button[data-apply-shadow][data-focus] {
+ --floating-button-box-shadow:
+ 0px 2px 4px 0px var(--t-background-transparent-light),
+ 0px 0px 4px 0px var(--t-background-transparent-medium),
+ 0 0 0 3px var(--t-color-blue3);
+}
+
+// disabled comes last: it beats focus in the legacy color ternary.
+.button[data-disabled] {
+ --floating-button-color: var(--t-font-color-extra-light);
+ --floating-button-hover-bg: transparent;
+ --floating-button-active-bg: transparent;
+}
diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/FloatingButton.module.scss.d.ts
new file mode 100644
index 0000000000..de85059fc8
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/FloatingButton.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly button: 'button';
+ readonly small: 'small';
+ readonly medium: 'medium';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
new file mode 100644
index 0000000000..a3970b3563
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
@@ -0,0 +1,61 @@
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+import { type IconComponent } from '@ui/display';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './FloatingButton.module.scss';
+
+export type FloatingButtonSize = 'small' | 'medium';
+export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+
+export type FloatingButtonProps = {
+ className?: string;
+ Icon?: IconComponent;
+ title?: string;
+ size?: FloatingButtonSize;
+ position?: FloatingButtonPosition;
+ applyShadow?: boolean;
+ applyBlur?: boolean;
+ disabled?: boolean;
+ focus?: boolean;
+ to?: string;
+};
+
+export const FloatingButton = ({
+ className,
+ Icon,
+ title,
+ size = 'small',
+ position = 'standalone',
+ applyBlur = true,
+ applyShadow = true,
+ disabled = false,
+ focus = false,
+ to,
+}: FloatingButtonProps) => {
+ const { theme } = useContext(ThemeContext);
+
+ // Replaces the legacy Linaria `as` polymorphism: react-router Link when a
+ // `to` is provided, a native button otherwise. Typed as any to forward all
+ // props untyped, exactly like the legacy `as` prop did.
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const ButtonComponent: any = to ? Link : 'button';
+
+ return (
+
+ {React.Children.map(children, (child, index) => {
+ let position: FloatingButtonPosition;
+
+ if (index === 0) {
+ position = 'left';
+ } else if (index === children.length - 1) {
+ position = 'right';
+ } else {
+ position = 'middle';
+ }
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const additionalProps: any = {
+ position,
+ size,
+ applyShadow: false,
+ applyBlur: false,
+ };
+
+ if (isDefined(size)) {
+ additionalProps.size = size;
+ }
+
+ return React.cloneElement(child, additionalProps);
+ })}
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButton.module.scss b/packages/twenty-ui/src/input/button/components/FloatingIconButton.module.scss
new file mode 100644
index 0000000000..db0c12e6e3
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/FloatingIconButton.module.scss
@@ -0,0 +1,109 @@
+// Ported from the legacy Linaria FloatingIconButton. State rules below are
+// kept flat on .button so twenty-front styled(FloatingIconButton) overrides
+// keep beating them at (0,1,0) specificity. Source order replicates the
+// legacy ternary precedence: hover/active beat the isActive background,
+// applyShadow beats the focus ring, and disabled wins last.
+
+.button {
+ align-items: center;
+ backdrop-filter: none;
+ background: var(--t-background-primary);
+ border: 1px solid var(--t-border-color-strong);
+ border-radius: var(--floating-icon-button-radius, var(--t-border-radius-sm));
+ box-shadow: none;
+ box-sizing: border-box;
+ color: var(--t-font-color-tertiary);
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ font-family: var(--t-font-family);
+ font-weight: var(--t-font-weight-regular);
+ gap: var(--t-spacing-1);
+ justify-content: center;
+ padding: 0;
+ position: relative;
+ transition: background calc(var(--t-animation-duration-instant) * 1s) ease;
+ white-space: nowrap;
+}
+
+.small {
+ height: 24px;
+ width: 24px;
+}
+
+.medium {
+ height: 32px;
+ width: 32px;
+}
+
+// Grouped buttons (any non-standalone position) are 4px smaller.
+.small:not([data-position='standalone']) {
+ height: 20px;
+ width: 20px;
+}
+
+.medium:not([data-position='standalone']) {
+ height: 28px;
+ width: 28px;
+}
+
+.button[data-position='left'] {
+ --floating-icon-button-radius: var(--t-border-radius-sm) 0px 0px
+ var(--t-border-radius-sm);
+}
+
+.button[data-position='middle'] {
+ --floating-icon-button-radius: 0px;
+}
+
+.button[data-position='right'] {
+ --floating-icon-button-radius: 0px var(--t-border-radius-sm)
+ var(--t-border-radius-sm) 0px;
+}
+
+.button[data-apply-blur] {
+ backdrop-filter: var(--t-blur-medium);
+}
+
+.button[data-is-active] {
+ background: var(--t-background-transparent-medium);
+}
+
+// Declared after [data-is-active] so hover/active win over it, like the
+// legacy &:hover/&:active beating the base background.
+.button:hover {
+ background: var(--t-background-transparent-lighter);
+}
+
+.button:active {
+ background: var(--t-background-transparent-medium);
+}
+
+.button:focus {
+ outline: none;
+}
+
+// data-focus is gated by !disabled in the component, like the legacy
+// call-site passing focus={focus && !disabled}.
+.button[data-focus] {
+ border-color: var(--t-color-blue);
+ box-shadow: 0 0 0 3px var(--t-color-blue3);
+ color: var(--t-color-blue);
+}
+
+// applyShadow wins over the focus ring, replicating the legacy ternary order.
+.button[data-apply-shadow] {
+ box-shadow: var(--t-box-shadow-light);
+}
+
+.button[data-disabled] {
+ color: var(--t-font-color-extra-light);
+ cursor: not-allowed;
+}
+
+// A disabled button still matches :hover/:active; the legacy styles
+// explicitly turned the background transparent there.
+.button[data-disabled]:hover,
+.button[data-disabled]:active {
+ background: transparent;
+}
diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/FloatingIconButton.module.scss.d.ts
new file mode 100644
index 0000000000..de85059fc8
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/FloatingIconButton.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly button: 'button';
+ readonly small: 'small';
+ readonly medium: 'medium';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
new file mode 100644
index 0000000000..1a9a816f87
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import React, { useContext } from 'react';
+
+import { type IconComponent } from '@ui/display';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './FloatingIconButton.module.scss';
+
+export type FloatingIconButtonSize = 'small' | 'medium';
+export type FloatingIconButtonPosition =
+ | 'standalone'
+ | 'left'
+ | 'middle'
+ | 'right';
+
+export type FloatingIconButtonProps = {
+ className?: string;
+ Icon?: IconComponent;
+ size?: FloatingIconButtonSize;
+ position?: FloatingIconButtonPosition;
+ applyShadow?: boolean;
+ applyBlur?: boolean;
+ disabled?: boolean;
+ focus?: boolean;
+ onClick?: (event: React.MouseEvent
+ {iconButtons.map(({ Icon, onClick, isActive }, index) => {
+ const position: FloatingIconButtonPosition =
+ iconButtons.length === 1
+ ? 'standalone'
+ : index === 0
+ ? 'left'
+ : index === iconButtons.length - 1
+ ? 'right'
+ : 'middle';
+
+ return (
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/IconButton.module.scss b/packages/twenty-ui/src/input/button/components/IconButton.module.scss
new file mode 100644
index 0000000000..8fab7c1f26
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/IconButton.module.scss
@@ -0,0 +1,307 @@
+@use 'sass:map';
+
+// The variant × accent × disabled × focus matrix below is ported
+// token-for-token from computeIconButtonDynamicStyles in the deprecated
+// IconButton.tsx. Matrix rules only assign CSS custom properties; the actual
+// declarations live on the flat .button class so twenty-front
+// styled(IconButton) overrides keep beating them at (0,1,0) specificity,
+// exactly like the legacy single Linaria class did.
+// Cascade order inside each branch: base, then [data-focus], then
+// [data-disabled] — later rules win, which replicates the legacy switch
+// precedence (disabled > focus > base).
+
+.button {
+ align-items: center;
+ background: var(--icon-button-bg, transparent);
+ border-color: var(--icon-button-border-color, transparent);
+ border-radius: var(--icon-button-radius, var(--t-border-radius-sm));
+ border-style: solid;
+ border-width: var(--icon-button-border-width, 1px);
+ box-shadow: var(--icon-button-box-shadow, none);
+ box-sizing: border-box;
+ color: var(--icon-button-color, var(--t-font-color-secondary));
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ font-family: var(--t-font-family);
+ font-weight: 500;
+ gap: var(--t-spacing-1);
+ justify-content: center;
+ opacity: var(--icon-button-opacity, 1);
+ padding: 0;
+ transition: background 0.1s ease;
+ white-space: nowrap;
+
+ &:hover {
+ background: var(--icon-button-hover-bg, transparent);
+ }
+
+ &:active {
+ background: var(--icon-button-active-bg, transparent);
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &[data-disabled] {
+ cursor: not-allowed;
+ }
+}
+
+.small {
+ height: 24px;
+ min-width: 24px;
+}
+
+.medium {
+ height: 32px;
+ min-width: 32px;
+}
+
+// position only reshapes the border radius; standalone keeps the .button
+// fallback radius.
+.button[data-position='left'] {
+ --icon-button-radius: var(--t-border-radius-sm) 0px 0px
+ var(--t-border-radius-sm);
+}
+
+.button[data-position='middle'] {
+ --icon-button-radius: 0px;
+}
+
+.button[data-position='right'] {
+ --icon-button-radius: 0px var(--t-border-radius-sm) var(--t-border-radius-sm)
+ 0px;
+}
+
+// Default border widths: tertiary is borderless and middle collapses the
+// horizontal borders for primary/secondary; the .button fallback covers the
+// remaining 1px cases.
+.button[data-variant='tertiary'] {
+ --icon-button-border-width: 0;
+}
+
+.button[data-position='middle']:is(
+ [data-variant='primary'],
+ [data-variant='secondary']
+ ) {
+ --icon-button-border-width: 1px 0px;
+}
+
+// focusOverride from the legacy source: an enabled focused button always
+// shows a full 1px border, even for tertiary (borderless) and middle
+// (collapsed) buttons.
+.button[data-focus]:not([data-disabled]) {
+ --icon-button-border-width: 1px 1px;
+}
+
+// variant=primary, keyed by accent. Null entries mean the disabled state
+// keeps the base/focus value, mirroring the legacy switch.
+$primary-accents: (
+ 'default': (
+ bg: var(--t-background-secondary),
+ border: var(--t-background-transparent-light),
+ border-focus: var(--t-color-blue),
+ border-disabled: null,
+ shadow-focus: var(--t-accent-tertiary),
+ color: var(--t-font-color-secondary),
+ color-disabled: var(--t-font-color-extra-light),
+ opacity-disabled: null,
+ hover: var(--t-background-tertiary),
+ active: var(--t-background-quaternary),
+ hover-disabled: var(--t-background-secondary),
+ active-disabled: var(--t-background-secondary),
+ ),
+ 'blue': (
+ bg: var(--t-color-blue),
+ border: var(--t-background-transparent-light),
+ border-focus: var(--t-color-blue),
+ border-disabled: transparent,
+ shadow-focus: var(--t-accent-tertiary),
+ color: var(--t-gray-scale-gray1),
+ color-disabled: null,
+ opacity-disabled: 0.24,
+ hover: var(--t-color-blue10),
+ active: var(--t-color-blue12),
+ hover-disabled: var(--t-color-blue),
+ active-disabled: var(--t-color-blue),
+ ),
+ 'danger': (
+ bg: var(--t-color-red),
+ border: var(--t-background-transparent-light),
+ border-focus: var(--t-color-red),
+ border-disabled: transparent,
+ shadow-focus: var(--t-color-red3),
+ color: var(--t-gray-scale-gray1),
+ color-disabled: null,
+ opacity-disabled: 0.24,
+ hover: var(--t-color-red10),
+ active: var(--t-color-red10),
+ hover-disabled: var(--t-color-red),
+ active-disabled: var(--t-color-red),
+ ),
+);
+
+@each $accent, $tokens in $primary-accents {
+ .button[data-variant='primary'][data-accent='#{$accent}'] {
+ --icon-button-bg: #{map.get($tokens, bg)};
+ --icon-button-border-color: #{map.get($tokens, border)};
+ --icon-button-color: #{map.get($tokens, color)};
+ --icon-button-hover-bg: #{map.get($tokens, hover)};
+ --icon-button-active-bg: #{map.get($tokens, active)};
+ }
+
+ // borderColor follows the raw focus flag in the legacy source, so
+ // disabled+focus keeps it unless the accent defines border-disabled.
+ .button[data-variant='primary'][data-accent='#{$accent}'][data-focus] {
+ --icon-button-border-color: #{map.get($tokens, border-focus)};
+ --icon-button-box-shadow: 0 0 0 3px #{map.get($tokens, shadow-focus)};
+ }
+
+ .button[data-variant='primary'][data-accent='#{$accent}'][data-disabled] {
+ --icon-button-box-shadow: none;
+ --icon-button-hover-bg: #{map.get($tokens, hover-disabled)};
+ --icon-button-active-bg: #{map.get($tokens, active-disabled)};
+
+ @if map.get($tokens, border-disabled) {
+ --icon-button-border-color: #{map.get($tokens, border-disabled)};
+ }
+
+ @if map.get($tokens, color-disabled) {
+ --icon-button-color: #{map.get($tokens, color-disabled)};
+ }
+
+ @if map.get($tokens, opacity-disabled) {
+ --icon-button-opacity: #{map.get($tokens, opacity-disabled)};
+ }
+ }
+}
+
+// variant=secondary|tertiary. The two variants share backgrounds and disabled
+// treatment; they differ in their resting border (secondary is outlined,
+// tertiary borderless) and in how that border reacts to focus, so the border
+// logic is spelled out per accent instead of mapped.
+
+// accent=default
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='default'] {
+ --icon-button-hover-bg: var(--t-background-transparent-light);
+ --icon-button-active-bg: var(--t-background-transparent-light);
+}
+
+.button[data-variant='secondary'][data-accent='default'] {
+ --icon-button-border-color: var(--t-background-transparent-medium);
+ --icon-button-color: var(--t-font-color-secondary);
+}
+
+.button[data-variant='tertiary'][data-accent='default'] {
+ --icon-button-color: var(--t-font-color-tertiary);
+}
+
+// background follows the raw focus flag (it stays on for disabled+focus).
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='default'][data-focus] {
+ --icon-button-bg: var(--t-background-transparent-primary);
+ --icon-button-border-color: var(--t-color-blue);
+ --icon-button-box-shadow: 0 0 0 3px var(--t-accent-tertiary);
+}
+
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='default'][data-disabled] {
+ --icon-button-box-shadow: none;
+ --icon-button-color: var(--t-font-color-extra-light);
+ --icon-button-hover-bg: transparent;
+ --icon-button-active-bg: transparent;
+}
+
+// The secondary border only turns blue on enabled focus; tertiary keeps the
+// blue border even for disabled+focus (raw focus in the legacy source).
+.button[data-variant='secondary'][data-accent='default'][data-disabled] {
+ --icon-button-border-color: var(--t-background-transparent-medium);
+}
+
+// accent=blue
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='blue'] {
+ --icon-button-color: var(--t-color-blue);
+ --icon-button-hover-bg: var(--t-accent-tertiary);
+ --icon-button-active-bg: var(--t-accent-secondary);
+}
+
+.button[data-variant='secondary'][data-accent='blue'] {
+ --icon-button-border-color: var(--t-color-blue);
+}
+
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='blue'][data-focus] {
+ --icon-button-bg: var(--t-background-transparent-primary);
+ --icon-button-box-shadow: 0 0 0 3px var(--t-accent-tertiary);
+}
+
+// Only the tertiary border reacts to focus for the blue accent; the
+// secondary border is keyed on disabled alone.
+.button[data-variant='tertiary'][data-accent='blue'][data-focus] {
+ --icon-button-border-color: var(--t-color-blue);
+}
+
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='blue'][data-disabled] {
+ --icon-button-box-shadow: none;
+ --icon-button-color: var(--t-accent-accent4060);
+ --icon-button-hover-bg: transparent;
+ --icon-button-active-bg: transparent;
+}
+
+.button[data-variant='secondary'][data-accent='blue'][data-disabled] {
+ --icon-button-border-color: var(--t-color-blue5);
+}
+
+// accent=danger
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='danger'] {
+ --icon-button-color: var(--t-font-color-danger);
+ --icon-button-hover-bg: var(--t-background-danger);
+ --icon-button-active-bg: var(--t-background-danger);
+}
+
+.button[data-variant='secondary'][data-accent='danger'] {
+ --icon-button-border-color: var(--t-border-color-danger);
+}
+
+// danger keeps a transparent background even on focus; only the shadow and
+// the tertiary border react.
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='danger'][data-focus] {
+ --icon-button-box-shadow: 0 0 0 3px var(--t-color-red3);
+}
+
+.button[data-variant='tertiary'][data-accent='danger'][data-focus] {
+ --icon-button-border-color: var(--t-color-red);
+}
+
+.button:is(
+ [data-variant='secondary'],
+ [data-variant='tertiary']
+ )[data-accent='danger'][data-disabled] {
+ --icon-button-box-shadow: none;
+ --icon-button-color: var(--t-color-red5);
+ --icon-button-hover-bg: transparent;
+ --icon-button-active-bg: transparent;
+}
diff --git a/packages/twenty-ui/src/input/button/components/IconButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/IconButton.module.scss.d.ts
new file mode 100644
index 0000000000..de85059fc8
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/IconButton.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly button: 'button';
+ readonly small: 'small';
+ readonly medium: 'medium';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx
new file mode 100644
index 0000000000..bcf985b3d9
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx
@@ -0,0 +1,64 @@
+import { clsx } from 'clsx';
+import React, { useContext } from 'react';
+
+import { type IconComponent } from '@ui/display';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './IconButton.module.scss';
+
+export type IconButtonSize = 'medium' | 'small';
+export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+export type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type IconButtonAccent = 'default' | 'blue' | 'danger';
+
+export type IconButtonProps = {
+ className?: string;
+ Icon?: IconComponent;
+ variant?: IconButtonVariant;
+ size?: IconButtonSize;
+ position?: IconButtonPosition;
+ accent?: IconButtonAccent;
+ disabled?: boolean;
+ focus?: boolean;
+ dataTestId?: string;
+ ariaLabel?: string;
+ onClick?: (event: React.MouseEvent
+ {iconButtons.map(({ Icon, onClick }, index) => {
+ return (
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/InsideButton.module.scss b/packages/twenty-ui/src/input/button/components/InsideButton.module.scss
new file mode 100644
index 0000000000..af2ebbb5fc
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/InsideButton.module.scss
@@ -0,0 +1,24 @@
+.button {
+ align-items: center;
+ border: none;
+ background-color: transparent;
+ border-radius: var(--t-border-radius-xs);
+ color: var(--t-font-color-tertiary);
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ height: 20px;
+ justify-content: center;
+ padding: 0;
+ white-space: nowrap;
+ min-width: 20px;
+ transition: background-color 0.1s ease;
+
+ &:hover {
+ background-color: var(--t-background-transparent-light);
+ }
+
+ &[data-disabled] {
+ cursor: not-allowed;
+ }
+}
diff --git a/packages/twenty-ui/src/input/button/components/InsideButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/InsideButton.module.scss.d.ts
new file mode 100644
index 0000000000..d6e2364fc5
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/InsideButton.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly button: 'button';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/InsideButton.tsx b/packages/twenty-ui/src/input/button/components/InsideButton.tsx
new file mode 100644
index 0000000000..7edb37ac79
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/InsideButton.tsx
@@ -0,0 +1,34 @@
+import { clsx } from 'clsx';
+import React, { useContext } from 'react';
+
+import { type IconComponent } from '@ui/display';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './InsideButton.module.scss';
+
+export type InsideButtonProps = {
+ className?: string;
+ Icon?: IconComponent;
+ onClick?: (event: React.MouseEvent
+ {iconButtons.map(
+ ({ Wrapper, Icon, accent, onClick, ariaLabel, dataTestId }, index) => {
+ const iconButton = (
+
+);
diff --git a/packages/twenty-ui/src/input/button/components/MainButton.module.scss b/packages/twenty-ui/src/input/button/components/MainButton.module.scss
new file mode 100644
index 0000000000..d81831a339
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/MainButton.module.scss
@@ -0,0 +1,62 @@
+// State rules below only assign CSS custom properties; the actual
+// declarations live on the flat .button class so twenty-front
+// styled(MainButton) overrides keep beating them at (0,1,0) specificity,
+// exactly like the legacy single Linaria class did.
+// Cascade order replicates the legacy switches: disabled > variant.
+
+.button {
+ align-items: center;
+ background: var(--main-button-bg);
+ border: 1px solid;
+ border-color: var(--main-button-border-color);
+ border-radius: var(--t-border-radius-md);
+ box-shadow: var(--main-button-box-shadow, var(--t-box-shadow-light));
+ color: var(--main-button-color);
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ font-family: var(--t-font-family);
+ font-weight: var(--t-font-weight-semi-bold);
+ gap: var(--t-spacing-2);
+ justify-content: center;
+ outline: none;
+ padding: var(--t-spacing-2) var(--t-spacing-3);
+ max-height: var(--t-spacing-8);
+ width: var(--main-button-width, auto);
+
+ &:hover {
+ background: var(--main-button-hover-bg);
+ }
+
+ &[data-disabled] {
+ cursor: not-allowed;
+ }
+}
+
+.button[data-variant='primary'] {
+ --main-button-bg: var(--t-background-primary-inverted);
+ --main-button-border-color: var(--t-background-transparent-strong);
+ --main-button-color: var(--t-font-color-inverted);
+ --main-button-hover-bg: var(--t-background-primary-inverted-hover);
+}
+
+.button[data-variant='secondary'] {
+ --main-button-bg: var(--t-background-primary);
+ --main-button-border-color: var(--t-border-color-medium);
+ --main-button-color: var(--t-font-color-primary);
+ --main-button-hover-bg: var(--t-background-tertiary);
+}
+
+.button[data-disabled] {
+ --main-button-bg: var(--t-background-secondary);
+ --main-button-border-color: var(--t-background-transparent-lighter);
+ --main-button-box-shadow: none;
+ --main-button-color: var(--t-font-color-light);
+}
+
+// hover when disabled: the legacy hover switch ignores disabled for
+// secondary (keeps tertiary), while primary falls back to the disabled
+// background.
+.button[data-variant='primary'][data-disabled] {
+ --main-button-hover-bg: var(--t-background-secondary);
+}
diff --git a/packages/twenty-ui/src/input/button/components/MainButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/MainButton.module.scss.d.ts
new file mode 100644
index 0000000000..d6e2364fc5
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/MainButton.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly button: 'button';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/MainButton.tsx b/packages/twenty-ui/src/input/button/components/MainButton.tsx
new file mode 100644
index 0000000000..24ca26c40e
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/MainButton.tsx
@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import React, { type FunctionComponent, useContext } from 'react';
+
+import { type IconComponent } from '@ui/display';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './MainButton.module.scss';
+
+export type MainButtonVariant = 'primary' | 'secondary';
+
+type Props = {
+ title: string;
+ fullWidth?: boolean;
+ width?: number;
+ variant?: MainButtonVariant;
+ soon?: boolean;
+} & React.ComponentProps<'button'>;
+
+type MainButtonProps = Props & {
+ Icon?: IconComponent | FunctionComponent<{ size: number }>;
+};
+
+export const MainButton = ({
+ Icon,
+ title,
+ width,
+ fullWidth = false,
+ variant = 'primary',
+ type,
+ onClick,
+ disabled,
+ className,
+}: MainButtonProps) => {
+ const { theme } = useContext(ThemeContext);
+
+ // Replicates the legacy ternary exactly: fullWidth wins over width, and a
+ // falsy width (0) falls back to the 'auto' default.
+ const widthValue = fullWidth ? '100%' : width ? `${width}px` : undefined;
+
+ return (
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/RoundedIconButton.module.scss b/packages/twenty-ui/src/input/button/components/RoundedIconButton.module.scss
new file mode 100644
index 0000000000..d238375e8a
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/RoundedIconButton.module.scss
@@ -0,0 +1,35 @@
+.button {
+ align-items: center;
+ background: var(--t-color-blue);
+ border: none;
+ border-radius: 50%;
+ color: var(--t-font-color-inverted);
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ outline: none;
+ padding: 0;
+ transition:
+ color 0.1s ease-in-out,
+ background 0.1s ease-in-out;
+
+ &:hover:not(:disabled) {
+ background: var(--t-color-blue10);
+ }
+
+ &:disabled {
+ background: var(--t-background-quaternary);
+ color: var(--t-font-color-tertiary);
+ cursor: default;
+ }
+}
+
+.small {
+ height: 20px;
+ width: 20px;
+}
+
+.medium {
+ height: 24px;
+ width: 24px;
+}
diff --git a/packages/twenty-ui/src/input/button/components/RoundedIconButton.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/RoundedIconButton.module.scss.d.ts
new file mode 100644
index 0000000000..de85059fc8
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/RoundedIconButton.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly button: 'button';
+ readonly small: 'small';
+ readonly medium: 'medium';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx
new file mode 100644
index 0000000000..a37a58e1fd
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx
@@ -0,0 +1,34 @@
+import { clsx } from 'clsx';
+import React, { useContext } from 'react';
+
+import { type IconComponent } from '@ui/display';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './RoundedIconButton.module.scss';
+
+export type RoundedIconButtonSize = 'small' | 'medium';
+
+type RoundedIconButtonProps = {
+ Icon: IconComponent;
+ size?: RoundedIconButtonSize;
+} & React.ButtonHTMLAttributes
+
+
+ {tooltipContent && (
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.module.scss b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.module.scss
new file mode 100644
index 0000000000..26e78ff720
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.module.scss
@@ -0,0 +1,100 @@
+.tabButton {
+ all: unset;
+ align-items: center;
+ color: var(--t-font-color-secondary);
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+ font-family: inherit;
+ display: flex;
+ gap: var(--t-spacing-1);
+ justify-content: center;
+ text-decoration: none;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: transparent;
+ z-index: 1;
+ }
+
+ &[data-disabled] {
+ color: var(--t-font-color-light);
+ pointer-events: none;
+ }
+
+ // active wins over disabled, matching the legacy Linaria ternary
+ // (active ? primary : disabled ? light : secondary)
+ &[data-active] {
+ color: var(--t-font-color-primary);
+
+ &::after {
+ background-color: var(--t-border-color-inverted);
+ }
+ }
+}
+
+.tabContainer {
+ align-items: center;
+ color: var(--t-font-color-secondary);
+ cursor: pointer;
+ background-color: transparent;
+ display: flex;
+ gap: var(--t-spacing-1);
+ justify-content: center;
+ text-decoration: none;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: transparent;
+ z-index: 1;
+ }
+
+ &[data-disabled] {
+ color: var(--t-font-color-light);
+ }
+
+ &[data-active] {
+ color: var(--t-font-color-primary);
+
+ &::after {
+ background-color: var(--t-border-color-inverted);
+ }
+ }
+}
+
+.tabHover {
+ box-sizing: border-box;
+ display: flex;
+ gap: var(--t-spacing-1);
+ // the legacy ternary fell through to the md padding when contentSize was
+ // undefined, so md padding is the base and sm is the override
+ padding: var(--t-spacing-2) var(--t-spacing-2);
+ font-weight: var(--t-font-weight-medium);
+ width: 100%;
+ white-space: nowrap;
+ border-radius: var(--t-border-radius-sm);
+
+ &[data-content-size='sm'] {
+ padding: var(--t-spacing-1) var(--t-spacing-2);
+ }
+
+ &:hover {
+ background: var(--t-background-tertiary);
+ }
+
+ &:active {
+ background: var(--t-background-quaternary);
+ }
+}
diff --git a/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.module.scss.d.ts b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.module.scss.d.ts
new file mode 100644
index 0000000000..9832b4d27d
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly tabButton: 'tabButton';
+ readonly tabContainer: 'tabContainer';
+ readonly tabHover: 'tabHover';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx
new file mode 100644
index 0000000000..ffe8f44ef8
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx
@@ -0,0 +1,84 @@
+import { clsx } from 'clsx';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { Link } from 'react-router-dom';
+
+import styles from './StyledTabBase.module.scss';
+
+// The deprecated Linaria styled components forwarded refs and arbitrary
+// native props (twenty-front spreads drag-and-drop props onto
+// StyledTabContainer), so the ports preserve that contract.
+type StyledTabButtonProps = {
+ active?: boolean;
+ disabled?: boolean;
+ to?: string;
+} & ComponentPropsWithoutRef<'button'>;
+
+export const StyledTabButton = forwardRef
+ {children}
+
+));
+
+StyledTabContainer.displayName = 'StyledTabContainer';
+
+type StyledTabHoverProps = {
+ contentSize?: 'sm' | 'md';
+} & ComponentPropsWithoutRef<'span'>;
+
+export const StyledTabHover = forwardRef{children}
;
+};
+
+const meta: Meta
+
+ ) : (
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.module.scss b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.module.scss
new file mode 100644
index 0000000000..de7bd20404
--- /dev/null
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.module.scss
@@ -0,0 +1,19 @@
+.editorHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: var(--t-spacing-10);
+ padding: 0 var(--t-spacing-2);
+ border: 1px solid var(--t-border-color-medium);
+ border-top-left-radius: var(--t-border-radius-sm);
+ border-top-right-radius: var(--t-border-radius-sm);
+ background-color: var(--t-background-transparent-lighter);
+ color: var(--t-font-color-tertiary);
+ font-weight: var(--t-font-weight-medium);
+}
+
+.elementContainer {
+ display: flex;
+ align-content: flex-end;
+ gap: var(--t-spacing-2);
+}
diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.module.scss.d.ts b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.module.scss.d.ts
new file mode 100644
index 0000000000..b8f5c05e74
--- /dev/null
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly editorHeader: 'editorHeader';
+ readonly elementContainer: 'elementContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx
new file mode 100644
index 0000000000..3cd97f84b4
--- /dev/null
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx
@@ -0,0 +1,31 @@
+import styles from './CodeEditorHeader.module.scss';
+
+export type CoreEditorHeaderProps = {
+ title?: string;
+ leftNodes?: React.ReactNode[];
+ rightNodes?: React.ReactNode[];
+};
+
+export const CoreEditorHeader = ({
+ title,
+ leftNodes,
+ rightNodes,
+}: CoreEditorHeaderProps) => {
+ return (
+
+ {
+ setMonaco(monaco);
+ setEditor(editor);
+
+ monaco.editor.defineTheme(
+ BASE_CODE_EDITOR_THEME_ID,
+ getBaseCodeEditorTheme(theme),
+ );
+ monaco.editor.setTheme(BASE_CODE_EDITOR_THEME_ID);
+
+ editor.onDidFocusEditorWidget(() => {
+ setIsEditorFocused(true);
+ });
+ editor.onDidBlurEditorWidget(() => {
+ setIsEditorFocused(false);
+ });
+
+ onMount?.(editor, monaco);
+ setModelMarkers(editor, monaco);
+ }}
+ onChange={(value) => {
+ if (isDefined(value)) {
+ onChange?.(value);
+ setModelMarkers(editor, monaco);
+ }
+ }}
+ onValidate={(markers) => {
+ onValidate?.(markers);
+ }}
+ options={{
+ formatOnPaste: true,
+ formatOnType: true,
+ overviewRulerLanes: 0,
+ scrollbar: {
+ vertical: 'hidden',
+ horizontal: 'hidden',
+ },
+ minimap: {
+ enabled: false,
+ },
+ ...options,
+ }}
+ />
+
+ {resizable && (
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/code-editor/constants/BaseCodeEditorThemeId.ts b/packages/twenty-ui/src/input/code-editor/constants/BaseCodeEditorThemeId.ts
new file mode 100644
index 0000000000..e0eff3e687
--- /dev/null
+++ b/packages/twenty-ui/src/input/code-editor/constants/BaseCodeEditorThemeId.ts
@@ -0,0 +1 @@
+export const BASE_CODE_EDITOR_THEME_ID = 'baseCodeEditorTheme';
diff --git a/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts b/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts
new file mode 100644
index 0000000000..9a5134d865
--- /dev/null
+++ b/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts
@@ -0,0 +1,77 @@
+import { type ThemeType } from '@ui/theme-constants';
+import { type editor } from 'monaco-editor';
+import { isDefined } from '@ui/utilities/utils/isDefined';
+
+const convertColorToHex = (color: string): string => {
+ const displayP3Match = color.match(
+ /color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/,
+ );
+
+ if (isDefined(displayP3Match)) {
+ const [, r, g, b, a] = displayP3Match;
+ const rHex = Math.round(parseFloat(r) * 255)
+ .toString(16)
+ .padStart(2, '0');
+ const gHex = Math.round(parseFloat(g) * 255)
+ .toString(16)
+ .padStart(2, '0');
+ const bHex = Math.round(parseFloat(b) * 255)
+ .toString(16)
+ .padStart(2, '0');
+
+ if (isDefined(a)) {
+ const aHex = Math.round(parseFloat(a) * 255)
+ .toString(16)
+ .padStart(2, '0');
+ return `#${rHex}${gHex}${bHex}${aHex}`;
+ }
+ return `#${rHex}${gHex}${bHex}`;
+ }
+
+ return color;
+};
+
+export const getBaseCodeEditorTheme = (
+ theme: ThemeType,
+): editor.IStandaloneThemeData => {
+ return {
+ base: 'vs',
+ inherit: true,
+ rules: [
+ {
+ token: '',
+ foreground: convertColorToHex(theme.code.text.gray),
+ fontStyle: 'bold',
+ },
+ {
+ token: 'keyword',
+ foreground: convertColorToHex(theme.code.text.sky),
+ },
+ {
+ token: 'delimiter',
+ foreground: convertColorToHex(theme.code.text.gray),
+ },
+ {
+ token: 'string',
+ foreground: convertColorToHex(theme.code.text.pink),
+ },
+ {
+ token: 'comment',
+ foreground: convertColorToHex(theme.code.text.orange),
+ },
+ ],
+ colors: {
+ 'editor.background': '#00000000',
+ 'editorCursor.foreground': convertColorToHex(theme.font.color.primary),
+ 'editorLineNumber.foreground': convertColorToHex(
+ theme.font.color.extraLight,
+ ),
+ 'editorLineNumber.activeForeground': convertColorToHex(
+ theme.font.color.light,
+ ),
+ 'editor.lineHighlightBackground': convertColorToHex(
+ theme.background.tertiary,
+ ),
+ },
+ };
+};
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.module.scss b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.module.scss
new file mode 100644
index 0000000000..0bbbb2992f
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.module.scss
@@ -0,0 +1,77 @@
+.container {
+ position: relative;
+ width: 160px;
+}
+
+.colorSchemeBackground {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ box-sizing: border-box;
+ width: 160px;
+ height: 80px;
+ padding-top: var(--t-spacing-6);
+ padding-left: var(--t-spacing-6);
+ border: 1px solid var(--color-scheme-card-border-color);
+ border-radius: var(--t-border-radius-md);
+ background: var(--color-scheme-card-background);
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.colorSchemeContent {
+ display: flex;
+ flex: 1;
+ box-sizing: border-box;
+ height: 56px;
+ padding-top: var(--t-spacing-2);
+ padding-left: var(--t-spacing-2);
+ border-top: 1px solid var(--color-scheme-card-border-color);
+ border-left: 1px solid var(--color-scheme-card-border-color);
+ border-radius: var(--t-border-radius-md) 0px 0px 0px;
+ background: var(--color-scheme-card-content-background);
+ color: var(--color-scheme-card-content-color);
+ font-size: 20px;
+ // Replaces the framer-motion hover animation from the deprecated component.
+ transition:
+ height 0.1s ease-in-out,
+ font-size 0.1s ease-in-out;
+}
+
+.colorSchemeBackground:hover .colorSchemeContent,
+.mixedColorSchemeSegment:hover .colorSchemeContent {
+ height: 61px;
+ font-size: 22px;
+}
+
+.mixedColorSchemeSegment {
+ position: relative;
+ display: flex;
+ width: 160px;
+ height: 80px;
+ border-radius: var(--t-border-radius-md);
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.checkmarkContainer {
+ position: absolute;
+ right: 0px;
+ bottom: 0px;
+ padding: var(--t-spacing-2);
+ opacity: 0;
+ visibility: hidden;
+ // Replaces the framer-motion AnimatePresence fade; the delayed visibility
+ // change keeps the checkmark rendered while it fades out.
+ transition:
+ opacity 0.3s ease-in-out,
+ visibility 0s linear 0.3s;
+
+ &[data-selected] {
+ opacity: 1;
+ visibility: visible;
+ transition:
+ opacity 0.3s ease-in-out,
+ visibility 0s;
+ }
+}
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.module.scss.d.ts b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.module.scss.d.ts
new file mode 100644
index 0000000000..6016a7f709
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.module.scss.d.ts
@@ -0,0 +1,8 @@
+declare const classNames: {
+ readonly container: 'container';
+ readonly colorSchemeBackground: 'colorSchemeBackground';
+ readonly colorSchemeContent: 'colorSchemeContent';
+ readonly mixedColorSchemeSegment: 'mixedColorSchemeSegment';
+ readonly checkmarkContainer: 'checkmarkContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
new file mode 100644
index 0000000000..24e7300705
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { clsx } from 'clsx';
+import { type AnimationControls } from 'framer-motion';
+
+import { Checkmark } from '@ui/display/checkmark/components/Checkmark';
+import { type ColorScheme } from '@ui/input/types/ColorScheme';
+import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
+
+import styles from './ColorSchemeCard.module.scss';
+
+// controls is no longer used since the hover animation is CSS-only now, but it
+// stays in the exported type for public API parity with twenty-ui-deprecated.
+export type ColorSchemeSegmentProps = {
+ variant: ColorScheme;
+ controls: AnimationControls;
+ className?: string;
+} & React.ComponentPropsWithoutRef<'div'>;
+
+const ColorSchemeSegment = ({
+ variant,
+ style,
+ className,
+ onClick,
+ onMouseEnter,
+ onMouseLeave,
+}: Omit
+ {leftNodes &&
+ leftNodes.map((leftButton, index) => {
+ return
+ {leftButton}
;
+ })}
+ {title}
+
+ {rightNodes &&
+ rightNodes.map((rightButton, index) => {
+ return
+ {rightButton}
;
+ })}
+
+
+ );
+};
+
+export type ColorSchemeCardProps = {
+ variant: ColorScheme;
+ selected?: boolean;
+} & React.ComponentPropsWithoutRef<'div'>;
+
+export const ColorSchemeCard = ({
+ variant,
+ selected,
+ onClick,
+}: ColorSchemeCardProps) => {
+ if (variant === 'System') {
+ return (
+ Aa
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.module.scss b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.module.scss
new file mode 100644
index 0000000000..10059973c3
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.module.scss
@@ -0,0 +1,24 @@
+.container {
+ display: flex;
+ flex-direction: row;
+
+ > * + * {
+ margin-left: var(--t-spacing-4);
+ }
+
+ @include respond-to(mobile) {
+ overflow: scroll;
+ }
+}
+
+.cardContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.label {
+ margin-top: var(--t-spacing-2);
+ color: var(--t-font-color-secondary);
+ font-size: var(--t-font-size-xs);
+ font-weight: var(--t-font-weight-medium);
+}
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.module.scss.d.ts b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.module.scss.d.ts
new file mode 100644
index 0000000000..847f3005c5
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly container: 'container';
+ readonly cardContainer: 'cardContainer';
+ readonly label: 'label';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx
new file mode 100644
index 0000000000..72c977bbdd
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx
@@ -0,0 +1,53 @@
+import { clsx } from 'clsx';
+
+import { type ColorScheme } from '@ui/input/types/ColorScheme';
+
+import { ColorSchemeCard } from './ColorSchemeCard';
+import styles from './ColorSchemePicker.module.scss';
+
+export type ColorSchemePickerProps = {
+ value: ColorScheme;
+ className?: string;
+ onChange: (value: ColorScheme) => void;
+ lightLabel: string;
+ darkLabel: string;
+ systemLabel: string;
+};
+
+export const ColorSchemePicker = ({
+ value,
+ onChange,
+ className,
+ lightLabel,
+ darkLabel,
+ systemLabel,
+}: ColorSchemePickerProps) => {
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.module.scss b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.module.scss
new file mode 100644
index 0000000000..5c0b5aaa72
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.module.scss
@@ -0,0 +1,8 @@
+.container {
+ display: flex;
+ flex-direction: row;
+
+ > * + * {
+ margin-left: var(--t-spacing-4);
+ }
+}
diff --git a/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.module.scss.d.ts b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.module.scss.d.ts
new file mode 100644
index 0000000000..8df71b4dea
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly container: 'container';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
new file mode 100644
index 0000000000..c41978265f
--- /dev/null
+++ b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
@@ -0,0 +1,43 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { ComponentDecorator } from '@ui/testing';
+
+import { ColorSchemeCard } from '../ColorSchemeCard';
+
+import styles from './ColorSchemeCard.stories.module.scss';
+
+const meta: Meta
+ onChange('Light')}
+ variant="Light"
+ selected={value === 'Light'}
+ />
+ {lightLabel}
+
+
+ onChange('Dark')}
+ variant="Dark"
+ selected={value === 'Dark'}
+ />
+ {darkLabel}
+
+
+ onChange('System')}
+ variant="System"
+ selected={value === 'System'}
+ />
+ {systemLabel}
+
+
+
+ );
+ },
+ ComponentDecorator,
+ ],
+ argTypes: {
+ variant: { control: false },
+ },
+ args: { selected: false },
+};
+
+export default meta;
+type Story = StoryObj
+
+ );
+};
diff --git a/packages/twenty-ui/src/input/components/Toggle.stories.tsx b/packages/twenty-ui/src/input/components/Toggle.stories.tsx
deleted file mode 100644
index e6d4dddb70..0000000000
--- a/packages/twenty-ui/src/input/components/Toggle.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-
-import { ThemeProvider } from '@new-ui/theme-constants';
-
-import { Toggle } from './Toggle';
-
-const meta: Meta
+
+ {filterDropdown && filterDropdown(filterButton)}
+
+
+ onChange(newValue)}
+ onFocus={() => setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ placeholder={placeholder}
+ autoFocus={autoFocus}
+ disabled={disabled}
+ />
+ - 0 && styles.nested)}>
+ {elements.length === 0 ? (
+
+
+
+ - 0 && styles.nested, className)}>
+ {children}
+
+
+
+
+
+ );
+};
+
+const meta: Meta
+
+
+
+ + This is some content inside the AnimatedExpandableContainer. It + will animate smoothly when expanding or collapsing. +
++ You can control the animation duration, dimension, and mode + through the Storybook controls. +
++ Try different combinations to see how the container behaves with + different settings! +
+
+ 
+
+ );
+};
diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.module.scss b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.module.scss
new file mode 100644
index 0000000000..1fd5d982c8
--- /dev/null
+++ b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.module.scss
@@ -0,0 +1,36 @@
+.emptyContainer {
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: var(--t-spacing-6);
+ justify-content: center;
+ text-align: center;
+}
+
+.emptyTextContainer {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ gap: var(--t-spacing-2);
+ justify-content: center;
+ text-align: center;
+ width: 100%;
+}
+
+.emptyTitle {
+ color: var(--t-font-color-primary);
+ font-size: var(--t-font-size-lg);
+ font-weight: var(--t-font-weight-semi-bold);
+}
+
+.emptySubTitle {
+ color: var(--t-font-color-tertiary);
+ font-size: var(--t-font-size-sm);
+ font-weight: var(--t-font-weight-regular);
+ line-height: var(--t-text-line-height-lg);
+ max-height: 2.8em;
+ overflow: hidden;
+ width: 50%;
+}
diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.module.scss.d.ts b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.module.scss.d.ts
new file mode 100644
index 0000000000..2dab28b357
--- /dev/null
+++ b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.module.scss.d.ts
@@ -0,0 +1,7 @@
+declare const classNames: {
+ readonly emptyContainer: 'emptyContainer';
+ readonly emptyTextContainer: 'emptyTextContainer';
+ readonly emptyTitle: 'emptyTitle';
+ readonly emptySubTitle: 'emptySubTitle';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
new file mode 100644
index 0000000000..2d5dba330e
--- /dev/null
+++ b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
@@ -0,0 +1,77 @@
+import { clsx } from 'clsx';
+import { type HTMLMotionProps, motion } from 'framer-motion';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { isDefined } from '@ui/utilities/utils/isDefined';
+
+import styles from './EmptyPlaceholderStyled.module.scss';
+
+type AnimatedPlaceholderEmptyContainerProps = Pick<
+ HTMLMotionProps<'div'>,
+ 'initial' | 'animate' | 'transition'
+> & {
+ children?: ReactNode;
+ className?: string;
+ width?: number;
+};
+
+export const AnimatedPlaceholderEmptyContainer = ({
+ children,
+ className,
+ width,
+ initial,
+ animate,
+ transition,
+}: AnimatedPlaceholderEmptyContainerProps) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-ui/src/layout/card/components/CardContent.module.scss b/packages/twenty-ui/src/layout/card/components/CardContent.module.scss
new file mode 100644
index 0000000000..350564f33f
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/CardContent.module.scss
@@ -0,0 +1,24 @@
+.cardContent {
+ background-color: var(--t-background-secondary);
+ padding: var(--t-spacing-4);
+
+ border-bottom: none;
+
+ cursor: default;
+
+ &[data-divider] {
+ border-bottom: 1px solid var(--t-border-color-medium);
+ }
+
+ &[data-clickable] {
+ cursor: pointer;
+ }
+
+ &:hover {
+ background: transparent;
+ }
+
+ &[data-hover-highlight]:hover {
+ background: var(--t-background-transparent-light);
+ }
+}
diff --git a/packages/twenty-ui/src/layout/card/components/CardContent.module.scss.d.ts b/packages/twenty-ui/src/layout/card/components/CardContent.module.scss.d.ts
new file mode 100644
index 0000000000..d4f1beb46b
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/CardContent.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly cardContent: 'cardContent';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/layout/card/components/CardContent.tsx b/packages/twenty-ui/src/layout/card/components/CardContent.tsx
new file mode 100644
index 0000000000..7227520f82
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/CardContent.tsx
@@ -0,0 +1,35 @@
+import { clsx } from 'clsx';
+import { type HTMLMotionProps, motion } from 'framer-motion';
+import { type ReactNode } from 'react';
+
+import styles from './CardContent.module.scss';
+
+type CardContentProps = {
+ children?: ReactNode;
+ className?: string;
+ divider?: boolean;
+ isClickable?: boolean;
+ hasHoverHighlight?: boolean;
+} & Omit
+ {children}
+
+ );
+};
diff --git a/packages/twenty-ui/src/layout/card/components/CardHeader.module.scss b/packages/twenty-ui/src/layout/card/components/CardHeader.module.scss
new file mode 100644
index 0000000000..9dc125916e
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/CardHeader.module.scss
@@ -0,0 +1,7 @@
+.cardHeader {
+ background-color: var(--t-background-primary);
+ border-bottom: 1px solid var(--t-border-color-medium);
+ font-size: var(--t-font-size-sm);
+ font-weight: var(--t-font-weight-medium);
+ padding: var(--t-spacing-2) var(--t-spacing-4);
+}
diff --git a/packages/twenty-ui/src/layout/card/components/CardHeader.module.scss.d.ts b/packages/twenty-ui/src/layout/card/components/CardHeader.module.scss.d.ts
new file mode 100644
index 0000000000..0ac3454d2f
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/CardHeader.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly cardHeader: 'cardHeader';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/layout/card/components/CardHeader.tsx b/packages/twenty-ui/src/layout/card/components/CardHeader.tsx
new file mode 100644
index 0000000000..1a15cd03d2
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/CardHeader.tsx
@@ -0,0 +1,19 @@
+import { clsx } from 'clsx';
+import { type ComponentPropsWithoutRef } from 'react';
+
+import styles from './CardHeader.module.scss';
+
+type CardHeaderProps = ComponentPropsWithoutRef<'div'>;
+
+export const CardHeader = ({
+ children,
+ className,
+ ...rest
+}: CardHeaderProps) => {
+ return (
+ // oxlint-disable-next-line react/jsx-props-no-spreading
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx b/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
new file mode 100644
index 0000000000..ecac8b70d2
--- /dev/null
+++ b/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
@@ -0,0 +1,31 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { ComponentDecorator } from '@ui/testing';
+
+import { Card } from '../Card';
+import { CardContent } from '../CardContent';
+import { CardFooter } from '../CardFooter';
+import { CardHeader } from '../CardHeader';
+
+const meta: Meta
+ {children}
+
+);
diff --git a/packages/twenty-ui/src/layout/modal/components/ModalFooter.module.scss b/packages/twenty-ui/src/layout/modal/components/ModalFooter.module.scss
new file mode 100644
index 0000000000..6792fb2f78
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/ModalFooter.module.scss
@@ -0,0 +1,22 @@
+.footer {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: var(--t-spacing-2);
+ height: 60px;
+ justify-content: flex-end;
+ overflow: hidden;
+ padding: var(--t-spacing-5);
+}
+
+.autoHeight {
+ height: auto;
+}
+
+.centered {
+ justify-content: center;
+}
+
+.smallPadding {
+ padding: var(--t-spacing-3);
+}
diff --git a/packages/twenty-ui/src/layout/modal/components/ModalFooter.module.scss.d.ts b/packages/twenty-ui/src/layout/modal/components/ModalFooter.module.scss.d.ts
new file mode 100644
index 0000000000..8bd9b6a5a0
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/ModalFooter.module.scss.d.ts
@@ -0,0 +1,7 @@
+declare const classNames: {
+ readonly footer: 'footer';
+ readonly autoHeight: 'autoHeight';
+ readonly centered: 'centered';
+ readonly smallPadding: 'smallPadding';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/layout/modal/components/ModalFooter.tsx b/packages/twenty-ui/src/layout/modal/components/ModalFooter.tsx
new file mode 100644
index 0000000000..3df4a7fa15
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/ModalFooter.tsx
@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+
+import styles from './ModalFooter.module.scss';
+
+export type ModalFooterProps = React.PropsWithChildren & {
+ autoHeight?: boolean;
+ centered?: boolean;
+ smallPadding?: boolean;
+ className?: string;
+};
+
+export const ModalFooter = ({
+ children,
+ autoHeight,
+ centered,
+ smallPadding,
+ className,
+}: ModalFooterProps) => (
+
+ {children}
+
+);
diff --git a/packages/twenty-ui/src/layout/modal/components/ModalHeader.module.scss b/packages/twenty-ui/src/layout/modal/components/ModalHeader.module.scss
new file mode 100644
index 0000000000..0a7775e47f
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/ModalHeader.module.scss
@@ -0,0 +1,31 @@
+.header {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ flex-shrink: 0;
+ height: 60px;
+ overflow: hidden;
+ padding: var(--t-spacing-5);
+}
+
+.autoHeight {
+ height: auto;
+}
+
+.noPadding {
+ padding: 0;
+}
+
+// paddingHorizontal wins over noPadding, like the deprecated Linaria switch
+.withHorizontalPadding {
+ padding: 0 var(--modal-header-padding-horizontal);
+
+ @include respond-to(mobile) {
+ padding-left: var(--t-spacing-4);
+ padding-right: var(--t-spacing-4);
+ }
+}
+
+.withBorderBottom {
+ border-bottom: 1px solid var(--t-border-color-medium);
+}
diff --git a/packages/twenty-ui/src/layout/modal/components/ModalHeader.module.scss.d.ts b/packages/twenty-ui/src/layout/modal/components/ModalHeader.module.scss.d.ts
new file mode 100644
index 0000000000..abb7431876
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/ModalHeader.module.scss.d.ts
@@ -0,0 +1,8 @@
+declare const classNames: {
+ readonly header: 'header';
+ readonly autoHeight: 'autoHeight';
+ readonly noPadding: 'noPadding';
+ readonly withHorizontalPadding: 'withHorizontalPadding';
+ readonly withBorderBottom: 'withBorderBottom';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/layout/modal/components/ModalHeader.tsx b/packages/twenty-ui/src/layout/modal/components/ModalHeader.tsx
new file mode 100644
index 0000000000..5f886965d7
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/ModalHeader.tsx
@@ -0,0 +1,41 @@
+import { clsx } from 'clsx';
+
+import styles from './ModalHeader.module.scss';
+
+export type ModalHeaderProps = React.PropsWithChildren & {
+ noPadding?: boolean;
+ autoHeight?: boolean;
+ hasBorderBottom?: boolean;
+ paddingHorizontal?: number;
+ backgroundColor?: string;
+};
+
+export const ModalHeader = ({
+ children,
+ noPadding,
+ autoHeight,
+ hasBorderBottom,
+ paddingHorizontal,
+ backgroundColor,
+}: ModalHeaderProps) => (
+
+ {children}
+
+);
diff --git a/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.module.scss b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.module.scss
new file mode 100644
index 0000000000..0a70c803f2
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.module.scss
@@ -0,0 +1,7 @@
+.centeredTitle {
+ text-align: center;
+}
+
+.sectionContainer {
+ margin-bottom: var(--t-spacing-6);
+}
diff --git a/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.module.scss.d.ts b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.module.scss.d.ts
new file mode 100644
index 0000000000..d66bb74eaf
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly centeredTitle: 'centeredTitle';
+ readonly sectionContainer: 'sectionContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx
new file mode 100644
index 0000000000..a0e5ec16a7
--- /dev/null
+++ b/packages/twenty-ui/src/layout/modal/components/__stories__/Modal.stories.tsx
@@ -0,0 +1,246 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { H1Title, H1TitleFontColor, H2Title, IconX } from '@ui/display';
+import { Button, IconButton } from '@ui/input';
+import { Section, SectionAlignment, SectionFontColor } from '@ui/layout';
+import { ComponentDecorator } from '@ui/testing';
+
+import { Modal } from '../Modal';
+import { ModalContent } from '../ModalContent';
+import { ModalFooter } from '../ModalFooter';
+import { ModalHeader } from '../ModalHeader';
+
+import styles from './Modal.stories.module.scss';
+
+const meta: Meta
+
+
+
+ This action cannot be undone. The record and all of its data will be
+ permanently removed.
+
+
+
+
+