@ledgerhq/lumen-ui-rnative 0.0.47 → 0.0.49

package/dist/package.json

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

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

@@ -0,0 +1,25 @@
+import { View } from 'react-native';
+/**
+ * A simple divider component for separating content sections.
+ *
+ * The Divider renders a horizontal or vertical line to create visual separation
+ * between content areas. It uses design system tokens for consistent styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/layout-divider--docs Storybook}
+ *
+ * @example
+ * // Horizontal divider (default)
+ * <Divider />
+ *
+ * @example
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * @example
+ * // With custom styling using lx props
+ * <Divider lx={{ marginVertical: 's16' }} />
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<{
+    orientation?: "horizontal" | "vertical";
+} & Omit<import("../../../styles").StyledViewProps, "children"> & import("react").RefAttributes<View>>;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO;;sGAwBnB,CAAC"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Box } from '../Utility';
+/**
+ * A simple divider component for separating content sections.
+ *
+ * The Divider renders a horizontal or vertical line to create visual separation
+ * between content areas. It uses design system tokens for consistent styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/layout-divider--docs Storybook}
+ *
+ * @example
+ * // Horizontal divider (default)
+ * <Divider />
+ *
+ * @example
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * @example
+ * // With custom styling using lx props
+ * <Divider lx={{ marginVertical: 's16' }} />
+ */
+export const Divider = forwardRef(({ lx = {}, orientation = 'horizontal', ...props }, ref) => {
+    return (_jsx(Box, { ref: ref, accessibilityRole: 'none', lx: {
+            ...(orientation === 'horizontal'
+                ? {
+                    alignSelf: 'stretch',
+                    borderTopWidth: 's1',
+                    borderTopColor: 'mutedSubtle',
+                }
+                : {
+                    alignSelf: 'stretch',
+                    borderLeftWidth: 's1',
+                    borderLeftColor: 'mutedSubtle',
+                }),
+            ...lx,
+        }, ...props }));
+});
+Divider.displayName = 'Divider';

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Divider } from './Divider';
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type Story = StoryObj<typeof Divider>;
+export declare const Base: Story;
+export declare const OrientationShowcase: Story;
+export declare const InList: Story;
+//# sourceMappingURL=Divider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Divider/Divider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAM9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAwBlB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KA6DpB,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
+import { Divider } from './Divider';
+const meta = {
+    component: Divider,
+    title: 'Layout/Divider',
+    parameters: {
+        actions: { disable: true },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        orientation: 'horizontal',
+    },
+    render: (args) => {
+        const isVertical = args.orientation === 'vertical';
+        return (_jsxs(Box, { lx: isVertical
+                ? { flexDirection: 'row', alignItems: 'center', gap: 's16' }
+                : { width: 'full', gap: 's16' }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: isVertical ? 'Left content' : 'Content above' }), _jsx(Divider, { ...args, lx: isVertical ? { height: 's48' } : undefined }), _jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: isVertical ? 'Right content' : 'Content below' })] }));
+    },
+};
+export const OrientationShowcase = {
+    render: () => (_jsxs(Box, { lx: { gap: 's32' }, children: [_jsxs(Box, { lx: { gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Horizontal (default)" }), _jsxs(Box, { lx: { width: 'full', gap: 's16' }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Content above" }), _jsx(Divider, { orientation: 'horizontal' }), _jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Content below" })] })] }), _jsxs(Box, { lx: { gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Vertical" }), _jsxs(Box, { lx: { flexDirection: 'row', alignItems: 'center', gap: 's16' }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Left content" }), _jsx(Divider, { orientation: 'vertical', lx: { height: 's48' } }), _jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Right content" })] })] })] })),
+};
+export const InList = {
+    render: () => (_jsxs(Box, { lx: {
+            width: 'full',
+            maxWidth: 's400',
+            backgroundColor: 'canvas',
+            borderRadius: 'lg',
+            borderWidth: 's1',
+            borderColor: 'muted',
+        }, children: [_jsxs(Box, { lx: {
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: 's16',
+                }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Item 1" }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "$100" })] }), _jsx(Divider, {}), _jsxs(Box, { lx: {
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: 's16',
+                }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Item 2" }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "$200" })] }), _jsx(Divider, {}), _jsxs(Box, { lx: {
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: 's16',
+                }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Item 3" }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "$300" })] })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1 @@
+export { Divider } from './Divider';

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

@@ -0,0 +1,9 @@
+import { BoxProps } from '../Utility';
+export type DividerProps = {
+    /**
+     * The orientation of the divider
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+} & Omit<BoxProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Divider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EAIL,iBAAiB,EAGjB,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAkCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,QAAQ;;;;8GAqBnB,CAAC;AAsBH;;;GAGG;AACH,eAAO,MAAM,eAAe;;4FA0B3B,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,eAAe;;4FAyB3B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;;4FAiEzB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;4FAkE9B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;4FA0B5B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAOpD,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;qDAMtB,iBAAiB;;CAqBnB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;mHA8C5B,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EAIL,iBAAiB,EAGjB,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAkCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,QAAQ;;;;8GAqBnB,CAAC;AAsBH;;;GAGG;AACH,eAAO,MAAM,eAAe;;4FA0B3B,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,eAAe;;4FA8B3B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;;4FAiEzB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;4FAkE9B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;4FA0B5B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAOpD,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;qDAMtB,iBAAiB;;CAuBnB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;mHA8C5B,CAAC"}

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

@@ -96,14 +96,18 @@ ListItemLeading.displayName = 'ListItemLeading';
  * Container for the text content (title and description) within the leading area.
  */
 export const ListItemContent = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { isInTrailing } = useListItemTrailingContext({
+        consumerName: 'ListItemContent',
+        contextRequired: false,
+    });
     const styles = useStyleSheet((t) => ({
         content: {
-            flex: 1,
+            flex: isInTrailing ? 0 : 1,
             minWidth: 0,
             flexDirection: 'column',
             gap: t.spacings.s4,
         },
-    }), []);
+    }), [isInTrailing]);
     return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.content, style]), ...viewProps, children: children }));
 });
 ListItemContent.displayName = 'ListItemContent';
@@ -232,7 +236,9 @@ export const ListItemIcon = ({ icon: Icon, color, lx = {}, style, ...viewProps }
         contextRequired: true,
     });
     return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([{ flexShrink: 0 }, style]), ...viewProps, children: _jsx(Icon, { size: 24, style: {
-                color: disabled ? theme.colors.text.disabled : (color ?? undefined),
+                color: disabled
+                    ? theme.colors.text.disabled
+                    : (color ?? theme.colors.text.base),
             } }) }));
 };
 ListItemIcon.displayName = 'ListItemIcon';

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/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] })),
 });