@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.6

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 (147) hide show
  1. package/dist/package.json +1 -1
  2. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
  3. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.js +5 -1
  4. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts +1 -1
  5. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  6. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.js +34 -61
  7. package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts +1 -0
  8. package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
  9. package/dist/src/lib/Components/SegmentedControl/types.d.ts +12 -2
  10. package/dist/src/lib/Components/SegmentedControl/types.d.ts.map +1 -1
  11. package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts +19 -0
  12. package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts.map +1 -0
  13. package/dist/src/lib/Components/SegmentedControl/usePillLayout.js +46 -0
  14. package/dist/src/lib/Components/TileButton/TileButton.js +2 -2
  15. package/jest.config.ts +0 -1
  16. package/package.json +1 -1
  17. package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +8 -1
  18. package/src/lib/Components/SegmentedControl/SegmentedControl.mdx +1 -38
  19. package/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx +35 -19
  20. package/src/lib/Components/SegmentedControl/SegmentedControl.tsx +61 -77
  21. package/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx +1 -0
  22. package/src/lib/Components/SegmentedControl/types.ts +12 -2
  23. package/src/lib/Components/SegmentedControl/usePillLayout.ts +76 -0
  24. package/src/lib/Components/TileButton/TileButton.tsx +2 -2
  25. package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx +1 -1
  26. package/tsconfig.json +3 -16
  27. package/tsconfig.lib.json +5 -0
  28. package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts +0 -9
  29. package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts.map +0 -1
  30. package/dist/src/lib/Animations/Pulse/Pulse.stories.js +0 -38
  31. package/dist/src/lib/Animations/Spin/Spin.stories.d.ts +0 -9
  32. package/dist/src/lib/Animations/Spin/Spin.stories.d.ts.map +0 -1
  33. package/dist/src/lib/Animations/Spin/Spin.stories.js +0 -27
  34. package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts +0 -13
  35. package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts.map +0 -1
  36. package/dist/src/lib/Components/AddressInput/AddressInput.stories.js +0 -128
  37. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts +0 -10
  38. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts.map +0 -1
  39. package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.js +0 -127
  40. package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts +0 -16
  41. package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts.map +0 -1
  42. package/dist/src/lib/Components/AmountInput/AmountInput.stories.js +0 -186
  43. package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts +0 -22
  44. package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts.map +0 -1
  45. package/dist/src/lib/Components/Avatar/Avatar.stories.js +0 -72
  46. package/dist/src/lib/Components/Banner/Banner.stories.d.ts +0 -16
  47. package/dist/src/lib/Components/Banner/Banner.stories.d.ts.map +0 -1
  48. package/dist/src/lib/Components/Banner/Banner.stories.js +0 -268
  49. package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts +0 -87
  50. package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts.map +0 -1
  51. package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.js +0 -266
  52. package/dist/src/lib/Components/Button/Button.stories.d.ts +0 -16
  53. package/dist/src/lib/Components/Button/Button.stories.d.ts.map +0 -1
  54. package/dist/src/lib/Components/Button/Button.stories.js +0 -143
  55. package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts +0 -16
  56. package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts.map +0 -1
  57. package/dist/src/lib/Components/CardButton/CardButton.stories.js +0 -208
  58. package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts +0 -14
  59. package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts.map +0 -1
  60. package/dist/src/lib/Components/Checkbox/Checkbox.stories.js +0 -72
  61. package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts +0 -11
  62. package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts.map +0 -1
  63. package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.js +0 -91
  64. package/dist/src/lib/Components/Divider/Divider.stories.d.ts +0 -9
  65. package/dist/src/lib/Components/Divider/Divider.stories.d.ts.map +0 -1
  66. package/dist/src/lib/Components/Divider/Divider.stories.js +0 -51
  67. package/dist/src/lib/Components/Icon/Icon.stories.d.ts +0 -15
  68. package/dist/src/lib/Components/Icon/Icon.stories.d.ts.map +0 -1
  69. package/dist/src/lib/Components/Icon/Icon.stories.js +0 -137
  70. package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts +0 -10
  71. package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts.map +0 -1
  72. package/dist/src/lib/Components/IconButton/IconButton.stories.js +0 -74
  73. package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts +0 -11
  74. package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts.map +0 -1
  75. package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.js +0 -90
  76. package/dist/src/lib/Components/Link/Link.stories.d.ts +0 -17
  77. package/dist/src/lib/Components/Link/Link.stories.d.ts.map +0 -1
  78. package/dist/src/lib/Components/Link/Link.stories.js +0 -275
  79. package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts +0 -10
  80. package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts.map +0 -1
  81. package/dist/src/lib/Components/ListItem/ListItem.stories.js +0 -106
  82. package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts +0 -10
  83. package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts.map +0 -1
  84. package/dist/src/lib/Components/NavBar/NavBar.stories.js +0 -72
  85. package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts +0 -27
  86. package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts.map +0 -1
  87. package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.js +0 -42
  88. package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts +0 -12
  89. package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts.map +0 -1
  90. package/dist/src/lib/Components/SearchInput/SearchInput.stories.js +0 -98
  91. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts +0 -58
  92. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts.map +0 -1
  93. package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.js +0 -61
  94. package/dist/src/lib/Components/Select/Select.stories.d.ts +0 -11
  95. package/dist/src/lib/Components/Select/Select.stories.d.ts.map +0 -1
  96. package/dist/src/lib/Components/Select/Select.stories.js +0 -83
  97. package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts +0 -11
  98. package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts.map +0 -1
  99. package/dist/src/lib/Components/Skeleton/Skeleton.stories.js +0 -49
  100. package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts +0 -9
  101. package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts.map +0 -1
  102. package/dist/src/lib/Components/Spinner/Spinner.stories.js +0 -50
  103. package/dist/src/lib/Components/Spot/Spot.stories.d.ts +0 -12
  104. package/dist/src/lib/Components/Spot/Spot.stories.d.ts.map +0 -1
  105. package/dist/src/lib/Components/Spot/Spot.stories.js +0 -156
  106. package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts +0 -9
  107. package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts.map +0 -1
  108. package/dist/src/lib/Components/Stepper/Stepper.stories.js +0 -35
  109. package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts +0 -10
  110. package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts.map +0 -1
  111. package/dist/src/lib/Components/Subheader/Subheader.stories.js +0 -34
  112. package/dist/src/lib/Components/Switch/Switch.stories.d.ts +0 -14
  113. package/dist/src/lib/Components/Switch/Switch.stories.d.ts.map +0 -1
  114. package/dist/src/lib/Components/Switch/Switch.stories.js +0 -65
  115. package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts +0 -50
  116. package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts.map +0 -1
  117. package/dist/src/lib/Components/TabBar/TabBar.stories.js +0 -60
  118. package/dist/src/lib/Components/Tag/Tag.stories.d.ts +0 -10
  119. package/dist/src/lib/Components/Tag/Tag.stories.d.ts.map +0 -1
  120. package/dist/src/lib/Components/Tag/Tag.stories.js +0 -45
  121. package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts +0 -14
  122. package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts.map +0 -1
  123. package/dist/src/lib/Components/TextInput/TextInput.stories.js +0 -128
  124. package/dist/src/lib/Components/Tile/Tile.stories.d.ts +0 -14
  125. package/dist/src/lib/Components/Tile/Tile.stories.d.ts.map +0 -1
  126. package/dist/src/lib/Components/Tile/Tile.stories.js +0 -117
  127. package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts +0 -12
  128. package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts.map +0 -1
  129. package/dist/src/lib/Components/TileButton/TileButton.stories.js +0 -63
  130. package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts +0 -10
  131. package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts.map +0 -1
  132. package/dist/src/lib/Components/Tooltip/Tooltip.stories.js +0 -50
  133. package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts +0 -7
  134. package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map +0 -1
  135. package/dist/src/lib/Components/Utility/Box/Box.stories.js +0 -42
  136. package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts +0 -11
  137. package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts.map +0 -1
  138. package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.js +0 -105
  139. package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts +0 -10
  140. package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts.map +0 -1
  141. package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js +0 -101
  142. package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts +0 -7
  143. package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map +0 -1
  144. package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js +0 -47
  145. package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts +0 -7
  146. package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts.map +0 -1
  147. package/dist/src/lib/Components/Utility/Text/Text.stories.js +0 -33
