@tastic/profile 0.16.0 → 0.16.1

package/dist/index.d.mts

@@ -30,6 +30,7 @@ interface OptionPickerOption<T extends string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {

package/dist/index.d.ts

@@ -30,6 +30,7 @@ interface OptionPickerOption<T extends string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {

package/dist/index.js

@@ -210,10 +210,10 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
     ) })
   ] });
 }
-function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }) {
+function IconRow({ icon, iconColor, label, selected, color, fg, disabled = false, onPress }) {
   const textColor = selected ? (0, import_auto_paper2.getContrastColor)(color) : fg;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled, onPress, style: [pickerMenuStyles.row, selected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [pickerMenuStyles.rowInner, disabled && pickerMenuStyles.rowDisabled], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: styles3.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: icon, size: 13, color: textColor }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: styles3.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: icon, size: 13, color: selected ? textColor : iconColor ?? textColor }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [pickerMenuStyles.rowLabel, { color: textColor }], numberOfLines: 1, children: label })
   ] }) });
 }
@@ -431,7 +431,7 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconRow, { icon: option.icon ?? rowIcon, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
 }
 
 // src/ProfileChip.tsx

package/dist/index.mjs

@@ -162,10 +162,10 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
     ) })
   ] });
 }
-function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }) {
+function IconRow({ icon, iconColor, label, selected, color, fg, disabled = false, onPress }) {
   const textColor = selected ? getContrastColor2(color) : fg;
   return /* @__PURE__ */ jsx4(TouchableRipple, { disabled, onPress, style: [pickerMenuStyles.row, selected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs2(View3, { style: [pickerMenuStyles.rowInner, disabled && pickerMenuStyles.rowDisabled], children: [
-    /* @__PURE__ */ jsx4(View3, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx4(Icon2, { source: icon, size: 13, color: textColor }) }),
+    /* @__PURE__ */ jsx4(View3, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx4(Icon2, { source: icon, size: 13, color: selected ? textColor : iconColor ?? textColor }) }),
     /* @__PURE__ */ jsx4(Text2, { style: [pickerMenuStyles.rowLabel, { color: textColor }], numberOfLines: 1, children: label })
   ] }) });
 }
@@ -383,7 +383,7 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
 }
 
 // src/ProfileChip.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Player profile identity for local-multiplayer React Native games: a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",
@@ -66,12 +66,12 @@
     "@infinitetoken/jest-config": "^0.5.2",
     "@infinitetoken/tsconfig": "^0.6.0",
     "@rific/auto-paper": "^0.13.3",
-    "@rific/core": "^0.3.1",
+    "@rific/core": "^0.4.0",
     "@rific/feedback-press": "^0.13.0",
     "@rific/focus-chain": "^0.4.8",
-    "@rific/toaster": "^0.8.2",
+    "@rific/toaster": "^0.8.3",
     "@tastic/core": "^0.14.0",
-    "@tastic/hud": "^0.23.0",
+    "@tastic/hud": "^0.24.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/OptionPicker.tsx

@@ -7,6 +7,10 @@ export interface OptionPickerOption<T extends string> {
   value: T
   label: string
   icon?: string
+  // The option's own color (e.g. a difficulty's), for its row's icon while the row isn't the selected
+  // one; the selected row still fills with the picker's `color`, its icon contrasting as always.
+  // Without it the icon takes the row's text color.
+  color?: string
 }
 
 // The popover's content footprint: one row per option, plus (with a `colorSection`) the Color row,
@@ -57,7 +61,7 @@ export function OptionPicker<T extends string>({ id, host, options, value, onCha
   return (
     <PickerMenu id={id} host={host} color={color} dark={dark} label={selected?.label ?? ''} chip={{ icon }} colorSection={colorSection} contentSize={getOptionPickerContentSize(options.length, colorSection)} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle}>
       {options.map((option) => (
-        <IconRow key={option.value} icon={option.icon ?? rowIcon} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
+        <IconRow key={option.value} icon={option.icon ?? rowIcon} iconColor={option.color} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
       ))}
     </PickerMenu>
   )

package/src/PickerMenu.tsx

@@ -231,6 +231,9 @@ export function PickerMenu({ id, host, color, dark, label, chip, colorSection, h
 
 interface IconRowProps {
   icon: string
+  // The icon's color while the row isn't selected (an OptionPicker option's own `color`). Defaults to
+  // `fg`, like the label.
+  iconColor?: string
   label: string
   // Fills the row with `color` (its icon and label then contrast against it).
   selected: boolean
@@ -244,7 +247,7 @@ interface IconRowProps {
 // A selected row's own background fills entirely with its identity color - matching how a selected
 // row reads elsewhere (see @tastic/hud's SectionedDropdown) rather than a checkmark bolted onto an
 // otherwise-plain row.
-export function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }: IconRowProps) {
+export function IconRow({ icon, iconColor, label, selected, color, fg, disabled = false, onPress }: IconRowProps) {
   const textColor = selected ? getContrastColor(color) : fg
   return (
     <TouchableRipple disabled={disabled} onPress={onPress} style={[pickerMenuStyles.row, selected && { backgroundColor: color }]}>
@@ -253,7 +256,7 @@ export function IconRow({ icon, label, selected, color, fg, disabled = false, on
         circle, but still the same fixed-size slot every row's icon/chip sits in (see ProfileChip's
         own doc), so this row's icon stays lined up with every other row regardless of selection. */}
         <View style={styles.iconSlot}>
-          <Icon source={icon} size={13} color={textColor} />
+          <Icon source={icon} size={13} color={selected ? textColor : (iconColor ?? textColor)} />
         </View>
         <Text style={[pickerMenuStyles.rowLabel, { color: textColor }]} numberOfLines={1}>
           {label}