@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.
- package/dist/package.json +1 -1
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.js +5 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.js +34 -61
- package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts +1 -0
- package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
- package/dist/src/lib/Components/SegmentedControl/types.d.ts +12 -2
- package/dist/src/lib/Components/SegmentedControl/types.d.ts.map +1 -1
- package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts +19 -0
- package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts.map +1 -0
- package/dist/src/lib/Components/SegmentedControl/usePillLayout.js +46 -0
- package/dist/src/lib/Components/TileButton/TileButton.js +2 -2
- package/jest.config.ts +0 -1
- package/package.json +1 -1
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +8 -1
- package/src/lib/Components/SegmentedControl/SegmentedControl.mdx +1 -38
- package/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx +35 -19
- package/src/lib/Components/SegmentedControl/SegmentedControl.tsx +61 -77
- package/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx +1 -0
- package/src/lib/Components/SegmentedControl/types.ts +12 -2
- package/src/lib/Components/SegmentedControl/usePillLayout.ts +76 -0
- package/src/lib/Components/TileButton/TileButton.tsx +2 -2
- package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx +1 -1
- package/tsconfig.json +3 -16
- package/tsconfig.lib.json +5 -0
- package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts +0 -9
- package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts.map +0 -1
- package/dist/src/lib/Animations/Pulse/Pulse.stories.js +0 -38
- package/dist/src/lib/Animations/Spin/Spin.stories.d.ts +0 -9
- package/dist/src/lib/Animations/Spin/Spin.stories.d.ts.map +0 -1
- package/dist/src/lib/Animations/Spin/Spin.stories.js +0 -27
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts +0 -13
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/AddressInput/AddressInput.stories.js +0 -128
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts +0 -10
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.js +0 -127
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts +0 -16
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/AmountInput/AmountInput.stories.js +0 -186
- package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts +0 -22
- package/dist/src/lib/Components/Avatar/Avatar.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Avatar/Avatar.stories.js +0 -72
- package/dist/src/lib/Components/Banner/Banner.stories.d.ts +0 -16
- package/dist/src/lib/Components/Banner/Banner.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Banner/Banner.stories.js +0 -268
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts +0 -87
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.js +0 -266
- package/dist/src/lib/Components/Button/Button.stories.d.ts +0 -16
- package/dist/src/lib/Components/Button/Button.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Button/Button.stories.js +0 -143
- package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts +0 -16
- package/dist/src/lib/Components/CardButton/CardButton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/CardButton/CardButton.stories.js +0 -208
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts +0 -14
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Checkbox/Checkbox.stories.js +0 -72
- package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts +0 -11
- package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.js +0 -91
- package/dist/src/lib/Components/Divider/Divider.stories.d.ts +0 -9
- package/dist/src/lib/Components/Divider/Divider.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Divider/Divider.stories.js +0 -51
- package/dist/src/lib/Components/Icon/Icon.stories.d.ts +0 -15
- package/dist/src/lib/Components/Icon/Icon.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Icon/Icon.stories.js +0 -137
- package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts +0 -10
- package/dist/src/lib/Components/IconButton/IconButton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/IconButton/IconButton.stories.js +0 -74
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts +0 -11
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.stories.js +0 -90
- package/dist/src/lib/Components/Link/Link.stories.d.ts +0 -17
- package/dist/src/lib/Components/Link/Link.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Link/Link.stories.js +0 -275
- package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts +0 -10
- package/dist/src/lib/Components/ListItem/ListItem.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/ListItem/ListItem.stories.js +0 -106
- package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts +0 -10
- package/dist/src/lib/Components/NavBar/NavBar.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/NavBar/NavBar.stories.js +0 -72
- package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts +0 -27
- package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/PageIndicator/PageIndicator.stories.js +0 -42
- package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts +0 -12
- package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/SearchInput/SearchInput.stories.js +0 -98
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts +0 -58
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/SegmentedControl/SegmentedControl.stories.js +0 -61
- package/dist/src/lib/Components/Select/Select.stories.d.ts +0 -11
- package/dist/src/lib/Components/Select/Select.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Select/Select.stories.js +0 -83
- package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts +0 -11
- package/dist/src/lib/Components/Skeleton/Skeleton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Skeleton/Skeleton.stories.js +0 -49
- package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts +0 -9
- package/dist/src/lib/Components/Spinner/Spinner.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Spinner/Spinner.stories.js +0 -50
- package/dist/src/lib/Components/Spot/Spot.stories.d.ts +0 -12
- package/dist/src/lib/Components/Spot/Spot.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Spot/Spot.stories.js +0 -156
- package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts +0 -9
- package/dist/src/lib/Components/Stepper/Stepper.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Stepper/Stepper.stories.js +0 -35
- package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts +0 -10
- package/dist/src/lib/Components/Subheader/Subheader.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Subheader/Subheader.stories.js +0 -34
- package/dist/src/lib/Components/Switch/Switch.stories.d.ts +0 -14
- package/dist/src/lib/Components/Switch/Switch.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Switch/Switch.stories.js +0 -65
- package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts +0 -50
- package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/TabBar/TabBar.stories.js +0 -60
- package/dist/src/lib/Components/Tag/Tag.stories.d.ts +0 -10
- package/dist/src/lib/Components/Tag/Tag.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Tag/Tag.stories.js +0 -45
- package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts +0 -14
- package/dist/src/lib/Components/TextInput/TextInput.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/TextInput/TextInput.stories.js +0 -128
- package/dist/src/lib/Components/Tile/Tile.stories.d.ts +0 -14
- package/dist/src/lib/Components/Tile/Tile.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Tile/Tile.stories.js +0 -117
- package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts +0 -12
- package/dist/src/lib/Components/TileButton/TileButton.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/TileButton/TileButton.stories.js +0 -63
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts +0 -10
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Tooltip/Tooltip.stories.js +0 -50
- package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts +0 -7
- package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Box/Box.stories.js +0 -42
- package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts +0 -11
- package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.js +0 -105
- package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts +0 -10
- package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js +0 -101
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts +0 -7
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js +0 -47
- package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts +0 -7
- package/dist/src/lib/Components/Utility/Text/Text.stories.d.ts.map +0 -1
- package/dist/src/lib/Components/Utility/Text/Text.stories.js +0 -33
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box } from '../Utility/Box';
|
|
3
|
-
import { Skeleton } from './Skeleton';
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'Communication/Skeleton',
|
|
6
|
-
component: Skeleton,
|
|
7
|
-
parameters: {
|
|
8
|
-
actions: { disable: true },
|
|
9
|
-
},
|
|
10
|
-
argTypes: {
|
|
11
|
-
component: {
|
|
12
|
-
control: 'select',
|
|
13
|
-
options: [undefined, 'list-item', 'tile'],
|
|
14
|
-
description: 'Pre-built skeleton component variant',
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
export default meta;
|
|
19
|
-
export const Base = {
|
|
20
|
-
args: {
|
|
21
|
-
lx: {
|
|
22
|
-
height: 's16',
|
|
23
|
-
width: 's256',
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
render: (args) => (_jsx(Box, { lx: { padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }, children: _jsx(Skeleton, { component: args.component, lx: args.component ? undefined : args.lx }) })),
|
|
27
|
-
};
|
|
28
|
-
export const WithListItem = {
|
|
29
|
-
render: () => (_jsx(Box, { lx: { padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }, children: _jsx(Skeleton, { component: 'list-item' }) })),
|
|
30
|
-
};
|
|
31
|
-
export const WithTile = {
|
|
32
|
-
render: () => (_jsx(Box, { lx: { padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }, children: _jsx(Skeleton, { component: 'tile' }) })),
|
|
33
|
-
};
|
|
34
|
-
export const SizeShowcase = {
|
|
35
|
-
render: () => (_jsxs(Box, { lx: {
|
|
36
|
-
padding: 's16',
|
|
37
|
-
backgroundColor: 'canvas',
|
|
38
|
-
borderRadius: 'md',
|
|
39
|
-
gap: 's4',
|
|
40
|
-
}, children: [_jsx(Skeleton, { lx: { height: 's40', width: 's56' } }), _jsx(Skeleton, { lx: { height: 's12', width: 's112' } }), _jsx(Skeleton, { lx: { height: 's128', width: 's256' } })] })),
|
|
41
|
-
};
|
|
42
|
-
export const ShapeShowcase = {
|
|
43
|
-
render: () => (_jsxs(Box, { lx: {
|
|
44
|
-
padding: 's16',
|
|
45
|
-
backgroundColor: 'canvas',
|
|
46
|
-
borderRadius: 'md',
|
|
47
|
-
gap: 's4',
|
|
48
|
-
}, children: [_jsx(Skeleton, { lx: { height: 's40', width: 's256', borderRadius: 'none' } }), _jsx(Skeleton, { lx: { height: 's40', width: 's256', borderRadius: 'lg' } }), _jsx(Skeleton, { lx: { width: 's48', height: 's48', borderRadius: 'full' } }), _jsx(Skeleton, { lx: { width: 's48', height: 's48', borderRadius: 'md' } })] })),
|
|
49
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Spinner } from './Spinner';
|
|
3
|
-
declare const meta: Meta<typeof Spinner>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Spinner>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const Sizes: Story;
|
|
8
|
-
export declare const Colors: Story;
|
|
9
|
-
//# sourceMappingURL=Spinner.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA2DnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAmCpB,CAAC"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box } from '../Utility/Box';
|
|
3
|
-
import { Text } from '../Utility/Text';
|
|
4
|
-
import { Spinner } from './Spinner';
|
|
5
|
-
const meta = {
|
|
6
|
-
title: 'Communication/Spinner',
|
|
7
|
-
component: Spinner,
|
|
8
|
-
parameters: {
|
|
9
|
-
actions: { disable: true },
|
|
10
|
-
},
|
|
11
|
-
argTypes: {
|
|
12
|
-
size: {
|
|
13
|
-
control: 'select',
|
|
14
|
-
options: [12, 16, 20, 24, 40, 48, 56],
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
export default meta;
|
|
19
|
-
export const Base = {
|
|
20
|
-
args: {
|
|
21
|
-
size: 40,
|
|
22
|
-
},
|
|
23
|
-
render: (args) => _jsx(Spinner, { ...args }),
|
|
24
|
-
};
|
|
25
|
-
export const Sizes = {
|
|
26
|
-
argTypes: {
|
|
27
|
-
size: {
|
|
28
|
-
control: false,
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
render: () => (_jsxs(Box, { lx: {
|
|
32
|
-
flexDirection: 'row',
|
|
33
|
-
alignItems: 'center',
|
|
34
|
-
justifyContent: 'center',
|
|
35
|
-
gap: 's32',
|
|
36
|
-
}, children: [_jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 12 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "12" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 16 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "16" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 20 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "20" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 24 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "24" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "40" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 48 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "48" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 56 }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "56" })] })] })),
|
|
37
|
-
};
|
|
38
|
-
export const Colors = {
|
|
39
|
-
argTypes: {
|
|
40
|
-
size: {
|
|
41
|
-
control: false,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
render: () => (_jsxs(Box, { lx: {
|
|
45
|
-
flexDirection: 'row',
|
|
46
|
-
alignItems: 'center',
|
|
47
|
-
justifyContent: 'center',
|
|
48
|
-
gap: 's32',
|
|
49
|
-
}, children: [_jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40, color: 'base' }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "base" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40, color: 'muted' }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "muted" })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's4' }, children: [_jsx(Spinner, { size: 40, color: 'interactive' }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "interactive" })] })] })),
|
|
50
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Spot } from './Spot';
|
|
3
|
-
declare const meta: Meta<typeof Spot>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Spot>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const AppearanceShowcase: Story;
|
|
8
|
-
export declare const IconVariants: Story;
|
|
9
|
-
export declare const NumberVariants: Story;
|
|
10
|
-
export declare const SizesShowcase: Story;
|
|
11
|
-
export declare const StatesShowcase: Story;
|
|
12
|
-
//# sourceMappingURL=Spot.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Spot.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAsD3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAkDhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyD5B,CAAC"}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Settings, Plus, Heart, Star } from '../../Symbols';
|
|
3
|
-
import { Box, Text } from '../Utility';
|
|
4
|
-
import { Spot } from './Spot';
|
|
5
|
-
const meta = {
|
|
6
|
-
component: Spot,
|
|
7
|
-
title: 'Communication/Spot',
|
|
8
|
-
parameters: {
|
|
9
|
-
docs: {
|
|
10
|
-
source: {
|
|
11
|
-
language: 'tsx',
|
|
12
|
-
format: true,
|
|
13
|
-
type: 'code',
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
argTypes: {
|
|
18
|
-
appearance: {
|
|
19
|
-
control: 'select',
|
|
20
|
-
options: [
|
|
21
|
-
'icon',
|
|
22
|
-
'bluetooth',
|
|
23
|
-
'check',
|
|
24
|
-
'error',
|
|
25
|
-
'warning',
|
|
26
|
-
'info',
|
|
27
|
-
'loader',
|
|
28
|
-
'number',
|
|
29
|
-
],
|
|
30
|
-
description: 'The visual appearance and behavior of the spot',
|
|
31
|
-
},
|
|
32
|
-
size: {
|
|
33
|
-
control: 'select',
|
|
34
|
-
options: [32, 40, 48, 56, 72],
|
|
35
|
-
description: 'The size of the spot',
|
|
36
|
-
},
|
|
37
|
-
disabled: {
|
|
38
|
-
control: 'boolean',
|
|
39
|
-
description: 'Whether the spot looks disabled',
|
|
40
|
-
},
|
|
41
|
-
icon: {
|
|
42
|
-
control: 'select',
|
|
43
|
-
description: 'Icon component to display (required for icon appearance)',
|
|
44
|
-
options: ['None', 'Settings', 'Plus', 'Heart', 'Star'],
|
|
45
|
-
mapping: {
|
|
46
|
-
None: undefined,
|
|
47
|
-
Settings: Settings,
|
|
48
|
-
Plus: Plus,
|
|
49
|
-
Heart: Heart,
|
|
50
|
-
Star: Star,
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
number: {
|
|
54
|
-
control: 'select',
|
|
55
|
-
options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
56
|
-
description: 'Number to display (required for number appearance)',
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
export default meta;
|
|
61
|
-
export const Base = {
|
|
62
|
-
args: {
|
|
63
|
-
appearance: 'icon',
|
|
64
|
-
icon: Settings,
|
|
65
|
-
},
|
|
66
|
-
parameters: {
|
|
67
|
-
docs: {
|
|
68
|
-
source: {
|
|
69
|
-
code: `
|
|
70
|
-
<Spot
|
|
71
|
-
appearance="icon"
|
|
72
|
-
icon={Settings}
|
|
73
|
-
/>
|
|
74
|
-
`,
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
};
|
|
79
|
-
export const AppearanceShowcase = {
|
|
80
|
-
render: () => {
|
|
81
|
-
const appearances = [
|
|
82
|
-
{ name: 'Icon', appearance: 'icon', icon: Settings },
|
|
83
|
-
{ name: 'Bluetooth', appearance: 'bluetooth' },
|
|
84
|
-
{ name: 'Check', appearance: 'check' },
|
|
85
|
-
{ name: 'Error', appearance: 'error' },
|
|
86
|
-
{ name: 'Warning', appearance: 'warning' },
|
|
87
|
-
{ name: 'Info', appearance: 'info' },
|
|
88
|
-
{ name: 'Loader', appearance: 'loader' },
|
|
89
|
-
{ name: 'Number', appearance: 'number', number: 3 },
|
|
90
|
-
];
|
|
91
|
-
return (_jsx(Box, { lx: {
|
|
92
|
-
flexDirection: 'row',
|
|
93
|
-
flexWrap: 'wrap',
|
|
94
|
-
gap: 's16',
|
|
95
|
-
padding: 's8',
|
|
96
|
-
}, children: appearances.map(({ name, appearance, icon, number }) => (_jsxs(Box, { lx: {
|
|
97
|
-
width: 's64',
|
|
98
|
-
flexDirection: 'column',
|
|
99
|
-
alignItems: 'center',
|
|
100
|
-
gap: 's4',
|
|
101
|
-
}, children: [_jsx(Spot, { appearance: appearance, icon: icon, number: number }), _jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: name })] }, appearance))) }));
|
|
102
|
-
},
|
|
103
|
-
};
|
|
104
|
-
export const IconVariants = {
|
|
105
|
-
render: () => {
|
|
106
|
-
const icons = [
|
|
107
|
-
{ name: 'Settings', component: Settings },
|
|
108
|
-
{ name: 'Plus', component: Plus },
|
|
109
|
-
{ name: 'Heart', component: Heart },
|
|
110
|
-
{ name: 'Star', component: Star },
|
|
111
|
-
];
|
|
112
|
-
return (_jsx(Box, { lx: { flexDirection: 'row', gap: 's8', padding: 's8' }, children: icons.map(({ name, component: Icon }) => (_jsx(Spot, { appearance: 'icon', icon: Icon }, name))) }));
|
|
113
|
-
},
|
|
114
|
-
};
|
|
115
|
-
export const NumberVariants = {
|
|
116
|
-
render: () => {
|
|
117
|
-
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
118
|
-
return (_jsx(Box, { lx: {
|
|
119
|
-
flexDirection: 'row',
|
|
120
|
-
flexWrap: 'wrap',
|
|
121
|
-
gap: 's8',
|
|
122
|
-
padding: 's8',
|
|
123
|
-
}, children: numbers.map((num) => (_jsx(Spot, { appearance: 'number', number: num }, num))) }));
|
|
124
|
-
},
|
|
125
|
-
};
|
|
126
|
-
export const SizesShowcase = {
|
|
127
|
-
render: () => {
|
|
128
|
-
const sizes = [32, 40, 48, 56, 72];
|
|
129
|
-
return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's32', padding: 's16' }, children: sizes.map((size) => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Text, { typography: 'heading5SemiBold', children: [size, "px"] }), _jsxs(Box, { lx: { flexDirection: 'row', gap: 's12' }, children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: size }), _jsx(Spot, { appearance: 'info', size: size }), _jsx(Spot, { appearance: 'number', number: 5, size: size })] })] }, size))) }));
|
|
130
|
-
},
|
|
131
|
-
};
|
|
132
|
-
export const StatesShowcase = {
|
|
133
|
-
render: () => {
|
|
134
|
-
return (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsxs(Box, { lx: { flexDirection: 'column', gap: 's8' }, children: [_jsx(Text, { typography: 'body2', children: "Default" }), _jsxs(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's16' }, children: [_jsx(Box, { lx: {
|
|
135
|
-
width: 's64',
|
|
136
|
-
flexDirection: 'column',
|
|
137
|
-
alignItems: 'center',
|
|
138
|
-
gap: 's4',
|
|
139
|
-
}, children: _jsx(Spot, { appearance: 'icon', icon: Settings }) }), _jsx(Box, { lx: {
|
|
140
|
-
width: 's64',
|
|
141
|
-
flexDirection: 'column',
|
|
142
|
-
alignItems: 'center',
|
|
143
|
-
gap: 's4',
|
|
144
|
-
}, children: _jsx(Spot, { appearance: 'bluetooth' }) })] })] }), _jsxs(Box, { lx: { flexDirection: 'column', gap: 's8' }, children: [_jsx(Text, { typography: 'body2', children: "Disabled" }), _jsxs(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's16' }, children: [_jsx(Box, { lx: {
|
|
145
|
-
width: 's64',
|
|
146
|
-
flexDirection: 'column',
|
|
147
|
-
alignItems: 'center',
|
|
148
|
-
gap: 's4',
|
|
149
|
-
}, children: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }) }), _jsx(Box, { lx: {
|
|
150
|
-
width: 's64',
|
|
151
|
-
flexDirection: 'column',
|
|
152
|
-
alignItems: 'center',
|
|
153
|
-
gap: 's4',
|
|
154
|
-
}, children: _jsx(Spot, { appearance: 'bluetooth', disabled: true }) })] })] })] }));
|
|
155
|
-
},
|
|
156
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Stepper } from './Stepper';
|
|
3
|
-
declare const meta: Meta<typeof Stepper>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Stepper>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const DisabledShowcase: Story;
|
|
8
|
-
export declare const WithCustomLabel: Story;
|
|
9
|
-
//# sourceMappingURL=Stepper.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Stepper/Stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAW9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box } from '../Utility/Box';
|
|
3
|
-
import { Text } from '../Utility/Text';
|
|
4
|
-
import { Stepper } from './Stepper';
|
|
5
|
-
const meta = {
|
|
6
|
-
title: 'Communication/Stepper',
|
|
7
|
-
component: Stepper,
|
|
8
|
-
parameters: {
|
|
9
|
-
actions: { disable: true },
|
|
10
|
-
},
|
|
11
|
-
argTypes: {
|
|
12
|
-
currentStep: { control: 'number' },
|
|
13
|
-
totalSteps: { control: 'number' },
|
|
14
|
-
disabled: { control: 'boolean' },
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
export default meta;
|
|
18
|
-
export const Base = {
|
|
19
|
-
args: {
|
|
20
|
-
currentStep: 2,
|
|
21
|
-
totalSteps: 4,
|
|
22
|
-
},
|
|
23
|
-
render: (args) => _jsx(Stepper, { ...args }),
|
|
24
|
-
};
|
|
25
|
-
export const DisabledShowcase = {
|
|
26
|
-
render: () => (_jsxs(Box, { lx: { gap: 's32', alignItems: 'center' }, children: [_jsxs(Box, { lx: { alignItems: 'center', gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Default (2/4)" }), _jsx(Stepper, { currentStep: 2, totalSteps: 4 })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Disabled (2/4)" }), _jsx(Stepper, { currentStep: 2, totalSteps: 4, disabled: true })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Unstarted (0/9)" }), _jsx(Stepper, { currentStep: 0, totalSteps: 9 })] })] })),
|
|
27
|
-
};
|
|
28
|
-
export const WithCustomLabel = {
|
|
29
|
-
args: {
|
|
30
|
-
currentStep: 5,
|
|
31
|
-
totalSteps: 5,
|
|
32
|
-
label: '🎉',
|
|
33
|
-
},
|
|
34
|
-
render: (args) => _jsx(Stepper, { ...args }),
|
|
35
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native';
|
|
2
|
-
import { Subheader } from './Subheader';
|
|
3
|
-
declare const meta: Meta<typeof Subheader>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Subheader>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const InteractiveRow: Story;
|
|
8
|
-
export declare const WithInfoIcon: Story;
|
|
9
|
-
export declare const WithAction: Story;
|
|
10
|
-
//# sourceMappingURL=Subheader.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Subheader.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Subheader/Subheader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EACL,SAAS,EAQV,MAAM,aAAa,CAAC;AAQrB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAmBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { View, Text } from 'react-native';
|
|
3
|
-
import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip';
|
|
4
|
-
import { Subheader, SubheaderRow, SubheaderTitle, SubheaderCount, SubheaderInfo, SubheaderShowMore, SubheaderDescription, SubheaderAction, } from './Subheader';
|
|
5
|
-
const Container = ({ children }) => (_jsx(View, { style: { padding: 8, backgroundColor: '#ffffff', width: '100%' }, children: children }));
|
|
6
|
-
const meta = {
|
|
7
|
-
component: Subheader,
|
|
8
|
-
title: 'Communication/Subheader',
|
|
9
|
-
subcomponents: {
|
|
10
|
-
SubheaderRow,
|
|
11
|
-
SubheaderTitle,
|
|
12
|
-
SubheaderDescription,
|
|
13
|
-
SubheaderCount,
|
|
14
|
-
SubheaderInfo,
|
|
15
|
-
SubheaderShowMore,
|
|
16
|
-
SubheaderAction,
|
|
17
|
-
},
|
|
18
|
-
decorators: [
|
|
19
|
-
(Story) => (_jsx(Container, { children: _jsx(Story, {}) })),
|
|
20
|
-
],
|
|
21
|
-
};
|
|
22
|
-
export default meta;
|
|
23
|
-
export const Base = {
|
|
24
|
-
render: () => (_jsxs(Subheader, { children: [_jsx(SubheaderRow, { children: _jsx(SubheaderTitle, { children: "Section Title" }) }), _jsx(SubheaderDescription, { children: "This is a detailed description that provides additional context about this section." })] })),
|
|
25
|
-
};
|
|
26
|
-
export const InteractiveRow = {
|
|
27
|
-
render: () => (_jsxs(Subheader, { children: [_jsxs(SubheaderRow, { onPress: () => console.log('Row clicked'), children: [_jsx(SubheaderTitle, { children: "Accounts" }), _jsx(SubheaderCount, { value: 5 }), _jsx(SubheaderShowMore, {})] }), _jsx(SubheaderDescription, { children: "Interactive rows always include the chevron to indicate they lead to more content" })] })),
|
|
28
|
-
};
|
|
29
|
-
export const WithInfoIcon = {
|
|
30
|
-
render: () => (_jsxs(Subheader, { children: [_jsxs(SubheaderRow, { children: [_jsx(SubheaderTitle, { children: "Section with Info" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(SubheaderInfo, {}) }), _jsx(TooltipContent, { content: _jsx(Text, { children: "Additional information about this section" }) })] })] }), _jsx(SubheaderDescription, { children: "Use the info icon to provide contextual help or additional details" })] })),
|
|
31
|
-
};
|
|
32
|
-
export const WithAction = {
|
|
33
|
-
render: () => (_jsxs(Subheader, { lx: { maxWidth: 's480' }, children: [_jsxs(SubheaderRow, { children: [_jsx(SubheaderTitle, { children: "Recent Activity" }), _jsx(SubheaderAction, { onPress: () => console.log('View all'), children: "View all" })] }), _jsx(SubheaderDescription, { children: "Use actions for quick access to related functionality" })] })),
|
|
34
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Switch } from './Switch';
|
|
3
|
-
declare const meta: Meta<typeof Switch>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof meta>;
|
|
6
|
-
/**
|
|
7
|
-
* The base switch in its normal state.
|
|
8
|
-
*/
|
|
9
|
-
export declare const Base: Story;
|
|
10
|
-
/**
|
|
11
|
-
* Interactive example showing all states.
|
|
12
|
-
*/
|
|
13
|
-
export declare const AllStates: Story;
|
|
14
|
-
//# sourceMappingURL=Switch.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA+B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAoCvB,CAAC"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Text } from '../Utility';
|
|
3
|
-
import { Switch } from './Switch';
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'Selection/Switch',
|
|
6
|
-
component: Switch,
|
|
7
|
-
parameters: {
|
|
8
|
-
layout: 'fullscreen',
|
|
9
|
-
docs: {
|
|
10
|
-
source: {
|
|
11
|
-
language: 'tsx',
|
|
12
|
-
format: true,
|
|
13
|
-
type: 'code',
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
argTypes: {
|
|
18
|
-
checked: {
|
|
19
|
-
control: 'boolean',
|
|
20
|
-
description: 'The controlled checked state of the switch',
|
|
21
|
-
},
|
|
22
|
-
defaultChecked: {
|
|
23
|
-
control: 'boolean',
|
|
24
|
-
description: 'The default checked state (uncontrolled)',
|
|
25
|
-
},
|
|
26
|
-
disabled: {
|
|
27
|
-
control: 'boolean',
|
|
28
|
-
description: 'If true, the switch is disabled',
|
|
29
|
-
},
|
|
30
|
-
onCheckedChange: {
|
|
31
|
-
action: 'checked changed',
|
|
32
|
-
description: 'Callback function called when the checked state changes',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
export default meta;
|
|
37
|
-
/**
|
|
38
|
-
* The base switch in its normal state.
|
|
39
|
-
*/
|
|
40
|
-
export const Base = {
|
|
41
|
-
render: (args) => {
|
|
42
|
-
return (_jsx(Box, { style: {
|
|
43
|
-
flex: 1,
|
|
44
|
-
minHeight: 96,
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
justifyContent: 'center',
|
|
47
|
-
padding: 24,
|
|
48
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsx(Switch, { ...args }) }) }));
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
/**
|
|
52
|
-
* Interactive example showing all states.
|
|
53
|
-
*/
|
|
54
|
-
export const AllStates = {
|
|
55
|
-
render: () => (_jsx(Box, { style: {
|
|
56
|
-
flex: 1,
|
|
57
|
-
minHeight: 96,
|
|
58
|
-
alignItems: 'center',
|
|
59
|
-
justifyContent: 'center',
|
|
60
|
-
padding: 24,
|
|
61
|
-
}, children: _jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Box, { style: {
|
|
62
|
-
flexDirection: 'row',
|
|
63
|
-
gap: 48,
|
|
64
|
-
}, children: [_jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading5', children: "Enabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { defaultChecked: false }), _jsx(Switch, { "aria-labelledby": '', defaultChecked: true })] })] }), _jsxs(Box, { style: { gap: 16 }, children: [_jsx(Text, { typography: 'heading5', children: "Disabled" }), _jsxs(Box, { style: { gap: 8 }, children: [_jsx(Switch, { disabled: true, defaultChecked: false }), _jsx(Switch, { disabled: true, defaultChecked: true })] })] })] }) }) })),
|
|
65
|
-
};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { TabBar, TabBarItem } from './TabBar';
|
|
3
|
-
declare const meta: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: typeof TabBar;
|
|
6
|
-
subcomponents: {
|
|
7
|
-
TabBarItem: typeof TabBarItem;
|
|
8
|
-
};
|
|
9
|
-
parameters: {
|
|
10
|
-
layout: string;
|
|
11
|
-
backgrounds: {
|
|
12
|
-
default: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
argTypes: {
|
|
16
|
-
active: {
|
|
17
|
-
control: "text";
|
|
18
|
-
description: string;
|
|
19
|
-
table: {
|
|
20
|
-
type: {
|
|
21
|
-
summary: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
onTabPress: {
|
|
26
|
-
action: string;
|
|
27
|
-
description: string;
|
|
28
|
-
table: {
|
|
29
|
-
type: {
|
|
30
|
-
summary: string;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
children: {
|
|
35
|
-
control: false;
|
|
36
|
-
description: string;
|
|
37
|
-
table: {
|
|
38
|
-
type: {
|
|
39
|
-
summary: string;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
export default meta;
|
|
46
|
-
type Story = StoryObj<typeof meta>;
|
|
47
|
-
export declare const Base: Story;
|
|
48
|
-
export declare const Complex: Story;
|
|
49
|
-
export declare const MissingLabel: Story;
|
|
50
|
-
//# sourceMappingURL=TabBar.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAiBvE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE9C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KA2BlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAC"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { BasketPutIn, HomeFill, Settings, Placeholder, Chart1, Bell, CoinPercent, Home, LifeRing, LifeRingFill, Cart, CreditCard, CreditCardFill, } from '../../Symbols';
|
|
4
|
-
import { TabBar, TabBarItem } from './TabBar';
|
|
5
|
-
const meta = {
|
|
6
|
-
title: 'Navigation/TabBar',
|
|
7
|
-
component: TabBar,
|
|
8
|
-
subcomponents: {
|
|
9
|
-
TabBarItem,
|
|
10
|
-
},
|
|
11
|
-
parameters: {
|
|
12
|
-
layout: 'centered',
|
|
13
|
-
backgrounds: { default: 'light' },
|
|
14
|
-
},
|
|
15
|
-
argTypes: {
|
|
16
|
-
active: {
|
|
17
|
-
control: 'text',
|
|
18
|
-
description: 'The currently active tab value',
|
|
19
|
-
table: {
|
|
20
|
-
type: { summary: 'string' },
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
onTabPress: {
|
|
24
|
-
action: 'tab pressed',
|
|
25
|
-
description: 'Callback function when a tab is pressed',
|
|
26
|
-
table: {
|
|
27
|
-
type: { summary: '(active: string) => void' },
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
children: {
|
|
31
|
-
control: false,
|
|
32
|
-
description: 'TabBarItem children',
|
|
33
|
-
table: {
|
|
34
|
-
type: { summary: 'TabBarChildren' },
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
};
|
|
39
|
-
export default meta;
|
|
40
|
-
export const Base = {
|
|
41
|
-
args: {},
|
|
42
|
-
render: () => {
|
|
43
|
-
const [active, setActive] = useState('home');
|
|
44
|
-
return (_jsxs(TabBar, { active: active, onTabPress: setActive, lx: { width: 's320' }, children: [_jsx(TabBarItem, { value: 'home', label: 'Home', icon: Home, activeIcon: HomeFill }), _jsx(TabBarItem, { value: 'pay', label: 'Pay', icon: CreditCard, activeIcon: CreditCardFill }), _jsx(TabBarItem, { value: 'help', label: 'Help', icon: LifeRing, activeIcon: LifeRingFill })] }));
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
export const Complex = {
|
|
48
|
-
args: {},
|
|
49
|
-
render: () => {
|
|
50
|
-
const [active, setActive] = useState('portfolio');
|
|
51
|
-
return (_jsxs(TabBar, { active: active, onTabPress: setActive, lx: { width: 's320' }, children: [_jsx(TabBarItem, { value: 'market', label: 'Market', icon: Chart1 }), _jsx(TabBarItem, { value: 'portfolio', label: 'Portfolio', icon: CoinPercent, activeIcon: CoinPercent }), _jsx(TabBarItem, { value: 'shop', label: 'Shop', icon: BasketPutIn }), _jsx(TabBarItem, { value: 'notifications', label: 'Alerts', icon: Bell }), _jsx(TabBarItem, { value: 'settings', label: 'Settings', icon: Settings })] }));
|
|
52
|
-
},
|
|
53
|
-
};
|
|
54
|
-
export const MissingLabel = {
|
|
55
|
-
args: {},
|
|
56
|
-
render: () => {
|
|
57
|
-
const [active, setActive] = useState('tab1');
|
|
58
|
-
return (_jsxs(TabBar, { active: active, onTabPress: setActive, lx: { width: 's320' }, children: [_jsx(TabBarItem, { value: 'tab1' }), _jsx(TabBarItem, { value: 'tab2', label: 'Tab', icon: Placeholder }), _jsx(TabBarItem, { value: 'tab3', icon: Cart })] }));
|
|
59
|
-
},
|
|
60
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
|
|
2
|
-
import { Tag } from './Tag';
|
|
3
|
-
declare const meta: Meta<typeof Tag>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof Tag>;
|
|
6
|
-
export declare const Base: Story;
|
|
7
|
-
export declare const AppearanceShowcase: Story;
|
|
8
|
-
export declare const SizeShowcase: Story;
|
|
9
|
-
export declare const ContentTypeShowcase: Story;
|
|
10
|
-
//# sourceMappingURL=Tag.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAsB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAC"}
|