@@ -1,268 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React from 'react';
3
- import { Button } from '../Button';
4
- import { Box, Text } from '../Utility';
5
- import { Banner } from './Banner';
6
- const meta = {
7
- component: Banner,
8
- title: 'Communication/Banner',
9
- parameters: {
10
- docs: {
11
- source: {
12
- language: 'tsx',
13
- format: true,
14
- type: 'code',
15
- },
16
- },
17
- },
18
- argTypes: {
19
- appearance: {
20
- control: 'select',
21
- options: ['info', 'success', 'warning', 'error'],
22
- description: 'The visual style appearance of the banner',
23
- },
24
- title: {
25
- control: 'text',
26
- description: 'The title of the banner',
27
- },
28
- description: {
29
- control: 'text',
30
- description: 'Optional description text',
31
- },
32
- primaryAction: {
33
- control: 'select',
34
- description: 'Primary action Button',
35
- options: ['Button', 'None'],
36
- mapping: {
37
- Button: (_jsx(Button, { appearance: 'transparent', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" })),
38
- None: undefined,
39
- },
40
- },
41
- secondaryAction: {
42
- control: 'select',
43
- description: 'Secondary action Button',
44
- options: ['Button', 'None'],
45
- mapping: {
46
- Button: (_jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" })),
47
- None: undefined,
48
- },
49
- },
50
- onClose: {
51
- control: 'select',
52
- description: 'Close action Button',
53
- options: ['With Close', 'None'],
54
- mapping: {
55
- 'With Close': () => {
56
- console.log('Close clicked');
57
- },
58
- None: undefined,
59
- },
60
- },
61
- closeAriaLabel: {
62
- control: 'text',
63
- description: 'Close action with onClick and ariaLabel',
64
- },
65
- },
66
- };
67
- export default meta;
68
- export const Base = {
69
- args: {
70
- appearance: 'info',
71
- title: 'Information Banner',
72
- primaryAction: 'None',
73
- secondaryAction: 'None',
74
- },
75
- render: (args) => (
76
- // maxWidth container for visual presentation - not required for Banner component
77
- _jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args, description: 'This is additional information about the banner.' }) })),
78
- parameters: {
79
- docs: {
80
- source: {
81
- code: `
82
- <Banner
83
- appearance="info"
84
- title="Information Banner"
85
- onClose={() => console.log('Closed')}
86
- description="This is additional information about the banner."
87
- />
88
- `,
89
- },
90
- },
91
- },
92
- };
93
- export const WithDescription = {
94
- args: {
95
- appearance: 'info',
96
- title: 'Banner with Description',
97
- description: 'This is additional information about the banner.',
98
- },
99
- render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args }) })),
100
- parameters: {
101
- docs: {
102
- source: {
103
- code: `
104
- <Banner
105
- appearance="info"
106
- title="Banner with Description"
107
- description="This is additional information about the banner."
108
- onClose={() => console.log('Closed')}
109
- closeAriaLabel="Close banner"
110
- />
111
- `,
112
- },
113
- },
114
- },
115
- };
116
- export const WithActions = {
117
- args: {
118
- appearance: 'info',
119
- title: 'Banner with Actions',
120
- primaryAction: 'Button',
121
- secondaryAction: 'Button',
122
- },
123
- render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args }) })),
124
- parameters: {
125
- docs: {
126
- source: {
127
- code: `
128
- <Banner
129
- appearance="info"
130
- title="Banner with Full Features"
131
- description="This is additional information about the banner."
132
- primaryAction={(
133
- <Button
134
- appearance="gray"
135
- size="sm"
136
- onPress={() => console.log('Primary clicked')}
137
- >
138
- Primary
139
- </Button>
140
- )}
141
- secondaryAction={(
142
- <Button
143
- appearance="no-background"
144
- size="sm"
145
- onPress={() => console.log('Secondary clicked')}
146
- >
147
- Secondary
148
- </Button>
149
- )}
150
- onClose={() => console.log('Closed')}
151
- closeAriaLabel="Close banner"
152
- />
153
- `,
154
- },
155
- },
156
- },
157
- };
158
- export const WithFullFeatures = {
159
- args: {
160
- appearance: 'info',
161
- title: 'Banner with Full Features',
162
- description: 'This is additional information about the banner.',
163
- primaryAction: (_jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" })),
164
- secondaryAction: (_jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" })),
165
- onClose: () => console.log('Closed'),
166
- closeAriaLabel: 'Close banner',
167
- },
168
- render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args }) })),
169
- parameters: {
170
- docs: {
171
- source: {
172
- code: `
173
- <Banner
174
- appearance="info"
175
- title="Banner with Full Features"
176
- description="This is additional information about the banner."
177
- primaryAction={(
178
- <Button
179
- appearance="gray"
180
- size="sm"
181
- onPress={() => console.log('Primary clicked')}
182
- >
183
- Primary
184
- </Button>
185
- )}
186
- secondaryAction={(
187
- <Button
188
- appearance="no-background"
189
- size="sm"
190
- onPress={() => console.log('Secondary clicked')}
191
- >
192
- Secondary
193
- </Button>
194
- )}
195
- onClose={() => console.log('Closed')}
196
- closeAriaLabel="Close banner"
197
- />
198
- `,
199
- },
200
- },
201
- },
202
- };
203
- export const AppearanceShowcase = {
204
- render: () => {
205
- const appearances = [
206
- { name: 'Info', appearance: 'info' },
207
- { name: 'Success', appearance: 'success' },
208
- { name: 'Warning', appearance: 'warning' },
209
- { name: 'Error', appearance: 'error' },
210
- ];
211
- return (
212
- // maxWidth container for visual presentation - not required for Banner component
213
- _jsx(Box, { lx: {
214
- flexDirection: 'column',
215
- maxWidth: 's400',
216
- gap: 's16',
217
- padding: 's8',
218
- }, children: appearances.map(({ name, appearance }) => (_jsx(Banner, { appearance: appearance, title: `${name} Banner`, description: `${name} Banner Description`, onClose: () => console.log('Closed'), closeAriaLabel: `Close ${name} banner` }, appearance))) }));
219
- },
220
- };
221
- export const ContentVariations = {
222
- render: () => (_jsxs(Box, { lx: {
223
- flexDirection: 'column',
224
- maxWidth: 's400',
225
- gap: 's16',
226
- padding: 's8',
227
- }, children: [_jsx(Banner, { title: 'Title Only' }), _jsx(Banner, { description: 'Description only without title' }), _jsx(Banner, { title: 'With Description', description: 'Additional details here.' }), _jsx(Banner, { title: 'With Primary Action', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }) }), _jsx(Banner, { title: 'With Close', description: 'Can be dismissed', onClose: () => console.log('Closed'), closeAriaLabel: 'Close banner' }), _jsx(Banner, { title: 'With Actions and Description', description: 'Details', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }), secondaryAction: _jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" }) }), _jsx(Banner, { appearance: 'info', title: 'Banner with Full Features', description: 'This is additional information about the banner.', primaryAction: _jsx(Button, { appearance: 'gray', size: 'sm', onPress: () => console.log('Primary clicked'), children: "Primary" }), secondaryAction: _jsx(Button, { appearance: 'no-background', size: 'sm', onPress: () => console.log('Secondary clicked'), children: "Secondary" }), onClose: () => console.log('Closed'), closeAriaLabel: 'Close banner' })] })),
228
- };
229
- export const NaturalWidth = {
230
- render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Banner without container constraints - takes full parent width:" }), _jsx(Banner, { title: 'Full Width Banner', description: 'This banner demonstrates natural width behavior - it fills the full width of its parent container.', primaryAction: _jsx(Button, { appearance: 'transparent', size: 'sm', onPress: () => console.log('Action clicked'), children: "Action" }), onClose: () => console.log('Closed'), closeAriaLabel: 'Close full width banner' })] })),
231
- };
232
- export const ResponsiveLayout = {
233
- render: () => (_jsxs(Box, { lx: {
234
- width: 's400',
235
- flexDirection: 'column',
236
- gap: 's16',
237
- backgroundColor: 'mutedPressed',
238
- padding: 's16',
239
- }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "Container with a fixed width" }), _jsx(Banner, { title: 'Short Title', description: 'Short description', onClose: () => console.log('Closed'), closeAriaLabel: 'Close short banner' }), _jsx(Banner, { title: 'Constrained Width', description: 'Banner width is controlled by a fixed width container', onClose: () => console.log('Closed'), closeAriaLabel: 'Close constrained width banner' }), _jsx(Banner, { title: 'Longer Title That Might Overflow When Container is Smaller', description: 'This is a longer description that demonstrates how the banner handles longer content within its constraints. It should be truncated at 5 lines with an ellipsis, so this line should not be visible.', onClose: () => console.log('Closed'), closeAriaLabel: 'Close overflow banner' })] })),
240
- };
241
- export const InteractiveDismiss = {
242
- render: (args) => {
243
- const [visible, setVisible] = React.useState(true);
244
- if (!visible)
245
- return _jsx(Text, { typography: 'body2', children: "Banner dismissed" });
246
- return (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args, title: 'Click close to dismiss', onClose: () => setVisible(false), closeAriaLabel: 'Dismiss interactive banner' }) }));
247
- },
248
- };
249
- export const InteractiveActions = {
250
- render: (args) => {
251
- const [state, setState] = React.useState('idle');
252
- const handleAccept = () => {
253
- setState('success');
254
- };
255
- const handleReject = () => {
256
- setState('error');
257
- };
258
- return (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsx(Banner, { ...args, appearance: state === 'success'
259
- ? 'success'
260
- : state === 'error'
261
- ? 'error'
262
- : 'info', title: state === 'success'
263
- ? 'Accepted!'
264
- : state === 'error'
265
- ? 'Rejected!'
266
- : 'Banner with Action', primaryAction: state === 'idle' ? (_jsx(Button, { appearance: 'transparent', size: 'sm', onPress: handleAccept, children: "Accept" })) : undefined, secondaryAction: state === 'idle' ? (_jsx(Button, { appearance: 'no-background', size: 'sm', onPress: handleReject, children: "Reject" })) : undefined, onClose: () => setState('idle'), closeAriaLabel: 'Reset banner state' }) }));
267
- },
268
- };
@@ -1,87 +0,0 @@
1
- import type { StoryObj } from '@storybook/react-vite';
2
- import { BottomSheet } from './BottomSheet';
3
- declare const meta: {
4
- component: {
5
- ({ onOpen, onClose, onDismiss, onBack, onAnimate, children, hideCloseButton, enablePanDownToClose, enableDynamicSizing, enableBlurKeyboardOnGesture, enableHandlePanningGesture, maxDynamicContentSize, detached, hideBackdrop, backdropPressBehavior, onBackdropPress, onChange, snapPoints, ref, ...props }: import("./types").BottomSheetProps): import("react/jsx-runtime").JSX.Element;
6
- displayName: string;
7
- };
8
- subcomponents: {
9
- BottomSheetHeader: {
10
- ({ lx, style, title, description, appearance, spacing, ...props }: import("./types").BottomSheetHeaderProps): import("react/jsx-runtime").JSX.Element | null;
11
- displayName: string;
12
- };
13
- };
14
- title: string;
15
- parameters: {
16
- docs: {
17
- source: {
18
- language: string;
19
- format: boolean;
20
- type: string;
21
- };
22
- story: {
23
- inline: boolean;
24
- iframeHeight: number;
25
- };
26
- };
27
- };
28
- argTypes: {
29
- snapPoints: {
30
- control: "select";
31
- options: (string | undefined)[];
32
- mapping: {
33
- undefined: undefined;
34
- full: string;
35
- medium: string;
36
- small: string;
37
- '[150, 300]': number[];
38
- '["25%", "50%"]': string[];
39
- };
40
- };
41
- onBack: {
42
- control: "select";
43
- options: string[];
44
- mapping: {
45
- '() => {}': () => null;
46
- undefined: undefined;
47
- };
48
- };
49
- onClose: {
50
- control: "select";
51
- options: string[];
52
- mapping: {
53
- '() => {}': () => null;
54
- undefined: undefined;
55
- };
56
- };
57
- onDismiss: {
58
- control: "select";
59
- options: string[];
60
- mapping: {
61
- '() => {}': () => null;
62
- undefined: undefined;
63
- };
64
- };
65
- backdropPressBehavior: {
66
- control: "select";
67
- options: (string | number)[];
68
- mapping: {
69
- none: string;
70
- close: string;
71
- collapse: string;
72
- 1: number;
73
- };
74
- };
75
- };
76
- };
77
- export default meta;
78
- type Story = StoryObj<typeof BottomSheet>;
79
- export declare const Base: Story;
80
- export declare const TitleExpanded: Story;
81
- export declare const DynamicSizingWithoutSnapPoints: Story;
82
- export declare const DynamicSizingWithSnapPoints: Story;
83
- export declare const PreventClose: Story;
84
- export declare const ScrollView: Story;
85
- export declare const VirtualList: Story;
86
- export declare const VirtualizedList: Story;
87
- //# sourceMappingURL=BottomSheet.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8E0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAwCzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}
@@ -1,266 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button } from '../Button';
3
- import { Box, Text } from '../Utility';
4
- import { BottomSheet } from './BottomSheet';
5
- import { BottomSheetHeader } from './BottomSheetHeader';
6
- import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetView, BottomSheetVirtualizedList, } from './Scrollables';
7
- import { useBottomSheetRef } from './useBottomSheetRef';
8
- const meta = {
9
- component: BottomSheet,
10
- subcomponents: { BottomSheetHeader },
11
- title: 'Containment/BottomSheet',
12
- parameters: {
13
- docs: {
14
- source: {
15
- language: 'tsx',
16
- format: true,
17
- type: 'code',
18
- },
19
- story: {
20
- inline: false,
21
- iframeHeight: 400,
22
- },
23
- },
24
- },
25
- argTypes: {
26
- snapPoints: {
27
- control: 'select',
28
- options: [
29
- undefined,
30
- 'full',
31
- 'medium',
32
- 'small',
33
- '[150, 300]',
34
- '["25%", "50%"]',
35
- ],
36
- mapping: {
37
- undefined: undefined,
38
- full: 'full',
39
- medium: 'medium',
40
- small: 'small',
41
- '[150, 300]': [150, 300],
42
- '["25%", "50%"]': ['25%', '50%'],
43
- },
44
- },
45
- onBack: {
46
- control: 'select',
47
- options: ['() => {}', 'undefined'],
48
- mapping: {
49
- '() => {}': () => {
50
- return null;
51
- },
52
- undefined: undefined,
53
- },
54
- },
55
- onClose: {
56
- control: 'select',
57
- options: ['() => {}', 'undefined'],
58
- mapping: {
59
- '() => {}': () => {
60
- return null;
61
- },
62
- undefined: undefined,
63
- },
64
- },
65
- onDismiss: {
66
- control: 'select',
67
- options: ['() => {}', 'undefined'],
68
- mapping: {
69
- '() => {}': () => {
70
- return null;
71
- },
72
- undefined: undefined,
73
- },
74
- },
75
- backdropPressBehavior: {
76
- control: 'select',
77
- options: ['none', 'close', 'collapse', 1],
78
- mapping: {
79
- none: 'none',
80
- close: 'close',
81
- collapse: 'collapse',
82
- 1: 1,
83
- },
84
- },
85
- },
86
- };
87
- export default meta;
88
- export const Base = {
89
- args: {
90
- snapPoints: 'full',
91
- hideCloseButton: false,
92
- onBack: undefined,
93
- onClose: undefined,
94
- enableHandlePanningGesture: true,
95
- enablePanDownToClose: true,
96
- enableBlurKeyboardOnGesture: true,
97
- enableDynamicSizing: false,
98
- detached: false,
99
- backdropPressBehavior: 'close',
100
- },
101
- render: (args) => {
102
- const bottomSheetRef = useBottomSheetRef();
103
- return (_jsxs(Box, { lx: {
104
- height: 's320',
105
- width: 'full',
106
- alignItems: 'center',
107
- justifyContent: 'center',
108
- paddingTop: 's32',
109
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Title', appearance: 'compact', description: 'Description' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Et quia voluptates eum, sunt asperiores quod." }, index))) })] }) })] }));
110
- },
111
- };
112
- export const TitleExpanded = {
113
- args: {
114
- snapPoints: 'full',
115
- hideCloseButton: false,
116
- enableHandlePanningGesture: true,
117
- enablePanDownToClose: true,
118
- enableBlurKeyboardOnGesture: true,
119
- enableDynamicSizing: false,
120
- detached: false,
121
- },
122
- render: (args) => {
123
- const bottomSheetRef = useBottomSheetRef();
124
- return (_jsxs(Box, { lx: {
125
- height: 's320',
126
- width: 'full',
127
- alignItems: 'center',
128
- justifyContent: 'center',
129
- paddingTop: 's32',
130
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Expanded title', appearance: 'expanded', description: 'Expanded description.' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: _jsx(Text, { typography: 'body2', lx: { color: 'base' }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor! Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla." }) })] }) })] }));
131
- },
132
- };
133
- export const DynamicSizingWithoutSnapPoints = {
134
- args: {
135
- enableDynamicSizing: true,
136
- snapPoints: null,
137
- },
138
- render: (args) => {
139
- const bottomSheetRef = useBottomSheetRef();
140
- return (_jsxs(Box, { lx: {
141
- height: 's320',
142
- width: 'full',
143
- alignItems: 'center',
144
- justifyContent: 'center',
145
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 5 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
146
- },
147
- };
148
- export const DynamicSizingWithSnapPoints = {
149
- args: {
150
- enableDynamicSizing: true,
151
- snapPoints: [150, 300],
152
- },
153
- render: (args) => {
154
- const bottomSheetRef = useBottomSheetRef();
155
- return (_jsxs(Box, { lx: {
156
- height: 's320',
157
- width: 'full',
158
- alignItems: 'center',
159
- justifyContent: 'center',
160
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Dynamic Sizing', appearance: 'compact', description: 'This bottom sheet adapts to its content height and has snap points' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit."] }, index))) })] }) })] }));
161
- },
162
- };
163
- export const PreventClose = {
164
- args: {
165
- snapPoints: 'full',
166
- hideCloseButton: true,
167
- enablePanDownToClose: false,
168
- backdropPressBehavior: 'none',
169
- },
170
- render: (args) => {
171
- const bottomSheetRef = useBottomSheetRef();
172
- return (_jsxs(Box, { lx: {
173
- height: 's320',
174
- width: 'full',
175
- alignItems: 'center',
176
- justifyContent: 'center',
177
- paddingTop: 's32',
178
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetView, { children: [_jsx(BottomSheetHeader, { title: 'Hidden Close Button', appearance: 'compact', description: 'This bottom sheet cannot be closed by dragging or button' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": This bottom sheet stays open and cannot be dismissed by the user. You would need to programmatically close it using the ref."] }, index))) })] }) })] }));
179
- },
180
- };
181
- export const ScrollView = {
182
- args: {
183
- snapPoints: 'full',
184
- },
185
- render: (args) => {
186
- const bottomSheetRef = useBottomSheetRef();
187
- return (_jsxs(Box, { lx: {
188
- height: 's320',
189
- width: 'full',
190
- alignItems: 'center',
191
- justifyContent: 'center',
192
- backgroundColor: 'base',
193
- paddingTop: 's32',
194
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsx(BottomSheet, { ...args, ref: bottomSheetRef, children: _jsxs(BottomSheetScrollView, { children: [_jsx(BottomSheetHeader, { title: 'Scrollable Content', appearance: 'compact', description: 'This bottom sheet contains a scrollable view' }), _jsx(Box, { lx: { flexDirection: 'column', gap: 's12' }, children: Array.from({ length: 20 }).map((_, index) => (_jsxs(Text, { typography: 'body2', lx: { color: 'base' }, children: ["Item ", index + 1, ": Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae excepturi odit, quis tenetur iste perspiciatis mollitia porro velit laborum quasi numquam reiciendis dolor!"] }, index))) })] }) })] }));
195
- },
196
- };
197
- export const VirtualList = {
198
- args: {
199
- snapPoints: 'full',
200
- },
201
- render: (args) => {
202
- const bottomSheetRef = useBottomSheetRef();
203
- const data = Array.from({ length: 100 }, (_, i) => ({
204
- id: i.toString(),
205
- title: `Item ${i + 1}`,
206
- description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
207
- }));
208
- return (_jsxs(Box, { lx: {
209
- height: 's320',
210
- width: 'full',
211
- alignItems: 'center',
212
- justifyContent: 'center',
213
- paddingTop: 's32',
214
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtual List', appearance: 'compact', description: 'This bottom sheet contains a virtualized list' }), _jsx(BottomSheetFlatList, { data: data, keyExtractor: (item) => item.id, renderItem: ({ item }) => {
215
- const typedItem = item;
216
- return (_jsxs(Box, { lx: {
217
- flexDirection: 'column',
218
- gap: 's4',
219
- borderBottomWidth: 's1',
220
- borderColor: 'base',
221
- paddingVertical: 's12',
222
- }, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: typedItem.title }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: typedItem.description })] }));
223
- } })] })] }));
224
- },
225
- };
226
- export const VirtualizedList = {
227
- args: {
228
- snapPoints: 'full',
229
- hideCloseButton: false,
230
- enableHandlePanningGesture: true,
231
- enablePanDownToClose: true,
232
- enableBlurKeyboardOnGesture: true,
233
- enableDynamicSizing: false,
234
- detached: false,
235
- },
236
- render: (args) => {
237
- const bottomSheetRef = useBottomSheetRef();
238
- const data = Array.from({ length: 100 }, (_, i) => ({
239
- id: i.toString(),
240
- title: `Item ${i + 1}`,
241
- description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
242
- }));
243
- return (_jsxs(Box, { lx: {
244
- height: 's320',
245
- width: 'full',
246
- alignItems: 'center',
247
- justifyContent: 'center',
248
- paddingTop: 's32',
249
- }, children: [_jsx(Button, { size: 'sm', onPress: () => bottomSheetRef.current?.present(), children: "Toggle open" }), _jsxs(BottomSheet, { ...args, ref: bottomSheetRef, children: [_jsx(BottomSheetHeader, { spacing: true, title: 'Virtualized List', appearance: 'compact', description: 'This bottom sheet uses a VirtualizedList with custom getItem/getItemCount' }), _jsx(BottomSheetVirtualizedList, { data: data, getItem: (items, index) => {
250
- const typedData = items;
251
- return typedData[index];
252
- }, getItemCount: (items) => {
253
- const typedData = items;
254
- return typedData.length;
255
- }, keyExtractor: (item) => item.id, renderItem: ({ item }) => {
256
- const typedItem = item;
257
- return (_jsxs(Box, { lx: {
258
- flexDirection: 'column',
259
- gap: 's4',
260
- borderBottomWidth: 's1',
261
- borderColor: 'base',
262
- paddingVertical: 's12',
263
- }, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: typedItem.title }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: typedItem.description })] }));
264
- } })] })] }));
265
- },
266
- };
@@ -1,16 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { Button } from './Button';
3
- declare const meta: Meta<typeof Button>;
4
- export default meta;
5
- type Story = StoryObj<typeof Button>;
6
- export declare const Base: Story;
7
- export declare const IconText: Story;
8
- export declare const Loading: Story;
9
- export declare const AppearanceShowcase: Story;
10
- export declare const ContentTypesShowcase: Story;
11
- export declare const SizesShowcase: Story;
12
- export declare const StatesShowcase: Story;
13
- export declare const ResponsiveLayout: Story;
14
- export declare const LabelTruncate: Story;
15
- export declare const InteractiveLoadingStates: Story;
16
- //# sourceMappingURL=Button.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AASrC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAsCtC,CAAC"}