@tastic/hud 0.2.0 → 0.4.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 (13) hide show
  1. package/dist/index.d.mts +116 -23
  2. package/dist/index.d.ts +116 -23
  3. package/dist/index.js +530 -148
  4. package/dist/index.mjs +483 -111
  5. package/package.json +1 -1
  6. package/src/AchievementRow.tsx +124 -0
  7. package/src/BaseStatsScreen.tsx +158 -0
  8. package/src/CornerActionButtons.tsx +39 -0
  9. package/src/LabeledDropdown.tsx +175 -0
  10. package/src/SharedActionBand.tsx +61 -0
  11. package/src/StatRow.tsx +44 -0
  12. package/src/StatSection.tsx +40 -0
  13. package/src/index.ts +7 -0
package/dist/index.d.mts CHANGED
@@ -1,7 +1,20 @@
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, View } from 'react-native';
4
+ import { View, StyleProp, ViewStyle } from 'react-native';
5
+
6
+ declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
7
+ interface Props$b {
8
+ icon: string;
9
+ title: string;
10
+ description: string;
11
+ badgeColor: string;
12
+ unlockedLabel?: string;
13
+ checkColor?: string;
14
+ progress?: number;
15
+ deviceMarker?: boolean;
16
+ }
17
+ declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props$b): react.JSX.Element;
5
18
 
6
19
  interface BaseSettingsDialogProps {
7
20
  visible: boolean;
@@ -21,6 +34,36 @@ interface BaseSettingsDialogProps {
21
34
  }
22
35
  declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
23
36
 
37
+ interface Props$a {
38
+ rotation?: number;
39
+ title?: string;
40
+ onBack: () => void;
41
+ insets: {
42
+ top: number;
43
+ left: number;
44
+ bottom: number;
45
+ right: number;
46
+ };
47
+ onReset?: () => void;
48
+ resetLabel?: string;
49
+ resetConfirmTitle?: string;
50
+ resetConfirmBody?: string;
51
+ children: ReactNode;
52
+ }
53
+ declare function BaseStatsScreen({ rotation, title, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, children }: Props$a): react.JSX.Element;
54
+
55
+ interface Props$9 {
56
+ onBack: () => void;
57
+ onSettings: () => void;
58
+ fg: string;
59
+ insets: {
60
+ top: number;
61
+ left: number;
62
+ right: number;
63
+ };
64
+ }
65
+ declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$9): react.JSX.Element;
66
+
24
67
  declare const MONO_FONT: string;
25
68
 
26
69
  interface PopoverHost {
@@ -30,7 +73,7 @@ interface PopoverHost {
30
73
  }
31
74
  declare function usePopoverHost(): PopoverHost;
32
75
 
33
- interface Props$4 {
76
+ interface Props$8 {
34
77
  id: string;
35
78
  host: PopoverHost;
36
79
  value: string;
@@ -47,11 +90,48 @@ interface Props$4 {
47
90
  columns?: number;
48
91
  size?: number;
49
92
  }
50
- declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$4): react.JSX.Element;
93
+ declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
94
+
95
+ type PopoverAlign = 'left' | 'right' | 'center';
96
+ type PopoverVerticalAlign = 'below' | 'above';
97
+ declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
98
+ align: PopoverAlign;
99
+ maxHeight: number;
100
+ measured: boolean;
101
+ triggerRef: react.RefObject<View | null>;
102
+ verticalAlign: PopoverVerticalAlign;
103
+ };
104
+
105
+ declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
106
+ declare function getLabeledDropdownContentHeight(optionCount: number): number;
107
+ interface LabeledDropdownOption<T extends string> {
108
+ value: T;
109
+ label: string;
110
+ icon?: string;
111
+ }
112
+ interface AlignResult {
113
+ align: PopoverAlign;
114
+ verticalAlign: PopoverVerticalAlign;
115
+ maxHeight: number;
116
+ measured: boolean;
117
+ triggerRef: RefObject<View | null>;
118
+ }
119
+ interface Props$7<T extends string> {
120
+ id: string;
121
+ host: PopoverHost;
122
+ options: LabeledDropdownOption<T>[];
123
+ value: T;
124
+ onChange: (value: T) => void;
125
+ color: string;
126
+ dark: boolean;
127
+ align?: 'left' | 'right' | 'center';
128
+ alignOverride?: AlignResult;
129
+ }
130
+ declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$7<T>): react.JSX.Element;
51
131
 
52
132
  declare function loadSkiaWeb(): Promise<void>;
53
133
 
