@tastic/hud 0.3.0 → 0.5.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 (10) hide show
  1. package/dist/index.d.mts +73 -17
  2. package/dist/index.d.ts +73 -17
  3. package/dist/index.js +414 -180
  4. package/dist/index.mjs +368 -139
  5. package/package.json +1 -1
  6. package/src/AchievementRow.tsx +132 -0
  7. package/src/BaseStatsScreen.tsx +192 -0
  8. package/src/StatRow.tsx +49 -0
  9. package/src/StatSection.tsx +52 -0
  10. package/src/index.ts +4 -0
package/dist/index.d.mts CHANGED
@@ -3,6 +3,22 @@ import { ReactNode, RefObject } from 'react';
3
3
  import { SeedColor } from '@rific/auto-paper';
4
4
  import { View, StyleProp, ViewStyle } from 'react-native';
5
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
+ fg?: string;
17
+ fgMuted?: string;
18
+ sectionBg?: string;
19
+ }
20
+ declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$b): react.JSX.Element;
21
+
6
22
  interface BaseSettingsDialogProps {
7
23
  visible: boolean;
8
24
  onDismiss: () => void;
@@ -21,7 +37,31 @@ interface BaseSettingsDialogProps {
21
37
  }
22
38
  declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
23
39
 
24
- interface Props$7 {
40
+ type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
41
+ interface Props$a {
42
+ rotation?: number;
43
+ title?: string;
44
+ titleVariant?: MD3TextVariant;
45
+ onBack: () => void;
46
+ insets: {
47
+ top: number;
48
+ left: number;
49
+ bottom: number;
50
+ right: number;
51
+ };
52
+ onReset?: () => void;
53
+ resetLabel?: string;
54
+ resetConfirmTitle?: string;
55
+ resetConfirmBody?: string;
56
+ fg?: string;
57
+ bg?: string;
58
+ cardBg?: string;
59
+ accentColor?: string;
60
+ children: ReactNode;
61
+ }
62
+ declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$a): react.JSX.Element;
63
+
64
+ interface Props$9 {
25
65
  onBack: () => void;
26
66
  onSettings: () => void;
27
67
  fg: string;
@@ -31,7 +71,7 @@ interface Props$7 {
31
71
  right: number;
32
72
  };
33
73
  }
34
- declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$7): react.JSX.Element;
74
+ declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$9): react.JSX.Element;
35
75
 
36
76
  declare const MONO_FONT: string;
37
77
 
@@ -42,7 +82,7 @@ interface PopoverHost {
42
82
  }
43
83
  declare function usePopoverHost(): PopoverHost;
44
84
 
