jfs-components 0.0.1

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

@@ -0,0 +1,301 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import IconButton from '../IconButton/IconButton';
+import Avatar from '../Avatar/Avatar';
+
+/**
+ * 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) {
+  return React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    // Get existing children
+    const childChildren = child.props?.children;
+    const hasChildren = childChildren !== undefined && childChildren !== null;
+
+    // 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,
+      ...existingModes
+    } : modes;
+
+    // Recursively process children if they exist
+    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
+
+    // Clone element with modes and processed children
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...child.props,
+      modes: mergedModes
+    }, 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,
+  middleSlot,
+  actionsSlot,
+  modes = {},
+  onLeadingPress,
+  style,
+  accessibilityLabel = "App bar",
+  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 containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: 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"
+    })]
+  });
+
+  // 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 leading if it's a React element
+  const processedLeading = /*#__PURE__*/React.isValidElement(leading) ? injectFocusHandlers(cloneChildrenWithModes([leading], modes)[0]) : defaultLeading;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, childFocused ? {
+      borderBottomWidth: 2,
+      borderBottomColor: '#222'
+    } : null, style],
+    accessibilityRole: "header",
+    accessibilityLabel: accessibilityLabel,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: [processedLeading, processedMiddleSlot && /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 21,
+        pointerEvents: 'box-none'
+      },
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: processedMiddleSlot
+    }), /*#__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]
+    })]
+  });
+}
+export default AppBar;
+export { AppBarHome };
+//# sourceMappingURL=AppBar.js.map

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

@@ -0,0 +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":[]}

package/lib/module/components/AppBar/AppBar.mdx

@@ -0,0 +1,63 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/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.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={AppBarStories.Default} />
+</Canvas>
+
+
+<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.',
+  ]}
+/>
+
+<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.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={AppBar} />
+
+## 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`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/Avatar/Avatar.js

@@ -0,0 +1,204 @@
+"use strict";
+
+import React from 'react';
+import { Pressable, View, Image, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
+
+/**
+ * Avatar component that displays either an image or a monogram.
+ * 
+ * This component supports two styles:
+ * - Image: Displays a user's profile picture
+ * - Monogram: Displays user initials in a circular background
+ * 
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.monogram="MS"] - The initials to display when style is "Monogram"
+ * @param {"Image"|"Monogram"} [props.style="Image"] - The style of the avatar
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Avatar Size": "M"})
+ * @param {string} [props.imageSource] - Optional image source for Image style (defaults to built-in image)
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses monogram or "User avatar"
+ * 
+ * @example
+ * ```jsx
+ * // Image style
+ * <Avatar style="Image" modes={{"Avatar Size": "M"}} />
+ * 
+ * // Monogram style
+ * <Avatar style="Monogram" monogram="JD" modes={{"Avatar Size": "L"}} />
+ * ```
+ */
+
+function Avatar({
+  monogram = "MS",
+  style = "Image",
+  modes = {},
+  imageSource,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve design tokens using the provided modes
+  const size = getVariableByName('avatar/size', modes) || 29;
+  const radius = getVariableByName('avatar/radius', modes) || 9999;
+  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff';
+  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
+  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5';
+  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12;
+  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14;
+  const labelFontWeight = getVariableByName('avatar/label/fontWeight', modes) || 500;
+  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter';
+
+  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
+  const borderRadius = radius === 9999 ? size / 2 : radius;
+
+  // Container style
+  const containerStyle = {
+    width: size,
+    height: size,
+    borderRadius: borderRadius,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    overflow: 'hidden',
+    ...(style === 'Monogram' ? {
+      backgroundColor: backgroundColor
+    } : {})
+  };
+
+  // Image container style
+  const imageContainerStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: borderRadius,
+    overflow: 'hidden'
+  };
+
+  // Image style
+  const imageStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: borderRadius
+  };
+
+  // Monogram container style
+  const monogramContainerStyle = {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 7,
+    paddingHorizontal: 5
+  };
+
+  // Monogram text style
+  const monogramTextStyle = {
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+    fontFamily: labelFontFamily,
+    color: labelColor,
+    textAlign: 'center'
+  };
+
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || (style === "Monogram" ? `Avatar with initials ${monogram}` : "User avatar");
+  // Interaction placeholders for press/focus
+  const [isPressed, setIsPressed] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const pressedStyle = isPressed ? {
+    transform: [{
+      scale: 0.98
+    }]
+  } : null;
+  const focusStyle = isFocused ? {
+    borderColor: '#222',
+    borderWidth: 1
+  } : null;
+  if (style === "Monogram") {
+    const Wrapper = rest?.onPress ? Pressable : View;
+    return /*#__PURE__*/_jsx(Wrapper, {
+      style: [containerStyle, pressedStyle, focusStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: defaultAccessibilityLabel,
+      onPressIn: e => {
+        setIsPressed(true);
+        rest?.onPressIn?.(e);
+      },
+      onPressOut: e => {
+        setIsPressed(false);
+        rest?.onPressOut?.(e);
+      },
+      onFocus: e => {
+        setIsFocused(true);
+        rest?.onFocus?.(e);
+      },
+      onBlur: e => {
+        setIsFocused(false);
+        rest?.onBlur?.(e);
+      },
+      ...rest,
+      children: /*#__PURE__*/_jsx(View, {
+        style: monogramContainerStyle,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: monogramTextStyle,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: monogram
+        })
+      })
+    });
+  }
+
+  // Normalize imageSource: if it's a string (URL), convert to { uri: string } format
+  // Otherwise, use it as-is (could be require() result or already { uri: ... } object)
+  const normalizedImageSource = React.useMemo(() => {
+    if (!imageSource) return avatarImage;
+    if (typeof imageSource === 'string') {
+      // If it's a string, treat it as a URL
+      return {
+        uri: imageSource
+      };
+    }
+    // Otherwise, use it as-is (could be require() result or { uri: ... } object)
+    return imageSource;
+  }, [imageSource]);
+  const Wrapper = rest?.onPress ? Pressable : View;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    style: [containerStyle, pressedStyle, focusStyle],
+    accessibilityRole: "image",
+    accessibilityLabel: defaultAccessibilityLabel,
+    onPressIn: e => {
+      setIsPressed(true);
+      rest?.onPressIn?.(e);
+    },
+    onPressOut: e => {
+      setIsPressed(false);
+      rest?.onPressOut?.(e);
+    },
+    onFocus: e => {
+      setIsFocused(true);
+      rest?.onFocus?.(e);
+    },
+    onBlur: e => {
+      setIsFocused(false);
+      rest?.onBlur?.(e);
+    },
+    ...rest,
+    children: /*#__PURE__*/_jsx(View, {
+      style: imageContainerStyle,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: normalizedImageSource,
+        resizeMode: "cover",
+        style: imageStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    })
+  });
+}
+export default Avatar;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","View","Image","Text","getVariableByName","jsx","_jsx","avatarImage","require","Avatar","monogram","style","modes","imageSource","accessibilityLabel","rest","size","radius","backgroundColor","borderColor","borderSize","labelColor","labelFontSize","labelLineHeight","labelFontWeight","labelFontFamily","borderRadius","containerStyle","width","height","borderWidth","overflow","imageContainerStyle","imageStyle","monogramContainerStyle","justifyContent","alignItems","paddingVertical","paddingHorizontal","monogramTextStyle","fontSize","lineHeight","fontWeight","fontFamily","color","textAlign","defaultAccessibilityLabel","isPressed","setIsPressed","useState","isFocused","setIsFocused","pressedStyle","transform","scale","focusStyle","Wrapper","onPress","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","children","accessibilityElementsHidden","importantForAccessibility","normalizedImageSource","useMemo","uri","source","resizeMode"],"sourceRoot":"../../../../src","sources":["components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Avatar/Avatar.mdx

