@ledgerhq/lumen-ui-rnative 0.1.46 → 0.1.48

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,4 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import type { ReactElement } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
@@ -11,20 +12,23 @@ import {
 import type {
   SegmentedControlButtonProps,
   SegmentedControlProps,
+  SegmentedControlValue,
 } from './types';
 import {
   usePillLayout,
   useSegmentedControlSelectedIndex,
 } from './usePillLayout';
 
-export function SegmentedControlButton({
+export function SegmentedControlButton<
+  T extends SegmentedControlValue = SegmentedControlValue,
+>({
   value,
   children,
   icon: Icon,
   trailingContent,
   onPress,
   ...props
-}: SegmentedControlButtonProps) {
+}: SegmentedControlButtonProps<T>) {
   const {
     selectedValue,
     onSelectedChange,
@@ -126,7 +130,9 @@ function useButtonStyles({
   return { ...styles, typography, textColor };
 }
 
-export function SegmentedControl({
+export function SegmentedControl<
+  T extends SegmentedControlValue = SegmentedControlValue,
+>({
   selectedValue,
   onSelectedChange,
   accessibilityLabel,
@@ -135,7 +141,7 @@ export function SegmentedControl({
   appearance = 'background',
   tabLayout = 'fixed',
   ...props
-}: SegmentedControlProps) {
+}: SegmentedControlProps<T>) {
   const disabled = useDisabledContext({
     consumerName: 'SegmentedControl',
     mergeWith: { disabled: disabledProp },
@@ -160,7 +166,7 @@ export function SegmentedControl({
     <SegmentedControlContextProvider
       value={{
         selectedValue,
-        onSelectedChange,
+        onSelectedChange: onSelectedChange as (value: string) => void,
         disabled,
         tabLayout,
         registerButtonLayout,
@@ -220,3 +226,14 @@ function useRootStyles({
     [disabled, appearance, tabLayout],
   );
 }
+
+export function createSegmentedControl<
+  T extends SegmentedControlValue = never,
+>(): {
+  SegmentedControl: (props: SegmentedControlProps<T>) => ReactElement;
+  SegmentedControlButton: (
+    props: SegmentedControlButtonProps<T>,
+  ) => ReactElement;
+} {
+  return { SegmentedControl, SegmentedControlButton };
+}

package/src/lib/Components/SegmentedControl/types.ts

@@ -3,15 +3,19 @@ import type { LumenTextStyle, StyledPressableProps } from '../../../styles';
 import type { IconSize } from '../Icon';
 import type { BoxProps } from '../Utility';
 
-export type SegmentedControlProps = {
+export type SegmentedControlValue = string;
+
+export type SegmentedControlProps<
+  T extends SegmentedControlValue = SegmentedControlValue,
+> = {
   /**
    * The value of the currently selected segment (drives the sliding pill).
    */
-  selectedValue: string;
+  selectedValue: T;
   /**
    * Callback when the selected segment value changes.
    */
-  onSelectedChange: (value: string) => void;
+  onSelectedChange: (value: T) => void;
   /**
    * When true, the entire control is disabled (no interaction, selected uses muted styling).
    */
@@ -43,11 +47,13 @@ type IconComponent = ComponentType<{
   color?: LumenTextStyle['color'];
 }>;
 
-export type SegmentedControlButtonProps = {
+export type SegmentedControlButtonProps<
+  T extends SegmentedControlValue = SegmentedControlValue,
+> = {
   /**
    * Value for this segment (must be unique among siblings).
    */
-  value: string;
+  value: T;
   /**
    * Button label (e.g. "Preview", "Raw").
    */

package/src/lib/Components/Skeleton/Skeleton.mdx

@@ -10,7 +10,7 @@ import {
 } from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Communication/Skeleton' of={SkeletonStories} />
+<Meta title='Core/Skeleton' of={SkeletonStories} />
 
 # Skeleton
 

package/src/lib/Components/Skeleton/Skeleton.stories.tsx

@@ -3,7 +3,8 @@ import { Box } from '../Utility/Box';
 import { Skeleton } from './Skeleton';
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Communication/Skeleton',
+  id: 'rnative-skeleton',
+  title: 'Core/Skeleton',
   component: Skeleton,
   parameters: {
     actions: { disable: true },

package/src/lib/Components/Spinner/Spinner.mdx

@@ -6,7 +6,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
-<Meta title='Communication/Spinner/Docs' of={SpinnerStories} />
+<Meta title='Core/Spinner' of={SpinnerStories} />
 
 # Spinner
 

package/src/lib/Components/Spinner/Spinner.stories.tsx

@@ -4,7 +4,8 @@ import { Text } from '../Utility/Text';
 import { Spinner } from './Spinner';
 
 const meta: Meta<typeof Spinner> = {
-  title: 'Communication/Spinner',
+  id: 'rnative-spinner',
+  title: 'Core/Spinner',
   component: Spinner,
   parameters: {
     actions: { disable: true },

package/src/lib/Components/Spot/Spot.mdx

@@ -6,7 +6,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Components/Spot' of={SpotStories} />
+<Meta title='Core/Spot' of={SpotStories} />
 
 # Spot
 

package/src/lib/Components/Spot/Spot.stories.tsx

@@ -7,7 +7,8 @@ import type { SpotProps } from './types';
 
 const meta: Meta<typeof Spot> = {
   component: Spot,
-  title: 'Communication/Spot',
+  id: 'rnative-spot',
+  title: 'Core/Spot',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Spot/Spot.tsx

@@ -103,7 +103,7 @@ const useStyles = ({
  * - `'number'` appearance requires a `number` prop
  * - All other appearances are self-contained
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_media-graphics-spot--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-spot--docs Storybook}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the spot's core appearance (colors, size, etc). Use the `appearance` prop instead.

package/src/lib/Components/Stepper/Stepper.mdx

@@ -6,7 +6,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
-<Meta title='Communication/Stepper/Docs' of={StepperStories} />
+<Meta title='Core/Stepper' of={StepperStories} />
 
 # Stepper
 

package/src/lib/Components/Stepper/Stepper.stories.tsx

@@ -4,7 +4,8 @@ import { Text } from '../Utility/Text';
 import { Stepper } from './Stepper';
 
 const meta: Meta<typeof Stepper> = {
-  title: 'Communication/Stepper',
+  id: 'rnative-stepper',
+  title: 'Core/Stepper',
   component: Stepper,
   parameters: {
     actions: { disable: true },

package/src/lib/Components/Subheader/Subheader.mdx

@@ -19,7 +19,7 @@ import {
 } from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Components/Subheader' of={SubheaderStories} />
+<Meta title='Core/Subheader' of={SubheaderStories} />
 
 # Subheader
 

package/src/lib/Components/Subheader/Subheader.stories.tsx

@@ -20,7 +20,8 @@ const Container = ({ children }: { children: React.ReactNode }) => (
 
 const meta: Meta<typeof Subheader> = {
   component: Subheader,
-  title: 'Communication/Subheader',
+  id: 'rnative-subheader',
+  title: 'Core/Subheader',
   subcomponents: {
     SubheaderRow,
     SubheaderTitle,

package/src/lib/Components/Switch/Switch.mdx

@@ -6,7 +6,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title="Components/Switch" of={SwitchStories} />
+<Meta title='Core/Switch' of={SwitchStories} />
 
 # Switch
 

package/src/lib/Components/Switch/Switch.stories.tsx

@@ -3,7 +3,8 @@ import { Box, Text } from '../Utility';
 import { Switch } from './Switch';
 
 const meta: Meta<typeof Switch> = {
-  title: 'Selection/Switch',
+  id: 'rnative-switch',
+  title: 'Core/Switch',
   component: Switch,
   parameters: {
     layout: 'fullscreen',

package/src/lib/Components/Switch/Switch.tsx

@@ -107,8 +107,7 @@ const useAnimatedThumb = (checked: boolean, translate: number) => {
  * The switch follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper active interactions.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-switch--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-switch--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-switch--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the switch's core appearance.

package/src/lib/Components/TabBar/TabBar.mdx

@@ -6,7 +6,7 @@ import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
-<Meta title='Navigation/TabBar' of={TabBarStories} />
+<Meta title='Core/TabBar' of={TabBarStories} />
 
 # TabBar
 
@@ -69,6 +69,8 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 
 ### Basic Usage
 
+> **Recommended:** prefer the [type-safe variant](#type-safe-variant) below. It shares one literal union across `active` and every `TabBarItem.value`.
+
 ```tsx
 import { useState } from 'react';
 import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
@@ -86,6 +88,33 @@ function MyComponent() {
 }
 ```
 
+### Type-safe variant
+
+`TabBar` and `TabBarItem` communicate via context, so TypeScript cannot connect the root's `active` to each item's `value` on its own. A typo compiles, and the wrong tab (or none) is highlighted.
+
+`createTabBar<T>()` ties both components to one literal union. Call it once at module scope; the returned pair are typed against your `T`.
+
+```tsx
+import { createTabBar } from '@ledgerhq/lumen-ui-rnative';
+import { Home, HomeFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+type Route = 'home' | 'swap' | 'settings';
+
+const { TabBar, TabBarItem } = createTabBar<Route>();
+
+function Example() {
+  const [active, setActive] = React.useState<Route>('home');
+
+  return (
+    <TabBar active={active} onTabPress={setActive}>
+      <TabBarItem value='home' label='Home' icon={Home} activeIcon={HomeFill} />
+      <TabBarItem value='swap' label='Swap' icon={Settings} />
+      <TabBarItem value='settings' label='Settings' icon={Settings} />
+    </TabBar>
+  );
+}
+```
+
 ### With Active Icons
 
 Provide different icons for active and inactive states:

package/src/lib/Components/TabBar/TabBar.stories.tsx

@@ -15,10 +15,11 @@ import {
   CreditCard,
   CreditCardFill,
 } from '../../Symbols';
-import { TabBar, TabBarItem } from './TabBar';
+import { createTabBar, TabBar, TabBarItem } from './TabBar';
 
 const meta = {
-  title: 'Navigation/TabBar',
+  id: 'rnative-tabbar',
+  title: 'Core/TabBar',
   component: TabBar,
   subcomponents: {
     TabBarItem,
@@ -118,3 +119,36 @@ export const MissingLabel: Story = {
     );
   },
 };
+
+type Route = 'home' | 'swap' | 'card' | 'help';
+const Nav = createTabBar<Route>();
+
+export const TypesafeFactory: Story = {
+  args: {} as React.ComponentProps<typeof TabBar>,
+  render: () => {
+    const [active, setActive] = useState<Route>('home');
+    return (
+      <Nav.TabBar active={active} onTabPress={setActive} lx={{ width: 's320' }}>
+        <Nav.TabBarItem
+          value='home'
+          label='Home'
+          icon={Home}
+          activeIcon={HomeFill}
+        />
+        <Nav.TabBarItem value='swap' label='Swap' icon={CoinPercent} />
+        <Nav.TabBarItem
+          value='card'
+          label='Card'
+          icon={CreditCard}
+          activeIcon={CreditCardFill}
+        />
+        <Nav.TabBarItem
+          value='help'
+          label='Help'
+          icon={LifeRing}
+          activeIcon={LifeRingFill}
+        />
+      </Nav.TabBar>
+    );
+  },
+};

package/src/lib/Components/TabBar/TabBar.test.tsx

@@ -3,7 +3,7 @@ import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
 import { HomeFill, Settings, BasketPutIn } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
-import { TabBar, TabBarItem } from './TabBar';
+import { TabBar, TabBarItem, createTabBar } from './TabBar';
 
 const renderWithProvider = (component: React.ReactElement) => {
   return render(
@@ -54,4 +54,26 @@ describe('TabBar', () => {
     expect(getByText('Shop')).toBeTruthy();
     expect(getByText('Settings')).toBeTruthy();
   });
+
+  describe('createTabBar', () => {
+    it('returns typed components that render and respond to presses', () => {
+      const { TabBar: TypedTabBar, TabBarItem: TypedItem } = createTabBar<
+        'home' | 'settings'
+      >();
+      const onTabPress = jest.fn();
+
+      const { getByText } = renderWithProvider(
+        <TypedTabBar active='home' onTabPress={onTabPress}>
+          <TypedItem value='home' label='Home' icon={HomeFill} />
+          <TypedItem value='settings' label='Settings' icon={Settings} />
+        </TypedTabBar>,
+      );
+
+      expect(getByText('Home')).toBeTruthy();
+
+      fireEvent.press(getByText('Settings'));
+
+      expect(onTabPress).toHaveBeenCalledWith('settings');
+    });
+  });
 });

package/src/lib/Components/TabBar/TabBar.tsx

@@ -1,5 +1,5 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { StyleSheet, Text, View } from 'react-native';
@@ -18,7 +18,7 @@ import { Placeholder } from '../../Symbols';
 import { RuntimeConstants } from '../../utils';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
-import type { TabBarItemProps, TabBarProps } from './types';
+import type { TabBarItemProps, TabBarProps, TabBarValue } from './types';
 
 export const TAB_BAR_HEIGHT = 60;
 const PILL_INSET = 4;
@@ -227,8 +227,7 @@ export function TabBarItem({
  * A horizontal tab bar with animated pill background and icon transitions.
  * Provides smooth animations for active state changes and press interactions.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-tabbar--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  *
@@ -242,12 +241,12 @@ export function TabBarItem({
  *   <TabBarItem value="settings" label="Settings" icon={Settings} />
  * </TabBar>
  */
-export function TabBar({
+export function TabBar<T extends TabBarValue = TabBarValue>({
   active,
   onTabPress,
   children,
   ...props
-}: TabBarProps) {
+}: TabBarProps<T>) {
   const styles = useStyles();
   const { theme, colorScheme } = useTheme();
 
@@ -256,12 +255,13 @@ export function TabBar({
     children,
   });
 
-  function handleTabPress(value: string) {
-    onTabPress?.(value);
-  }
-
   return (
-    <TabBarContextProvider value={{ active, onTabPress: handleTabPress }}>
+    <TabBarContextProvider
+      value={{
+        active,
+        onTabPress: (value) => onTabPress(value as T),
+      }}
+    >
       <Box
         style={styles.container}
         onLayout={onLayout}
@@ -349,3 +349,10 @@ const useStyles = () =>
     }),
     [],
   );
+
+export function createTabBar<T extends TabBarValue = never>(): {
+  TabBar: (props: TabBarProps<T>) => ReactElement;
+  TabBarItem: (props: TabBarItemProps<T>) => ReactElement;
+} {
+  return { TabBar, TabBarItem };
+}

package/src/lib/Components/TabBar/index.ts

@@ -1,2 +1,2 @@
-export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from './TabBar';
-export type { TabBarProps, TabBarItemProps } from './types';
+export * from './TabBar';
+export * from './types';

package/src/lib/Components/TabBar/types.ts

@@ -7,11 +7,28 @@ type IconComponent = ComponentType<{
   size?: IconSize;
 }>;
 
-export type TabBarItemProps = {
+export type TabBarValue = string;
+
+export type TabBarProps<T extends TabBarValue = TabBarValue> = {
+  /**
+   * The value of the currently active tab.
+   */
+  active: T;
+  /**
+   * The callback function called when a tab is pressed.
+   */
+  onTabPress: (active: T) => void;
+  /**
+   * The tab items to display.
+   */
+  children: ReactNode;
+} & Omit<BoxProps, 'children'>;
+
+export type TabBarItemProps<T extends TabBarValue = TabBarValue> = {
   /**
    * The unique identifier for the tab item.
    */
-  value: string;
+  value: T;
   /**
    * The display label for the tab item.
    * If not provided, the icon will be centered.
@@ -27,18 +44,3 @@ export type TabBarItemProps = {
    */
   activeIcon?: IconComponent;
 } & Omit<StyledViewProps, 'children'>;
-
-export type TabBarProps = {
-  /**
-   * The value of the currently active tab.
-   */
-  active: string;
-  /**
-   * The callback function called when a tab is pressed.
-   */
-  onTabPress: (active: string) => void;
-  /**
-   * The tab items to display.
-   */
-  children: ReactNode;
-} & Omit<BoxProps, 'children'>;

package/src/lib/Components/Tag/Tag.mdx

@@ -5,7 +5,7 @@ import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 
-<Meta title='Components/Tag' of={TagStories} />
+<Meta title='Core/Tag' of={TagStories} />
 
 # Tag
 

package/src/lib/Components/Tag/Tag.stories.tsx

@@ -5,7 +5,8 @@ import { Tag } from './Tag';
 
 const meta: Meta<typeof Tag> = {
   component: Tag,
-  title: 'Communication/Tag',
+  id: 'rnative-tag',
+  title: 'Core/Tag',
   argTypes: {
     appearance: {
       control: 'select',

package/src/lib/Components/Tag/Tag.tsx

@@ -14,8 +14,7 @@ const iconSizeMap: Record<Size, IconSize> = {
  *
  * The appearance determines the color scheme used.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-implementation--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-tag--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.

package/src/lib/Components/TextInput/TextInput.mdx

@@ -5,7 +5,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Input/TextInput' of={TextInputStories} />
+<Meta title='Core/TextInput' of={TextInputStories} />
 
 # TextInput
 

package/src/lib/Components/TextInput/TextInput.stories.tsx

@@ -6,7 +6,8 @@ import { type TextInputProps } from './types';
 
 const meta: Meta<typeof TextInput> = {
   component: TextInput,
-  title: 'Input/TextInput',
+  id: 'rnative-textinput',
+  title: 'Core/TextInput',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Tile/Tile.mdx

@@ -11,7 +11,7 @@ import {
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
-<Meta title='Containment/Tile' of={TileStories} />
+<Meta title='Core/Tile' of={TileStories} />
 
 # Tile
 

package/src/lib/Components/Tile/Tile.stories.tsx

@@ -19,7 +19,8 @@ const meta: Meta<typeof Tile> = {
     TileDescription,
     TileTrailingContent,
   },
-  title: 'Containment/Tile',
+  id: 'rnative-tile',
+  title: 'Core/Tile',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Tile/Tile.tsx

@@ -73,8 +73,7 @@ const useRootStyles = ({
  * A flexible tile component that uses a composite pattern for maximum customization.
  * Displays content in a vertical layout with support for spots, text, and custom content.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-tile--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-tile--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-tile--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.

package/src/lib/Components/TileButton/TileButton.mdx

@@ -5,7 +5,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Action/TileButton' of={TileButtonStories} />
+<Meta title='Core/TileButton' of={TileButtonStories} />
 
 # TileButton
 

package/src/lib/Components/TileButton/TileButton.stories.tsx

@@ -15,7 +15,8 @@ const iconOptions = {
 
 const meta: Meta<typeof TileButton> = {
   component: TileButton,
-  title: 'Action/TileButton',
+  id: 'rnative-tilebutton',
+  title: 'Core/TileButton',
   argTypes: {
     icon: {
       options: Object.keys(iconOptions),

package/src/lib/Components/TileButton/TileButton.tsx

@@ -67,7 +67,7 @@ const useStyles = ({
  * A compact button component displaying an icon above a label in a vertical layout.
  * Ideal for grids, toolbars, or quick action menus.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-tilebutton--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-tilebutton--docs Storybook}
  *
  * @example
  * import { TileButton } from '@ledgerhq/lumen-ui-rnative';