@bacon-pos/ui 0.5.0 → 0.6.0
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/lib/commonjs/components/CodeField/CodeField.js +10 -2
- package/lib/commonjs/components/CodeField/CodeField.js.map +1 -1
- package/lib/commonjs/components/CodeField/CodeField.stories.js +15 -2
- package/lib/commonjs/components/CodeField/CodeField.stories.js.map +1 -1
- package/lib/commonjs/components/Dropdown/Dropdown.js +282 -0
- package/lib/commonjs/components/Dropdown/Dropdown.js.map +1 -0
- package/lib/commonjs/components/Dropdown/Dropdown.stories.js +421 -0
- package/lib/commonjs/components/Dropdown/Dropdown.stories.js.map +1 -0
- package/lib/commonjs/components/Dropdown/Dropdown.test.js +113 -0
- package/lib/commonjs/components/Dropdown/Dropdown.test.js.map +1 -0
- package/lib/commonjs/components/Dropdown/index.js +19 -0
- package/lib/commonjs/components/Dropdown/index.js.map +1 -0
- package/lib/commonjs/components/Menu/Menu.js +214 -0
- package/lib/commonjs/components/Menu/Menu.js.map +1 -0
- package/lib/commonjs/components/Menu/Menu.test.js +71 -0
- package/lib/commonjs/components/Menu/Menu.test.js.map +1 -0
- package/lib/commonjs/components/Menu/MenuButton.js +73 -0
- package/lib/commonjs/components/Menu/MenuButton.js.map +1 -0
- package/lib/commonjs/components/Menu/MenuButton.stories.js +166 -0
- package/lib/commonjs/components/Menu/MenuButton.stories.js.map +1 -0
- package/lib/commonjs/components/Menu/SelectButton.js +143 -0
- package/lib/commonjs/components/Menu/SelectButton.js.map +1 -0
- package/lib/commonjs/components/Menu/SelectButton.stories.js +116 -0
- package/lib/commonjs/components/Menu/SelectButton.stories.js.map +1 -0
- package/lib/commonjs/components/Menu/SelectButton.test.js +80 -0
- package/lib/commonjs/components/Menu/SelectButton.test.js.map +1 -0
- package/lib/commonjs/components/Menu/index.js +27 -0
- package/lib/commonjs/components/Menu/index.js.map +1 -0
- package/lib/commonjs/components/Select/Select.js +246 -0
- package/lib/commonjs/components/Select/Select.js.map +1 -0
- package/lib/commonjs/components/Select/Select.stories.js +221 -0
- package/lib/commonjs/components/Select/Select.stories.js.map +1 -0
- package/lib/commonjs/components/Select/Select.test.js +165 -0
- package/lib/commonjs/components/Select/Select.test.js.map +1 -0
- package/lib/commonjs/components/Select/index.js +13 -0
- package/lib/commonjs/components/Select/index.js.map +1 -0
- package/lib/commonjs/components/UserChip/UserChip.js +121 -0
- package/lib/commonjs/components/UserChip/UserChip.js.map +1 -0
- package/lib/commonjs/components/UserChip/UserChip.stories.js +153 -0
- package/lib/commonjs/components/UserChip/UserChip.stories.js.map +1 -0
- package/lib/commonjs/components/UserChip/UserChip.test.js +59 -0
- package/lib/commonjs/components/UserChip/UserChip.test.js.map +1 -0
- package/lib/commonjs/components/UserChip/index.js +13 -0
- package/lib/commonjs/components/UserChip/index.js.map +1 -0
- package/lib/commonjs/components/index.js +57 -13
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/module/components/CodeField/CodeField.js +10 -2
- package/lib/module/components/CodeField/CodeField.js.map +1 -1
- package/lib/module/components/CodeField/CodeField.stories.js +14 -1
- package/lib/module/components/CodeField/CodeField.stories.js.map +1 -1
- package/lib/module/components/Dropdown/Dropdown.js +277 -0
- package/lib/module/components/Dropdown/Dropdown.js.map +1 -0
- package/lib/module/components/Dropdown/Dropdown.stories.js +417 -0
- package/lib/module/components/Dropdown/Dropdown.stories.js.map +1 -0
- package/lib/module/components/Dropdown/Dropdown.test.js +113 -0
- package/lib/module/components/Dropdown/Dropdown.test.js.map +1 -0
- package/lib/module/components/Dropdown/index.js +4 -0
- package/lib/module/components/Dropdown/index.js.map +1 -0
- package/lib/module/components/Menu/Menu.js +210 -0
- package/lib/module/components/Menu/Menu.js.map +1 -0
- package/lib/module/components/Menu/Menu.test.js +71 -0
- package/lib/module/components/Menu/Menu.test.js.map +1 -0
- package/lib/module/components/Menu/MenuButton.js +69 -0
- package/lib/module/components/Menu/MenuButton.js.map +1 -0
- package/lib/module/components/Menu/MenuButton.stories.js +162 -0
- package/lib/module/components/Menu/MenuButton.stories.js.map +1 -0
- package/lib/module/components/Menu/SelectButton.js +139 -0
- package/lib/module/components/Menu/SelectButton.js.map +1 -0
- package/lib/module/components/Menu/SelectButton.stories.js +112 -0
- package/lib/module/components/Menu/SelectButton.stories.js.map +1 -0
- package/lib/module/components/Menu/SelectButton.test.js +80 -0
- package/lib/module/components/Menu/SelectButton.test.js.map +1 -0
- package/lib/module/components/Menu/index.js +6 -0
- package/lib/module/components/Menu/index.js.map +1 -0
- package/lib/module/components/Select/Select.js +244 -0
- package/lib/module/components/Select/Select.js.map +1 -0
- package/lib/module/components/Select/Select.stories.js +217 -0
- package/lib/module/components/Select/Select.stories.js.map +1 -0
- package/lib/module/components/Select/Select.test.js +165 -0
- package/lib/module/components/Select/Select.test.js.map +1 -0
- package/lib/module/components/Select/index.js +4 -0
- package/lib/module/components/Select/index.js.map +1 -0
- package/lib/module/components/UserChip/UserChip.js +117 -0
- package/lib/module/components/UserChip/UserChip.js.map +1 -0
- package/lib/module/components/UserChip/UserChip.stories.js +149 -0
- package/lib/module/components/UserChip/UserChip.stories.js.map +1 -0
- package/lib/module/components/UserChip/UserChip.test.js +59 -0
- package/lib/module/components/UserChip/UserChip.test.js.map +1 -0
- package/lib/module/components/UserChip/index.js +4 -0
- package/lib/module/components/UserChip/index.js.map +1 -0
- package/lib/module/components/index.js +4 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/commonjs/components/CodeField/CodeField.d.ts +4 -2
- package/lib/typescript/commonjs/components/CodeField/CodeField.d.ts.map +1 -1
- package/lib/typescript/commonjs/components/Dropdown/Dropdown.d.ts +105 -0
- package/lib/typescript/commonjs/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Dropdown/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/Dropdown/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Menu/Menu.d.ts +66 -0
- package/lib/typescript/commonjs/components/Menu/Menu.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Menu/MenuButton.d.ts +46 -0
- package/lib/typescript/commonjs/components/Menu/MenuButton.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Menu/SelectButton.d.ts +60 -0
- package/lib/typescript/commonjs/components/Menu/SelectButton.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Menu/index.d.ts +7 -0
- package/lib/typescript/commonjs/components/Menu/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Select/Select.d.ts +73 -0
- package/lib/typescript/commonjs/components/Select/Select.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Select/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/Select/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/UserChip/UserChip.d.ts +33 -0
- package/lib/typescript/commonjs/components/UserChip/UserChip.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/UserChip/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/UserChip/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/index.d.ts +4 -0
- package/lib/typescript/commonjs/components/index.d.ts.map +1 -1
- package/lib/typescript/module/components/CodeField/CodeField.d.ts +4 -2
- package/lib/typescript/module/components/CodeField/CodeField.d.ts.map +1 -1
- package/lib/typescript/module/components/Dropdown/Dropdown.d.ts +105 -0
- package/lib/typescript/module/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/lib/typescript/module/components/Dropdown/index.d.ts +3 -0
- package/lib/typescript/module/components/Dropdown/index.d.ts.map +1 -0
- package/lib/typescript/module/components/Menu/Menu.d.ts +66 -0
- package/lib/typescript/module/components/Menu/Menu.d.ts.map +1 -0
- package/lib/typescript/module/components/Menu/MenuButton.d.ts +46 -0
- package/lib/typescript/module/components/Menu/MenuButton.d.ts.map +1 -0
- package/lib/typescript/module/components/Menu/SelectButton.d.ts +60 -0
- package/lib/typescript/module/components/Menu/SelectButton.d.ts.map +1 -0
- package/lib/typescript/module/components/Menu/index.d.ts +7 -0
- package/lib/typescript/module/components/Menu/index.d.ts.map +1 -0
- package/lib/typescript/module/components/Select/Select.d.ts +73 -0
- package/lib/typescript/module/components/Select/Select.d.ts.map +1 -0
- package/lib/typescript/module/components/Select/index.d.ts +3 -0
- package/lib/typescript/module/components/Select/index.d.ts.map +1 -0
- package/lib/typescript/module/components/UserChip/UserChip.d.ts +33 -0
- package/lib/typescript/module/components/UserChip/UserChip.d.ts.map +1 -0
- package/lib/typescript/module/components/UserChip/index.d.ts +3 -0
- package/lib/typescript/module/components/UserChip/index.d.ts.map +1 -0
- package/lib/typescript/module/components/index.d.ts +4 -0
- package/lib/typescript/module/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/CodeField/CodeField.tsx +6 -3
- package/src/components/Dropdown/Dropdown.tsx +319 -0
- package/src/components/Dropdown/index.ts +2 -0
- package/src/components/Menu/Menu.tsx +249 -0
- package/src/components/Menu/MenuButton.tsx +98 -0
- package/src/components/Menu/SelectButton.tsx +171 -0
- package/src/components/Menu/index.ts +12 -0
- package/src/components/Select/Select.tsx +323 -0
- package/src/components/Select/index.ts +2 -0
- package/src/components/UserChip/UserChip.tsx +138 -0
- package/src/components/UserChip/index.ts +2 -0
- package/src/components/index.ts +4 -0
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Pressable, View } from 'react-native';
|
|
4
|
+
import { useTheme } from "../../theme/index.js";
|
|
5
|
+
import { Avatar } from "../Avatar/Avatar.js";
|
|
6
|
+
import { Text } from "../Text/Text.js";
|
|
7
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
/**
|
|
9
|
+
* Per-size config. `width` is the fixed total pill width (the chip never grows or
|
|
10
|
+
* shrinks with the text — long names truncate). Avatar diameter equals the pill
|
|
11
|
+
* height, so it sits flush in the left circle.
|
|
12
|
+
*/
|
|
13
|
+
const SIZES = {
|
|
14
|
+
sm: {
|
|
15
|
+
diameter: 40,
|
|
16
|
+
gap: 8,
|
|
17
|
+
paddingRight: 16,
|
|
18
|
+
width: 160,
|
|
19
|
+
textVariant: 'bodyMedium'
|
|
20
|
+
},
|
|
21
|
+
md: {
|
|
22
|
+
diameter: 48,
|
|
23
|
+
gap: 10,
|
|
24
|
+
paddingRight: 20,
|
|
25
|
+
width: 188,
|
|
26
|
+
textVariant: 'bodyLarge'
|
|
27
|
+
},
|
|
28
|
+
lg: {
|
|
29
|
+
diameter: 58,
|
|
30
|
+
gap: 12,
|
|
31
|
+
paddingRight: 24,
|
|
32
|
+
width: 212,
|
|
33
|
+
textVariant: 'bodyLarge'
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* User chip — an `Avatar` with an optional name. With a `name` it renders the
|
|
39
|
+
* lime pill from Figma "User": the avatar flush on the left and the name in a
|
|
40
|
+
* fixed-width box that is centered when short and truncates with an ellipsis when
|
|
41
|
+
* long. Without a `name` it is just the avatar. The pill width is fixed per size.
|
|
42
|
+
*/
|
|
43
|
+
export function UserChip({
|
|
44
|
+
source,
|
|
45
|
+
name,
|
|
46
|
+
initials,
|
|
47
|
+
size = 'md',
|
|
48
|
+
backgroundColor,
|
|
49
|
+
color,
|
|
50
|
+
onPress,
|
|
51
|
+
style,
|
|
52
|
+
accessibilityLabel
|
|
53
|
+
}) {
|
|
54
|
+
const theme = useTheme();
|
|
55
|
+
const cfg = SIZES[size];
|
|
56
|
+
const hasName = Boolean(name && name.trim());
|
|
57
|
+
const avatar = /*#__PURE__*/_jsx(Avatar, {
|
|
58
|
+
source: source,
|
|
59
|
+
name: name,
|
|
60
|
+
initials: initials,
|
|
61
|
+
diameter: cfg.diameter,
|
|
62
|
+
accessibilityLabel: accessibilityLabel ?? name
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// No name → just the avatar, exactly like using <Avatar> directly.
|
|
66
|
+
if (!hasName) {
|
|
67
|
+
if (!onPress) return /*#__PURE__*/_jsx(View, {
|
|
68
|
+
style: style,
|
|
69
|
+
children: avatar
|
|
70
|
+
});
|
|
71
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
72
|
+
onPress: onPress,
|
|
73
|
+
accessibilityRole: "button",
|
|
74
|
+
accessibilityLabel: accessibilityLabel,
|
|
75
|
+
style: style,
|
|
76
|
+
children: avatar
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
const pillStyle = {
|
|
80
|
+
flexDirection: 'row',
|
|
81
|
+
alignItems: 'center',
|
|
82
|
+
gap: cfg.gap,
|
|
83
|
+
width: cfg.width,
|
|
84
|
+
height: cfg.diameter,
|
|
85
|
+
borderRadius: cfg.diameter / 2,
|
|
86
|
+
paddingRight: cfg.paddingRight,
|
|
87
|
+
backgroundColor: backgroundColor ?? theme.colors.action.primary
|
|
88
|
+
};
|
|
89
|
+
const inner = /*#__PURE__*/_jsxs(_Fragment, {
|
|
90
|
+
children: [avatar, /*#__PURE__*/_jsx(Text, {
|
|
91
|
+
variant: cfg.textVariant,
|
|
92
|
+
weight: "medium",
|
|
93
|
+
align: "center",
|
|
94
|
+
color: color ?? theme.colors.action.secondaryForeground,
|
|
95
|
+
numberOfLines: 1,
|
|
96
|
+
style: {
|
|
97
|
+
flex: 1
|
|
98
|
+
},
|
|
99
|
+
children: name
|
|
100
|
+
})]
|
|
101
|
+
});
|
|
102
|
+
if (!onPress) {
|
|
103
|
+
return /*#__PURE__*/_jsx(View, {
|
|
104
|
+
accessibilityLabel: accessibilityLabel ?? name,
|
|
105
|
+
style: [pillStyle, style],
|
|
106
|
+
children: inner
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
110
|
+
onPress: onPress,
|
|
111
|
+
accessibilityRole: "button",
|
|
112
|
+
accessibilityLabel: accessibilityLabel ?? name,
|
|
113
|
+
style: [pillStyle, style],
|
|
114
|
+
children: inner
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
//# sourceMappingURL=UserChip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Pressable","View","useTheme","Avatar","Text","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SIZES","sm","diameter","gap","paddingRight","width","textVariant","md","lg","UserChip","source","name","initials","size","backgroundColor","color","onPress","style","accessibilityLabel","theme","cfg","hasName","Boolean","trim","avatar","children","accessibilityRole","pillStyle","flexDirection","alignItems","height","borderRadius","colors","action","primary","inner","variant","weight","align","secondaryForeground","numberOfLines","flex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UserChip/UserChip.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { UserChip } from "./UserChip.js";
|
|
5
|
+
import { Text } from "../Text/Text.js";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Components/UserChip',
|
|
9
|
+
component: UserChip
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
// Remote placeholder avatar (loads in the web/Storybook preview).
|
|
13
|
+
const PHOTO = {
|
|
14
|
+
uri: 'https://i.pravatar.cc/150?img=47'
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
/** With a name — the lime pill (Figma "User"). */
|
|
18
|
+
export const WithName = {
|
|
19
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
20
|
+
style: {
|
|
21
|
+
padding: 24
|
|
22
|
+
},
|
|
23
|
+
children: /*#__PURE__*/_jsx(UserChip, {
|
|
24
|
+
name: "Juana Gomez",
|
|
25
|
+
size: "lg"
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/** With a real photo (falls back to initials if it fails to load). */
|
|
31
|
+
export const WithPhoto = {
|
|
32
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
33
|
+
style: {
|
|
34
|
+
padding: 24,
|
|
35
|
+
gap: 16,
|
|
36
|
+
alignItems: 'flex-start'
|
|
37
|
+
},
|
|
38
|
+
children: [/*#__PURE__*/_jsx(UserChip, {
|
|
39
|
+
name: "Juana Gomez",
|
|
40
|
+
source: PHOTO,
|
|
41
|
+
size: "sm"
|
|
42
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
43
|
+
name: "Juana Gomez",
|
|
44
|
+
source: PHOTO,
|
|
45
|
+
size: "md"
|
|
46
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
47
|
+
name: "Juana Gomez",
|
|
48
|
+
source: PHOTO,
|
|
49
|
+
size: "lg"
|
|
50
|
+
})]
|
|
51
|
+
})
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
/** Photo without a name — just the circular avatar. */
|
|
55
|
+
export const PhotoAvatarOnly = {
|
|
56
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
57
|
+
style: {
|
|
58
|
+
padding: 24
|
|
59
|
+
},
|
|
60
|
+
children: /*#__PURE__*/_jsx(UserChip, {
|
|
61
|
+
source: PHOTO,
|
|
62
|
+
size: "lg",
|
|
63
|
+
accessibilityLabel: "Juana Gomez"
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
/** Without a name — just the avatar, like before. */
|
|
69
|
+
export const AvatarOnly = {
|
|
70
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
71
|
+
style: {
|
|
72
|
+
padding: 24
|
|
73
|
+
},
|
|
74
|
+
children: /*#__PURE__*/_jsx(UserChip, {
|
|
75
|
+
size: "lg",
|
|
76
|
+
initials: "JG"
|
|
77
|
+
})
|
|
78
|
+
})
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
/** Sizes — the pill width scales per variant. */
|
|
82
|
+
export const Sizes = {
|
|
83
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
84
|
+
style: {
|
|
85
|
+
padding: 24,
|
|
86
|
+
gap: 16,
|
|
87
|
+
alignItems: 'flex-start'
|
|
88
|
+
},
|
|
89
|
+
children: [/*#__PURE__*/_jsx(UserChip, {
|
|
90
|
+
name: "Juana Gomez",
|
|
91
|
+
size: "sm"
|
|
92
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
93
|
+
name: "Juana Gomez",
|
|
94
|
+
size: "md"
|
|
95
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
96
|
+
name: "Juana Gomez",
|
|
97
|
+
size: "lg"
|
|
98
|
+
})]
|
|
99
|
+
})
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
/** Short vs long: short is centered; long truncates with an ellipsis (fixed width). */
|
|
103
|
+
export const TextBehavior = {
|
|
104
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
105
|
+
style: {
|
|
106
|
+
padding: 24,
|
|
107
|
+
gap: 16,
|
|
108
|
+
alignItems: 'flex-start'
|
|
109
|
+
},
|
|
110
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
111
|
+
variant: "caption",
|
|
112
|
+
color: "secondary",
|
|
113
|
+
children: "Short (centered)"
|
|
114
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
115
|
+
name: "Ana",
|
|
116
|
+
size: "lg"
|
|
117
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
118
|
+
variant: "caption",
|
|
119
|
+
color: "secondary",
|
|
120
|
+
children: "Fills the box"
|
|
121
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
122
|
+
name: "Juana Gomez",
|
|
123
|
+
size: "lg"
|
|
124
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
125
|
+
variant: "caption",
|
|
126
|
+
color: "secondary",
|
|
127
|
+
children: "Too long \u2192 ellipsis"
|
|
128
|
+
}), /*#__PURE__*/_jsx(UserChip, {
|
|
129
|
+
name: "Maria Fernanda Restrepo",
|
|
130
|
+
size: "lg"
|
|
131
|
+
})]
|
|
132
|
+
})
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
/** Custom colors. */
|
|
136
|
+
export const CustomColors = {
|
|
137
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
138
|
+
style: {
|
|
139
|
+
padding: 24
|
|
140
|
+
},
|
|
141
|
+
children: /*#__PURE__*/_jsx(UserChip, {
|
|
142
|
+
name: "Juana Gomez",
|
|
143
|
+
size: "lg",
|
|
144
|
+
backgroundColor: "#292D32",
|
|
145
|
+
color: "#FFFFFF"
|
|
146
|
+
})
|
|
147
|
+
})
|
|
148
|
+
};
|
|
149
|
+
//# sourceMappingURL=UserChip.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","UserChip","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","PHOTO","uri","WithName","render","style","padding","children","name","size","WithPhoto","gap","alignItems","source","PhotoAvatarOnly","accessibilityLabel","AvatarOnly","initials","Sizes","TextBehavior","variant","color","CustomColors","backgroundColor"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UserChip/UserChip.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { render, fireEvent, screen } from '@testing-library/react-native';
|
|
4
|
+
import { ThemeProvider } from "../../theme/index.js";
|
|
5
|
+
import { UserChip } from "./UserChip.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
function wrap(ui) {
|
|
8
|
+
return render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
9
|
+
children: ui
|
|
10
|
+
}));
|
|
11
|
+
}
|
|
12
|
+
describe('UserChip', () => {
|
|
13
|
+
it('renders the name when provided', () => {
|
|
14
|
+
wrap(/*#__PURE__*/_jsx(UserChip, {
|
|
15
|
+
name: "Juana Gomez"
|
|
16
|
+
}));
|
|
17
|
+
expect(screen.getByText('Juana Gomez')).toBeTruthy();
|
|
18
|
+
});
|
|
19
|
+
it('shows only the avatar (no label) when no name is given', () => {
|
|
20
|
+
wrap(/*#__PURE__*/_jsx(UserChip, {
|
|
21
|
+
initials: "JG",
|
|
22
|
+
accessibilityLabel: "User avatar"
|
|
23
|
+
}));
|
|
24
|
+
// No name label text…
|
|
25
|
+
expect(screen.queryByText('Juana Gomez')).toBeNull();
|
|
26
|
+
// …but the avatar initials are shown.
|
|
27
|
+
expect(screen.getByText('JG')).toBeTruthy();
|
|
28
|
+
});
|
|
29
|
+
it('derives avatar initials from the name', () => {
|
|
30
|
+
wrap(/*#__PURE__*/_jsx(UserChip, {
|
|
31
|
+
name: "Juana Gomez"
|
|
32
|
+
}));
|
|
33
|
+
expect(screen.getByText('JG')).toBeTruthy();
|
|
34
|
+
});
|
|
35
|
+
it('truncates a long name to a single line', () => {
|
|
36
|
+
wrap(/*#__PURE__*/_jsx(UserChip, {
|
|
37
|
+
name: "Maria Fernanda Restrepo"
|
|
38
|
+
}));
|
|
39
|
+
const label = screen.getByText('Maria Fernanda Restrepo');
|
|
40
|
+
expect(label.props.numberOfLines).toBe(1);
|
|
41
|
+
});
|
|
42
|
+
it('fires onPress', () => {
|
|
43
|
+
const onPress = jest.fn();
|
|
44
|
+
wrap(/*#__PURE__*/_jsx(UserChip, {
|
|
45
|
+
name: "Juana Gomez",
|
|
46
|
+
onPress: onPress
|
|
47
|
+
}));
|
|
48
|
+
fireEvent.press(screen.getByText('Juana Gomez'));
|
|
49
|
+
expect(onPress).toHaveBeenCalledTimes(1);
|
|
50
|
+
});
|
|
51
|
+
it('treats a blank name as no name', () => {
|
|
52
|
+
wrap(/*#__PURE__*/_jsx(UserChip, {
|
|
53
|
+
name: " ",
|
|
54
|
+
initials: "AB"
|
|
55
|
+
}));
|
|
56
|
+
expect(screen.getByText('AB')).toBeTruthy();
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
//# sourceMappingURL=UserChip.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["render","fireEvent","screen","ThemeProvider","UserChip","jsx","_jsx","wrap","ui","children","describe","it","name","expect","getByText","toBeTruthy","initials","accessibilityLabel","queryByText","toBeNull","label","props","numberOfLines","toBe","onPress","jest","fn","press","toHaveBeenCalledTimes"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UserChip/UserChip.test.tsx"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,SAAS,EAAEC,MAAM,QAAQ,+BAA+B;AACzE,SAASC,aAAa,QAAQ,sBAAa;AAC3C,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtC,SAASC,IAAIA,CAACC,EAAsB,EAAE;EACpC,OAAOR,MAAM,cAACM,IAAA,CAACH,aAAa;IAAAM,QAAA,EAAED;EAAE,CAAgB,CAAC,CAAC;AACpD;AAEAE,QAAQ,CAAC,UAAU,EAAE,MAAM;EACzBC,EAAE,CAAC,gCAAgC,EAAE,MAAM;IACzCJ,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACQ,IAAI,EAAC;IAAa,CAAE,CAAC,CAAC;IACrCC,MAAM,CAACX,MAAM,CAACY,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EACtD,CAAC,CAAC;EAEFJ,EAAE,CAAC,wDAAwD,EAAE,MAAM;IACjEJ,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACY,QAAQ,EAAC,IAAI;MAACC,kBAAkB,EAAC;IAAa,CAAE,CAAC,CAAC;IACjE;IACAJ,MAAM,CAACX,MAAM,CAACgB,WAAW,CAAC,aAAa,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;IACpD;IACAN,MAAM,CAACX,MAAM,CAACY,SAAS,CAAC,IAAI,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAC7C,CAAC,CAAC;EAEFJ,EAAE,CAAC,uCAAuC,EAAE,MAAM;IAChDJ,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACQ,IAAI,EAAC;IAAa,CAAE,CAAC,CAAC;IACrCC,MAAM,CAACX,MAAM,CAACY,SAAS,CAAC,IAAI,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAC7C,CAAC,CAAC;EAEFJ,EAAE,CAAC,wCAAwC,EAAE,MAAM;IACjDJ,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACQ,IAAI,EAAC;IAAyB,CAAE,CAAC,CAAC;IACjD,MAAMQ,KAAK,GAAGlB,MAAM,CAACY,SAAS,CAAC,yBAAyB,CAAC;IACzDD,MAAM,CAACO,KAAK,CAACC,KAAK,CAACC,aAAa,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC;EAC3C,CAAC,CAAC;EAEFZ,EAAE,CAAC,eAAe,EAAE,MAAM;IACxB,MAAMa,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;IACzBnB,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACQ,IAAI,EAAC,aAAa;MAACY,OAAO,EAAEA;IAAQ,CAAE,CAAC,CAAC;IACvDvB,SAAS,CAAC0B,KAAK,CAACzB,MAAM,CAACY,SAAS,CAAC,aAAa,CAAC,CAAC;IAChDD,MAAM,CAACW,OAAO,CAAC,CAACI,qBAAqB,CAAC,CAAC,CAAC;EAC1C,CAAC,CAAC;EAEFjB,EAAE,CAAC,gCAAgC,EAAE,MAAM;IACzCJ,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACQ,IAAI,EAAC,KAAK;MAACI,QAAQ,EAAC;IAAI,CAAE,CAAC,CAAC;IAC3CH,MAAM,CAACX,MAAM,CAACY,SAAS,CAAC,IAAI,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAC7C,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["UserChip"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UserChip/index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,eAAY","ignoreList":[]}
|
|
@@ -9,17 +9,21 @@ export * from "./Chip/index.js";
|
|
|
9
9
|
export * from "./CodeField/index.js";
|
|
10
10
|
export * from "./CodeInput/index.js";
|
|
11
11
|
export * from "./Dialog/index.js";
|
|
12
|
+
export * from "./Dropdown/index.js";
|
|
12
13
|
export * from "./Icon/index.js";
|
|
13
14
|
export * from "./IconButton/index.js";
|
|
14
15
|
export * from "./Input/index.js";
|
|
15
16
|
export * from "./Keypad/index.js";
|
|
16
17
|
export * from "./LinkButton/index.js";
|
|
18
|
+
export * from "./Menu/index.js";
|
|
17
19
|
export * from "./ProductCard/index.js";
|
|
18
20
|
export * from "./QuantityStepper/index.js";
|
|
19
21
|
export * from "./Radio/index.js";
|
|
22
|
+
export * from "./Select/index.js";
|
|
20
23
|
export * from "./Spinner/index.js";
|
|
21
24
|
export * from "./Surface/index.js";
|
|
22
25
|
export * from "./Switch/index.js";
|
|
23
26
|
export * from "./Text/index.js";
|
|
24
27
|
export * from "./Toast/index.js";
|
|
28
|
+
export * from "./UserChip/index.js";
|
|
25
29
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,kBAAS","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,qBAAY","ignoreList":[]}
|
|
@@ -19,8 +19,10 @@ export interface CodeFieldProps {
|
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
/** Focus on mount. */
|
|
21
21
|
autoFocus?: boolean;
|
|
22
|
-
/** Cell width in px (Figma default 126). */
|
|
22
|
+
/** Cell width in px (Figma default 126). Ignored when `fullWidth` is set. */
|
|
23
23
|
cellWidth?: number;
|
|
24
|
+
/** Stretch the row to 100% of the container; cells share the width evenly. */
|
|
25
|
+
fullWidth?: boolean;
|
|
24
26
|
/** Cell height in px (Figma default 58). */
|
|
25
27
|
cellHeight?: number;
|
|
26
28
|
/** Gap between cells in px (Figma default 24). */
|
|
@@ -40,5 +42,5 @@ export interface CodeFieldProps {
|
|
|
40
42
|
* backspace-to-previous and type-to-next all work natively. The active cell
|
|
41
43
|
* shows the lime focus ring. Cell size, gap, font and font size are configurable.
|
|
42
44
|
*/
|
|
43
|
-
export declare function CodeField({ value, onChangeText, length, mode, onComplete, helperText, error, disabled, autoFocus, cellWidth, cellHeight, gap, fontFamily, fontSize, accessibilityLabel, style, }: CodeFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare function CodeField({ value, onChangeText, length, mode, onComplete, helperText, error, disabled, autoFocus, cellWidth, fullWidth, cellHeight, gap, fontFamily, fontSize, accessibilityLabel, style, }: CodeFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
44
46
|
//# sourceMappingURL=CodeField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeField/CodeField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAiBtB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AASjE,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,2FAA2F;IAC3F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,
|
|
1
|
+
{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeField/CodeField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAiBtB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AASjE,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,2FAA2F;IAC3F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,MAAU,EACV,IAAgB,EAChB,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,SAAiB,EACjB,SAAe,EACf,SAAiB,EACjB,UAAe,EACf,GAAQ,EACR,UAAU,EACV,QAAa,EACb,kBAA2B,EAC3B,KAAK,GACN,EAAE,cAAc,2CA2GhB"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
import type { RadiusToken } from '../../theme/spacing';
|
|
4
|
+
import type { IconName } from '../Icon/icons.generated';
|
|
5
|
+
import { type SwitchSize } from '../Switch/Switch';
|
|
6
|
+
/**
|
|
7
|
+
* A leading/trailing slot on a row. Either a decorative/actionable control from
|
|
8
|
+
* the design system, or any custom node (avatar, flag, badge…).
|
|
9
|
+
*/
|
|
10
|
+
export type DropdownSlot = {
|
|
11
|
+
kind: 'icon';
|
|
12
|
+
name: IconName;
|
|
13
|
+
color?: string;
|
|
14
|
+
} | {
|
|
15
|
+
kind: 'iconButton';
|
|
16
|
+
name: IconName;
|
|
17
|
+
onPress: () => void;
|
|
18
|
+
color?: string;
|
|
19
|
+
accessibilityLabel?: string;
|
|
20
|
+
} | {
|
|
21
|
+
kind: 'checkbox';
|
|
22
|
+
checked: boolean;
|
|
23
|
+
onChange: (checked: boolean) => void;
|
|
24
|
+
indeterminate?: boolean;
|
|
25
|
+
} | {
|
|
26
|
+
kind: 'switch';
|
|
27
|
+
value: boolean;
|
|
28
|
+
onChange: (value: boolean) => void;
|
|
29
|
+
size?: SwitchSize;
|
|
30
|
+
} | {
|
|
31
|
+
kind: 'radio';
|
|
32
|
+
selected: boolean;
|
|
33
|
+
onChange: () => void;
|
|
34
|
+
} | {
|
|
35
|
+
kind: 'custom';
|
|
36
|
+
node: ReactNode;
|
|
37
|
+
};
|
|
38
|
+
export interface DropdownItemProps {
|
|
39
|
+
/** Primary text. */
|
|
40
|
+
label: string;
|
|
41
|
+
/** Optional secondary line under the label. */
|
|
42
|
+
description?: string;
|
|
43
|
+
/** Slot before the text (icon / control / custom). */
|
|
44
|
+
leading?: DropdownSlot;
|
|
45
|
+
/** Slot after the text (icon / control / custom). */
|
|
46
|
+
trailing?: DropdownSlot;
|
|
47
|
+
/** Row press. If omitted, tapping the row toggles the trailing (then leading) control when it is a checkbox / switch / radio. */
|
|
48
|
+
onPress?: () => void;
|
|
49
|
+
/** Highlight the row as selected. */
|
|
50
|
+
selected?: boolean;
|
|
51
|
+
/** Dim and block the row. */
|
|
52
|
+
disabled?: boolean;
|
|
53
|
+
/** Render the label (and icon slots) in the error color — for "Delete" etc. */
|
|
54
|
+
destructive?: boolean;
|
|
55
|
+
/** Minimum row height. Defaults to 58 (Figma). */
|
|
56
|
+
height?: number;
|
|
57
|
+
/** Horizontal padding. Defaults to 16 (Figma). */
|
|
58
|
+
paddingHorizontal?: number;
|
|
59
|
+
style?: StyleProp<ViewStyle>;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* A single dropdown / menu row: text with optional leading and trailing slots
|
|
63
|
+
* (icon, icon button, checkbox, switch, radio, or a custom node). Used on its
|
|
64
|
+
* own or, more commonly, inside `Dropdown`.
|
|
65
|
+
*/
|
|
66
|
+
export declare function DropdownItem({ label, description, leading, trailing, onPress, selected, disabled, destructive, height, paddingHorizontal, style, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
|
|
67
|
+
/** An entry in a `Dropdown`: an item, a section header, or a divider. */
|
|
68
|
+
export type DropdownEntry = (DropdownItemProps & {
|
|
69
|
+
key: string;
|
|
70
|
+
type?: 'item';
|
|
71
|
+
}) | {
|
|
72
|
+
key: string;
|
|
73
|
+
type: 'header';
|
|
74
|
+
label: string;
|
|
75
|
+
} | {
|
|
76
|
+
key: string;
|
|
77
|
+
type: 'divider';
|
|
78
|
+
};
|
|
79
|
+
export interface DropdownProps {
|
|
80
|
+
/** The rows to render (dynamic length). Mix items, headers and dividers. */
|
|
81
|
+
options: DropdownEntry[];
|
|
82
|
+
/** Called with the key of the pressed item (after its own `onPress`). */
|
|
83
|
+
onSelect?: (key: string) => void;
|
|
84
|
+
/** Panel width. Defaults to 350 (Figma). Pass a style with `width: '100%'` to fill a parent/trigger instead. */
|
|
85
|
+
width?: number;
|
|
86
|
+
/** Minimum panel width. */
|
|
87
|
+
minWidth?: number;
|
|
88
|
+
/** Max panel height; content scrolls beyond it. */
|
|
89
|
+
maxHeight?: number;
|
|
90
|
+
/** Draw hairline dividers between items. Defaults to true (Figma). */
|
|
91
|
+
showDividers?: boolean;
|
|
92
|
+
/** Vertical padding inside the panel. Defaults to 0 (rows meet the rounded edges, Figma). */
|
|
93
|
+
paddingVertical?: number;
|
|
94
|
+
/** Corner radius token. Defaults to `xl` (16). */
|
|
95
|
+
radius?: RadiusToken;
|
|
96
|
+
style?: StyleProp<ViewStyle>;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Dropdown / menu panel — an elevated surface listing a dynamic set of options.
|
|
100
|
+
* Meant to be shown from a trigger (an Input select, an IconButton, …). Each row
|
|
101
|
+
* is a `DropdownItem`, so options can carry icons, checkboxes, switches, radios
|
|
102
|
+
* or custom nodes on either side. Supports section headers, dividers and scroll.
|
|
103
|
+
*/
|
|
104
|
+
export declare function Dropdown({ options, onSelect, width, minWidth, maxHeight, showDividers, paddingVertical, radius, style, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
|
|
105
|
+
//# sourceMappingURL=Dropdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
export type OriginVertical = 'top' | 'center' | 'bottom';
|
|
4
|
+
export type OriginHorizontal = 'left' | 'center' | 'right';
|
|
5
|
+
/** A point on a box: a vertical and a horizontal edge/center. */
|
|
6
|
+
export interface MenuOrigin {
|
|
7
|
+
vertical: OriginVertical;
|
|
8
|
+
horizontal: OriginHorizontal;
|
|
9
|
+
}
|
|
10
|
+
/** State handed to the trigger renderer and (optionally) the content renderer. */
|
|
11
|
+
export interface MenuTriggerState {
|
|
12
|
+
open: boolean;
|
|
13
|
+
toggle: () => void;
|
|
14
|
+
close: () => void;
|
|
15
|
+
}
|
|
16
|
+
export interface MenuProps {
|
|
17
|
+
/** Renders the trigger. Wire its press to `toggle`. */
|
|
18
|
+
renderTrigger: (state: MenuTriggerState) => ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* The overlay content (e.g. a `Dropdown`). May be a function receiving
|
|
21
|
+
* `{ close, triggerWidth, maxHeight }` — `maxHeight` is the auto-fit height
|
|
22
|
+
* (space available in the chosen direction) so the content can scroll.
|
|
23
|
+
*/
|
|
24
|
+
children: ReactNode | ((state: {
|
|
25
|
+
close: () => void;
|
|
26
|
+
triggerWidth?: number;
|
|
27
|
+
maxHeight?: number;
|
|
28
|
+
}) => ReactNode);
|
|
29
|
+
/** Point on the trigger the menu latches to. Defaults to `{ bottom, left }`. */
|
|
30
|
+
anchorOrigin?: MenuOrigin;
|
|
31
|
+
/** Point on the menu placed at the anchor. Defaults to `{ top, left }`. */
|
|
32
|
+
menuOrigin?: MenuOrigin;
|
|
33
|
+
/** Gap between trigger and menu along the vertical axis. Defaults to 8. */
|
|
34
|
+
offset?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Fit the menu to the space available and flip its direction when the
|
|
37
|
+
* preferred side doesn't have room. Provides a `maxHeight` to the content so it
|
|
38
|
+
* scrolls instead of overflowing the screen. Defaults to true.
|
|
39
|
+
*/
|
|
40
|
+
autoFit?: boolean;
|
|
41
|
+
/** Safe-area insets to keep clear (pass from `react-native-safe-area-context` if you use it). */
|
|
42
|
+
insets?: EdgeInsets;
|
|
43
|
+
/** Controlled open state. Omit for uncontrolled. */
|
|
44
|
+
open?: boolean;
|
|
45
|
+
/** Notified whenever the open state changes. */
|
|
46
|
+
onOpenChange?: (open: boolean) => void;
|
|
47
|
+
/** Padding kept from the screen edges when clamping. Defaults to 8. */
|
|
48
|
+
screenPadding?: number;
|
|
49
|
+
/** Style for the (measuring) wrapper around the trigger. Defaults to hugging the trigger. */
|
|
50
|
+
triggerStyle?: StyleProp<ViewStyle>;
|
|
51
|
+
}
|
|
52
|
+
export interface EdgeInsets {
|
|
53
|
+
top: number;
|
|
54
|
+
right: number;
|
|
55
|
+
bottom: number;
|
|
56
|
+
left: number;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Anchored overlay menu. Renders a trigger inline and, when open, a floating
|
|
60
|
+
* panel positioned relative to the trigger via two origins — `anchorOrigin`
|
|
61
|
+
* (point on the trigger) and `menuOrigin` (matching point on the menu). Tapping
|
|
62
|
+
* outside (or the hardware back button) dismisses it. Used to compose menu
|
|
63
|
+
* buttons, select fields, popovers, etc.
|
|
64
|
+
*/
|
|
65
|
+
export declare function Menu({ renderTrigger, children, anchorOrigin, menuOrigin, offset, autoFit, insets, open: openProp, onOpenChange, screenPadding, triggerStyle, }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EASL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,iEAAiE;AACjE,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAKD,kFAAkF;AAClF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,uDAAuD;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;IACtD;;;;OAIG;IACH,QAAQ,EACJ,SAAS,GACT,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC7F,gFAAgF;IAChF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iGAAiG;IACjG,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAgBD;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,aAAa,EACb,QAAQ,EACR,YAAyD,EACzD,UAAoD,EACpD,MAAU,EACV,OAAc,EACd,MAAoB,EACpB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,aAAiB,EACjB,YAAY,GACb,EAAE,SAAS,2CA4IX"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { type DropdownEntry } from '../Dropdown/Dropdown';
|
|
2
|
+
import { type IconButtonShape, type IconButtonSize, type IconButtonVariant } from '../IconButton/IconButton';
|
|
3
|
+
import type { IconName } from '../Icon/icons.generated';
|
|
4
|
+
import { type MenuOrigin } from './Menu';
|
|
5
|
+
export interface MenuButtonProps {
|
|
6
|
+
/** The menu rows (see `Dropdown`). */
|
|
7
|
+
options: DropdownEntry[];
|
|
8
|
+
/** Called with the key of the selected row. */
|
|
9
|
+
onSelect?: (key: string) => void;
|
|
10
|
+
/** Trigger icon. Defaults to `more` (the "More" button). */
|
|
11
|
+
icon?: IconName;
|
|
12
|
+
/** Accessibility label for the trigger. Defaults to "More options". */
|
|
13
|
+
accessibilityLabel?: string;
|
|
14
|
+
/** Trigger visual. Defaults to `secondary` (white + hairline border). */
|
|
15
|
+
variant?: IconButtonVariant;
|
|
16
|
+
/** Trigger size. Defaults to `md`. */
|
|
17
|
+
size?: IconButtonSize;
|
|
18
|
+
/** Trigger shape. Defaults to `round`. */
|
|
19
|
+
shape?: IconButtonShape;
|
|
20
|
+
/** Disable the trigger. */
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/** Point on the trigger the menu latches to. Defaults to `{ bottom, right }`. */
|
|
23
|
+
anchorOrigin?: MenuOrigin;
|
|
24
|
+
/** Point on the menu placed at the anchor. Defaults to `{ top, right }`. */
|
|
25
|
+
menuOrigin?: MenuOrigin;
|
|
26
|
+
/** Gap between trigger and menu. Defaults to 8. */
|
|
27
|
+
offset?: number;
|
|
28
|
+
/** Menu width. Defaults to the `Dropdown` default (350). */
|
|
29
|
+
menuWidth?: number;
|
|
30
|
+
/** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
|
|
31
|
+
showDividers?: boolean;
|
|
32
|
+
/** Close the menu after a row is selected. Defaults to true. */
|
|
33
|
+
closeOnSelect?: boolean;
|
|
34
|
+
/** Controlled open state. */
|
|
35
|
+
open?: boolean;
|
|
36
|
+
/** Notified whenever the open state changes. */
|
|
37
|
+
onOpenChange?: (open: boolean) => void;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* A "More"-style menu button — an `IconButton` that opens an anchored `Dropdown`.
|
|
41
|
+
* The first composed component built from `IconButton` + `Icon` + `Dropdown` +
|
|
42
|
+
* `Menu`. Placement is controlled by the two-origin model (`anchorOrigin` on the
|
|
43
|
+
* trigger, `menuOrigin` on the menu). Dismisses on outside press / back button.
|
|
44
|
+
*/
|
|
45
|
+
export declare function MenuButton({ options, onSelect, icon, accessibilityLabel, variant, size, shape, disabled, anchorOrigin, menuOrigin, offset, menuWidth, showDividers, closeOnSelect, open, onOpenChange, }: MenuButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
//# sourceMappingURL=MenuButton.d.ts.map
|