jfs-components 0.0.5 → 0.0.7

package/lib/module/components/AppBar/AppBar.js

@@ -1,14 +1,15 @@
 "use strict";
 
-import React, { useState } from 'react';
-import { View } from 'react-native';
+import React from 'react';
+import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import IconButton from '../IconButton/IconButton';
-import Avatar from '../Avatar/Avatar';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+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.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function cloneChildrenWithModes(children, modes) {
@@ -23,7 +24,6 @@ function cloneChildrenWithModes(children, modes) {
 
     // 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?.modes;
     const mergedModes = existingModes ? {
       ...modes,
@@ -40,126 +40,123 @@ function cloneChildrenWithModes(children, modes) {
     }, processedChildren);
   })?.filter(child => child !== null && child !== undefined) ?? [];
 }
-
-/**
- * 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
- */
-
-function AppBar({
-  leading,
+export default function AppBar({
+  type = 'MainPage',
+  leadingSlot,
   middleSlot,
   actionsSlot,
-  modes = {},
+  modes: propModes = {},
   onLeadingPress,
   style,
-  accessibilityLabel = "App bar",
+  accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
-  const [childFocused, setChildFocused] = useState(false);
-  function injectFocusHandlers(node) {
-    if (! /*#__PURE__*/React.isValidElement(node)) return node;
-    const existingOnFocus = node.props?.onFocus;
-    const existingOnBlur = node.props?.onBlur;
-    return /*#__PURE__*/React.cloneElement(node, {
-      ...node.props,
-      onFocus: e => {
-        setChildFocused(true);
-        existingOnFocus?.(e);
-      },
-      onBlur: e => {
-        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;
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const isMain = type === 'MainPage';
+  const isSub = type === 'SubPage';
+
+  // --- 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 = {
     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 = {
-    flexDirection: 'row',
-    gap: actionsGap,
-    alignItems: 'center'
-  };
-
-  // Default leading: IconButton with back icon
-  const defaultLeading = leading ?? /*#__PURE__*/_jsx(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 ?? /*#__PURE__*/_jsxs(View, {
-    style: actionsRowStyle,
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      iconName: "ic_hellojio",
-      modes: modes,
-      onPress: () => {},
-      accessibilityLabel: "Hello Jio",
-      accessibilityHint: "Opens Hello Jio menu"
-    }), /*#__PURE__*/_jsx(IconButton, {
-      iconName: "ic_more_horizontal",
-      modes: modes,
-      onPress: () => {},
-      accessibilityLabel: "More options",
-      accessibilityHint: "Opens additional options menu"
-    })]
-  });
+  // --- 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 = null;
+  if (leadingSlot === undefined) {
+    if (isSub) {
+      defaultLeading = /*#__PURE__*/_jsx(Pressable, {
+        ...(onLeadingPress ? {
+          onPress: onLeadingPress
+        } : {}),
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Back",
+        style: ({
+          pressed
+        }) => ({
+          opacity: pressed ? 0.7 : 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        }),
+        children: /*#__PURE__*/_jsx(NavArrow, {
+          direction: "Back",
+          modes: modes
+        })
+      });
+    } 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.
+    }
+  }
 
-  // Clone slot children and pass modes to all children that accept it
-  const processedMiddleSlot = middleSlot ? cloneChildrenWithModes(React.Children.toArray(middleSlot), modes) : null;
-  const processedActionsSlot = actionsSlot ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes) : defaultActions;
+  // --- Process Slots ---
+  const processedLeading = leadingSlot ? cloneChildrenWithModes([leadingSlot], modes)[0] : defaultLeading;
+  const processedMiddle = middleSlot ? cloneChildrenWithModes(React.Children.toArray(middleSlot), modes) : null;
 
-  // Process leading if it's a React element
-  const processedLeading = /*#__PURE__*/React.isValidElement(leading) ? injectFocusHandlers(cloneChildrenWithModes([leading], modes)[0]) : defaultLeading;
+  // Actions Gap wrapper
+  // The Figma has "Actions" slot with a gap.
+  const actionsStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: actionsGap ?? 0
+  };
+  const processedActions = actionsSlot ? /*#__PURE__*/_jsx(View, {
+    style: actionsStyle,
+    children: cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
+  }) : null;
   return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, childFocused ? {
-      borderBottomWidth: 2,
-      borderBottomColor: '#222'
-    } : null, style],
+    style: [containerStyle, style],
     accessibilityRole: "header",
-    accessibilityLabel: accessibilityLabel,
-    ...(accessibilityHint !== undefined ? {
+    accessibilityLabel: accessibilityLabel || (isMain ? "Main Header" : "Sub Header"),
+    ...(accessibilityHint ? {
       accessibilityHint
     } : {}),
     ...rest,
-    children: [processedLeading, processedMiddleSlot && /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: processedLeading
+    }), processedMiddle && /*#__PURE__*/_jsx(View, {
       style: {
         position: 'absolute',
         left: 0,
@@ -168,134 +165,15 @@ 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",
-      children: processedMiddleSlot
+      pointerEvents: "box-none",
+      children: processedMiddle
     }), /*#__PURE__*/_jsx(View, {
-      style: actionsRowStyle,
-      children: Array.isArray(processedActionsSlot) ? processedActionsSlot.map(n => injectFocusHandlers(n)) : injectFocusHandlers(processedActionsSlot)
-    })]
-  });
-}
-
-/**
- * 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
- */
-
-function AppBarHome({
-  leading,
-  actionsSlot,
-  modes = {},
-  onLeadingPress,
-  leadingIconName = 'ic_hellojio',
-  avatarProps,
-  style,
-  accessibilityLabel = "Home app bar",
-  accessibilityHint,
-  ...rest
-}) {
-  // 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 = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal,
-    paddingVertical,
-    width: '100%'
-  };
-  const homeActionsRowStyle = {
-    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 ?? /*#__PURE__*/_jsx(IconButton, {
-    iconName: leadingIconName,
-    modes: modes,
-    ...(onLeadingPress !== undefined ? {
-      onPress: onLeadingPress
-    } : {}),
-    accessibilityLabel: "Home",
-    accessibilityHint: "Opens home menu"
-  });
-
-  // Default actions: Search and Notification IconButtons
-  const defaultActions = actionsSlot ?? /*#__PURE__*/_jsxs(View, {
-    style: homeActionsRowStyle,
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      iconName: "ic_search",
-      modes: modes,
-      onPress: () => {},
-      accessibilityLabel: "Search",
-      accessibilityHint: "Opens search screen"
-    }), /*#__PURE__*/_jsx(IconButton, {
-      iconName: "ic_notification",
-      modes: modes,
-      onPress: () => {},
-      accessibilityLabel: "Notifications",
-      accessibilityHint: "Opens notifications"
-    })]
-  });
-
-  // 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 = /*#__PURE__*/React.isValidElement(leading) ? cloneChildrenWithModes([leading], modes)[0] : defaultLeading;
-
-  // Process avatar with modes
-  const avatarModes = avatarProps?.modes ? {
-    ...modes,
-    ...avatarProps.modes
-  } : modes;
-  const processedAvatar = /*#__PURE__*/_jsx(Avatar, {
-    ...(avatarProps ?? {}),
-    modes: avatarModes
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
-    accessibilityRole: "header",
-    accessibilityLabel: accessibilityLabel,
-    ...(accessibilityHint !== undefined ? {
-      accessibilityHint
-    } : {}),
-    ...rest,
-    children: [processedLeading, /*#__PURE__*/_jsxs(View, {
-      style: homeActionsRowStyle,
-      children: [processedActionsSlot, processedAvatar]
+      style: actionsStyle,
+      children: processedActions
     })]
   });
 }
