@bacon-pos/ui 0.5.1 → 0.7.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.
Files changed (157) hide show
  1. package/lib/commonjs/components/Dropdown/Dropdown.js +282 -0
  2. package/lib/commonjs/components/Dropdown/Dropdown.js.map +1 -0
  3. package/lib/commonjs/components/Dropdown/Dropdown.stories.js +519 -0
  4. package/lib/commonjs/components/Dropdown/Dropdown.stories.js.map +1 -0
  5. package/lib/commonjs/components/Dropdown/Dropdown.test.js +113 -0
  6. package/lib/commonjs/components/Dropdown/Dropdown.test.js.map +1 -0
  7. package/lib/commonjs/components/Dropdown/index.js +19 -0
  8. package/lib/commonjs/components/Dropdown/index.js.map +1 -0
  9. package/lib/commonjs/components/Menu/Menu.js +214 -0
  10. package/lib/commonjs/components/Menu/Menu.js.map +1 -0
  11. package/lib/commonjs/components/Menu/Menu.test.js +71 -0
  12. package/lib/commonjs/components/Menu/Menu.test.js.map +1 -0
  13. package/lib/commonjs/components/Menu/MenuButton.js +73 -0
  14. package/lib/commonjs/components/Menu/MenuButton.js.map +1 -0
  15. package/lib/commonjs/components/Menu/MenuButton.stories.js +166 -0
  16. package/lib/commonjs/components/Menu/MenuButton.stories.js.map +1 -0
  17. package/lib/commonjs/components/Menu/SelectButton.js +143 -0
  18. package/lib/commonjs/components/Menu/SelectButton.js.map +1 -0
  19. package/lib/commonjs/components/Menu/SelectButton.stories.js +116 -0
  20. package/lib/commonjs/components/Menu/SelectButton.stories.js.map +1 -0
  21. package/lib/commonjs/components/Menu/SelectButton.test.js +80 -0
  22. package/lib/commonjs/components/Menu/SelectButton.test.js.map +1 -0
  23. package/lib/commonjs/components/Menu/UserMenu.js +73 -0
  24. package/lib/commonjs/components/Menu/UserMenu.js.map +1 -0
  25. package/lib/commonjs/components/Menu/UserMenu.stories.js +85 -0
  26. package/lib/commonjs/components/Menu/UserMenu.stories.js.map +1 -0
  27. package/lib/commonjs/components/Menu/UserMenu.test.js +52 -0
  28. package/lib/commonjs/components/Menu/UserMenu.test.js.map +1 -0
  29. package/lib/commonjs/components/Menu/index.js +34 -0
  30. package/lib/commonjs/components/Menu/index.js.map +1 -0
  31. package/lib/commonjs/components/Select/Select.js +246 -0
  32. package/lib/commonjs/components/Select/Select.js.map +1 -0
  33. package/lib/commonjs/components/Select/Select.stories.js +221 -0
  34. package/lib/commonjs/components/Select/Select.stories.js.map +1 -0
  35. package/lib/commonjs/components/Select/Select.test.js +165 -0
  36. package/lib/commonjs/components/Select/Select.test.js.map +1 -0
  37. package/lib/commonjs/components/Select/index.js +13 -0
  38. package/lib/commonjs/components/Select/index.js.map +1 -0
  39. package/lib/commonjs/components/UserChip/UserChip.js +121 -0
  40. package/lib/commonjs/components/UserChip/UserChip.js.map +1 -0
  41. package/lib/commonjs/components/UserChip/UserChip.stories.js +153 -0
  42. package/lib/commonjs/components/UserChip/UserChip.stories.js.map +1 -0
  43. package/lib/commonjs/components/UserChip/UserChip.test.js +59 -0
  44. package/lib/commonjs/components/UserChip/UserChip.test.js.map +1 -0
  45. package/lib/commonjs/components/UserChip/index.js +13 -0
  46. package/lib/commonjs/components/UserChip/index.js.map +1 -0
  47. package/lib/commonjs/components/index.js +57 -13
  48. package/lib/commonjs/components/index.js.map +1 -1
  49. package/lib/module/components/Dropdown/Dropdown.js +277 -0
  50. package/lib/module/components/Dropdown/Dropdown.js.map +1 -0
  51. package/lib/module/components/Dropdown/Dropdown.stories.js +515 -0
  52. package/lib/module/components/Dropdown/Dropdown.stories.js.map +1 -0
  53. package/lib/module/components/Dropdown/Dropdown.test.js +113 -0
  54. package/lib/module/components/Dropdown/Dropdown.test.js.map +1 -0
  55. package/lib/module/components/Dropdown/index.js +4 -0
  56. package/lib/module/components/Dropdown/index.js.map +1 -0
  57. package/lib/module/components/Menu/Menu.js +210 -0
  58. package/lib/module/components/Menu/Menu.js.map +1 -0
  59. package/lib/module/components/Menu/Menu.test.js +71 -0
  60. package/lib/module/components/Menu/Menu.test.js.map +1 -0
  61. package/lib/module/components/Menu/MenuButton.js +69 -0
  62. package/lib/module/components/Menu/MenuButton.js.map +1 -0
  63. package/lib/module/components/Menu/MenuButton.stories.js +162 -0
  64. package/lib/module/components/Menu/MenuButton.stories.js.map +1 -0
  65. package/lib/module/components/Menu/SelectButton.js +139 -0
  66. package/lib/module/components/Menu/SelectButton.js.map +1 -0
  67. package/lib/module/components/Menu/SelectButton.stories.js +112 -0
  68. package/lib/module/components/Menu/SelectButton.stories.js.map +1 -0
  69. package/lib/module/components/Menu/SelectButton.test.js +80 -0
  70. package/lib/module/components/Menu/SelectButton.test.js.map +1 -0
  71. package/lib/module/components/Menu/UserMenu.js +69 -0
  72. package/lib/module/components/Menu/UserMenu.js.map +1 -0
  73. package/lib/module/components/Menu/UserMenu.stories.js +81 -0
  74. package/lib/module/components/Menu/UserMenu.stories.js.map +1 -0
  75. package/lib/module/components/Menu/UserMenu.test.js +52 -0
  76. package/lib/module/components/Menu/UserMenu.test.js.map +1 -0
  77. package/lib/module/components/Menu/index.js +7 -0
  78. package/lib/module/components/Menu/index.js.map +1 -0
  79. package/lib/module/components/Select/Select.js +244 -0
  80. package/lib/module/components/Select/Select.js.map +1 -0
  81. package/lib/module/components/Select/Select.stories.js +217 -0
  82. package/lib/module/components/Select/Select.stories.js.map +1 -0
  83. package/lib/module/components/Select/Select.test.js +165 -0
  84. package/lib/module/components/Select/Select.test.js.map +1 -0
  85. package/lib/module/components/Select/index.js +4 -0
  86. package/lib/module/components/Select/index.js.map +1 -0
  87. package/lib/module/components/UserChip/UserChip.js +117 -0
  88. package/lib/module/components/UserChip/UserChip.js.map +1 -0
  89. package/lib/module/components/UserChip/UserChip.stories.js +149 -0
  90. package/lib/module/components/UserChip/UserChip.stories.js.map +1 -0
  91. package/lib/module/components/UserChip/UserChip.test.js +59 -0
  92. package/lib/module/components/UserChip/UserChip.test.js.map +1 -0
  93. package/lib/module/components/UserChip/index.js +4 -0
  94. package/lib/module/components/UserChip/index.js.map +1 -0
  95. package/lib/module/components/index.js +4 -0
  96. package/lib/module/components/index.js.map +1 -1
  97. package/lib/typescript/commonjs/components/Dropdown/Dropdown.d.ts +105 -0
  98. package/lib/typescript/commonjs/components/Dropdown/Dropdown.d.ts.map +1 -0
  99. package/lib/typescript/commonjs/components/Dropdown/index.d.ts +3 -0
  100. package/lib/typescript/commonjs/components/Dropdown/index.d.ts.map +1 -0
  101. package/lib/typescript/commonjs/components/Menu/Menu.d.ts +66 -0
  102. package/lib/typescript/commonjs/components/Menu/Menu.d.ts.map +1 -0
  103. package/lib/typescript/commonjs/components/Menu/MenuButton.d.ts +46 -0
  104. package/lib/typescript/commonjs/components/Menu/MenuButton.d.ts.map +1 -0
  105. package/lib/typescript/commonjs/components/Menu/SelectButton.d.ts +60 -0
  106. package/lib/typescript/commonjs/components/Menu/SelectButton.d.ts.map +1 -0
  107. package/lib/typescript/commonjs/components/Menu/UserMenu.d.ts +46 -0
  108. package/lib/typescript/commonjs/components/Menu/UserMenu.d.ts.map +1 -0
  109. package/lib/typescript/commonjs/components/Menu/index.d.ts +9 -0
  110. package/lib/typescript/commonjs/components/Menu/index.d.ts.map +1 -0
  111. package/lib/typescript/commonjs/components/Select/Select.d.ts +73 -0
  112. package/lib/typescript/commonjs/components/Select/Select.d.ts.map +1 -0
  113. package/lib/typescript/commonjs/components/Select/index.d.ts +3 -0
  114. package/lib/typescript/commonjs/components/Select/index.d.ts.map +1 -0
  115. package/lib/typescript/commonjs/components/UserChip/UserChip.d.ts +33 -0
  116. package/lib/typescript/commonjs/components/UserChip/UserChip.d.ts.map +1 -0
  117. package/lib/typescript/commonjs/components/UserChip/index.d.ts +3 -0
  118. package/lib/typescript/commonjs/components/UserChip/index.d.ts.map +1 -0
  119. package/lib/typescript/commonjs/components/index.d.ts +4 -0
  120. package/lib/typescript/commonjs/components/index.d.ts.map +1 -1
  121. package/lib/typescript/module/components/Dropdown/Dropdown.d.ts +105 -0
  122. package/lib/typescript/module/components/Dropdown/Dropdown.d.ts.map +1 -0
  123. package/lib/typescript/module/components/Dropdown/index.d.ts +3 -0
  124. package/lib/typescript/module/components/Dropdown/index.d.ts.map +1 -0
  125. package/lib/typescript/module/components/Menu/Menu.d.ts +66 -0
  126. package/lib/typescript/module/components/Menu/Menu.d.ts.map +1 -0
  127. package/lib/typescript/module/components/Menu/MenuButton.d.ts +46 -0
  128. package/lib/typescript/module/components/Menu/MenuButton.d.ts.map +1 -0
  129. package/lib/typescript/module/components/Menu/SelectButton.d.ts +60 -0
  130. package/lib/typescript/module/components/Menu/SelectButton.d.ts.map +1 -0
  131. package/lib/typescript/module/components/Menu/UserMenu.d.ts +46 -0
  132. package/lib/typescript/module/components/Menu/UserMenu.d.ts.map +1 -0
  133. package/lib/typescript/module/components/Menu/index.d.ts +9 -0
  134. package/lib/typescript/module/components/Menu/index.d.ts.map +1 -0
  135. package/lib/typescript/module/components/Select/Select.d.ts +73 -0
  136. package/lib/typescript/module/components/Select/Select.d.ts.map +1 -0
  137. package/lib/typescript/module/components/Select/index.d.ts +3 -0
  138. package/lib/typescript/module/components/Select/index.d.ts.map +1 -0
  139. package/lib/typescript/module/components/UserChip/UserChip.d.ts +33 -0
  140. package/lib/typescript/module/components/UserChip/UserChip.d.ts.map +1 -0
  141. package/lib/typescript/module/components/UserChip/index.d.ts +3 -0
  142. package/lib/typescript/module/components/UserChip/index.d.ts.map +1 -0
  143. package/lib/typescript/module/components/index.d.ts +4 -0
  144. package/lib/typescript/module/components/index.d.ts.map +1 -1
  145. package/package.json +1 -1
  146. package/src/components/Dropdown/Dropdown.tsx +319 -0
  147. package/src/components/Dropdown/index.ts +2 -0
  148. package/src/components/Menu/Menu.tsx +249 -0
  149. package/src/components/Menu/MenuButton.tsx +98 -0
  150. package/src/components/Menu/SelectButton.tsx +171 -0
  151. package/src/components/Menu/UserMenu.tsx +100 -0
  152. package/src/components/Menu/index.ts +14 -0
  153. package/src/components/Select/Select.tsx +323 -0
  154. package/src/components/Select/index.ts +2 -0
  155. package/src/components/UserChip/UserChip.tsx +138 -0
  156. package/src/components/UserChip/index.ts +2 -0
  157. package/src/components/index.ts +4 -0
