@ledgerhq/lumen-ui-rnative 0.0.47 → 0.0.49

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAavE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAuBlB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAmC5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAwC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC"}
+{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EACL,IAAI,EAKL,MAAM,QAAQ,CAAC;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAkB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAyBlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA+BjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA4C5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA+ChC,CAAC"}

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

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Settings, Plus, User, Wallet, Cart, Apps, Chart1, } from '../../Symbols';
-import { Spot } from '../Spot/Spot';
+import { Settings, Plus, User, Apps } from '../../Symbols';
 import { Tag } from '../Tag/Tag';
-import { Box } from '../Utility';
-import { Tile } from './Tile';
+import { Box, Text } from '../Utility';
+import { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 const meta = {
     component: Tile,
+    subcomponents: {
+        TileSpot,
+        TileContent,
+        TileTitle,
+        TileDescription,
+    },
     title: 'Containment/Tile',
     parameters: {
         docs: {
@@ -16,117 +21,67 @@ const meta = {
             },
         },
     },
-    argTypes: {
-        leadingContent: {
-            control: 'select',
-            options: ['None', 'Settings', 'Plus'],
-            mapping: {
-                None: undefined,
-                Settings: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-                Plus: _jsx(Spot, { appearance: 'icon', icon: Plus }),
-            },
-        },
-        trailingContent: {
-            control: 'select',
-            options: ['None', 'Tag', 'Text'],
-            mapping: {
-                None: undefined,
-                Tag: _jsx(Tag, { label: 'Tag', appearance: 'base' }),
-                Text: _jsx("span", { children: "Text" }),
-            },
-        },
-    },
 };
 export default meta;
 export const Base = {
-    args: {
-        title: 'Item with Spot and Description',
-        description: 'Additional information',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        lx: { maxWidth: 's256' },
-    },
+    render: () => (_jsxs(Tile, { lx: { maxWidth: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Item with Spot and Description" }), _jsx(TileDescription, { children: "Additional information" })] })] })),
     parameters: {
         docs: {
             source: {
                 code: `
-<Tile
-  title="Item with Spot and Description"
-  description="Additional information"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  onLongPress={() => console.log('Secondary action')}
-  onPress={() => console.log('Primary action')}
-  lx={{ maxWidth: 's256' }}
-/>
+<Tile lx={{ maxWidth: 's112' }}>
+  <TileSpot appearance="icon" icon={Settings} />
+  <TileContent>
+    <TileTitle>Item with Spot and Description</TileTitle>
+    <TileDescription>Additional information</TileDescription>
+  </TileContent>
+</Tile>
 `,
             },
         },
     },
 };
-export const WithTrailingContent = {
-    args: {
-        title: 'Item with Trailing Content',
-        description: 'Additional information',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        trailingContent: _jsx(Tag, { label: 'New', appearance: 'base' }),
-        lx: { maxWidth: 's256' },
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `
-<Tile
-  title="Item with Trailing Content"
-  description="Additional information"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  trailingContent={<Tag label="New" appearance="base" />}
-  onLongPress={() => console.log('Long press - secondary action')}
-  lx={{ maxWidth: 's256' }}
-/>
-`,
-            },
-        },
-    },
+export const VariantsShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: User }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "User" }), _jsx(TileDescription, { children: "With description" })] })] }), _jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Plus }), _jsx(TileContent, { children: _jsx(TileTitle, { children: "Without Description" }) })] }), _jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "With Trailing Content" }), _jsx(TileDescription, { children: "Additional information" })] }), _jsx(Tag, { label: 'Custom', appearance: 'base' })] }), _jsxs(Tile, { lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "With Trailing Content" }), _jsx(TileDescription, { children: "Additional information" })] }), _jsx(Text, { typography: 'body2SemiBold', lx: { color: 'success' }, children: "+7.87%" })] })] })),
 };
 export const WithSecondaryAction = {
-    args: {
-        title: 'Item with secondary action',
-        description: 'LongPress to trigger secondary action',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        onLongPress: () => alert('Long press - secondary action'),
-        lx: { maxWidth: 's256' },
-    },
+    render: () => (_jsxs(Tile, { onLongPress: () => alert('Long press - secondary action triggered!'), lx: { maxWidth: 's176' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Long Press Me" }), _jsx(TileDescription, { children: "Try long pressing this tile" })] })] })),
     parameters: {
         docs: {
             source: {
                 code: `
 <Tile
-  title="Item secondary action"
-  description="Additional information"
-  onLongPress={() => // do stuff}
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  lx={{ maxWidth: 's256' }}
-/>
+  onLongPress={() => alert('Long press - secondary action triggered!')}
+  lx={{ maxWidth: 's160' }}
+>
+  <TileSpot appearance="icon" icon={Settings} />
+  <TileContent>
+    <TileTitle>Long Press Me</TileTitle>
+    <TileDescription>Try long pressing this tile</TileDescription>
+  </TileContent>
+</Tile>
 `,
             },
         },
     },
 };
-export const LeadingContentVariantsShowcase = {
-    render: () => (_jsxs(Box, { lx: { flexDirection: 'row' }, children: [_jsx(Tile, { title: 'User', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Wallet', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Wallet }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Cart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Apps', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Chart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }), lx: { maxWidth: 's128' } })] })),
-};
 export const HorizontalList = {
     render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { lx: {
                     position: 'relative',
                     flexDirection: 'row',
                     width: 's480',
                     backgroundColor: 'base',
-                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx(Tile, { title: `Item ${i + 1}`, description: `Description ${i + 1}`, leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }, `list-1-${i}`))) }), _jsx(Box, { lx: {
+                }, children: Array.from({ length: 3 }).map((_, i) => (_jsxs(Tile, { children: [_jsx(TileSpot, { appearance: 'icon', icon: Apps }), _jsxs(TileContent, { children: [_jsxs(TileTitle, { children: ["Item ", i + 1] }), _jsxs(TileDescription, { children: ["Description ", i + 1] })] })] }, `list-1-${i}`))) }), _jsx(Box, { lx: {
                     flexDirection: 'row',
                     width: 's480',
                     position: 'relative',
                     backgroundColor: 'base',
-                }, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Tile, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { width: 's176', flexShrink: 0 } }, `list-2-${i}`))) })] })),
+                    overflow: 'scroll',
+                }, children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Tile, { lx: { width: 's128', flexShrink: 0 }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Apps }), _jsxs(TileContent, { children: [_jsxs(TileTitle, { children: ["Item ", i + 1] }), _jsx(TileDescription, { children: "Long description that should truncate appropriately" })] })] }, `list-2-${i}`))) })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs(Box, { lx: { width: 'full', flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { children: _jsx(Tile, { title: 'Item fill width', description: 'Description fill width', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }) }), _jsx(Box, { lx: { alignItems: 'center', justifyContent: 'center' }, children: _jsx(Tile, { lx: { width: 's224' }, title: 'Long Item with fixed width', description: 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }) }) })] })),
+    render: () => (_jsxs(Box, { lx: { width: 'full', flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { children: _jsxs(Tile, { children: [_jsx(TileSpot, { appearance: 'icon', icon: Apps }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Item fill width" }), _jsx(TileDescription, { children: "Description fill width" })] })] }) }), _jsx(Box, { lx: { alignItems: 'center', justifyContent: 'center' }, children: _jsxs(Tile, { lx: { width: 's224' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Plus }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Long Item with fixed width" }), _jsx(TileDescription, { children: "lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." })] })] }) })] })),
+};
+export const AppearanceShowcase = {
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's24' }, children: [_jsxs(Box, { children: [_jsx(Box, { lx: { marginBottom: 's8' }, children: _jsx(Text, { typography: 'body2SemiBold', children: "No Background" }) }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's16' }, children: [_jsxs(Tile, { appearance: 'no-background', lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Press me" }), _jsx(TileDescription, { children: "Press state" })] })] }), _jsxs(Tile, { appearance: 'no-background', disabled: true, lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: Settings }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Disabled" }), _jsx(TileDescription, { children: "Disabled state" })] })] })] })] }), _jsxs(Box, { children: [_jsx(Box, { lx: { marginBottom: 's8' }, children: _jsx(Text, { typography: 'body2SemiBold', children: "Card" }) }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's16' }, children: [_jsxs(Tile, { appearance: 'card', lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: User }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Press me" }), _jsx(TileDescription, { children: "Press state" })] })] }), _jsxs(Tile, { appearance: 'card', disabled: true, lx: { width: 's112' }, children: [_jsx(TileSpot, { appearance: 'icon', icon: User }), _jsxs(TileContent, { children: [_jsx(TileTitle, { children: "Disabled" }), _jsx(TileDescription, { children: "Disabled state" })] })] })] })] })] })),
 };

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

@@ -1,3 +1,3 @@
-export * from './Tile';
+export { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,SAAS,EACT,eAAe,GAChB,MAAM,QAAQ,CAAC;AAChB,cAAc,SAAS,CAAC"}

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

@@ -1,2 +1,2 @@
-export * from './Tile';
+export { Tile, TileSpot, TileContent, TileTitle, TileDescription, } from './Tile';
 export * from './types';

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

@@ -1,24 +1,10 @@
 import { ReactNode } from 'react';
-import { StyledPressableProps } from '../../../styles';
+import { StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot/types';
+export type TileContextValue = {
+    disabled: boolean;
+};
 export type TileProps = {
-    /**
-     * Custom content to display at the top (leading area) of the tile.
-     * Accepts ReactNode such as <Spot appearance="icon" icon={Settings} />
-     */
-    leadingContent: ReactNode;
-    /**
-     * The title of the tile.
-     */
-    title: string;
-    /**
-     * The description of the tile.
-     */
-    description?: string;
-    /**
-     * Custom content to display at the bottom (trailing area) of the tile.
-     * Accepts ReactNode such as <Tag label="New" appearance="base" />
-     */
-    trailingContent?: ReactNode;
     /**
      * The visual style of the tile.
      * - `no-background`: Transparent background with pressed state
@@ -41,5 +27,29 @@ export type TileProps = {
      * Can be used to perform secondary actions.
      */
     onLongPress?: StyledPressableProps['onLongPress'];
+    /**
+     * The children to display inside the tile.
+     */
+    children: ReactNode;
 } & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
+export type TileSpotProps = DiscriminatedSpotProps;
+export type TileContentProps = {
+    /**
+     * The children to display inside the tile content area.
+     * Typically contains TileTitle and TileDescription.
+     */
+    children: ReactNode;
+} & StyledViewProps;
+export type TileTitleProps = {
+    /**
+     * The title text to display.
+     */
+    children: ReactNode;
+} & StyledViewProps;
+export type TileDescriptionProps = {
+    /**
+     * The description text to display.
+     */
+    children: ReactNode;
+} & StyledTextProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;CACnD,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAClD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,eAAe,CAAC"}

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

@@ -5,6 +5,7 @@ export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
+export * from './Divider';
 export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

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

@@ -5,6 +5,7 @@ export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
+export * from './Divider';
 export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,13 +27,13 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.13",
+    "@ledgerhq/lumen-utils-shared": "0.0.15",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.37",
+    "@ledgerhq/lumen-design-core": "0.0.39",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
     "react-native-reanimated": "^3.0.0",