@tastic/hud 0.1.0 → 0.1.1

package/dist/{TriggerGauge-HIPRGEWJ.mjs → TriggerGauge-XBKZ3KER.mjs}

@@ -100,7 +100,15 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     return path;
   }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
   if (segments < 2) return null;
-  return /* @__PURE__ */ jsx(View, { style: [styles.container, { height: size, width: size }], pointerEvents: "none", children: /* @__PURE__ */ jsxs(Canvas, { style: { height: canvasSize, width: canvasSize }, children: [
+  const gaugeSizeStyle = {
+    height: size,
+    width: size
+  };
+  const canvasSizeStyle = {
+    height: canvasSize,
+    width: canvasSize
+  };
+  return /* @__PURE__ */ jsx(View, { style: [styles.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ jsxs(Canvas, { style: canvasSizeStyle, children: [
     /* @__PURE__ */ jsx(Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
     /* @__PURE__ */ jsx(Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });

package/dist/index.js

@@ -122,7 +122,15 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     return path;
   }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
   if (segments < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native8.View, { style: [styles4.container, { height: size, width: size }], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: { height: canvasSize, width: canvasSize }, children: [
+  const gaugeSizeStyle = {
+    height: size,
+    width: size
+  };
+  const canvasSizeStyle = {
+    height: canvasSize,
+    width: canvasSize
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native8.View, { style: [styles4.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
@@ -418,7 +426,10 @@ var import_react_native7 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily, fontWeight: "bold" }, { color: ready ? "#000000" : color }], children: ready ? "READY \u2713" : "READY?" }) });
+  const readyButtonStyle = [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
+  const labelColorStyle = { color: ready ? "#000000" : color };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
 var styles3 = import_react_native7.StyleSheet.create({
   readyButton: {
@@ -493,13 +504,16 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: [styles5.anchor, open && styles5.anchorOpen], children: [
+  const anchorStyle = [styles5.anchor, open && styles5.anchorOpen];
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
+  const dividerStyle = { backgroundColor: menuBorderColor };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: anchorStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.ScrollView, { style: [styles5.menu, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles5.divider, { backgroundColor: menuBorderColor }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.ScrollView, { style: [styles5.menu, menuStyle], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles5.divider, dividerStyle] }),
       section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SingleSection,
         {
@@ -528,11 +542,14 @@ function SingleSection({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: section.options.map((option) => {
     const selected = option.value === section.value;
     const rowColor = selected ? onAccentColor : mutedColor;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: [styles5.item, selected && { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
+    const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }];
+    const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+    const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
       option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemLabelColumn, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: [{ fontFamily: labelFontFamily }, { color: rowColor }], children: option.description })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -552,9 +569,11 @@ function MultiSection({
       const rowColor = selected ? onAccentColor : mutedColor;
       const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
+      const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native9.View, { style: styles5.itemRow, children: [
         option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.itemLabelFlex, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
     section.allClear && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles5.item, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })

package/dist/index.mjs

@@ -245,7 +245,10 @@ import { StyleSheet as StyleSheet4 } from "react-native";
 import { Text } from "react-native-paper";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: onToggleReady, borderless: true, style: [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style], children: /* @__PURE__ */ jsx4(Text, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily, fontWeight: "bold" }, { color: ready ? "#000000" : color }], children: ready ? "READY \u2713" : "READY?" }) });
+  const readyButtonStyle = [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
+  const labelColorStyle = { color: ready ? "#000000" : color };
+  return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx4(Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
 var styles3 = StyleSheet4.create({
   readyButton: {
@@ -268,7 +271,7 @@ import { Icon as Icon2, Text as Text2 } from "react-native-paper";
 // src/TriggerGaugeHost.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-HIPRGEWJ.mjs").then((m) => ({ default: m.TriggerGauge }))));
+var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-XBKZ3KER.mjs").then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
   return /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(LazyTriggerGauge, { ...props }) });
 }
@@ -320,13 +323,16 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  return /* @__PURE__ */ jsxs3(View4, { style: [styles4.anchor, open && styles4.anchorOpen], children: [
+  const anchorStyle = [styles4.anchor, open && styles4.anchorOpen];
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
+  const dividerStyle = { backgroundColor: menuBorderColor };
+  return /* @__PURE__ */ jsxs3(View4, { style: anchorStyle, children: [
     /* @__PURE__ */ jsxs3(View4, { ref: triggerRef, collapsable: false, style: styles4.triggerBox, children: [
       /* @__PURE__ */ jsx6(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
       /* @__PURE__ */ jsx6(IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ jsx6(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx6(ScrollView2, { style: [styles4.menu, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }], contentContainerStyle: styles4.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs3(View4, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ jsx6(View4, { style: [styles4.divider, { backgroundColor: menuBorderColor }] }),
+    /* @__PURE__ */ jsx6(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx6(ScrollView2, { style: [styles4.menu, menuStyle], contentContainerStyle: styles4.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs3(View4, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx6(View4, { style: [styles4.divider, dividerStyle] }),
       section.kind === "single" ? /* @__PURE__ */ jsx6(
         SingleSection,
         {
@@ -355,11 +361,14 @@ function SingleSection({
   return /* @__PURE__ */ jsx6(Fragment2, { children: section.options.map((option) => {
     const selected = option.value === section.value;
     const rowColor = selected ? onAccentColor : mutedColor;
-    return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => onSelect(option.value), style: [styles4.item, selected && { backgroundColor: accentColor }], children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
+    const itemStyle = [styles4.item, selected && { backgroundColor: accentColor }];
+    const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+    const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
+    return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
       option.icon && /* @__PURE__ */ jsx6(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
       /* @__PURE__ */ jsxs3(View4, { style: styles4.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label }),
-        option.description && /* @__PURE__ */ jsx6(Text2, { variant: "labelSmall", style: [{ fontFamily: labelFontFamily }, { color: rowColor }], children: option.description })
+        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx6(Text2, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -379,9 +388,11 @@ function MultiSection({
       const rowColor = selected ? onAccentColor : mutedColor;
       const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: [styles4.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }], children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
+      const itemStyle = [styles4.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+      return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
         option.icon && /* @__PURE__ */ jsx6(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.itemLabelFlex, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? "bold" : "normal" }], children: option.label })
+        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
     section.allClear && /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles4.item, children: /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",

package/src/ReadyButton.tsx

@@ -1,5 +1,5 @@
 import { TouchableRipple } from '@rific/feedback-press'
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
 import { Text } from 'react-native-paper'
 
 import { MONO_FONT } from './fonts'
@@ -21,9 +21,13 @@ interface Props {
 // below a shared row — e.g. a vs-CPU mode with only one human player needs just one Ready toggle,
 // not one tucked under each slot.
 export function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }: Props) {
+  const readyButtonStyle = [styles.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style]
+  const labelTextStyle: TextStyle = { fontFamily: labelFontFamily, fontWeight: 'bold' }
+  const labelColorStyle = { color: ready ? '#000000' : color }
+
   return (
-    <TouchableRipple onPress={onToggleReady} borderless style={[styles.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style]}>
-      <Text variant='labelLarge' style={[{ fontFamily: labelFontFamily, fontWeight: 'bold' }, { color: ready ? '#000000' : color }]}>
+    <TouchableRipple onPress={onToggleReady} borderless style={readyButtonStyle}>
+      <Text variant='labelLarge' style={[labelTextStyle, labelColorStyle]}>
         {ready ? 'READY ✓' : 'READY?'}
       </Text>
     </TouchableRipple>

package/src/SectionedDropdown.tsx

@@ -1,6 +1,6 @@
 import { getBlendedColor, getColorRoles } from '@rific/auto-paper'
 import { IconButton, TouchableRipple } from '@rific/feedback-press'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { ScrollView, StyleSheet, TextStyle, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { MONO_FONT } from './fonts'
@@ -177,8 +177,12 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
     gaugeOffset += section.options.length
   }
 
+  const anchorStyle = [styles.anchor, open && styles.anchorOpen]
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }
+  const dividerStyle = { backgroundColor: menuBorderColor }
+
   return (
-    <View style={[styles.anchor, open && styles.anchorOpen]}>
+    <View style={anchorStyle}>
       <View ref={triggerRef} collapsable={false} style={styles.triggerBox}>
         <TriggerGaugeHost segments={gaugeSegments} litIndices={gaugeLitIndices} size={TRIGGER_SIZE} accentColor={accentColor} mutedColor={mutedColor} />
         <IconButton icon={triggerIcon} iconColor={triggerIconColor} size={triggerIconSize} accessibilityLabel={accessibilityLabel} onPress={() => host.toggle(id)} />
@@ -194,13 +198,13 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
         is always <= maxHeight then, so nothing scrolls); on a short landscape screen where neither
         direction has enough room, this is what keeps the menu from just running off the screen
         edge instead of flipping only made it run off a *smaller* amount. */}
-        <ScrollView style={[styles.menu, { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight }]} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
+        <ScrollView style={[styles.menu, menuStyle]} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
           {sections.map((section, sectionIndex) => (
             <View key={section.id}>
               {/* Every section after the first gets a rule above it — the divider belongs to the
               boundary between sections, not to either section itself, so it's keyed off position
               rather than each section carrying its own "divider below me" flag. */}
-              {sectionIndex > 0 && <View style={[styles.divider, { backgroundColor: menuBorderColor }]} />}
+              {sectionIndex > 0 && <View style={[styles.divider, dividerStyle]} />}
 
               {section.kind === 'single' ? (
                 <SingleSection
@@ -247,16 +251,19 @@ function SingleSection({
       {section.options.map((option) => {
         const selected = option.value === section.value
         const rowColor = selected ? onAccentColor : mutedColor
+        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }]
+        const labelStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? 'bold' : 'normal' }
+        const descriptionStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor }
         return (
-          <TouchableRipple key={option.value} onPress={() => onSelect(option.value)} style={[styles.item, selected && { backgroundColor: accentColor }]}>
+          <TouchableRipple key={option.value} onPress={() => onSelect(option.value)} style={itemStyle}>
             <View style={styles.itemRow}>
               {option.icon && <Icon source={option.icon} size={MENU_ITEM_ICON_SIZE} color={rowColor} />}
               <View style={styles.itemLabelColumn}>
-                <Text variant='labelLarge' style={[{ fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? 'bold' : 'normal' }]}>
+                <Text variant='labelLarge' style={labelStyle}>
                   {option.label}
                 </Text>
                 {option.description && (
-                  <Text variant='labelSmall' style={[{ fontFamily: labelFontFamily }, { color: rowColor }]}>
+                  <Text variant='labelSmall' style={descriptionStyle}>
                     {option.description}
                   </Text>
                 )}
@@ -299,11 +306,13 @@ function MultiSection({
         // separately-rounded pills.
         const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value)
         const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value)
+        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }]
+        const labelStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? 'bold' : 'normal' }
         return (
-          <TouchableRipple key={option.value} onPress={() => section.onChange(selected ? section.value.filter((v: unknown) => v !== option.value) : [...section.value, option.value])} style={[styles.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }]}>
+          <TouchableRipple key={option.value} onPress={() => section.onChange(selected ? section.value.filter((v: unknown) => v !== option.value) : [...section.value, option.value])} style={itemStyle}>
             <View style={styles.itemRow}>
               {option.icon && <Icon source={option.icon} size={MENU_ITEM_ICON_SIZE} color={rowColor} />}
-              <Text variant='labelLarge' style={[styles.itemLabelFlex, { fontFamily: labelFontFamily }, { color: rowColor, fontWeight: selected ? 'bold' : 'normal' }]}>
+              <Text variant='labelLarge' style={[styles.itemLabelFlex, labelStyle]}>
                 {option.label}
               </Text>
             </View>

package/src/TriggerGauge.tsx

@@ -266,9 +266,18 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
 
   if (segments < 2) return null
 
+  const gaugeSizeStyle = {
+    height: size,
+    width: size
+  }
+  const canvasSizeStyle = {
+    height: canvasSize,
+    width: canvasSize
+  }
+
   return (
-    <View style={[styles.container, { height: size, width: size }]} pointerEvents='none'>
-      <Canvas style={{ height: canvasSize, width: canvasSize }}>
+    <View style={[styles.container, gaugeSizeStyle]} pointerEvents='none'>
+      <Canvas style={canvasSizeStyle}>
         <Path path={unlitPath} style='stroke' strokeWidth={UNLIT_THICKNESS} strokeCap='round' color={mutedColor} opacity={0.35} />
         <Path path={litPath} style='stroke' strokeWidth={LIT_THICKNESS} strokeCap='round' color={accentColor} opacity={1} />
       </Canvas>