@tastic/hud 0.2.0 → 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 +73 -23
- package/dist/index.d.ts +73 -23
- package/dist/index.js +229 -75
- package/dist/index.mjs +207 -58
- package/package.json +1 -1
- package/src/CornerActionButtons.tsx +39 -0
- package/src/LabeledDropdown.tsx +175 -0
- package/src/SharedActionBand.tsx +61 -0
- package/src/index.ts +3 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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
5
|
|
|
6
6
|
interface BaseSettingsDialogProps {
|
|
7
7
|
visible: boolean;
|
|
@@ -21,6 +21,18 @@ interface BaseSettingsDialogProps {
|
|
|
21
21
|
}
|
|
22
22
|
declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
|
|
23
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;
|
|
35
|
+
|
|
24
36
|
declare const MONO_FONT: string;
|
|
25
37
|
|
|
26
38
|
interface PopoverHost {
|
|
@@ -30,7 +42,7 @@ interface PopoverHost {
|
|
|
30
42
|
}
|
|
31
43
|
declare function usePopoverHost(): PopoverHost;
|
|
32
44
|
|
|
33
|
-
interface Props$
|
|
45
|
+
interface Props$6 {
|
|
34
46
|
id: string;
|
|
35
47
|
host: PopoverHost;
|
|
36
48
|
value: string;
|
|
@@ -47,11 +59,48 @@ interface Props$4 {
|
|
|
47
59
|
columns?: number;
|
|
48
60
|
size?: number;
|
|
49
61
|
}
|
|
50
|
-
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;
|
|
51
100
|
|
|
52
101
|
declare function loadSkiaWeb(): Promise<void>;
|
|
53
102
|
|
|
54
|
-
interface Props$
|
|
103
|
+
interface Props$4 {
|
|
55
104
|
visible: boolean;
|
|
56
105
|
children: ReactNode;
|
|
57
106
|
align?: 'left' | 'right' | 'center';
|
|
@@ -61,23 +110,23 @@ interface Props$3 {
|
|
|
61
110
|
caretBorderWidth?: number;
|
|
62
111
|
triggerSize?: number;
|
|
63
112
|
}
|
|
64
|
-
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;
|
|
65
114
|
|
|
66
|
-
interface Props$
|
|
115
|
+
interface Props$3 {
|
|
67
116
|
active: boolean;
|
|
68
117
|
onPress: () => void;
|
|
69
118
|
style?: StyleProp<ViewStyle>;
|
|
70
119
|
}
|
|
71
|
-
declare function PressAwayOverlay({ active, onPress, style }: Props$
|
|
120
|
+
declare function PressAwayOverlay({ active, onPress, style }: Props$3): react.JSX.Element | null;
|
|
72
121
|
|
|
73
|
-
interface Props$
|
|
122
|
+
interface Props$2 {
|
|
74
123
|
color: string;
|
|
75
124
|
ready: boolean;
|
|
76
125
|
onToggleReady: () => void;
|
|
77
126
|
style?: StyleProp<ViewStyle>;
|
|
78
127
|
labelFontFamily?: string;
|
|
79
128
|
}
|
|
80
|
-
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$
|
|
129
|
+
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$2): react.JSX.Element;
|
|
81
130
|
|
|
82
131
|
interface MenuOption<T extends string | number> {
|
|
83
132
|
value: T;
|
|
@@ -102,7 +151,7 @@ interface MultiSelectSection<T extends string | number> {
|
|
|
102
151
|
allClear?: boolean;
|
|
103
152
|
}
|
|
104
153
|
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
105
|
-
interface Props {
|
|
154
|
+
interface Props$1 {
|
|
106
155
|
id: string;
|
|
107
156
|
host: PopoverHost;
|
|
108
157
|
icon: string;
|
|
@@ -120,7 +169,18 @@ interface Props {
|
|
|
120
169
|
clear: string;
|
|
121
170
|
};
|
|
122
171
|
}
|
|
123
|
-
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;
|
|
124
184
|
|
|
125
185
|
interface TriggerGaugeProps {
|
|
126
186
|
segments: number;
|
|
@@ -135,14 +195,4 @@ interface TriggerGaugeProps {
|
|
|
135
195
|
|
|
136
196
|
declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
|
|
137
197
|
|
|
138
|
-
type PopoverAlign
|
|
139
|
-
type PopoverVerticalAlign = 'below' | 'above';
|
|
140
|
-
declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
|
|
141
|
-
align: PopoverAlign;
|
|
142
|
-
maxHeight: number;
|
|
143
|
-
measured: boolean;
|
|
144
|
-
triggerRef: react.RefObject<View | null>;
|
|
145
|
-
verticalAlign: PopoverVerticalAlign;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
export { BaseSettingsDialog, type BaseSettingsDialogProps, 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,7 @@
|
|
|
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
5
|
|
|
6
6
|
interface BaseSettingsDialogProps {
|
|
7
7
|
visible: boolean;
|
|
@@ -21,6 +21,18 @@ interface BaseSettingsDialogProps {
|
|
|
21
21
|
}
|
|
22
22
|
declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
|
|
23
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;
|
|
35
|
+
|
|
24
36
|
declare const MONO_FONT: string;
|
|
25
37
|
|
|
26
38
|
interface PopoverHost {
|
|
@@ -30,7 +42,7 @@ interface PopoverHost {
|
|
|
30
42
|
}
|
|
31
43
|
declare function usePopoverHost(): PopoverHost;
|
|
32
44
|
|
|
33
|
-
interface Props$
|
|
45
|
+
interface Props$6 {
|
|
34
46
|
id: string;
|
|
35
47
|
host: PopoverHost;
|
|
36
48
|
value: string;
|
|
@@ -47,11 +59,48 @@ interface Props$4 {
|
|
|
47
59
|
columns?: number;
|
|
48
60
|
size?: number;
|
|
49
61
|
}
|
|
50
|
-
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;
|
|
51
100
|
|
|
52
101
|
declare function loadSkiaWeb(): Promise<void>;
|
|
53
102
|
|
|
54
|
-
interface Props$
|
|
103
|
+
interface Props$4 {
|
|
55
104
|
visible: boolean;
|
|
56
105
|
children: ReactNode;
|
|
57
106
|
align?: 'left' | 'right' | 'center';
|
|
@@ -61,23 +110,23 @@ interface Props$3 {
|
|
|
61
110
|
caretBorderWidth?: number;
|
|
62
111
|
triggerSize?: number;
|
|
63
112
|
}
|
|
64
|
-
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;
|
|
65
114
|
|
|
66
|
-
interface Props$
|
|
115
|
+
interface Props$3 {
|
|
67
116
|
active: boolean;
|
|
68
117
|
onPress: () => void;
|
|
69
118
|
style?: StyleProp<ViewStyle>;
|
|
70
119
|
}
|
|
71
|
-
declare function PressAwayOverlay({ active, onPress, style }: Props$
|
|
120
|
+
declare function PressAwayOverlay({ active, onPress, style }: Props$3): react.JSX.Element | null;
|
|
72
121
|
|
|
73
|
-
interface Props$
|
|
122
|
+
interface Props$2 {
|
|
74
123
|
color: string;
|
|
75
124
|
ready: boolean;
|
|
76
125
|
onToggleReady: () => void;
|
|
77
126
|
style?: StyleProp<ViewStyle>;
|
|
78
127
|
labelFontFamily?: string;
|
|
79
128
|
}
|
|
80
|
-
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$
|
|
129
|
+
declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$2): react.JSX.Element;
|
|
81
130
|
|
|
82
131
|
interface MenuOption<T extends string | number> {
|
|
83
132
|
value: T;
|
|
@@ -102,7 +151,7 @@ interface MultiSelectSection<T extends string | number> {
|
|
|
102
151
|
allClear?: boolean;
|
|
103
152
|
}
|
|
104
153
|
type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
|
|
105
|
-
interface Props {
|
|
154
|
+
interface Props$1 {
|
|
106
155
|
id: string;
|
|
107
156
|
host: PopoverHost;
|
|
108
157
|
icon: string;
|
|
@@ -120,7 +169,18 @@ interface Props {
|
|
|
120
169
|
clear: string;
|
|
121
170
|
};
|
|
122
171
|
}
|
|
123
|
-
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;
|
|
124
184
|
|
|
125
185
|
interface TriggerGaugeProps {
|
|
126
186
|
segments: number;
|
|
@@ -135,14 +195,4 @@ interface TriggerGaugeProps {
|
|
|
135
195
|
|
|
136
196
|
declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
|
|
137
197
|
|
|
138
|
-
type PopoverAlign
|
|
139
|
-
type PopoverVerticalAlign = 'below' | 'above';
|
|
140
|
-
declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
|
|
141
|
-
align: PopoverAlign;
|
|
142
|
-
maxHeight: number;
|
|
143
|
-
measured: boolean;
|
|
144
|
-
triggerRef: react.RefObject<View | null>;
|
|
145
|
-
verticalAlign: PopoverVerticalAlign;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
export { BaseSettingsDialog, type BaseSettingsDialogProps, 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 };
|