45
- interface Props$6 {
85
+ interface Props$8 {
46
86
  id: string;
47
87
  host: PopoverHost;
48
88
  value: string;
@@ -59,7 +99,7 @@ interface Props$6 {
59
99
  columns?: number;
60
100
  size?: number;
61
101
  }
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;
102
+ declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
63
103
 
64
104
  type PopoverAlign = 'left' | 'right' | 'center';
65
105
  type PopoverVerticalAlign = 'below' | 'above';
@@ -85,7 +125,7 @@ interface AlignResult {
85
125
  measured: boolean;
86
126
  triggerRef: RefObject<View | null>;
87
127
  }
88
- interface Props$5<T extends string> {
128
+ interface Props$7<T extends string> {
89
129
  id: string;
90
130
  host: PopoverHost;
91
131
  options: LabeledDropdownOption<T>[];
@@ -96,11 +136,11 @@ interface Props$5<T extends string> {
96
136
  align?: 'left' | 'right' | 'center';
97
137
  alignOverride?: AlignResult;
98
138
  }
99
- declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$5<T>): react.JSX.Element;
139
+ declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$7<T>): react.JSX.Element;
100
140
 
101
141
  declare function loadSkiaWeb(): Promise<void>;
102
142
 
103
- interface Props$4 {
143
+ interface Props$6 {
104
144
  visible: boolean;
105
145
  children: ReactNode;
106
146
  align?: 'left' | 'right' | 'center';
@@ -110,23 +150,23 @@ interface Props$4 {
110
150
  caretBorderWidth?: number;
111
151
  triggerSize?: number;
112
152
  }
113
- declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$4): react.JSX.Element | null;
153
+ declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$6): react.JSX.Element | null;
114
154
 
115
- interface Props$3 {
155
+ interface Props$5 {
116
156
  active: boolean;
117
157
  onPress: () => void;
118
158
  style?: StyleProp<ViewStyle>;
119
159
  }
120
- declare function PressAwayOverlay({ active, onPress, style }: Props$3): react.JSX.Element | null;
160
+ declare function PressAwayOverlay({ active, onPress, style }: Props$5): react.JSX.Element | null;
121
161
 
122
- interface Props$2 {
162
+ interface Props$4 {
123
163
  color: string;
124
164
  ready: boolean;
125
165
  onToggleReady: () => void;
126
166
  style?: StyleProp<ViewStyle>;
127
167
  labelFontFamily?: string;
128
168
  }
129
- declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$2): react.JSX.Element;
169
+ declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$4): react.JSX.Element;
130
170
 
131
171
  interface MenuOption<T extends string | number> {
132
172
  value: T;
@@ -151,7 +191,7 @@ interface MultiSelectSection<T extends string | number> {
151
191
  allClear?: boolean;
152
192
  }
153
193
  type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
154
- interface Props$1 {
194
+ interface Props$3 {
155
195
  id: string;
156
196
  host: PopoverHost;
157
197
  icon: string;
@@ -169,9 +209,9 @@ interface Props$1 {
169
209
  clear: string;
170
210
  };
171
211
  }
172
- declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$1): react.JSX.Element;
212
+ declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
173
213
 
174
- interface Props {
214
+ interface Props$2 {
175
215
  onBack: () => void;
176
216
  onSettings: () => void;
177
217
  onRandomize?: () => void;
@@ -180,7 +220,23 @@ interface Props {
180
220
  popoverOpen: boolean;
181
221
  children: ReactNode;
182
222
  }
183
- declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props): react.JSX.Element;
223
+ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props$2): react.JSX.Element;
224
+
225
+ interface Props$1 {
226
+ label: string;
227
+ value: string;
228
+ fg?: string;
229
+ fgMuted?: string;
230
+ }
231
+ declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
232
+
233
+ interface Props {
234
+ label: string;
235
+ fg?: string;
236
+ sectionBg?: string;
237
+ children: ReactNode;
238
+ }
239
+ declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
184
240
 
185
241
  interface TriggerGaugeProps {
186
242
  segments: number;
@@ -195,4 +251,4 @@ interface TriggerGaugeProps {
195
251
 
196
252
  declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
197
253
 
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 };
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 };
package/dist/index.d.ts CHANGED
@@ -3,6 +3,22 @@ import { ReactNode, RefObject } from 'react';
3
3
  import { SeedColor } from '@rific/auto-paper';
4
4
  import { View, StyleProp, ViewStyle } from 'react-native';
5
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
+ fg?: string;
17
+ fgMuted?: string;
18
+ sectionBg?: string;
19
+ }
20
+ declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$b): react.JSX.Element;
21
+
6
22
  interface BaseSettingsDialogProps {
7
23
  visible: boolean;
8
24
  onDismiss: () => void;
@@ -21,7 +37,31 @@ interface BaseSettingsDialogProps {
21
37
  }
22
38
  declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
23
39
 
24
- interface Props$7 {
40
+ type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
41
+ interface Props$a {
42
+ rotation?: number;
43
+ title?: string;
44
+ titleVariant?: MD3TextVariant;
45
+ onBack: () => void;
46
+ insets: {
47
+ top: number;
48
+ left: number;
49
+ bottom: number;
50
+ right: number;
51
+ };
52
+ onReset?: () => void;
53
+ resetLabel?: string;
54
+ resetConfirmTitle?: string;
55
+ resetConfirmBody?: string;
56
+ fg?: string;
57
+ bg?: string;
58
+ cardBg?: string;
59
+ accentColor?: string;
60
+ children: ReactNode;
61
+ }
62
+ declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$a): react.JSX.Element;
63
+
64
+ interface Props$9 {
25
65
  onBack: () => void;
26
66
  onSettings: () => void;
27
67
  fg: string;
@@ -31,7 +71,7 @@ interface Props$7 {
31
71
  right: number;
32
72
  };
33
73
  }
34
- declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$7): react.JSX.Element;
74
+ declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$9): react.JSX.Element;
35
75
 
36
76
  declare const MONO_FONT: string;
37
77
 
