@ledgerhq/lumen-ui-rnative 0.1.22 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/dist/module/lib/Components/ListItem/ListItem.js +57 -27
  2. package/dist/module/lib/Components/ListItem/ListItem.js.map +1 -1
  3. package/dist/module/lib/Components/ListItem/ListItem.mdx +15 -7
  4. package/dist/module/lib/Components/ListItem/ListItem.stories.js +497 -283
  5. package/dist/module/lib/Components/ListItem/ListItem.stories.js.map +1 -1
  6. package/dist/module/lib/Components/ListItem/ListItem.test.js +153 -0
  7. package/dist/module/lib/Components/ListItem/ListItem.test.js.map +1 -0
  8. package/dist/module/lib/Components/{TriggerButton/TriggerButton.js → MediaButton/MediaButton.js} +13 -10
  9. package/dist/module/lib/Components/MediaButton/MediaButton.js.map +1 -0
  10. package/{src/lib/Components/TriggerButton/TriggerButton.mdx → dist/module/lib/Components/MediaButton/MediaButton.mdx} +10 -10
  11. package/dist/module/lib/Components/{TriggerButton/TriggerButton.stories.js → MediaButton/MediaButton.stories.js} +18 -18
  12. package/dist/module/lib/Components/MediaButton/MediaButton.stories.js.map +1 -0
  13. package/dist/module/lib/Components/{TriggerButton/TriggerButton.test.js → MediaButton/MediaButton.test.js} +14 -14
  14. package/dist/module/lib/Components/MediaButton/MediaButton.test.js.map +1 -0
  15. package/dist/module/lib/Components/MediaButton/index.js +5 -0
  16. package/dist/module/lib/Components/MediaButton/index.js.map +1 -0
  17. package/dist/module/lib/Components/MediaButton/types.js.map +1 -0
  18. package/dist/module/lib/Components/OptionList/OptionList.figma.js +28 -0
  19. package/dist/module/lib/Components/OptionList/OptionList.figma.js.map +1 -0
  20. package/dist/module/lib/Components/OptionList/OptionList.js +452 -0
  21. package/dist/module/lib/Components/OptionList/OptionList.js.map +1 -0
  22. package/dist/module/lib/Components/OptionList/OptionList.mdx +304 -0
  23. package/dist/module/lib/Components/OptionList/OptionList.stories.js +735 -0
  24. package/dist/module/lib/Components/OptionList/OptionList.stories.js.map +1 -0
  25. package/dist/module/lib/Components/OptionList/OptionList.test.js +443 -0
  26. package/dist/module/lib/Components/OptionList/OptionList.test.js.map +1 -0
  27. package/dist/module/lib/Components/OptionList/index.js +5 -0
  28. package/dist/module/lib/Components/OptionList/index.js.map +1 -0
  29. package/dist/module/lib/Components/OptionList/types.js +4 -0
  30. package/dist/module/lib/Components/OptionList/types.js.map +1 -0
  31. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.js +36 -0
  32. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.js.map +1 -0
  33. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.test.js +84 -0
  34. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.test.js.map +1 -0
  35. package/dist/module/lib/Components/index.js +2 -1
  36. package/dist/module/lib/Components/index.js.map +1 -1
  37. package/dist/typescript/src/lib/Components/ListItem/ListItem.d.ts +8 -8
  38. package/dist/typescript/src/lib/Components/ListItem/ListItem.d.ts.map +1 -1
  39. package/dist/typescript/src/lib/Components/ListItem/types.d.ts +11 -7
  40. package/dist/typescript/src/lib/Components/ListItem/types.d.ts.map +1 -1
  41. package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts +23 -0
  42. package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts.map +1 -0
  43. package/dist/typescript/src/lib/Components/MediaButton/index.d.ts +3 -0
  44. package/dist/typescript/src/lib/Components/MediaButton/index.d.ts.map +1 -0
  45. package/dist/typescript/src/lib/Components/{TriggerButton → MediaButton}/types.d.ts +10 -5
  46. package/dist/typescript/src/lib/Components/MediaButton/types.d.ts.map +1 -0
  47. package/dist/typescript/src/lib/Components/OptionList/OptionList.d.ts +12 -0
  48. package/dist/typescript/src/lib/Components/OptionList/OptionList.d.ts.map +1 -0
  49. package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts +2 -0
  50. package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts.map +1 -0
  51. package/dist/typescript/src/lib/Components/OptionList/index.d.ts +3 -0
  52. package/dist/typescript/src/lib/Components/OptionList/index.d.ts.map +1 -0
  53. package/dist/typescript/src/lib/Components/OptionList/types.d.ts +97 -0
  54. package/dist/typescript/src/lib/Components/OptionList/types.d.ts.map +1 -0
  55. package/dist/typescript/src/lib/Components/OptionList/useOptionList/useOptionListItems.d.ts +12 -0
  56. package/dist/typescript/src/lib/Components/OptionList/useOptionList/useOptionListItems.d.ts.map +1 -0
  57. package/dist/typescript/src/lib/Components/index.d.ts +2 -1
  58. package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
  59. package/dist/typescript/src/styles/types/theme.types.d.ts +7 -6
  60. package/dist/typescript/src/styles/types/theme.types.d.ts.map +1 -1
  61. package/package.json +1 -1
  62. package/src/lib/Components/ListItem/ListItem.mdx +15 -7
  63. package/src/lib/Components/ListItem/ListItem.stories.tsx +354 -220
  64. package/src/lib/Components/ListItem/ListItem.test.tsx +152 -0
  65. package/src/lib/Components/ListItem/ListItem.tsx +63 -28
  66. package/src/lib/Components/ListItem/types.ts +11 -8
  67. package/{dist/module/lib/Components/TriggerButton/TriggerButton.mdx → src/lib/Components/MediaButton/MediaButton.mdx} +10 -10
  68. package/src/lib/Components/{TriggerButton/TriggerButton.stories.tsx → MediaButton/MediaButton.stories.tsx} +28 -28
  69. package/src/lib/Components/{TriggerButton/TriggerButton.test.tsx → MediaButton/MediaButton.test.tsx} +22 -22
  70. package/src/lib/Components/{TriggerButton/TriggerButton.tsx → MediaButton/MediaButton.tsx} +27 -21
  71. package/src/lib/Components/MediaButton/index.ts +2 -0
  72. package/src/lib/Components/{TriggerButton → MediaButton}/types.ts +10 -5
  73. package/src/lib/Components/OptionList/OptionList.figma.tsx +37 -0
  74. package/src/lib/Components/OptionList/OptionList.mdx +304 -0
  75. package/src/lib/Components/OptionList/OptionList.stories.tsx +755 -0
  76. package/src/lib/Components/OptionList/OptionList.test.tsx +412 -0
  77. package/src/lib/Components/OptionList/OptionList.tsx +532 -0
  78. package/src/lib/Components/OptionList/index.ts +2 -0
  79. package/src/lib/Components/OptionList/types.ts +115 -0
  80. package/src/lib/Components/OptionList/useOptionList/useOptionListItems.test.ts +73 -0
  81. package/src/lib/Components/OptionList/useOptionList/useOptionListItems.ts +49 -0
  82. package/src/lib/Components/index.ts +2 -1
  83. package/src/styles/types/theme.types.ts +8 -6
  84. package/dist/module/lib/Components/TriggerButton/TriggerButton.js.map +0 -1
  85. package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js.map +0 -1
  86. package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js.map +0 -1
  87. package/dist/module/lib/Components/TriggerButton/index.js +0 -5
  88. package/dist/module/lib/Components/TriggerButton/index.js.map +0 -1
  89. package/dist/module/lib/Components/TriggerButton/types.js.map +0 -1
  90. package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts +0 -23
  91. package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts.map +0 -1
  92. package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts +0 -3
  93. package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts.map +0 -1
  94. package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts.map +0 -1
  95. package/src/lib/Components/TriggerButton/index.ts +0 -2
  96. /package/dist/module/lib/Components/{TriggerButton → MediaButton}/types.js +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"names":["describe","it","expect","renderHook","useOptionListItems","apple","value","label","group","banana","carrot","spinach","btc","eth","result","items","current","isGrouped","toBe","flatItems","toEqual","groups"],"sourceRoot":"../../../../../../src","sources":["lib/Components/OptionList/useOptionList/useOptionListItems.test.ts"],"mappings":"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","ignoreList":[]}
