jfs-components 0.0.6 → 0.0.7

package/src/components/Accordion/Accordion.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as AccordionStories from './Accordion.stories';
 import Accordion from './Accordion';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/src/components/ActionFooter/ActionFooter.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as ActionFooterStories from './ActionFooter.stories';
 import ActionFooter from './ActionFooter';
 

package/src/components/ActionFooter/ActionFooter.tsx

@@ -6,6 +6,7 @@ import {
   Platform,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type ActionFooterProps = {
   /**
@@ -108,22 +109,12 @@ function ActionFooter({
   }
 
   // Web-specific box-shadow
-  const webShadow = Platform.OS === 'web' 
+  const webShadow = Platform.OS === 'web'
     ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
     : {}
 
   // Pass modes prop to all slot children
-  const childrenWithModes = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      // Merge modes: child's modes take precedence over parent's modes
-      const childModes = (child.props as any).modes
-      const mergedModes = childModes ? { ...modes, ...childModes } : modes
-      return React.cloneElement(child as React.ReactElement<any>, {
-        modes: mergedModes,
-      })
-    }
-    return child
-  })
+  const childrenWithModes = cloneChildrenWithModes(children, modes)
 
   return (
     <View

package/src/components/ActionTile/ActionTile.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/blocks';
 import * as ActionTileStories from './ActionTile.stories';
 
 <Meta of={ActionTileStories} />
@@ -15,6 +15,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 ```tsx

package/src/components/AppBar/AppBar.mdx

@@ -1,63 +1,75 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
 import * as AppBarStories from './AppBar.stories';
-import AppBar from './AppBar';
-import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
 
 <Meta of={AppBarStories} />
 
 # AppBar
 
-Helper function to recursively clone children and pass modes prop to components that accept it.
+The `AppBar` component supports two main types tailored for different hierarchy levels in the app:
+- **MainPage**: Taller bar, typically used on landing pages. Supports branding (leading), and varied actions.
+- **SubPage**: Standard height, used for inner pages. Typically features a "Back" arrow and a page title.
+
 
 ## Available Collections and Modes
 
-This component does not use any design token collections with multiple modes.
-## Usage
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-<Canvas>
-  <Story of={AppBarStories.Default} />
-</Canvas>
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
 
+```tsx
+import { AppBar } from 'jfs-components';
+// or relative path...
 
-<AccessibilitySection
-  items={[
-    'Set `accessibilityLabel` and `accessibilityHint` on AppBar/AppBarHome to describe the screen or navigation target.',
-    'Give every IconButton in leading/actions slots a readable label; pair with `onLeadingPress` for back/home navigation instead of relying on gestures.',
-    'Keep middle slot content informational only—the wrapper is hidden from the accessibility tree to avoid duplicate announcements.',
-    'Hide decorative icons from assistive tech by setting `accessibilityElementsHidden`/`importantForAccessibility` on custom elements.',
-  ]}
+// MainPage Example
+<AppBar
+  type="MainPage"
+  leadingSlot={<JioLogo />}
+  actionsSlot={
+    <>
+      <IconButton iconName="ic_search" />
+      <IconButton iconName="ic_notification" />
+      <Avatar />
+    </>
+  }
 />
 
-<AnatomySection>
-  <ul>
-    <li><strong>Leading</strong> — default back IconButton; replace with any element (receives merged `modes`).</li>
-    <li><strong>Middle slot</strong> — centered, non-interactive title/search content layered above the bar.</li>
-    <li><strong>Actions slot</strong> — right-aligned IconButtons; defaults to search and overflow buttons.</li>
-    <li><strong>AppBarHome</strong> — leading IconButton + actions + Avatar arranged on the right.</li>
-  </ul>
-</AnatomySection>
-
-<UsageConstraintsSection
-  items={[
-    'Pass shared `modes` so token-driven spacing and sizes stay consistent across slots and Avatar.',
-    'Avoid focusable controls in the middle slot; it is for display content and hidden from the accessibility tree.',
-    'Provide explicit `onLeadingPress`/`onPress` handlers to avoid inert navigation controls.',
-    'Override layout with `style` sparingly—keep token padding to preserve tap targets.',
-  ]}
+// SubPage Example
+<AppBar
+  type="SubPage"
+  // Default leading is back arrow, so leadingSlot can be omitted if that's desired
+  onLeadingPress={() => navigation.goBack()}
+  middleSlot={<Text style={{ fontWeight: 'bold' }}>Settings</Text>}
+  actionsSlot={<IconButton iconName="ic_more_horizontal" />}
 />
+```
+
 ## Props
 
-<ArgsTable of={AppBar} />
+<Controls />
+
+## Slots & Modes
+
+The `AppBar` automatically passes `modes` down to all children within `leadingSlot`, `middleSlot`, and `actionsSlot`.
+This ensures that if you switch the AppBar's mode (e.g. to Dark Mode), all buttons and text inside will adapt if they respect the `modes` prop.
 
 ## Design Tokens
 
 This component uses the following design tokens, resolved through `getVariableByName`:
 
-- **`appBarActions/actions/gap`**
-- **`appBarActions/padding/horizontal`**
-- **`appBarActions/padding/vertical`**
-- **`appBarHome/actions/gap`**
-- **`appBarHome/padding/horizontal`**
-- **`appBarHome/padding/vertical`**
+- **`appBar/mainPage/actions/gap`**
+- **`appBar/mainPage/background`**
+- **`appBar/mainPage/padding/horizontal`**
+- **`appBar/mainPage/padding/vertical`**
+- **`appBar/subPage/actions/gap`**
+- **`appBar/subPage/background`**
+- **`appBar/subPage/padding/horizontal`**
+- **`appBar/subPage/padding/vertical`**
 
 All tokens support mode-based theming through the `modes` prop.

package/src/components/AppBar/AppBar.tsx

@@ -1,13 +1,15 @@
 import React, { useState } from 'react'
-import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { View, type StyleProp, type ViewStyle, Pressable } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconButton from '../IconButton/IconButton'
 import Avatar from '../Avatar/Avatar'
+import NavArrow from '../NavArrow/NavArrow'
+// We might need to import Image or Svg if we had the assets locally, but for now we'll use placeholders or standard icons for defaults.
+// The user prompt mentioned "Use getVariableByName... strict camelCase".
 
 /**
  * Helper function to recursively clone children and pass modes prop to components that accept it.
- * This ensures that all child components in slots receive the modes prop from the parent.
  */
 function cloneChildrenWithModes(
   children: React.ReactNode,
@@ -24,7 +26,6 @@ function cloneChildrenWithModes(
 
     // Clone the child with modes prop if it doesn't already have one
     // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
     const existingModes = (child.props as any)?.modes
     const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
 
@@ -48,153 +49,176 @@ function cloneChildrenWithModes(
   })?.filter((child) => child !== null && child !== undefined) as React.ReactNode[] ?? []
 }
 
-/**
- * AppBar component that mirrors the Figma "AppBar" component.
- *
- * This component supports:
- *  - **leading** IconButton (default: back button with ic_chevron_left)
- *  - **middle** slot for custom content (typically title or search)
- *  - **actions** slot for custom action buttons (default: two IconButtons)
- *  - **design-token driven styling** via `getVariableByName` and `modes`
- *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "Middle" → `middleSlot`
- *  - Slot "Actions" → `actionsSlot`
- *
- * @component
- * @param {Object} props
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to IconButton with ic_chevron_left.
- * @param {React.ReactNode} [props.middleSlot] - Optional custom slot for middle content (Figma Slot "Middle").
- * @param {React.ReactNode} [props.actionsSlot] - Optional custom slot for action buttons (Figma Slot "Actions").
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
- * @param {Function} [props.onLeadingPress] - Callback when leading button is pressed (only used if leading is not provided).
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for the app bar
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
-type AppBarProps = {
-  leading?: React.ReactNode;
+type AppBarType = 'MainPage' | 'SubPage'
+
+export type AppBarProps = {
+  /**
+   * Type of the App Bar.
+   * - `MainPage`: Taller, usually has Jio logo (leading) and Profile/Notif (actions).
+   * - `SubPage`: Shorter, usually has Back arrow (leading) and Page Title (middle).
+   * @default "MainPage"
+   */
+  type?: AppBarType;
+  /**
+   * Slot for the leading element.
+   * Defaults:
+   * - MainPage: Jio Logo (placeholder circle for now if no asset)
+   * - SubPage: Back Icon Button
+   */
+  leadingSlot?: React.ReactNode;
+  /**
+   * Slot for the middle content.
+   * Often used for "Page Title" in SubPage.
+   */
   middleSlot?: React.ReactNode;
+  /**
+   * Slot for the actions on the right.
+   */
   actionsSlot?: React.ReactNode;
+  /**
+   * Token modes to override.
+   */
   modes?: Record<string, any>;
+  /**
+   * Callback for the default leading slot press (e.g. back button).
+   */
   onLeadingPress?: () => void;
+  /**
+   * Container style override.
+   */
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 
-function AppBar({
-  leading,
+export default function AppBar({
+  type = 'MainPage',
+  leadingSlot,
   middleSlot,
   actionsSlot,
   modes: propModes = {},
   onLeadingPress,
   style,
-  accessibilityLabel = "App bar",
+  accessibilityLabel,
   accessibilityHint,
   ...rest
 }: AppBarProps) {
   const { modes: globalModes } = useTokens()
   const modes = { ...globalModes, ...propModes }
 
-  const [childFocused, setChildFocused] = useState(false)
+  const isMain = type === 'MainPage'
+  const isSub = type === 'SubPage'
 
-  function injectFocusHandlers(node: React.ReactNode): React.ReactNode {
-    if (!React.isValidElement(node)) return node
-    const existingOnFocus = (node.props as any)?.onFocus
-    const existingOnBlur = (node.props as any)?.onBlur
-    return React.cloneElement(node, {
-      ...(node.props as any),
-      onFocus: (e: any) => {
-        setChildFocused(true)
-        existingOnFocus?.(e)
-      },
-      onBlur: (e: any) => {
-        setChildFocused(false)
-        existingOnBlur?.(e)
-      },
-    })
-  }
-  // Resolve container tokens
-  const paddingHorizontal = getVariableByName('appBarActions/padding/horizontal', modes) ?? 16
-  const paddingVertical = getVariableByName('appBarActions/padding/vertical', modes) ?? 10
-  const actionsGap = getVariableByName('appBarActions/actions/gap', modes) ?? 8
+  // --- Tokens ---
+  // Construct token keys based on type. keys must be camelCase as per instruction.
+  // We use explicit string literals so that the extraction script can find them.
+  const paddingHorizontal = isMain
+    ? getVariableByName('appBar/mainPage/padding/horizontal', modes)
+    : getVariableByName('appBar/subPage/padding/horizontal', modes)
 
+  const paddingVertical = isMain
+    ? getVariableByName('appBar/mainPage/padding/vertical', modes)
+    : getVariableByName('appBar/subPage/padding/vertical', modes)
+
+  const backgroundColor = isMain
+    ? getVariableByName('appBar/mainPage/background', modes)
+    : getVariableByName('appBar/subPage/background', modes)
+
+  const actionsGap = isMain
+    ? getVariableByName('appBar/mainPage/actions/gap', modes)
+    : getVariableByName('appBar/subPage/actions/gap', modes)
+
+  // Layout styles
   const containerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal,
-    paddingVertical,
-    minHeight: 52,
+    paddingHorizontal: paddingHorizontal ?? 16,
+    paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
+    backgroundColor: backgroundColor ?? '#FFFFFF',
+    // We can set minHeight if we want to enforce consistency, but padding should dictate it mostly.
+    // Figma shows specific heights implicitly via padding + content.
+    // MainPage: h=68 (16 top/bot padding? 36 height content?)
+    // SubPage: h=52
   }
 
-  const actionsRowStyle: ViewStyle = {
-    flexDirection: 'row',
-    gap: actionsGap,
-    alignItems: 'center',
+  // --- Leading Slot Default ---
+  // SubPage default: Back Arrow
+  // MainPage default: Jio Logo (We'll use a placeholder or basic text if no asset, 
+  // but looking at "AppBarHome" before, it had "ic_hellojio". Let's stick to generic defaults or empty if not provided,
+  // but usually a component library provides sensible defaults.)
+
+  // Actually, let's implement the specific defaults mentioned in the plan/analysis
+  // SubPage: NavArrow props (icon, etc). We'll use IconButton with 'ic_chevron_left' as a close approximation.
+
+  let defaultLeading: React.ReactNode = null
+  if (leadingSlot === undefined) {
+    if (isSub) {
+      defaultLeading = (
+        <Pressable
+          {...(onLeadingPress ? { onPress: onLeadingPress } : {})}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Back"
+          style={({ pressed }) => ({
+            opacity: pressed ? 0.7 : 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          })}
+        >
+          <NavArrow direction="Back" modes={modes} />
+        </Pressable>
+      )
+    } else {
+      // MainPage default leading: often the Brand Logo.
+      // We'll leave it empty or render a placeholder if desired, but standard AppBar often lets consumer pass logo.
+      // Previous code had `leadingIconName='ic_hellojio'` for Home.
+      // We will render nothing by default for MainPage leading to keep it flexible, OR a specialized Logo component if we had one.
+      // For now, let's assume consumer passes it for MainPage, or we leave empty.
+      // Wait, Figma screenshot shows "Jio" logo.
+      // The user said: "mostly token namings are 'camelCase'. Maximize existing component usage."
+      // I'll leave defaultLeading as null for MainPage unless I have a "BrandLogo" component.
+    }
   }
 
-  // Default leading: IconButton with back icon
-  const defaultLeading = leading ?? (
-    <IconButton
-      iconName="ic_chevron_left"
-      modes={modes}
-      {...(onLeadingPress !== undefined ? { onPress: onLeadingPress } : {})}
-      accessibilityLabel="Go back"
-      accessibilityHint="Navigates to the previous screen"
-    />
-  )
-
-  // Default actions: Two IconButtons
-  const defaultActions = actionsSlot ?? (
-    <View style={actionsRowStyle}>
-      <IconButton
-        iconName="ic_hellojio"
-        modes={modes}
-        onPress={() => { }}
-        accessibilityLabel="Hello Jio"
-        accessibilityHint="Opens Hello Jio menu"
-      />
-      <IconButton
-        iconName="ic_more_horizontal"
-        modes={modes}
-        onPress={() => { }}
-        accessibilityLabel="More options"
-        accessibilityHint="Opens additional options menu"
-      />
-    </View>
-  )
+  // --- Process Slots ---
+  const processedLeading = leadingSlot
+    ? cloneChildrenWithModes([leadingSlot], modes)[0]
+    : defaultLeading
 
-  // Clone slot children and pass modes to all children that accept it
-  const processedMiddleSlot = middleSlot
+  const processedMiddle = middleSlot
     ? cloneChildrenWithModes(React.Children.toArray(middleSlot), modes)
     : null
 
-  const processedActionsSlot = actionsSlot
-    ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
-    : defaultActions
+  // Actions Gap wrapper
+  // The Figma has "Actions" slot with a gap.
+  const actionsStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: actionsGap ?? 0,
+  }
 
-  // Process leading if it's a React element
-  const processedLeading = React.isValidElement(leading)
-    ? injectFocusHandlers(cloneChildrenWithModes([leading], modes)[0])
-    : defaultLeading
+  const processedActions = actionsSlot
+    ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
+    : null
 
   return (
     <View
-      style={[
-        containerStyle,
-        childFocused ? { borderBottomWidth: 2, borderBottomColor: '#222' } : null,
-        style,
-      ]}
+      style={[containerStyle, style]}
       accessibilityRole="header"
-      accessibilityLabel={accessibilityLabel}
-      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      accessibilityLabel={accessibilityLabel || (isMain ? "Main Header" : "Sub Header")}
+      {...(accessibilityHint ? { accessibilityHint } : {})}
       {...rest}
     >
-      {processedLeading}
-      {processedMiddleSlot && (
+      {/* Leading Section */}
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {processedLeading}
+      </View>
+
+      {/* Middle Section (Absolute centered often, or flex? Figma shows "Slot 'Middle'" inside a wrapper that is absolute center) */}
+      {/* Figma: "absolute flex h-full items-center justify-center left-1/2 ... translate-x-[-50%]" */}
+      {/* We should only render this wrapper if there IS middle content, to avoid z-index blocking hits. */}
+      {processedMiddle && (
         <View
           style={{
             position: 'absolute',
@@ -204,164 +228,19 @@ function AppBar({
             bottom: 0,
             alignItems: 'center',
             justifyContent: 'center',
-            paddingHorizontal: 21,
-            pointerEvents: 'box-none',
+            zIndex: -1, // Behind actions if overlap? Or should be on top? 
+            // Usually middle title shouldn't block actions. `pointerEvents="box-none"` is safer.
           }}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
+          pointerEvents="box-none"
         >
-          {processedMiddleSlot}
+          {processedMiddle}
         </View>
       )}
-      <View style={actionsRowStyle}>
-        {Array.isArray(processedActionsSlot)
-          ? processedActionsSlot.map((n) => injectFocusHandlers(n))
-          : injectFocusHandlers(processedActionsSlot)}
-      </View>
-    </View>
-  )
-}
-
-/**
- * AppBarHome component that mirrors the Figma "AppBar.home" component.
- *
- * This component supports:
- *  - **leading** IconButton (default: circular button with customizable icon)
- *  - **actions** slot for custom action buttons (default: search and notification IconButtons)
- *  - **avatar** Avatar component on the right
- *  - **design-token driven styling** via `getVariableByName` and `modes`
- *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "Actions" → `actionsSlot`
- *
- * @component
- * @param {Object} props
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to IconButton with customizable icon.
- * @param {React.ReactNode} [props.actionsSlot] - Optional custom slot for action buttons (Figma Slot "Actions").
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
- * @param {Function} [props.onLeadingPress] - Callback when leading button is pressed (only used if leading is not provided).
- * @param {string} [props.leadingIconName] - Icon name for default leading button (default: 'ic_hellojio').
- * @param {Object} [props.avatarProps] - Props to pass to Avatar component.
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for the app bar
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
-type AppBarHomeProps = {
-  leading?: React.ReactNode;
-  actionsSlot?: React.ReactNode;
-  modes?: Record<string, any>;
-  onLeadingPress?: () => void;
-  leadingIconName?: string;
-  avatarProps?: React.ComponentProps<typeof Avatar>;
-  style?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
-
-function AppBarHome({
-  leading,
-  actionsSlot,
-  modes: propModes = {},
-  onLeadingPress,
-  leadingIconName = 'ic_hellojio',
-  avatarProps,
-  style,
-  accessibilityLabel = "Home app bar",
-  accessibilityHint,
-  ...rest
-}: AppBarHomeProps) {
-  const { modes: globalModes } = useTokens()
-  const modes = { ...globalModes, ...propModes }
-
-  // Resolve container tokens
-  const paddingHorizontal = getVariableByName('appBarHome/padding/horizontal', modes) ?? 16
-  const paddingVertical = getVariableByName('appBarHome/padding/vertical', modes) ?? 16
-  const actionsGap = getVariableByName('appBarHome/actions/gap', modes) ?? 0
-
-  const containerStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal,
-    paddingVertical,
-    width: '100%',
-  }
-
-  const homeActionsRowStyle: ViewStyle = {
-    flexDirection: 'row',
-    gap: actionsGap,
-    alignItems: 'center',
-  }
-
-  // Default leading: IconButton with customizable icon
-  // The IconButton already handles its own circular styling, so we just use it directly
-  const defaultLeading = leading ?? (
-    <IconButton
-      iconName={leadingIconName}
-      modes={modes}
-      {...(onLeadingPress !== undefined ? { onPress: onLeadingPress } : {})}
-      accessibilityLabel="Home"
-      accessibilityHint="Opens home menu"
-    />
-  )
-
-  // Default actions: Search and Notification IconButtons
-  const defaultActions = actionsSlot ?? (
-    <View style={homeActionsRowStyle}>
-      <IconButton
-        iconName="ic_search"
-        modes={modes}
-        onPress={() => { }}
-        accessibilityLabel="Search"
-        accessibilityHint="Opens search screen"
-      />
-      <IconButton
-        iconName="ic_notification"
-        modes={modes}
-        onPress={() => { }}
-        accessibilityLabel="Notifications"
-        accessibilityHint="Opens notifications"
-      />
-    </View>
-  )
-
-  // Clone slot children and pass modes to all children that accept it
-  const processedActionsSlot = actionsSlot
-    ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
-    : defaultActions
-
-  // Process leading if it's a React element
-  const processedLeading = React.isValidElement(leading)
-    ? cloneChildrenWithModes([leading], modes)[0]
-    : defaultLeading
 
-  // Process avatar with modes
-  const avatarModes = avatarProps?.modes ? { ...modes, ...avatarProps.modes } : modes
-  const processedAvatar = (
-    <Avatar
-      {...(avatarProps ?? {})}
-      modes={avatarModes}
-    />
-  )
-
-  return (
-    <View
-      style={[containerStyle, style]}
-      accessibilityRole="header"
-      accessibilityLabel={accessibilityLabel}
-      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
-      {...rest}
-    >
-      {processedLeading}
-      <View style={homeActionsRowStyle}>
-        {processedActionsSlot}
-        {processedAvatar}
+      {/* Actions Section */}
+      <View style={actionsStyle}>
+        {processedActions}
       </View>
     </View>
   )
 }
-
-export default AppBar
-export { AppBarHome }
-