@@ -42,7 +82,7 @@ interface PopoverHost {
42
82
  }
43
83
  declare function usePopoverHost(): PopoverHost;
44
84
 
45
- interface Props$6 {
85
+ interface Props$8 {
46
86
  id: string;
47
87
  host: PopoverHost;
48
88
  value: string;
@@ -59,7 +99,7 @@ interface Props$6 {
59
99
  columns?: number;
60
100
  size?: number;
61
101
  }
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;
102
+ declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
63
103
 
64
104
  type PopoverAlign = 'left' | 'right' | 'center';
65
105
  type PopoverVerticalAlign = 'below' | 'above';
@@ -85,7 +125,7 @@ interface AlignResult {
85
125
  measured: boolean;
86
126
  triggerRef: RefObject<View | null>;
87
127
  }
88
- interface Props$5<T extends string> {
128
+ interface Props$7<T extends string> {
89
129
  id: string;
90
130
  host: PopoverHost;
91
131
  options: LabeledDropdownOption<T>[];
@@ -96,11 +136,11 @@ interface Props$5<T extends string> {
96
136
  align?: 'left' | 'right' | 'center';
97
137
  alignOverride?: AlignResult;
98
138
  }
99
- declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$5<T>): react.JSX.Element;
139
+ declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$7<T>): react.JSX.Element;
100
140
 
101
141
  declare function loadSkiaWeb(): Promise<void>;
102
142
 
103
- interface Props$4 {
143
+ interface Props$6 {
104
144
  visible: boolean;
105
145
  children: ReactNode;
106
146
  align?: 'left' | 'right' | 'center';
@@ -110,23 +150,23 @@ interface Props$4 {
110
150
  caretBorderWidth?: number;
111
151
  triggerSize?: number;
112
152
  }
113
- declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$4): react.JSX.Element | null;
153
+ declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$6): react.JSX.Element | null;
114
154
 
115
- interface Props$3 {
155
+ interface Props$5 {
116
156
  active: boolean;
117
157
  onPress: () => void;
118
158
  style?: StyleProp<ViewStyle>;
119
159
  }
120
- declare function PressAwayOverlay({ active, onPress, style }: Props$3): react.JSX.Element | null;
160
+ declare function PressAwayOverlay({ active, onPress, style }: Props$5): react.JSX.Element | null;
121
161
 
122
- interface Props$2 {
162
+ interface Props$4 {
123
163
  color: string;
124
164
  ready: boolean;
125
165
  onToggleReady: () => void;
126
166
  style?: StyleProp<ViewStyle>;
127
167
  labelFontFamily?: string;
128
168
  }
129
- declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$2): react.JSX.Element;
169
+ declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$4): react.JSX.Element;
130
170
 
131
171
  interface MenuOption<T extends string | number> {
132
172
  value: T;
@@ -151,7 +191,7 @@ interface MultiSelectSection<T extends string | number> {
151
191
  allClear?: boolean;
152
192
  }
153
193
  type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
154
- interface Props$1 {
194
+ interface Props$3 {
155
195
  id: string;
156
196
  host: PopoverHost;
157
197
  icon: string;
@@ -169,9 +209,9 @@ interface Props$1 {
169
209
  clear: string;
170
210
  };
171
211
  }
172
- declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$1): react.JSX.Element;
212
+ declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
173
213
 
174
- interface Props {
214
+ interface Props$2 {
175
215
  onBack: () => void;
176
216
  onSettings: () => void;
177
217
  onRandomize?: () => void;
@@ -180,7 +220,23 @@ interface Props {
180
220
  popoverOpen: boolean;
181
221
  children: ReactNode;
182
222
  }
183
- declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props): react.JSX.Element;
223
+ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props$2): react.JSX.Element;
224
+
225
+ interface Props$1 {
226
+ label: string;
227
+ value: string;
228
+ fg?: string;
229
+ fgMuted?: string;
230
+ }
231
+ declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
232
+
233
+ interface Props {
234
+ label: string;
235
+ fg?: string;
236
+ sectionBg?: string;
237
+ children: ReactNode;
238
+ }
239
+ declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
184
240
 
185
241
  interface TriggerGaugeProps {
186
242
  segments: number;
@@ -195,4 +251,4 @@ interface TriggerGaugeProps {
195
251
 
196
252
  declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
197
253
 
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 };
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 };