@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,106 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { Settings, ChevronRight, Wallet } from '../../Symbols';
4
- import { Switch } from '../Switch/Switch';
5
- import { Tag } from '../Tag/Tag';
6
- import { Box } from '../Utility';
7
- import { ListItem, ListItemLeading, ListItemContent, ListItemTitle, ListItemDescription, ListItemTrailing, ListItemSpot, ListItemIcon, ListItemTruncate, } from './ListItem';
8
- const meta = {
9
- component: ListItem,
10
- title: 'Containment/ListItem',
11
- subcomponents: {
12
- ListItemLeading,
13
- ListItemContent,
14
- ListItemTitle,
15
- ListItemDescription,
16
- ListItemTrailing,
17
- ListItemSpot,
18
- ListItemIcon,
19
- ListItemTruncate,
20
- },
21
- parameters: {
22
- layout: 'padded',
23
- backgrounds: { default: 'light' },
24
- docs: {
25
- source: {
26
- language: 'tsx',
27
- format: true,
28
- type: 'code',
29
- },
30
- },
31
- },
32
- argTypes: {
33
- disabled: {
34
- control: 'boolean',
35
- description: 'Whether the list item is disabled',
36
- },
37
- onPress: {
38
- action: 'pressed',
39
- description: 'The function to be called when the list item is pressed',
40
- },
41
- },
42
- };
43
- export default meta;
44
- export const Base = {
45
- args: {
46
- lx: { maxWidth: 's320' },
47
- },
48
- render: (args) => (_jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Item with Icon and Description" }), _jsx(ListItemDescription, { children: "Additional information" })] })] }) })),
49
- parameters: {
50
- docs: {
51
- source: {
52
- code: `
53
- <ListItem>
54
- <ListItemLeading>
55
- <ListItemSpot appearance="icon" icon={Settings} />
56
- <ListItemContent>
57
- <ListItemTitle>Item with Icon and Description</ListItemTitle>
58
- <ListItemDescription>Additional information</ListItemDescription>
59
- </ListItemContent>
60
- </ListItemLeading>
61
- </ListItem>
62
- `,
63
- },
64
- },
65
- },
66
- };
67
- export const VariantsShowcase = {
68
- render: () => {
69
- const [selected, setSelected] = useState(false);
70
- return (_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's320', gap: 's8' }, children: [_jsx(ListItem, { children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Simple composition" }), _jsx(ListItemDescription, { children: "With description" })] })] }) }), _jsxs(ListItem, { onPress: () => setSelected(!selected), children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Switch Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: selected, onCheckedChange: setSelected }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'error' }, children: "-7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'success' }, children: "+7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Tag Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Tag, { size: 'sm', label: 'New', appearance: 'accent' }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Complex 1" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "With description" }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Complex 2" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' }), _jsx(ListItemTruncate, { variant: 'title', children: "1200.12" })] }), _jsx(ListItemDescription, { children: _jsx(Tag, { size: 'sm', label: 'BTC', appearance: 'gray' }) })] }) })] })] }));
71
- },
72
- };
73
- export const DisabledState = {
74
- args: {
75
- disabled: true,
76
- },
77
- render: (args) => (_jsxs(Box, { lx: { flexDirection: 'column', width: 's320' }, children: [_jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: false, disabled: args.disabled }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }) })] })),
78
- parameters: {
79
- docs: {
80
- source: {
81
- code: `
82
- <ListItem disabled>
83
- <ListItemLeading>
84
- <ListItemSpot appearance="icon" icon={Settings} />
85
- <ListItemContent>
86
- <ListItemTitle>Disabled Item</ListItemTitle>
87
- <ListItemDescription>This item is disabled</ListItemDescription>
88
- </ListItemContent>
89
- </ListItemLeading>
90
- <ListItemTrailing>
91
- <ChevronRight size={24} />
92
- </ListItemTrailing>
93
- </ListItem>
94
- `,
95
- },
96
- },
97
- },
98
- };
99
- export const ResponsiveLayout = {
100
- render: () => (_jsx(Box, { lx: {
101
- width: 's400',
102
- borderWidth: 's1',
103
- borderColor: 'mutedSubtle',
104
- padding: 's16',
105
- }, children: _jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Short Title" }), _jsx(ListItemDescription, { children: "Short description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Long Title that should truncate appropriately" }), _jsx(ListItemDescription, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Long Title that should truncate appropriately" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] })] }) })),
106
- };
@@ -1,10 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { NavBar } from './NavBar';
3
- declare const meta: Meta<typeof NavBar>;
4
- export default meta;
5
- type Story = StoryObj<typeof NavBar>;
6
- export declare const Base: Story;
7
- export declare const Expanded: Story;
8
- export declare const WithCoinCapsule: Story;
9
- export declare const WithMultipleTrailingActions: Story;
10
- //# sourceMappingURL=NavBar.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/NavBar/NavBar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EACL,MAAM,EAOP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA6B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KAwBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA8BzC,CAAC"}
@@ -1,72 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CryptoIcon } from '@ledgerhq/crypto-icons';
3
- import { MoreHorizontal, Settings } from '../../Symbols';
4
- import { IconButton } from '../IconButton';
5
- import { NavBar, NavBarBackButton, NavBarCoinCapsule, NavBarContent, NavBarDescription, NavBarTitle, NavBarTrailing, } from './NavBar';
6
- const meta = {
7
- component: NavBar,
8
- title: 'Navigation/NavBar',
9
- subcomponents: {
10
- NavBarBackButton,
11
- NavBarContent,
12
- NavBarTitle,
13
- NavBarDescription,
14
- NavBarCoinCapsule,
15
- NavBarTrailing,
16
- },
17
- parameters: {
18
- layout: 'centered',
19
- backgrounds: { default: 'light' },
20
- docs: {
21
- source: {
22
- language: 'tsx',
23
- format: true,
24
- type: 'code',
25
- },
26
- },
27
- },
28
- argTypes: {
29
- appearance: {
30
- control: 'select',
31
- options: ['compact', 'expanded'],
32
- description: 'Controls the appearance/layout of the NavBar',
33
- },
34
- },
35
- };
36
- export default meta;
37
- export const Base = {
38
- args: {
39
- appearance: 'compact',
40
- lx: {
41
- width: 's480',
42
- },
43
- },
44
- render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsxs(NavBarContent, { children: [_jsx(NavBarTitle, { children: "Title" }), _jsx(NavBarDescription, { children: "Description" })] }), _jsx(NavBarTrailing, { children: _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: MoreHorizontal, accessibilityLabel: 'More options' }) })] })),
45
- };
46
- export const Expanded = {
47
- args: {
48
- appearance: 'expanded',
49
- lx: {
50
- width: 's480',
51
- },
52
- },
53
- render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsxs(NavBarContent, { children: [_jsx(NavBarTitle, { children: "Account Details" }), _jsx(NavBarDescription, { children: "View and manage your account" })] }), _jsx(NavBarTrailing, { children: _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: Settings, accessibilityLabel: 'Settings' }) })] })),
54
- };
55
- export const WithCoinCapsule = {
56
- args: {
57
- appearance: 'compact',
58
- lx: {
59
- width: 's480',
60
- },
61
- },
62
- render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsx(NavBarContent, { children: _jsx(NavBarCoinCapsule, { ticker: 'BTC', icon: _jsx(CryptoIcon, { ledgerId: 'bitcoin', ticker: 'BTC', size: '24px' }) }) }), _jsx(NavBarTrailing, { children: _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: MoreHorizontal, accessibilityLabel: 'More options' }) })] })),
63
- };
64
- export const WithMultipleTrailingActions = {
65
- args: {
66
- appearance: 'compact',
67
- lx: {
68
- width: 's480',
69
- },
70
- },
71
- render: (args) => (_jsxs(NavBar, { ...args, children: [_jsx(NavBarBackButton, { onPress: () => console.log('Back pressed') }), _jsxs(NavBarContent, { children: [_jsx(NavBarTitle, { children: "Portfolio" }), _jsx(NavBarDescription, { children: "Manage your assets" })] }), _jsxs(NavBarTrailing, { children: [_jsx(IconButton, { appearance: 'no-background', size: 'md', icon: Settings, accessibilityLabel: 'Settings' }), _jsx(IconButton, { appearance: 'no-background', size: 'md', icon: MoreHorizontal, accessibilityLabel: 'More options' })] })] })),
72
- };
@@ -1,27 +0,0 @@
1
- import type { StoryObj } from '@storybook/react-native-web-vite';
2
- declare const meta: {
3
- title: string;
4
- component: {
5
- ({ currentPage, totalPages, lx, ref, ...props }: import("./types").PageIndicatorProps): import("react/jsx-runtime").JSX.Element;
6
- displayName: string;
7
- };
8
- parameters: {
9
- layout: string;
10
- backgrounds: {
11
- default: string;
12
- };
13
- };
14
- argTypes: {
15
- currentPage: {
16
- control: "number";
17
- };
18
- totalPages: {
19
- control: "number";
20
- };
21
- };
22
- };
23
- export default meta;
24
- type Story = StoryObj<typeof meta>;
25
- export declare const Base: Story;
26
- export declare const Interactive: Story;
27
- //# sourceMappingURL=PageIndicator.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/PageIndicator/PageIndicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAOvE,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAW4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AA0CF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC"}
@@ -1,42 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { Box, Text, IconButton } from '../';
4
- import { useTheme } from '../../../styles';
5
- import { ArrowLeft, ArrowRight } from '../../Symbols';
6
- import { PageIndicator } from './PageIndicator';
7
- const meta = {
8
- title: 'Communication/PageIndicator',
9
- component: PageIndicator,
10
- parameters: {
11
- layout: 'centered',
12
- backgrounds: { default: 'light' },
13
- },
14
- argTypes: {
15
- currentPage: { control: 'number' },
16
- totalPages: { control: 'number' },
17
- },
18
- };
19
- export default meta;
20
- export const Base = {
21
- args: {
22
- currentPage: 1,
23
- totalPages: 5,
24
- },
25
- };
26
- const InteractiveComponent = ({ totalPages }) => {
27
- const [page, setPage] = useState(1);
28
- const { theme } = useTheme();
29
- return (_jsxs(Box, { lx: { gap: 's16', alignItems: 'center', width: 'full' }, children: [_jsxs(Box, { lx: {
30
- flexDirection: 'row',
31
- gap: 's16',
32
- alignItems: 'center',
33
- justifyContent: 'center',
34
- }, children: [_jsx(IconButton, { icon: ArrowLeft, size: 'xs', accessibilityLabel: 'Previous page', appearance: 'transparent', onPress: () => setPage((v) => Math.max(1, v - 1)) }), _jsx(Text, { lx: { color: 'base', width: 's28', textAlign: 'center' }, style: { ...theme.typographies.heading2SemiBold }, children: page }), _jsx(IconButton, { icon: ArrowRight, size: 'xs', accessibilityLabel: 'Next page', appearance: 'transparent', onPress: () => setPage((v) => Math.min(totalPages, v + 1)) })] }), _jsx(PageIndicator, { currentPage: page, totalPages: totalPages })] }));
35
- };
36
- export const Interactive = {
37
- args: {
38
- currentPage: 1,
39
- totalPages: 9,
40
- },
41
- render: (args) => _jsx(InteractiveComponent, { totalPages: args.totalPages }),
42
- };
@@ -1,12 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { SearchInput } from './SearchInput';
3
- declare const meta: Meta<typeof SearchInput>;
4
- export default meta;
5
- type Story = StoryObj<typeof SearchInput>;
6
- export declare const Base: Story;
7
- export declare const WithContent: Story;
8
- export declare const WithError: Story;
9
- export declare const DisabledSearchInput: Story;
10
- export declare const WithHiddenClearButton: Story;
11
- export declare const WithClearCallback: Story;
12
- //# sourceMappingURL=SearchInput.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAiClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}
@@ -1,98 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { View } from 'react-native';
4
- import { SearchInput } from './SearchInput';
5
- const meta = {
6
- component: SearchInput,
7
- title: 'Input/SearchInput',
8
- args: {
9
- appearance: 'plain',
10
- },
11
- parameters: {
12
- docs: {
13
- source: {
14
- language: 'tsx',
15
- format: true,
16
- type: 'code',
17
- },
18
- },
19
- },
20
- argTypes: {
21
- placeholder: {
22
- control: 'text',
23
- description: 'Placeholder text when input is empty',
24
- },
25
- errorMessage: {
26
- control: 'text',
27
- description: 'Error message to display below input',
28
- },
29
- editable: {
30
- control: 'boolean',
31
- description: 'Whether the input is editable',
32
- },
33
- hideClearButton: {
34
- control: 'boolean',
35
- description: 'Hide the clear button',
36
- },
37
- },
38
- };
39
- export default meta;
40
- const SearchInputStory = (args) => {
41
- const [query, setQuery] = useState(args.initialValue ?? '');
42
- return (_jsx(View, { style: {
43
- flex: 1,
44
- minHeight: 96,
45
- alignItems: 'center',
46
- justifyContent: 'center',
47
- padding: 24,
48
- }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(SearchInput, { ...args, value: query, onChangeText: setQuery, onClear: args.onClear }) }) }));
49
- };
50
- export const Base = {
51
- render: (args) => _jsx(SearchInputStory, { ...args }),
52
- args: {
53
- placeholder: 'Search products',
54
- editable: true,
55
- hideClearButton: false,
56
- },
57
- };
58
- export const WithContent = {
59
- render: (args) => _jsx(SearchInputStory, { ...args, initialValue: 'Search text' }),
60
- args: {
61
- placeholder: 'Search products',
62
- editable: true,
63
- hideClearButton: false,
64
- },
65
- };
66
- export const WithError = {
67
- render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Invalid search' })),
68
- args: {
69
- placeholder: 'Search products',
70
- errorMessage: 'Search term is invalid',
71
- editable: true,
72
- hideClearButton: false,
73
- },
74
- };
75
- export const DisabledSearchInput = {
76
- render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Disabled search' })),
77
- args: {
78
- placeholder: 'Search products',
79
- editable: false,
80
- hideClearButton: false,
81
- },
82
- };
83
- export const WithHiddenClearButton = {
84
- render: (args) => _jsx(SearchInputStory, { ...args, initialValue: 'Search text' }),
85
- args: {
86
- placeholder: 'Search products',
87
- editable: true,
88
- hideClearButton: true,
89
- },
90
- };
91
- export const WithClearCallback = {
92
- render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Search cleared!') })),
93
- args: {
94
- placeholder: 'Search products',
95
- editable: true,
96
- hideClearButton: false,
97
- },
98
- };
@@ -1,58 +0,0 @@
1
- import type { StoryObj } from '@storybook/react-native-web-vite';
2
- import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
3
- declare const meta: {
4
- title: string;
5
- component: typeof SegmentedControl;
6
- subcomponents: {
7
- SegmentedControlButton: typeof SegmentedControlButton;
8
- };
9
- parameters: {
10
- layout: string;
11
- backgrounds: {
12
- default: string;
13
- };
14
- };
15
- argTypes: {
16
- onSelectedChange: {
17
- action: string;
18
- description: string;
19
- table: {
20
- type: {
21
- summary: string;
22
- };
23
- };
24
- };
25
- accessibilityLabel: {
26
- control: "text";
27
- description: string;
28
- table: {
29
- type: {
30
- summary: string;
31
- };
32
- };
33
- };
34
- selectedValue: {
35
- control: "text";
36
- description: string;
37
- table: {
38
- type: {
39
- summary: string;
40
- };
41
- };
42
- };
43
- children: {
44
- control: false;
45
- description: string;
46
- table: {
47
- type: {
48
- summary: string;
49
- };
50
- };
51
- };
52
- };
53
- };
54
- export default meta;
55
- type Story = StoryObj<typeof meta>;
56
- export declare const Base: Story;
57
- export declare const WithIcons: Story;
58
- //# sourceMappingURL=SegmentedControl.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAqBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAC"}
@@ -1,61 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
4
- import { Box } from '../Utility';
5
- import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
6
- const meta = {
7
- title: 'Navigation/SegmentedControl',
8
- component: SegmentedControl,
9
- subcomponents: {
10
- SegmentedControlButton,
11
- },
12
- parameters: {
13
- layout: 'centered',
14
- backgrounds: { default: 'light' },
15
- },
16
- argTypes: {
17
- onSelectedChange: {
18
- action: 'change',
19
- description: 'Callback when the selected value changes',
20
- table: {
21
- type: { summary: '(value: string) => void' },
22
- },
23
- },
24
- accessibilityLabel: {
25
- control: 'text',
26
- description: 'Accessible label for the control',
27
- table: {
28
- type: { summary: 'string' },
29
- },
30
- },
31
- selectedValue: {
32
- control: 'text',
33
- description: 'The value of the currently selected segment (drives the sliding pill)',
34
- table: {
35
- type: { summary: 'string' },
36
- },
37
- },
38
- children: {
39
- control: false,
40
- description: 'SegmentedControlButton elements',
41
- table: {
42
- type: { summary: 'ReactNode' },
43
- },
44
- },
45
- },
46
- };
47
- export default meta;
48
- export const Base = {
49
- args: {},
50
- render: () => {
51
- const [state, setState] = useState('send');
52
- return (_jsx(Box, { lx: { width: 's256' }, children: _jsxs(SegmentedControl, { selectedValue: state, onSelectedChange: setState, accessibilityLabel: 'Transaction type', children: [_jsx(SegmentedControlButton, { value: 'send', children: "Send" }), _jsx(SegmentedControlButton, { value: 'receive', children: "Receive" }), _jsx(SegmentedControlButton, { value: 'buy', children: "Buy" })] }) }));
53
- },
54
- };
55
- export const WithIcons = {
56
- args: {},
57
- render: () => {
58
- const [state, setState] = useState('tokens');
59
- return (_jsxs(SegmentedControl, { selectedValue: state, onSelectedChange: setState, accessibilityLabel: 'Asset section', children: [_jsx(SegmentedControlButton, { value: 'tokens', icon: Coins, children: "Tokens" }), _jsx(SegmentedControlButton, { value: 'nfts', icon: Nft, children: "NFTs" }), _jsx(SegmentedControlButton, { value: 'activity', icon: TransferHorizontal, children: "Activity" }), _jsx(SegmentedControlButton, { value: 'settings', icon: Settings, children: "Settings" })] }));
60
- },
61
- };
@@ -1,11 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { Select } from './Select';
3
- declare const meta: Meta<typeof Select>;
4
- export default meta;
5
- type Story = StoryObj<typeof Select>;
6
- export declare const Base: Story;
7
- export declare const WithGroups: Story;
8
- export declare const WithDisabledItems: Story;
9
- export declare const DisabledSelect: Story;
10
- export declare const WithChangeCallback: Story;
11
- //# sourceMappingURL=Select.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EACL,MAAM,EASP,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAgB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KA2ClB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8ChC,CAAC"}
@@ -1,83 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { Box } from '../Utility';
4
- import { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
5
- import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemText, SelectGroup, SelectLabel, SelectSeparator, } from './Select';
6
- const meta = {
7
- component: Select,
8
- subcomponents: {
9
- SelectTrigger,
10
- SelectValue,
11
- SelectContent,
12
- SelectItem,
13
- SelectItemText,
14
- SelectGroup,
15
- SelectLabel,
16
- SelectSeparator,
17
- },
18
- title: 'Selection/Select',
19
- parameters: {
20
- layout: 'fullscreen',
21
- },
22
- };
23
- export default meta;
24
- export const Base = {
25
- render: () => {
26
- const [value, setValue] = useState('apple');
27
- return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
28
- flex: 1,
29
- minHeight: 400,
30
- padding: 24,
31
- width: '100%',
32
- }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Choose a fruit', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) }), _jsx(SelectItem, { value: 'grape', children: _jsx(SelectItemText, { children: "Grape" }) }), _jsx(SelectItem, { value: 'mango', children: _jsx(SelectItemText, { children: "Mango" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
33
- },
34
- };
35
- export const WithGroups = {
36
- render: () => {
37
- const [value, setValue] = useState('btc');
38
- return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
39
- flex: 1,
40
- minHeight: 400,
41
- padding: 24,
42
- width: '100%',
43
- }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select cryptocurrency', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Popular" }), _jsx(SelectItem, { value: 'btc', children: _jsx(SelectItemText, { children: "Bitcoin" }) }), _jsx(SelectItem, { value: 'eth', children: _jsx(SelectItemText, { children: "Ethereum" }) })] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Altcoins" }), _jsx(SelectItem, { value: 'ada', children: _jsx(SelectItemText, { children: "Cardano" }) }), _jsx(SelectItem, { value: 'dot', children: _jsx(SelectItemText, { children: "Polkadot" }) }), _jsx(SelectItem, { value: 'sol', children: _jsx(SelectItemText, { children: "Solana" }) })] })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
44
- },
45
- };
46
- export const WithDisabledItems = {
47
- render: () => {
48
- const [value, setValue] = useState('option1');
49
- return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
50
- flex: 1,
51
- minHeight: 400,
52
- padding: 24,
53
- width: '100%',
54
- }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, children: [_jsx(SelectTrigger, { label: 'Select option', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'option1', children: _jsx(SelectItemText, { children: "Option 1" }) }), _jsx(SelectItem, { value: 'option2', disabled: true, children: _jsx(SelectItemText, { children: "Option 2 (Disabled)" }) }), _jsx(SelectItem, { value: 'option3', children: _jsx(SelectItemText, { children: "Option 3" }) }), _jsx(SelectItem, { value: 'option4', disabled: true, children: _jsx(SelectItemText, { children: "Option 4 (Disabled)" }) }), _jsx(SelectItem, { value: 'option5', children: _jsx(SelectItemText, { children: "Option 5" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
55
- },
56
- };
57
- export const DisabledSelect = {
58
- render: () => {
59
- const [value, setValue] = useState('apple');
60
- return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
61
- flex: 1,
62
- minHeight: 400,
63
- padding: 24,
64
- width: '100%',
65
- }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: setValue, disabled: true, children: [_jsx(SelectTrigger, { label: 'Disabled select', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'apple', children: _jsx(SelectItemText, { children: "Apple" }) }), _jsx(SelectItem, { value: 'banana', children: _jsx(SelectItemText, { children: "Banana" }) }), _jsx(SelectItem, { value: 'orange', children: _jsx(SelectItemText, { children: "Orange" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
66
- },
67
- };
68
- export const WithChangeCallback = {
69
- render: () => {
70
- const [value, setValue] = useState('option1');
71
- return (_jsxs(_Fragment, { children: [_jsx(Box, { style: {
72
- flex: 1,
73
- minHeight: 400,
74
- padding: 24,
75
- width: '100%',
76
- }, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Select, { value: value, onValueChange: (newValue) => {
77
- setValue(newValue);
78
- alert(`Selected: ${newValue}`);
79
- }, onOpenChange: (open) => {
80
- alert(`Select ${open ? 'opened' : 'closed'}`);
81
- }, children: [_jsx(SelectTrigger, { label: 'Select with callbacks', children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: 'option1', children: _jsx(SelectItemText, { children: "Option 1" }) }), _jsx(SelectItem, { value: 'option2', children: _jsx(SelectItemText, { children: "Option 2" }) }), _jsx(SelectItem, { value: 'option3', children: _jsx(SelectItemText, { children: "Option 3" }) })] })] }) }) }), _jsx(GlobalSelectBottomSheet, {})] }));
82
- },
83
- };
@@ -1,11 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
- import { Skeleton } from './Skeleton';
3
- declare const meta: Meta<typeof Skeleton>;
4
- export default meta;
5
- type Story = StoryObj<typeof Skeleton>;
6
- export declare const Base: Story;
7
- export declare const WithListItem: Story;
8
- export declare const WithTile: Story;
9
- export declare const SizeShowcase: Story;
10
- export declare const ShapeShowcase: Story;
11
- //# sourceMappingURL=Skeleton.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAa/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC"}