@@ -7,7 +7,6 @@ export * from "./Avatar/index.js";
7
7
  export * from "./Banner/index.js";
8
8
  export * from "./BottomSheet/index.js";
9
9
  export * from "./Button/index.js";
10
- export * from "./TriggerButton/index.js";
11
10
  export * from "./Card/index.js";
12
11
  export * from "./CardButton/index.js";
13
12
  export * from "./ContentBanner/index.js";
@@ -20,9 +19,11 @@ export * from "./InteractiveIcon/index.js";
20
19
  export * from "./Link/index.js";
21
20
  export * from "./ListItem/index.js";
22
21
  export * from "./MediaBanner/index.js";
22
+ export * from "./MediaButton/index.js";
23
23
  export * from "./MediaCard/index.js";
24
24
  export * from "./MediaImage/index.js";
25
25
  export * from "./NavBar/index.js";
26
+ export * from "./OptionList/index.js";
26
27
  export * from "./PageIndicator/index.js";
27
28
  export * from "./SearchInput/index.js";
28
29
  export * from "./SegmentedControl/index.js";
@@ -1 +1 @@
1
- {"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Components/index.ts"],"mappings":";;AAAA,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,4BAAmB;AACjC,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,wBAAe;AAC7B,cAAc,sBAAa;AAC3B,cAAc,uBAAc;AAC5B,cAAc,mBAAU;AACxB,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,6BAAoB;AAClC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,gBAAO;AACrB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW","ignoreList":[]}
1
+ {"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Components/index.ts"],"mappings":";;AAAA,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,4BAAmB;AACjC,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,wBAAe;AAC7B,cAAc,wBAAe;AAC7B,cAAc,sBAAa;AAC3B,cAAc,uBAAc;AAC5B,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,6BAAoB;AAClC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,gBAAO;AACrB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW","ignoreList":[]}
@@ -1,7 +1,7 @@
1
1
  import { ElementRef, Ref } from 'react';
