diff --git a/.changeset/calm-zones-focus.md b/.changeset/calm-zones-focus.md
new file mode 100644
index 00000000000..a2961d3090f
--- /dev/null
+++ b/.changeset/calm-zones-focus.md
@@ -0,0 +1,5 @@
+---
+'@fluentui-react-native/focus-zone': patch
+---
+
+Convert FocusZone to an unstyled phased primitive and add package-owned macOS and Windows Fabric implementations alongside Paper.
diff --git a/.github/skills/agentic-storybook-development/SKILL.md b/.github/skills/agentic-storybook-development/SKILL.md
index 2a15402300a..42d8ae2dcc3 100644
--- a/.github/skills/agentic-storybook-development/SKILL.md
+++ b/.github/skills/agentic-storybook-development/SKILL.md
@@ -10,15 +10,20 @@ Work on the native Storybook application in `apps/storybook`.
 
 ## Workflow
 
-1. Read the repository `AGENTS.md`, then the
+1. Read the repository `AGENTS.md`, then the compact
+   [agent map](../../../apps/storybook/agent-map.yaml). Read the
    [Storybook instructions](../../../apps/storybook/AGENTS.md) and
-   [README](../../../apps/storybook/README.md).
+   [README](../../../apps/storybook/README.md) only as needed for the task.
 2. Inspect the Storybook `package.json` and run its declared workspace scripts; do not invent direct runner commands.
-3. Reproduce the first failure from the Storybook workspace so pnpm-linked React Native tooling resolves from the app.
+3. Use `storybook-agent` to query runtime story IDs, select stories, and sweep renderability. Reproduce the first
+   failure from the Storybook workspace so pnpm-linked React Native tooling resolves from the app.
 4. Treat native workspaces, Pods, lockfiles, generated solutions, build directories, and DerivedData as disposable
    outputs. Fix the owning manifest, Podfile, configuration, or script instead.
 5. After dependency or workaround changes, regenerate the affected native dependency source and use a clean build so
    stale output cannot produce a false success.
+   When adding a codegen-enabled workspace dependency to existing macOS Pods, the first pod install can generate its
+   spec without refreshing ReactCodegen's source list. If the clean build then reports a missing generated spec header,
+   run `pods:macos` once more before changing native configuration.
 6. Validate the JavaScript bundle and the affected native build. Run Storybook format/lint and the root build when
    manifests or shared package references changed.
 
diff --git a/apps/storybook/AGENTS.md b/apps/storybook/AGENTS.md
index 7936bf07399..a2428bda7c8 100644
--- a/apps/storybook/AGENTS.md
+++ b/apps/storybook/AGENTS.md
@@ -2,7 +2,20 @@
 
 These instructions apply to `apps/storybook` and its descendants.
 
-Read this file, `README.md`, and `package.json` before changing the Storybook application or its native projects.
+Read [`agent-map.yaml`](agent-map.yaml) first for the compact architecture, lookup, and interaction map. Read this file,
+`README.md`, `package.json`, and `storybook.config.mts` before changing the Storybook application or its native projects.
+
+## Agent-efficient discovery and interaction
+
+- Generate the platform manifest with `yarn storybook manifest --<platform>` instead of guessing IDs or searching the
+  sidebar.
+- Query and run stories through `yarn desktop-driver` against the listener started by
+  `yarn storybook driver --<platform>`.
+- Use screenshots only for visual evidence. Use WebSocket events and accessibility bounds for lookup and interaction.
+- Treat `src/storybook.requires.ts` as generated output; use `storybook.config.mts` for story package discovery and
+  `src/main.ts` only as the shared config adapter.
+- Keep `agent-map.yaml` synchronized when stable paths, scripts, services, or interaction contracts change. Do not list
+  individual stories there; the runtime index is authoritative.
 
 ## Command and dependency discipline
 
