@tastic/hud 0.1.6 → 0.3.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 +91 -23
- package/dist/index.d.ts +91 -23
- package/dist/index.js +463 -105
- package/dist/index.mjs +423 -71
- package/package.json +3 -1
- package/src/BaseSettingsDialog.tsx +371 -0
- package/src/CornerActionButtons.tsx +39 -0
- package/src/LabeledDropdown.tsx +175 -0
- package/src/SharedActionBand.tsx +61 -0
- package/src/index.ts +4 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,37 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, RefObject } from 'react';
|
|
3
3
|
import { SeedColor } from '@rific/auto-paper';
|
|
4
|
-
import { StyleProp, ViewStyle
|
|
4
|
+
import { View, StyleProp, ViewStyle } from 'react-native';
|
|
5
|
+
|
|
6
|
+
interface BaseSettingsDialogProps {
|
|
7
|
+
visible: boolean;
|
|
8
|
+
onDismiss: () => void;
|
|
9
|
+
rotation?: number;
|
|
10
|
+
version: string | number;
|
|
11
|
+
lockOrientation?: boolean;
|
|
12
|
+
onLockOrientationChange?: (value: boolean) => void;
|
|
13
|
+
deferBottomEdgeGestures?: boolean;
|
|
14
|
+
onDeferBottomEdgeGestures?: (value: boolean) => void;
|
|
15
|
+
hideSound?: boolean;
|
|
16
|
+
hideHaptics?: boolean;
|
|
17
|
+
hideAppearance?: boolean;
|
|
18
|
+
hideUpdateCheck?: boolean;
|
|
19
|
+
onUpdateError?: (message: string) => void;
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
|
|
23
|
+
|
|
24
|
+
interface Props$7 {
|
|
25
|
+
onBack: () => void;
|
|
26
|
+
onSettings: () => void;
|
|
27
|
+
fg: string;
|
|
28
|
+
insets: {
|
|
29
|
+
top: number;
|
|
30
|
+
left: number;
|
|
31
|
+
right: number;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$7): react.JSX.Element;
|
|
5
35
|
|
|
6
36
|
declare const MONO_FONT: string;
|
|
7
37
|
|
|
@@ -12,7 +42,7 @@ interface PopoverHost {
|
|
|
12
42
|
}
|
|
13
43
|
declare function usePopoverHost(): PopoverHost;
|
|
14
44
|
|
|
15
|
-
interface Props$
|
|
45
|
+
interface Props$6 {
|
|
16
46
|
id: string;
|
|
17
47
|
host: PopoverHost;
|
|
18
48
|
value: string;
|
|
@@ -29,11 +59,48 @@ interface Props$4 {
|
|
|
29
59
|
columns?: number;
|
|
30
60
|
size?: number;
|
|
31
61
|
}
|
|
32
|
-
declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$
|
|
62
|
+
declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$6): react.JSX.Element;
|
|
63
|
+
|
|
64
|
+
type PopoverAlign = 'left' | 'right' | 'center';
|
|
65
|
+
type PopoverVerticalAlign = 'below' | 'above';
|
|
66
|
+
declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
|
|
67
|
+
align: PopoverAlign;
|
|
68
|
+
maxHeight: number;
|
|
69
|
+
measured: boolean;
|
|
70
|
+
triggerRef: react.RefObject<View | null>;
|
|
71
|
+
verticalAlign: PopoverVerticalAlign;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
|
|
75
|
+
declare function getLabeledDropdownContentHeight(optionCount: number): number;
|
|
76
|
+
interface LabeledDropdownOption<T extends string> {
|
|
77
|
+
value: T;
|
|
78
|
+
label: string;
|
|
79
|
+
icon?: string;
|
|
80
|
+
}
|
|
81
|
+
interface AlignResult {
|
|
82
|
+
align: PopoverAlign;
|
|
83
|
+
verticalAlign: PopoverVerticalAlign;
|
|
84
|
+
maxHeight: number;
|
|
85
|
+
measured: boolean;
|
|
86
|
+
triggerRef: RefObject<View | null>;
|
|
87
|
+
}
|
|
88
|
+
interface Props$5<T extends string> {
|
|
89
|
+
id: string;
|
|
90
|
+
host: PopoverHost;
|
|
91
|
+
options: LabeledDropdownOption<T>[];
|
|
92
|
+
value: T;
|
|
93
|
+
onChange: (value: T) => void;
|
|
94
|
+
color: string;
|
|
95
|
+
dark: boolean;
|
|
96
|
+
align?: 'left' | 'right' | 'center';
|
|
97
|
+
alignOverride?: AlignResult;
|
|
98
|
+
}
|
|
99
|
+
declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$5<T>): react.JSX.Element;
|
|
33
100
|
|
|
34
101
|
declare function loadSkiaWeb(): Promise<void>;
|
|
35
102
|
|
|
36
|
-
interface Props$
|
|
103
|
+
interface Props$4 {
|
|
37
104
|
visible: boolean;
|
|
38
105
|
children: ReactNode;
|
|
39
106
|
align?: 'left' | 'right' | 'center';
|
|
@@ -43,23 +110,23 @@ interface Props$3 {
|
|
|
43
110
|
caretBorderWidth?: number;
|
|
44
111
|
triggerSize?: number;
|
|
45
112
|
}
|
|
46
|
-
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$
|
|
113
|
+
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$4): react.JSX.Element | null;
|
|
47
114
|
|
|
48
|
-
interface Props$
|
|
115
|
+
interface Props$3 {
|
|
49
116
|
active: boolean;
|
|
50
117
|
onPress: () => void;
|
|
51
118
|
style?: StyleProp<ViewStyle>;
|
|
52
119
|
}
|
|
53
|
-
declare function PressAwayOverlay({ active, onPress, style }: Props$
|
|
120
|
+
declare function PressAwayOverlay({ active, onPress, style }: Props$3): react.JSX.Element | null;
|
|
54
121
|
|
|
55
|
-
interface Props$
|
|
122
|
+
interface Props$2 {
|
|
56
123
|
color: string;
|
|
57
124
|
ready: boolean;
|
|
58
125
|
onToggleReady: () => void;
|
|
59
126
|
style?: StyleProp<ViewStyle>;
|
|
60
127
|
labelFontFamily?: string;
|
|
61
128
|
}
|
|
62
|
-
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$
|
|
129
|
+
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$2): react.JSX.Element;
|
|
63
130
|
|
|
64
131
|
interface MenuOption<T extends string | number> {
|
|
65
132
|
value: T;
|
|
@@ -84,7 +151,7 @@ interface MultiSelectSection<T extends string | number> {
|
|
|
84
151
|
allClear?: boolean;
|
|
85
152
|
}
|
|
86
153
|
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
87
|
-
interface Props {
|
|
154
|
+
interface Props$1 {
|
|
88
155
|
id: string;
|
|
89
156
|
host: PopoverHost;
|
|
90
157
|
icon: string;
|
|
@@ -102,7 +169,18 @@ interface Props {
|
|
|
102
169
|
clear: string;
|
|
103
170
|
};
|
|
104
171
|
}
|
|
105
|
-
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props): react.JSX.Element;
|
|
172
|
+
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$1): react.JSX.Element;
|
|
173
|
+
|
|
174
|
+
interface Props {
|
|
175
|
+
onBack: () => void;
|
|
176
|
+
onSettings: () => void;
|
|
177
|
+
onRandomize?: () => void;
|
|
178
|
+
onReset?: () => void;
|
|
179
|
+
fg: string;
|
|
180
|
+
popoverOpen: boolean;
|
|
181
|
+
children: ReactNode;
|
|
182
|
+
}
|
|
183
|
+
declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props): react.JSX.Element;
|
|
106
184
|
|
|
107
185
|
interface TriggerGaugeProps {
|
|
108
186
|
segments: number;
|
|
@@ -117,14 +195,4 @@ interface TriggerGaugeProps {
|
|
|
117
195
|
|
|
118
196
|
declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
|
|
119
197
|
|
|
120
|
-
type PopoverAlign
|
|
121
|
-
type PopoverVerticalAlign = 'below' | 'above';
|
|
122
|
-
declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
|
|
123
|
-
align: PopoverAlign;
|
|
124
|
-
maxHeight: number;
|
|
125
|
-
measured: boolean;
|
|
126
|
-
triggerRef: react.RefObject<View | null>;
|
|
127
|
-
verticalAlign: PopoverVerticalAlign;
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
export { InlineColorPicker, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, loadSkiaWeb, useAutoAlign, usePopoverHost };
|
|
198
|
+
export { BaseSettingsDialog, type BaseSettingsDialogProps, CornerActionButtons, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,37 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, RefObject } from 'react';
|
|
3
3
|
import { SeedColor } from '@rific/auto-paper';
|
|
4
|
-
import { StyleProp, ViewStyle
|
|
4
|
+
import { View, StyleProp, ViewStyle } from 'react-native';
|
|
5
|
+
|
|
6
|
+
interface BaseSettingsDialogProps {
|
|
7
|
+
visible: boolean;
|
|
8
|
+
onDismiss: () => void;
|
|
9
|
+
rotation?: number;
|
|
10
|
+
version: string | number;
|
|
11
|
+
lockOrientation?: boolean;
|
|
12
|
+
onLockOrientationChange?: (value: boolean) => void;
|
|
13
|
+
deferBottomEdgeGestures?: boolean;
|
|
14
|
+
onDeferBottomEdgeGestures?: (value: boolean) => void;
|
|
15
|
+
hideSound?: boolean;
|
|
16
|
+
hideHaptics?: boolean;
|
|
17
|
+
hideAppearance?: boolean;
|
|
18
|
+
hideUpdateCheck?: boolean;
|
|
19
|
+
onUpdateError?: (message: string) => void;
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
|
|
23
|
+
|
|
24
|
+
interface Props$7 {
|
|
25
|
+
onBack: () => void;
|
|
26
|
+
onSettings: () => void;
|
|
27
|
+
fg: string;
|
|
28
|
+
insets: {
|
|
29
|
+
top: number;
|
|
30
|
+
left: number;
|
|
31
|
+
right: number;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$7): react.JSX.Element;
|
|
5
35
|
|
|
6
36
|
declare const MONO_FONT: string;
|
|
7
37
|
|
|
@@ -12,7 +42,7 @@ interface PopoverHost {
|
|
|
12
42
|
}
|
|
13
43
|
declare function usePopoverHost(): PopoverHost;
|
|
14
44
|
|
|
15
|
-
interface Props$
|
|
45
|
+
interface Props$6 {
|
|
16
46
|
id: string;
|
|
17
47
|
host: PopoverHost;
|
|
18
48
|
value: string;
|
|
@@ -29,11 +59,48 @@ interface Props$4 {
|
|
|
29
59
|
columns?: number;
|
|
30
60
|
size?: number;
|
|
31
61
|
}
|
|
32
|
-
declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$
|
|
62
|
+
declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$6): react.JSX.Element;
|
|
63
|
+
|
|
64
|
+
type PopoverAlign = 'left' | 'right' | 'center';
|
|
65
|
+
type PopoverVerticalAlign = 'below' | 'above';
|
|
66
|
+
declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
|
|
67
|
+
align: PopoverAlign;
|
|
68
|
+
maxHeight: number;
|
|
69
|
+
measured: boolean;
|
|
70
|
+
triggerRef: react.RefObject<View | null>;
|
|
71
|
+
verticalAlign: PopoverVerticalAlign;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
|
|
75
|
+
declare function getLabeledDropdownContentHeight(optionCount: number): number;
|
|
76
|
+
interface LabeledDropdownOption<T extends string> {
|
|
77
|
+
value: T;
|
|
78
|
+
label: string;
|
|
79
|
+
icon?: string;
|
|
80
|
+
}
|
|
81
|
+
interface AlignResult {
|
|
82
|
+
align: PopoverAlign;
|
|
83
|
+
verticalAlign: PopoverVerticalAlign;
|
|
84
|
+
maxHeight: number;
|
|
85
|
+
measured: boolean;
|
|
86
|
+
triggerRef: RefObject<View | null>;
|
|
87
|
+
}
|
|
88
|
+
interface Props$5<T extends string> {
|
|
89
|
+
id: string;
|
|
90
|
+
host: PopoverHost;
|
|
91
|
+
options: LabeledDropdownOption<T>[];
|
|
92
|
+
value: T;
|
|
93
|
+
onChange: (value: T) => void;
|
|
94
|
+
color: string;
|
|
95
|
+
dark: boolean;
|
|
96
|
+
align?: 'left' | 'right' | 'center';
|
|
97
|
+
alignOverride?: AlignResult;
|
|
98
|
+
}
|
|
99
|
+
declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$5<T>): react.JSX.Element;
|
|
33
100
|
|
|
34
101
|
declare function loadSkiaWeb(): Promise<void>;
|
|
35
102
|
|
|
36
|
-
interface Props$
|
|
103
|
+
interface Props$4 {
|
|
37
104
|
visible: boolean;
|
|
38
105
|
children: ReactNode;
|
|
39
106
|
align?: 'left' | 'right' | 'center';
|
|
@@ -43,23 +110,23 @@ interface Props$3 {
|
|
|
43
110
|
caretBorderWidth?: number;
|
|
44
111
|
triggerSize?: number;
|
|
45
112
|
}
|
|
46
|
-
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$
|
|
113
|
+
declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$4): react.JSX.Element | null;
|
|
47
114
|
|
|
48
|
-
interface Props$
|
|
115
|
+
interface Props$3 {
|
|
49
116
|
active: boolean;
|
|
50
117
|
onPress: () => void;
|
|
51
118
|
style?: StyleProp<ViewStyle>;
|
|
52
119
|
}
|
|
53
|
-
declare function PressAwayOverlay({ active, onPress, style }: Props$
|
|
120
|
+
declare function PressAwayOverlay({ active, onPress, style }: Props$3): react.JSX.Element | null;
|
|
54
121
|
|
|
55
|
-
interface Props$
|
|
122
|
+
interface Props$2 {
|
|
56
123
|
color: string;
|
|
57
124
|
ready: boolean;
|
|
58
125
|
onToggleReady: () => void;
|
|
59
126
|
style?: StyleProp<ViewStyle>;
|
|
60
127
|
labelFontFamily?: string;
|
|
61
128
|
}
|
|
62
|
-
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$
|
|
129
|
+
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$2): react.JSX.Element;
|
|
63
130
|
|
|
64
131
|
interface MenuOption<T extends string | number> {
|
|
65
132
|
value: T;
|
|
@@ -84,7 +151,7 @@ interface MultiSelectSection<T extends string | number> {
|
|
|
84
151
|
allClear?: boolean;
|
|
85
152
|
}
|
|
86
153
|
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
87
|
-
interface Props {
|
|
154
|
+
interface Props$1 {
|
|
88
155
|
id: string;
|
|
89
156
|
host: PopoverHost;
|
|
90
157
|
icon: string;
|
|
@@ -102,7 +169,18 @@ interface Props {
|
|
|
102
169
|
clear: string;
|
|
103
170
|
};
|
|
104
171
|
}
|
|
105
|
-
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props): react.JSX.Element;
|
|
172
|
+
declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$1): react.JSX.Element;
|
|
173
|
+
|
|
174
|
+
interface Props {
|
|
175
|
+
onBack: () => void;
|
|
176
|
+
onSettings: () => void;
|
|
177
|
+
onRandomize?: () => void;
|
|
178
|
+
onReset?: () => void;
|
|
179
|
+
fg: string;
|
|
180
|
+
popoverOpen: boolean;
|
|
181
|
+
children: ReactNode;
|
|
182
|
+
}
|
|
183
|
+
declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props): react.JSX.Element;
|
|
106
184
|
|
|
107
185
|
interface TriggerGaugeProps {
|
|
108
186
|
segments: number;
|
|
@@ -117,14 +195,4 @@ interface TriggerGaugeProps {
|
|
|
117
195
|
|
|
118
196
|
declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
|
|
119
197
|
|
|
120
|
-
type PopoverAlign
|
|
121
|
-
type PopoverVerticalAlign = 'below' | 'above';
|
|
122
|
-
declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
|
|
123
|
-
align: PopoverAlign;
|
|
124
|
-
maxHeight: number;
|
|
125
|
-
measured: boolean;
|
|
126
|
-
triggerRef: react.RefObject<View | null>;
|
|
127
|
-
verticalAlign: PopoverVerticalAlign;
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
export { InlineColorPicker, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, loadSkiaWeb, useAutoAlign, usePopoverHost };
|
|
198
|
+
export { BaseSettingsDialog, type BaseSettingsDialogProps, CornerActionButtons, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
|