54
- interface Props$3 {
134
+ interface Props$6 {
55
135
  visible: boolean;
56
136
  children: ReactNode;
57
137
  align?: 'left' | 'right' | 'center';
@@ -61,23 +141,23 @@ interface Props$3 {
61
141
  caretBorderWidth?: number;
62
142
  triggerSize?: number;
63
143
  }
64
- declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$3): react.JSX.Element | null;
144
+ declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$6): react.JSX.Element | null;
65
145
 
66
- interface Props$2 {
146
+ interface Props$5 {
67
147
  active: boolean;
68
148
  onPress: () => void;
69
149
  style?: StyleProp<ViewStyle>;
70
150
  }
71
- declare function PressAwayOverlay({ active, onPress, style }: Props$2): react.JSX.Element | null;
151
+ declare function PressAwayOverlay({ active, onPress, style }: Props$5): react.JSX.Element | null;
72
152
 
73
- interface Props$1 {
153
+ interface Props$4 {
74
154
  color: string;
75
155
  ready: boolean;
76
156
  onToggleReady: () => void;
77
157
  style?: StyleProp<ViewStyle>;
78
158
  labelFontFamily?: string;
79
159
  }
80
- declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$1): react.JSX.Element;
160
+ declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$4): react.JSX.Element;
81
161
 
82
162
  interface MenuOption<T extends string | number> {
83
163
  value: T;
@@ -102,7 +182,7 @@ interface MultiSelectSection<T extends string | number> {
102
182
  allClear?: boolean;
103
183
  }
104
184
  type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
105
- interface Props {
185
+ interface Props$3 {
106
186
  id: string;
107
187
  host: PopoverHost;
108
188
  icon: string;
@@ -120,7 +200,30 @@ interface Props {
120
200
  clear: string;
121
201
  };
122
202
  }
123
- declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props): react.JSX.Element;
203
+ declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
204
+
205
+ interface Props$2 {
206
+ onBack: () => void;
207
+ onSettings: () => void;
208
+ onRandomize?: () => void;
209
+ onReset?: () => void;
210
+ fg: string;
211
+ popoverOpen: boolean;
212
+ children: ReactNode;
213
+ }
214
+ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props$2): react.JSX.Element;
215
+
216
+ interface Props$1 {
217
+ label: string;
218
+ value: string;
219
+ }
220
+ declare function StatRow({ label, value }: Props$1): react.JSX.Element;
221
+
222
+ interface Props {
223
+ label: string;
224
+ children: ReactNode;
225
+ }
226
+ declare function StatSection({ label, children }: Props): react.JSX.Element;
124
227
 
125
228
  interface TriggerGaugeProps {
126
229
  segments: number;
@@ -135,14 +238,4 @@ interface TriggerGaugeProps {
135
238
 
136
239
  declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
137
240
 
138
- type PopoverAlign = 'left' | 'right' | 'center';
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 };
241
+ 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 };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,20 @@
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, View } from 'react-native';
4
+ import { View, StyleProp, ViewStyle } from 'react-native';
5
+
6
+ declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
7
+ interface Props$b {
8
+ icon: string;
9
+ title: string;
10
+ description: string;
11
+ badgeColor: string;
12
+ unlockedLabel?: string;
13
+ checkColor?: string;
14
+ progress?: number;
15
+ deviceMarker?: boolean;
16
+ }
17
+ declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props$b): react.JSX.Element;
5
18
 
6
19
  interface BaseSettingsDialogProps {
7
20
  visible: boolean;
@@ -21,6 +34,36 @@ interface BaseSettingsDialogProps {
21
34
  }
22
35
  declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
23
36
 
37
+ interface Props$a {
38
+ rotation?: number;
39
+ title?: string;
40
+ onBack: () => void;
41
+ insets: {
42
+ top: number;
43
+ left: number;
44
+ bottom: number;
45
+ right: number;
46
+ };
47
+ onReset?: () => void;
48
+ resetLabel?: string;
49
+ resetConfirmTitle?: string;
50
+ resetConfirmBody?: string;
51
+ children: ReactNode;
52
+ }
53
+ declare function BaseStatsScreen({ rotation, title, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, children }: Props$a): react.JSX.Element;
54
+
55
+ interface Props$9 {
56
+ onBack: () => void;
57
+ onSettings: () => void;
58
+ fg: string;
59
+ insets: {
60
+ top: number;
61
+ left: number;
62
+ right: number;
63
+ };
64
+ }
65
+ declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$9): react.JSX.Element;
66
+
24
67
  declare const MONO_FONT: string;
25
68
 
