@tastic/hud 0.4.0 → 0.6.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 (14) hide show
  1. package/dist/index.d.mts +33 -9
  2. package/dist/index.d.ts +33 -9
  3. package/dist/index.js +185 -144
  4. package/dist/index.mjs +170 -130
  5. package/package.json +4 -4
  6. package/src/AchievementRow.tsx +16 -8
  7. package/src/BaseSettingsDialog.tsx +12 -12
  8. package/src/BaseStatsScreen.tsx +51 -17
  9. package/src/ContentGutter.tsx +55 -0
  10. package/src/InlineColorPicker.tsx +21 -11
  11. package/src/SectionedDropdown.tsx +14 -2
  12. package/src/StatRow.tsx +14 -9
  13. package/src/StatSection.tsx +19 -7
  14. package/src/index.ts +1 -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$b {
7
+ interface Props$c {
8
8
  icon: string;
9
9
  title: string;
10
10
  description: string;
@@ -13,8 +13,11 @@ interface Props$b {
13
13
  checkColor?: string;
14
14
  progress?: number;
15
15
  deviceMarker?: boolean;
16
+ fg?: string;
17
+ fgMuted?: string;
18
+ sectionBg?: string;
16
19
  }
17
- declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props$b): react.JSX.Element;
20
+ declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$c): react.JSX.Element;
18
21
 
