feat(ui-react/ui-rnative): add Trend component

.nx/version-plans/version-plan-1777911187465.md

@@ -0,0 +1,5 @@
+---
+'@ledgerhq/lumen-ui-rnative': patch
+---
+
+feat(ui-rnative): add Trend component

apps/app-sandbox-rnative/src/app/App.tsx

@@ -28,21 +28,23 @@ import {
   Checkboxes,
   ContentBanners,
   Dividers,
+  DotCounts,
   DotIcons,
+  DotIndicators,
   DotSymbols,
-  MediaImages,
   ExampleTabBar,
   Gradients,
   IconButtons,
   InteractiveIcons,
   LineCharts,
-  OptionLists,
   Links,
   ListItems,
   MediaBanners,
   MediaButtons,
   MediaCards,
+  MediaImages,
   NavBars,
+  OptionLists,
   PageIndicators,
   SegmentedControls,
   Selects,
@@ -57,8 +59,7 @@ import {
   ToggleLocaleSwitch,
   ToggleThemeSwitch,
   Tooltips,
-  DotCounts,
-  DotIndicators,
+  Trends,
 } from './blocks';
 import { SandboxBlock } from './SandboxBlock';
 import { SandboxProvider } from './SandboxContext';
@@ -268,6 +269,9 @@ const AppContent = ({
                 <SandboxBlock title='Tooltips'>
                   <Tooltips />
                 </SandboxBlock>
+                <SandboxBlock title='Trends'>
+                  <Trends />
+                </SandboxBlock>
               </Box>
             </ScrollView>
             <BottomSheetFlatLists ref={bottomSheetFlatListsRef} />

apps/app-sandbox-rnative/src/app/blocks/Trends.tsx

@@ -0,0 +1,24 @@
+import { Box, Trend } from '@ledgerhq/lumen-ui-rnative';
+
+export function Trends() {
+  return (
+    <Box lx={{ gap: 's24' }}>
+      <Box lx={{ gap: 's16', flexDirection: 'row' }}>
+        <Trend value={0.24} size='sm' />
+        <Trend value={0.24} size='md' />
+      </Box>
+      <Box lx={{ gap: 's16', flexDirection: 'row' }}>
+        <Trend value={-1.33} size='sm' />
+        <Trend value={-1.33} size='md' />
+      </Box>
+      <Box lx={{ gap: 's16', flexDirection: 'row' }}>
+        <Trend value={0} size='sm' />
+        <Trend value={0} size='md' />
+      </Box>
+      <Box lx={{ gap: 's16', flexDirection: 'row' }}>
+        <Trend value={6.1} size='sm' disabled />
+        <Trend value={6.1} size='md' disabled />
+      </Box>
+    </Box>
+  );
+}

apps/app-sandbox-rnative/src/app/blocks/index.ts

@@ -2,21 +2,31 @@ export * from './AmountDisplays';
 export * from './AmountInputs';
 export * from './Animations';
 export * from './Avatars';
-export * from './DotCounts';
-export * from './DotIndicators';
+export * from './Banners';
 export * from './BottomSheets';
 export * from './Buttons';
-export * from './Checkboxes';
+export * from './CardButtons';
 export * from './Cards';
+export * from './Checkboxes';
+export * from './ContentBanners';
 export * from './Dividers';
+export * from './DotCounts';
 export * from './DotIcons';
+export * from './DotIndicators';
 export * from './DotSymbols';
-export * from './MediaButtons';
-export * from './MediaImages';
+export * from './Gradients';
 export * from './IconButtons';
+export * from './InteractiveIcons';
+export * from './LineCharts';
 export * from './Links';
+export * from './ListItems';
 export * from './MediaBanners';
+export * from './MediaButtons';
+export * from './MediaCards';
+export * from './MediaImages';
 export * from './NavBars';
+export * from './OptionLists';
+export * from './PageIndicators';
 export * from './SegmentedControls';
 export * from './Selects';
 export * from './Skeletons';
@@ -28,16 +38,7 @@ export * from './TabBars';
 export * from './Tags';
 export * from './TextInputs';
 export * from './Tiles';
-export * from './ListItems';
-export * from './PageIndicators';
 export * from './ToggleLocaleSwitch';
 export * from './ToggleThemeSwitch';
-export * from './InteractiveIcons';
-export * from './Banners';
-export * from './CardButtons';
-export * from './ContentBanners';
-export * from './MediaCards';
 export * from './Tooltips';
-export * from './Gradients';
-export * from './LineCharts';
-export * from './OptionLists';
+export * from './Trends';

libs/ui-rnative/src/i18n/locales/de.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "Schritt {{currentStep}} von {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "Aufwärtstrend um {{value}}",
+      "negativeAriaLabel": "Abwärtstrend um {{value}}",
+      "neutralAriaLabel": "Keine Veränderung, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/en.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "Step {{currentStep}} of {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "Trending up by {{value}}",
+      "negativeAriaLabel": "Trending down by {{value}}",
+      "neutralAriaLabel": "No change, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/es.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "Paso {{currentStep}} de {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "Tendencia al alza de {{value}}",
+      "negativeAriaLabel": "Tendencia a la baja de {{value}}",
+      "neutralAriaLabel": "Sin cambios, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/fr.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "Étape {{currentStep}} sur {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "Tendance à la hausse de {{value}}",
+      "negativeAriaLabel": "Tendance à la baisse de {{value}}",
+      "neutralAriaLabel": "Aucun changement, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/ja.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "ステップ {{currentStep}}/{{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "{{value}} 上昇傾向",
+      "negativeAriaLabel": "{{value}} 下降傾向",
+      "neutralAriaLabel": "変化なし、{{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/ko.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "{{totalSteps}}단계 중 {{currentStep}}단계"
+    },
+    "trend": {
+      "positiveAriaLabel": "{{value}} 상승 추세",
+      "negativeAriaLabel": "{{value}} 하락 추세",
+      "neutralAriaLabel": "변화 없음, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/pt.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "Passo {{currentStep}} de {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "Tendência de alta de {{value}}",
+      "negativeAriaLabel": "Tendência de baixa de {{value}}",
+      "neutralAriaLabel": "Sem alteração, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/ru.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "Шаг {{currentStep}} из {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "Рост на {{value}}",
+      "negativeAriaLabel": "Снижение на {{value}}",
+      "neutralAriaLabel": "Без изменений, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/th.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "ขั้นตอนที่ {{currentStep}} จาก {{totalSteps}}"
+    },
+    "trend": {
+      "positiveAriaLabel": "แนวโน้มเพิ่มขึ้น {{value}}",
+      "negativeAriaLabel": "แนวโน้มลดลง {{value}}",
+      "neutralAriaLabel": "ไม่มีการเปลี่ยนแปลง, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/tr.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "{{totalSteps}} adımdan {{currentStep}}. adım"
+    },
+    "trend": {
+      "positiveAriaLabel": "{{value}} yükseliş eğilimi",
+      "negativeAriaLabel": "{{value}} düşüş eğilimi",
+      "neutralAriaLabel": "Değişiklik yok, {{value}}"
     }
   }
 }

libs/ui-rnative/src/i18n/locales/zh.json

@@ -31,6 +31,11 @@
     },
     "stepper": {
       "progressAriaLabel": "第 {{currentStep}} 步，共 {{totalSteps}} 步"
+    },
+    "trend": {
+      "positiveAriaLabel": "上升 {{value}}",
+      "negativeAriaLabel": "下降 {{value}}",
+      "neutralAriaLabel": "无变化，{{value}}"
     }
   }
 }

libs/ui-rnative/src/lib/Components/Trend/Trend.mdx

@@ -0,0 +1,106 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TrendStories from './Trend.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/Trend' of={TrendStories} />
+
+# Trend
+
+<CustomTabs>
+<Tab label="Overview">
+
+## Introduction
+
+A compact indicator used to communicate directional change in a numeric value, typically a percentage. It combines an icon and a formatted label to convey whether a value has gone up, down, or stayed flat.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=892-5393).
+
+## Anatomy
+
+- **Icon:** A directional triangle (up or down) or a minus symbol that visually reinforces the direction of change at a glance.
+- **Value:** The numeric percentage formatted to exactly two decimal places, ensuring consistent alignment across lists and tables.
+
+## Properties
+
+### Overview
+
+<Canvas of={TrendStories.Base} />
+<Controls of={TrendStories.Base} />
+
+### Variants
+
+The variant is derived automatically from the `value` prop. No manual selection needed! This ensures the color and icon always stay in sync with the actual data.
+
+- **Positive** - value greater than 0: green color, triangle up icon
+- **Negative** - value less than 0: red color, triangle down icon
+- **Neutral** - value equal to 0: muted color, minus icon
+
+<Canvas of={TrendStories.VariantShowcase} />
+
+---
+
+### Size
+
+Two sizes are available to accommodate different layout densities. Use `md` in most contexts and `sm` when space is constrained, such as inside a table cell or a compact list item.
+
+- **md** (default) - standard body text and icon sizes
+- **sm** - smaller text and icon, suitable for dense UIs
+
+<Canvas of={TrendStories.SizeShowcase} />
+
+---
+
+### Disabled
+
+When `disabled` is `true`, the icon and text both render in a muted, non-interactive style regardless of the underlying value. Use this when the data is unavailable, loading, or the surrounding context is non-interactive.
+
+<Canvas of={TrendStories.DisabledShowcase} />
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+Pass any numeric value - the component handles color, icon, and formatting automatically.
+
+```tsx
+import { Trend } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Trend value={5.25} />;
+}
+```
+
+### Sizes
+
+Choose `sm` for dense layouts like tables or compact list rows, and `md` for standard content areas.
+
+```tsx
+<Trend value={3.14} size='md' />
+<Trend value={3.14} size='sm' />
+```
+
+### Disabled State
+
+Wrap or pass `disabled` when the value is unavailable or the parent context is non-interactive. The component style updates automatically - no extra styling needed.
+
+```tsx
+<Trend value={5.25} disabled />
+```
+
+### Layout Adjustments
+
+Use `lx` for layout only - not for overriding colors or typography. The component's visual appearance is controlled exclusively via props.
+
+```tsx
+<Trend value={-1.5} lx={{ marginTop: 's4' }} />
+```
+
+</Tab>
+</CustomTabs>