jfs-components 0.0.1

package/src/components/124f0cc3a0fd7b0d500b920eb43b7bcd02a19ff0.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9 6C10.66 6 12 4.66 12 3C12 1.34 10.66 0 9 0C7.34 0 6 1.34 6 3C6 4.66 7.34 6 9 6ZM6 3C6 1.34 4.66 0 3 0C1.34 0 0 1.34 0 3C0 4.66 1.34 6 3 6C4.66 6 6 4.66 6 3ZM9 6C7.34 6 6 7.34 6 9C6 10.66 7.34 12 9 12C10.66 12 12 10.66 12 9C12 7.34 10.66 6 9 6ZM3 6C1.34 6 0 7.34 0 9C0 10.66 1.34 12 3 12C4.66 12 6 10.66 6 9C6 7.34 4.66 6 3 6Z" fill="url(#paint0_linear_549_6778)"/>
+<defs>
+<linearGradient id="paint0_linear_549_6778" x1="4.15686" y1="3.47041" x2="8.38007" y2="5.91142" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FADBB0"/>
+<stop offset="1" stop-color="#AD8545"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/1cde2a286461d772c7638752a551079a9159e7c4.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M12.6667 9.33333H12V5.33333C12 3.91885 11.4381 2.56229 10.4379 1.5621C9.43771 0.561903 8.08115 0 6.66667 0C5.25218 0 3.89562 0.561903 2.89543 1.5621C1.89524 2.56229 1.33333 3.91885 1.33333 5.33333V9.33333H0.666667C0.489856 9.33333 0.320286 9.40357 0.195262 9.52859C0.0702379 9.65362 0 9.82319 0 10C0 10.1768 0.0702379 10.3464 0.195262 10.4714C0.320286 10.5964 0.489856 10.6667 0.666667 10.6667H12.6667C12.8435 10.6667 13.013 10.5964 13.1381 10.4714C13.2631 10.3464 13.3333 10.1768 13.3333 10C13.3333 9.82319 13.2631 9.65362 13.1381 9.52859C13.013 9.40357 12.8435 9.33333 12.6667 9.33333ZM6.66667 13.3333C7.1971 13.3333 7.70581 13.1226 8.08088 12.7475C8.45595 12.3725 8.66667 11.8638 8.66667 11.3333H4.66667C4.66667 11.8638 4.87738 12.3725 5.25245 12.7475C5.62753 13.1226 6.13623 13.3333 6.66667 13.3333Z" fill="var(--fill-0, #24262B)"/>
+</svg>

package/src/components/40722460b5b9b81b7d8ee4b1cc3854f640791871.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M3.3372 6.66939C3.24946 6.6699 3.16249 6.65308 3.08126 6.61991C3.00004 6.58673 2.92616 6.53785 2.86387 6.47606L0.197199 3.80939C0.134713 3.74742 0.0851172 3.67368 0.0512714 3.59245C0.0174257 3.51121 0 3.42407 0 3.33606C0 3.24805 0.0174257 3.16092 0.0512714 3.07968C0.0851172 2.99844 0.134713 2.9247 0.197199 2.86273L2.86387 0.196061C2.92602 0.133902 2.99982 0.084595 3.08103 0.0509548C3.16225 0.0173146 3.24929 0 3.3372 0C3.4251 0 3.51215 0.0173146 3.59337 0.0509548C3.67458 0.084595 3.74837 0.133902 3.81053 0.196061C3.87269 0.25822 3.922 0.332014 3.95564 0.413228C3.98928 0.494443 4.00659 0.581488 4.00659 0.669394C4.00659 0.757301 3.98928 0.844346 3.95564 0.925561C3.922 1.00678 3.87269 1.08057 3.81053 1.14273L1.61053 3.33606L3.81053 5.52939C3.87302 5.59137 3.92261 5.6651 3.95646 5.74634C3.99031 5.82758 4.00773 5.91472 4.00773 6.00273C4.00773 6.09074 3.99031 6.17787 3.95646 6.25911C3.92261 6.34035 3.87302 6.41408 3.81053 6.47606C3.74824 6.53785 3.67436 6.58673 3.59314 6.61991C3.51191 6.65308 3.42494 6.6699 3.3372 6.66939Z" fill="var(--fill-0, #24262B)"/>
+</svg>

package/src/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/src/components/AppBar/AppBar.tsx

@@ -0,0 +1,360 @@
+import React, { useState } from 'react'
+import { View, type StyleProp, type ViewStyle } 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.
+ */
+function cloneChildrenWithModes(
+  children: React.ReactNode,
+  modes: Record<string, any>
+): React.ReactNode[] {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    // Get existing children
+    const childChildren = (child.props as any)?.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 as any)?.modes
+    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
+
+    // Recursively process children if they exist
+    const processedChildren: React.ReactNode | undefined = hasChildren
+      ? cloneChildrenWithModes(
+          React.Children.toArray(childChildren),
+          modes
+        )
+      : undefined
+
+    // Clone element with modes and processed children
+    return React.cloneElement(
+      child,
+      {
+        ...(child.props as any),
+        modes: mergedModes,
+      },
+      processedChildren
+    )
+  })?.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;
+  middleSlot?: React.ReactNode;
+  actionsSlot?: React.ReactNode;
+  modes?: Record<string, any>;
+  onLeadingPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
+
+function AppBar({
+  leading,
+  middleSlot,
+  actionsSlot,
+  modes = {},
+  onLeadingPress,
+  style,
+  accessibilityLabel = "App bar",
+  accessibilityHint,
+  ...rest
+}: AppBarProps) {
+  const [childFocused, setChildFocused] = useState(false)
+
+  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
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: 52,
+  }
+
+  const actionsRowStyle: ViewStyle = {
+    flexDirection: 'row',
+    gap: actionsGap,
+    alignItems: 'center',
+  }
+
+  // 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>
+  )
+
+  // 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 = React.isValidElement(leading)
+    ? injectFocusHandlers(cloneChildrenWithModes([leading], modes)[0])
+    : defaultLeading
+
+  return (
+    <View 
+      style={[
+        containerStyle,
+        childFocused ? { borderBottomWidth: 2, borderBottomColor: '#222' } : null,
+        style,
+      ]}
+      accessibilityRole="header"
+      accessibilityLabel={accessibilityLabel}
+      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      {...rest}
+    >
+      {processedLeading}
+      {processedMiddleSlot && (
+        <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"
+        >
+          {processedMiddleSlot}
+        </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 = {},
+  onLeadingPress,
+  leadingIconName = 'ic_hellojio',
+  avatarProps,
+  style,
+  accessibilityLabel = "Home app bar",
+  accessibilityHint,
+  ...rest
+}: AppBarHomeProps) {
+  // 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}
+      </View>
+    </View>
+  )
+}
+
+export default AppBar
+export { AppBarHome }
+

package/src/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.