@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.48

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,13 +27,17 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.12",
+    "@ledgerhq/lumen-utils-shared": "0.0.13",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0",
+    "@ledgerhq/lumen-design-core": "0.0.37",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0"
   },
   "nx": {

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/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmC9C,eAAO,MAAM,IAAI;;;;;;uBAHsB,8DAGxB;+HAoBd,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiC9C,eAAO,MAAM,IAAI;;;;;;uBACM,8DAAoC;+HAmB1D,CAAC"}

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

@@ -13,8 +13,7 @@ const iconSizeMap = {
 };
 const useStyles = (lx, size, color) => {
     const { theme } = useTheme();
-    const resolvedStyle = useResolveTextStyle(lx || {});
-    const resolvedColor = useResolveTextStyle({ color });
+    const resolvedStyle = useResolveTextStyle({ ...(lx || {}), color });
     return useMemo(() => {
         return {
             container: {
@@ -23,9 +22,9 @@ const useStyles = (lx, size, color) => {
                 height: theme.icon.height[iconSizeMap[size]],
                 strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
             },
-            color: resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+            color: resolvedStyle.color || theme.colors.text.base,
         };
-    }, [size, theme, resolvedStyle, resolvedColor.color]);
+    }, [size, theme, resolvedStyle]);
 };
 export const Icon = forwardRef(({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
     const styles = useStyles(lx, size, color);

package/dist/src/lib/Components/Icon/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,4FAetC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,4FAetC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/lib/Components/Icon/createIcon.js

@@ -1,5 +1,5 @@
+import { toPascalCase } from '@ledgerhq/lumen-utils-shared';
 import React, { forwardRef } from 'react';
-import { toPascalCase } from '../../utils';
 import { Icon } from './Icon';
 /**
  * Create an Icon component for React Native

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
+import { ListItemIconProps, ListItemSpotProps } from './types';
 /**
- * A flexible list item component that displays a required title and optional description (with possible tag), leading and trailing content.
- * It functions as a clickable button with hover and active states.
+ * A flexible list item component that provides a composable structure for displaying
+ * interactive list items with leading content, title, description, and trailing content.
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
@@ -11,40 +12,93 @@ import { View } from 'react-native';
  * Do not use it to modify the list item's core appearance (colors, padding, etc).
  *
  * @example
- * // Basic item
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
+ * import {
+ *   ListItem,
+ *   ListItemLeading,
+ *   ListItemSpot,
+ *   ListItemContent,
+ *   ListItemTitle,
+ *   ListItemDescription,
+ *   ListItemTrailing,
+ * } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <ListItem
- *   title="Basic Item"
- *   description="Optional description"
- *   onPress={() => console.log('Clicked!')}
- * />
- *
- * // Icon trailing content with leading Spot
- * import { ListItem, Spot } from '@ledgerhq/lumen-ui-rnative';
- * import { Wallet, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Balance"
- *   leadingContent={<Spot appearance="icon" icon={Wallet} />}
- *   trailingContent={<Settings />}
- * />
- *
- * // Chevron trailing content
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
- * import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Settings"
- *   trailingContent={<ChevronRight size={24} />}
- * />
+ * <ListItem onPress={() => console.log('Clicked!')}>
+ *   <ListItemLeading>
+ *     <ListItemSpot appearance="icon" icon={Wallet} />
+ *     <ListItemContent>
+ *       <ListItemTitle>Balance</ListItemTitle>
+ *       <ListItemDescription>Optional description</ListItemDescription>
+ *     </ListItemContent>
+ *   </ListItemLeading>
+ *   <ListItemTrailing>
+ *     <ChevronRight size={24} />
+ *   </ListItemTrailing>
+ * </ListItem>
  */
 export declare const ListItem: React.ForwardRefExoticComponent<{
-    title: string;
-    description?: string;
-    leadingContent?: React.ReactNode;
-    descriptionTag?: React.ReactNode;
-    trailingContent?: React.ReactNode;
+    children: React.ReactNode;
     disabled?: boolean;
-} & Omit<import("../../../styles").StyledPressableProps, "disabled"> & React.RefAttributes<View>>;
+    onPress?: import("../../../styles").StyledPressableProps["onPress"];
+} & Omit<import("../../../styles").StyledPressableProps, "children" | "disabled"> & React.RefAttributes<View>>;
+/**
+ * Container for the leading (left) part of the list item.
+ * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ */
+export declare const ListItemLeading: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Container for the text content (title and description) within the leading area.
+ */
+export declare const ListItemContent: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * The main title of the list item. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ */
+export declare const ListItemTitle: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledTextProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Optional description below the title. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ * Automatically applies disabled styling when the parent ListItem is disabled.
+ */
+export declare const ListItemDescription: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledTextProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Container for the trailing (right) content of the list item.
+ * Used for icons, switches, values, tags, chevrons, etc.
+ */
+export declare const ListItemTrailing: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 48 for consistent list item appearance.
+ */
+export declare const ListItemSpot: {
+    (props: ListItemSpotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Icon adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 24 for consistent list item appearance.
+ */
+export declare const ListItemIcon: {
+    ({ icon: Icon, color, lx, style, ...viewProps }: ListItemIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Text wrapper that truncates when space is limited.
+ * Use inside ListItemTitle or ListItemDescription when combining text with a Tag.
+ * Set variant='title' for title styling or variant='description' (default) for description styling.
+ */
+export declare const ListItemTruncate: React.ForwardRefExoticComponent<{
+    children: string;
+    variant?: "title" | "description";
+} & Omit<import("../../../styles").StyledTextProps, "children"> & React.RefAttributes<import("react-native").Text>>;
 //# sourceMappingURL=ListItem.d.ts.map

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAsFtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;;;;;;;iGA0CpB,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"}