diff --git a/apps/storybook/README.md b/apps/storybook/README.md
index 7b6dedbdd25..b9b9a100fea 100644
--- a/apps/storybook/README.md
+++ b/apps/storybook/README.md
@@ -3,7 +3,8 @@
 On-device [Storybook](https://storybook.js.org/) test app (Storybook for React Native v10) for
 `@fluentui-react-native/components` and linked standalone native packages. It loads every
 `*.stories.(ts|tsx)` file from the agentic components package plus the standalone Callout
-package so its native stories run in the Fabric host.
+package. FocusZone stories are agentic primitive stories, while its standalone native package
+remains linked so they run in the Fabric and Paper hosts.
 
 The reusable desktop CLI and configuration live in
 `packages/agentic/storybook-desktop`, with peer-dependent React Native
@@ -85,8 +86,9 @@ and services, even when the default ports are already occupied.
 ## Running on Windows
 
 The Windows app also uses `react-native-test-app`. Its generated Win32 project uses React Native
-Windows 0.81's New Architecture and Fabric renderer. The Callout package is autolinked as a
-Windows Fabric native library; its Paper implementation remains built into the platform.
+Windows 0.81's New Architecture and Fabric renderer. The Callout and FocusZone packages are
+autolinked as Windows Fabric native libraries; their Paper implementations remain available on
+their supported legacy endpoints.
 
 ```powershell
 # from this directory
diff --git a/apps/storybook/agent-map.yaml b/apps/storybook/agent-map.yaml
new file mode 100644
index 00000000000..edc85a0d7f9
--- /dev/null
+++ b/apps/storybook/agent-map.yaml
@@ -0,0 +1,74 @@
+version: 1
+purpose: Agent-optimized map of stable Storybook structure and runtime discovery paths.
+
+sources:
+  config: storybook.config.mts
+  config_adapter: src/main.ts
+  app_entry: index.js
+  app_shell: src/StorybookApp.tsx
+  theme_host: src/StorybookTheme.tsx
+  shared_cli: ../../packages/agentic/storybook-desktop
+  shared_runtime: ../../packages/agentic/storybook-desktop-runtime
+  generated_requires:
+    path: src/storybook.requires.ts
+    policy: generated-do-not-edit
+  story_packages:
+    - '@fluentui-react-native/components'
+    - '@fluentui-react-native/callout'
+
+services:
+  supervisor:
+    command: yarn storybook driver --<platform>
+    owns:
+      - metro
+      - storybook-channel
+      - desktop-driver
+  instance:
+    command: yarn storybook instance --<platform>
+    policy: use-reported-ports-and-target-id
+
+agent_commands:
+  generate_manifest: yarn storybook manifest --<platform>
+  start_driver: yarn storybook driver --<platform>
+  inspect_instance: yarn storybook instance --<platform>
+  list_stories: yarn desktop-driver stories list --url <driver-url> --target <target-id>
+  run_stories: yarn desktop-driver stories run --url <driver-url> --target <target-id> --tag desktop-e2e
+
+lookup_order:
+  - Generate the exact platform manifest; never guess ID slugging.
+  - Read this map for stable paths, services, and commands.
+  - Read storybook.config.mts for story-package and platform changes.
+  - Read a matched story file for component-specific behavior.
+  - Read generated requires only to diagnose generation output.
+
+interaction_order:
+  - Use the desktop-driver JSON CLI for listing and running authored story plans.
+  - Use accessibility elements for native focus and control state.
+  - Use screenshots for visual evidence, not element lookup.
+
+native:
+  macos:
+    process: ReactTestApp
+    app_bundle: macos/DerivedData/Build/Products/Debug/ReactTestApp.app
+    coordinate_notes:
+      accessibility: logical-points
+      screenshots: backing-pixels
+      rule: Query element bounds and display scale; do not copy screenshot coordinates.
+  windows:
+    project_policy: generated
+    generation_command: yarn storybook prep --windows
+
+validation:
+  javascript:
+    - format
+    - lint
+    - yarn storybook manifest --<platform>
+    - yarn storybook bundle --<platform>
+  native:
+    normal: yarn storybook build --<platform>
+    lifecycle: yarn storybook smoke --<platform> --mode stories-and-tests
+
+output_hygiene:
+  - Use structured CLI output instead of logging raw channel events.
+  - Search large native build logs for errors and final status instead of reading them in full.
+  - Keep warning suppression exact; console diagnostics remain available even when LogBox hides a warning.
diff --git a/apps/storybook/index.js b/apps/storybook/index.js
index 3003e18cb20..4c0970bebb2 100644
--- a/apps/storybook/index.js
+++ b/apps/storybook/index.js
@@ -1,5 +1,12 @@
-import { AppRegistry } from 'react-native';
+import { AppRegistry, LogBox } from 'react-native';
 import StorybookApp from './src/StorybookApp';
 import { name as appName } from './app.json';
 
+LogBox.ignoreLogs([
+  // The supported React Native peer floor predates the public root codegen exports.
+  /^Deep imports from the 'react-native' package are deprecated \('react-native\/Libraries\/Utilities\/codegenNative(?:Commands|Component)'\)\./,
+  // Storybook's sidebar expands its LegendList pool on demand without affecting rendering.
+  '[legend-list] No unused container available, so creating one on demand.',
+]);
+
 AppRegistry.registerComponent(appName, () => StorybookApp);
diff --git a/packages/agentic/components/AGENTS.md b/packages/agentic/components/AGENTS.md
index 72526f95a51..7a5ede82eb2 100644
--- a/packages/agentic/components/AGENTS.md
+++ b/packages/agentic/components/AGENTS.md
@@ -12,8 +12,8 @@ invariants; detailed authoring recipes live in the
 - Portable desktop story tests are static `parameters.desktopDriver` plans.
   Use the public authoring types, stable `testID` selectors, declarative
   capability requirements, and no platform branches or executable callbacks.
-- Storybook application, native project, Metro, bundle, or CocoaPods work follows `storybook/AGENTS.md` and the
-  `agentic-storybook-development` skill.
+- Storybook application, native project, Metro, bundle, or CocoaPods work follows the
+  [Storybook instructions](../../../apps/storybook/AGENTS.md) and the `agentic-storybook-development` skill.
 - Native React Native Windows Fabric component work follows the
   [Windows Fabric native component reference](../../../.github/skills/agentic-component-authoring/references/windows-fabric-native-components.md).
 
diff --git a/packages/agentic/components/package.json b/packages/agentic/components/package.json
index 6d2ab79f66f..9af12fdb2df 100644
--- a/packages/agentic/components/package.json
+++ b/packages/agentic/components/package.json
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@babel/core": "catalog:",
     "@fluentui-react-native/desktop-driver": "workspace:*",
+    "@fluentui-react-native/focus-zone": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "@react-native-community/cli": "^20.0.0",
     "@react-native-community/cli-platform-android": "^20.0.0",
diff --git a/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx b/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
new file mode 100644
index 00000000000..295f2d1340a
--- /dev/null
+++ b/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
@@ -0,0 +1,317 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import * as React from 'react';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import { FocusZone } from '@fluentui-react-native/focus-zone';
+import type { FocusZoneDirection, FocusZoneProps, FocusZoneTabNavigation } from '@fluentui-react-native/focus-zone';
+import type { Meta, StoryObj } from '@storybook/react-native';
+
+import { Button } from '../../components/button/button';
+
+const defaultTabbableNativeID = 'focus-zone-default-item';
+const directions: readonly FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
+const tabNavigationModes: readonly FocusZoneTabNavigation[] = ['None', 'NavigateWrap', 'NavigateStopAtEnds', 'Normal'];
+
+const styles = StyleSheet.create({
+  focusButton: {
+    marginTop: 16,
+  },
+  focused: {
+    borderColor: '#0f6cbd',
+    borderWidth: 3,
+  },
+  focusZone: {
+    marginVertical: 12,
+  },
+  grid: {
+    alignItems: 'center',
+  },
+  gridRow: {
+    flexDirection: 'row',
+  },
+  item: {
+    height: 64,
+    margin: 4,
+    width: 104,
+  },
+  itemText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  outsideButton: {
+    marginVertical: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  status: {
+    marginTop: 12,
+  },
+  story: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 420,
+    padding: 24,
+    width: 520,
+  },
+});
+
+type FocusZoneStoryButtonProps = {
+  content: string;
+  focused: boolean;
+  nativeID?: string;
+  onFocus: () => void;
+  style: StyleProp<ViewStyle>;
+  testID: string;
+};
+
+const FocusZoneStoryButton = ({ content, focused, nativeID, onFocus, style, testID }: FocusZoneStoryButtonProps) => {
+  const localRef = React.useRef<View>(null);
+
+  if (Platform.OS === 'macos') {
+    return (
+      <Pressable
+        accessibilityLabel={content}
+        accessibilityRole="button"
+        focusable
+        nativeID={nativeID}
+        onFocus={onFocus}
+        onPress={() => localRef.current?.focus()}
+        ref={localRef}
+        style={({ pressed }) => [style, focused && styles.focused, pressed && styles.pressed]}
+        testID={testID}
+      >
+        <Text style={styles.itemText}>{content}</Text>
+      </Pressable>
+    );
+  }
+
+  return <Button accessibilityLabel={content} content={content} nativeID={nativeID} onFocus={onFocus} style={style} testID={testID} />;
+};
+
+type FocusZoneExampleProps = FocusZoneProps & {
+  columns?: number;
+  defaultToCenter?: boolean;
+  itemCount?: number;
+};
+
+const FocusZoneExample = ({ columns = 3, defaultToCenter = false, itemCount = 9, ...props }: FocusZoneExampleProps) => {
+  const focusZoneRef = React.useRef<View>(null);
+  const [focusedItem, setFocusedItem] = React.useState('Outside before');
+  const items = Array.from({ length: itemCount }, (_, index) => index + 1);
+  const centerIndex = Math.floor(itemCount / 2);
+  const rows = Array.from({ length: Math.ceil(itemCount / columns) }, (_, rowIndex) =>
+    items.slice(rowIndex * columns, (rowIndex + 1) * columns),
+  );
+
+  return (
+    <View style={styles.story} testID="focus-zone-story">
+      <FocusZoneStoryButton
+        content="Outside before"
+        focused={focusedItem === 'Outside before'}
+        onFocus={() => setFocusedItem('Outside before')}
+        style={styles.outsideButton}
+        testID="focus-zone-before"
+      />
+      <FocusZone
+        {...props}
+        componentRef={focusZoneRef}
+        defaultTabbableElement={defaultToCenter ? defaultTabbableNativeID : undefined}
+        style={styles.focusZone}
+        testID="focus-zone-root"
+      >
+        <View style={styles.grid}>
+          {rows.map((row, rowIndex) => (
+            <View key={rowIndex} style={styles.gridRow}>
+              {row.map((item) => {
+                const index = item - 1;
+                return (
+                  <FocusZoneStoryButton
+                    content={String(item)}
+                    focused={focusedItem === `Item ${item}`}
+                    key={item}
+                    nativeID={index === centerIndex ? defaultTabbableNativeID : undefined}
+                    onFocus={() => setFocusedItem(`Item ${item}`)}
+                    style={styles.item}
+                    testID={`focus-zone-item-${item}`}
+                  />
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      </FocusZone>
+      <FocusZoneStoryButton
+        content="Outside after"
+        focused={focusedItem === 'Outside after'}
+        onFocus={() => setFocusedItem('Outside after')}
+        style={styles.outsideButton}
+        testID="focus-zone-after"
+      />
+      <Button content="Focus the zone" onPress={() => focusZoneRef.current?.focus()} style={styles.focusButton} />
+      <Text accessibilityLiveRegion="polite" style={styles.status} testID="focus-zone-status">
+        Focused: {focusedItem}
+      </Text>
+    </View>
+  );
+};
+
+const meta: Meta<typeof FocusZone> = {
+  title: 'Native/FocusZone',
+  component: FocusZone,
+  args: {
+    disabled: false,
+    focusZoneDirection: 'bidirectional',
+    isCircularNavigation: false,
+    navigationOrderInRenderOrder: false,
+    tabKeyNavigation: 'None',
+    use2DNavigation: false,
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    focusZoneDirection: { control: 'select', options: directions },
+    isCircularNavigation: { control: 'boolean' },
+    navigationOrderInRenderOrder: { control: 'boolean' },
+    tabKeyNavigation: { control: 'select', options: tabNavigationModes },
+    use2DNavigation: { control: 'boolean' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FocusZone is an unstyled native primitive that coordinates directional and Tab keyboard navigation among focusable descendants.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FocusZone>;
+
+export const Default: Story = {
+  tags: ['desktop-e2e'],
+  render: (args) => <FocusZoneExample {...args} />,
+  parameters: {
+    desktopDriver: {
+      version: 1,
+      tests: [
+        {
+          id: 'linear-navigation-and-tab-exit',
+          title: 'Performs linear navigation and exits on Tab',
+          platforms: ['windows'],
+          requires: ['focus', 'keyboard'],
+          steps: [
+            { action: 'click', target: { testId: 'focus-zone-item-1' } },
+            { expect: { state: 'focused', target: { testId: 'focus-zone-item-1' }, value: true } },
+            { action: 'keys', value: ['\uE014'] },
+            { expect: { state: 'focused', target: { testId: 'focus-zone-item-2' }, value: true } },
+            { action: 'keys', value: ['\uE015'] },
+            { expect: { state: 'focused', target: { testId: 'focus-zone-item-3' }, value: true } },
+            { action: 'keys', value: ['\uE004'] },
+            { expect: { state: 'focused', target: { testId: 'focus-zone-after' }, value: true } },
+          ],
+        },
+      ],
+    } satisfies DesktopStoryTests,
+    docs: {
+      description: {
+        story: 'Focus an item, then use the arrow keys to move through the grid and Tab to leave the zone.',
+      },
+    },
+  },
+};
+
+export const CircularNavigation: Story = {
+  args: {
+    focusZoneDirection: 'horizontal',
+    isCircularNavigation: true,
+  },
+  render: (args) => <FocusZoneExample {...args} columns={5} itemCount={5} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Horizontal arrow navigation wraps from the first and last items.',
+      },
+    },
+  },
+};
+
+export const TwoDimensionalNavigation: Story = {
+  tags: ['desktop-e2e'],
+  args: {
+    use2DNavigation: true,
+  },
+  render: (args) => <FocusZoneExample {...args} />,
+  parameters: {
+    desktopDriver: {
+      version: 1,
+      tests: [
+        {
+          id: 'geometric-navigation',
+          title: 'Performs geometric two-dimensional navigation',
+          platforms: ['windows'],
+          requires: ['focus', 'keyboard'],
+          steps: [
+            { action: 'click', target: { testId: 'focus-zone-item-1' } },
+            { expect: { state: 'focused', target: { testId: 'focus-zone-item-1' }, value: true } },
+            { action: 'keys', value: ['\uE015'] },
+            { expect: { state: 'focused', target: { testId: 'focus-zone-item-4' }, value: true } },
+          ],
+        },
+      ],
+    } satisfies DesktopStoryTests,
+    docs: {
+      description: {
+        story: 'Geometric navigation moves vertically between rows and horizontally within each row.',
+      },
+    },
+  },
+};
+
+export const DefaultTabbableElement: Story = {
+  render: (args) => <FocusZoneExample {...args} defaultToCenter />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The Focus the zone action sends focus to the center item through defaultTabbableElement.',
+      },
+    },
+  },
+};
+
+export const TabNavigation: Story = {
+  args: {
+    accessibilityRole: 'group',
+    accessible: true,
+    focusZoneDirection: 'horizontal',
+    navigationOrderInRenderOrder: true,
+    tabKeyNavigation: 'NavigateWrap',
+  },
+  render: (args) => <FocusZoneExample {...args} columns={5} itemCount={5} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tab and Shift+Tab move within the zone and wrap at its ends.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => <FocusZoneExample {...args} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A disabled FocusZone leaves keyboard navigation to the platform responder chain.',
+      },
+    },
+  },
+};
diff --git a/packages/agentic/components/tsconfig.json b/packages/agentic/components/tsconfig.json
index b39bacc96bb..eb91f241432 100644
--- a/packages/agentic/components/tsconfig.json
+++ b/packages/agentic/components/tsconfig.json
@@ -18,6 +18,9 @@
     {
       "path": "../desktop-driver/tsconfig.json"
     },
+    {
+      "path": "../../components/FocusZone/tsconfig.json"
+    },
     {
       "path": "../../framework-base/tsconfig.json"
     },
diff --git a/packages/components/FocusZone/RCTFocusZone.podspec b/packages/components/FocusZone/RCTFocusZone.podspec
index e94f1268633..13ae57174eb 100644
--- a/packages/components/FocusZone/RCTFocusZone.podspec
+++ b/packages/components/FocusZone/RCTFocusZone.podspec
@@ -17,5 +17,5 @@ Pod::Spec.new do |s|
   s.osx.deployment_target = "10.15"
   s.osx.source_files      = "macos/*.{swift,h,m,mm}"
 
-  s.dependency 'React'
+  install_modules_dependencies(s)
 end
diff --git a/packages/components/FocusZone/SPEC.md b/packages/components/FocusZone/SPEC.md
new file mode 100644
index 00000000000..1b2fee24664
--- /dev/null
+++ b/packages/components/FocusZone/SPEC.md
@@ -0,0 +1,42 @@
+# FocusZone
+
+## Purpose
+
+FocusZone is an unstyled native primitive that coordinates directional and Tab
+keyboard navigation among focusable descendants. It remains a standalone package
+because it owns native macOS code and CocoaPods integration.
+
+## Contract
+
+- `FocusZoneProps` extends React Native `ViewProps` with directional, circular,
+  Tab, disabled, and default-tabbable-element behavior.
+- `defaultTabbableElement` accepts a React component ref or registered native
+  identifier.
+- `componentRef` exposes the native view, including its `focus()` method.
+- Children, accessibility props, test props, native events, and caller styles are
+  forwarded without theme tokens or appearance defaults.
+- `isCircularNavigation` maps to the native `NavigateWrap` end behavior; otherwise
+  navigation stops at the ends.
+
+## Platform behavior
+
+- macOS includes both the existing Paper view manager and a package-owned Fabric
+  component view. Both reuse the same `RCTFocusZone` navigation implementation.
+- Windows includes a package-owned Fabric component view that coordinates
+  directional, Home/End, Tab, and focus-restoration behavior through RNW
+  `ComponentView` focus APIs.
+- Win32 continues to use its platform-provided native FocusZone implementation.
+- Unsupported behavior remains platform-defined rather than being simulated in
+  JavaScript.
+
+## Compatibility
+
+`FocusZoneState`, `FocusZoneTokens`, `FocusZoneSlotProps`,
+`FocusZoneRenderData`, and `FocusZoneType` remain as deprecated compatibility
+types.
+
+## Demonstration
+
+Interactive directional, circular, Tab, disabled, and default-focus scenarios
+live with the agentic primitive stories in
+`packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx`.
diff --git a/packages/components/FocusZone/macos/RCTFocusZone.m b/packages/components/FocusZone/macos/RCTFocusZone.m
index 5aea248535e..e3582553848 100644
--- a/packages/components/FocusZone/macos/RCTFocusZone.m
+++ b/packages/components/FocusZone/macos/RCTFocusZone.m
@@ -21,6 +21,20 @@
 
 @implementation RCTFocusZone
 
+static NSView *GetFocusableView(NSView *view)
+{
+	if (![view acceptsFirstResponder]) {
+		return nil;
+	}
+
+	if ([view isKindOfClass:[RCTBaseTextInputView class]]) {
+		RCTUIView *backedTextInputView = [(RCTBaseTextInputView *)view backedTextInputView];
+		return [backedTextInputView acceptsFirstResponder] ? backedTextInputView : nil;
+	}
+
+	return view;
+}
+
 static inline CGFloat GetDistanceBetweenPoints(NSPoint point1, NSPoint point2)
 {
 	NSPoint delta = NSMakePoint(point1.x - point2.x, point1.y - point2.y);
@@ -55,21 +69,15 @@ static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSP
 /// This function does not take into account the geometric position of the view.
 static NSView *GetFirstFocusableViewWithin(NSView *parentView)
 {
-    if ([[parentView subviews] count] < 1)
-    {
-        return nil;
-    }
+	if ([[parentView subviews] count] < 1)
+	{
+		return nil;
+	}
 
 	for (NSView *view in [parentView subviews]) {
-		if ([view acceptsFirstResponder]) {
-			if ([view isKindOfClass:[RCTBaseTextInputView class]]) {
-				RCTUIView *backedTextInputView = [(RCTBaseTextInputView *)view backedTextInputView];
-				if ([backedTextInputView acceptsFirstResponder]) {
-					return backedTextInputView;
-				}
-			} else {
-				return view;
-			}
+		NSView *focusableView = GetFocusableView(view);
+		if (focusableView) {
+			return focusableView;
 		}
 
 		NSView *match = GetFirstFocusableViewWithin(view);
@@ -86,8 +94,9 @@ static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSP
 static NSView *GetLastFocusableViewWithin(NSView *parentView)
 {
 	for (NSView *view in [[parentView subviews] reverseObjectEnumerator]) {
-		if ([view acceptsFirstResponder]) {
-			return view;
+		NSView *focusableView = GetFocusableView(view);
+		if (focusableView) {
+			return focusableView;
 		}
 
 		NSView *match = GetLastFocusableViewWithin(view);
@@ -98,6 +107,18 @@ static inline CGFloat GetMinDistanceBetweenRectVerticesAndPoint(NSRect rect, NSP
 	return nil;
 }
 
+static void AppendFocusableViewsWithin(NSView *parentView, NSMutableArray<NSView *> *focusableViews)
+{
+	for (NSView *view in [parentView subviews]) {
+		NSView *focusableView = GetFocusableView(view);
+		if (focusableView) {
+			[focusableViews addObject:focusableView];
+		} else {
+			AppendFocusableViewsWithin(view, focusableViews);
+		}
+	}
+}
+
 static NSView *GetFirstResponder(NSWindow *window)
 {
 	NSResponder *responder = [window firstResponder];
@@ -533,6 +554,32 @@ - (NSView *)nextViewToFocusOutsideZone:(FocusZoneAction)action
 	return nextViewToFocus;
 }
 
+- (NSView *)nextViewToFocusInHierarchyForAction:(FocusZoneAction)action
+{
+	NSMutableArray<NSView *> *focusableViews = [NSMutableArray array];
+	AppendFocusableViewsWithin(self, focusableViews);
+
+	NSView *firstResponder = GetFirstResponder([self window]);
+	NSUInteger currentIndex = [focusableViews indexOfObjectPassingTest:^BOOL(NSView *candidateView, NSUInteger index, BOOL *stop) {
+		return candidateView == firstResponder
+			|| [candidateView isDescendantOf:firstResponder]
+			|| [firstResponder isDescendantOf:candidateView];
+	}];
+	if (currentIndex == NSNotFound) {
+		return nil;
+	}
+
+	BOOL forward = action != FocusZoneActionShiftTab;
+	if (forward && currentIndex + 1 < [focusableViews count]) {
+		return focusableViews[currentIndex + 1];
+	}
+	if (!forward && currentIndex > 0) {
+		return focusableViews[currentIndex - 1];
+	}
+
+	return nil;
+}
+
 - (NSView *)nextViewToFocusForTab:(FocusZoneAction)action
 {
 	[[self window] recalculateKeyViewLoop];
@@ -551,7 +598,15 @@ - (NSView *)nextViewToFocusForTab:(FocusZoneAction)action
 	if (nextViewToFocus == self)
 		nextViewToFocus = forward ? [nextViewToFocus nextValidKeyView] : [nextViewToFocus previousValidKeyView];;
 
-	if ([@"Normal" isEqual:tabKeyNavigation] || [nextViewToFocus isDescendantOf:self])
+	if ([nextViewToFocus isDescendantOf:self])
+		return nextViewToFocus;
+
+	// AppKit can collapse a Fabric-backed FocusZone to one key-loop entry.
+	NSView *hierarchyViewToFocus = [self nextViewToFocusInHierarchyForAction:action];
+	if (hierarchyViewToFocus != nil)
+		return hierarchyViewToFocus;
+
+	if ([@"Normal" isEqual:tabKeyNavigation])
 		return nextViewToFocus;
 
 	if ([@"NavigateStopAtEnds" isEqual:tabKeyNavigation])
@@ -565,7 +620,11 @@ - (NSView *)nextViewToFocusForTab:(FocusZoneAction)action
 		aView = forward ? [aView previousValidKeyView] : [aView nextValidKeyView];
 	}
 
-	return nextViewToFocus != firstResponder ? nextViewToFocus : nil;
+	if (nextViewToFocus != firstResponder)
+		return nextViewToFocus;
+
+	NSView *wrapView = forward ? GetFirstFocusableViewWithin(self) : GetLastFocusableViewWithin(self);
+	return wrapView != firstResponder ? wrapView : nil;
 }
 
 - (BOOL)isFlipped
diff --git a/packages/components/FocusZone/macos/RCTFocusZoneComponentView.h b/packages/components/FocusZone/macos/RCTFocusZoneComponentView.h
new file mode 100644
index 00000000000..2070528cd01
--- /dev/null
+++ b/packages/components/FocusZone/macos/RCTFocusZoneComponentView.h
@@ -0,0 +1,14 @@
+#pragma once
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTFocusZoneComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif
diff --git a/packages/components/FocusZone/macos/RCTFocusZoneComponentView.mm b/packages/components/FocusZone/macos/RCTFocusZoneComponentView.mm
new file mode 100644
index 00000000000..2905eb6fbb7
--- /dev/null
+++ b/packages/components/FocusZone/macos/RCTFocusZoneComponentView.mm
@@ -0,0 +1,201 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "RCTFocusZoneComponentView.h"
+
+#import <react/renderer/components/FRNFocusZoneSpec/ComponentDescriptors.h>
+#import <react/renderer/components/FRNFocusZoneSpec/EventEmitters.h>
+#import <react/renderer/components/FRNFocusZoneSpec/Props.h>
+#import <react/renderer/components/FRNFocusZoneSpec/RCTComponentViewHelpers.h>
+
+#import <React/RCTComponentViewProtocol.h>
+
+#import "RCTFocusZone.h"
+
+using namespace facebook::react;
+
+static FocusZoneDirection RCTFocusZoneDirectionFromProp(FocusZoneFocusZoneDirection direction)
+{
+  switch (direction) {
+    case FocusZoneFocusZoneDirection::Bidirectional:
+      return FocusZoneDirectionBidirectional;
+    case FocusZoneFocusZoneDirection::Horizontal:
+      return FocusZoneDirectionHorizontal;
+    case FocusZoneFocusZoneDirection::Vertical:
+      return FocusZoneDirectionVertical;
+    case FocusZoneFocusZoneDirection::None:
+      return FocusZoneDirectionNone;
+  }
+}
+
+static NSString *RCTNavigateAtEndFromProp(FocusZoneNavigateAtEnd navigateAtEnd)
+{
+  switch (navigateAtEnd) {
+    case FocusZoneNavigateAtEnd::NavigateStopAtEnds:
+      return @"NavigateStopAtEnds";
+    case FocusZoneNavigateAtEnd::NavigateWrap:
+      return @"NavigateWrap";
+    case FocusZoneNavigateAtEnd::NavigateContinue:
+      return @"NavigateContinue";
+  }
+}
+
+static NSString *RCTTabKeyNavigationFromProp(FocusZoneTabKeyNavigation tabKeyNavigation)
+{
+  switch (tabKeyNavigation) {
+    case FocusZoneTabKeyNavigation::None:
+      return @"None";
+    case FocusZoneTabKeyNavigation::NavigateWrap:
+      return @"NavigateWrap";
+    case FocusZoneTabKeyNavigation::NavigateStopAtEnds:
+      return @"NavigateStopAtEnds";
+    case FocusZoneTabKeyNavigation::Normal:
+      return @"Normal";
+  }
+}
+
+static RCTPlatformView *RCTFindComponentViewWithTag(RCTPlatformView *rootView, NSInteger tag)
+{
+  if ([rootView conformsToProtocol:@protocol(RCTComponentViewProtocol)] &&
+      [((id<RCTComponentViewProtocol>)rootView).reactTag integerValue] == tag) {
+    return rootView;
+  }
+
+  for (RCTPlatformView *subview in rootView.subviews) {
+    RCTPlatformView *match = RCTFindComponentViewWithTag(subview, tag);
+    if (match) {
+      return match;
+    }
+  }
+
+  return nil;
+}
+
+static RCTPlatformView *RCTFindComponentViewWithNativeID(RCTPlatformView *rootView, NSString *nativeID)
+{
+  if ([rootView isKindOfClass:[RCTViewComponentView class]] &&
+      [((RCTViewComponentView *)rootView).nativeId isEqualToString:nativeID]) {
+    return rootView;
+  }
+
+  for (RCTPlatformView *subview in rootView.subviews) {
+    RCTPlatformView *match = RCTFindComponentViewWithNativeID(subview, nativeID);
+    if (match) {
+      return match;
+    }
+  }
+
+  return nil;
+}
+
+@interface RCTFocusZoneComponentView () <RCTFocusZoneViewProtocol>
+@end
+
+@implementation RCTFocusZoneComponentView {
+  NSString *_defaultResponderNativeID;
+  NSInteger _defaultResponderTag;
+  RCTFocusZone *_focusZone;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  // Fabric normalizes the legacy RCT-prefixed view name before component lookup.
+  return concreteComponentDescriptorProvider<FocusZoneComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const FocusZoneProps>();
+    _props = defaultProps;
+
+    _focusZone = [[RCTFocusZone alloc] initWithFrame:self.bounds];
+    self.contentView = _focusZone;
+  }
+  return self;
+}
+
+- (NSView *)accessibilityElement
+{
+  return _focusZone;
+}
+
+- (void)mountChildComponentView:(RCTUIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_focusZone insertSubview:childComponentView atIndex:index];
+  [self updateDefaultResponder];
+}
+
+- (void)unmountChildComponentView:(RCTUIView<RCTComponentViewProtocol> *)childComponentView index:(__unused NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+  [self updateDefaultResponder];
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<const FocusZoneProps>(props);
+
+  _focusZone.disabled = newProps.disabled;
+  _focusZone.focusZoneDirection = RCTFocusZoneDirectionFromProp(newProps.focusZoneDirection);
+  _focusZone.navigateAtEnd = RCTNavigateAtEndFromProp(newProps.navigateAtEnd);
+  _focusZone.navigationOrderInRenderOrder = newProps.navigationOrderInRenderOrder;
+  _focusZone.tabKeyNavigation = RCTTabKeyNavigationFromProp(newProps.tabKeyNavigation);
+
+  _defaultResponderNativeID = nil;
+  _defaultResponderTag = 0;
+  if (newProps.defaultTabbableElement.isNumber()) {
+    _defaultResponderTag = (NSInteger)newProps.defaultTabbableElement.asDouble();
+  } else if (newProps.defaultTabbableElement.isString()) {
+    _defaultResponderNativeID = [NSString stringWithUTF8String:newProps.defaultTabbableElement.getString().c_str()];
+  }
+  [self updateDefaultResponder];
+  [self.window recalculateKeyViewLoop];
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)viewDidMoveToWindow
+{
+  [super viewDidMoveToWindow];
+  [self updateDefaultResponder];
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  _defaultResponderNativeID = nil;
+  _defaultResponderTag = 0;
+  _focusZone.defaultResponder = nil;
+}
+
+- (BOOL)acceptsFirstResponder
+{
+  // The content view owns key-loop participation; the Fabric wrapper only forwards programmatic focus.
+  return NO;
+}
+
+- (BOOL)becomeFirstResponder
+{
+  return [_focusZone becomeFirstResponder];
+}
+
+- (void)keyDown:(NSEvent *)event
+{
+  [_focusZone keyDown:event];
+}
+
+- (void)updateDefaultResponder
+{
+  RCTPlatformView *rootView = self.window.contentView;
+  if (_defaultResponderTag > 0 && rootView) {
+    _focusZone.defaultResponder = RCTFindComponentViewWithTag(rootView, _defaultResponderTag);
+  } else if (_defaultResponderNativeID && rootView) {
+    _focusZone.defaultResponder = RCTFindComponentViewWithNativeID(rootView, _defaultResponderNativeID);
+  } else {
+    _focusZone.defaultResponder = nil;
+  }
+}
+
+@end
+
+#endif
diff --git a/packages/components/FocusZone/package.json b/packages/components/FocusZone/package.json
index 4245275a1fa..cb662b17beb 100644
--- a/packages/components/FocusZone/package.json
+++ b/packages/components/FocusZone/package.json
@@ -30,28 +30,27 @@
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/interactive-hooks": "workspace:*",
-    "@uifabricshared/foundation-composable": "workspace:*",
-    "@uifabricshared/foundation-settings": "workspace:*"
+    "@fluentui-react-native/framework-base": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "catalog:",
+    "@fluentui-react-native/desktop-driver": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "@office-iss/react-native-win32": "^0.81.8",
     "@react-native-community/cli": "^20.0.0",
     "@react-native-community/cli-platform-android": "^20.0.0",
     "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
-    "@react-native/metro-babel-transformer": "^0.81.0",
     "@react-native/metro-config": "^0.81.0",
+    "@testing-library/react-native": "catalog:",
     "@types/react": "~19.1.4",
     "@types/react-test-renderer": "^19.1.0",
     "react": "19.1.4",
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-windows": "^0.81.0",
-    "react-test-renderer": "19.1.4"
+    "react-test-renderer": "19.1.4",
+    "test-renderer": "catalog:"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0 || ^0.81.0",
@@ -75,9 +74,32 @@
       "optional": true
     }
   },
+  "codegenConfig": {
+    "name": "FRNFocusZoneSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "ios": {
+      "componentProvider": {
+        "FocusZone": "RCTFocusZoneComponentView"
+      }
+    },
+    "windows": {
+      "generators": "componentsWindows",
+      "namespace": "FRNFocusZoneCodegen",
+      "outputDirectory": "windows/FRNFocusZone/codegen",
+      "separateDataTypes": true
+    }
+  },
   "furn": {
     "jestPlatform": "win32"
   },
+  "react-native-windows": {
+    "init-windows": {
+      "name": "FRNFocusZone",
+      "namespace": "FRNFocusZone",
+      "template": "cpp-lib"
+    }
+  },
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
@@ -88,7 +110,6 @@
         "core-ios",
         "core-macos",
         "core-windows",
-        "metro-react-native-babel-transformer",
         "react",
         "react-test-renderer"
       ]
diff --git a/packages/components/FocusZone/react-native.config.cjs b/packages/components/FocusZone/react-native.config.cjs
new file mode 100644
index 00000000000..e6858db4296
--- /dev/null
+++ b/packages/components/FocusZone/react-native.config.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      windows: {
+        sourceDir: 'windows',
+        projects: [
+          {
+            projectFile: 'FRNFocusZone/FRNFocusZone.vcxproj',
+            directDependency: true,
+          },
+        ],
+      },
+    },
+  },
+};
diff --git a/packages/components/FocusZone/src/FocusZone.ts b/packages/components/FocusZone/src/FocusZone.ts
deleted file mode 100644
index 24d4d3886c9..00000000000
--- a/packages/components/FocusZone/src/FocusZone.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-
-import * as React from 'react';
-import { findNodeHandle } from 'react-native';
-
-import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks';
-import type { IUseStyling } from '@uifabricshared/foundation-composable';
-import { composable } from '@uifabricshared/foundation-composable';
-import { mergeSettings } from '@uifabricshared/foundation-settings';
-
-import type { FocusZoneProps, FocusZoneSlotProps, FocusZoneType } from './FocusZone.types';
-import RCTFocusZone from './FocusZoneNativeComponent';
-
-const filterOutComponentRef = <T>(props: T): T => {
-  if (props && typeof props === 'object' && 'componentRef' in props) {
-    const { componentRef: _componentRef, ...rest } = props as Record<string, unknown>;
-    return rest as T;
-  }
-  return props;
-};
-
-export const FocusZone = composable<FocusZoneType>({
-  usePrepareProps: (userProps: FocusZoneProps, useStyling: IUseStyling<FocusZoneType>) => {
-    const { componentRef, defaultTabbableElement, isCircularNavigation, ...rest } = userProps;
-
-    const ftzRef = useViewCommandFocus(componentRef);
-
-    const [targetFirstFocus, setTargetFirstFocus] = React.useState<number | string>(undefined);
-    React.useLayoutEffect(() => {
-      if (typeof defaultTabbableElement === 'string') {
-        setTargetFirstFocus(defaultTabbableElement);
-      } else if (defaultTabbableElement?.current) {
-        setTargetFirstFocus(findNodeHandle(defaultTabbableElement.current));
-      } else {
-        setTargetFirstFocus(undefined);
-      }
-    }, [defaultTabbableElement]);
-
-    return {
-      slotProps: mergeSettings<FocusZoneSlotProps>(useStyling(userProps), {
-        root: {
-          navigateAtEnd: isCircularNavigation ? 'NavigateWrap' : 'NavigateStopAtEnds', // let rest override
-          ...rest,
-          defaultTabbableElement: targetFirstFocus,
-          ref: ftzRef,
-        },
-      }),
-    };
-  },
-  slots: {
-    root: { slotType: RCTFocusZone, filter: filterOutComponentRef },
-  },
-});
diff --git a/packages/components/FocusZone/src/FocusZone.tsx b/packages/components/FocusZone/src/FocusZone.tsx
new file mode 100644
index 00000000000..bee92de2e98
--- /dev/null
+++ b/packages/components/FocusZone/src/FocusZone.tsx
@@ -0,0 +1,47 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import * as React from 'react';
+import { findNodeHandle } from 'react-native';
+
+import { directComponent, mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';
+
+import type { FocusZoneProps } from './FocusZone.types';
+import { focusZoneName } from './FocusZone.types';
+import NativeFocusZone from './FocusZoneNativeComponent';
+
+/**
+ * Renders the native FocusZone without applying theme or appearance defaults.
+ */
+export const FocusZone = phasedComponent<FocusZoneProps>((props) => {
+  const { defaultTabbableElement } = props;
+  const [nativeDefaultTabbableElement, setNativeDefaultTabbableElement] = React.useState<number | string>();
+
+  React.useLayoutEffect(() => {
+    if (typeof defaultTabbableElement === 'string') {
+      setNativeDefaultTabbableElement(defaultTabbableElement);
+    } else if (defaultTabbableElement?.current) {
+      setNativeDefaultTabbableElement(findNodeHandle(defaultTabbableElement.current) ?? undefined);
+    } else {
+      setNativeDefaultTabbableElement(undefined);
+    }
+  }, [defaultTabbableElement]);
+
+  return directComponent<FocusZoneProps>((renderProps) => {
+    const {
+      componentRef,
+      defaultTabbableElement: _defaultTabbableElement,
+      isCircularNavigation,
+      ...nativeProps
+    } = mergeProps(props, renderProps);
+
+    return (
+      <NativeFocusZone
+        {...nativeProps}
+        defaultTabbableElement={nativeDefaultTabbableElement}
+        navigateAtEnd={isCircularNavigation ? 'NavigateWrap' : 'NavigateStopAtEnds'}
+        ref={componentRef}
+      />
+    );
+  });
+});
+
+FocusZone.displayName = focusZoneName;
diff --git a/packages/components/FocusZone/src/FocusZone.types.ts b/packages/components/FocusZone/src/FocusZone.types.ts
index 55557ee46c8..418666e6998 100644
--- a/packages/components/FocusZone/src/FocusZone.types.ts
+++ b/packages/components/FocusZone/src/FocusZone.types.ts
@@ -1,25 +1,20 @@
 import type * as React from 'react';
-
-import type { IViewProps } from '@fluentui-react-native/adapters';
-import type { IFocusable } from '@fluentui-react-native/interactive-hooks';
-import type { IRenderData } from '@uifabricshared/foundation-composable';
+import type { View, ViewProps } from 'react-native';
 
 export const focusZoneName = 'FocusZone';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-type EmptyInterface = {};
-export type FocusZoneState = EmptyInterface;
+export type FocusZoneState = Record<never, never>;
 
-export type FocusZoneProps = IViewProps & {
+export interface FocusZoneProps extends ViewProps {
   /**
-   * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component.
+   * A ref to the native FocusZone view.
    */
-  componentRef?: React.RefObject<IFocusable>;
+  componentRef?: React.Ref<View>;
 
   /**
    * Optionally defines the initial tabbable element inside the FocusZone
    */
-  defaultTabbableElement?: React.RefObject<React.Component> | string;
+  defaultTabbableElement?: React.RefObject<React.Component | null> | string;
 
   /**
    ** Defines which arrows to react to
@@ -61,11 +56,6 @@ export type FocusZoneProps = IViewProps & {
    */
   tabKeyNavigation?: FocusZoneTabNavigation;
 
-  /**
-   * Callback called when “focus” event triggered in FocusZone
-   */
-  onFocus?: (e?: any) => void;
-
   /**
    * @platform macos
    * By default, the Apple KeyView loop is calculated based on the UI tree hierarchy, accessibility properties,
@@ -83,9 +73,10 @@ export type FocusZoneProps = IViewProps & {
    * of the MacOS KeyView loop mechanics.
    */
   navigationOrderInRenderOrder?: boolean;
-};
+}
 
-export interface NativeProps extends Omit<FocusZoneProps, 'isCircularNavigation'> {
+export interface NativeProps extends Omit<FocusZoneProps, 'componentRef' | 'defaultTabbableElement' | 'isCircularNavigation'> {
+  defaultTabbableElement?: number | string;
   navigateAtEnd?: NavigateAtEnd;
   tabKeyNavigation?: FocusZoneTabNavigation;
 }
@@ -107,14 +98,21 @@ export type FocusZoneTabNavigation =
   | 'NavigateStopAtEnds' /* Navigate the FZ with Tab. Stop navigation at ends */
   | 'Normal'; /* Navigate the FZ with Tab. Don't trap focus, tabbing at ends moves you out */
 
-export type FocusZoneTokens = EmptyInterface;
+/** @deprecated FocusZone is an unstyled primitive and does not resolve tokens. */
+export type FocusZoneTokens = Record<never, never>;
 
+/** @deprecated Use FocusZoneProps. */
 export interface FocusZoneSlotProps {
   root: NativeProps;
 }
 
-export type FocusZoneRenderData = IRenderData<FocusZoneSlotProps, FocusZoneState>;
+/** @deprecated FocusZone uses the phased primitive component pattern. */
+export interface FocusZoneRenderData {
+  slotProps?: FocusZoneSlotProps;
+  state?: FocusZoneState;
+}
 
+/** @deprecated Use FocusZoneProps. */
 export interface FocusZoneType {
   props: FocusZoneProps;
   tokens: FocusZoneTokens;
diff --git a/packages/components/FocusZone/src/FocusZoneNativeComponent.ts b/packages/components/FocusZone/src/FocusZoneNativeComponent.ts
index b6c7cf2ae50..daa1e39599c 100644
--- a/packages/components/FocusZone/src/FocusZoneNativeComponent.ts
+++ b/packages/components/FocusZone/src/FocusZoneNativeComponent.ts
@@ -5,11 +5,8 @@
  */
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
-import type { ViewProps } from 'react-native';
-import type { WithDefault, UnsafeMixed } from 'react-native/Libraries/Types/CodegenTypes';
-
-// Should be:
-// import type { UnsafeObject } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent, ViewProps } from 'react-native';
+import type { UnsafeMixed, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface NativeProps extends ViewProps {
   navigateAtEnd?: WithDefault<'NavigateStopAtEnds' | 'NavigateWrap' | 'NavigateContinue', 'NavigateStopAtEnds'>;
@@ -19,6 +16,11 @@ export interface NativeProps extends ViewProps {
   tabKeyNavigation?: WithDefault<'None' | 'NavigateWrap' | 'NavigateStopAtEnds' | 'Normal', 'None'>;
   disabled?: boolean;
   isTabNavigation?: boolean;
+  navigationOrderInRenderOrder?: boolean;
 }
 
-export default codegenNativeComponent<NativeProps>('RCTFocusZone');
+export type FocusZoneComponentType = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>('FocusZone', {
+  paperComponentName: 'RCTFocusZone',
+}) as FocusZoneComponentType;
diff --git a/packages/components/FocusZone/src/FocusZoneNativeComponent.win32.ts b/packages/components/FocusZone/src/FocusZoneNativeComponent.win32.ts
new file mode 100644
index 00000000000..7d83951732e
--- /dev/null
+++ b/packages/components/FocusZone/src/FocusZoneNativeComponent.win32.ts
@@ -0,0 +1,18 @@
+import { requireNativeComponent } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
+import type { UnsafeMixed, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+  navigateAtEnd?: WithDefault<'NavigateStopAtEnds' | 'NavigateWrap' | 'NavigateContinue', 'NavigateStopAtEnds'>;
+  defaultTabbableElement?: UnsafeMixed;
+  focusZoneDirection?: WithDefault<'bidirectional' | 'vertical' | 'horizontal' | 'none', 'bidirectional'>;
+  use2DNavigation?: boolean;
+  tabKeyNavigation?: WithDefault<'None' | 'NavigateWrap' | 'NavigateStopAtEnds' | 'Normal', 'None'>;
+  disabled?: boolean;
+  isTabNavigation?: boolean;
+  navigationOrderInRenderOrder?: boolean;
+}
+
+export type FocusZoneComponentType = HostComponent<NativeProps>;
+
+export default requireNativeComponent<NativeProps>('RCTFocusZone') as FocusZoneComponentType;
diff --git a/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx b/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx
index e1ef917dea2..3c780e4a62a 100644
--- a/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx
+++ b/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx
@@ -1,151 +1,124 @@
-import { act } from 'react';
-import { Button } from 'react-native';
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 
-import * as renderer from 'react-test-renderer';
+import { isPhasedComponent, useSlot } from '@fluentui-react-native/framework-base';
+import type { SlotProp } from '@fluentui-react-native/framework-base';
+import { render } from '@testing-library/react-native';
 
-import { FocusZone } from '..';
+import { FocusZone } from '../FocusZone';
 
-const onPress = () => {
-  return;
+jest.mock('react-native/Libraries/ReactNative/RendererProxy', () => ({
+  ...jest.requireActual('react-native/Libraries/ReactNative/RendererProxy'),
+  findNodeHandle: jest.fn(() => 42),
+}));
+
+type FocusZoneSlotConsumerProps = {
+  focusZone: SlotProp<typeof FocusZone>;
 };
 
-describe('FocusZone No Props', () => {
-  it('No children', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(<FocusZone />);
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
-  });
+function FocusZoneSlotConsumer({ focusZone }: FocusZoneSlotConsumerProps) {
+  const FocusZoneSlot = useSlot(FocusZone, focusZone);
+  return (
+    <FocusZoneSlot accessibilityHint="rendered as a slot" testID="slotted-focus-zone">
+      <Text>Slot content</Text>
+    </FocusZoneSlot>
+  );
+}
 
-  it('One child', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone>
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
+describe('FocusZone', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  it('Two children', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone>
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
-  });
+  it('uses phased rendering and applies no styling defaults', async () => {
+    expect(isPhasedComponent(FocusZone)).toBe(true);
 
-  it('Three children', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone>
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
+    const component = await render(<FocusZone testID="focus-zone" />);
+    const focusZone = component.getByTestId('focus-zone');
+
+    expect(focusZone.type).toBe('RCTFocusZone');
+    expect(focusZone.props.navigateAtEnd).toBe('NavigateStopAtEnds');
+    expect(focusZone.props.style).toBeUndefined();
   });
-});
 
-describe('FocusZone With Props', () => {
-  it('defaultTabbableElement Prop', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone defaultTabbableElement={null}>
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
+  it('forwards native behavior, accessibility, style, callbacks, and children', async () => {
+    const onFocus = jest.fn();
+    const style = { opacity: 0.5 };
+    const component = await render(
+      <FocusZone
+        accessibilityLabel="Formatting tools"
+        disabled
+        focusZoneDirection="vertical"
+        navigationOrderInRenderOrder
+        onFocus={onFocus}
+        style={style}
+        tabKeyNavigation="Normal"
+        testID="focus-zone"
+        use2DNavigation
+      >
+        <Text>FocusZone content</Text>
+      </FocusZone>,
+    );
+    const focusZone = component.getByTestId('focus-zone');
+
+    expect(focusZone.props).toMatchObject({
+      accessibilityLabel: 'Formatting tools',
+      disabled: true,
+      focusZoneDirection: 'vertical',
+      navigationOrderInRenderOrder: true,
+      onFocus,
+      tabKeyNavigation: 'Normal',
+      use2DNavigation: true,
     });
-    expect(component!.toJSON()).toMatchSnapshot();
+    expect(StyleSheet.flatten(focusZone.props.style)).toEqual(style);
+    expect(component.getByText('FocusZone content')).toBeTruthy();
   });
 
-  it('focusZoneDirection Prop', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone focusZoneDirection="bidirectional">
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
+  it('maps circular navigation to the native end behavior', async () => {
+    const component = await render(<FocusZone isCircularNavigation testID="focus-zone" />);
+
+    expect(component.getByTestId('focus-zone').props.navigateAtEnd).toBe('NavigateWrap');
   });
 
-  it('disabled Prop', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone disabled={true}>
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
+  it('forwards a registered native identifier as the default tabbable element', async () => {
+    const component = await render(<FocusZone defaultTabbableElement="preferred-item" testID="focus-zone" />);
+
+    expect(component.getByTestId('focus-zone').props.defaultTabbableElement).toBe('preferred-item');
   });
 
-  it('isCircularNavigation Prop', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone isCircularNavigation={true}>
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
+  it('resolves a default tabbable element ref to its native handle', async () => {
+    const defaultTabbableElement = React.createRef<View>();
+    const component = await render(
+      <FocusZone defaultTabbableElement={defaultTabbableElement} testID="focus-zone">
+        <View ref={defaultTabbableElement} />
+      </FocusZone>,
+    );
+
+    expect(defaultTabbableElement.current).not.toBeNull();
+    expect(component.getByTestId('focus-zone').props.defaultTabbableElement).toBe(42);
   });
 
-  it('use2DNavigation Prop', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone use2DNavigation={true}>
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
-    });
-    expect(component!.toJSON()).toMatchSnapshot();
+  it('forwards componentRef without exposing it as a native prop', async () => {
+    const componentRef = React.createRef<View>();
+    const component = await render(<FocusZone componentRef={componentRef} testID="focus-zone" />);
+    const focusZone = component.getByTestId('focus-zone');
+
+    expect(componentRef.current).not.toBeNull();
+    expect(focusZone.props.componentRef).toBeUndefined();
   });
 
-  it('All Props', () => {
-    let component: renderer.ReactTestRenderer;
-    act(() => {
-      component = renderer.create(
-        <FocusZone
-          disabled={false}
-          use2DNavigation={true}
-          defaultTabbableElement={null}
-          isCircularNavigation={false}
-          focusZoneDirection="vertical"
-        >
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-          <Button title="button" onPress={onPress} />
-        </FocusZone>,
-      );
+  it('can be consumed as a slot with merged render props', async () => {
+    const component = await render(
+      <FocusZoneSlotConsumer focusZone={{ accessibilityLabel: 'Slotted FocusZone', focusZoneDirection: 'horizontal' }} />,
+    );
+    const focusZone = component.getByTestId('slotted-focus-zone');
+
+    expect(focusZone.props).toMatchObject({
+      accessibilityHint: 'rendered as a slot',
+      accessibilityLabel: 'Slotted FocusZone',
+      focusZoneDirection: 'horizontal',
     });
-    expect(component!.toJSON()).toMatchSnapshot();
+    expect(component.getByText('Slot content')).toBeTruthy();
   });
 });
diff --git a/packages/components/FocusZone/src/__tests__/FocusZone.types.test.ts b/packages/components/FocusZone/src/__tests__/FocusZone.types.test.ts
new file mode 100644
index 00000000000..f4e8dce2749
--- /dev/null
+++ b/packages/components/FocusZone/src/__tests__/FocusZone.types.test.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import * as React from 'react';
+import type { View } from 'react-native';
+
+import type { SlotProp } from '@fluentui-react-native/framework-base';
+
+import type { FocusZone } from '../FocusZone';
+import type { FocusZoneProps, NativeProps } from '../FocusZone.types';
+
+const componentRef = React.createRef<View>();
+const defaultTabbableElement = React.createRef<React.Component>();
+
+const props: FocusZoneProps = {
+  accessibilityLabel: 'Formatting tools',
+  componentRef,
+  defaultTabbableElement,
+  focusZoneDirection: 'horizontal',
+  isCircularNavigation: true,
+};
+
+const focusZoneSlot: SlotProp<typeof FocusZone> = props;
+const nativeProps: NativeProps = {
+  defaultTabbableElement: 42,
+  focusZoneDirection: 'vertical',
+  navigateAtEnd: 'NavigateWrap',
+};
+
+// @ts-expect-error FocusZone direction must be one of the supported navigation axes.
+const invalidDirection: FocusZoneProps = { focusZoneDirection: 'diagonal' };
+
+describe('FocusZone types', () => {
+  it('accepts public props as a slot contract', () => {
+    expect(focusZoneSlot).toBeDefined();
+    expect(nativeProps).toBeDefined();
+  });
+});
diff --git a/packages/components/FocusZone/src/__tests__/__snapshots__/FocusZone.test.tsx.snap b/packages/components/FocusZone/src/__tests__/__snapshots__/FocusZone.test.tsx.snap
deleted file mode 100644
index ee9c7e31f1e..00000000000
--- a/packages/components/FocusZone/src/__tests__/__snapshots__/FocusZone.test.tsx.snap
+++ /dev/null
@@ -1,1516 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FocusZone No Props No children 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateStopAtEnds"
-/>
-`;
-
-exports[`FocusZone No Props One child 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateStopAtEnds"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone No Props Three children 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateStopAtEnds"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone No Props Two children 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateStopAtEnds"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone With Props All Props 1`] = `
-<RCTFocusZone
-  disabled={false}
-  focusZoneDirection="vertical"
-  navigateAtEnd="NavigateStopAtEnds"
-  use2DNavigation={true}
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone With Props defaultTabbableElement Prop 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateStopAtEnds"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone With Props disabled Prop 1`] = `
-<RCTFocusZone
-  disabled={true}
-  navigateAtEnd="NavigateStopAtEnds"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone With Props focusZoneDirection Prop 1`] = `
-<RCTFocusZone
-  focusZoneDirection="bidirectional"
-  navigateAtEnd="NavigateStopAtEnds"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone With Props isCircularNavigation Prop 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateWrap"
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
-
-exports[`FocusZone With Props use2DNavigation Prop 1`] = `
-<RCTFocusZone
-  navigateAtEnd="NavigateStopAtEnds"
-  use2DNavigation={true}
->
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        [
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "margin": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        button
-      </Text>
-    </View>
-  </View>
-</RCTFocusZone>
-`;
diff --git a/packages/components/FocusZone/tsconfig.json b/packages/components/FocusZone/tsconfig.json
index d113dc54594..ab3732e0a77 100644
--- a/packages/components/FocusZone/tsconfig.json
+++ b/packages/components/FocusZone/tsconfig.json
@@ -7,21 +7,16 @@
     "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo"
   },
   "include": ["src"],
+  "exclude": ["**/*.stories.ts", "**/*.stories.tsx"],
   "references": [
     {
-      "path": "../../utils/adapters/tsconfig.json"
+      "path": "../../agentic/desktop-driver/tsconfig.json"
     },
     {
-      "path": "../../utils/interactive-hooks/tsconfig.json"
+      "path": "../../framework-base/tsconfig.json"
     },
     {
       "path": "../../../scripts/tsconfig.json"
-    },
-    {
-      "path": "../../deprecated/foundation-composable/tsconfig.json"
-    },
-    {
-      "path": "../../deprecated/foundation-settings/tsconfig.json"
     }
   ]
 }
diff --git a/packages/components/FocusZone/windows/.gitignore b/packages/components/FocusZone/windows/.gitignore
new file mode 100644
index 00000000000..0fd0acfc6d4
--- /dev/null
+++ b/packages/components/FocusZone/windows/.gitignore
@@ -0,0 +1,46 @@
+*AppPackages*
+*BundleArtifacts*
+
+#OS junk files
+[Tt]humbs.db
+*.DS_Store
+
+#Visual Studio files
+*.[Oo]bj
+*.user
+*.aps
+*.pch
+*.vspscc
+*.vssscc
+*_i.c
+*_p.c
+*.ncb
+*.suo
+*.tlb
+*.tlh
+*.bak
+*.[Cc]ache
+*.ilk
+*.log
+*.lib
+*.sbr
+*.sdf
+*.opensdf
+*.opendb
+*.unsuccessfulbuild
+ipch/
+[Oo]bj/
+[Bb]in
+[Dd]ebug*/
+[Rr]elease*/
+Ankh.NoLoad
+.vs/
+# Visual C++ cache files
+
+#Files generated by the VS build
+**/Generated Files/**
+
+#Files generated by MS build
+*.binlog
+*.err
+*.wrn
diff --git a/packages/components/FocusZone/windows/ExperimentalFeatures.props b/packages/components/FocusZone/windows/ExperimentalFeatures.props
new file mode 100644
index 00000000000..db10c59f9ad
--- /dev/null
+++ b/packages/components/FocusZone/windows/ExperimentalFeatures.props
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+
+  <PropertyGroup Label="Microsoft.ReactNative Experimental Features">
+    <!--
+      Required for building a New Architecture project.
+
+      Library projects can change this value to test against Old and New
+      Architectures when building the library project's local sln file.
+      
+      Otherwise this value will be decided by the consuming RNW app.
+
+      See https://microsoft.github.io/react-native-windows/docs/new-architecture
+    -->
+    <RnwNewArch>true</RnwNewArch>
+
+    <!--
+      Changes compilation to assume use of Microsoft.ReactNative NuGet packages
+      instead of building the framework from source. Defaults to true.
+
+      This is set during library project creation and is used when building
+      the library project's local sln file.
+
+      Otherwise this value will be decided by the consuming RNW app.
+
+      See https://microsoft.github.io/react-native-windows/docs/nuget
+    -->
+    <UseExperimentalNuget>true</UseExperimentalNuget>
+
+    <ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
+  </PropertyGroup>
+
+</Project>
diff --git a/packages/components/FocusZone/windows/FRNFocusZone.sln b/packages/components/FocusZone/windows/FRNFocusZone.sln
new file mode 100644
index 00000000000..08d4bc6912e
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone.sln
@@ -0,0 +1,43 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.3.32929.385
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "FRNFocusZone", "FRNFocusZone\FRNFocusZone.vcxproj", "{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Debug|ARM64 = Debug|ARM64
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+		Release|ARM64 = Release|ARM64
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|x64.ActiveCfg = Debug|x64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|x64.Build.0 = Debug|x64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|x64.Deploy.0 = Debug|x64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|x86.ActiveCfg = Debug|Win32
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|x86.Build.0 = Debug|Win32
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|x86.Deploy.0 = Debug|Win32
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|ARM64.ActiveCfg = Debug|ARM64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|ARM64.Build.0 = Debug|ARM64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Debug|ARM64.Deploy.0 = Debug|ARM64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|x64.ActiveCfg = Release|x64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|x64.Build.0 = Release|x64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|x64.Deploy.0 = Release|x64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|x86.ActiveCfg = Release|Win32
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|x86.Build.0 = Release|Win32
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|x86.Deploy.0 = Release|Win32
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|ARM64.ActiveCfg = Release|ARM64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|ARM64.Build.0 = Release|ARM64
+		{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}.Release|ARM64.Deploy.0 = Release|ARM64
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {CA064327-BA5B-4132-B77B-23C9DDDF9E92}
+	EndGlobalSection
+EndGlobal
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.def b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.def
new file mode 100644
index 00000000000..d04a02ea81e
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.def
@@ -0,0 +1,3 @@
+EXPORTS
+DllCanUnloadNow = WINRT_CanUnloadNow                    PRIVATE
+DllGetActivationFactory = WINRT_GetActivationFactory    PRIVATE
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.rc b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.rc
new file mode 100644
index 00000000000..3212c105fce
Binary files /dev/null and b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.rc differ
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.vcxproj b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.vcxproj
new file mode 100644
index 00000000000..6b77760fc0e
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.vcxproj
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This project was created with react-native-windows 0.81.32 -->
+<Project DefaultTargets="Build" ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
+  <PropertyGroup Label="Globals">
+    <CppWinRTOptimized>true</CppWinRTOptimized>
+    <MinimalCoreWin>true</MinimalCoreWin>
+    <ProjectGuid>{85648B33-7A31-434B-ACE5-6E4F6E52EBAD}</ProjectGuid>
+    <ProjectName>FRNFocusZone</ProjectName>
+    <Keyword>Win32Proj</Keyword>
+    <RootNamespace>FRNFocusZone</RootNamespace>
+    <WindowsTargetPlatformVersion>10.0</WindowsTargetPlatformVersion>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <MinimumVisualStudioVersion>17.0</MinimumVisualStudioVersion>
+    <AppxPackage>false</AppxPackage>
+  </PropertyGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
+  <PropertyGroup Label="ReactNativeWindowsProps">
+    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
+    <RunAutolinkCheck>false</RunAutolinkCheck>
+    <RnwNewArchOnly>true</RnwNewArchOnly>
+  </PropertyGroup>
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props" />
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|Win32">
+      <Configuration>Debug</Configuration>
+      <Platform>Win32</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|Win32">
+      <Configuration>Release</Configuration>
+      <Platform>Win32</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM64">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM64">
+      <Configuration>Release</Configuration>
+      <Platform>ARM64</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Configuration">
+    <ConfigurationType>DynamicLibrary</ConfigurationType>
+    <CharacterSet>Unicode</CharacterSet>
+    <PlatformToolset Condition="'$(VisualStudioVersion)'=='18.0'">v145</PlatformToolset>
+    <PlatformToolset Condition="'$(PlatformToolset)'==''">v143</PlatformToolset>
+    <GenerateManifest>false</GenerateManifest>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)'=='Debug'" Label="Configuration">
+    <UseDebugLibraries>true</UseDebugLibraries>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)'=='Release'" Label="Configuration">
+    <UseDebugLibraries>false</UseDebugLibraries>
+    <WholeProgramOptimization>true</WholeProgramOptimization>
+  </PropertyGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
+  <ImportGroup Label="ExtensionSettings">
+  </ImportGroup>
+  <ImportGroup Label="PropertySheets">
+    <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
+  </ImportGroup>
+  <ImportGroup Label="ReactNativeWindowsPropertySheets">
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.props')" />
+  </ImportGroup>
+  <ItemDefinitionGroup>
+    <ClCompile>
+      <PrecompiledHeader>Use</PrecompiledHeader>
+      <PrecompiledHeaderFile>pch.h</PrecompiledHeaderFile>
+      <PrecompiledHeaderOutputFile>$(IntDir)pch.pch</PrecompiledHeaderOutputFile>
+      <WarningLevel>Level4</WarningLevel>
+      <SDLCheck>true</SDLCheck>
+      <AdditionalOptions>%(AdditionalOptions) /bigobj</AdditionalOptions>
+      <DisableSpecificWarnings>4453;28204</DisableSpecificWarnings>
+      <PreprocessorDefinitions>_WINRT_DLL;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <AdditionalUsingDirectories>$(WindowsSDK_WindowsMetadata);$(AdditionalUsingDirectories)</AdditionalUsingDirectories>
+      <LanguageStandard>stdcpp20</LanguageStandard>
+      <AdditionalIncludeDirectories>
+        $(MSBuildThisFileDirectory);
+        %(AdditionalIncludeDirectories)
+      </AdditionalIncludeDirectories>
+    </ClCompile>
+    <Link>
+      <AdditionalDependencies>user32.lib;windowsapp.lib;%(AdditionalDependencies)</AdditionalDependencies>
+      <SubSystem>Console</SubSystem>
+      <GenerateWindowsMetadata>true</GenerateWindowsMetadata>
+      <ModuleDefinitionFile>FRNFocusZone.def</ModuleDefinitionFile>
+    </Link>
+  </ItemDefinitionGroup>
+  <ItemDefinitionGroup Condition="'$(Configuration)'=='Debug'">
+    <ClCompile>
+      <PreprocessorDefinitions>_DEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+    </ClCompile>
+  </ItemDefinitionGroup>
+  <ItemDefinitionGroup Condition="'$(Configuration)'=='Release'">
+    <ClCompile>
+      <PreprocessorDefinitions>NDEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+    </ClCompile>
+  </ItemDefinitionGroup>
+  <PropertyGroup Label="UserMacros" />
+  <ItemGroup>
+    <ClInclude Include="FocusZoneComponentView.h" />
+    <ClInclude Include="ReactPackageProvider.h">
+      <DependentUpon>ReactPackageProvider.idl</DependentUpon>
+    </ClInclude>
+    <ClInclude Include="resource.h" />
+    <ClInclude Include="pch.h" />
+    <ClInclude Include="targetver.h" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClCompile Include="FocusZoneComponentView.cpp" />
+    <ClCompile Include="pch.cpp">
+      <PrecompiledHeader>Create</PrecompiledHeader>
+    </ClCompile>
+    <ClCompile Include="ReactPackageProvider.cpp">
+      <DependentUpon>ReactPackageProvider.idl</DependentUpon>
+    </ClCompile>
+    <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
+  </ItemGroup>
+  <ItemGroup>
+    <Midl Include="ReactPackageProvider.idl" />
+  </ItemGroup>
+  <ItemGroup>
+    <ResourceCompile Include="FRNFocusZone.rc" />
+  </ItemGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
+  <ImportGroup Label="ReactNativeWindowsTargets">
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.targets')" />
+  </ImportGroup>
+  <ItemGroup>
+  </ItemGroup>
+  <Target Name="EnsureReactNativeWindowsTargets" BeforeTargets="PrepareForBuild">
+    <PropertyGroup>
+      <ErrorText>This project references targets in your node_modules\react-native-windows folder. The missing file is {0}.</ErrorText>
+    </PropertyGroup>
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.props'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.CppLib.targets'))" />
+  </Target>
+</Project>
\ No newline at end of file
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.vcxproj.filters b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.vcxproj.filters
new file mode 100644
index 00000000000..b4602ae41c6
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/FRNFocusZone.vcxproj.filters
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup>
+    <Filter Include="Source Files">
+      <UniqueIdentifier>{4FC737F1-C7A5-4376-A066-2A32D752A2FF}</UniqueIdentifier>
+      <Extensions>cpp;c;cc;cxx;def;odl;idl;hpj;bat;asm;asmx</Extensions>
+    </Filter>
+    <Filter Include="Header Files">
+      <UniqueIdentifier>{93995380-89BD-4b04-88EB-625FBE52EBFB}</UniqueIdentifier>
+      <Extensions>h;hh;hpp;hxx;hm;inl;inc;ipp;xsd</Extensions>
+    </Filter>
+    <Filter Include="Resource Files">
+      <UniqueIdentifier>{67DA6AB6-F800-4c08-8B7A-83BB121AAD01}</UniqueIdentifier>
+      <Extensions>rc;ico;cur;bmp;dlg;rc2;rct;bin;rgs;gif;jpg;jpeg;jpe;resx;tiff;tif;png;wav;mfcribbon-ms</Extensions>
+    </Filter>
+  </ItemGroup>
+  <ItemGroup>
+    <ClInclude Include="targetver.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
+    <ClInclude Include="resource.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
+    <ClInclude Include="FocusZoneComponentView.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
+    <ClInclude Include="pch.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
+  </ItemGroup>
+  <ItemGroup>
+    <ClCompile Include="FocusZoneComponentView.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
+    <ClCompile Include="pch.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
+  </ItemGroup>
+  <ItemGroup>
+    <ResourceCompile Include="FRNFocusZone.rc">
+      <Filter>Resource Files</Filter>
+    </ResourceCompile>
+  </ItemGroup>
+</Project>
\ No newline at end of file
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/FocusZoneComponentView.cpp b/packages/components/FocusZone/windows/FRNFocusZone/FocusZoneComponentView.cpp
new file mode 100644
index 00000000000..91f6f83c824
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/FocusZoneComponentView.cpp
@@ -0,0 +1,590 @@
+#include "pch.h"
+
+#include "FocusZoneComponentView.h"
+
+#ifdef RNW_NEW_ARCH
+
+#include "codegen/react/components/FRNFocusZoneSpec/FocusZone.g.h"
+
+namespace winrt::FRNFocusZone {
+
+namespace winrtComp = winrt::Microsoft::ReactNative::Composition;
+namespace winrtInput = winrt::Microsoft::ReactNative::Composition::Input;
+namespace winrtRN = winrt::Microsoft::ReactNative;
+
+void CollectFocusableDescendants(
+    const winrtRN::ComponentView &view,
+    std::vector<winrtRN::ComponentView> &descendants) {
+  auto children = view.Children();
+  for (uint32_t index = 0; index < children.Size(); ++index) {
+    auto child = children.GetAt(index);
+    auto firstFocusable = winrtComp::FocusManager::FindFirstFocusableElement(child);
+    if (firstFocusable && firstFocusable.Tag() == child.Tag()) {
+      descendants.push_back(child);
+      continue;
+    }
+    CollectFocusableDescendants(child, descendants);
+  }
+}
+
+struct FocusZoneComponentView
+    : winrt::implements<FocusZoneComponentView, winrt::Windows::Foundation::IInspectable>,
+      FRNFocusZoneCodegen::BaseFocusZone<FocusZoneComponentView> {
+  void Initialize(const winrtRN::ComponentView &view) noexcept override {
+    m_containerTag = view.Tag();
+
+    view.KeyDown(
+        [weakThis = get_weak()](
+            const winrt::Windows::Foundation::IInspectable &sender,
+            const winrtInput::KeyRoutedEventArgs &args) noexcept {
+          if (auto strongThis = weakThis.get()) {
+            if (auto componentView = sender.try_as<winrtRN::ComponentView>()) {
+              strongThis->HandleKeyDown(componentView, args);
+            }
+          }
+        });
+
+    view.GotFocus(
+        [weakThis = get_weak()](
+            const winrt::Windows::Foundation::IInspectable &sender,
+            const winrtInput::RoutedEventArgs &) noexcept {
+          if (auto strongThis = weakThis.get()) {
+            if (auto componentView = sender.try_as<winrtRN::ComponentView>()) {
+              strongThis->HandleGotFocus(componentView);
+            }
+          }
+        });
+
+    view.GettingFocus(
+        [weakThis = get_weak()](
+            const winrt::Windows::Foundation::IInspectable &sender,
+            const winrtRN::GettingFocusEventArgs &args) noexcept {
+          if (auto strongThis = weakThis.get()) {
+            if (auto componentView = sender.try_as<winrtRN::ComponentView>()) {
+              strongThis->HandleGettingFocus(componentView, args);
+            }
+          }
+        });
+  }
+
+ private:
+  void HandleKeyDown(const winrtRN::ComponentView &view, const winrtInput::KeyRoutedEventArgs &args) noexcept {
+    using winrt::Windows::System::VirtualKey;
+
+    if (Disabled()) {
+      return;
+    }
+
+    if (args.Key() == VirtualKey::Tab) {
+      HandleTabKey(view, args);
+      return;
+    }
+
+    int direction = 0;
+    bool horizontalNavigation = false;
+    bool moveToStart = false;
+    bool moveToEnd = false;
+
+    switch (args.Key()) {
+      case VirtualKey::Down:
+        if (!IsVertical()) {
+          return;
+        }
+        direction = 1;
+        horizontalNavigation = false;
+        break;
+      case VirtualKey::Up:
+        if (!IsVertical()) {
+          return;
+        }
+        direction = -1;
+        horizontalNavigation = false;
+        break;
+      case VirtualKey::Right:
+        if (!IsHorizontal()) {
+          return;
+        }
+        direction = 1;
+        horizontalNavigation = true;
+        break;
+      case VirtualKey::Left:
+        if (!IsHorizontal()) {
+          return;
+        }
+        direction = -1;
+        horizontalNavigation = true;
+        break;
+      case VirtualKey::Home:
+        moveToStart = true;
+        break;
+      case VirtualKey::End:
+        moveToEnd = true;
+        break;
+      default:
+        return;
+    }
+
+    const bool moved =
+        Use2DNavigation() && direction != 0
+        ? MoveFocus2D(view, direction, horizontalNavigation, ShouldWrap())
+        : MoveFocus(view, direction, moveToStart, moveToEnd, ShouldWrap());
+    if (moved) {
+      args.Handled(true);
+    }
+  }
+
+  void HandleTabKey(const winrtRN::ComponentView &view, const winrtInput::KeyRoutedEventArgs &args) noexcept {
+    const bool forward = (::GetKeyState(VK_SHIFT) & 0x8000) == 0;
+    const auto tabNavigation = TabNavigation();
+
+    if (tabNavigation == "Normal") {
+      return;
+    }
+
+    if (tabNavigation == "NavigateWrap" || tabNavigation == "NavigateStopAtEnds") {
+      const bool wrap = tabNavigation == "NavigateWrap";
+      MoveFocus(view, forward ? 1 : -1, false, false, wrap);
+      args.Handled(true);
+      return;
+    }
+
+    if (FocusOutsideZone(view, forward)) {
+      args.Handled(true);
+      return;
+    }
+
+    // If the manual island walk cannot find an outside target, place focus at
+    // the zone edge and let RNW's default Tab navigation complete the exit.
+    m_inTabTrap = true;
+    FocusEdgeDescendant(view, !forward);
+    m_inTabTrap = false;
+  }
+
+  bool MoveFocus(
+      const winrtRN::ComponentView &view,
+      int direction,
+      bool moveToStart,
+      bool moveToEnd,
+      bool wrap) noexcept {
+    std::vector<winrtRN::ComponentView> candidates;
+    CollectFocusableDescendants(view, candidates);
+    if (candidates.empty()) {
+      return false;
+    }
+
+    auto root = view.as<winrtComp::ComponentView>().Root();
+    int64_t focusedTag = 0;
+    int focusedIndex = -1;
+    if (root) {
+      if (auto focused = root.GetFocusedComponent()) {
+        focusedTag = focused.Tag();
+        for (int index = 0; index < static_cast<int>(candidates.size()); ++index) {
+          if (candidates[index].Tag() == focusedTag) {
+            focusedIndex = index;
+            break;
+          }
+        }
+      }
+    }
+
+    auto tryFocusFrom = [&](int startIndex, int step) noexcept {
+      const int count = static_cast<int>(candidates.size());
+      for (int offset = 0; offset < count; ++offset) {
+        int index = startIndex + step * offset;
+        if (wrap) {
+          index = ((index % count) + count) % count;
+        } else if (index < 0 || index >= count) {
+          break;
+        }
+
+        if (root) {
+          if (auto focused = root.GetFocusedComponent()) {
+            if (IsWithinContainer(focused, candidates[index]) ||
+                IsWithinContainer(candidates[index], focused) ||
+                OverlapsFocusedComponent(view, focused, candidates[index])) {
+              continue;
+            }
+          }
+        }
+
+        if (!candidates[index].TryFocus(winrtRN::FocusState::Keyboard)) {
+          continue;
+        }
+
+        int64_t newFocusedTag = 0;
+        if (root) {
+          if (auto focused = root.GetFocusedComponent()) {
+            newFocusedTag = focused.Tag();
+          }
+        }
+        if (focusedTag != 0 && newFocusedTag == focusedTag) {
+          continue;
+        }
+        return true;
+      }
+      return false;
+    };
+
+    const int count = static_cast<int>(candidates.size());
+    if (moveToStart) {
+      return tryFocusFrom(0, 1);
+    }
+    if (moveToEnd) {
+      return tryFocusFrom(count - 1, -1);
+    }
+    if (focusedIndex < 0) {
+      return direction > 0 ? tryFocusFrom(0, 1) : tryFocusFrom(count - 1, -1);
+    }
+    return tryFocusFrom(focusedIndex + direction, direction);
+  }
+
+  struct RelativeRect {
+    double x;
+    double y;
+    double width;
+    double height;
+  };
+
+  static std::optional<RelativeRect> RelativeRectWithin(
+      const winrtRN::ComponentView &container,
+      const winrtRN::ComponentView &node) noexcept {
+    const auto metrics = node.LayoutMetrics();
+    RelativeRect rect{
+        metrics.Frame.X,
+        metrics.Frame.Y,
+        metrics.Frame.Width,
+        metrics.Frame.Height};
+
+    auto current = node.Parent();
+    while (current && current.Tag() != container.Tag()) {
+      const auto parentMetrics = current.LayoutMetrics();
+      rect.x += parentMetrics.Frame.X;
+      rect.y += parentMetrics.Frame.Y;
+      current = current.Parent();
+    }
+    return current ? std::optional<RelativeRect>{rect} : std::nullopt;
+  }
+
+  static bool OverlapsFocusedComponent(
+      const winrtRN::ComponentView &container,
+      const winrtRN::ComponentView &focused,
+      const winrtRN::ComponentView &candidate) noexcept {
+    const auto focusedRect = RelativeRectWithin(container, focused);
+    const auto candidateRect = RelativeRectWithin(container, candidate);
+    if (!focusedRect || !candidateRect) {
+      return false;
+    }
+
+    const double overlapWidth =
+        std::min(focusedRect->x + focusedRect->width, candidateRect->x + candidateRect->width) -
+        std::max(focusedRect->x, candidateRect->x);
+    const double overlapHeight =
+        std::min(focusedRect->y + focusedRect->height, candidateRect->y + candidateRect->height) -
+        std::max(focusedRect->y, candidateRect->y);
+    return overlapWidth > 0.5 && overlapHeight > 0.5;
+  }
+
+  bool MoveFocus2D(
+      const winrtRN::ComponentView &view,
+      int direction,
+      bool horizontal,
+      bool wrap) noexcept {
+    auto root = view.as<winrtComp::ComponentView>().Root();
+    if (!root) {
+      return false;
+    }
+
+    auto focused = root.GetFocusedComponent();
+    if (!focused || !IsWithinContainer(view, focused)) {
+      return MoveFocus(view, direction, false, false, wrap);
+    }
+
+    const auto focusedRect = RelativeRectWithin(view, focused);
+    if (!focusedRect) {
+      return MoveFocus(view, direction, false, false, wrap);
+    }
+
+    const double focusedPrimary =
+        horizontal ? focusedRect->x + focusedRect->width / 2 : focusedRect->y + focusedRect->height / 2;
+    const double focusedCross =
+        horizontal ? focusedRect->y + focusedRect->height / 2 : focusedRect->x + focusedRect->width / 2;
+
+    struct Candidate {
+      winrtRN::ComponentView view;
+      double primary;
+      double cross;
+      double distance;
+      size_t order;
+    };
+
+    std::vector<winrtRN::ComponentView> descendants;
+    CollectFocusableDescendants(view, descendants);
+    std::vector<Candidate> directionalCandidates;
+    std::vector<Candidate> allCandidates;
+    allCandidates.reserve(descendants.size());
+
+    for (size_t order = 0; order < descendants.size(); ++order) {
+      const auto &candidate = descendants[order];
+      if (candidate.Tag() == focused.Tag()) {
+        continue;
+      }
+      const auto rect = RelativeRectWithin(view, candidate);
+      if (!rect) {
+        continue;
+      }
+
+      const double primary = horizontal ? rect->x + rect->width / 2 : rect->y + rect->height / 2;
+      const double cross = horizontal ? rect->y + rect->height / 2 : rect->x + rect->width / 2;
+      const double primaryDelta = primary - focusedPrimary;
+      const double crossDelta = cross - focusedCross;
+      Candidate ranked{
+          candidate,
+          primary,
+          cross,
+          std::hypot(primaryDelta, crossDelta),
+          order};
+      allCandidates.push_back(ranked);
+      if (direction * primaryDelta > 0.5) {
+        directionalCandidates.push_back(ranked);
+      }
+    }
+
+    auto tryRankedCandidates = [&](std::vector<Candidate> &candidates) noexcept {
+      std::sort(candidates.begin(), candidates.end(), [focusedCross](const Candidate &left, const Candidate &right) {
+        if (left.distance != right.distance) {
+          return left.distance < right.distance;
+        }
+        const double leftCross = std::abs(left.cross - focusedCross);
+        const double rightCross = std::abs(right.cross - focusedCross);
+        return leftCross != rightCross ? leftCross < rightCross : left.order < right.order;
+      });
+
+      for (const auto &candidate : candidates) {
+        if (!candidate.view.TryFocus(winrtRN::FocusState::Keyboard)) {
+          continue;
+        }
+        if (auto newlyFocused = root.GetFocusedComponent(); newlyFocused && newlyFocused.Tag() != focused.Tag()) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (tryRankedCandidates(directionalCandidates)) {
+      return true;
+    }
+    if (!wrap || allCandidates.empty()) {
+      return false;
+    }
+
+    const auto edge = std::minmax_element(
+        allCandidates.begin(),
+        allCandidates.end(),
+        [](const Candidate &left, const Candidate &right) { return left.primary < right.primary; });
+    const double wrapEdge = direction > 0 ? edge.first->primary : edge.second->primary;
+    for (auto &candidate : allCandidates) {
+      const double edgeDistance = std::abs(candidate.primary - wrapEdge);
+      const double crossDistance = std::abs(candidate.cross - focusedCross);
+      candidate.distance = edgeDistance * 10000 + crossDistance;
+    }
+    return tryRankedCandidates(allCandidates);
+  }
+
+  static int SiblingIndex(const winrtRN::ComponentView &node, const winrtRN::ComponentView &parent) noexcept {
+    auto siblings = parent.Children();
+    for (uint32_t index = 0; index < siblings.Size(); ++index) {
+      if (siblings.GetAt(index).Tag() == node.Tag()) {
+        return static_cast<int>(index);
+      }
+    }
+    return -1;
+  }
+
+  static winrtRN::ComponentView NextSkippingSubtree(const winrtRN::ComponentView &node) noexcept {
+    auto current = node;
+    while (current) {
+      auto parent = current.Parent();
+      if (!parent) {
+        return nullptr;
+      }
+      auto siblings = parent.Children();
+      const int index = SiblingIndex(current, parent);
+      if (index >= 0 && static_cast<uint32_t>(index + 1) < siblings.Size()) {
+        return siblings.GetAt(index + 1);
+      }
+      current = parent;
+    }
+    return nullptr;
+  }
+
+  static winrtRN::ComponentView PreOrderNext(const winrtRN::ComponentView &node) noexcept {
+    auto children = node.Children();
+    return children.Size() > 0 ? children.GetAt(0) : NextSkippingSubtree(node);
+  }
+
+  static winrtRN::ComponentView RightmostDescendant(const winrtRN::ComponentView &node) noexcept {
+    auto current = node;
+    while (true) {
+      auto children = current.Children();
+      if (children.Size() == 0) {
+        return current;
+      }
+      current = children.GetAt(children.Size() - 1);
+    }
+  }
+
+  static winrtRN::ComponentView PreOrderPrevious(const winrtRN::ComponentView &node) noexcept {
+    auto parent = node.Parent();
+    if (!parent) {
+      return nullptr;
+    }
+    const int index = SiblingIndex(node, parent);
+    return index <= 0 ? parent : RightmostDescendant(parent.Children().GetAt(index - 1));
+  }
+
+  bool FocusOutsideZone(const winrtRN::ComponentView &container, bool forward) noexcept {
+    if (forward) {
+      for (auto node = NextSkippingSubtree(container); node; node = PreOrderNext(node)) {
+        auto candidate = winrtComp::FocusManager::FindFirstFocusableElement(node);
+        if (candidate && candidate.TryFocus(winrtRN::FocusState::Keyboard)) {
+          return true;
+        }
+      }
+    } else {
+      for (auto node = PreOrderPrevious(container); node; node = PreOrderPrevious(node)) {
+        auto candidate = winrtComp::FocusManager::FindLastFocusableElement(node);
+        if (candidate && candidate.TryFocus(winrtRN::FocusState::Keyboard)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  bool FocusEdgeDescendant(const winrtRN::ComponentView &view, bool last) noexcept {
+    auto candidate =
+        last
+        ? winrtComp::FocusManager::FindLastFocusableElement(view)
+        : winrtComp::FocusManager::FindFirstFocusableElement(view);
+    return candidate && candidate.TryFocus(winrtRN::FocusState::Keyboard);
+  }
+
+  void HandleGotFocus(const winrtRN::ComponentView &container) noexcept {
+    if (m_inTabTrap) {
+      return;
+    }
+    if (auto root = container.as<winrtComp::ComponentView>().Root()) {
+      if (auto focused = root.GetFocusedComponent()) {
+        if (focused.Tag() != m_containerTag && IsWithinContainer(container, focused)) {
+          m_lastFocusedTag = focused.Tag();
+        }
+      }
+    }
+  }
+
+  void HandleGettingFocus(
+      const winrtRN::ComponentView &container,
+      const winrtRN::GettingFocusEventArgs &args) noexcept {
+    if (Disabled()) {
+      return;
+    }
+
+    const int64_t preferredTag = m_lastFocusedTag != 0 ? m_lastFocusedTag : DefaultTabbableTag();
+    if (preferredTag == 0) {
+      return;
+    }
+    if (auto oldFocus = args.OldFocusedComponent(); oldFocus && IsWithinContainer(container, oldFocus)) {
+      return;
+    }
+    if (auto newFocus = args.NewFocusedComponent(); newFocus && newFocus.Tag() == preferredTag) {
+      return;
+    }
+
+    std::vector<winrtRN::ComponentView> candidates;
+    CollectFocusableDescendants(container, candidates);
+    for (const auto &candidate : candidates) {
+      if (candidate.Tag() == preferredTag) {
+        args.TrySetNewFocusedComponent(candidate);
+        return;
+      }
+    }
+  }
+
+  static bool IsWithinContainer(
+      const winrtRN::ComponentView &container,
+      const winrtRN::ComponentView &node) noexcept {
+    auto current = node;
+    while (current) {
+      if (current.Tag() == container.Tag()) {
+        return true;
+      }
+      current = current.Parent();
+    }
+    return false;
+  }
+
+  bool Disabled() const noexcept {
+    auto props = Props();
+    return props && props->disabled.value_or(false);
+  }
+
+  std::string Direction() const noexcept {
+    auto props = Props();
+    return props && props->focusZoneDirection ? *props->focusZoneDirection : "bidirectional";
+  }
+
+  bool IsVertical() const noexcept {
+    const auto direction = Direction();
+    return direction == "vertical" || direction == "bidirectional";
+  }
+
+  bool IsHorizontal() const noexcept {
+    const auto direction = Direction();
+    return direction == "horizontal" || direction == "bidirectional";
+  }
+
+  bool ShouldWrap() const noexcept {
+    auto props = Props();
+    return props && props->navigateAtEnd && *props->navigateAtEnd == "NavigateWrap";
+  }
+
+  bool Use2DNavigation() const noexcept {
+    auto props = Props();
+    return props && props->use2DNavigation.value_or(false);
+  }
+
+  std::string TabNavigation() const noexcept {
+    auto props = Props();
+    return props && props->tabKeyNavigation ? *props->tabKeyNavigation : "None";
+  }
+
+  int64_t DefaultTabbableTag() const noexcept {
+    auto props = Props();
+    if (!props) {
+      return 0;
+    }
+
+    const auto &value = props->defaultTabbableElement;
+    if (value.Type() == winrtRN::JSValueType::Int64) {
+      return value.AsInt64();
+    }
+    if (value.Type() == winrtRN::JSValueType::Double) {
+      return static_cast<int64_t>(value.AsDouble());
+    }
+    return 0;
+  }
+
+  int64_t m_containerTag{0};
+  int64_t m_lastFocusedTag{0};
+  bool m_inTabTrap{false};
+};
+
+} // namespace winrt::FRNFocusZone
+
+void RegisterFocusZoneComponentView(const winrt::Microsoft::ReactNative::IReactPackageBuilder &packageBuilder) noexcept {
+  using ComponentView = winrt::FRNFocusZone::FocusZoneComponentView;
+
+  FRNFocusZoneCodegen::RegisterFocusZoneNativeComponent<ComponentView>(packageBuilder, {});
+}
+
+#endif
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/FocusZoneComponentView.h b/packages/components/FocusZone/windows/FRNFocusZone/FocusZoneComponentView.h
new file mode 100644
index 00000000000..016542577d7
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/FocusZoneComponentView.h
@@ -0,0 +1,7 @@
+#pragma once
+
+#ifdef RNW_NEW_ARCH
+
+void RegisterFocusZoneComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept;
+
+#endif
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.cpp b/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.cpp
new file mode 100644
index 00000000000..ce6933d5689
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.cpp
@@ -0,0 +1,24 @@
+#include "pch.h"
+
+#include "ReactPackageProvider.h"
+#if __has_include("ReactPackageProvider.g.cpp")
+#include "ReactPackageProvider.g.cpp"
+#endif
+
+#include "FocusZoneComponentView.h"
+
+using namespace winrt::Microsoft::ReactNative;
+
+namespace winrt::FRNFocusZone::implementation
+{
+
+void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept
+{
+#ifdef RNW_NEW_ARCH
+  RegisterFocusZoneComponentView(packageBuilder);
+#else
+  UNREFERENCED_PARAMETER(packageBuilder);
+#endif
+}
+
+} // namespace winrt::FRNFocusZone::implementation
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.h b/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.h
new file mode 100644
index 00000000000..1912fd12d3e
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.h
@@ -0,0 +1,24 @@
+#pragma once
+
+#include "ReactPackageProvider.g.h"
+
+using namespace winrt::Microsoft::ReactNative;
+
+namespace winrt::FRNFocusZone::implementation
+{
+
+struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider>
+{
+  ReactPackageProvider() = default;
+
+  void CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept;
+};
+
+} // namespace winrt::FRNFocusZone::implementation
+
+namespace winrt::FRNFocusZone::factory_implementation
+{
+
+struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider, implementation::ReactPackageProvider> {};
+
+} // namespace winrt::FRNFocusZone::factory_implementation
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.idl b/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.idl
new file mode 100644
index 00000000000..f8a01091d52
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/ReactPackageProvider.idl
@@ -0,0 +1,9 @@
+namespace FRNFocusZone
+{
+  [webhosthidden]
+  [default_interface]
+  runtimeclass ReactPackageProvider : Microsoft.ReactNative.IReactPackageProvider
+  {
+    ReactPackageProvider();
+  };
+}
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/codegen/.clang-format b/packages/components/FocusZone/windows/FRNFocusZone/codegen/.clang-format
new file mode 100644
index 00000000000..9d159247d51
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/codegen/.clang-format
@@ -0,0 +1,2 @@
+DisableFormat: true
+SortIncludes: false
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/codegen/react/components/FRNFocusZoneSpec/FocusZone.g.h b/packages/components/FocusZone/windows/FRNFocusZone/codegen/react/components/FRNFocusZoneSpec/FocusZone.g.h
new file mode 100644
index 00000000000..da24d5e0cd3
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/codegen/react/components/FRNFocusZoneSpec/FocusZone.g.h
@@ -0,0 +1,243 @@
+
+/*
+ * This file is auto-generated from FocusZoneNativeComponent spec file in flow / TypeScript.
+ */
+// clang-format off
+#pragma once
+
+#include <NativeModules.h>
+
+#ifdef RNW_NEW_ARCH
+#include <JSValueComposition.h>
+
+#include <winrt/Microsoft.ReactNative.Composition.h>
+#include <winrt/Microsoft.UI.Composition.h>
+#endif // #ifdef RNW_NEW_ARCH
+
+#ifdef RNW_NEW_ARCH
+
+namespace FRNFocusZoneCodegen {
+
+REACT_STRUCT(FocusZoneProps)
+struct FocusZoneProps : winrt::implements<FocusZoneProps, winrt::Microsoft::ReactNative::IComponentProps> {
+  FocusZoneProps(winrt::Microsoft::ReactNative::ViewProps props, const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom)
+    : ViewProps(props)
+  {
+     if (cloneFrom) {
+       auto cloneFromProps = cloneFrom.as<FocusZoneProps>();
+       navigateAtEnd = cloneFromProps->navigateAtEnd;
+       defaultTabbableElement = cloneFromProps->defaultTabbableElement.Copy();
+       focusZoneDirection = cloneFromProps->focusZoneDirection;
+       use2DNavigation = cloneFromProps->use2DNavigation;
+       tabKeyNavigation = cloneFromProps->tabKeyNavigation;
+       disabled = cloneFromProps->disabled;
+       isTabNavigation = cloneFromProps->isTabNavigation;
+       navigationOrderInRenderOrder = cloneFromProps->navigationOrderInRenderOrder;
+  
+     }
+  }
+
+  void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept {
+    winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this);
+  }
+
+  REACT_FIELD(navigateAtEnd)
+  std::optional<std::string> navigateAtEnd;
+
+  REACT_FIELD(defaultTabbableElement)
+  winrt::Microsoft::ReactNative::JSValue defaultTabbableElement{nullptr};
+
+  REACT_FIELD(focusZoneDirection)
+  std::optional<std::string> focusZoneDirection;
+
+  REACT_FIELD(use2DNavigation)
+  std::optional<bool> use2DNavigation{};
+
+  REACT_FIELD(tabKeyNavigation)
+  std::optional<std::string> tabKeyNavigation;
+
+  REACT_FIELD(disabled)
+  std::optional<bool> disabled{};
+
+  REACT_FIELD(isTabNavigation)
+  std::optional<bool> isTabNavigation{};
+
+  REACT_FIELD(navigationOrderInRenderOrder)
+  std::optional<bool> navigationOrderInRenderOrder{};
+
+  const winrt::Microsoft::ReactNative::ViewProps ViewProps;
+};
+
+struct FocusZoneEventEmitter {
+  FocusZoneEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
+      : m_eventEmitter(eventEmitter) {}
+
+ private:
+  winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr};
+};
+
+template<typename TUserData>
+struct BaseFocusZone {
+
+  virtual void UpdateProps(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::com_ptr<FocusZoneProps> &newProps,
+    const winrt::com_ptr<FocusZoneProps> &/*oldProps*/) noexcept {
+    m_props = newProps;
+  }
+
+  // UpdateLayoutMetrics will only be called if this method is overridden
+  virtual void UpdateLayoutMetrics(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::Microsoft::ReactNative::LayoutMetrics &/*newLayoutMetrics*/,
+    const winrt::Microsoft::ReactNative::LayoutMetrics &/*oldLayoutMetrics*/) noexcept {
+  }
+
+  // UpdateState will only be called if this method is overridden
+  virtual void UpdateState(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::Microsoft::ReactNative::IComponentState &/*newState*/) noexcept {
+  }
+
+  virtual void UpdateEventEmitter(const std::shared_ptr<FocusZoneEventEmitter> &eventEmitter) noexcept {
+    m_eventEmitter = eventEmitter;
+  }
+
+  // MountChildComponentView will only be called if this method is overridden
+  virtual void MountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+           const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &/*args*/) noexcept {
+  }
+
+  // UnmountChildComponentView will only be called if this method is overridden
+  virtual void UnmountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+           const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &/*args*/) noexcept {
+  }
+
+  // Initialize will only be called if this method is overridden
+  virtual void Initialize(const winrt::Microsoft::ReactNative::ComponentView &/*view*/) noexcept {
+  }
+
+  // CreateVisual will only be called if this method is overridden
+  virtual winrt::Microsoft::UI::Composition::Visual CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+    return view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor().CreateSpriteVisual();
+  }
+
+  // FinalizeUpdate will only be called if this method is overridden
+  virtual void FinalizeUpdate(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+                                        winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept {
+  }
+
+  // CreateAutomationPeer will only be called if this method is overridden
+  virtual winrt::Windows::Foundation::IInspectable CreateAutomationPeer(const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+                                        const winrt::Microsoft::ReactNative::CreateAutomationPeerArgs& /*args*/) noexcept {
+    return nullptr;
+  }
+
+  
+
+  const std::shared_ptr<FocusZoneEventEmitter>& EventEmitter() const { return m_eventEmitter; }
+  const winrt::com_ptr<FocusZoneProps>& Props() const { return m_props; }
+
+private:
+  winrt::com_ptr<FocusZoneProps> m_props;
+  std::shared_ptr<FocusZoneEventEmitter> m_eventEmitter;
+};
+
+template <typename TUserData>
+void RegisterFocusZoneNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder,
+    std::function<void(const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder&)> builderCallback) noexcept {
+  packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
+      L"FocusZone", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
+        auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();
+
+        builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
+                              const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) noexcept {
+            return winrt::make<FocusZoneProps>(props, cloneFrom); 
+        });
+
+        builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &newProps,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &oldProps) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateProps(view, newProps ? newProps.as<FocusZoneProps>() : nullptr, oldProps ? oldProps.as<FocusZoneProps>() : nullptr);
+        });
+
+        compBuilder.SetUpdateLayoutMetricsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics,
+                                      const winrt::Microsoft::ReactNative::LayoutMetrics &oldLayoutMetrics) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateLayoutMetrics(view, newLayoutMetrics, oldLayoutMetrics);
+        });
+
+        builder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) noexcept {
+          auto userData = view.UserData().as<TUserData>();
+          userData->UpdateEventEmitter(std::make_shared<FocusZoneEventEmitter>(eventEmitter));
+        });
+
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::FinalizeUpdate != &BaseFocusZone<TUserData>::FinalizeUpdate) {
+            builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     winrt::Microsoft::ReactNative::ComponentViewUpdateMask mask) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->FinalizeUpdate(view, mask);
+          });
+        } 
+
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::UpdateState != &BaseFocusZone<TUserData>::UpdateState) {
+          builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateState(view, newState);
+          });
+        }
+
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::MountChildComponentView != &BaseFocusZone<TUserData>::MountChildComponentView) {
+          builder.SetMountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->MountChildComponentView(view, args);
+          });
+        }
+
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::UnmountChildComponentView != &BaseFocusZone<TUserData>::UnmountChildComponentView) {
+          builder.SetUnmountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->UnmountChildComponentView(view, args);
+          });
+        }
+
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::CreateAutomationPeer != &BaseFocusZone<TUserData>::CreateAutomationPeer) {
+            builder.SetCreateAutomationPeerHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::CreateAutomationPeerArgs& args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->CreateAutomationPeer(view, args);
+          });
+        } 
+
+        compBuilder.SetViewComponentViewInitializer([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+          auto userData = winrt::make_self<TUserData>();
+          if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::Initialize != &BaseFocusZone<TUserData>::Initialize) {
+            userData->Initialize(view);
+          }
+          view.UserData(*userData);
+        });
+
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::CreateVisual != &BaseFocusZone<TUserData>::CreateVisual) {
+          compBuilder.SetCreateVisualHandler([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->CreateVisual(view);
+          });
+        }
+
+        // Allow app to further customize the builder
+        if (builderCallback) {
+          builderCallback(compBuilder);
+        }
+      });
+}
+
+} // namespace FRNFocusZoneCodegen
+
+#endif // #ifdef RNW_NEW_ARCH
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json b/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json
new file mode 100644
index 00000000000..8269746dfd9
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json
@@ -0,0 +1,151 @@
+{
+  "version": 1,
+  "dependencies": {
+    "native,Version=v0.0": {
+      "boost": {
+        "type": "Direct",
+        "requested": "[1.84.0, )",
+        "resolved": "1.84.0",
+        "contentHash": "4el2YP3cNJDVFPdzOso+LxGvdWP2rHxML4siq8VdonNypW2m4q503tHfCj6vK0L1UfxioE2hpFGb4ITEua73tg=="
+      },
+      "Microsoft.ReactNative": {
+        "type": "Direct",
+        "requested": "[0.81.34, )",
+        "resolved": "0.81.34",
+        "contentHash": "bxQ5t0OYrEJNoED9J8RFpRIZv12E7v55mkTRZAr/q5fZGZJWgNf7wWlnO5TFllpEPoqCT7rM+ktUwDH+kdrlww=="
+      },
+      "Microsoft.ReactNative.Cxx": {
+        "type": "Direct",
+        "requested": "[0.81.34, )",
+        "resolved": "0.81.34",
+        "contentHash": "/bMO65lSG4QTmoEw1IPG6xf/8oe//A7QnlF0Ve7oMXdV/uOmwEZWaW8q6H4rohji8jGEpRG3JUCQt9E856qkBg==",
+        "dependencies": {
+          "Microsoft.ReactNative": "0.81.34"
+        }
+      },
+      "Microsoft.VCRTForwarders.140": {
+        "type": "Direct",
+        "requested": "[1.0.2-rc, )",
+        "resolved": "1.0.2-rc",
+        "contentHash": "/r+sjtEeCIGyDhobIZ5hSmYhC/dSyGZxf1SxYJpElUhB0LMCktOMFs9gXrauXypIFECpVynNyVjAmJt6hjJ5oQ=="
+      },
+      "Microsoft.Windows.CppWinRT": {
+        "type": "Direct",
+        "requested": "[2.0.230706.1, )",
+        "resolved": "2.0.230706.1",
+        "contentHash": "l0D7oCw/5X+xIKHqZTi62TtV+1qeSz7KVluNFdrJ9hXsst4ghvqQ/Yhura7JqRdZWBXAuDS0G0KwALptdoxweQ=="
+      },
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.8.260508005, )",
+        "resolved": "1.8.260508005",
+        "contentHash": "+aA+zrvqJKgsn/1TPOSR0Uy7dkMO5jI/+cDWPu2pWmXe4KQxYkR8gQFY9IrfbgCxxSd/yl1zMcAKD/4HBbNqaw==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.AI": "[1.8.76]",
+          "Microsoft.WindowsAppSDK.Base": "[1.8.251216001]",
+          "Microsoft.WindowsAppSDK.DWrite": "[1.8.25122902]",
+          "Microsoft.WindowsAppSDK.Foundation": "[1.8.260505001]",
+          "Microsoft.WindowsAppSDK.InteractiveExperiences": "[1.8.260430001]",
+          "Microsoft.WindowsAppSDK.ML": "[1.8.2197]",
+          "Microsoft.WindowsAppSDK.Runtime": "[1.8.260508005]",
+          "Microsoft.WindowsAppSDK.Widgets": "[1.8.251231004]",
+          "Microsoft.WindowsAppSDK.WinUI": "[1.8.260505002]"
+        }
+      },
+      "Microsoft.Web.WebView2": {
+        "type": "Transitive",
+        "resolved": "1.0.3179.45",
+        "contentHash": "3pokSH5CnN0G6rGhGFo1y87inxYhNxBQ2Vdf0wlvBj99KHxQJormjDACmqRnFeUsmuNFIhWwfAL1ztq7wD5qRA=="
+      },
+      "Microsoft.Windows.SDK.BuildTools": {
+        "type": "Transitive",
+        "resolved": "10.0.26100.4654",
+        "contentHash": "2mgcOlj/t2RfSyyw+pVESfO+Tk1RkfQzto9Vrq42M1lUQIfQEwbi8QLha9GXWIOj+TFzeHIEJckIoF25mgiM8A=="
+      },
+      "Microsoft.Windows.SDK.BuildTools.MSIX": {
+        "type": "Transitive",
+        "resolved": "1.7.20250829.1",
+        "contentHash": "IMdvRmCIZnBS5GkYnv0po1bcx6U1OF39pqA4TphQ9evDzpCRoSE19/PkDvlUNNrBavTsLIEJgd/TAIFner75ow=="
+      },
+      "Microsoft.WindowsAppSDK.AI": {
+        "type": "Transitive",
+        "resolved": "1.8.76",
+        "contentHash": "Ayn9QybcwzH+c8eQlE7dm2oO3Jrcn2uohLcsHJpCbLOAfcisjzwtSBe0oyulbaJ86R4eDSX3RDS25tsjGpIqyQ==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001",
+          "Microsoft.WindowsAppSDK.Foundation": "1.8.260501000"
+        }
+      },
+      "Microsoft.WindowsAppSDK.Base": {
+        "type": "Transitive",
+        "resolved": "1.8.251216001",
+        "contentHash": "PS1wriuFknz3W2F2P/e6RvOTM35w89Lsj/f0QmUEPrJjKnc+jM0JLX1vfdytI14y1gNRUTm9uclwP0aH/SVU5w==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.26100.4654",
+          "Microsoft.Windows.SDK.BuildTools.MSIX": "1.7.20250829.1"
+        }
+      },
+      "Microsoft.WindowsAppSDK.DWrite": {
+        "type": "Transitive",
+        "resolved": "1.8.25122902",
+        "contentHash": "zFNn07i7Cyz62Y8FnPQAyzeZK7ww3m9t42i9pzy4C04pNbyUDQ4fG7pB6VSh6n4EyFuYtuFQuDzt4mKmXFrkrg==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001"
+        }
+      },
+      "Microsoft.WindowsAppSDK.Foundation": {
+        "type": "Transitive",
+        "resolved": "1.8.260505001",
+        "contentHash": "41SSoEn3sKKCAVPA/w18zVJwV1C7aDEkPS2f6Zyp19m27tDEmteEp0XS3Ln3b0ElYR4FfPEPvIDbJPSA9vePGw==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001",
+          "Microsoft.WindowsAppSDK.InteractiveExperiences": "1.8.260430001"
+        }
+      },
+      "Microsoft.WindowsAppSDK.InteractiveExperiences": {
+        "type": "Transitive",
+        "resolved": "1.8.260430001",
+        "contentHash": "fTPCnQb3ZarMh9khlEfbLDllcZzK0tSP+2S6W/T4cPyLLSAmARm8Gd3AC5kqubnDjzTvG+1lNZ1bZGFsIHplJQ==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001"
+        }
+      },
+      "Microsoft.WindowsAppSDK.ML": {
+        "type": "Transitive",
+        "resolved": "1.8.2197",
+        "contentHash": "6Bc1SOLd5HicY3GbF+zr76YBfH4iZOKeEGxTK/lHKAK2ExZTWavOADxB2CKSi/irF4dWSngUdRFopWPmckJ6fA==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001",
+          "Microsoft.WindowsAppSDK.Foundation": "1.8.260505001"
+        }
+      },
+      "Microsoft.WindowsAppSDK.Runtime": {
+        "type": "Transitive",
+        "resolved": "1.8.260508005",
+        "contentHash": "2JqXzA4heHSkkaXJNyEvYtpv2wsEUMhwQzgXmZsFmYSkUXSdeVc6hdHcWoBK1SY9l1Sjd1brLt7h16kIpgh2kA==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001"
+        }
+      },
+      "Microsoft.WindowsAppSDK.Widgets": {
+        "type": "Transitive",
+        "resolved": "1.8.251231004",
+        "contentHash": "bIWqQYR8DCoB1SoPOMil5AtgtkTn438wJTdpsHgyO/6o7Eh7PMP5BzrR0KbDsFqy+4LhPWQ4vtwko5k93fECcA==",
+        "dependencies": {
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001"
+        }
+      },
+      "Microsoft.WindowsAppSDK.WinUI": {
+        "type": "Transitive",
+        "resolved": "1.8.260505002",
+        "contentHash": "/hGl6EOmo8aeJR2bYbOmGhOicnJK4EY+u+cQI+jm8H1uXThfMX32DsfKOt9LkOcu8AKX3j5FpiBay8ObUSytIw==",
+        "dependencies": {
+          "Microsoft.Web.WebView2": "1.0.3179.45",
+          "Microsoft.WindowsAppSDK.Base": "1.8.251216001",
+          "Microsoft.WindowsAppSDK.Foundation": "1.8.260505001",
+          "Microsoft.WindowsAppSDK.InteractiveExperiences": "1.8.260430001"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/pch.cpp b/packages/components/FocusZone/windows/FRNFocusZone/pch.cpp
new file mode 100644
index 00000000000..1d9f38c57d6
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/pch.cpp
@@ -0,0 +1 @@
+#include "pch.h"
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/pch.h b/packages/components/FocusZone/windows/FRNFocusZone/pch.h
new file mode 100644
index 00000000000..f58638082cc
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/pch.h
@@ -0,0 +1,40 @@
+// pch.h : include file for standard system include files,
+// or project specific include files that are used frequently, but
+// are changed infrequently
+//
+
+#pragma once
+
+#include "targetver.h"
+
+#define NOMINMAX 1
+#define WIN32_LEAN_AND_MEAN 1
+#define WINRT_LEAN_AND_MEAN 1
+
+// Windows Header Files
+#include <windows.h>
+#undef GetCurrentTime
+#include <unknwn.h>
+
+// WinRT Header Files
+#include <winrt/base.h>
+#include <CppWinRTIncludes.h>
+#include <winrt/Microsoft.ReactNative.Composition.h>
+#include <winrt/Microsoft.ReactNative.Composition.Input.h>
+#include <winrt/Microsoft.ReactNative.h>
+#include <winrt/Windows.System.h>
+
+// C RunTime Header Files
+#include <malloc.h>
+#include <memory.h>
+#include <stdlib.h>
+#include <tchar.h>
+
+#include <algorithm>
+#include <cmath>
+#include <cstdint>
+#include <optional>
+#include <string>
+#include <vector>
+
+// Reference additional headers your project requires here
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/resource.h b/packages/components/FocusZone/windows/FRNFocusZone/resource.h
new file mode 100644
index 00000000000..fe63e7c1ad6
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/resource.h
@@ -0,0 +1,5 @@
+//
+// Microsoft Visual C++ generated include file.
+// Used by FRNFocusZone.rc
+
+#pragma once
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/targetver.h b/packages/components/FocusZone/windows/FRNFocusZone/targetver.h
new file mode 100644
index 00000000000..87c0086de75
--- /dev/null
+++ b/packages/components/FocusZone/windows/FRNFocusZone/targetver.h
@@ -0,0 +1,8 @@
+#pragma once
+
+// Including SDKDDKVer.h defines the highest available Windows platform.
+
+// If you wish to build your application for a previous Windows platform, include WinSDKVer.h and
+// set the _WIN32_WINNT macro to the platform you wish to support before including SDKDDKVer.h.
+
+#include <SDKDDKVer.h>
diff --git a/packages/components/FocusZone/windows/NuGet.Config b/packages/components/FocusZone/windows/NuGet.Config
new file mode 100644
index 00000000000..aee3137fd74
--- /dev/null
+++ b/packages/components/FocusZone/windows/NuGet.Config
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <config>
+    <add key="repositoryPath" value="packages" />
+  </config>
+  <packageSources>
+    <clear />
+    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>
+</configuration>
diff --git a/packages/native/Callout/windows/Callout/packages.lock.json b/packages/native/Callout/windows/Callout/packages.lock.json
index 17e459d2609..8269746dfd9 100644
--- a/packages/native/Callout/windows/Callout/packages.lock.json
+++ b/packages/native/Callout/windows/Callout/packages.lock.json
@@ -10,17 +10,17 @@
       },
       "Microsoft.ReactNative": {
         "type": "Direct",
-        "requested": "[0.81.32, )",
-        "resolved": "0.81.32",
-        "contentHash": "Ks1M8X7hk/yFF0LV4PymQelr1A2PqselgqBIuJIvJgI0bnO0OMXDXqj6C1SDJCAaKUa5U3/G78h+yUPa4EKsJQ=="
+        "requested": "[0.81.34, )",
+        "resolved": "0.81.34",
+        "contentHash": "bxQ5t0OYrEJNoED9J8RFpRIZv12E7v55mkTRZAr/q5fZGZJWgNf7wWlnO5TFllpEPoqCT7rM+ktUwDH+kdrlww=="
       },
       "Microsoft.ReactNative.Cxx": {
         "type": "Direct",
-        "requested": "[0.81.32, )",
-        "resolved": "0.81.32",
-        "contentHash": "7sk1LmAne4vDt5BWUg2drRw85ktACDdBLBMGK2y0iXWwZjayhmzkMBmVhX4zoN6t+bYu/Z2/LfyOVqQJCok7Sg==",
+        "requested": "[0.81.34, )",
+        "resolved": "0.81.34",
+        "contentHash": "/bMO65lSG4QTmoEw1IPG6xf/8oe//A7QnlF0Ve7oMXdV/uOmwEZWaW8q6H4rohji8jGEpRG3JUCQt9E856qkBg==",
         "dependencies": {
-          "Microsoft.ReactNative": "0.81.32"
+          "Microsoft.ReactNative": "0.81.34"
         }
       },
       "Microsoft.VCRTForwarders.140": {
diff --git a/yarn.lock b/yarn.lock
index 2e2aa006673..d8a8776dc4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3025,6 +3025,7 @@ __metadata:
     "@fluentui-react-native/callout": "workspace:*"
     "@fluentui-react-native/design": "workspace:*"
     "@fluentui-react-native/desktop-driver": "workspace:*"
+    "@fluentui-react-native/focus-zone": "workspace:*"
     "@fluentui-react-native/framework-base": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
     "@react-native-community/cli": "npm:^20.0.0"
@@ -4110,25 +4111,24 @@ __metadata:
   resolution: "@fluentui-react-native/focus-zone@workspace:packages/components/FocusZone"
   dependencies:
     "@babel/core": "catalog:"
-    "@fluentui-react-native/adapters": "workspace:*"
-    "@fluentui-react-native/interactive-hooks": "workspace:*"
+    "@fluentui-react-native/desktop-driver": "workspace:*"
+    "@fluentui-react-native/framework-base": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
     "@office-iss/react-native-win32": "npm:^0.81.8"
     "@react-native-community/cli": "npm:^20.0.0"
     "@react-native-community/cli-platform-android": "npm:^20.0.0"
     "@react-native-community/cli-platform-ios": "npm:^20.0.0"
     "@react-native/babel-preset": "npm:^0.81.0"
-    "@react-native/metro-babel-transformer": "npm:^0.81.0"
     "@react-native/metro-config": "npm:^0.81.0"
+    "@testing-library/react-native": "catalog:"
     "@types/react": "npm:~19.1.4"
     "@types/react-test-renderer": "npm:^19.1.0"
-    "@uifabricshared/foundation-composable": "workspace:*"
-    "@uifabricshared/foundation-settings": "workspace:*"
     react: "npm:19.1.4"
     react-native: "npm:^0.81.6"
     react-native-macos: "npm:^0.81.0"
     react-native-windows: "npm:^0.81.0"
     react-test-renderer: "npm:19.1.4"
+    test-renderer: "catalog:"
   peerDependencies:
     "@office-iss/react-native-win32": ^0.74.0 || ^0.81.0
     "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4