19
22
  interface BaseSettingsDialogProps {
20
23
  visible: boolean;
@@ -34,9 +37,11 @@ interface BaseSettingsDialogProps {
34
37
  }
35
38
  declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
36
39
 
37
- interface Props$a {
40
+ type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
41
+ interface Props$b {
38
42
  rotation?: number;
39
43
  title?: string;
44
+ titleVariant?: MD3TextVariant;
40
45
  onBack: () => void;
41
46
  insets: {
42
47
  top: number;
@@ -48,9 +53,22 @@ interface Props$a {
48
53
  resetLabel?: string;
49
54
  resetConfirmTitle?: string;
50
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$b): react.JSX.Element;
63
+
64
+ interface Props$a {
65
+ maxContentWidth?: number;
66
+ leftGutter?: ReactNode;
67
+ rightGutter?: ReactNode;
68
+ style?: StyleProp<ViewStyle>;
51
69
  children: ReactNode;
52
70
  }
53
- declare function BaseStatsScreen({ rotation, title, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, children }: Props$a): react.JSX.Element;
71
+ declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$a): react.JSX.Element;
54
72
 
55
73
  interface Props$9 {
56
74
  onBack: () => void;
@@ -78,6 +96,7 @@ interface Props$8 {
78
96
  host: PopoverHost;
79
97
  value: string;
80
98
  onChange: (hex: string) => void;
99
+ previewValue?: (hex: string) => string;
81
100
  swatches?: SeedColor[];
82
101
  takenValue?: string;
83
102
  allowSwapTaken?: boolean;
@@ -90,7 +109,7 @@ interface Props$8 {
90
109
  columns?: number;
91
110
  size?: number;
92
111
  }
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;
112
+ declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
94
113
 
95
114
  type PopoverAlign = 'left' | 'right' | 'center';
96
115
  type PopoverVerticalAlign = 'below' | 'above';
@@ -172,6 +191,7 @@ interface SingleSelectSection<T extends string | number> {
172
191
  options: MenuOption<T>[];
173
192
  value: T;
174
193
  onChange: (value: T) => void;
194
+ takenValue?: T;
175
195
  }
176
196
  interface MultiSelectSection<T extends string | number> {
177
197
  kind: 'multi';
@@ -216,14 +236,18 @@ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg
216
236
  interface Props$1 {
217
237
  label: string;
218
238
  value: string;
239
+ fg?: string;
240
+ fgMuted?: string;
219
241
  }
220
- declare function StatRow({ label, value }: Props$1): react.JSX.Element;
242
+ declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
221
243
 
222
244
  interface Props {
223
245
  label: string;
246
+ fg?: string;
247
+ sectionBg?: string;
224
248
  children: ReactNode;
225
249
  }
226
- declare function StatSection({ label, children }: Props): react.JSX.Element;
250
+ declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
227
251
 
228
252
  interface TriggerGaugeProps {
229
253
  segments: number;
@@ -238,4 +262,4 @@ interface TriggerGaugeProps {
238
262
 
239
263
  declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
240
264
 
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 };
265
+ export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ContentGutter, 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,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$b {
7
+ interface Props$c {
8
8
  icon: string;
9
9
  title: string;
10
10
  description: string;
@@ -13,8 +13,11 @@ interface Props$b {
13
13
  checkColor?: string;
14
14
  progress?: number;
15
15
  deviceMarker?: boolean;
16
+ fg?: string;
17
+ fgMuted?: string;
18
+ sectionBg?: string;
16
19
  }
17
- declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props$b): react.JSX.Element;
20
+ declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$c): react.JSX.Element;
18
21
 
19
22
  interface BaseSettingsDialogProps {
20
23
  visible: boolean;
@@ -34,9 +37,11 @@ interface BaseSettingsDialogProps {
34
37
  }
35
38
  declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
36
39
 
37
- interface Props$a {
40
+ type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
41
+ interface Props$b {
38
42
  rotation?: number;
39
43
  title?: string;
44
+ titleVariant?: MD3TextVariant;
40
45
  onBack: () => void;
41
46
  insets: {
42
47
  top: number;
@@ -48,9 +53,22 @@ interface Props$a {
48
53
  resetLabel?: string;
49
54
  resetConfirmTitle?: string;
50
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$b): react.JSX.Element;
63
+
64
+ interface Props$a {
65
+ maxContentWidth?: number;
66
+ leftGutter?: ReactNode;
67
+ rightGutter?: ReactNode;
68
+ style?: StyleProp<ViewStyle>;
51
69
  children: ReactNode;
52
70
  }
53
- declare function BaseStatsScreen({ rotation, title, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, children }: Props$a): react.JSX.Element;
71
+ declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$a): react.JSX.Element;
54
72
 
55
73
  interface Props$9 {
56
74
  onBack: () => void;
@@ -78,6 +96,7 @@ interface Props$8 {
78
96
  host: PopoverHost;
79
97
  value: string;
80
98
  onChange: (hex: string) => void;
99
+ previewValue?: (hex: string) => string;
81
100
  swatches?: SeedColor[];
82
101
  takenValue?: string;
83
102
  allowSwapTaken?: boolean;
@@ -90,7 +109,7 @@ interface Props$8 {
90
109
  columns?: number;
91
110
  size?: number;
92
111
  }
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;
112
+ declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
94
113
 
95
114
  type PopoverAlign = 'left' | 'right' | 'center';
96
115
  type PopoverVerticalAlign = 'below' | 'above';
@@ -172,6 +191,7 @@ interface SingleSelectSection<T extends string | number> {
172
191
  options: MenuOption<T>[];
173
192
  value: T;
174
193
  onChange: (value: T) => void;
194
+ takenValue?: T;
175
195
  }
176
196
  interface MultiSelectSection<T extends string | number> {
177
197
  kind: 'multi';
@@ -216,14 +236,18 @@ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg
216
236
  interface Props$1 {
217
237
  label: string;
218
238
  value: string;
239
+ fg?: string;
240
+ fgMuted?: string;
219
241
  }
220
- declare function StatRow({ label, value }: Props$1): react.JSX.Element;
242
+ declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
221
243
 
222
244
  interface Props {
223
245
  label: string;
246
+ fg?: string;
247
+ sectionBg?: string;
224
248
  children: ReactNode;
225
249
  }
226
- declare function StatSection({ label, children }: Props): react.JSX.Element;
250
+ declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
227
251
 
228
252
  interface TriggerGaugeProps {
229
253
  segments: number;
@@ -238,4 +262,4 @@ interface TriggerGaugeProps {
238
262
 
239
263
  declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
240
264
 
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 };
265
+ export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ContentGutter, 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 };