@@ -0,0 +1,139 @@
1
+ "use strict";
2
+
3
+ import { useState } from 'react';
4
+ import { useTheme } from "../../theme/index.js";
5
+ import { Button } from "../Button/Button.js";
6
+ import { Dropdown } from "../Dropdown/Dropdown.js";
7
+ import { Icon } from "../Icon/Icon.js";
8
+ import { Menu } from "./Menu.js";
9
+
10
+ /** A selectable option. Its `icon` shows both in the row and on the trigger when chosen. */
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ /** Button foreground per variant — mirrors Button so the trigger icon matches the label. */
13
+ function triggerForeground(theme, variant) {
14
+ const {
15
+ action,
16
+ state
17
+ } = theme.colors;
18
+ switch (variant) {
19
+ case 'secondary':
20
+ return action.secondaryForeground;
21
+ case 'inverse':
22
+ return action.inverseForeground;
23
+ case 'destructive':
24
+ return state.destructiveSubtleForeground;
25
+ case 'success':
26
+ return state.successForeground;
27
+ case 'successSubtle':
28
+ return state.successSubtleForeground;
29
+ default:
30
+ return action.primaryForeground;
31
+ }
32
+ }
33
+
34
+ /**
35
+ * Select-style button — a `Button` (label + leading icon) that opens an anchored
36
+ * `Dropdown` to change its value; the current option is marked with a check.
37
+ * A composed component built from `Button` + `Menu` + `Dropdown`. Controlled via
38
+ * `value` / `onChange`, or uncontrolled via `defaultValue`.
39
+ */
40
+ export function SelectButton({
41
+ options,
42
+ value: valueProp,
43
+ defaultValue,
44
+ onChange,
45
+ placeholder = 'Select',
46
+ placeholderIcon,
47
+ showSelectedIcon = true,
48
+ chevron = false,
49
+ variant = 'secondary',
50
+ size = 'sm',
51
+ fullWidth = false,
52
+ disabled = false,
53
+ anchorOrigin = {
54
+ vertical: 'bottom',
55
+ horizontal: 'left'
56
+ },
57
+ menuOrigin = {
58
+ vertical: 'top',
59
+ horizontal: 'left'
60
+ },
61
+ offset = 8,
62
+ menuWidth,
63
+ showDividers,
64
+ closeOnSelect = true,
65
+ open,
66
+ onOpenChange
67
+ }) {
68
+ const theme = useTheme();
69
+ const isControlled = valueProp !== undefined;
70
+ const [uncontrolled, setUncontrolled] = useState(defaultValue);
71
+ const value = isControlled ? valueProp : uncontrolled;
72
+ const selected = options.find(o => o.key === value);
73
+ const label = selected?.label ?? placeholder;
74
+ const triggerIcon = selected?.icon ?? placeholderIcon;
75
+ const fg = triggerForeground(theme, variant);
76
+ const iconSize = size === 'sm' ? 20 : 24;
77
+ const setValue = key => {
78
+ if (!isControlled) setUncontrolled(key);
79
+ onChange?.(key);
80
+ };
81
+ const rows = options.map(o => ({
82
+ key: o.key,
83
+ label: o.label,
84
+ disabled: o.disabled,
85
+ leading: o.icon ? {
86
+ kind: 'icon',
87
+ name: o.icon
88
+ } : undefined,
89
+ trailing: o.key === value ? {
90
+ kind: 'icon',
91
+ name: 'check',
92
+ color: theme.colors.feedback.success
93
+ } : undefined
94
+ }));
95
+ return /*#__PURE__*/_jsx(Menu, {
96
+ anchorOrigin: anchorOrigin,
97
+ menuOrigin: menuOrigin,
98
+ offset: offset,
99
+ open: open,
100
+ onOpenChange: onOpenChange,
101
+ triggerStyle: fullWidth ? {
102
+ alignSelf: 'stretch'
103
+ } : undefined,
104
+ renderTrigger: ({
105
+ toggle
106
+ }) => /*#__PURE__*/_jsx(Button, {
107
+ label: label,
108
+ variant: variant,
109
+ size: size,
110
+ fullWidth: fullWidth,
111
+ disabled: disabled,
112
+ onPress: toggle,
113
+ leftIcon: showSelectedIcon && triggerIcon ? /*#__PURE__*/_jsx(Icon, {
114
+ name: triggerIcon,
115
+ size: iconSize,
116
+ color: fg
117
+ }) : undefined,
118
+ rightIcon: chevron ? /*#__PURE__*/_jsx(Icon, {
119
+ name: "chevron-down",
120
+ size: iconSize,
121
+ color: fg
122
+ }) : undefined
123
+ }),
124
+ children: ({
125
+ close,
126
+ maxHeight
127
+ }) => /*#__PURE__*/_jsx(Dropdown, {
128
+ options: rows,
129
+ width: menuWidth,
130
+ maxHeight: maxHeight,
131
+ showDividers: showDividers,
132
+ onSelect: key => {
133
+ setValue(key);
134
+ if (closeOnSelect) close();
135
+ }
136
+ })
137
+ });
138
+ }
139
+ //# sourceMappingURL=SelectButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useState","useTheme","Button","Dropdown","Icon","Menu","jsx","_jsx","triggerForeground","theme","variant","action","state","colors","secondaryForeground","inverseForeground","destructiveSubtleForeground","successForeground","successSubtleForeground","primaryForeground","SelectButton","options","value","valueProp","defaultValue","onChange","placeholder","placeholderIcon","showSelectedIcon","chevron","size","fullWidth","disabled","anchorOrigin","vertical","horizontal","menuOrigin","offset","menuWidth","showDividers","closeOnSelect","open","onOpenChange","isControlled","undefined","uncontrolled","setUncontrolled","selected","find","o","key","label","triggerIcon","icon","fg","iconSize","setValue","rows","map","leading","kind","name","trailing","color","feedback","success","triggerStyle","alignSelf","renderTrigger","toggle","onPress","leftIcon","rightIcon","children","close","maxHeight","width","onSelect"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/SelectButton.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,112 @@
1
+ "use strict";
2
+
3
+ import { useState } from 'react';
4
+ import { View } from 'react-native';
5
+ import { SelectButton } from "./SelectButton.js";
6
+ import { Text } from "../Text/Text.js";
7
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
+ const meta = {
9
+ title: 'Components/SelectButton',
10
+ component: SelectButton
11
+ };
12
+ export default meta;
13
+ const ORDER_TYPES = [{
14
+ key: 'dine-in',
15
+ label: 'Dine in',
16
+ icon: 'dish'
17
+ }, {
18
+ key: 'take-out',
19
+ label: 'Take out',
20
+ icon: 'shopping-bag'
21
+ }, {
22
+ key: 'delivery',
23
+ label: 'Delivery',
24
+ icon: 'truck-delivery'
25
+ }];
26
+
27
+ /** The order-type selector from the mockup: leading icon, green check on the current value. */
28
+ export const OrderType = {
29
+ render: () => {
30
+ const [value, setValue] = useState('dine-in');
31
+ return /*#__PURE__*/_jsxs(View, {
32
+ style: {
33
+ padding: 24,
34
+ height: 340
35
+ },
36
+ children: [/*#__PURE__*/_jsx(SelectButton, {
37
+ options: ORDER_TYPES,
38
+ value: value,
39
+ onChange: setValue,
40
+ menuWidth: 300
41
+ }), /*#__PURE__*/_jsxs(Text, {
42
+ variant: "caption",
43
+ color: "secondary",
44
+ style: {
45
+ marginTop: 12
46
+ },
47
+ children: ["value: ", value]
48
+ })]
49
+ });
50
+ }
51
+ };
52
+
53
+ /** With a trailing chevron on the trigger. */
54
+ export const WithChevron = {
55
+ render: () => {
56
+ const [value, setValue] = useState('dine-in');
57
+ return /*#__PURE__*/_jsx(View, {
58
+ style: {
59
+ padding: 24,
60
+ height: 340
61
+ },
62
+ children: /*#__PURE__*/_jsx(SelectButton, {
63
+ options: ORDER_TYPES,
64
+ value: value,
65
+ onChange: setValue,
66
+ chevron: true,
67
+ menuWidth: 300
68
+ })
69
+ });
70
+ }
71
+ };
72
+
73
+ /** Uncontrolled with a placeholder (nothing selected initially). */
74
+ export const Placeholder = {
75
+ render: () => /*#__PURE__*/_jsx(View, {
76
+ style: {
77
+ padding: 24,
78
+ height: 340
79
+ },
80
+ children: /*#__PURE__*/_jsx(SelectButton, {
81
+ options: ORDER_TYPES,
82
+ placeholder: "Order type",
83
+ placeholderIcon: "dish",
84
+ chevron: true,
85
+ menuWidth: 300,
86
+ onChange: () => {}
87
+ })
88
+ })
89
+ };
90
+
91
+ /** Full-width trigger (e.g. inside a form). */
92
+ export const FullWidth = {
93
+ render: () => {
94
+ const [value, setValue] = useState('take-out');
95
+ return /*#__PURE__*/_jsx(View, {
96
+ style: {
97
+ padding: 24,
98
+ height: 340,
99
+ width: 360
100
+ },
101
+ children: /*#__PURE__*/_jsx(SelectButton, {
102
+ options: ORDER_TYPES,
103
+ value: value,
104
+ onChange: setValue,
105
+ fullWidth: true,
106
+ chevron: true,
107
+ menuWidth: 312
108
+ })
109
+ });
110
+ }
111
+ };
112
+ //# sourceMappingURL=SelectButton.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useState","View","SelectButton","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","ORDER_TYPES","key","label","icon","OrderType","render","value","setValue","style","padding","height","children","options","onChange","menuWidth","variant","color","marginTop","WithChevron","chevron","Placeholder","placeholder","placeholderIcon","FullWidth","width","fullWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/SelectButton.stories.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAEhC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,YAAY,QAAiC,mBAAgB;AACtE,SAASC,IAAI,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,yBAAyB;EAChCC,SAAS,EAAER;AACb,CAAqC;AAErC,eAAeM,IAAI;AAGnB,MAAMG,WAAiC,GAAG,CACxC;EAAEC,GAAG,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAO,CAAC,EAClD;EAAEF,GAAG,EAAE,UAAU;EAAEC,KAAK,EAAE,UAAU;EAAEC,IAAI,EAAE;AAAe,CAAC,EAC5D;EAAEF,GAAG,EAAE,UAAU;EAAEC,KAAK,EAAE,UAAU;EAAEC,IAAI,EAAE;AAAiB,CAAC,CAC/D;;AAED;AACA,OAAO,MAAMC,SAAgB,GAAG;EAC9BC,MAAM,EAAEA,CAAA,KAAM;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAAC,SAAS,CAAC;IAC7C,oBACEO,KAAA,CAACN,IAAI;MAACkB,KAAK,EAAE;QAAEC,OAAO,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAI,CAAE;MAAAC,QAAA,gBACxCjB,IAAA,CAACH,YAAY;QAACqB,OAAO,EAAEZ,WAAY;QAACM,KAAK,EAAEA,KAAM;QAACO,QAAQ,EAAEN,QAAS;QAACO,SAAS,EAAE;MAAI,CAAE,CAAC,eACxFlB,KAAA,CAACJ,IAAI;QAACuB,OAAO,EAAC,SAAS;QAACC,KAAK,EAAC,WAAW;QAACR,KAAK,EAAE;UAAES,SAAS,EAAE;QAAG,CAAE;QAAAN,QAAA,GAAC,SAC3D,EAACL,KAAK;MAAA,CACT,CAAC;IAAA,CACH,CAAC;EAEX;AACF,CAAC;;AAED;AACA,OAAO,MAAMY,WAAkB,GAAG;EAChCb,MAAM,EAAEA,CAAA,KAAM;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAAC,SAAS,CAAC;IAC7C,oBACEK,IAAA,CAACJ,IAAI;MAACkB,KAAK,EAAE;QAAEC,OAAO,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAI,CAAE;MAAAC,QAAA,eACxCjB,IAAA,CAACH,YAAY;QAACqB,OAAO,EAAEZ,WAAY;QAACM,KAAK,EAAEA,KAAM;QAACO,QAAQ,EAAEN,QAAS;QAACY,OAAO;QAACL,SAAS,EAAE;MAAI,CAAE;IAAC,CAC5F,CAAC;EAEX;AACF,CAAC;;AAED;AACA,OAAO,MAAMM,WAAkB,GAAG;EAChCf,MAAM,EAAEA,CAAA,kBACNX,IAAA,CAACJ,IAAI;IAACkB,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAI,CAAE;IAAAC,QAAA,eACxCjB,IAAA,CAACH,YAAY;MACXqB,OAAO,EAAEZ,WAAY;MACrBqB,WAAW,EAAC,YAAY;MACxBC,eAAe,EAAC,MAAM;MACtBH,OAAO;MACPL,SAAS,EAAE,GAAI;MACfD,QAAQ,EAAEA,CAAA,KAAM,CAAC;IAAE,CACpB;EAAC,CACE;AAEV,CAAC;;AAED;AACA,OAAO,MAAMU,SAAgB,GAAG;EAC9BlB,MAAM,EAAEA,CAAA,KAAM;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAAC,UAAU,CAAC;IAC9C,oBACEK,IAAA,CAACJ,IAAI;MAACkB,KAAK,EAAE;QAAEC,OAAO,EAAE,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEc,KAAK,EAAE;MAAI,CAAE;MAAAb,QAAA,eACpDjB,IAAA,CAACH,YAAY;QACXqB,OAAO,EAAEZ,WAAY;QACrBM,KAAK,EAAEA,KAAM;QACbO,QAAQ,EAAEN,QAAS;QACnBkB,SAAS;QACTN,OAAO;QACPL,SAAS,EAAE;MAAI,CAChB;IAAC,CACE,CAAC;EAEX;AACF,CAAC","ignoreList":[]}
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ import { useState } from 'react';
4
+ import { render, fireEvent, screen } from '@testing-library/react-native';
5
+ import { ThemeProvider } from "../../theme/index.js";
6
+ import { SelectButton } from "./SelectButton.js";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ function wrap(ui) {
9
+ return render(/*#__PURE__*/_jsx(ThemeProvider, {
10
+ children: ui
11
+ }));
12
+ }
13
+ const OPTIONS = [{
14
+ key: 'dine-in',
15
+ label: 'Dine in',
16
+ icon: 'dish'
17
+ }, {
18
+ key: 'take-out',
19
+ label: 'Take out',
20
+ icon: 'shopping-bag'
21
+ }, {
22
+ key: 'delivery',
23
+ label: 'Delivery',
24
+ icon: 'truck-delivery'
25
+ }];
26
+ function Controlled() {
27
+ const [value, setValue] = useState('dine-in');
28
+ return /*#__PURE__*/_jsx(SelectButton, {
29
+ options: OPTIONS,
30
+ value: value,
31
+ onChange: setValue
32
+ });
33
+ }
34
+ describe('SelectButton', () => {
35
+ it('shows the placeholder when nothing is selected', () => {
36
+ wrap(/*#__PURE__*/_jsx(SelectButton, {
37
+ options: OPTIONS,
38
+ placeholder: "Order type"
39
+ }));
40
+ expect(screen.getByText('Order type')).toBeTruthy();
41
+ });
42
+ it('shows the selected option label on the trigger', () => {
43
+ wrap(/*#__PURE__*/_jsx(SelectButton, {
44
+ options: OPTIONS,
45
+ value: "take-out"
46
+ }));
47
+ expect(screen.getByText('Take out')).toBeTruthy();
48
+ });
49
+ it('opens the menu and lists the options', () => {
50
+ wrap(/*#__PURE__*/_jsx(SelectButton, {
51
+ options: OPTIONS,
52
+ value: "dine-in"
53
+ }));
54
+ // The trigger shows "Dine in"; open the menu to reveal the rows.
55
+ fireEvent.press(screen.getByText('Dine in'));
56
+ expect(screen.getByText('Take out')).toBeTruthy();
57
+ expect(screen.getByText('Delivery')).toBeTruthy();
58
+ });
59
+ it('selecting a row calls onChange with its key and closes', () => {
60
+ const onChange = jest.fn();
61
+ wrap(/*#__PURE__*/_jsx(SelectButton, {
62
+ options: OPTIONS,
63
+ value: "dine-in",
64
+ onChange: onChange
65
+ }));
66
+ fireEvent.press(screen.getByText('Dine in'));
67
+ fireEvent.press(screen.getByText('Delivery'));
68
+ expect(onChange).toHaveBeenCalledWith('delivery');
69
+ expect(screen.queryByText('Take out')).toBeNull();
70
+ });
71
+ it('uncontrolled: the trigger reflects the new selection', () => {
72
+ wrap(/*#__PURE__*/_jsx(Controlled, {}));
73
+ fireEvent.press(screen.getByText('Dine in'));
74
+ fireEvent.press(screen.getByText('Delivery'));
75
+ // Trigger now shows Delivery; menu closed.
76
+ expect(screen.getByText('Delivery')).toBeTruthy();
77
+ expect(screen.queryByText('Take out')).toBeNull();
78
+ });
79
+ });
80
+ //# sourceMappingURL=SelectButton.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useState","render","fireEvent","screen","ThemeProvider","SelectButton","jsx","_jsx","wrap","ui","children","OPTIONS","key","label","icon","Controlled","value","setValue","options","onChange","describe","it","placeholder","expect","getByText","toBeTruthy","press","jest","fn","toHaveBeenCalledWith","queryByText","toBeNull"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/SelectButton.test.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+
3
+ import { Dropdown } from "../Dropdown/Dropdown.js";
4
+ import { UserChip } from "../UserChip/UserChip.js";
5
+ import { Menu } from "./Menu.js";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ /**
8
+ * User menu — an avatar / `UserChip` that opens an anchored `Dropdown` (e.g. an
9
+ * account menu). A composed component built from `UserChip` + `Menu` +
10
+ * `Dropdown`. Pass a `name` to use the labelled pill as the trigger, or omit it
11
+ * for just the avatar. Dismisses on outside press / back button.
12
+ */
13
+ export function UserMenu({
14
+ options,
15
+ onSelect,
16
+ source,
17
+ name,
18
+ initials,
19
+ size = 'md',
20
+ chipBackgroundColor,
21
+ chipColor,
22
+ anchorOrigin = {
23
+ vertical: 'bottom',
24
+ horizontal: 'left'
25
+ },
26
+ menuOrigin = {
27
+ vertical: 'top',
28
+ horizontal: 'left'
29
+ },
30
+ offset = 8,
31
+ menuWidth,
32
+ showDividers,
33
+ closeOnSelect = true,
34
+ open,
35
+ onOpenChange
36
+ }) {
37
+ return /*#__PURE__*/_jsx(Menu, {
38
+ anchorOrigin: anchorOrigin,
39
+ menuOrigin: menuOrigin,
40
+ offset: offset,
41
+ open: open,
42
+ onOpenChange: onOpenChange,
43
+ renderTrigger: ({
44
+ toggle
45
+ }) => /*#__PURE__*/_jsx(UserChip, {
46
+ source: source,
47
+ name: name,
48
+ initials: initials,
49
+ size: size,
50
+ backgroundColor: chipBackgroundColor,
51
+ color: chipColor,
52
+ onPress: toggle
53
+ }),
54
+ children: ({
55
+ close,
56
+ maxHeight
57
+ }) => /*#__PURE__*/_jsx(Dropdown, {
58
+ options: options,
59
+ width: menuWidth,
60
+ maxHeight: maxHeight,
61
+ showDividers: showDividers,
62
+ onSelect: key => {
63
+ onSelect?.(key);
64
+ if (closeOnSelect) close();
65
+ }
66
+ })
67
+ });
68
+ }
69
+ //# sourceMappingURL=UserMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["Dropdown","UserChip","Menu","jsx","_jsx","UserMenu","options","onSelect","source","name","initials","size","chipBackgroundColor","chipColor","anchorOrigin","vertical","horizontal","menuOrigin","offset","menuWidth","showDividers","closeOnSelect","open","onOpenChange","renderTrigger","toggle","backgroundColor","color","onPress","children","close","maxHeight","width","key"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/UserMenu.tsx"],"mappings":";;AACA,SAASA,QAAQ,QAA4B,yBAAsB;AACnE,SAASC,QAAQ,QAA2B,yBAAsB;AAClE,SAASC,IAAI,QAAyB,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuC/C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,QAAQ;EACRC,IAAI,GAAG,IAAI;EACXC,mBAAmB;EACnBC,SAAS;EACTC,YAAY,GAAG;IAAEC,QAAQ,EAAE,QAAQ;IAAEC,UAAU,EAAE;EAAO,CAAC;EACzDC,UAAU,GAAG;IAAEF,QAAQ,EAAE,KAAK;IAAEC,UAAU,EAAE;EAAO,CAAC;EACpDE,MAAM,GAAG,CAAC;EACVC,SAAS;EACTC,YAAY;EACZC,aAAa,GAAG,IAAI;EACpBC,IAAI;EACJC;AACa,CAAC,EAAE;EAChB,oBACEnB,IAAA,CAACF,IAAI;IACHY,YAAY,EAAEA,YAAa;IAC3BG,UAAU,EAAEA,UAAW;IACvBC,MAAM,EAAEA,MAAO;IACfI,IAAI,EAAEA,IAAK;IACXC,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,CAAC;MAAEC;IAAO,CAAC,kBACxBrB,IAAA,CAACH,QAAQ;MACPO,MAAM,EAAEA,MAAO;MACfC,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXe,eAAe,EAAEd,mBAAoB;MACrCe,KAAK,EAAEd,SAAU;MACjBe,OAAO,EAAEH;IAAO,CACjB,CACD;IAAAI,QAAA,EAEDA,CAAC;MAAEC,KAAK;MAAEC;IAAU,CAAC,kBACpB3B,IAAA,CAACJ,QAAQ;MACPM,OAAO,EAAEA,OAAQ;MACjB0B,KAAK,EAAEb,SAAU;MACjBY,SAAS,EAAEA,SAAU;MACrBX,YAAY,EAAEA,YAAa;MAC3Bb,QAAQ,EAAG0B,GAAG,IAAK;QACjB1B,QAAQ,GAAG0B,GAAG,CAAC;QACf,IAAIZ,aAAa,EAAES,KAAK,CAAC,CAAC;MAC5B;IAAE,CACH;EACF,CACG,CAAC;AAEX","ignoreList":[]}
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+
3
+ import { View } from 'react-native';
4
+ import { UserMenu } from "./UserMenu.js";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const meta = {
7
+ title: 'Components/UserMenu',
8
+ component: UserMenu
9
+ };
10
+ export default meta;
11
+ const PHOTO = {
12
+ uri: 'https://i.pravatar.cc/150?img=47'
13
+ };
14
+ const ACCOUNT = [{
15
+ key: 'profile',
16
+ label: 'Profile',
17
+ leading: {
18
+ kind: 'icon',
19
+ name: 'user'
20
+ }
21
+ }, {
22
+ key: 'settings',
23
+ label: 'Settings',
24
+ leading: {
25
+ kind: 'icon',
26
+ name: 'settings'
27
+ }
28
+ }, {
29
+ key: 'div',
30
+ type: 'divider'
31
+ }, {
32
+ key: 'logout',
33
+ label: 'Log out',
34
+ destructive: true
35
+ }];
36
+
37
+ /** Trigger = the UserChip pill (avatar + name). */
38
+ export const ChipTrigger = {
39
+ render: () => /*#__PURE__*/_jsx(View, {
40
+ style: {
41
+ padding: 24,
42
+ height: 320
43
+ },
44
+ children: /*#__PURE__*/_jsx(UserMenu, {
45
+ name: "Juana Gomez",
46
+ source: PHOTO,
47
+ size: "lg",
48
+ options: ACCOUNT,
49
+ menuWidth: 240,
50
+ onSelect: () => {}
51
+ })
52
+ })
53
+ };
54
+
55
+ /** Trigger = just the avatar (no name) — e.g. a header account button. */
56
+ export const AvatarTrigger = {
57
+ render: () => /*#__PURE__*/_jsx(View, {
58
+ style: {
59
+ padding: 24,
60
+ height: 320,
61
+ alignItems: 'flex-end'
62
+ },
63
+ children: /*#__PURE__*/_jsx(UserMenu, {
64
+ source: PHOTO,
65
+ initials: "JG",
66
+ size: "md",
67
+ options: ACCOUNT,
68
+ menuWidth: 220,
69
+ anchorOrigin: {
70
+ vertical: 'bottom',
71
+ horizontal: 'right'
72
+ },
73
+ menuOrigin: {
74
+ vertical: 'top',
75
+ horizontal: 'right'
76
+ },
77
+ onSelect: () => {}
78
+ })
79
+ })
80
+ };
81
+ //# sourceMappingURL=UserMenu.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["View","UserMenu","jsx","_jsx","meta","title","component","PHOTO","uri","ACCOUNT","key","label","leading","kind","name","type","destructive","ChipTrigger","render","style","padding","height","children","source","size","options","menuWidth","onSelect","AvatarTrigger","alignItems","initials","anchorOrigin","vertical","horizontal","menuOrigin"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/UserMenu.stories.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtC,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAEL;AACb,CAAiC;AAEjC,eAAeG,IAAI;AAGnB,MAAMG,KAAK,GAAG;EAAEC,GAAG,EAAE;AAAmC,CAAC;AAEzD,MAAMC,OAAwB,GAAG,CAC/B;EAAEC,GAAG,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,OAAO,EAAE;IAAEC,IAAI,EAAE,MAAM;IAAEC,IAAI,EAAE;EAAO;AAAE,CAAC,EAC7E;EAAEJ,GAAG,EAAE,UAAU;EAAEC,KAAK,EAAE,UAAU;EAAEC,OAAO,EAAE;IAAEC,IAAI,EAAE,MAAM;IAAEC,IAAI,EAAE;EAAW;AAAE,CAAC,EACnF;EAAEJ,GAAG,EAAE,KAAK;EAAEK,IAAI,EAAE;AAAU,CAAC,EAC/B;EAAEL,GAAG,EAAE,QAAQ;EAAEC,KAAK,EAAE,SAAS;EAAEK,WAAW,EAAE;AAAK,CAAC,CACvD;;AAED;AACA,OAAO,MAAMC,WAAkB,GAAG;EAChCC,MAAM,EAAEA,CAAA,kBACNf,IAAA,CAACH,IAAI;IAACmB,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAI,CAAE;IAAAC,QAAA,eACxCnB,IAAA,CAACF,QAAQ;MAACa,IAAI,EAAC,aAAa;MAACS,MAAM,EAAEhB,KAAM;MAACiB,IAAI,EAAC,IAAI;MAACC,OAAO,EAAEhB,OAAQ;MAACiB,SAAS,EAAE,GAAI;MAACC,QAAQ,EAAEA,CAAA,KAAM,CAAC;IAAE,CAAE;EAAC,CAC1G;AAEV,CAAC;;AAED;AACA,OAAO,MAAMC,aAAoB,GAAG;EAClCV,MAAM,EAAEA,CAAA,kBACNf,IAAA,CAACH,IAAI;IAACmB,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE,GAAG;MAAEQ,UAAU,EAAE;IAAW,CAAE;IAAAP,QAAA,eAChEnB,IAAA,CAACF,QAAQ;MACPsB,MAAM,EAAEhB,KAAM;MACduB,QAAQ,EAAC,IAAI;MACbN,IAAI,EAAC,IAAI;MACTC,OAAO,EAAEhB,OAAQ;MACjBiB,SAAS,EAAE,GAAI;MACfK,YAAY,EAAE;QAAEC,QAAQ,EAAE,QAAQ;QAAEC,UAAU,EAAE;MAAQ,CAAE;MAC1DC,UAAU,EAAE;QAAEF,QAAQ,EAAE,KAAK;QAAEC,UAAU,EAAE;MAAQ,CAAE;MACrDN,QAAQ,EAAEA,CAAA,KAAM,CAAC;IAAE,CACpB;EAAC,CACE;AAEV,CAAC","ignoreList":[]}
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ import { render, fireEvent, screen } from '@testing-library/react-native';
4
+ import { ThemeProvider } from "../../theme/index.js";
5
+ import { UserMenu } from "./UserMenu.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
+ const OPTIONS = [{
13
+ key: 'profile',
14
+ label: 'Profile'
15
+ }, {
16
+ key: 'logout',
17
+ label: 'Log out',
18
+ destructive: true
19
+ }];
20
+ describe('UserMenu', () => {
21
+ it('opens the menu when the chip trigger is pressed', () => {
22
+ wrap(/*#__PURE__*/_jsx(UserMenu, {
23
+ name: "Juana Gomez",
24
+ options: OPTIONS
25
+ }));
26
+ expect(screen.queryByText('Profile')).toBeNull();
27
+ fireEvent.press(screen.getByText('Juana Gomez'));
28
+ expect(screen.getByText('Profile')).toBeTruthy();
29
+ expect(screen.getByText('Log out')).toBeTruthy();
30
+ });
31
+ it('opens from an avatar-only trigger (no name)', () => {
32
+ wrap(/*#__PURE__*/_jsx(UserMenu, {
33
+ initials: "JG",
34
+ options: OPTIONS
35
+ }));
36
+ fireEvent.press(screen.getByText('JG'));
37
+ expect(screen.getByText('Profile')).toBeTruthy();
38
+ });
39
+ it('calls onSelect with the key and closes', () => {
40
+ const onSelect = jest.fn();
41
+ wrap(/*#__PURE__*/_jsx(UserMenu, {
42
+ name: "Juana Gomez",
43
+ options: OPTIONS,
44
+ onSelect: onSelect
45
+ }));
46
+ fireEvent.press(screen.getByText('Juana Gomez'));
47
+ fireEvent.press(screen.getByText('Profile'));
48
+ expect(onSelect).toHaveBeenCalledWith('profile');
49
+ expect(screen.queryByText('Log out')).toBeNull();
50
+ });
51
+ });
52
+ //# sourceMappingURL=UserMenu.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["render","fireEvent","screen","ThemeProvider","UserMenu","jsx","_jsx","wrap","ui","children","OPTIONS","key","label","destructive","describe","it","name","options","expect","queryByText","toBeNull","press","getByText","toBeTruthy","initials","onSelect","jest","fn","toHaveBeenCalledWith"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/UserMenu.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;AAGtC,SAASC,IAAIA,CAACC,EAAsB,EAAE;EACpC,OAAOR,MAAM,cAACM,IAAA,CAACH,aAAa;IAAAM,QAAA,EAAED;EAAE,CAAgB,CAAC,CAAC;AACpD;AAEA,MAAME,OAAwB,GAAG,CAC/B;EAAEC,GAAG,EAAE,SAAS;EAAEC,KAAK,EAAE;AAAU,CAAC,EACpC;EAAED,GAAG,EAAE,QAAQ;EAAEC,KAAK,EAAE,SAAS;EAAEC,WAAW,EAAE;AAAK,CAAC,CACvD;AAEDC,QAAQ,CAAC,UAAU,EAAE,MAAM;EACzBC,EAAE,CAAC,iDAAiD,EAAE,MAAM;IAC1DR,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACY,IAAI,EAAC,aAAa;MAACC,OAAO,EAAEP;IAAQ,CAAE,CAAC,CAAC;IACvDQ,MAAM,CAAChB,MAAM,CAACiB,WAAW,CAAC,SAAS,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;IAChDnB,SAAS,CAACoB,KAAK,CAACnB,MAAM,CAACoB,SAAS,CAAC,aAAa,CAAC,CAAC;IAChDJ,MAAM,CAAChB,MAAM,CAACoB,SAAS,CAAC,SAAS,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;IAChDL,MAAM,CAAChB,MAAM,CAACoB,SAAS,CAAC,SAAS,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAClD,CAAC,CAAC;EAEFR,EAAE,CAAC,6CAA6C,EAAE,MAAM;IACtDR,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACoB,QAAQ,EAAC,IAAI;MAACP,OAAO,EAAEP;IAAQ,CAAE,CAAC,CAAC;IAClDT,SAAS,CAACoB,KAAK,CAACnB,MAAM,CAACoB,SAAS,CAAC,IAAI,CAAC,CAAC;IACvCJ,MAAM,CAAChB,MAAM,CAACoB,SAAS,CAAC,SAAS,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAClD,CAAC,CAAC;EAEFR,EAAE,CAAC,wCAAwC,EAAE,MAAM;IACjD,MAAMU,QAAQ,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;IAC1BpB,IAAI,cAACD,IAAA,CAACF,QAAQ;MAACY,IAAI,EAAC,aAAa;MAACC,OAAO,EAAEP,OAAQ;MAACe,QAAQ,EAAEA;IAAS,CAAE,CAAC,CAAC;IAC3ExB,SAAS,CAACoB,KAAK,CAACnB,MAAM,CAACoB,SAAS,CAAC,aAAa,CAAC,CAAC;IAChDrB,SAAS,CAACoB,KAAK,CAACnB,MAAM,CAACoB,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5CJ,MAAM,CAACO,QAAQ,CAAC,CAACG,oBAAoB,CAAC,SAAS,CAAC;IAChDV,MAAM,CAAChB,MAAM,CAACiB,WAAW,CAAC,SAAS,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EAClD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ export { Menu } from "./Menu.js";
4
+ export { MenuButton } from "./MenuButton.js";
5
+ export { SelectButton } from "./SelectButton.js";
6
+ export { UserMenu } from "./UserMenu.js";
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["Menu","MenuButton","SelectButton","UserMenu"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,WAAQ;AAQ7B,SAASC,UAAU,QAAQ,iBAAc;AAEzC,SAASC,YAAY,QAAQ,mBAAgB;AAE7C,SAASC,QAAQ,QAAQ,eAAY","ignoreList":[]}