@namiml/expo-sdk 3.4.4-dev.202607022250 → 3.4.4-dev.202607071644

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.4-dev.202607022250",
+  "version": "3.4.4-dev.202607071644",
   "type": "module",
   "description": "Nami Expo SDK — paywall and subscription management for Expo apps",
   "main": "./dist/index.cjs",
@@ -29,8 +29,8 @@
     "prepublishOnly": "yarn clean && yarn build:prod"
   },
   "dependencies": {
-    "@namiml/expo-nami-iap": "3.4.4-dev.202607022250",
-    "@namiml/sdk-core": "3.4.4-dev.202607022250",
+    "@namiml/expo-nami-iap": "3.4.4-dev.202607071644",
+    "@namiml/sdk-core": "3.4.4-dev.202607071644",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"

package/src/components/elements/NamiSegmentPicker.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import { applyStyles, parseSize } from '../../utils/styles';
+import { applyStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
 import { NamiSegmentPickerItem } from './NamiSegmentPickerItem';
+import { FocusScope, useFocusEnabled } from '../../context/FocusContext';
 
 interface Props {
   component: any;
@@ -16,17 +17,28 @@ export const NamiSegmentPicker: React.FC<Props> = ({
   onClose,
   parentDirection,
 }) => {
-  const containerStyle = useMemo(
-    () => applyStyles(component, scaleFactor, false, parentDirection),
-    [component, scaleFactor, parentDirection]
-  );
+  const focusEnabled = useFocusEnabled();
+
+  // NAM-1213 CTV: track whether any segment item currently holds remote focus so the
+  // whole container can apply its focused visual treatment (focusedFillColor etc.).
+  const [isContainerFocused, setIsContainerFocused] = useState(false);
+
+  const containerStyle = useMemo(() => {
+    const base = applyStyles(component, scaleFactor, false, parentDirection);
+    // Container focused treatment: apply focusedFillColor/focusedBorder* with fallback
+    // to non-focused equivalents (per design doc §2 property-fallback contract).
+    if (focusEnabled && isContainerFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, scaleFactor, parentDirection, focusEnabled, isContainerFocused]);
 
   const direction = component.direction ?? 'horizontal';
   const parentFormId = component.formId ?? component.id ?? '';
   const segments = component.components ?? [];
   const spacing = parseSize(component.spacing, scaleFactor) ?? 0;
 
-  return (
+  const inner = (
     <View style={containerStyle}>
       <ScrollView
         horizontal={direction !== 'vertical'}
@@ -55,6 +67,18 @@ export const NamiSegmentPicker: React.FC<Props> = ({
       </ScrollView>
     </View>
   );
+
+  // On television form factors, wrap in a FocusScope so we can detect when any child
+  // segment item gains remote focus and apply the container's focused visual state.
+  if (focusEnabled) {
+    return (
+      <FocusScope onFocusWithinChange={setIsContainerFocused}>
+        {inner}
+      </FocusScope>
+    );
+  }
+
+  return inner;
 };
 
 const styles = StyleSheet.create({

package/src/components/elements/NamiSegmentPickerItem.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
 import {
   applyStyles,
@@ -95,6 +95,15 @@ export const NamiSegmentPickerItem: React.FC<Props> = ({
     return base;
   }, [merged, scaleFactor, parentDirection, isFocused]);
 
+  // NAM-1213 CTV: focused fill overlay. When the remote is on this item, draw an
+  // absolute-fill View with focusedFillColor over the active/inactive background —
+  // same full-cell geometry as the active fill (design doc §6b fill-rule).
+  // Item border when focused defaults to NONE if focusedBorder* are not authored (§2).
+  const focusedOverlayColor = useMemo(() => {
+    if (!focusEnabled || !isFocused) return null;
+    return parseColor(component.focusedFillColor) ?? null;
+  }, [focusEnabled, isFocused, component.focusedFillColor]);
+
   const onPress = () => {
     if (component.formId && parentFormId) {
       ctx.setFormState(parentFormId, component.formId);
@@ -143,8 +152,19 @@ export const NamiSegmentPickerItem: React.FC<Props> = ({
       onFocus={handleFocus}
       onBlur={onBlur}
       hasTVPreferredFocus={focusEnabled && Boolean(component.focused || component.checked)}
+      // Suppress platform default focus ripple/highlight so only our focused overlay shows.
+      android_ripple={Platform.isTV ? null : undefined}
       style={({ pressed }) => [styles.item, itemStyle, pressed ? styles.pressed : null]}
     >
+      {/* NAM-1213 CTV: focused fill overlay — drawn over the active/inactive background,
+          under the text/children, spanning the full cell (same geometry as active fill).
+          Only shown when the remote is on this item and focusedFillColor is authored. */}
+      {focusedOverlayColor != null && (
+        <View
+          style={[StyleSheet.absoluteFillObject, { backgroundColor: focusedOverlayColor }]}
+          pointerEvents="none"
+        />
+      )}
       <FocusedStyleProvider focused={isFocused || isActive}>
         {component.components?.length ? (
           component.components.map((child: TComponent, i: number) => (
@@ -163,10 +183,21 @@ export const NamiSegmentPickerItem: React.FC<Props> = ({
         ) : (
           <Text
             style={[
-              textStyles(merged, scaleFactor, isFocused || isActive),
-              isActive && {
+              // Base text style uses active/inactive merged props; isFocused=false here
+              // so we can apply focused font color separately with correct precedence.
+              textStyles(merged, scaleFactor, false),
+              // Active font color — overrides base when isActive and not focused.
+              !isFocused && isActive && {
                 color: parseColor(activeStyles.fontColor ?? activeStyles.textColor ?? component.selectedFontColor) ?? '#fff',
               },
+              // NAM-1213 CTV: focused font color wins over active/inactive (design doc §2).
+              focusEnabled && isFocused && {
+                color: parseColor(component.focusedFontColor)
+                  ?? parseColor(isActive
+                    ? (activeStyles.fontColor ?? activeStyles.textColor ?? component.selectedFontColor)
+                    : (inactiveStyles.fontColor ?? inactiveStyles.textColor))
+                  ?? undefined,
+              },
             ]}
             allowFontScaling={false}
           >