26
69
  interface PopoverHost {
@@ -30,7 +73,7 @@ interface PopoverHost {
30
73
  }
31
74
  declare function usePopoverHost(): PopoverHost;
32
75
 
33
- interface Props$4 {
76
+ interface Props$8 {
34
77
  id: string;
35
78
  host: PopoverHost;
36
79
  value: string;
@@ -47,11 +90,48 @@ interface Props$4 {
47
90
  columns?: number;
48
91
  size?: number;
49
92
  }
50
- declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$4): react.JSX.Element;
93
+ declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
94
+
95
+ type PopoverAlign = 'left' | 'right' | 'center';
96
+ type PopoverVerticalAlign = 'below' | 'above';
97
+ declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
98
+ align: PopoverAlign;
99
+ maxHeight: number;
100
+ measured: boolean;
101
+ triggerRef: react.RefObject<View | null>;
102
+ verticalAlign: PopoverVerticalAlign;
103
+ };
104
+
105
+ declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
106
+ declare function getLabeledDropdownContentHeight(optionCount: number): number;
107
+ interface LabeledDropdownOption<T extends string> {
108
+ value: T;
109
+ label: string;
110
+ icon?: string;
111
+ }
112
+ interface AlignResult {
113
+ align: PopoverAlign;
114
+ verticalAlign: PopoverVerticalAlign;
115
+ maxHeight: number;
116
+ measured: boolean;
117
+ triggerRef: RefObject<View | null>;
118
+ }
119
+ interface Props$7<T extends string> {
120
+ id: string;
121
+ host: PopoverHost;
122
+ options: LabeledDropdownOption<T>[];
123
+ value: T;
124
+ onChange: (value: T) => void;
125
+ color: string;
126
+ dark: boolean;
127
+ align?: 'left' | 'right' | 'center';
128
+ alignOverride?: AlignResult;
129
+ }
130
+ declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$7<T>): react.JSX.Element;
51
131
 
52
132
  declare function loadSkiaWeb(): Promise<void>;
53
133
 
54
- interface Props$3 {
134
+ interface Props$6 {
55
135
  visible: boolean;
56
136
  children: ReactNode;
57
137
  align?: 'left' | 'right' | 'center';
@@ -61,23 +141,23 @@ interface Props$3 {
61
141
  caretBorderWidth?: number;
62
142
  triggerSize?: number;
63
143
  }
64
- declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$3): react.JSX.Element | null;
144
+ declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$6): react.JSX.Element | null;
65
145
 
66
- interface Props$2 {
146
+ interface Props$5 {
67
147
  active: boolean;
68
148
  onPress: () => void;
69
149
  style?: StyleProp<ViewStyle>;
70
150
  }
71
- declare function PressAwayOverlay({ active, onPress, style }: Props$2): react.JSX.Element | null;
151
+ declare function PressAwayOverlay({ active, onPress, style }: Props$5): react.JSX.Element | null;
72
152
 
73
- interface Props$1 {
153
+ interface Props$4 {
74
154
  color: string;
75
155
  ready: boolean;
76
156
  onToggleReady: () => void;
77
157
  style?: StyleProp<ViewStyle>;
78
158
  labelFontFamily?: string;
79
159
  }
80
- declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$1): react.JSX.Element;
160
+ declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$4): react.JSX.Element;
81
161
 
82
162
  interface MenuOption<T extends string | number> {
83
163
  value: T;
@@ -102,7 +182,7 @@ interface MultiSelectSection<T extends string | number> {
102
182
  allClear?: boolean;
103
183
  }
104
184
  type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
105
- interface Props {
185
+ interface Props$3 {
106
186
  id: string;
107
187
  host: PopoverHost;
108
188
  icon: string;
@@ -120,7 +200,30 @@ interface Props {
120
200
  clear: string;
121
201
  };
122
202
  }
123
- declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props): react.JSX.Element;
203
+ declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
204
+
205
+ interface Props$2 {
206
+ onBack: () => void;
207
+ onSettings: () => void;
208
+ onRandomize?: () => void;
209
+ onReset?: () => void;
210
+ fg: string;
211
+ popoverOpen: boolean;
212
+ children: ReactNode;
213
+ }
214
+ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props$2): react.JSX.Element;
215
+
216
+ interface Props$1 {
217
+ label: string;
218
+ value: string;
219
+ }
220
+ declare function StatRow({ label, value }: Props$1): react.JSX.Element;
221
+
222
+ interface Props {
223
+ label: string;
224
+ children: ReactNode;
225
+ }
226
+ declare function StatSection({ label, children }: Props): react.JSX.Element;
124
227
 
125
228
  interface TriggerGaugeProps {
126
229
  segments: number;
@@ -135,14 +238,4 @@ interface TriggerGaugeProps {
135
238
 
136
239
  declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
137
240
 
138
- type PopoverAlign = 'left' | 'right' | 'center';
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 };
241
+ 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 };