2
2
  import { View } from 'react-native';
3
3
  import { Text } from '../Utility';
4
- import { ListItemContentProps, ListItemContentRowProps, ListItemDescriptionProps, ListItemLeadingProps, ListItemProps, ListItemTitleProps, ListItemTrailingProps } from './types';
4
+ import { ListItemProps, ListItemContentProps, ListItemContentRowProps, ListItemDescriptionProps, ListItemLeadingProps, ListItemTitleProps, ListItemTrailingProps } from './types';
5
5
  /**
6
6
  * A flexible list item component that provides a composable structure for displaying
7
7
  * interactive list items with leading content, title, description, and trailing content.
@@ -37,45 +37,45 @@ import { ListItemContentProps, ListItemContentRowProps, ListItemDescriptionProps
37
37
  * </ListItemTrailing>
38
38
  * </ListItem>
39
39
  */
40
- export declare const ListItem: ({ children, lx, style, disabled: disabledProp, ref, ...pressableProps }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
40
+ export declare const ListItem: ({ children, lx, style, disabled: disabledProp, density, onPress, onLongPress, ref, ...props }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
41
41
  /**
42
42
  * Container for the leading (left) part of the list item.
43
43
  * Contains the visual element (Spot, Avatar, Icon) and the content (title + description).
44
44
  */
45
- export declare const ListItemLeading: ({ children, lx, style, ref, ...viewProps }: ListItemLeadingProps & {
45
+ export declare const ListItemLeading: ({ children, lx, style, ref, ...props }: ListItemLeadingProps & {
46
46
  ref?: Ref<View>;
47
47
  }) => import("react/jsx-runtime").JSX.Element;
48
48
  /**
49
49
  * Container for the text content (title and description) within the leading area.
50
50
  */
51
- export declare const ListItemContent: ({ children, lx, style, ref, ...viewProps }: ListItemContentProps & {
51
+ export declare const ListItemContent: ({ children, lx, style, ref, ...props }: ListItemContentProps & {
52
52
  ref?: Ref<View>;
53
53
  }) => import("react/jsx-runtime").JSX.Element;
54
54
  /**
55
55
  * Horizontal row container within ListItemContent to place a title or description
56
56
  * alongside additional inline content (e.g. Tag) while preserving text truncation.
57
57
  */
58
- export declare const ListItemContentRow: ({ children, lx, style, ref, ...viewProps }: ListItemContentRowProps & {
58
+ export declare const ListItemContentRow: ({ children, lx, style, ref, ...props }: ListItemContentRowProps & {
59
59
  ref?: Ref<View>;
60
60
  }) => import("react/jsx-runtime").JSX.Element;
61
61
  /**
62
62
  * The main title of the list item.
63
63
  */
64
- export declare const ListItemTitle: ({ children, lx, style, ref, ...textProps }: ListItemTitleProps & {
64
+ export declare const ListItemTitle: ({ children, lx, style, ref, ...props }: ListItemTitleProps & {
65
65
  ref?: Ref<ElementRef<typeof Text>>;
66
66
  }) => import("react/jsx-runtime").JSX.Element;
67
67
  /**
68
68
  * Optional description text below the title.
69
69
  * Automatically applies disabled styling when the parent ListItem is disabled.
70
70
  */
71
- export declare const ListItemDescription: ({ children, lx, style, ref, ...textProps }: ListItemDescriptionProps & {
71
+ export declare const ListItemDescription: ({ children, lx, style, ref, ...props }: ListItemDescriptionProps & {
72
72
  ref?: Ref<ElementRef<typeof Text>>;
73
73
  }) => import("react/jsx-runtime").JSX.Element;
74
74
  /**
75
75
  * Container for the trailing (right) content of the list item.
76
76
  * Used for icons, switches, values, tags, chevrons, etc.
77
77
  */
78
- export declare const ListItemTrailing: ({ children, lx, style, ref, ...viewProps }: ListItemTrailingProps & {
78
+ export declare const ListItemTrailing: ({ children, lx, style, ref, ...props }: ListItemTrailingProps & {
79
79
  ref?: Ref<View>;
80
80
  }) => import("react/jsx-runtime").JSX.Element;
81
81
  //# sourceMappingURL=ListItem.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAa,GAAG,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAkB,IAAI,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,EACxB,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AA+BjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,QAAQ,GAAI,yEAOtB,aAAa,4CAuBf,CAAC;AAoBF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,4CAM7B,oBAAoB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CAwB5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,4CAM7B,oBAAoB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CA4B5C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,4CAMhC,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CAuB/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,4CAM3B,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;CAAE,4CAsC7D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,4CAMjC,wBAAwB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;CAAE,4CAsCnE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,4CAM9B,qBAAqB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CAuB7C,CAAC"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAa,GAAG,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAc,IAAI,EAAa,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAkB,IAAI,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,EACxB,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAoCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,QAAQ,GAAI,+FAUtB,aAAa,4CA+Cf,CAAC;AAsBF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,wCAM7B,oBAAoB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CAwB5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,wCAM7B,oBAAoB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CA4B5C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,wCAMhC,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CAuB/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,wCAM3B,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;CAAE,4CAsC7D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAMjC,wBAAwB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;CAAE,4CAsCnE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAM9B,qBAAqB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,4CAuB7C,CAAC"}
@@ -1,10 +1,5 @@
1
+ import type { Density } from '@ledgerhq/lumen-utils-shared';
1
2
  import { StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
2
- /**
3
- * Context value for passing state to sub-components
4
- */
5
- export type ListItemContextValue = {
6
- disabled?: boolean;
7
- };
8
3
  /**
9
4
  * Props for the ListItem root component
10
5
  */
@@ -13,6 +8,11 @@ export type ListItemProps = {
13
8
  * The content of the list item (ListItemLeading, ListItemTrailing)
14
9
  */
15
10
  children: React.ReactNode;
11
+ /**
12
+ * The density of the list item.
13
+ * @default 'expanded'
14
+ */
15
+ density?: Density;
16
16
  /**
17
17
  * Whether the list item is disabled.
18
18
  */
@@ -21,7 +21,11 @@ export type ListItemProps = {
21
21
  * Callback function when the list item is pressed.
22
22
  */
23
23
  onPress?: StyledPressableProps['onPress'];
24
- } & Omit<StyledPressableProps, 'disabled' | 'children'>;
24
+ /**
25
+ * Callback function when the list item is long pressed.
26
+ */
27
+ onLongPress?: StyledPressableProps['onLongPress'];
28
+ } & Omit<StyledViewProps, 'disabled' | 'children'>;
25
29
  /**
26
30
  * Props for the ListItemLeading component
27
31
  */
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB;;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,uBAAuB,GAAG;IACpC;;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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;CACnD,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnD;;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,uBAAuB,GAAG;IACpC;;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"}
@@ -0,0 +1,23 @@
1
+ import type { MediaButtonProps } from './types';
2
+ /**
3
+ * Media button for select/dropdown components. Displays a label with an optional
4
+ * leading icon and a trailing chevron indicator.
5
+ *
6
+ * This component is intended to be used exclusively as the trigger inside a Select or
7
+ * dropdown pattern. It should not be used as a standalone action button — use `Button`
8
+ * or `IconButton` instead.
9
+ *
10
+ * @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
11
+ *
12
+ * @example
13
+ * import { MediaButton } from '@ledgerhq/lumen-ui-rnative';
14
+ * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
15
+ *
16
+ * <MediaButton icon={<Settings size={20} />} iconType="flat">
17
+ * Network
18
+ * </MediaButton>
19
+ *
20
+ * <MediaButton>All accounts</MediaButton>
21
+ */
22
+ export declare const MediaButton: ({ lx, style, appearance, size, disabled, icon, iconType, hideChevron, children: label, ref, ...props }: MediaButtonProps) => import("react/jsx-runtime").JSX.Element;
23
+ //# sourceMappingURL=MediaButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MediaButton.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaButton/MediaButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA6HhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,GAAI,wGAYzB,gBAAgB,4CA4BlB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { MediaButton } from './MediaButton';
2
+ export * from './types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,cAAc,SAAS,CAAC"}
@@ -1,13 +1,13 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { StyledPressableProps } from '../../../styles';
3
- export type TriggerButtonProps = {
3
+ export type MediaButtonProps = {
4
4
  /**
5
- * The visual style of the trigger button.
5
+ * The visual style of the media button.
6
6
  * @default 'gray'
7
7
  */
8
8
  appearance?: 'gray' | 'transparent' | 'no-background';
9
9
  /**
10
- * The size variant of the trigger button.
10
+ * The size variant of the media button.
11
11
  * @default 'md'
12
12
  */
13
13
  size?: 'sm' | 'md';
@@ -26,12 +26,17 @@ export type TriggerButtonProps = {
26
26
  */
27
27
  iconType?: 'flat' | 'rounded';
28
28
  /**
29
- * Whether the trigger button is disabled.
29
+ * When true, hides the trailing chevron indicator.
30
+ * @default false
31
+ */
32
+ hideChevron?: boolean;
33
+ /**
34
+ * Whether the media button is disabled.
30
35
  * @default false
31
36
  */
32
37
  disabled?: boolean;
33
38
  /**
34
- * The label content of the trigger button.
39
+ * The label content of the media button.
35
40
  */
36
41
  children: ReactNode;
37
42
  } & Omit<StyledPressableProps, 'children'>;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,eAAe,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}
@@ -0,0 +1,12 @@
1
+ import type { MetaShape, OptionListProps, OptionListContentProps, OptionListItemProps, OptionListItemLeadingProps, OptionListItemTextProps, OptionListItemDescriptionProps, OptionListItemContentProps, OptionListItemContentRowProps, OptionListEmptyStateProps, OptionListTriggerProps } from './types';
2
+ export declare const OptionList: <TMeta extends MetaShape = MetaShape>({ items, value, defaultValue, onValueChange, disabled: disabledProp, children, }: OptionListProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const OptionListContent: <TMeta extends MetaShape = MetaShape>({ renderItem, lx, style, ref, ...props }: OptionListContentProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
4
+ export declare const OptionListItem: ({ value, disabled: disabledProp, children, lx, style, ref, ...props }: OptionListItemProps) => import("react/jsx-runtime").JSX.Element;
5
+ export declare const OptionListItemText: ({ children, lx, style, ref, ...props }: OptionListItemTextProps) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const OptionListItemDescription: ({ children, lx, style, ref, ...props }: OptionListItemDescriptionProps) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const OptionListItemContent: ({ children, lx, style, ref, ...props }: OptionListItemContentProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const OptionListItemContentRow: ({ children, lx, style, ref, ...props }: OptionListItemContentRowProps) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const OptionListItemLeading: ({ children, lx, style, ref, ...props }: OptionListItemLeadingProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const OptionListEmptyState: ({ title, description, lx, style, ref, ...props }: OptionListEmptyStateProps) => import("react/jsx-runtime").JSX.Element | null;
11
+ export declare const OptionListTrigger: ({ label, onPress, disabled: disabledProp, children, lx, style, ref, ...props }: OptionListTriggerProps) => import("react/jsx-runtime").JSX.Element;
12
+ //# sourceMappingURL=OptionList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/OptionList/OptionList.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,SAAS,EAGT,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,6BAA6B,EAC7B,yBAAyB,EACzB,sBAAsB,EAEvB,MAAM,SAAS,CAAC;AAMjB,eAAO,MAAM,UAAU,GAAI,KAAK,SAAS,SAAS,GAAG,SAAS,EAAE,kFAO7D,eAAe,CAAC,KAAK,CAAC,4CA+BxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,GAAG,SAAS,EAAE,0CAMpE,sBAAsB,CAAC,KAAK,CAAC,4CAkC/B,CAAC;AA4BF,eAAO,MAAM,cAAc,GAAI,uEAQ5B,mBAAmB,4CA+BrB,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,wCAMhC,uBAAuB,4CA6BzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,wCAMvC,8BAA8B,4CA6BhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wCAMnC,0BAA0B,4CAsB5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,wCAMtC,6BAA6B,4CAuB/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wCAMnC,0BAA0B,4CAsB5B,CAAC;AAeF,eAAO,MAAM,oBAAoB,GAAI,kDAOlC,yBAAyB,mDAuC3B,CAAC;AA6DF,eAAO,MAAM,iBAAiB,GAAI,gFAS/B,sBAAsB,4CAgCxB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=OptionList.figma.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionList.figma.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/OptionList/OptionList.figma.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,3 @@
1
+ export * from './OptionList';
2
+ export * from './types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/OptionList/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
@@ -0,0 +1,97 @@
1
+ import { ReactNode } from 'react';
2
+ import { StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
3
+ export type MetaShape = Record<string, unknown>;
4
+ export type OptionListItemData<TMeta extends MetaShape = MetaShape> = {
5
+ /** Unique string identifier for this item, used for selection tracking. */
6
+ value: string;
7
+ /** Display text. */
8
+ label: string;
9
+ /** Secondary text displayed below the label inside the item. */
10
+ description?: string;
11
+ /** When true, the item cannot be selected or focused. */
12
+ disabled?: boolean;
13
+ /**
14
+ * Optional group name. Items sharing the same `group` value are grouped together
15
+ * with automatic headers and separators.
16
+ * Groups are ordered by first occurrence in the `items` array.
17
+ */
18
+ group?: string;
19
+ /**
20
+ * Arbitrary data attached to this item.
21
+ * Use it to carry extra fields (icons, tickers, IDs, etc.)
22
+ * that your render function needs.
23
+ */
24
+ meta?: TMeta;
25
+ };
26
+ /** Internal type -- used by sub-components to read shared state from context. */
27
+ export type OptionListContextValue = {
28
+ selectedValue: string | null;
29
+ onValueChange: (value: string | null) => void;
30
+ isGrouped: boolean;
31
+ groups: OptionListItemGroup[];
32
+ flatItems: OptionListItemData[];
33
+ };
34
+ /** Internal type -- consumers never construct this directly. */
35
+ export type OptionListItemGroup<TMeta extends MetaShape = MetaShape> = {
36
+ label: string;
37
+ items: OptionListItemData<TMeta>[];
38
+ };
39
+ export type OptionListProps<TMeta extends MetaShape = MetaShape> = {
40
+ /** Flat array of items. Use the `group` field on each item for automatic grouping. */
41
+ items: OptionListItemData<TMeta>[];
42
+ /** The controlled selected value. */
43
+ value?: string | null;
44
+ /** The default selected value (uncontrolled). */
45
+ defaultValue?: string | null;
46
+ /** Called when the selected value changes. */
47
+ onValueChange?: (value: string | null) => void;
48
+ /** When true, prevents interaction with the entire list. */
49
+ disabled?: boolean;
50
+ children: ReactNode;
51
+ };
52
+ export type OptionListContentProps<TMeta extends MetaShape = MetaShape> = {
53
+ /** Render function called for each item. Receives the item data and selection/disabled state. */
54
+ renderItem: (item: OptionListItemData<TMeta>, selected: boolean) => ReactNode;
55
+ } & Omit<StyledViewProps, 'children'>;
56
+ export type OptionListItemProps = {
57
+ /** The value associated with this item, used for selection matching. */
58
+ value: string;
59
+ /** Whether the item is disabled. */
60
+ disabled?: boolean;
61
+ children: ReactNode;
62
+ } & Omit<StyledPressableProps, 'children' | 'disabled'>;
63
+ export type OptionListItemTextProps = {
64
+ children: ReactNode;
65
+ } & Omit<StyledTextProps, 'children'>;
66
+ export type OptionListItemDescriptionProps = {
67
+ children: ReactNode;
68
+ } & Omit<StyledTextProps, 'children'>;
69
+ export type OptionListItemContentRowProps = {
70
+ children: ReactNode;
71
+ } & Omit<StyledViewProps, 'children'>;
72
+ export type OptionListItemContentProps = {
73
+ children: ReactNode;
74
+ } & Omit<StyledViewProps, 'children'>;
75
+ export type OptionListItemLeadingProps = {
76
+ children: ReactNode;
77
+ } & Omit<StyledViewProps, 'children'>;
78
+ export type OptionListLabelProps = {
79
+ children: ReactNode;
80
+ } & Omit<StyledTextProps, 'children'>;
81
+ export type OptionListEmptyStateProps = {
82
+ /** Heading displayed when the list is empty. */
83
+ title: string;
84
+ /** Optional secondary text displayed below the title. */
85
+ description?: string;
86
+ } & Omit<StyledViewProps, 'children'>;
87
+ export type OptionListTriggerProps = {
88
+ /** Floating label shown above the selected value. */
89
+ label?: string;
90
+ /** Called when the trigger is pressed. Use to open a BottomSheet or navigate. */
91
+ onPress: () => void;
92
+ /** Content to display as the selected value. */
93
+ children?: ReactNode;
94
+ /** Whether the trigger is disabled. Merges with OptionList disabled context. */
95
+ disabled?: boolean;
96
+ } & Omit<StyledPressableProps, 'children' | 'disabled' | 'onPress'>;
97
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/OptionList/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEhD,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI;IACpE,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,iFAAiF;AACjF,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,EAAE,kBAAkB,EAAE,CAAC;CACjC,CAAC;AAEF,gEAAgE;AAChE,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI;IACjE,sFAAsF;IACtF,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;IACnC,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI;IACxE,iGAAiG;IACjG,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,CAAC;CAC/E,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAExD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,sBAAsB,GAAG;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC"}
@@ -0,0 +1,12 @@
1
+ import type { MetaShape, OptionListItemData, OptionListItemGroup } from '../types';
2
+ type UseOptionListItemsParams<TMeta extends MetaShape = MetaShape> = {
3
+ items: OptionListItemData<TMeta>[];
4
+ };
5
+ type UseOptionListItemsResult<TMeta extends MetaShape = MetaShape> = {
6
+ isGrouped: boolean;
7
+ groups: OptionListItemGroup<TMeta>[];
8
+ flatItems: OptionListItemData<TMeta>[];
9
+ };
10
+ export declare const useOptionListItems: <TMeta extends MetaShape = MetaShape>({ items, }: UseOptionListItemsParams<TMeta>) => UseOptionListItemsResult<TMeta>;
11
+ export {};
12
+ //# sourceMappingURL=useOptionListItems.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useOptionListItems.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/OptionList/useOptionList/useOptionListItems.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,UAAU,CAAC;AA8BlB,KAAK,wBAAwB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI;IACnE,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;CACpC,CAAC;AAEF,KAAK,wBAAwB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI;IACnE,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IACrC,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,SAAS,GAAG,SAAS,EAAE,YAErE,wBAAwB,CAAC,KAAK,CAAC,KAAG,wBAAwB,CAAC,KAAK,CAC1B,CAAC"}
@@ -5,7 +5,6 @@ export * from './Avatar';
5
5
  export * from './Banner';
6
6
  export * from './BottomSheet';
7
7
  export * from './Button';
8
- export * from './TriggerButton';
9
8
  export * from './Card';
10
9
  export * from './CardButton';
11
10
  export * from './ContentBanner';
@@ -18,9 +17,11 @@ export * from './InteractiveIcon';
18
17
  export * from './Link';
19
18
  export * from './ListItem';
20
19
  export * from './MediaBanner';
20
+ export * from './MediaButton';
21
21
  export * from './MediaCard';
22
22
  export * from './MediaImage';
23
23
  export * from './NavBar';
24
+ export * from './OptionList';
24
25
  export * from './PageIndicator';
25
26
  export * from './SearchInput';
26
27
  export * from './SegmentedControl';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,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,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,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,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
@@ -1,9 +1,12 @@
1
- import { ledgerLiveThemes, TypographyTokens } from '@ledgerhq/lumen-design-core';
1
+ import { LedgerLiveDarkTheme, LedgerLiveLightTheme, TypographyTokens } from '@ledgerhq/lumen-design-core';
2
2
  import { AddEntriesNegative } from './utility.types';
3
3
  /**
4
4
  * Typography tokens without responsive display (not applicable for React Native)
5
5
  */
6
6
  export type LumenTypographyTokens = TypographyTokens['heading'] & TypographyTokens['body'];
7
+ /**
8
+ * Flattened typography token names
9
+ */
7
10
  export type LumenTypographyTokenName = keyof TypographyTokens['heading'] | keyof TypographyTokens['body'];
8
11
  /**
9
12
  * Instead of exposing the raw theme objects, narrow, extends and transform the theme to improve experience and performances
@@ -12,17 +15,15 @@ type ThemeWithOneTypographyTokens<Theme extends LumenTheme> = Omit<Theme, 'typog
12
15
  typographies: LumenTypographyTokens;
13
16
  spacings: AddEntriesNegative<Theme['spacings']>;
14
17
  };
15
- export type LumenDarkTheme = typeof ledgerLiveThemes.dark;
16
- export type LumenLightTheme = typeof ledgerLiveThemes.light;
17
- export type LumenTheme = LumenDarkTheme | LumenLightTheme;
18
+ export type LumenTheme = LedgerLiveDarkTheme | LedgerLiveLightTheme;
18
19
  export type LumenStyleSheetTheme = ThemeWithOneTypographyTokens<LumenTheme>;
19
20
  export interface LumenStyleSheetThemes {
20
21
  light: LumenStyleSheetTheme;
21
22
  dark: LumenStyleSheetTheme;
22
23
  }
23
24
  export type LumenThemes = {
24
- light: LumenLightTheme;
25
- dark: LumenDarkTheme;
25
+ light: LedgerLiveLightTheme;
26
+ dark: LedgerLiveDarkTheme;
26
27
  };
27
28
  export {};
28
29
  //# sourceMappingURL=theme.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../../src/styles/types/theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,SAAS,CAAC,GAC7D,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAE3B,MAAM,MAAM,wBAAwB,GAChC,MAAM,gBAAgB,CAAC,SAAS,CAAC,GACjC,MAAM,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAEnC;;GAEG;AACH,KAAK,4BAA4B,CAAC,KAAK,SAAS,UAAU,IAAI,IAAI,CAChE,KAAK,EACL,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,YAAY,EAAE,qBAAqB,CAAC;IACpC,QAAQ,EAAE,kBAAkB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,OAAO,gBAAgB,CAAC,IAAI,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,gBAAgB,CAAC,KAAK,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC;AAC1D,MAAM,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,UAAU,CAAC,CAAC;AAG5E,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,IAAI,EAAE,oBAAoB,CAAC;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,cAAc,CAAC;CACtB,CAAC"}
1
+ {"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../../src/styles/types/theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,SAAS,CAAC,GAC7D,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAChC,MAAM,gBAAgB,CAAC,SAAS,CAAC,GACjC,MAAM,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAEnC;;GAEG;AACH,KAAK,4BAA4B,CAAC,KAAK,SAAS,UAAU,IAAI,IAAI,CAChE,KAAK,EACL,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,YAAY,EAAE,qBAAqB,CAAC;IACpC,QAAQ,EAAE,kBAAkB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,mBAAmB,GAAG,oBAAoB,CAAC;AACpE,MAAM,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,UAAU,CAAC,CAAC;AAG5E,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,IAAI,EAAE,oBAAoB,CAAC;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,oBAAoB,CAAC;IAC5B,IAAI,EAAE,mBAAmB,CAAC;CAC3B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-rnative",
3
- "version": "0.1.22",
3
+ "version": "0.1.23",
4
4
  "license": "Apache-2.0",
5
5
  "keywords": [
6
6
  "react-native",
@@ -36,7 +36,7 @@ ListItems are flexible interactive elements designed for lists. They use a compo
36
36
 
37
37
  <Canvas of={ListItemStories.Base} />
38
38
 
39
- - **ListItem**: Root interactive container (Pressable)
39
+ - **ListItem**: Root container (View or Pressable based on interactivity)
40
40
  - **ListItemLeading**: Left section containing visual element and content
41
41
  - **ListItemContent**: Container for title and description
42
42
  - **ListItemContentRow**: Horizontal row within ListItemContent for placing a title or description alongside inline elements like Tag
@@ -46,16 +46,18 @@ ListItems are flexible interactive elements designed for lists. They use a compo
46
46
 
47
47
  ## Properties
48
48
 
49
- ### Overview
50
-
51
49
  <Canvas of={ListItemStories.Base} />
52
50
  <Controls of={ListItemStories.Base} />
53
51
 
54
- ### Trailing Content Variants
52
+ ### Density
53
+
54
+ <Canvas of={ListItemStories.DensityShowcase} />
55
55
 
56
- ListItems follow composite component pattern to allow for maximum flexibility over layout and content through composable sub-components.
56
+ ### Interactivity
57
57
 
58
- <Canvas of={ListItemStories.VariantsShowcase} />
58
+ The ListItem can be interactive or non-interactive. By default, the ListItem is non-interactive. To make it interactive, you need to pass an `onPress` prop.
59
+
60
+ <Canvas of={ListItemStories.InteractiveShowcase} />
59
61
 
60
62
  ### Disabled State
61
63
 
@@ -63,12 +65,18 @@ When disabled, the ListItem becomes non-interactive. The disabled state is autom
63
65
 
64
66
  <Canvas of={ListItemStories.DisabledState} />
65
67
 
66
- ## Responsive Layout
68
+ ### Responsive Layout
67
69
 
68
70
  ListItems adapt to their container width, truncating long titles and descriptions as needed.
69
71
 
70
72
  <Canvas of={ListItemStories.ResponsiveLayout} />
71
73
 
74
+ ### Composition
75
+
76
+ ListItems follow a composite component pattern to allow for maximum flexibility over layout and content through composable sub-components.
77
+
78
+ <Canvas of={ListItemStories.CompositionShowcase} />
79
+
72
80
  > **Key behaviors:**
73
81
  >
74
82
  > - Automatically fits container width