-export default AppBar;
-export { AppBarHome };
 //# sourceMappingURL=AppBar.js.map

package/lib/module/components/AppBar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","View","getVariableByName","IconButton","Avatar","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","filter","AppBar","leading","middleSlot","actionsSlot","onLeadingPress","style","accessibilityLabel","accessibilityHint","rest","childFocused","setChildFocused","injectFocusHandlers","node","existingOnFocus","onFocus","existingOnBlur","onBlur","e","paddingHorizontal","paddingVertical","actionsGap","containerStyle","flexDirection","alignItems","justifyContent","minHeight","actionsRowStyle","gap","defaultLeading","iconName","onPress","defaultActions","processedMiddleSlot","processedActionsSlot","processedLeading","borderBottomWidth","borderBottomColor","accessibilityRole","position","left","right","top","bottom","pointerEvents","accessibilityElementsHidden","importantForAccessibility","Array","isArray","n","AppBarHome","leadingIconName","avatarProps","width","homeActionsRowStyle","avatarModes","processedAvatar"],"sourceRoot":"../../../../src","sources":["components/AppBar/AppBar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Pressable","getVariableByName","useTokens","NavArrow","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","filter","AppBar","type","leadingSlot","middleSlot","actionsSlot","propModes","onLeadingPress","style","accessibilityLabel","accessibilityHint","rest","globalModes","isMain","isSub","paddingHorizontal","paddingVertical","backgroundColor","actionsGap","containerStyle","flexDirection","alignItems","justifyContent","defaultLeading","onPress","hitSlop","accessibilityRole","pressed","opacity","direction","processedLeading","processedMiddle","actionsStyle","gap","processedActions","position","left","right","top","bottom","zIndex","pointerEvents"],"sourceRoot":"../../../../src","sources":["components/AppBar/AppBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/components/Avatar/Avatar.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 AvatarStories from './Avatar.stories';
 import Avatar from './Avatar';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,6 +13,10 @@ Avatar component that displays either an image or a monogram.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Context4
+- **Modes:** Default | Chip
+- **Default:** Default
+
 ### Avatar Size
 - **Modes:** L | M | S
 - **Default:** L
@@ -20,6 +24,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
 
 <Canvas>

package/lib/module/components/AvatarGroup/AvatarGroup.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 AvatarGroupStories from './AvatarGroup.stories';
 import AvatarGroup from './AvatarGroup';
 
@@ -12,9 +12,17 @@ AvatarGroup component with design-token-driven styling.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Context4
+- **Modes:** Default | Chip
+- **Default:** Default
+
 ### Avatar Size
 - **Modes:** L | M | S
 - **Default:** L
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/module/components/Badge/Badge.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 BadgeStories from './Badge.stories';
 import Badge from './Badge';