@@ -0,0 +1,72 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AvatarStories from './Avatar.stories';
+import Avatar from './Avatar';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+Avatar component that displays either an image or a monogram.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Avatar Size
+- **Modes:** L | M | S
+- **Default:** L
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={AvatarStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Always set `accessibilityLabel` so assistive tech can announce the user or account represented.',
+    'Treat Avatar as non-interactive; wrap it in a Button/IconButton if you need tap behavior so the control gets a proper role.',
+    'For monograms, keep initials to 2–3 characters to avoid truncation and rely on the label for pronunciation.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-driven size, radius, border.</li>
+    <li><strong>Image</strong> — fills the container; hidden from the accessibility tree.</li>
+    <li><strong>Monogram</strong> — centered initials with token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align Avatar sizing with Button/IconButton heights in the same layout.',
+    'Keep the component square; prefer overriding via provided tokens instead of forcing width/height independently.',
+    'Provide a valid `imageSource` object or URL; fall back image is bundled for Storybook only.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Avatar} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`avatar/background`**
+- **`avatar/border/color`**
+- **`avatar/border/size`**
+- **`avatar/label/color`**
+- **`avatar/label/fontFamily`**
+- **`avatar/label/fontSize`**
+- **`avatar/label/fontWeight`**
+- **`avatar/label/lineHeight`**
+- **`avatar/radius`**
+- **`avatar/size`**
+
+All tokens support mode-based theming through the `modes` prop.