@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.48

package/dist/src/lib/Components/ListItem/types.d.ts

@@ -0,0 +1,106 @@
+import React from 'react';
+import { LumenTextStyle, StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot';
+/**
+ * Context value for passing state to sub-components
+ */
+export type ListItemContextValue = {
+    disabled?: boolean;
+};
+/**
+ * Props for the ListItem root component
+ */
+export type ListItemProps = {
+    /**
+     * The content of the list item (ListItemLeading, ListItemTrailing)
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function when the list item is pressed.
+     */
+    onPress?: StyledPressableProps['onPress'];
+} & Omit<StyledPressableProps, 'disabled' | 'children'>;
+/**
+ * Props for the ListItemLeading component
+ */
+export type ListItemLeadingProps = {
+    /**
+     * The content of the leading area (visual element + ListItemContent)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemContent component
+ */
+export type ListItemContentProps = {
+    /**
+     * The content (ListItemTitle, ListItemDescription)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemTitle component
+ */
+export type ListItemTitleProps = {
+    /**
+     * The title text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemDescription component
+ */
+export type ListItemDescriptionProps = {
+    /**
+     * The description text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemTrailing component
+ */
+export type ListItemTrailingProps = {
+    /**
+     * The trailing content (icons, switches, values, etc.)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemTruncate component
+ * Used to truncate text that should when ListItemDescription or ListItemTitle contain custom content
+ */
+export type ListItemTruncateProps = {
+    /**
+     * The text content to truncate
+     */
+    children: string;
+    /**
+     * The variant determines typography and color styling.
+     * Use 'title' inside ListItemTitle and 'description' inside ListItemDescription.
+     * @default 'description'
+     */
+    variant?: 'title' | 'description';
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemSpot component
+ * Spot adapter that inherits disabled state from parent ListItem
+ */
+export type ListItemSpotProps = DiscriminatedSpotProps & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemIcon component
+ */
+export type ListItemIconProps = {
+    /**
+     * The icon component to render
+     */
+    icon: React.ComponentType<any>;
+    /**
+     * Optional color override. If not provided, uses theme color with disabled state handling.
+     */
+    color?: LumenTextStyle['color'];
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/ListItem/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;CAC3C,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACnC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GACpD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEpC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/ListItem/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Select/GlobalSelectBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalSelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/GlobalSelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AA0DtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAyG3C,CAAC"}
+{"version":3,"file":"GlobalSelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/GlobalSelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAqDtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EA4G3C,CAAC"}

package/dist/src/lib/Components/Select/GlobalSelectBottomSheet.js

@@ -4,6 +4,7 @@ import { Pressable } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { BottomSheet, BottomSheetHeader, BottomSheetView, useBottomSheetRef, } from '../BottomSheet';
+import { Divider } from '../Divider';
 import { Box, Text } from '../Utility';
 import { useGlobalSelectSafeContext } from './GlobalSelectContext';
 const useStyles = () => {
@@ -11,12 +12,6 @@ const useStyles = () => {
         bottomSheetView: {
             paddingHorizontal: t.spacings.s8,
         },
-        separator: {
-            marginVertical: t.spacings.s4,
-            marginHorizontal: t.spacings.s8,
-            height: 1,
-            backgroundColor: t.colors.bg.muted,
-        },
         groupLabel: {
             marginBottom: t.spacings.s4,
             paddingHorizontal: t.spacings.s8,
@@ -97,7 +92,7 @@ export const GlobalSelectBottomSheet = () => {
     }, [currentSelect, hideSelectRef]);
     return (_jsx(BottomSheet, { ref: bottomSheetRef, snapPoints: null, backdropPressBehavior: 'close', onClose: handleClose, maxDynamicContentSize: 'fullWithOffset', enableDynamicSizing: true, enablePanDownToClose: true, children: _jsx(BottomSheetView, { style: styles.bottomSheetView, children: currentSelect && (_jsxs(_Fragment, { children: [currentSelect.label && (_jsx(BottomSheetHeader, { title: currentSelect.label, appearance: 'compact' })), _jsx(Box, { lx: { gap: 's4' }, children: currentSelect.items.map((item, index) => {
                             if (item.type === 'separator') {
-                                return (_jsx(Box, { style: styles.separator }, `separator-${index}`));
+                                return (_jsx(Divider, { lx: { marginVertical: 's4', marginHorizontal: 's8' } }, `separator-${index}`));
                             }
                             if (item.type === 'group-label') {
                                 return (_jsx(Text, { style: styles.groupLabel, children: item.label }, `label-${index}`));

package/dist/src/lib/Components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2EtD,CAAC;AAmFF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgC/B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuBxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkB1D,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2EtD,CAAC;AAmFF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgC/B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuBxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAI1D,CAAC"}

package/dist/src/lib/Components/Select/Select.js

@@ -297,15 +297,9 @@ export const SelectItemText = ({ children, lx, style, ...props }) => {
     return (_jsx(Text, { lx: lx, style: [styles.text, style], ...props, children: children }));
 };
 SelectItemText.displayName = 'SelectItemText';
-export const SelectSeparator = ({ lx, style, ...props }) => {
-    const styles = useStyleSheet((t) => ({
-        separator: {
-            marginHorizontal: t.spacings.s8,
-            marginVertical: t.spacings.s4,
-            height: t.sizes.s1,
-            backgroundColor: t.colors.border.mutedSubtle,
-        },
-    }), []);
-    return _jsx(Box, { lx: lx, style: [styles.separator, style], ...props });
+export const SelectSeparator = () => {
+    // This component doesn't render anything - it's used for structure
+    // The actual separators are rendered in GlobalSelectBottomSheet
+    return null;
 };
 SelectSeparator.displayName = 'SelectSeparator';

package/dist/src/lib/Components/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/types.ts"],"names":[],"mappings":"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"}

package/dist/src/lib/Components/Spot/types.d.ts

@@ -28,7 +28,7 @@ type StatusSpotProps = {
      */
     appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
 };
-type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
+export type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
 export type SpotSize = 48 | 56 | 72;
 export type SpotProps = {
     /**

package/dist/src/lib/Components/Spot/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AAEF,KAAK,sBAAsB,GAAG,aAAa,GAAG,eAAe,GAAG,eAAe,CAAC;AAChF,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,sBAAsB,GACxB,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAC9B,aAAa,GACb,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,sBAAsB,GACxB,eAAe,CAAC"}

package/dist/src/lib/Components/Tile/Tile.d.ts

@@ -1,37 +1,102 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { View } from 'react-native';
+import { TileContentProps, TileDescriptionProps, TileSpotProps, TileTitleProps } from './types';
 /**
- * A tile list item component that displays a spot icon at the top, title and optional description,
- * and optional trailing content at the bottom. It functions as a pressable component with active states,
- * and supports long press actions.
+ * 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/components-Tile-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-implementation--docs#dos-and-donts Guidelines}
+ * @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}
  *
  * @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.
  *
  * @example
- * // Basic tile item
- * import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
+ * // Basic tile with spot and content
+ * import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <Tile
- *   title="Ethereum"
- *   description="ETH"
- *   leadingContent={<Spot appearance="coin" icon={Wallet} />}
- *   onPress={() => console.log('Pressed!')}
- *   onLongPress={() => console.log('Long pressed!')}
- * />
+ * <Tile appearance="card" onPress={() => console.log('Pressed!')}>
+ *   <TileSpot appearance="icon" icon={Wallet} />
+ *   <TileContent>
+ *     <TileTitle>My Wallet</TileTitle>
+ *     <TileDescription>Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ *
+ * @example
+ * // With custom content and long press
+ * import { Tile, TileSpot, TileContent, TileTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+ * import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Tile appearance="card" onLongPress={() => console.log('Long pressed')}>
+ *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <TileContent>
+ *     <TileTitle>Bitcoin</TileTitle>
+ *   </TileContent>
+ *   <Tag label="Active" />
+ * </Tile>
  */
 export declare const Tile: React.ForwardRefExoticComponent<{
-    leadingContent: React.ReactNode;
-    title: string;
-    description?: string;
-    trailingContent?: React.ReactNode;
     appearance?: "no-background" | "card";
     disabled?: boolean;
     onPress?: import("../../../styles").StyledPressableProps["onPress"];
     onLongPress?: import("../../../styles").StyledPressableProps["onLongPress"];
+    children: ReactNode;
 } & Omit<import("../../../styles").StyledPressableProps, "disabled" | "onPress" | "onLongPress"> & React.RefAttributes<View>>;
+/**
+ * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
+ * Always renders at a fixed size of 48.
+ *
+ * @example
+ * <Tile>
+ *   <TileSpot appearance="icon" icon={Settings} />
+ * </Tile>
+ */
+export declare const TileSpot: {
+    (props: TileSpotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * A container for grouping TileTitle and TileDescription with consistent spacing.
+ * Use this to wrap text content within a Tile.
+ *
+ * @example
+ * <Tile>
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>My Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ */
+export declare const TileContent: {
+    ({ children, lx, style }: TileContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The primary text label for a Tile. Automatically inherits the disabled state from the parent Tile.
+ * Text will truncate with ellipsis if it exceeds the available width.
+ * If children is a string, it will be automatically wrapped in a Text component.
+ */
+export declare const TileTitle: {
+    ({ children, lx, style }: TileTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The secondary text label for a Tile. Automatically inherits the disabled state from the parent Tile.
+ * Text will truncate with ellipsis if it exceeds the available width.
+ * If children is a string, it will be automatically wrapped in a Text component.
+ *
+ * @example
+ * <Tile>
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>My Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ */
+export declare const TileDescription: {
+    ({ children, lx, style, }: TileDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=Tile.d.ts.map

package/dist/src/lib/Components/Tile/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAc,IAAI,EAAQ,MAAM,cAAc,CAAC;AAgItD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,IAAI;;;;;;;;;6HAuChB,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAEpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAoDjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,IAAI;;;;;;6HAoChB,CAAC;AAkBF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAgBF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;8BAA6B,gBAAgB;;CAWpE,CAAC;AAwBF;;;;GAIG;AACH,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CA6BhE,CAAC;AAwBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe;+BAIzB,oBAAoB;;CA6BtB,CAAC"}

package/dist/src/lib/Components/Tile/Tile.figma.js

@@ -1,27 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import figma from '@figma/code-connect';
 import { Settings } from '../../Symbols';
-import { Spot } from '../Spot';
-import { Tile } from './Tile';
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 figma.connect(Tile, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328', {
-    imports: ["import { Tile } from '@ledgerhq/lumen-ui-react'"],
+    imports: [
+        "import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative'",
+    ],
     props: {
         title: figma.string('title'),
         description: figma.boolean('show-description', {
             true: figma.string('description'),
             false: undefined,
         }),
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        trailingContent: figma.boolean('show-tag', {
-            true: figma.instance('tag'),
-            false: undefined,
-        }),
+        showTag: figma.boolean('show-tag'),
+        tag: figma.instance('tag'),
         disabled: figma.enum('state', {
             disabled: true,
         }),
@@ -32,7 +24,5 @@ figma.connect(Tile, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id
             url: 'https://ldls.vercel.app/?path=/docs/components-Tile-overview--docs',
         },
     ],
-    example: (props) => (_jsx(Tile, { title: props.title, description: props.description, leadingContent: props.leadingContent, trailingContent: props.trailingContent, disabled: props.disabled, onPress: () => {
-            console.log('Tile pressed');
-        } })),
+    example: (props) => (_jsxs(Tile, { disabled: props.disabled, onPress: () => console.log('Tile pressed'), onLongPress: () => console.log('Long press - secondary action'), children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: props.title }), props.description && (_jsx(TileDescription, { children: props.description }))] }), props.showTag && props.tag] })),
 });

package/dist/src/lib/Components/Tile/Tile.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSafeContext, isTextChildren, } from '@ledgerhq/lumen-utils-shared';
 import { forwardRef } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { Pressable } from '../Utility';
-const useStyles = ({ appearance, disabled, pressed, }) => {
+import { Spot } from '../Spot';
+import { Box, Pressable, Text } from '../Utility';
+const [TileProvider, useTileContext] = createSafeContext('Tile');
+const useRootStyles = ({ appearance, disabled, pressed, }) => {
     return useStyleSheet((t) => {
         const bgColors = {
             'no-background': t.colors.bg.baseTransparent,
@@ -21,7 +24,8 @@ const useStyles = ({ appearance, disabled, pressed, }) => {
                     width: '100%',
                     alignItems: 'center',
                     gap: t.spacings.s8,
-                    padding: t.spacings.s8,
+                    paddingHorizontal: t.spacings.s8,
+                    paddingVertical: t.spacings.s12,
                     borderRadius: t.borderRadius.sm,
                     backgroundColor: bgColors[appearance],
                 },
@@ -30,72 +34,169 @@ const useStyles = ({ appearance, disabled, pressed, }) => {
                     backgroundColor: pressedBgColors[appearance],
                 },
             ]),
-            contentWrapper: {
-                width: t.sizes.full,
-                alignItems: 'center',
-                gap: t.spacings.s8,
-            },
-            leadingWrapper: {
-                alignItems: 'center',
-                justifyContent: 'center',
-            },
-            textWrapper: {
-                width: t.sizes.full,
-                alignItems: 'center',
-                gap: t.spacings.s4,
-            },
-            titleWrapper: {
-                width: t.sizes.full,
-                alignItems: 'center',
-            },
-            title: StyleSheet.flatten([
-                t.typographies.body3SemiBold,
-                {
-                    width: t.sizes.full,
-                    textAlign: 'center',
-                    color: disabled ? t.colors.text.disabled : t.colors.text.base,
-                },
-            ]),
-            description: StyleSheet.flatten([
-                t.typographies.body3,
-                {
-                    width: t.sizes.full,
-                    textAlign: 'center',
-                    color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-                },
-            ]),
         };
     }, [appearance, disabled, pressed]);
 };
-const TileContent = ({ appearance, disabled, pressed, leadingContent, title, description, trailingContent, }) => {
-    const styles = useStyles({ appearance, disabled, pressed });
-    return (_jsx(View, { style: styles.container, children: _jsxs(View, { style: styles.contentWrapper, children: [_jsx(View, { style: styles.leadingWrapper, children: leadingContent }), _jsxs(View, { style: styles.textWrapper, children: [_jsxs(View, { style: styles.titleWrapper, children: [_jsx(Text, { numberOfLines: 1, style: styles.title, children: title }), description && (_jsx(Text, { numberOfLines: 1, style: styles.description, children: description }))] }), trailingContent] })] }) }));
-};
 /**
- * A tile list item component that displays a spot icon at the top, title and optional description,
- * and optional trailing content at the bottom. It functions as a pressable component with active states,
- * and supports long press actions.
+ * 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/components-Tile-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-implementation--docs#dos-and-donts Guidelines}
+ * @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}
  *
  * @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.
  *
  * @example
- * // Basic tile item
- * import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
+ * // Basic tile with spot and content
+ * import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <Tile
- *   title="Ethereum"
- *   description="ETH"
- *   leadingContent={<Spot appearance="coin" icon={Wallet} />}
- *   onPress={() => console.log('Pressed!')}
- *   onLongPress={() => console.log('Long pressed!')}
- * />
+ * <Tile appearance="card" onPress={() => console.log('Pressed!')}>
+ *   <TileSpot appearance="icon" icon={Wallet} />
+ *   <TileContent>
+ *     <TileTitle>My Wallet</TileTitle>
+ *     <TileDescription>Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ *
+ * @example
+ * // With custom content and long press
+ * import { Tile, TileSpot, TileContent, TileTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+ * import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Tile appearance="card" onLongPress={() => console.log('Long pressed')}>
+ *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <TileContent>
+ *     <TileTitle>Bitcoin</TileTitle>
+ *   </TileContent>
+ *   <Tag label="Active" />
+ * </Tile>
  */
-export const Tile = forwardRef(({ lx = {}, style, title, description, leadingContent, trailingContent, appearance = 'no-background', disabled = false, ...props }, ref) => {
-    return (_jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(TileContent, { appearance: appearance, disabled: disabled, pressed: pressed, leadingContent: leadingContent, title: title, description: description, trailingContent: trailingContent })) }));
+export const Tile = forwardRef(({ lx = {}, style, appearance = 'no-background', disabled = false, children, ...props }, ref) => {
+    return (_jsx(TileProvider, { value: { disabled }, children: _jsx(Pressable, { ref: ref, lx: lx, style: StyleSheet.flatten([{ width: '100%' }, style]), disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(TilePressableContent, { appearance: appearance, disabled: disabled, pressed: pressed, children: children })) }) }));
 });
 Tile.displayName = 'Tile';
+const TilePressableContent = ({ appearance, disabled, pressed, children, }) => {
+    const styles = useRootStyles({ appearance, disabled, pressed });
+    return _jsx(View, { style: styles.container, children: children });
+};
+/**
+ * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
+ * Always renders at a fixed size of 48.
+ *
+ * @example
+ * <Tile>
+ *   <TileSpot appearance="icon" icon={Settings} />
+ * </Tile>
+ */
+export const TileSpot = (props) => {
+    const { disabled } = useTileContext({
+        consumerName: 'TileSpot',
+        contextRequired: true,
+    });
+    return _jsx(Spot, { ...props, size: 48, disabled: disabled });
+};
+const useContentStyles = () => {
+    return useStyleSheet((t) => ({
+        container: {
+            width: t.sizes.full,
+            alignItems: 'center',
+            gap: t.spacings.s4,
+        },
+    }), []);
+};
+TileSpot.displayName = 'TileSpot';
+/**
+ * A container for grouping TileTitle and TileDescription with consistent spacing.
+ * Use this to wrap text content within a Tile.
+ *
+ * @example
+ * <Tile>
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>My Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ */
+export const TileContent = ({ children, lx, style }) => {
+    const styles = useContentStyles();
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([styles.container, style]), testID: 'tile-content', children: children }));
+};
+TileContent.displayName = 'TileContent';
+const useTitleStyles = ({ disabled }) => {
+    return useStyleSheet((t) => ({
+        container: {
+            width: t.sizes.full,
+            alignItems: 'center',
+        },
+        text: StyleSheet.flatten([
+            t.typographies.body3SemiBold,
+            {
+                alignItems: 'center',
+                width: t.sizes.full,
+                textAlign: 'center',
+                color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            },
+        ]),
+    }), [disabled]);
+};
+/**
+ * The primary text label for a Tile. Automatically inherits the disabled state from the parent Tile.
+ * Text will truncate with ellipsis if it exceeds the available width.
+ * If children is a string, it will be automatically wrapped in a Text component.
+ */
+export const TileTitle = ({ children, lx, style }) => {
+    const { disabled } = useTileContext({
+        consumerName: 'TileTitle',
+        contextRequired: true,
+    });
+    const styles = useTitleStyles({ disabled });
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { testID: 'tile-title', numberOfLines: 1, lx: lx, style: StyleSheet.flatten([styles.text, style]), children: children }));
+    }
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([styles.container, style]), testID: 'tile-title', children: children }));
+};
+TileTitle.displayName = 'TileTitle';
+const useDescriptionStyles = ({ disabled }) => {
+    return useStyleSheet((t) => ({
+        container: {
+            width: t.sizes.full,
+            alignItems: 'center',
+        },
+        text: StyleSheet.flatten([
+            t.typographies.body3,
+            {
+                width: t.sizes.full,
+                alignItems: 'center',
+                textAlign: 'center',
+                color: disabled ? t.colors.text.disabled : t.colors.text.muted,
+            },
+        ]),
+    }), [disabled]);
+};
+/**
+ * The secondary text label for a Tile. Automatically inherits the disabled state from the parent Tile.
+ * Text will truncate with ellipsis if it exceeds the available width.
+ * If children is a string, it will be automatically wrapped in a Text component.
+ *
+ * @example
+ * <Tile>
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>My Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ */
+export const TileDescription = ({ children, lx, style, }) => {
+    const { disabled } = useTileContext({
+        consumerName: 'TileDescription',
+        contextRequired: true,
+    });
+    const styles = useDescriptionStyles({ disabled });
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { lx: lx, numberOfLines: 1, style: StyleSheet.flatten([styles.text, style]), testID: 'tile-description', children: children }));
+    }
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([styles.container, style]), testID: 'tile-description', children: children }));
+};
+TileDescription.displayName = 'TileDescription';

package/dist/src/lib/Components/Tile/Tile.stories.d.ts

@@ -4,9 +4,9 @@ declare const meta: Meta<typeof Tile>;
 export default meta;
 type Story = StoryObj<typeof Tile>;
 export declare const Base: Story;
-export declare const WithTrailingContent: Story;
+export declare const VariantsShowcase: Story;
 export declare const WithSecondaryAction: Story;
-export declare const LeadingContentVariantsShowcase: Story;
 export declare const HorizontalList: Story;
 export declare const ResponsiveLayout: Story;
+export declare const AppearanceShowcase: Story;
 //# sourceMappingURL=Tile.stories.d.ts.map