diff --git a/.github/workflows/docs-i18n-pull.yaml b/.github/workflows/docs-i18n-pull.yaml
index b4ba1db8ca..70148ac1de 100644
--- a/.github/workflows/docs-i18n-pull.yaml
+++ b/.github/workflows/docs-i18n-pull.yaml
@@ -97,7 +97,8 @@ jobs:
skip_ref_checkout: true
dryrun_action: false
# Only download languages supported by Mintlify (see supported-languages.ts)
- download_language: 'fr,ar,cs,de,es,it,ja,ko,pt,ro,ru,tr,zh-CN'
+ # Using multiple -l flags since download_language only accepts single language
+ download_translations_args: '-l fr -l ar -l cs -l de -l es -l it -l ja -l ko -l pt -l ro -l ru -l tr -l zh-CN'
env:
GITHUB_TOKEN: ${{ github.token }}
CROWDIN_PROJECT_ID: '1'
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input.mdx b/packages/twenty-docs/l/ar/twenty-ui/input.mdx
new file mode 100644
index 0000000000..d9147a43fb
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: إدخال
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..78bdb0bd9d
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: محرر الكتل
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+يستخدم محرر نصوص غني يعتمد على الكتل من [BlockNote](https://www.blocknotejs.org/) للسماح للمستخدمين بتحرير وعرض كتل المحتوى.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| المحددات | النوع | الوصف |
+| -------- | ----------------- | ------------------------ |
+| محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..81d892ae61
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: نص
+image: /images/user-guide/notes/notes_header.png
+---
+
+
+
+
+
+## إدخال نص
+
+يسمح للمستخدمين بإدخال وتحرير النص.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+ const handleChange = (text) => {
+ console.log("Input changed:", text);
+ };
+
+ const handleKeyDown = (event) => {
+ console.log("Key pressed:", event.key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| التسمية | string | يمثل التسمية للإدخال. |
+| عند التغيير | function | الدالة التي تُستدعى عند تغيير قيمة الإدخال. |
+| عرض كامل | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض. |
+| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال. |
+| خطأ | string | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
+| onKeyDown | function | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة |
+| أيقونة يمين | مكون رمز | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال. |
+
+يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.
+
+
+
+
+
+## إدخال نص بالحجم التلقائي
+
+مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+ return (
+
+ console.log("onValidate function fired")}
+ minRows={1}
+ placeholder="Write a comment"
+ onFocus={() => console.log("onFocus function fired")}
+ variant="icon"
+ buttonTitle
+ value="Task: "
+ />
+
+ );
+};
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------ | -------- | ---------------------------------------------------------------------------------------------------------- |
+| onValidate | function | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال. |
+| الحد الأدنى للأسطر | رقم | عدد الأسطر الأدنى للمساحة النصية. |
+| نص توضيحي | string | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة. |
+| onFocus | function | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية. |
+| التنوع | string | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
+| عنوان الزر | string | العنوان للزر (فقط للبديل الزر). |
+| القيمة | string | القيمة الأولية للمساحة النصية. |
+
+
+
+
+
+## مساحة نصية
+
+تتيح لك إنشاء إدخالات نصية متعددة الأسطر.
+
+
+
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+ return (
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------ | ----------- | ----------------------------------------------------------- |
+| معطل | قيمة منطقية | يشير إلى ما إذا كانت المساحة النصية معطلة. |
+| الحد الأدنى للأسطر | رقم | العدد الأدنى للأسطر الظاهرة للمساحة النصية. |
+| عند التغيير | function | دالة الاستدعاء تُشغّل عند تغيّر محتوى منطقة النص |
+| نص توضيحي | string | النص المُوضّح عندما تكون منطقة النص فارغة |
+| القيمة | string | القيمة الحالية لمنطقة النص |
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..dba2e922f5
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: روابط
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## رابط الاتصال
+
+مكون رابط منمق لعرض معلومات الاتصال.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------------------ | ----------------- | ------------------------------------------------ |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| رابط | string | عنوان URL المستهدف أو المسار للرابط |
+| عند_النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
+
+
+
+
+
+## رابط خام
+
+مكون رابط منمق لعرض الروابط.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| المحددات | النوع | الوصف |
+| --------- | ----------------- | ------------------------------------------------ |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| رابط | string | عنوان URL المستهدف أو المسار للرابط |
+| عند النقر | function | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
+
+
+
+
+## رابط مستدير
+
+رابط مستدير مثبت مع مكون Chip للروابط.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| --------- | ----------------- | ------------------------------------------------ |
+| رابط | string | عنوان URL المستهدف أو المسار للرابط |
+| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
+| عند النقر | function | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+
+
+
+
+## رابط التواصل الاجتماعي
+
+روابط اجتماعية منمقة، مع دعم لأنواع متعددة من الروابط الاجتماعية، مثل العناوين الإلكترونية، LinkedIn، وX (أو Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------- |
+| رابط | string | عنوان URL المستهدف أو المسار للرابط |
+| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
+| النوع | string | نوع الروابط الاجتماعية. تشمل الخيارات: `url`, `LinkedIn`, و`Twitter` |
+| عند_النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..9a47a96362
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: شريط التنقل
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+يستعرض شريط التنقل الذي يحتوي على عدة مكونات `NavigationBarItem`.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| المحددات | النوع | الوصف |
+| ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| اسم العنصر النشط | string | اسم العنصر النشط حاليًا في قائمة التنقل |
+| العناصر | array | مصفوفة من الكائنات التي تمثل كل عنصر من عناصر التنقل. كل كائن يحتوي على `الاسم` للعنصر، ومكون `الأيقونة` للعرض، ودالة `onClick` التي تستدعي عند النقر على العنصر |
+
+
+
diff --git a/packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..86a7c89f5b
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: Štítek
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Komponenta pro vizuální kategorizaci nebo označení obsahu.
+
+
+
+
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ />
+ );
+};
+```
+
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| ---------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | textový řetězec | Volitelný název pro dodatečné stylování |
+| barva | textový řetězec | Barva štítku. Možnosti zahrnují: `zelená`, `tyrkysová`, `nebeská`, `modrá`, `fialová`, `růžová`, `červená`, `oranžová`, `žlutá`, `šedá` |
+| text | textový řetězec | Obsah štítku |
+| onClick | funkce | Volitelná funkce vyvolaná při kliknutí uživatele na štítek |
+
+
+
+
diff --git a/packages/twenty-docs/l/cs/twenty-ui/input.mdx b/packages/twenty-docs/l/cs/twenty-ui/input.mdx
new file mode 100644
index 0000000000..56dcf07865
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Vstup
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..bcdc757cb2
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigace
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..7a5a017758
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: Drobečková navigace
+image: /images/user-guide/fields/field.png
+---
+
+
+
+
+
+Zobrazuje drobečkovou navigační lištu.
+
+
+
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+ const breadcrumbLinks = [
+ { children: "Home", href: "/" },
+ { children: "Category", href: "/category" },
+ { children: "Subcategory", href: "/category/subcategory" },
+ { children: "Current Page" },
+ ];
+
+ return (
+
+
+
+ )
+};
+```
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | textový řetězec | Volitelný název třídy pro dodatečné stylování |
+| odkazy | pole | Pole objektů, z nichž každý představuje odkaz na drobečkovou navigaci. Každý objekt má vlastnost `children` (text obsahu odkazu) a nepovinnou vlastnost `href` (URL, na které se má navigovat po kliknutí na odkaz) |
+
+
+
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..327db7d1b3
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Odkazy
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## Odkaz na kontakt
+
+Stylizovaná komponenta odkazu pro zobrazení kontaktních informací.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| className | textový řetězec | Volitelný název pro dodatečné stylování |
+| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
+| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
+
+
+
+
+
+## Surový odkaz
+
+Stylizovaná komponenta odkazu pro zobrazení odkazů.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| className | textový řetězec | Volitelný název pro dodatečné stylování |
+| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
+| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
+
+
+
+
+## Zaoblený odkaz
+
+Zaobleně stylizovaný odkaz s komponentou Chip pro odkazy.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
+| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
+| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+
+
+
+
+## Sociální odkaz
+
+Stylizované sociální odkazy s podporou různých typů sociálních odkazů, jako jsou URL, LinkedIn a X (nebo Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
+| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
+| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
+| typ | textový řetězec | Typ sociálního odkazu. Možnosti zahrnují: `url`, `LinkedIn` a `Twitter` |
+| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+
+
+
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..b79cf1a3c4
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Navigační panel
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Zobrazuje navigační panel, který obsahuje více komponent `NavigationBarItem`.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| Vlastnosti | Typ | Popis |
+| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | textový řetězec | Název aktuálně aktivního navigačního prvku |
+| položky | pole | Pole objektů představujících jednotlivé navigační položky. Každý objekt obsahuje `název` položky, komponent `Ikona` ke zobrazení a funkce `onClick`, která se volá při kliknutí na položku. |
+
+
+
diff --git a/packages/twenty-docs/l/de/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/de/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..549337486a
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: Icons
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+Eine Liste von Symbolen, die in unserer App verwendet werden.
+
+## Tabler-Symbole
+
+Wir verwenden Tabler-Symbole für React in der gesamten App.
+
+
+
+
+
+```
+yarn add @tabler/icons-react
+```
+
+
+
+
+
+Sie können jedes Symbol als Komponente importieren. Here's an example:
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Props | Typ | Beschreibung | Standard |
+| ------ | ------------ | ----------------------------------------- | ------------ |
+| größe | nummer | Die Höhe und Breite des Symbols in Pixeln | 24 |
+| farbe | Zeichenkette | Die Farbe der Symbole | currentColor |
+| Strich | nummer | Die Strichbreite des Symbols in Pixeln | 2 |
+
+
+
+
+
+## Benutzerdefinierte Symbole
+
+Zusätzlich zu den Tabler-Symbolen verwendet die App auch einige benutzerdefinierte Symbole.
+
+### Symbol: Adressbuch
+
+Zeigt ein Adressbuchsymbol an.
+
+
+
+
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Props | Typ | Beschreibung | Standard |
+| ------ | ------ | ----------------------------------------- | -------- |
+| größe | nummer | Die Höhe und Breite des Symbols in Pixeln | 24 |
+| Strich | nummer | Die Strichbreite des Symbols in Pixeln | 2 |
+
+
+
+
diff --git a/packages/twenty-docs/l/de/twenty-ui/input.mdx b/packages/twenty-docs/l/de/twenty-ui/input.mdx
new file mode 100644
index 0000000000..12e7c50a65
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Eingabe
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/de/twenty-ui/input/select.mdx b/packages/twenty-docs/l/de/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..0a2ea4c827
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Auswahl
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+Ermöglicht es Benutzern, einen Wert aus einer Liste vordefinierter Optionen auszuwählen.
+
+
+
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+| Props | Typ | Beschreibung |
+| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
+| deaktiviert | boolesch | Wenn auf `true` gesetzt, wird die Benutzerinteraktion mit der Komponente deaktiviert |
+| Beschriftung | Zeichenkette | Die Beschriftung, um den Zweck der `Select`-Komponente zu beschreiben |
+| onChange | function | Die Funktion, die aufgerufen wird, wenn sich die ausgewählten Werte ändern |
+| optionen | array | Repräsentiert die verfügbaren Optionen für die `Select`-Komponente. Es ist ein Array von Objekten, bei dem jedes Objekt ein `value` (die eindeutige Kennung), `label` (die eindeutige Kennung) und ein optionales `Icon` hat |
+| wert | Zeichenkette | Repräsentiert den aktuell ausgewählten Wert. Es sollte mit einem der `value`-Eigenschaften im `options`-Array übereinstimmen |
+
+
+
diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..e1264f0997
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigation
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..98df96d4d5
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Navigationsleiste
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Rendert eine Navigationsleiste, die mehrere `NavigationBarItem`-Komponenten enthält.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| Props | Typ | Beschreibung |
+| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| activeItemName | Zeichenkette | Der Name des aktuell aktiven Navigationselements |
+| items | array | Ein Array von Objekten, die jeweils ein Navigationselement repräsentieren. Jedes Objekt enthält den `name` des Elements, die zugehörige `Icon`-Komponente und eine Funktion `onClick`, die ausgeführt wird, wenn das Element angeklickt wird |
+
+
+
diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..a12d31032f
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Schrittleiste
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Zeigt den Fortschritt durch eine Folge von nummerierten Schritten, indem der aktive Schritt hervorgehoben wird. Es rendert einen Container mit Schritten, die jeweils durch die `Step`-Komponente dargestellt werden.
+
+
+
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+ return (
+
+ Step 1
+ Step 2
+ Step 3
+
+ );
+};
+```
+
+
+
+
+
+| Props | Typ | Beschreibung |
+| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. |
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/es/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..4cfe3c0df4
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: Iconos
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+Una lista de iconos utilizados en toda nuestra aplicación.
+
+## Iconos Tabler
+
+Usamos iconos Tabler para React en toda la aplicación.
+
+
+
+
+
+```
+yarn add @tabler/icons-react
+```
+
+
+
+
+
+Puede importar cada icono como un componente. Here's an example:
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| "Props" | Tipo | Descripción | Predeterminado |
+| ------- | -------- | ----------------------------------------- | -------------- |
+| tamaño | número | La altura y el ancho del icono en píxeles | 24 |
+| color | "cadena" | El color de los iconos | currentColor |
+| trazo | número | El ancho del trazo del icono en píxeles | 2 |
+
+
+
+
+
+## Iconos Personalizados
+
+Además de los iconos Tabler, la aplicación también utiliza algunos iconos personalizados.
+
+### Icono de Libreta de Direcciones
+
+Muestra un icono de libreta de direcciones.
+
+
+
+
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| "Props" | Tipo | Descripción | Predeterminado |
+| ------- | ------ | ----------------------------------------- | -------------- |
+| tamaño | número | La altura y el ancho del icono en píxeles | 24 |
+| trazo | número | El ancho del trazo del icono en píxeles | 2 |
+
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/es/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..6fa2e396a4
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: Etiqueta
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Componente para categorizar o etiquetar contenido visualmente.
+
+
+
+
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ />
+ );
+};
+```
+
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| "className" | cadena | "Nombre opcional para estilización adicional" |
+| color | cadena | Color de la etiqueta. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
+| texto | "cadena" | El contenido de la etiqueta |
+| alHacerClic | "función" | Función opcional llamada cuando un usuario hace clic en la etiqueta |
+
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/input.mdx b/packages/twenty-docs/l/es/twenty-ui/input.mdx
new file mode 100644
index 0000000000..e2e309dc53
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Entrada
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..172050024a
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor de Bloques
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Usa un editor de texto enriquecido basado en bloques de [BlockNote](https://www.blocknotejs.org/) para permitir a los usuarios editar y ver bloques de contenido.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ------- | ----------------- | -------------------------------------------------- |
+| editor | `BlockNoteEditor` | La instancia o configuración del editor de bloques |
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..2f9d84206d
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: Caja de selección
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
+
+Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones.
+
+
+
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+ console.log("onChange function fired")}
+ onCheckedChange={() => console.log("onCheckedChange function fired")}
+ variant="primary"
+ size="small"
+ shape="squared"
+ />
+ );
+};
+```
+
+
+
+
+| "Props" | Tipo | Descripción |
+| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| marcado | booleano | Indica si la caja de selección está marcada |
+| indeterminado | booleano | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada) |
+| "onChange" | función | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección |
+| onCheckedChange | "función" | La función de devolución de llamada que desea activar cuando cambia el estado `marcado` |
+| variante | "cadena" | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` |
+| tamaño | "cadena" | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande` |
+| forma | cadena | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado` |
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..8d50701bfa
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navegación
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..b094bb5692
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Enlaces
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## Enlace de Contacto
+
+Un componente de enlace estilizado para mostrar información de contacto.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ----------- | ----------------- | ------------------------------------------------------------------------------- |
+| "className" | "cadena" | "Nombre opcional para estilización adicional" |
+| href | "cadena" | La URL o ruta objetivo del enlace |
+| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
+
+
+
+
+
+## Enlace Sin Estilo
+
+Un componente de enlace estilizado para mostrar enlaces.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ----------- | ----------------- | ------------------------------------------------------------------------------- |
+| "className" | cadena | "Nombre opcional para estilización adicional" |
+| href | "cadena" | La URL o ruta objetivo del enlace |
+| alHacerClic | función | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
+
+
+
+
+## Enlace Redondeado
+
+Un enlace de estilo redondeado con un componente Chip para enlaces.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ----------- | ----------------- | ------------------------------------------------------------------------------- |
+| href | "cadena" | La URL o ruta objetivo del enlace |
+| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
+| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+
+
+
+
+## Enlace Social
+
+Enlaces sociales estilizados, con soporte para varios tipos de enlaces sociales, como URLs, LinkedIn y X (o Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
+| href | "cadena" | La URL o ruta objetivo del enlace |
+| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
+| tipo | "cadena" | El tipo de enlaces sociales. Las opciones incluyen: `url`, `LinkedIn`, y `Twitter` |
+| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..17a29ee848
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Barra de navegación
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Renderiza una barra de navegación que contiene varios componentes `NavigationBarItem`.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| "Props" | Tipo | Descripción |
+| ----------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nombreDelElementoActivo | "cadena" | El nombre del elemento de navegación actualmente activo |
+| elementos | array | Una matriz de objetos que representan cada elemento de navegación. Cada objeto contiene el `nombre` del elemento, el componente `Icono` a mostrar y una función `cuandoHagaClick` que se llamará al hacer clic en el elemento |
+
+
+
diff --git a/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..b6e0a0eecc
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Retroalimentación
+image: /images/user-guide/emails/emails_header.png
+---
+
+
+
+
+
+Indica el progreso o la cuenta regresiva y se mueve de derecha a izquierda.
+
+
+
+
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| "Props" | Tipo | Descripción | Predeterminado |
+| ---------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------------- |
+| duración | número | La duración total de la animación de la barra de progreso en milisegundos | 3 |
+| retraso | número | El retraso en el inicio de la animación de la barra de progreso en milisegundos | 0 |
+| aceleración | "cadena" | Función de aceleración para la animación de la barra de progreso | easeInOut |
+| alturaDeBarra | número | La altura de la barra en píxeles | 24 |
+| colorDeBarra | "cadena" | El color de la barra | gray80 |
+| inicioAutomático | booleano | Si es `true`, la animación de la barra de progreso comienza automáticamente cuando el componente se monta | `verdadero` |
+
+
+
+
+## Barra de Progreso Circular
+
+Indica el progreso de una tarea, a menudo se usa en pantallas de carga o áreas donde se desea comunicar procesos en curso al usuario.
+
+
+
+
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| "Props" | Tipo | Descripción | Predeterminado |
+| ------------ | ------ | -------------------------------------------- | -------------- |
+| tamaño | número | El tamaño de la barra de progreso circular | 50 |
+| anchoDeBarra | número | El ancho de la línea de la barra de progreso | 5 |
+| colorDeBarra | cadena | El color de la barra de progreso | currentColor |
+
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..ed88adeac3
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: Info-bulle de l'application
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
+
+Un message bref qui affiche des informations supplémentaires lorsqu'un utilisateur interagit avec un élément.
+
+
+
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+ return (
+ <>
+
+ Customer Insights
+
+
+ >
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ----------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
+| sélecteurAncre | Sélecteur CSS | Sélecteur pour l'ancre de l'info-bulle (l'élément qui déclenche l'info-bulle) |
+| contenu | chaîne | Le contenu que vous souhaitez afficher dans l'info-bulle |
+| délaiMasquer | nombre | Le délai avant de masquer l'info-bulle après que le curseur ait quitté l'ancre |
+| décalage | nombre | Le décalage en pixels pour positionner l'info-bulle |
+| pasDeFlèche | booléen | Si `vrai`, masque la flèche sur l'info-bulle |
+| estOuvert | booléen | Si `vrai`, l'info-bulle est ouverte par défaut |
+| emplacement | Chaîne `PlacesType` de `react-tooltip` | Spécifie le placement de l'info-bulle. Les valeurs incluent `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, et `left-end` |
+| stratégiePositionnement | Chaîne `PositionStrategy` de `react-tooltip` | Stratégie de positionnement pour l'info-bulle. A deux valeurs : `absolute` et `fixed` |
+
+
+
+
+
+## Texte débordant avec info-bulle
+
+Gère le texte débordant et affiche une info-bulle lorsque le texte déborde.
+
+
+
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ const crmTaskDescription =
+ 'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+ return ;
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ---------- | ------ | ----------------------------------------------------------------------- |
+| texte | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante |
+
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx
new file mode 100644
index 0000000000..3d0c83086b
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx
@@ -0,0 +1,148 @@
+---
+title: Puce
+image: /images/user-guide/github/github-header.png
+---
+
+
+
+
+
+Un élément visuel que vous pouvez utiliser comme un conteneur cliquable ou non cliquable avec une étiquette, des composants optionnels à gauche et à droite, et diverses options de style pour afficher des étiquettes et des tags.
+
+
+
+
+
+```jsx
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| linkToEntity | chaîne | Le lien vers l'entité |
+| entityId | chaîne | L'identifiant unique pour l'entité |
+| nom | chaîne | Le nom de l'entité |
+| pictureUrl | chaîne | Image", |
+| avatarType | Type d'avatar | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée` |
+| variante | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` |
+| LeftIcon | ComposantIcône | Un composant React représentant une icône. Affiché sur le côté gauche de la puce |
+
+
+
+
+## Exemples
+
+### Puce transparente désactivée
+
+```jsx
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+
+```
+
+
+
+### Puce désactivée avec infobulle
+
+```jsx
+import { Chip } from "twenty-ui/components";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+## Puce entité
+
+Un élément semblable à une puce pour afficher des informations sur une entité.
+
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+import { IconTwentyStar } from 'twenty-ui/display';
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| linkToEntity | chaîne | Le lien vers l'entité |
+| entityId | chaîne | L'identifiant unique pour l'entité |
+| nom | chaîne | Le nom de l'entité |
+| pictureUrl | chaîne | Image", |
+| avatarType | Type d'avatar | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée` |
+| variante | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` |
+| LeftIcon | ComposantIcône | Un composant React représentant une icône. Affiché sur le côté gauche de la puce |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..af7d9f31ab
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: Icônes
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+Une liste d'icônes utilisées dans notre application.
+
+## Icônes Tabler
+
+Nous utilisons les icônes Tabler pour React dans toute l'application.
+
+
+
+
+
+```
+yarn add @tabler/icons-react
+```
+
+
+
+
+
+Vous pouvez importer chaque icône en tant que composant. Here's an example:
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description | Par défaut |
+| ---------- | ------ | --------------------------------------------- | --------------- |
+| taille | nombre | La hauteur et la largeur de l'icône en pixels | 24 |
+| couleur | chaîne | La couleur des icônes | couleurCourante |
+| trait | nombre | La largeur du trait de l'icône en pixels | 2 |
+
+
+
+
+
+## Icônes personnalisées
+
+En plus des icônes Tabler, l'application utilise également certaines icônes personnalisées.
+
+### Icône Carnet d'adresses
+
+Affiche une icône de carnet d'adresses.
+
+
+
+
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description | Par défaut |
+| ---------- | ------ | --------------------------------------------- | ---------- |
+| taille | nombre | La hauteur et la largeur de l'icône en pixels | 24 |
+| trait | nombre | La largeur du trait de l'icône en pixels | 2 |
+
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input.mdx b/packages/twenty-docs/l/fr/twenty-ui/input.mdx
new file mode 100644
index 0000000000..4a19239d96
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: "Entrée "
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..5b1bf2f90b
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Éditeur de Blocs
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Utilise un éditeur de texte riche basé sur des blocs de [BlockNote](https://www.blocknotejs.org/) pour permettre aux utilisateurs de modifier et de visualiser des blocs de contenu.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ---------- | ----------------- | ---------------------------------------------------- |
+| éditeur | `BlockNoteEditor` | L'instance de l'éditeur de blocs ou sa configuration |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..f5f1a3e19c
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: Case à cocher
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
+
+Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options.
+
+
+
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+ console.log("onChange function fired")}
+ onCheckedChange={() => console.log("onCheckedChange function fired")}
+ variant="primary"
+ size="small"
+ shape="squared"
+ />
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| coché | booléen | Indique si la case à cocher est cochée |
+| indéterminé | booléen | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée) |
+| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change |
+| onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change |
+| variante | chaîne | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
+| taille | chaîne | La taille de la case à cocher. Comporte deux options : `petit` et `grand` |
+| forme | chaîne | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie` |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx
new file mode 100644
index 0000000000..eb7b05ae1d
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx
@@ -0,0 +1,73 @@
+---
+title: Schéma de couleurs
+image: /images/user-guide/fields/field.png
+---
+
+
+
+
+
+## Carte de Schéma de couleurs
+
+Représente différents schémas de couleurs et est spécialement adapté aux thèmes clairs et sombres.
+
+
+
+
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description | Par défaut |
+| -------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------- |
+| variante | chaîne | La variante du schéma de couleurs. Les options incluent `Sombre`, `Clair` et `Système`. | clair |
+| sélectionné | booléen | Si `vrai`, affiche une coche pour indiquer le schéma de couleurs sélectionné. | |
+| propriétés supplémentaires | `React.ComponentPropsWithoutRef<'div'>` | Propriétés standard de l'élément HTML `div`. | |
+
+
+
+
+
+## Sélecteur de Schéma de couleurs
+
+Permet aux utilisateurs de choisir entre différents schémas de couleurs.
+
+
+
+
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ---------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| valeur | `Schéma de couleurs` | Le schéma de couleurs actuellement sélectionné. |
+| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsqu'un utilisateur sélectionne un schéma de couleurs. |
+
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..d583615c42
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: Sélecteur d'icônes
+image: /images/user-guide/github/github-header.png
+---
+
+
+
+
+
+Un sélecteur d'icônes basé sur un menu déroulant qui permet aux utilisateurs de sélectionner une icône dans une liste.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+ const [selectedIcon, setSelectedIcon] = useState("");
+ const handleIconChange = ({ iconKey, Icon }) => {
+ console.log("Selected Icon:", iconKey);
+ setSelectedIcon(iconKey);
+ };
+
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| désactivé | booléen | Désactive le sélecteur d'icônes si défini sur `true` |
+| onChange | fonction | La fonction de rappel déclenchée lorsque l'utilisateur sélectionne une icône. Elle reçoit un objet avec les propriétés `iconKey` et `Icon` |
+| selectedIconKey | chaîne | La clé de l'icône initialement sélectionnée |
+| onClickOutside | fonction | Fonction de rappel déclenchée lorsque l'utilisateur clique en dehors du menu déroulant |
+| onClose | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est fermé |
+| onOpen | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est ouvert |
+| variante | chaîne | La variante de style visuel de l'icône cliquable. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx
new file mode 100644
index 0000000000..c2246c6ee7
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx
@@ -0,0 +1,37 @@
+---
+title: Saisie Image
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+Permet aux utilisateurs de télécharger et de supprimer une image.
+
+
+
+
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| photo | chaîne | L'URL source de l'image |
+| onUpload | fonction | La fonction appelée lors du téléchargement d'une nouvelle image par un utilisateur. Elle reçoit l'objet `File` comme paramètre. |
+| onRemove | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton supprimer. |
+| onAbort | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton annuler pendant le téléchargement de l'image. |
+| isUploading | booléen | Indique si une image est en cours de téléchargement. |
+| messageErreur | chaîne | Un message d'erreur facultatif à afficher sous l'entrée d'image. |
+| désactivé | booléen | Si `true`, l'entrée entière est désactivée et les boutons ne sont pas cliquables. |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx
new file mode 100644
index 0000000000..818b9731ab
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx
@@ -0,0 +1,104 @@
+---
+title: Radio
+image: /images/user-guide/create-workspace/workspace-cover.png
+---
+
+
+
+
+
+Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options.
+
+
+
+
+```jsx
+import { Radio } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+ const handleRadioChange = (event) => {
+ console.log("Radio button changed:", event.target.checked);
+ };
+
+ const handleCheckedChange = (checked) => {
+ console.log("Checked state changed:", checked);
+ };
+
+
+ return (
+
+ );
+};
+
+```
+
+
+
+
+| Propriétés | Type | Description |
+| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| style | propriétés `React.CSS` | Styles inline supplémentaires pour le composant |
+| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
+| coché | booléen | Indique si le bouton radio est coché |
+| valeur | chaîne | L'étiquette ou le texte associé au bouton radio |
+| onChange | fonction | La fonction appelée lorsque le bouton radio sélectionné est modifié |
+| onCheckedChange | fonction | La fonction appelée lorsque l'état `checked` du bouton radio change |
+| taille | chaîne | La taille du bouton radio. Les options incluent : `large` et `small` |
+| désactivé | booléen | Si `true`, le bouton radio est désactivé et ne peut pas être cliqué |
+| positionLabel | chaîne | La position du texte du label par rapport au bouton radio. A deux options : `left` et `right` |
+
+
+
+
+## Groupe Radio
+
+Regroupe ensemble des boutons radio associés.
+
+
+
+
+```jsx
+import React, { useState } from "react";
+import { Radio, RadioGroup } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+ const [selectedValue, setSelectedValue] = useState("Option 1");
+
+ const handleChange = (event) => {
+ setSelectedValue(event.target.value);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
+| valeur | chaîne | La valeur du bouton radio actuellement sélectionné |
+| onChange | fonction | La fonction de rappel déclenchée lorsque le bouton radio est changé |
+| onValueChange | fonction | La fonction de rappel déclenchée lorsque la valeur sélectionnée dans le groupe change. |
+| enfants | `React.ReactNode` | Permet de passer des composants React (tels que Radio) en tant qu'enfants au Groupe Radio |
+
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/select.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..9124594cc1
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Sélectionner
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+Permet aux utilisateurs de choisir une valeur dans une liste d'options prédéfinies.
+
+
+
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
+| désactivé | booléen | Lorsqu'il est réglé sur `true`, cela désactive l'interaction de l'utilisateur avec le composant. |
+| étiquette | chaîne | L'étiquette pour décrire la fonction du composant `Select`. |
+| onChange | fonction | La fonction appelée lorsque les valeurs sélectionnées changent. |
+| options | tableau | Représente les options disponibles pour le composant `Selected`. C'est un tableau d'objets où chaque objet possède une `valeur` (l'identifiant unique), un `label` (l'identifiant unique) et une icône optionnelle. |
+| valeur | chaîne | Représente la valeur actuellement sélectionnée. Elle doit correspondre à l'une des propriétés `valeur` dans le tableau `options`. |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..d371a99153
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: Texte
+image: /images/user-guide/notes/notes_header.png
+---
+
+
+
+
+
+## Entrée de texte
+
+Permet aux utilisateurs de saisir et de modifier du texte.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+ const handleChange = (text) => {
+ console.log("Input changed:", text);
+ };
+
+ const handleKeyDown = (event) => {
+ console.log("Key pressed:", event.key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ----------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+| étiquette | chaîne | Représente l'étiquette de l'entrée |
+| onChange | fonction | La fonction appelée lorsque la valeur de l'entrée change |
+| largeurTotale | booléen | Indique si l'entrée doit occuper 100% de la largeur |
+| désactiverLesRaccourcis | booléen | Indique si les raccourcis sont activés pour l'entrée |
+| erreur | chaîne | Représente le message d'erreur à afficher. Lorsqu'il est fourni, il ajoute également une icône d'erreur sur le côté droit de l'entrée |
+| surToucheEnfoncée | fonction | Appelée lorsqu'une touche est enfoncée alors que le champ de saisie est focalisé. Reçoit un `React.KeyboardEvent` en tant qu'argument |
+| IcôneDroite | ComposantIcône | Un composant icône facultatif affiché sur le côté droit de l'entrée |
+
+Le composant accepte également d'autres propriétés d'éléments d'entrée HTML.
+
+
+
+
+
+## Entrée de texte à taille automatique
+
+Composant d'entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+ return (
+
+ console.log("onValidate function fired")}
+ minRows={1}
+ placeholder="Write a comment"
+ onFocus={() => console.log("onFocus function fired")}
+ variant="icon"
+ buttonTitle
+ value="Task: "
+ />
+
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| -------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
+| surValider | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'utilisateur valide l'entrée |
+| minLignes | nombre | Le nombre minimum de lignes pour la zone de texte |
+| espace réservé | chaîne | Le texte d'espace réservé que vous souhaitez afficher lorsque la zone de texte est vide |
+| surFocus | fonction | La fonction de rappel que vous souhaitez déclencher lorsque la zone de texte prend le focus |
+| variante | chaîne | La variante de l'entrée. Les options incluent : `défaut`, `icône`, et `bouton` |
+| titreBouton | chaîne | Le titre pour le bouton (applicable uniquement à la variante bouton) |
+| valeur | chaîne | La valeur initiale pour la zone de texte |
+
+
+
+
+
+## Zone de texte
+
+Vous permet de créer des entrées de texte multiligne.
+
+
+
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+ return (
+
+
+
+
+| Propriétés | Type | Description |
+| -------------- | -------- | --------------------------------------------------------------------------- |
+| désactivé | booléen | Indique si la zone de texte est désactivée |
+| minLignes | nombre | Nombre minimum de lignes visibles pour la zone de texte. |
+| onChange | fonction | Fonction de rappel déclenchée lorsque le contenu de la zone de texte change |
+| espace réservé | chaîne | Texte de l'espace réservé affiché lorsque la zone de texte est vide |
+| valeur | chaîne | La valeur actuelle de la zone de texte |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..e1264f0997
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigation
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..d0e67a1de2
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: Fil d'Ariane
+image: /images/user-guide/fields/field.png
+---
+
+
+
+
+
+Affiche une barre de navigation en fil d'Ariane.
+
+
+
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+ const breadcrumbLinks = [
+ { children: "Home", href: "/" },
+ { children: "Category", href: "/category" },
+ { children: "Subcategory", href: "/category/subcategory" },
+ { children: "Current Page" },
+ ];
+
+ return (
+
+
+
+ )
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| nomDeClasse | chaîne | Nom de classe facultatif pour un style supplémentaire |
+| liens | tableau | Un tableau d'objets, chacun représentant un lien de fil d'Ariane. Chaque objet a une propriété `children` (le contenu textuel du lien) et une propriété `href` facultative (l'URL vers laquelle naviguer lorsque le lien est cliqué) |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..ef6c6b2ae8
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Liens
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## Lien de contact
+
+Un composant de lien stylisé pour afficher les informations de contact.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | ----------------- | -------------------------------------------------------- |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+| href | chaîne | L'URL cible ou le chemin du lien |
+| onClick | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
+| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
+
+
+
+
+
+## Lien brut
+
+Un composant de lien stylisé pour afficher les liens.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | ----------------- | -------------------------------------------------------- |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+| href | chaîne | L'URL cible ou le chemin du lien |
+| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
+| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
+
+
+
+
+## Lien arrondi
+
+Un lien de style arrondi avec un composant Chip pour les liens.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ---------- | ----------------- | -------------------------------------------------------- |
+| href | chaîne | L'URL cible ou le chemin du lien |
+| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
+| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
+
+
+
+
+## Lien social
+
+Liens sociaux stylisés, avec support pour différents types de liens sociaux, tels que les URL, LinkedIn, et X (ou Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------- |
+| href | chaîne | L'URL cible ou le chemin du lien |
+| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
+| type | chaîne | Le type de liens sociaux. Les options incluent: `url`, `LinkedIn`, et `Twitter` |
+| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx
new file mode 100644
index 0000000000..fd6212fe28
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx
@@ -0,0 +1,458 @@
+---
+title: Élément de menu
+image: /images/user-guide/kanban-views/kanban.png
+---
+
+
+
+
+
+Un élément de menu polyvalent conçu pour être utilisé dans un menu ou une liste de navigation.
+
+
+
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { MenuItem } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const handleMenuItemClick = (event) => {
+ console.log("Menu item clicked!", event);
+ };
+
+ const handleButtonClick = (event) => {
+ console.log("Icon button clicked!", event);
+ };
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| accent | chaîne | Spécifie la couleur d'accent de l'élément de menu. Les options incluent : `default`, `danger` et `placeholder` |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| boutonsIcône | tableau | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
+| isTooltipOpen | booléen | Contrôle la visibilité de l'infobulle associée à l'élément de menu |
+| testId | chaîne | L'attribut data-testid à des fins de test |
+| auClique | fonction | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+## Variantes
+
+Les différentes variantes du composant d'élément de menu incluent les suivantes :
+
+### Commande
+
+Un élément de menu de style commande dans un menu pour indiquer des raccourcis clavier.
+
+
+
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemCommand } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const handleCommandClick = () => {
+ console.log("Command clicked!");
+ };
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| premierRaccourci | chaîne | Le premier raccourci clavier associé à la commande |
+| deuxièmeRaccourci | chaîne | Le deuxième raccourci clavier associé à la commande |
+| estSélectionné | booléen | Indique si l'élément de menu est sélectionné ou surligné |
+| onClick | fonction | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Draggable
+
+Un élément de menu draggable conçu pour être utilisé dans un menu ou une liste où les éléments peuvent être glissés, et des actions supplémentaires peuvent être effectuées via les boutons d'icônes.
+
+
+
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { MenuItemDraggable } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const handleMenuItemClick = (event) => {
+ console.log("Menu item clicked!", event);
+ };
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| accent | chaîne | La couleur d'accent de l'élément de menu. Elle peut être `défaut`, `placeholder`, et `danger` |
+| boutonsIcône | tableau | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
+| isTooltipOpen | booléen | Contrôle la visibilité de l'infobulle associée à l'élément de menu |
+| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| isDragDisabled | booléen | Indique si le glissement est désactivé |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Sélection multiple
+
+Fournit un moyen d'implémenter une fonctionnalité de sélection multiple avec une case à cocher associée.
+
+
+
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemMultiSelect } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| -------------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
+| onSelectChange | fonction | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Sélection multiple avec avatar
+
+Un élément de menu multi-sélection avec un avatar, une case à cocher pour la sélection, et du contenu textuel.
+
+
+
+
+```jsx
+import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const imageUrl =
+ "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
+
+ return (
+ }
+ text="First Option"
+ selected={false}
+ className
+ />
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| -------------- | ----------- | ----------------------------------------------------------------------- |
+| avatar | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
+| onSelectChange | fonction | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Naviguer
+
+Un élément de menu comportant une icône facultative à gauche, un contenu textuel, et une icône de chevron droite.
+
+
+
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemNavigate } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const handleNavigation = () => {
+ console.log("Navigate to another page");
+ };
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| auClique | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Sélectionner
+
+Un élément de menu sélectionnable, avec un contenu facultatif à gauche (icône et texte) et un indicateur (icône de coche) pour l'état sélectionné.
+
+
+
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemSelect } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const handleSelection = () => {
+ console.log("Menu item selected");
+ };
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
+| désactivé | booléen | Indique si l'élément de menu est désactivé |
+| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
+| auClique | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Sélectionner Avatar
+
+Un élément de menu sélectionnable avec un avatar, avec un contenu facultatif à gauche (avatar et texte) et un indicateur (icône de coche) pour l'état sélectionné.
+
+
+
+
+```jsx
+import { MenuItemSelectAvatar } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const imageUrl =
+ "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
+
+ const handleSelection = () => {
+ console.log("Menu item selected");
+ };
+
+ return (
+ }
+ text="First Option"
+ selected={true}
+ disabled={false}
+ hovered={false}
+ testId="menu-item-test"
+ onClick={handleSelection}
+ className
+ />
+ );
+};
+
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | ----------- | ----------------------------------------------------------------------- |
+| avatar | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
+| désactivé | booléen | Indique si l'élément de menu est désactivé |
+| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
+| testId | chaîne | L'attribut data-testid à des fins de test |
+| onClick | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Sélection de Couleur
+
+Un élément de menu sélectionnable avec un échantillon de couleur pour les scénarios où vous souhaitez que les utilisateurs choisissent une couleur dans un menu.
+
+
+
+
+```jsx
+import { MenuItemSelectColor } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ const handleSelection = () => {
+ console.log("Menu item selected");
+ };
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| couleur | chaîne | La couleur à thème à afficher comme échantillon dans l'élément de menu. Les options incluent: `vert`, `turquoise`, `ciel`, `bleu`, `violet`, `rose`, `rouge`, `orange`, `jaune`, `gris` |
+| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
+| désactivé | booléen | Indique si l'élément de menu est désactivé |
+| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
+| variante | chaîne | La variante de l'échantillon de couleur. Elle peut être `défaut` ou `pipeline` |
+| onClick | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
+
+### Basculer
+
+Un élément de menu avec un interrupteur à bascule associé pour permettre aux utilisateurs d'activer ou de désactiver une fonctionnalité spécifique
+
+
+
+
+```jsx
+import { IconBell } from '@tabler/icons-react';
+
+import { MenuItemToggle } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+
+ return (
+
+ );
+};
+```
+
+
+
+
+| Propriétés | Type | Description |
+| --------------------- | -------------- | -------------------------------------------------------------------------------------- |
+| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte | chaîne | Le contenu texte de l'élément de menu |
+| basculé | booléen | Indique si l'interrupteur est en "marche" ou "arrêt". |
+| surChangementBasculer | fonction | Fonction de rappel déclenchée lorsque l'état de l'interrupteur change. |
+| tailleBasculer | chaîne | La taille de l'interrupteur à bascule. Cela peut être soit \ |
+| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..5dd2e965f5
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Barre d'étape
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Affiche la progression à travers une séquence d'étapes numérotées en surlignant l'étape active. Il affiche un conteneur avec des étapes, chacune représentée par le composant `Step`.
+
+
+
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+ return (
+
+ Step 1
+ Step 2
+ Step 3
+
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description |
+| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
+| étapeActive | nombre | L'index de l'étape actuellement active. Cela détermine quelle étape doit être visuellement mise en valeur |
+
+
+
diff --git a/packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..f2d043bd63
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Retour d'information
+image: /images/user-guide/emails/emails_header.png
+---
+
+
+
+
+
+Indique le progrès ou le compte à rebours et passe de droite à gauche.
+
+
+
+
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description | Par défaut |
+| -------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ---------- |
+| durée | nombre | La durée totale de l'animation de la barre de progression en millisecondes | 3 |
+| délai | nombre | Le délai de démarrage de l'animation de la barre de progression en millisecondes | 0 |
+| adoucissement | chaîne | Fonction d'adoucissement pour l'animation de la barre de progression | easeInOut |
+| hauteurBarre | nombre | La hauteur de la barre en pixels | 24 |
+| couleurBarre | chaîne | La couleur de la barre | gray80 |
+| démarrageAutomatique | booléen | Si `true`, l'animation de la barre de progression commence automatiquement lorsque le composant est monté | `vrai` |
+
+
+
+
+## Barre de Progression Circulaire
+
+Indique le progrès d'une tâche, souvent utilisé sur des écrans de chargement ou dans des zones où vous souhaitez communiquer des processus en cours à l'utilisateur.
+
+
+
+
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Propriétés | Type | Description | Par défaut |
+| ------------ | ------ | ------------------------------------------------- | --------------- |
+| taille | nombre | La taille de la barre de progression circulaire | 50 |
+| largeurBarre | nombre | La largeur de la ligne de la barre de progression | 5 |
+| couleurBarre | chaîne | La couleur de la barre de progression | couleurCourante |
+
+
+
+
diff --git a/packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx b/packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx
new file mode 100644
index 0000000000..ee54d91c18
--- /dev/null
+++ b/packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx
@@ -0,0 +1,43 @@
+---
+title: Paramètres du profil
+description: Gérez votre profil personnel et vos paramètres de sécurité.
+---
+
+## Informations personnelles
+
+### Nom et e-mail
+
+* **Nom affiché**: Modifiez comment votre nom apparaît aux autres membres de l’espace de travail
+* **Adresse e-mail**: Changez votre e-mail de connexion (nécessite vérification)
+* **Photo de profil**: Téléchargez un avatar personnalisé ou utilisez vos initiales
+
+## Paramètres de sécurité
+
+### Authentification à deux facteurs (2FA)
+
+Activez le 2FA pour ajouter une couche supplémentaire de sécurité à votre compte :
+
+1. Accédez à **Paramètres → Paramètres du profil**
+2. Cliquez sur **Activer le 2FA**
+3. Scannez le code QR avec votre application d'authentification
+4. Entrez le code de vérification pour confirmer
+
+### Gestion des mots de passe
+
+* **Modifier le mot de passe**: Mettez à jour votre mot de passe actuel
+* **Exigences du mot de passe**: Doit contenir au moins 8 caractères
+
+## Gestion du profil
+
+### Supprimer le compte
+
+
+ La suppression de votre compte supprimera définitivement votre accès à tous les espaces de travail. Cette action ne peut être annulée, vous perdrez l'accès à tous les espaces de travail où vous êtes membre, et vous devriez envisager de quitter des espaces de travail individuels si vous souhaitez uniquement quitter certaines équipes.
+
+
+Pour supprimer votre compte :
+
+1. Accédez à **Paramètres → Paramètres du profil**
+2. Faites défiler jusqu'à **Zone de danger**
+3. Cliquez sur **Supprimer le compte**
+4. Confirmez en tapant votre adresse e-mail
\ No newline at end of file
diff --git a/packages/twenty-docs/l/it/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/it/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..a026a4c13b
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: Etichetta
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Componente per categorizzare o etichettare visivamente i contenuti.
+
+
+
+
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ />
+ );
+};
+```
+
+
+
+
+
+| Props | Tipo | Descrizione |
+| ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomeClasse | string | Nome opzionale per stile aggiuntivo |
+| colore | string | Colore dell'etichetta. Le opzioni includono: `verde`, `turchese`, `cielo`, `blu`, `viola`, `rosa`, `rosso`, `arancione`, `giallo`, `grigio` |
+| testo | string | Il contenuto dell'etichetta |
+| onClick | funzione | Funzione opzionale chiamata quando un utente clicca sull'etichetta |
+
+
+
+
diff --git a/packages/twenty-docs/l/it/twenty-ui/input.mdx b/packages/twenty-docs/l/it/twenty-ui/input.mdx
new file mode 100644
index 0000000000..548d44a7e4
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Input
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..31e1bc3726
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor di blocchi
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Utilizza un editor di testo avanzato basato su blocchi di [BlockNote](https://www.blocknotejs.org/) per permettere agli utenti di modificare e visualizzare blocchi di contenuti.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| Props | Tipo | Descrizione |
+| ------ | ----------------- | ---------------------------------------------------- |
+| editor | `BlockNoteEditor` | L'istanza o la configurazione dell'editor di blocchi |
+
+
+
diff --git a/packages/twenty-docs/l/it/twenty-ui/input/text.mdx b/packages/twenty-docs/l/it/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..d4104cf4a0
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: Testo
+image: /images/user-guide/notes/notes_header.png
+---
+
+
+
+
+
+## Input Testo
+
+Consente agli utenti di inserire e modificare il testo.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+ const handleChange = (text) => {
+ console.log("Input changed:", text);
+ };
+
+ const handleKeyDown = (event) => {
+ console.log("Key pressed:", event.key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+
+| Props | Tipo | Descrizione |
+| -------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| nomeClasse | string | Nome opzionale per stile aggiuntivo |
+| etichetta | string | Rappresenta l'etichetta per l'input |
+| onChange | funzione | La funzione chiamata quando cambia il valore dell'input |
+| larghezzaCompleta | booleano | Indica se l'input deve occupare il 100% della larghezza |
+| disattivaTastiRapidi | booleano | Indica se i tasti rapidi sono abilitati per l'input |
+| errore | string | Rappresenta il messaggio di errore da visualizzare. Quando fornito, aggiunge anche un'icona di errore sul lato destro dell'input |
+| premiTasto | funzione | Chiamato quando un tasto viene premuto mentre il campo di input è attivo. Riceve un `React.KeyboardEvent` come argomento |
+| IconaDestra | IconaComponente | Un componente icona opzionale visualizzato sul lato destro dell'input |
+
+Il componente accetta anche altre proprietà dell'elemento di input HTML.
+
+
+
+
+
+## Input Testo Autosize
+
+Componente di input testo che regola automaticamente la sua altezza in base al contenuto.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+ return (
+
+ console.log("onValidate function fired")}
+ minRows={1}
+ placeholder="Write a comment"
+ onFocus={() => console.log("onFocus function fired")}
+ variant="icon"
+ buttonTitle
+ value="Task: "
+ />
+
+ );
+};
+```
+
+
+
+
+
+| Props | Tipo | Descrizione |
+| -------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| suValida | funzione | La funzione di callback che si vuole attivare quando l'utente valida l'input |
+| righeMinime | numero | Il numero minimo di righe per l'area di testo |
+| segnaposto | string | Il testo segnaposto che si vuole visualizzare quando l'area di testo è vuota |
+| suFocus | funzione | La funzione di callback che si vuole attivare quando l'area di testo ottiene il focus |
+| variante | string | La variante dell'input. Le opzioni includono: `predefinito`, `icona` e `pulsante` |
+| titoloPulsante | string | Il titolo per il pulsante (applicabile solo per la variante pulsante) |
+| valore | string | Il valore iniziale per l'area di testo |
+
+
+
+
+
+## Area di Testo
+
+Consente di creare input di testo multilinea.
+
+
+
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+ return (
+
+
+
+
+| Props | Tipo | Descrizione |
+| ------------ | -------- | --------------------------------------------------------------------------- |
+| disabilitato | booleano | Indica se l'area di testo è disabilitata |
+| righeMinime | numero | Numero minimo di righe visibili per l'area di testo. |
+| onChange | funzione | Funzione di callback attivata quando il contenuto dell'area di testo cambia |
+| segnaposto | string | Il testo segnaposto visualizzato quando l'area di testo è vuota |
+| valore | string | Il valore corrente dell'area di testo |
+
+
+
diff --git a/packages/twenty-docs/l/it/twenty-ui/navigation.mdx b/packages/twenty-docs/l/it/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..79afc8251b
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigazione
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..a6257ab9c3
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Collegamenti
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## Collegamento di Contatto
+
+Un componente di collegamento stilizzato per visualizzare le informazioni di contatto.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| Props | Tipo | Descrizione |
+| ---------- | ----------------- | ------------------------------------------------------------------- |
+| nomeClasse | string | Nome opzionale per stile aggiuntivo |
+| href | string | L'URL di destinazione o il percorso per il link |
+| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
+| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
+
+
+
+
+
+## Collegamento Non Elaborato
+
+Un componente di collegamento stilizzato per visualizzare collegamenti.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| Props | Tipo | Descrizione |
+| ---------- | ----------------- | ------------------------------------------------------------------- |
+| nomeClasse | string | Nome opzionale per stile aggiuntivo |
+| href | string | L'URL di destinazione o il percorso per il link |
+| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
+| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
+
+
+
+
+## Collegamento Arrotondato
+
+Un collegamento stilizzato arrotondato con un componente Chip per i collegamenti.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| Props | Tipo | Descrizione |
+| ------- | ----------------- | ------------------------------------------------------------------- |
+| href | string | L'URL di destinazione o il percorso per il link |
+| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
+| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
+
+
+
+
+## Collegamento Sociale
+
+Collegamenti social stilizzati, con supporto per vari tipi di collegamenti social, come URL, LinkedIn e X (o Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Props | Tipo | Descrizione |
+| ------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- |
+| href | string | L'URL di destinazione o il percorso per il link |
+| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
+| tipo | string | Il tipo di collegamenti social. Le opzioni includono: `url`, `LinkedIn`, e `Twitter` |
+| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
+
+
+
diff --git a/packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..c6ef8d962f
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Barra di navigazione
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Rende una barra di navigazione che contiene più componenti `NavigationBarItem`.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| Props | Tipo | Descrizione |
+| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | string | Il nome dell'elemento di navigazione attualmente attivo |
+| elementi | array | Un array di oggetti che rappresentano ciascun elemento di navigazione. Ogni oggetto contiene il `name`, il componente `Icon` da visualizzare e una funzione `onClick` da chiamare quando l'elemento viene cliccato |
+
+
+
diff --git a/packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..01bfd6ae05
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Feedback
+image: /images/user-guide/emails/emails_header.png
+---
+
+
+
+
+
+Indica progresso o conto alla rovescia e si muove da destra a sinistra.
+
+
+
+
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| Props | Tipo | Descrizione | Predefinito |
+| --------------- | -------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
+| durata | numero | La durata totale dell'animazione della barra di progresso in millisecondi | 3 |
+| ritardo | numero | Il ritardo nell'avvio dell'animazione della barra di progresso in millisecondi | 0 |
+| smorzamento | string | Funzione di smorzamento per l'animazione della barra di progresso | easeInOut |
+| altezzaBarra | numero | L'altezza della barra in pixel | 24 |
+| coloreBarra | string | Il colore della barra | gray80 |
+| avvioAutomatico | booleano | Se `true`, l'animazione della barra di progresso inizia automaticamente quando il componente viene montato | `vero` |
+
+
+
+
+## Barra di progresso circolare
+
+Indica il progresso di un'attività, spesso utilizzata in schermate di caricamento o aree in cui si desidera comunicare processi in corso all'utente.
+
+
+
+
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Props | Tipo | Descrizione | Predefinito |
+| -------------- | ------ | ------------------------------------------------- | ------------ |
+| dimensione | numero | La dimensione della barra di progresso circolare | 50 |
+| larghezzaBarra | numero | La larghezza della linea della barra di progresso | 5 |
+| coloreBarra | string | Il colore della barra di progresso | currentColor |
+
+
+
+
diff --git a/packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..5f170e5cc2
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: アプリツールチップ
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
+
+ユーザーが要素とやり取りするときに追加情報を表示する短いメッセージ。
+
+
+
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+ return (
+ <>
+
+
+ >
+ );
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
+| 앵커 선택 | CSS 선택자 | 툴팁 앵커(툴팁을 트리거하는 요소)의 선택자 |
+| 내용 | 문자열 | 툴팁 내에 표시할 내용을 입력하세요 |
+| 지연 숨기기 | 숫자 | 커서가 앵커를 떠난 후 툴팁이 숨겨지기까지의 지연 시간(초) |
+| 오프셋 | 숫자 | 툴팁 위치 조건을 위한 픽셀 단위의 오프셋 |
+| 화살표 없음 | 부울 | `true`이면 툴팁의 화살표가 숨겨집니다 |
+| 열림 여부 | 부울 | `true`이면 툴팁이 기본적으로 열려 있습니다 |
+| 위치 | `react-tooltip`의 `PlacesType` 문자열 | 툴팁의 배치를 지정합니다. 값으로는 `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` 등이 있습니다. |
+| 위치 전략 | `react-tooltip`의 `PositionStrategy` 문자열 | 툴팁에 대한 위치 전략입니다. 두 가지 값: `absolute` 및 `fixed` |
+
+
+
+
+
+## 툴팁이 포함된 오버플로 텍스트
+
+텍스트가 넘칠 경우 처리하고 툴팁을 표시합니다.
+
+
+
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ const crmTaskDescription =
+ 'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+ return ;
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ---- | --- | -------------------------- |
+| 텍스트 | 문자열 | 오버플로 텍스트 영역에 표시할 내용을 입력하세요 |
+
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx
new file mode 100644
index 0000000000..d3bfe602af
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx
@@ -0,0 +1,69 @@
+---
+title: 체크마크
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
+
+성공하거나 완료된 작업을 나타냅니다.
+
+
+
+
+```jsx
+import { Checkmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+`React.ComponentPropsWithoutRef<'div'>` 를 확장하며 일반 `div` 요소의 모든 속성을 수용합니다.
+
+
+
+
+
+## 애니메이션 체크마크
+
+애니메이션 기능이 추가된 체크마크 아이콘을 나타냅니다.
+
+
+
+
+
+```jsx
+import { AnimatedCheckmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 | 기본값 |
+| ----------- | --- | ------------------------------------------ | -------------------- |
+| isAnimating | 부울 | 체크마크가 애니메이션 중인지 여부를 제어합니다. | 거짓 |
+| 색상 | 문자열 | 체크마크의 색상 | |
+| 지속 시간 | 숫자 | 애니메이션의 지속 시간(초) | 0.5초 |
+| 크기 | 숫자 | 체크마크의 크기 | 28 픽셀 |
+
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..9b3c77db87
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: 아이콘들
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+앱 전반에 걸쳐 사용되는 아이콘 목록입니다.
+
+## 타블러 아이콘
+
+앱 전반에 걸쳐 React에 타블러 아이콘을 사용합니다.
+
+
+
+
+
+```
+yarn add @tabler/icons-react
+```
+
+
+
+
+
+각 아이콘을 컴포넌트로 가져올 수 있습니다. Here's an example:
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 | 기본값 |
+| ---- | --- | ------------------ | ------------ |
+| 크기 | 숫자 | 픽셀 단위의 아이콘 높이와 너비 | 24 |
+| 색상 | 문자열 | 아이콘의 색상 | currentColor |
+| 스트로크 | 숫자 | 픽셀 단위의 아이콘 스트로크 너비 | 2 |
+
+
+
+
+
+## 커스텀 아이콘
+
+타블러 아이콘 외에도 앱에는 일부 커스텀 아이콘이 사용됩니다.
+
+### 아이콘 주소록
+
+주소록 아이콘을 표시합니다.
+
+
+
+
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 | 기본값 |
+| ---- | -- | ------------------ | --- |
+| 크기 | 숫자 | 픽셀 단위의 아이콘 높이와 너비 | 24 |
+| 스트로크 | 숫자 | 픽셀 단위의 아이콘 스트로크 너비 | 2 |
+
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..e6c5ac8969
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: 태그
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+콘텐츠를 시각적으로 분류하거나 라벨을 붙이는 구성 요소입니다.
+
+
+
+
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ />
+ );
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
+| 색상 | 문자열 | 태그의 색상. 옵션은 `녹색`, `터키옥색`, `하늘색`, `파랑`, `보라색`, `핑크`, `빨강`, `오렌지`, `노랑`, `회색`을 포함합니다. |
+| 텍스트 | 문자열 | 태그의 콘텐츠 |
+| onClick | function | 사용자가 태그를 클릭할 때 호출되는 선택적 함수 |
+
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input.mdx b/packages/twenty-docs/l/ko/twenty-ui/input.mdx
new file mode 100644
index 0000000000..61ed0ea41e
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: 입력
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..ebbb0ac9a6
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: 블록 편집기
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+사용자는 [BlockNote](https://www.blocknotejs.org/)의 블록 기반 리치 텍스트 편집기를 사용해 콘텐츠 블록을 편집하고 볼 수 있습니다.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ---- | ----------------- | ----------------- |
+| 편집기 | `BlockNoteEditor` | 블록 편집기 인스턴스 또는 구성 |
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..c09281d778
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: 체크박스
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
+
+사용자가 여러 옵션 중 여러 값을 선택해야 할 때 사용됩니다.
+
+
+
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+ console.log("onChange function fired")}
+ onCheckedChange={() => console.log("onCheckedChange function fired")}
+ variant="primary"
+ size="small"
+ shape="squared"
+ />
+ );
+};
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| --------------- | -------- | -------------------------------------------------------------------------------------------------- |
+| 체크됨 | 부울 | 체크박스가 체크된 상태인지 나타냅니다 |
+| 불확정 | 부울 | 체크박스가 불확정 상태(체크되지 않음과 체크됨의 중간)에 있는지 나타냅니다 |
+| onChange | function | 체크박스 상태가 변경될 때 호출할 콜백 함수입니다. |
+| onCheckedChange | function | `checked` 상태가 변경될 때 호출할 콜백 함수입니다. |
+| 변형 | 문자열 | 박스의 시각적 스타일 변형입니다. 옵션에는 `primary`, `secondary`, `tertiary`가 포함됩니다. |
+| 크기 | 문자열 | 체크박스의 크기입니다. 두 가지 옵션이 있습니다: `small`과 `large` |
+| 모양 | 문자열 | 체크박스의 모양입니다. 두 가지 옵션이 있습니다: `squared`와 `rounded` |
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx
new file mode 100644
index 0000000000..57edbd6980
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx
@@ -0,0 +1,73 @@
+---
+title: 색 구성표
+image: /images/user-guide/fields/field.png
+---
+
+
+
+
+
+## 색상 구성표 카드
+
+다양한 색상 구성표를 나타내며, 밝은 테마와 어두운 테마를 위해 특별히 설계되었습니다.
+
+
+
+
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 | 기본값 |
+| ----- | --------------------------------------- | ----------------------------------------------------------------------------------- | --- |
+| 변형 | 문자열 | 색상 구성표 변형. 옵션에는 `Dark`, `Light`, 및 `System`이 포함됩니다. | 라이트 |
+| 선택됨 | 부울 | `true`이면 선택한 색상 구성표를 나타내는 체크 표시가 나타납니다. | |
+| 추가 속성 | `React.ComponentPropsWithoutRef<'div'>` | 기본 HTML `div` 요소 속성 | |
+
+
+
+
+
+## 색상 구성표 선택기
+
+사용자가 다양한 색상 구성표를 선택할 수 있도록 합니다.
+
+
+
+
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| -------- | -------- | ----------------------------- |
+| 값 | `색 구성표` | 현재 선택된 색상 구성표 |
+| onChange | function | 사용자가 색상 구성표를 선택할 때 트리거할 콜백 함수 |
+
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx
new file mode 100644
index 0000000000..7fb33d882f
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx
@@ -0,0 +1,37 @@
+---
+title: 이미지 입력
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+사용자가 이미지를 업로드하고 제거할 수 있도록 합니다.
+
+
+
+
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ------------ | -------- | ------------------------------------------------------------------------------------- |
+| 사진 | 문자열 | 이미지 소스 URL |
+| onUpload | function | 사용자가 새 이미지를 업로드할 때 호출되는 함수입니다. `File` 객체를 매개변수로 받습니다. |
+| onRemove | function | 사용자가 제거 버튼을 클릭할 때 호출되는 함수입니다. |
+| onAbort | function | 사용자가 이미지 업로드 중 중단 버튼을 클릭할 때 호출되는 함수입니다. |
+| isUploading | 부울 | 이미지가 현재 업로드 중인지 여부를 나타냅니다. |
+| errorMessage | 문자열 | 이미지 입력 아래에 표시할 선택적 오류 메시지입니다. |
+| disabled | 부울 | `true`인 경우 전체 입력이 비활성화되고 버튼을 클릭할 수 없습니다. |
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx
new file mode 100644
index 0000000000..f8c6d0c69e
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx
@@ -0,0 +1,104 @@
+---
+title: 라디오
+image: /images/user-guide/create-workspace/workspace-cover.png
+---
+
+
+
+
+
+사용자가 여러 옵션 중에서 하나만 선택할 수 있을 때 사용됩니다.
+
+
+
+
+```jsx
+import { Radio } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+ const handleRadioChange = (event) => {
+ console.log("Radio button changed:", event.target.checked);
+ };
+
+ const handleCheckedChange = (checked) => {
+ console.log("Checked state changed:", checked);
+ };
+
+
+ return (
+
+ );
+};
+
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| --------------- | -------------- | ------------------------------------------------------------------------------------- |
+| 스타일 | `React.CSS` 속성 | 컴포넌트의 추가 인라인 스타일 |
+| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
+| 체크됨 | 부울 | 라디오 버튼이 체크되었는지 여부를 나타냅니다 |
+| 값 | 문자열 | 라디오 버튼과 연결된 라벨 또는 텍스트 |
+| onChange | function | 선택된 라디오 버튼이 변경될 때 호출되는 기능 |
+| onCheckedChange | function | 라디오 버튼의 `체크` 상태가 변경될 때 호출되는 기능 |
+| 크기 | 문자열 | 라디오 버튼의 크기입니다. 옵션에는 `large`와 `small`이 포함됩니다 |
+| disabled | 부울 | `참`이면 라디오 버튼이 비활성화되어 클릭할 수 없습니다 |
+| 라벨 위치 | 문자열 | 라벨 텍스트의 라디오 버튼에 대한 상대 위치입니다. 두 가지 옵션: `left`와 `right` |
+
+
+
+
+## 라디오 그룹
+
+관련된 라디오 버튼들을 그룹화합니다.
+
+
+
+
+```jsx
+import React, { useState } from "react";
+import { Radio, RadioGroup } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+ const [selectedValue, setSelectedValue] = useState("Option 1");
+
+ const handleChange = (event) => {
+ setSelectedValue(event.target.value);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ------------- | ----------------- | -------------------------------------------------- |
+| 값 | 문자열 | 현재 선택된 라디오 버튼의 값 |
+| onChange | function | 라디오 버튼이 변경될 때 트리거되는 콜백 기능 |
+| onValueChange | function | 그룹에서 선택된 값이 변경될 때 트리거되는 콜백 기능. |
+| children | `React.ReactNode` | Radio와 같은 React 컴포넌트를 자식으로 Radio Group에 전달할 수 있습니다 |
+
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/select.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..7e09271450
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: 선택
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+사용자가 미리 정의된 옵션 목록에서 값을 선택할 수 있도록 합니다.
+
+
+
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
+| disabled | 부울 | `true`로 설정하면 사용자는 이 구성 요소와 상호작용할 수 없습니다. |
+| 라벨 | 문자열 | `선택` 구성 요소의 목적을 설명하는 라벨 |
+| onChange | function | 선택된 값이 변경될 때 호출되는 함수 |
+| 옵션 | 배열 | `선택된` 구성 요소에 사용할 수 있는 옵션들을 나타냅니다. 각 객체에는 `값`(고유 식별자), `라벨`(고유 식별자) 및 선택적 `아이콘`이 포함된 객체의 배열입니다. |
+| 값 | 문자열 | 현재 선택된 값을 나타냅니다. `옵션` 배열에서 하나의 `값` 속성과 일치해야 합니다. |
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ko/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..ddf8d6f1bf
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: 네비게이션
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..216ff17bd0
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: 링크
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## 연락 링크
+
+연락처 정보를 표시하기 위한 스타일화된 링크 구성 요소입니다.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| -------- | ----------------- | --------------------- |
+| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 이름 |
+| href | 문자열 | 링크의 대상 URL 또는 경로 |
+| 클릭 시 | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
+
+
+
+
+
+## 원시 링크
+
+링크를 표시하기 위한 스타일화된 링크 구성 요소입니다.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| -------- | ----------------- | --------------------- |
+| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
+| href | 문자열 | 링크의 대상 URL 또는 경로 |
+| onClick | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
+
+
+
+
+## 둥근 링크
+
+Chip 구성 요소가 있는 라운드 스타일 링크입니다.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| -------- | ----------------- | --------------------- |
+| href | 문자열 | 링크의 대상 URL 또는 경로 |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
+| onClick | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
+
+
+
+
+## 소셜 링크
+
+URL, LinkedIn 및 X(또는 Twitter)와 같은 다양한 소셜 링크 유형을 지원하는 스타일화된 소셜 링크입니다.
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| -------- | ----------------- | --------------------------------------------------------------------------------------- |
+| href | 문자열 | 링크의 대상 URL 또는 경로 |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
+| 유형 | 문자열 | 소셜 링크 유형입니다. 옵션은 다음과 같습니다: `url`, `LinkedIn`, `Twitter` |
+| 클릭 시 | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
+
+
+
diff --git a/packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..fef13fa1be
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: 단계 막대
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+활성 단계가 강조 표시되어 있는 다단계 진행 상황을 표시합니다. 각각의 `Step` 구성 요소로 표현되는 단계를 포함하는 컨테이너를 렌더링합니다.
+
+
+
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+ return (
+
+ Step 1
+ Step 2
+ Step 3
+
+ );
+};
+```
+
+
+
+
+
+| 프로퍼티 | 유형 | 설명 |
+| ---------- | -- | ----------------------------------------------------------------------------------- |
+| activeStep | 숫자 | 현재 활성 단계의 인덱스입니다. 어느 단계가 시각적으로 강조 표시되어야 하는지를 결정합니다. |
+
+
+
diff --git a/packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..ccabb2baad
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: Dica do Aplicativo
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
+
+Uma mensagem breve que exibe informações adicionais quando um usuário interage com um elemento.
+
+
+
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+ return (
+ <>
+
+ Customer Insights
+
+
+ >
+ );
+};
+```
+
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ---------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | string | Classe CSS opcional para estilização adicional |
+| anchorSelect | Seleção CSS | Seletor para o âncora da dica (o elemento que aciona a dica) |
+| conteúdo | string | O conteúdo que deseja exibir na dica |
+| delayHide | número | O atraso em segundos antes de ocultar a dica após o cursor deixar a âncora. |
+| offset | número | O deslocamento em pixels para posicionar a dica. |
+| noArrow | booleano | Se `true`, oculta a seta na dica. |
+| isOpen | booleano | Se `true`, a dica está aberta por padrão. |
+| local | string `PlacesType` de `react-tooltip` | Especifica o posicionamento da dica. Os valores incluem `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, e `left-end`. |
+| positionStrategy | string `PositionStrategy` de `react-tooltip` | Estratégia de posição para a dica. Possui dois valores: `absolute` e `fixed`. |
+
+
+
+
+
+## Texto Overflow com Dica
+
+Lida com texto em excesso e exibe uma dica quando o texto transborda.
+
+
+
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ const crmTaskDescription =
+ 'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+ return ;
+};
+```
+
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ------ | ----------------------------------------------------------------------------- |
+| texto | string | O conteúdo que você deseja exibir na área de texto excessivo. |
+
+
+
+
diff --git a/packages/twenty-docs/l/pt/twenty-ui/input.mdx b/packages/twenty-docs/l/pt/twenty-ui/input.mdx
new file mode 100644
index 0000000000..e2e309dc53
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Entrada
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..a8260f22ef
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor de Blocos
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Usa um editor de texto rico baseado em blocos do [BlockNote](https://www.blocknotejs.org/) para permitir que os usuários editem e vejam blocos de conteúdo.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ----------------- | ----------------------------------------------- |
+| editor | `BlockNoteEditor` | A instância ou configuração do editor de blocos |
+
+
+
diff --git a/packages/twenty-docs/l/pt/twenty-ui/navigation.mdx b/packages/twenty-docs/l/pt/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..c1204bd49d
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navegação
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..c391e5d583
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Links
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## Link de Contato
+
+Um componente de link estilizado para exibir informações de contato.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ----------------- | ----------------------------------------------------------------------- |
+| className | string | Nome opcional para estilização adicional. |
+| href | string | A URL ou caminho de destino para o link |
+| onClick | função | Função de retorno de chamada para ser disparada quando o link é clicado |
+| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
+
+
+
+
+
+## Link Puro
+
+Um componente de link estilizado para exibir links.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ----------------- | ----------------------------------------------------------------------- |
+| className | string | Nome opcional para estilização adicional. |
+| href | string | A URL ou caminho de destino para o link |
+| aoClicar | função | Função de retorno de chamada para ser disparada quando o link é clicado |
+| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
+
+
+
+
+## Link Arredondado
+
+Um link estilizado de forma arredondada com um componente Chip para links.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ----------------- | ----------------------------------------------------------------------- |
+| href | string | A URL ou caminho de destino para o link |
+| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
+| aoClicar | função | Função de retorno de chamada para ser disparada quando o link é clicado |
+
+
+
+
+## Link Social
+
+Links sociais estilizados, com suporte para vários tipos de links sociais, como URLs, LinkedIn e X (ou Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ----------------- | ------------------------------------------------------------------------------------------------------ |
+| href | string | A URL ou caminho de destino para o link |
+| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
+| tipo | string | O tipo de links sociais. Opções incluem: `url`, `LinkedIn` e `Twitter` |
+| onClick | função | Função de retorno de chamada para ser disparada quando o link é clicado |
+
+
+
diff --git a/packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..f28e91ef86
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Barra de Passos
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Exibe o progresso por meio de uma sequência de passos numerados destacando o passo ativo. Ele renderiza um contêiner com passos, cada um representado pelo componente `Step`.
+
+
+
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+ return (
+
+ Step 1
+ Step 2
+ Step 3
+
+ );
+};
+```
+
+
+
+
+
+| Propriedades | Tipo | Descrição |
+| ------------ | ------ | ------------------------------------------------------------------------------------------------------------ |
+| passoAtivo | número | O índice do passo atualmente ativo. Isso determina qual passo deve ser visualmente destacado |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input.mdx b/packages/twenty-docs/l/ro/twenty-ui/input.mdx
new file mode 100644
index 0000000000..d415a68a00
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Intrare
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..6cefde8e80
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor de Blocuri
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Folosește un editor de texte îmbogățit, bazat pe blocuri, de la [BlockNote](https://www.blocknotejs.org/) pentru a permite utilizatorilor să editeze și să vizualizeze blocuri de conținut.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------- | ----------------- | ----------------------------------------------- |
+| editor | `BlockNoteEditor` | Instanța sau configurarea editorului de blocuri |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..fccbcfa8ba
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: Bifă
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
+
+Utilizat atunci când un utilizator trebuie să selecteze mai multe valori din mai multe opțiuni.
+
+
+
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+ console.log("onChange function fired")}
+ onCheckedChange={() => console.log("onCheckedChange function fired")}
+ variant="primary"
+ size="small"
+ shape="squared"
+ />
+ );
+};
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
+| bifat | boolean | Indică dacă bifa este selectată |
+| indeterminat | boolean | Indică dacă bifa este într-o stare indeterminată (nici bifată, nici nebifată) |
+| onChange | funcție | Funcția de callback pe care doriți să o declanșați când starea bifei se schimbă |
+| laSchimbareBifată | funcție | Funcția de callback pe care doriți să o declanșați când starea `bifat` se schimbă |
+| variantă | șir | Variantele vizuale ale stilului cutiei. Opțiunile includ: `primar`, `secundar` și `terțiar` |
+| dimensiune | șir | Dimensiunea bifei. Are două opțiuni: `mic` și `mare` |
+| formă | șir | Forma bifei. Are două opțiuni: `pătrată` și `rotunjită` |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..89c3ea0d95
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: Selector de iconițe
+image: /images/user-guide/github/github-header.png
+---
+
+
+
+
+
+Un selector de iconițe bazat pe listă derulantă care permite utilizatorilor să selecteze o iconiță dintr-o listă.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+ const [selectedIcon, setSelectedIcon] = useState("");
+ const handleIconChange = ({ iconKey, Icon }) => {
+ console.log("Selected Icon:", iconKey);
+ setSelectedIcon(iconKey);
+ };
+
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| dezactivat | boolean | Dezactivează selectorul de iconițe dacă este setat pe `true` |
+| onChange | funcție | Funcția callback declanșată când utilizatorul selectează o iconiță. Primește un obiect cu proprietățile `iconKey` și `Icon` |
+| cheieIconițăSelectată | șir | Cheia iconiței selectate inițial |
+| laClickExterior | funcție | Funcția callback declanșată când utilizatorul face clic în afara listei derulante |
+| laÎnchidere | funcție | Funcția callback declanșată când lista derulantă este închisă |
+| laDeschidere | funcție | Funcția callback declanșată când lista derulantă este deschisă |
+| variantă | șir | Varianta stilului vizual al iconiței clicabile. Opțiunile includ: `primar`, `secundar` și `terțiar` |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..ac547ff8b9
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigare
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..ff1454fbaf
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Linkuri
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+## Link de Contact
+
+Un component de link stilizat pentru afișarea informațiilor de contact.
+
+
+
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log('Contact link clicked!', event);
+ };
+
+ return (
+
+
+ example@example.com
+
+
+ );
+};
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------- | ----------------- | ------------------------------------------------------- |
+| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
+| href | șir | URL-ul sau calea țintă pentru link |
+| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
+| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
+
+
+
+
+
+## Link Brut
+
+Un component de link stilizat pentru afișarea linkurilor.
+
+
+
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------- | ----------------- | ------------------------------------------------------- |
+| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
+| href | șir | URL-ul sau calea țintă pentru link |
+| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
+| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
+
+
+
+
+## Link Rotunjit
+
+Un link stilizat cu margini rotunjite cu un component Chip pentru linkuri.
+
+
+
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ const handleLinkClick = (event) => {
+ console.log("Contact link clicked!", event);
+ };
+
+ return (
+
+
+ Contact Us
+
+
+ );
+};
+```
+
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------- | ----------------- | ------------------------------------------------------- |
+| href | șir | URL-ul sau calea țintă pentru link |
+| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
+| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
+
+
+
+
+## Link Social
+
+Linkuri sociale stilizate, cu suport pentru diverse tipuri de linkuri sociale, cum ar fi URL-uri, LinkedIn și X (sau Twitter).
+
+
+
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
+| href | șir | URL-ul sau calea țintă pentru link |
+| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
+| tip | șir | Tipul linkurilor sociale. Opțiunile includ: `url`, `LinkedIn` și `Twitter` |
+| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..362116e9ff
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Bară de navigare
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Redă o bară de navigare care conține mai multe componente `NavigationBarItem`.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| -------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | șir | Numele elementului de navigare care este activ în prezent |
+| elemente | array | O matrice de obiecte care reprezintă fiecare element de navigare. Fiecare obiect conține `numele` elementului, componenta `Icon` pentru afișare și o funcție `onClick` care să fie invocată atunci când elementul este apăsat |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..9e606867f7
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Bară de pași
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Afișează progresul printr-o secvență de pași numerotați prin evidențierea pasului activ. Redă un container cu pași, fiecare fiind reprezentat de componenta `Pas`.
+
+
+
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+ return (
+
+ Step 1
+ Step 2
+ Step 3
+
+ );
+};
+```
+
+
+
+
+
+| Proprietăți | Tip | Descriere |
+| ----------- | ----- | ------------------------------------------------------------------------------------------------------------- |
+| pasactiv | număr | Indexul pasului activ în prezent. Aceasta determină ce pas ar trebui să fie evidențiat vizual |
+
+
+
diff --git a/packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..d56f5afc7c
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Feedback
+image: /images/user-guide/emails/emails_header.png
+---
+
+
+
+
+
+Indică progresul sau numărătoarea inversă și se mișcă de la dreapta la stânga.
+
+
+
+
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| Proprietăți | Tip | Descriere | Implicit |
+| --------------- | ------- | ----------------------------------------------------------------------------------- | ---------- |
+| durată | număr | Durata totală a animației barei de progres în milisecunde | 3 |
+| întârziere | număr | Întârzierea în pornirea animației barei de progres în milisecunde | 0 |
+| easing | șir | Funcția de accelerare (easing) pentru animația barei de progres | easeInOut |
+| înălțimeBară | număr | Înălțimea barei în pixeli | 24 |
+| culoareBară | șir | Culoarea barei | gray80 |
+| pornireAutomată | boolean | Dacă `true`, animația barei de progres pornește automat când componenta se montează | `adevărat` |
+
+
+
+
+## Bara de Progres Circulară
+
+Indică progresul unei sarcini, utilizată adesea pe ecranele de încărcare sau în zonele unde doriți să comunicați procesele continue utilizatorului.
+
+
+
+
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Proprietăți | Tip | Descriere | Implicit |
+| ----------- | ----- | -------------------------------------- | ------------ |
+| dimensiune | număr | Dimensiunea barei de progres circulare | 50 |
+| lățimeBară | număr | Lățimea liniei barei de progres | 5 |
+| culoareBară | șir | Culoarea barei de progres | currentColor |
+
+
+
+
diff --git a/packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx b/packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx
new file mode 100644
index 0000000000..10a29ae6dd
--- /dev/null
+++ b/packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx
@@ -0,0 +1,43 @@
+---
+title: Setări profil
+description: Gestionează setările personale ale profilului și setările de securitate.
+---
+
+## Informații personale
+
+### Nume și adresă de email
+
+* **Nume afișat**: Actualizează modul în care numele tău apare celorlalți membri ai spațiului de lucru
+* **Adresa de email**: Schimbă adresa de email de conectare (necesită verificare)
+* **Poză de profil**: Încarcă un avatar personalizat sau folosește inițialele tale
+
+## Setări de securitate
+
+### Autentificare cu doi factori (2FA)
+
+Activează 2FA pentru a adăuga un strat suplimentar de securitate contului tău:
+
+1. Mergi la **Setări → Setări profil**
+2. Apasă pe **Activează 2FA**
+3. Scanează codul QR cu aplicația ta de autentificare
+4. Introdu codul de verificare pentru a confirma
+
+### Gestionarea parolelor
+
+* **Schimbă parola**: Actualizează parola curentă
+* **Cerințe pentru parolă**: Trebuie să aibă cel puțin 8 caractere
+
+## Gestionarea profilului
+
+### Șterge contul
+
+
+ Ștergerea contului va îndepărta permanent accesul la toate spațiile de lucru. Această acțiune nu poate fi anulată, vei pierde accesul la toate spațiile de lucru unde ești membru și ar trebui să iei în considerare părăsirea spațiilor individuale dacă dorești doar să ieși din echipe specifice.
+
+
+Pentru a șterge contul tău:
+
+1. Mergi la **Setări → Setări profil**
+2. Derulează până la **Zona de pericol**
+3. Apasă pe **Șterge contul**
+4. Confirmă introducând adresa ta de email
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..3e9c4f7fe6
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: Подсказка приложения
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
+
+Краткое сообщение, которое отображает дополнительную информацию, когда пользователь взаимодействует с элементом.
+
+
+
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+ return (
+ <>
+
+ Customer Insights
+
+
+ >
+ );
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание |
+| ---------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | строка | Необязательный CSS-класс для дополнительного стилирования |
+| anchorSelect | CSS-селектор | Селектор для анкера подсказки (элемент, который активирует подсказку) |
+| content | строка | Содержимое, которое вы хотите отобразить в подсказке |
+| delayHide | число | Задержка в секундах перед скрытием подсказки после того, как курсор покинет анкер |
+| offset | число | Смещение в пикселях для позиционирования подсказки |
+| noArrow | boolean | Если `true`, стрелка на подсказке скрыта |
+| isOpen | boolean | Если `true`, подсказка открыта по умолчанию |
+| place | Строка `PlacesType` из `react-tooltip` | Определяет расположение подсказки. Значения включают: `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` |
+| positionStrategy | Строка `PositionStrategy` из `react-tooltip` | Стратегия позиционирования для подсказки. Имеет два значения: `absolute` и `fixed` |
+
+
+
+
+
+## Переполненный текст с подсказкой
+
+Обрабатывает переполненный текст и отображает подсказку, когда текст переполняется.
+
+
+
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ const crmTaskDescription =
+ 'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+ return ;
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание |
+| -------- | ------ | ------------------------------------------------------------------------ |
+| текст | строка | Содержимое, которое вы хотите отобразить в области переполненного текста |
+
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input.mdx b/packages/twenty-docs/l/ru/twenty-ui/input.mdx
new file mode 100644
index 0000000000..466af67cb7
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Ввод
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..cfd03c9d24
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Блочный редактор
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Использует блочный текстовый редактор от [BlockNote](https://www.blocknotejs.org/), чтобы пользователи могли редактировать и просматривать блоки контента.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| Свойства | Тип | Описание |
+| -------- | ----------------- | --------------------------------------------- |
+| редактор | `BlockNoteEditor` | Экземпляр или конфигурация блочного редактора |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx
new file mode 100644
index 0000000000..efaea98ce0
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx
@@ -0,0 +1,73 @@
+---
+title: Цветовая Схема
+image: /images/user-guide/fields/field.png
+---
+
+
+
+
+
+## Карточка цветовой схемы
+
+Представляет различные цветовые схемы и специально подходит для светлых и темных тем.
+
+
+
+
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание | По умолчанию |
+| ----------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------- | ------------ |
+| вариант | строка | Вариант цветовой схемы. Варианты включают `Тёмный`, `Светлый`, и `Системный` | светлый |
+| выбран | boolean | Если `true`, отображает галочку, чтобы указать выбранную цветовую схему | |
+| дополнительные свойства | `React.ComponentPropsWithoutRef<'div'>` | Стандартные свойства HTML-элемента `div` | |
+
+
+
+
+
+## Выбор цветовой схемы
+
+Позволяет пользователям выбирать между различными цветовыми схемами.
+
+
+
+
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание |
+| -------- | ---------------- | ----------------------------------------------------------------------------------------------- |
+| значение | `Цветовая Схема` | Текущая выбранная цветовая схема |
+| onChange | функция | Функция обратного вызова, которую вы хотите вызвать, когда пользователь выбирает цветовую схему |
+
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..85f45654bc
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: Выбор иконки
+image: /images/user-guide/github/github-header.png
+---
+
+
+
+
+
+Выпадающий список выбора иконки, который позволяет пользователям выбрать иконку из списка.
+
+
+
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+ const [selectedIcon, setSelectedIcon] = useState("");
+ const handleIconChange = ({ iconKey, Icon }) => {
+ console.log("Selected Icon:", iconKey);
+ setSelectedIcon(iconKey);
+ };
+
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+| Свойства | Тип | Описание |
+| --------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| отключено | boolean | Отключает выбор иконки, если установлено значение `true` |
+| onChange | функция | Функция обратного вызова, вызываемая, когда пользователь выбирает иконку. Она получает объект с свойствами `iconKey` и `Icon` |
+| selectedIconKey | строка | Ключ изначально выбранной иконки |
+| onClickOutside | функция | Функция обратного вызова, вызываемая при клике пользователя за пределами выпадающего списка |
+| onClose | функция | Функция обратного вызова, вызываемая при закрытии выпадающего списка |
+| onOpen | функция | Функция обратного вызова, вызываемая при открытии выпадающего списка |
+| вариант | строка | Визуальный стиль варианта кликабельной иконки. Варианты включают: `primary`, `secondary`, и `tertiary` |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx
new file mode 100644
index 0000000000..8c2e7591d1
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx
@@ -0,0 +1,37 @@
+---
+title: Ввод изображения
+image: /images/user-guide/objects/objects.png
+---
+
+
+
+
+
+Позволяет пользователям загружать и удалять изображение.
+
+
+
+
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+| Свойства | Тип | Описание |
+| ------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| изображение | строка | URL источника изображения |
+| onUpload | функция | Функция вызывается, когда пользователь загружает новое изображение. Она получает объект `File` в качестве параметра |
+| onRemove | функция | Функция вызывается, когда пользователь нажимает на кнопку удаления |
+| onAbort | функция | Функция вызывается, когда пользователь нажимает на кнопку отмены во время загрузки изображения |
+| isUploading | boolean | Указывает, загружается ли в данный момент изображение |
+| errorMessage | строка | Необязательное сообщение об ошибке для отображения под вводом изображения |
+| отключено | boolean | Если `true`, весь элемент ввода отключен и кнопки не кликабельны |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/select.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..6aadac4d47
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Выбрать
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+Позволяет пользователям выбирать значение из списка заранее определенных опций.
+
+
+
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+| Свойства | Тип | Описание |
+| --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | строка | Необязательный CSS-класс для дополнительного стилирования |
+| отключено | boolean | При установке в `true`, отключается взаимодействие пользователя с компонентом |
+| метка | строка | Метка для описания назначения компонента `Выбрать` |
+| onChange | функция | Функция вызывается при изменении выбранных значений |
+| настройки | массив | Представляет доступные варианты для компонента `Выбранное`. Это массив объектов, где каждый объект имеет `value` (уникальный идентификатор), `label` (уникальный идентификатор) и необязательный `Icon` |
+| значение | строка | Представляет текущее выбранное значение. Оно должно соответствовать одному из значений `value` в массиве `options` |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx
new file mode 100644
index 0000000000..1093111862
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx
@@ -0,0 +1,39 @@
+---
+title: Переключатель
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+
+
+
+```jsx
+import { Toggle } from "twenty-ui/input";
+
+export const MyComponent = () => {
+ return (
+ console.log('On Change event')}
+ color="green"
+ toggleSize = "medium"
+ />
+ );
+};
+```
+
+
+
+
+| Свойства | Тип | Описание | По умолчанию |
+| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------- |
+| значение | boolean | Текущее состояние переключателя | `ложь` |
+| onChange | функция | Функция обратного вызова, вызываемая при изменении состояния переключателя | |
+| цвет | строка | Цвет переключателя, когда он\ | имеет синий цвет |
+| размерПереключателя | строка | Размер переключателя, влияющий на высоту и ширину. Есть два варианта: `small` и `medium` | средний |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..63552b6ba1
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Навигация
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..6a950cbb4e
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: Хлебные крошки
+image: /images/user-guide/fields/field.png
+---
+
+
+
+
+
+Отображает панель навигации с хлебными крошками.
+
+
+
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+ const breadcrumbLinks = [
+ { children: "Home", href: "/" },
+ { children: "Category", href: "/category" },
+ { children: "Subcategory", href: "/category/subcategory" },
+ { children: "Current Page" },
+ ];
+
+ return (
+
+
+
+ )
+};
+```
+
+
+
+
+| Свойства | Тип | Описание |
+| --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | строка | Дополнительное имя класса для дополнительной стилизации |
+| ссылки | массив | Массив объектов, каждый из которых представляет собой ссылку-хлебную крошку. Каждый объект имеет свойство `children` (текстовое содержимое ссылки) и необязательное свойство `href` (URL-адрес для перехода по ссылке при щелчке) |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..bc0b53718e
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Панель навигации
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Отображает панель навигации, содержащую несколько компонентов `NavigationBarItem`.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| Свойства | Тип | Описание |
+| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | строка | Имя текущего активного элемента навигации |
+| items | массив | Массив объектов, представляющих каждый элемент навигации. Каждый объект содержит `name` элемента, компонент `Icon` для отображения и функцию `onClick`, которая вызывается при нажатии на элемент. |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..67bf608f53
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Шаговая панель
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Отображает прогресс через последовательность пронумерованных шагов, выделяя активный шаг. Он отображает контейнер с шагами, каждый из которых представлен компонентом `Step`.
+
+
+
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+ return (
+
+ Step 1
+ Step 2
+ Step 3
+
+ );
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание |
+| ----------- | ----- | --------------------------------------------------------------------------------------------------------------------- |
+| активныйШаг | число | Индекс текущего активного шага. Это определяет, какой шаг следует визуально выделить. |
+
+
+
diff --git a/packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..7761b99e6d
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Обратная связь
+image: /images/user-guide/emails/emails_header.png
+---
+
+
+
+
+
+Указывает на прогресс или обратный отсчет и перемещается справа налево.
+
+
+
+
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание | По умолчанию |
+| ----------------- | ------- | ------------------------------------------------------------------------------------------- | ------------ |
+| Продолжительность | число | Общая продолжительность анимации индикатора прогресса в миллисекундах | 3 |
+| Задержка | число | Задержка начала анимации индикатора прогресса в миллисекундах | 0 |
+| Сглаживание | строка | Сглаживающая функция для анимации индикатора прогресса | easeInOut |
+| Высота индикатора | число | Высота полосы в пикселях | 24 |
+| Цвет полосы | строка | Цвет полосы | gray80 |
+| Автозапуск | boolean | Если `true`, анимация индикатора прогресса начинается автоматически при загрузке компонента | `истина` |
+
+
+
+
+## Круговой индикатор прогресса
+
+Указывает на прогресс задачи, часто используется на экранах загрузки или в областях, где необходимо сообщить пользователю о текущих процессах.
+
+
+
+
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| Свойства | Тип | Описание | По умолчанию |
+| ------------- | ------ | ------------------------------------- | ------------ |
+| размер | число | Размер кругового индикатора прогресса | 50 |
+| Ширина полосы | число | Ширина линии индикатора прогресса | 5 |
+| Цвет полосы | строка | Цвет индикатора прогресса | currentColor |
+
+
+
+
diff --git a/packages/twenty-docs/l/tr/twenty-ui/input.mdx b/packages/twenty-docs/l/tr/twenty-ui/input.mdx
new file mode 100644
index 0000000000..75a7225ad4
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Girdi
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..d385618473
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Blok Düzenleyici
+image: /images/user-guide/api/api.png
+---
+
+
+
+
+
+Kullanıcıların içerik bloklarını düzenleyip görüntüleyebilmeleri için [BlockNote](https://www.blocknotejs.org/) tarafından sağlanan blok tabanlı zengin metin düzenleyici kullanır.
+
+
+
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
+
+ return ;
+};
+```
+
+
+
+
+| Özellikler | Tür | Açıklama |
+| ----------- | ----------------- | ------------------------------------------- |
+| düzenleyici | `BlockNoteEditor` | Blok düzenleyici örneği veya yapılandırması |
+
+
+
diff --git a/packages/twenty-docs/l/tr/twenty-ui/input/select.mdx b/packages/twenty-docs/l/tr/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..15d82abcf4
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Seç
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+
+
+
+
+Kullanıcılara önceden tanımlanmış seçeneklerden bir değer seçme olanağı tanır.
+
+
+
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+ return (
+
+
+
+ );
+};
+
+```
+
+
+
+
+| Özellikler | Tür | Açıklama |
+| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| sınıfAdı | metin | Ek stil tanımlamaları için isteğe bağlı CSS sınıfı |
+| devre dışı | boolean | `true` olarak ayarlandığında, kullanıcının bileşenle etkileşimini devre dışı bırakır |
+| etiket | metin | `Seç` bileşeninin amacını açıklamak için etiket |
+| onChange | function | Seçilen değerler değiştiğinde çağrılan fonksiyon |
+| seçenekler | dizi | `Seç` bileşeni için mevcut seçenekleri temsil eder. Her bir nesnenin bir `değer` (benzersiz tanımlayıcı), `etiket` (benzersiz tanımlayıcı) ve isteğe bağlı bir `Simge` içeren nesneler dizisidir |
+| değer | metin | Şu anda seçili olan değeri temsil eder. `options` dizisindeki `değer` özelliklerinden birine eşit olmalıdır. |
+
+
+
diff --git a/packages/twenty-docs/l/tr/twenty-ui/navigation.mdx b/packages/twenty-docs/l/tr/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..df9401f3e8
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Gezinme
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..7a50004c42
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Gezinti Çubuğu
+image: /images/user-guide/table-views/table.png
+---
+
+
+
+
+
+Birden fazla `NavigationBarItem` bileşeni içeren bir gezinti çubuğu oluşturur.
+
+
+
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+ const navigationItems = [
+ {
+ name: "Home",
+ Icon: IconHome,
+ onClick: () => console.log("Home clicked"),
+ },
+ {
+ name: "Profile",
+ Icon: IconUser,
+ onClick: () => console.log("Profile clicked"),
+ },
+ {
+ name: "Settings",
+ Icon: IconSettings,
+ onClick: () => console.log("Settings clicked"),
+ },
+ ];
+
+ return ;
+};
+```
+
+
+
+
+| Özellikler | Tür | Açıklama |
+| ----------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| aktifÖğeAdı | metin | Şu anda aktif olan gezinti öğesinin adı |
+| öğeler | dizi | Her gezinti öğesini temsil eden nesnelerin dizisi. Her nesne, öğenin adını, gösterilecek `Icon` bileşenini ve öğeye tıklandığında çağrılacak bir `onClick` fonksiyonunu içerir. |
+
+
+
diff --git a/packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..6f9085e39a
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: 应用程序提示
+image: /images/user-guide/tips/light-bulb.png
+---
+
+
+
+
+
+当用户与一个元素互动时显示额外信息的简要信息。
+
+
+
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+ return (
+ <>
+