@tastic/hud 0.5.0 → 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.
- package/dist/index.d.mts +122 -67
- package/dist/index.d.ts +122 -67
- package/dist/index.js +483 -337
- package/dist/index.mjs +455 -313
- package/package.json +4 -4
- package/src/BaseSettingsDialog.tsx +12 -12
- package/src/ConfirmDialog.tsx +104 -0
- package/src/ContentGutter.tsx +55 -0
- package/src/ControlSchemePicker.tsx +53 -0
- package/src/CornerActionButtons.tsx +10 -2
- package/src/CornerStatusBadges.tsx +87 -0
- package/src/InlineColorPicker.tsx +21 -11
- package/src/SectionedDropdown.tsx +14 -2
- package/src/index.ts +4 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, RefObject } from 'react';
|
|
3
|
+
import { StyleProp, ViewStyle, View } from 'react-native';
|
|
3
4
|
import { SeedColor } from '@rific/auto-paper';
|
|
4
|
-
import { View, StyleProp, ViewStyle } from 'react-native';
|
|
5
5
|
|
|
6
6
|
declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
|
|
7
|
-
interface Props$
|
|
7
|
+
interface Props$c {
|
|
8
8
|
icon: string;
|
|
9
9
|
title: string;
|
|
10
10
|
description: string;
|
|
@@ -17,7 +17,7 @@ interface Props$b {
|
|
|
17
17
|
fgMuted?: string;
|
|
18
18
|
sectionBg?: string;
|
|
19
19
|
}
|
|
20
|
-
declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$
|
|
20
|
+
declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$c): react.JSX.Element;
|
|
21
21
|
|
|
22
22
|
interface BaseSettingsDialogProps {
|
|
23
23
|
visible: boolean;
|
|
@@ -38,7 +38,7 @@ interface BaseSettingsDialogProps {
|
|
|
38
38
|
declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
|
|
39
39
|
|
|
40
40
|
type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
|
|
41
|
-
interface Props$
|
|
41
|
+
interface Props$b {
|
|
42
42
|
rotation?: number;
|
|
43
43
|
title?: string;
|
|
44
44
|
titleVariant?: MD3TextVariant;
|
|
@@ -59,9 +59,99 @@ interface Props$a {
|
|
|
59
59
|
accentColor?: string;
|
|
60
60
|
children: ReactNode;
|
|
61
61
|
}
|
|
62
|
-
declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$
|
|
62
|
+
declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$b): react.JSX.Element;
|
|
63
|
+
|
|
64
|
+
interface ConfirmDialogProps {
|
|
65
|
+
visible: boolean;
|
|
66
|
+
title: string;
|
|
67
|
+
message: string;
|
|
68
|
+
confirmLabel: string;
|
|
69
|
+
cancelLabel: string;
|
|
70
|
+
onConfirm: () => void;
|
|
71
|
+
onCancel: () => void;
|
|
72
|
+
rotation?: number;
|
|
73
|
+
icon?: string;
|
|
74
|
+
destructive?: boolean;
|
|
75
|
+
}
|
|
76
|
+
declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
|
|
77
|
+
|
|
78
|
+
interface Props$a {
|
|
79
|
+
maxContentWidth?: number;
|
|
80
|
+
leftGutter?: ReactNode;
|
|
81
|
+
rightGutter?: ReactNode;
|
|
82
|
+
style?: StyleProp<ViewStyle>;
|
|
83
|
+
children: ReactNode;
|
|
84
|
+
}
|
|
85
|
+
declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$a): react.JSX.Element;
|
|
86
|
+
|
|
87
|
+
interface PopoverHost {
|
|
88
|
+
openId: string | null;
|
|
89
|
+
toggle: (id: string) => void;
|
|
90
|
+
close: () => void;
|
|
91
|
+
}
|
|
92
|
+
declare function usePopoverHost(): PopoverHost;
|
|
63
93
|
|
|
94
|
+
interface MenuOption<T extends string | number> {
|
|
95
|
+
value: T;
|
|
96
|
+
label: string;
|
|
97
|
+
description?: string;
|
|
98
|
+
icon?: string;
|
|
99
|
+
iconSize?: number;
|
|
100
|
+
}
|
|
101
|
+
interface SingleSelectSection<T extends string | number> {
|
|
102
|
+
kind: 'single';
|
|
103
|
+
id: string;
|
|
104
|
+
options: MenuOption<T>[];
|
|
105
|
+
value: T;
|
|
106
|
+
onChange: (value: T) => void;
|
|
107
|
+
takenValue?: T;
|
|
108
|
+
}
|
|
109
|
+
interface MultiSelectSection<T extends string | number> {
|
|
110
|
+
kind: 'multi';
|
|
111
|
+
id: string;
|
|
112
|
+
options: MenuOption<T>[];
|
|
113
|
+
value: T[];
|
|
114
|
+
onChange: (value: T[]) => void;
|
|
115
|
+
allClear?: boolean;
|
|
116
|
+
}
|
|
117
|
+
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
64
118
|
interface Props$9 {
|
|
119
|
+
id: string;
|
|
120
|
+
host: PopoverHost;
|
|
121
|
+
icon: string;
|
|
122
|
+
accessibilityLabel: string;
|
|
123
|
+
sections: MenuSection[];
|
|
124
|
+
accentColor: string;
|
|
125
|
+
mutedColor: string;
|
|
126
|
+
onAccentColor?: string;
|
|
127
|
+
dark: boolean;
|
|
128
|
+
align?: 'left' | 'right' | 'center';
|
|
129
|
+
autoDismiss?: boolean;
|
|
130
|
+
labelFontFamily?: string;
|
|
131
|
+
allClearLabels?: {
|
|
132
|
+
all: string;
|
|
133
|
+
clear: string;
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
|
|
137
|
+
|
|
138
|
+
interface ControlSchemePickerProps<T extends string | number> {
|
|
139
|
+
id: string;
|
|
140
|
+
host: PopoverHost;
|
|
141
|
+
value: T;
|
|
142
|
+
onChange: (value: T) => void;
|
|
143
|
+
options: MenuOption<T>[];
|
|
144
|
+
takenValue?: T;
|
|
145
|
+
accentColor: string;
|
|
146
|
+
mutedColor: string;
|
|
147
|
+
onAccentColor?: string;
|
|
148
|
+
dark: boolean;
|
|
149
|
+
align?: 'left' | 'right' | 'center';
|
|
150
|
+
labelFontFamily?: string;
|
|
151
|
+
}
|
|
152
|
+
declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
|
|
153
|
+
|
|
154
|
+
interface Props$8 {
|
|
65
155
|
onBack: () => void;
|
|
66
156
|
onSettings: () => void;
|
|
67
157
|
fg: string;
|
|
@@ -70,23 +160,31 @@ interface Props$9 {
|
|
|
70
160
|
left: number;
|
|
71
161
|
right: number;
|
|
72
162
|
};
|
|
163
|
+
backIcon?: string;
|
|
164
|
+
backLabel?: string;
|
|
73
165
|
}
|
|
74
|
-
declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$
|
|
166
|
+
declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel }: Props$8): react.JSX.Element;
|
|
75
167
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
openId: string | null;
|
|
80
|
-
toggle: (id: string) => void;
|
|
81
|
-
close: () => void;
|
|
168
|
+
type OrientationMode = 'faceToFace' | 'sideBySide';
|
|
169
|
+
interface CornerStatusBadgeSeat {
|
|
170
|
+
icon?: string;
|
|
82
171
|
}
|
|
83
|
-
|
|
172
|
+
interface CornerStatusBadgesProps {
|
|
173
|
+
orientationMode: OrientationMode;
|
|
174
|
+
p1OnRight: boolean;
|
|
175
|
+
p1?: CornerStatusBadgeSeat;
|
|
176
|
+
p2?: CornerStatusBadgeSeat;
|
|
177
|
+
}
|
|
178
|
+
declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps): react.JSX.Element;
|
|
84
179
|
|
|
85
|
-
|
|
180
|
+
declare const MONO_FONT: string;
|
|
181
|
+
|
|
182
|
+
interface Props$7 {
|
|
86
183
|
id: string;
|
|
87
184
|
host: PopoverHost;
|
|
88
185
|
value: string;
|
|
89
186
|
onChange: (hex: string) => void;
|
|
187
|
+
previewValue?: (hex: string) => string;
|
|
90
188
|
swatches?: SeedColor[];
|
|
91
189
|
takenValue?: string;
|
|
92
190
|
allowSwapTaken?: boolean;
|
|
@@ -99,7 +197,7 @@ interface Props$8 {
|
|
|
99
197
|
columns?: number;
|
|
100
198
|
size?: number;
|
|
101
199
|
}
|
|
102
|
-
declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$
|
|
200
|
+
declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
|
|
103
201
|
|
|
104
202
|
type PopoverAlign = 'left' | 'right' | 'center';
|
|
105
203
|
type PopoverVerticalAlign = 'below' | 'above';
|
|
@@ -125,7 +223,7 @@ interface AlignResult {
|
|
|
125
223
|
measured: boolean;
|
|
126
224
|
triggerRef: RefObject<View | null>;
|
|
127
225
|
}
|
|
128
|
-
interface Props$
|
|
226
|
+
interface Props$6<T extends string> {
|
|
129
227
|
id: string;
|
|
130
228
|
host: PopoverHost;
|
|
131
229
|
options: LabeledDropdownOption<T>[];
|
|
@@ -136,11 +234,11 @@ interface Props$7<T extends string> {
|
|
|
136
234
|
align?: 'left' | 'right' | 'center';
|
|
137
235
|
alignOverride?: AlignResult;
|
|
138
236
|
}
|
|
139
|
-
declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$
|
|
237
|
+
declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$6<T>): react.JSX.Element;
|
|
140
238
|
|
|
141
239
|
declare function loadSkiaWeb(): Promise<void>;
|
|
142
240
|
|
|
143
|
-
interface Props$
|
|
241
|
+
interface Props$5 {
|
|
144
242
|
visible: boolean;
|
|
145
243
|
children: ReactNode;
|
|
146
244
|
align?: 'left' | 'right' | 'center';
|
|
@@ -150,66 +248,23 @@ interface Props$6 {
|
|
|
150
248
|
caretBorderWidth?: number;
|
|
151
249
|
triggerSize?: number;
|
|
152
250
|
}
|
|
153
|
-
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$
|
|
251
|
+
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$5): react.JSX.Element | null;
|
|
154
252
|
|
|
155
|
-
interface Props$
|
|
253
|
+
interface Props$4 {
|
|
156
254
|
active: boolean;
|
|
157
255
|
onPress: () => void;
|
|
158
256
|
style?: StyleProp<ViewStyle>;
|
|
159
257
|
}
|
|
160
|
-
declare function PressAwayOverlay({ active, onPress, style }: Props$
|
|
258
|
+
declare function PressAwayOverlay({ active, onPress, style }: Props$4): react.JSX.Element | null;
|
|
161
259
|
|
|
162
|
-
interface Props$
|
|
260
|
+
interface Props$3 {
|
|
163
261
|
color: string;
|
|
164
262
|
ready: boolean;
|
|
165
263
|
onToggleReady: () => void;
|
|
166
264
|
style?: StyleProp<ViewStyle>;
|
|
167
265
|
labelFontFamily?: string;
|
|
168
266
|
}
|
|
169
|
-
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$
|
|
170
|
-
|
|
171
|
-
interface MenuOption<T extends string | number> {
|
|
172
|
-
value: T;
|
|
173
|
-
label: string;
|
|
174
|
-
description?: string;
|
|
175
|
-
icon?: string;
|
|
176
|
-
iconSize?: number;
|
|
177
|
-
}
|
|
178
|
-
interface SingleSelectSection<T extends string | number> {
|
|
179
|
-
kind: 'single';
|
|
180
|
-
id: string;
|
|
181
|
-
options: MenuOption<T>[];
|
|
182
|
-
value: T;
|
|
183
|
-
onChange: (value: T) => void;
|
|
184
|
-
}
|
|
185
|
-
interface MultiSelectSection<T extends string | number> {
|
|
186
|
-
kind: 'multi';
|
|
187
|
-
id: string;
|
|
188
|
-
options: MenuOption<T>[];
|
|
189
|
-
value: T[];
|
|
190
|
-
onChange: (value: T[]) => void;
|
|
191
|
-
allClear?: boolean;
|
|
192
|
-
}
|
|
193
|
-
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
194
|
-
interface Props$3 {
|
|
195
|
-
id: string;
|
|
196
|
-
host: PopoverHost;
|
|
197
|
-
icon: string;
|
|
198
|
-
accessibilityLabel: string;
|
|
199
|
-
sections: MenuSection[];
|
|
200
|
-
accentColor: string;
|
|
201
|
-
mutedColor: string;
|
|
202
|
-
onAccentColor?: string;
|
|
203
|
-
dark: boolean;
|
|
204
|
-
align?: 'left' | 'right' | 'center';
|
|
205
|
-
autoDismiss?: boolean;
|
|
206
|
-
labelFontFamily?: string;
|
|
207
|
-
allClearLabels?: {
|
|
208
|
-
all: string;
|
|
209
|
-
clear: string;
|
|
210
|
-
};
|
|
211
|
-
}
|
|
212
|
-
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
|
|
267
|
+
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$3): react.JSX.Element;
|
|
213
268
|
|
|
214
269
|
interface Props$2 {
|
|
215
270
|
onBack: () => void;
|
|
@@ -251,4 +306,4 @@ interface TriggerGaugeProps {
|
|
|
251
306
|
|
|
252
307
|
declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
|
|
253
308
|
|
|
254
|
-
export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, CornerActionButtons, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
|
|
309
|
+
export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, RefObject } from 'react';
|
|
3
|
+
import { StyleProp, ViewStyle, View } from 'react-native';
|
|
3
4
|
import { SeedColor } from '@rific/auto-paper';
|
|
4
|
-
import { View, StyleProp, ViewStyle } from 'react-native';
|
|
5
5
|
|
|
6
6
|
declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
|
|
7
|
-
interface Props$
|
|
7
|
+
interface Props$c {
|
|
8
8
|
icon: string;
|
|
9
9
|
title: string;
|
|
10
10
|
description: string;
|
|
@@ -17,7 +17,7 @@ interface Props$b {
|
|
|
17
17
|
fgMuted?: string;
|
|
18
18
|
sectionBg?: string;
|
|
19
19
|
}
|
|
20
|
-
declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$
|
|
20
|
+
declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$c): react.JSX.Element;
|
|
21
21
|
|
|
22
22
|
interface BaseSettingsDialogProps {
|
|
23
23
|
visible: boolean;
|
|
@@ -38,7 +38,7 @@ interface BaseSettingsDialogProps {
|
|
|
38
38
|
declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
|
|
39
39
|
|
|
40
40
|
type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
|
|
41
|
-
interface Props$
|
|
41
|
+
interface Props$b {
|
|
42
42
|
rotation?: number;
|
|
43
43
|
title?: string;
|
|
44
44
|
titleVariant?: MD3TextVariant;
|
|
@@ -59,9 +59,99 @@ interface Props$a {
|
|
|
59
59
|
accentColor?: string;
|
|
60
60
|
children: ReactNode;
|
|
61
61
|
}
|
|
62
|
-
declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$
|
|
62
|
+
declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$b): react.JSX.Element;
|
|
63
|
+
|
|
64
|
+
interface ConfirmDialogProps {
|
|
65
|
+
visible: boolean;
|
|
66
|
+
title: string;
|
|
67
|
+
message: string;
|
|
68
|
+
confirmLabel: string;
|
|
69
|
+
cancelLabel: string;
|
|
70
|
+
onConfirm: () => void;
|
|
71
|
+
onCancel: () => void;
|
|
72
|
+
rotation?: number;
|
|
73
|
+
icon?: string;
|
|
74
|
+
destructive?: boolean;
|
|
75
|
+
}
|
|
76
|
+
declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
|
|
77
|
+
|
|
78
|
+
interface Props$a {
|
|
79
|
+
maxContentWidth?: number;
|
|
80
|
+
leftGutter?: ReactNode;
|
|
81
|
+
rightGutter?: ReactNode;
|
|
82
|
+
style?: StyleProp<ViewStyle>;
|
|
83
|
+
children: ReactNode;
|
|
84
|
+
}
|
|
85
|
+
declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$a): react.JSX.Element;
|
|
86
|
+
|
|
87
|
+
interface PopoverHost {
|
|
88
|
+
openId: string | null;
|
|
89
|
+
toggle: (id: string) => void;
|
|
90
|
+
close: () => void;
|
|
91
|
+
}
|
|
92
|
+
declare function usePopoverHost(): PopoverHost;
|
|
63
93
|
|
|
94
|
+
interface MenuOption<T extends string | number> {
|
|
95
|
+
value: T;
|
|
96
|
+
label: string;
|
|
97
|
+
description?: string;
|
|
98
|
+
icon?: string;
|
|
99
|
+
iconSize?: number;
|
|
100
|
+
}
|
|
101
|
+
interface SingleSelectSection<T extends string | number> {
|
|
102
|
+
kind: 'single';
|
|
103
|
+
id: string;
|
|
104
|
+
options: MenuOption<T>[];
|
|
105
|
+
value: T;
|
|
106
|
+
onChange: (value: T) => void;
|
|
107
|
+
takenValue?: T;
|
|
108
|
+
}
|
|
109
|
+
interface MultiSelectSection<T extends string | number> {
|
|
110
|
+
kind: 'multi';
|
|
111
|
+
id: string;
|
|
112
|
+
options: MenuOption<T>[];
|
|
113
|
+
value: T[];
|
|
114
|
+
onChange: (value: T[]) => void;
|
|
115
|
+
allClear?: boolean;
|
|
116
|
+
}
|
|
117
|
+
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
64
118
|
interface Props$9 {
|
|
119
|
+
id: string;
|
|
120
|
+
host: PopoverHost;
|
|
121
|
+
icon: string;
|
|
122
|
+
accessibilityLabel: string;
|
|
123
|
+
sections: MenuSection[];
|
|
124
|
+
accentColor: string;
|
|
125
|
+
mutedColor: string;
|
|
126
|
+
onAccentColor?: string;
|
|
127
|
+
dark: boolean;
|
|
128
|
+
align?: 'left' | 'right' | 'center';
|
|
129
|
+
autoDismiss?: boolean;
|
|
130
|
+
labelFontFamily?: string;
|
|
131
|
+
allClearLabels?: {
|
|
132
|
+
all: string;
|
|
133
|
+
clear: string;
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
|
|
137
|
+
|
|
138
|
+
interface ControlSchemePickerProps<T extends string | number> {
|
|
139
|
+
id: string;
|
|
140
|
+
host: PopoverHost;
|
|
141
|
+
value: T;
|
|
142
|
+
onChange: (value: T) => void;
|
|
143
|
+
options: MenuOption<T>[];
|
|
144
|
+
takenValue?: T;
|
|
145
|
+
accentColor: string;
|
|
146
|
+
mutedColor: string;
|
|
147
|
+
onAccentColor?: string;
|
|
148
|
+
dark: boolean;
|
|
149
|
+
align?: 'left' | 'right' | 'center';
|
|
150
|
+
labelFontFamily?: string;
|
|
151
|
+
}
|
|
152
|
+
declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
|
|
153
|
+
|
|
154
|
+
interface Props$8 {
|
|
65
155
|
onBack: () => void;
|
|
66
156
|
onSettings: () => void;
|
|
67
157
|
fg: string;
|
|
@@ -70,23 +160,31 @@ interface Props$9 {
|
|
|
70
160
|
left: number;
|
|
71
161
|
right: number;
|
|
72
162
|
};
|
|
163
|
+
backIcon?: string;
|
|
164
|
+
backLabel?: string;
|
|
73
165
|
}
|
|
74
|
-
declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$
|
|
166
|
+
declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel }: Props$8): react.JSX.Element;
|
|
75
167
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
openId: string | null;
|
|
80
|
-
toggle: (id: string) => void;
|
|
81
|
-
close: () => void;
|
|
168
|
+
type OrientationMode = 'faceToFace' | 'sideBySide';
|
|
169
|
+
interface CornerStatusBadgeSeat {
|
|
170
|
+
icon?: string;
|
|
82
171
|
}
|
|
83
|
-
|
|
172
|
+
interface CornerStatusBadgesProps {
|
|
173
|
+
orientationMode: OrientationMode;
|
|
174
|
+
p1OnRight: boolean;
|
|
175
|
+
p1?: CornerStatusBadgeSeat;
|
|
176
|
+
p2?: CornerStatusBadgeSeat;
|
|
177
|
+
}
|
|
178
|
+
declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps): react.JSX.Element;
|
|
84
179
|
|
|
85
|
-
|
|
180
|
+
declare const MONO_FONT: string;
|
|
181
|
+
|
|
182
|
+
interface Props$7 {
|
|
86
183
|
id: string;
|
|
87
184
|
host: PopoverHost;
|
|
88
185
|
value: string;
|
|
89
186
|
onChange: (hex: string) => void;
|
|
187
|
+
previewValue?: (hex: string) => string;
|
|
90
188
|
swatches?: SeedColor[];
|
|
91
189
|
takenValue?: string;
|
|
92
190
|
allowSwapTaken?: boolean;
|
|
@@ -99,7 +197,7 @@ interface Props$8 {
|
|
|
99
197
|
columns?: number;
|
|
100
198
|
size?: number;
|
|
101
199
|
}
|
|
102
|
-
declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$
|
|
200
|
+
declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
|
|
103
201
|
|
|
104
202
|
type PopoverAlign = 'left' | 'right' | 'center';
|
|
105
203
|
type PopoverVerticalAlign = 'below' | 'above';
|
|
@@ -125,7 +223,7 @@ interface AlignResult {
|
|
|
125
223
|
measured: boolean;
|
|
126
224
|
triggerRef: RefObject<View | null>;
|
|
127
225
|
}
|
|
128
|
-
interface Props$
|
|
226
|
+
interface Props$6<T extends string> {
|
|
129
227
|
id: string;
|
|
130
228
|
host: PopoverHost;
|
|
131
229
|
options: LabeledDropdownOption<T>[];
|
|
@@ -136,11 +234,11 @@ interface Props$7<T extends string> {
|
|
|
136
234
|
align?: 'left' | 'right' | 'center';
|
|
137
235
|
alignOverride?: AlignResult;
|
|
138
236
|
}
|
|
139
|
-
declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$
|
|
237
|
+
declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$6<T>): react.JSX.Element;
|
|
140
238
|
|
|
141
239
|
declare function loadSkiaWeb(): Promise<void>;
|
|
142
240
|
|
|
143
|
-
interface Props$
|
|
241
|
+
interface Props$5 {
|
|
144
242
|
visible: boolean;
|
|
145
243
|
children: ReactNode;
|
|
146
244
|
align?: 'left' | 'right' | 'center';
|
|
@@ -150,66 +248,23 @@ interface Props$6 {
|
|
|
150
248
|
caretBorderWidth?: number;
|
|
151
249
|
triggerSize?: number;
|
|
152
250
|
}
|
|
153
|
-
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$
|
|
251
|
+
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$5): react.JSX.Element | null;
|
|
154
252
|
|
|
155
|
-
interface Props$
|
|
253
|
+
interface Props$4 {
|
|
156
254
|
active: boolean;
|
|
157
255
|
onPress: () => void;
|
|
158
256
|
style?: StyleProp<ViewStyle>;
|
|
159
257
|
}
|
|
160
|
-
declare function PressAwayOverlay({ active, onPress, style }: Props$
|
|
258
|
+
declare function PressAwayOverlay({ active, onPress, style }: Props$4): react.JSX.Element | null;
|
|
161
259
|
|
|
162
|
-
interface Props$
|
|
260
|
+
interface Props$3 {
|
|
163
261
|
color: string;
|
|
164
262
|
ready: boolean;
|
|
165
263
|
onToggleReady: () => void;
|
|
166
264
|
style?: StyleProp<ViewStyle>;
|
|
167
265
|
labelFontFamily?: string;
|
|
168
266
|
}
|
|
169
|
-
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$
|
|
170
|
-
|
|
171
|
-
interface MenuOption<T extends string | number> {
|
|
172
|
-
value: T;
|
|
173
|
-
label: string;
|
|
174
|
-
description?: string;
|
|
175
|
-
icon?: string;
|
|
176
|
-
iconSize?: number;
|
|
177
|
-
}
|
|
178
|
-
interface SingleSelectSection<T extends string | number> {
|
|
179
|
-
kind: 'single';
|
|
180
|
-
id: string;
|
|
181
|
-
options: MenuOption<T>[];
|
|
182
|
-
value: T;
|
|
183
|
-
onChange: (value: T) => void;
|
|
184
|
-
}
|
|
185
|
-
interface MultiSelectSection<T extends string | number> {
|
|
186
|
-
kind: 'multi';
|
|
187
|
-
id: string;
|
|
188
|
-
options: MenuOption<T>[];
|
|
189
|
-
value: T[];
|
|
190
|
-
onChange: (value: T[]) => void;
|
|
191
|
-
allClear?: boolean;
|
|
192
|
-
}
|
|
193
|
-
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
194
|
-
interface Props$3 {
|
|
195
|
-
id: string;
|
|
196
|
-
host: PopoverHost;
|
|
197
|
-
icon: string;
|
|
198
|
-
accessibilityLabel: string;
|
|
199
|
-
sections: MenuSection[];
|
|
200
|
-
accentColor: string;
|
|
201
|
-
mutedColor: string;
|
|
202
|
-
onAccentColor?: string;
|
|
203
|
-
dark: boolean;
|
|
204
|
-
align?: 'left' | 'right' | 'center';
|
|
205
|
-
autoDismiss?: boolean;
|
|
206
|
-
labelFontFamily?: string;
|
|
207
|
-
allClearLabels?: {
|
|
208
|
-
all: string;
|
|
209
|
-
clear: string;
|
|
210
|
-
};
|
|
211
|
-
}
|
|
212
|
-
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
|
|
267
|
+
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$3): react.JSX.Element;
|
|
213
268
|
|
|
214
269
|
interface Props$2 {
|
|
215
270
|
onBack: () => void;
|
|
@@ -251,4 +306,4 @@ interface TriggerGaugeProps {
|
|
|
251
306
|
|
|
252
307
|
declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
|
|
253
308
|
|
|
254
|
-
export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, CornerActionButtons, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
|
|
309
|
+
export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
|