jfs-components 0.0.1

package/README.md

@@ -0,0 +1,69 @@
+# react-native-storybook-boilerplate
+
+Building a UI library for React Native together with storybook is a good experience, but it's hard to display the components on the web, therefore
+I want to transpile the react-native component through the react-native-web project so I can display them easily on the web. 
+
+It's the ultimate library development setup meant for kickstarting ui library development for react-native. 
+
+In a nutshell there's two different setups of Storybook running in parallel:
+1. **React Native + Storybook/React-Native**
+
+It was installed following the normal steps of
+- doing a fresh `npx react-native init`
+- running `npx -p @storybook/cli sb init` and choosing yes when asked if install @storybook/react-native-server
+- installing & configuring `react-native-storybook-loader` the project can be found here: [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader)
+
+2. **React + Storybook/React**
+
+This installation is less obvious because we have to setup react from scratch, configure babel & webpack, whereas in the `webpack.config.js` we need to resolve and apply aliases for our imports, so `react-native` becomes `react-native-web`. This needs to be done with other packages as well, in this boilerplate I have installed `styled-components`, i.e. `styled-components/native` imports needs to be switched out to `styled-components` when we bundle for the web.
+
+It was roughtly done like this:
+
+- Installing `react`, `react-dom`, `babel` & `webpack` dependencies
+- Configuring `webpack` to alias `react-native` with `react-native-web`, and `styled-components/native` should resolve to `styled-components`. See the full webpack config here: [webpack.config.js](https://github.com/ugglr/react-native-storybook-boilerplate/blob/master/webpack.config.js) also: babel config here: [babel.config.js](https://github.com/ugglr/react-native-storybook-boilerplate/blob/master/babel.config.js)
+- Installing Storybook according to the manual guide in the docs [React Storybook Manual Installation Steps](https://storybook.js.org/docs/guides/guide-react/)
+- Inside of `./.storybook/main.js` configure custom webpack for Storybook, see docs here: [Storybook custom webpack docs](https://storybook.js.org/docs/configurations/custom-webpack-config/), from my `webpack.config.js` I grab the alias configuration and plug it into Storybook.
+- Since Storybook does not support the new syntax of writing stories for React Native I needed to add one more alias where `@storybook/react-native` resolves to `@storybook/react`
+
+Goals of this repo:
+
+| ToDo| Status |
+| --- | ----- |
+| setup react native | ✅ |
+| setup @storybook/react-native-server for react native UI development | ✅ |
+| setup react from scratch | ✅ |
+| setup @storybook/react to run as a seperate storybook | ✅ |
+| Build serveable storybook site with react-native-web display of the react-native components. | ✅ |
+
+## Clone Command
+```
+git clone git@github.com:ugglr/react-native-storybook-boilerplate.git
+```
+
+## Scripts
+
+In root folder the following scripts are available
+
+- Run React Native Storybook Developer Server
+```
+yarn run storybook
+```
+- Run Storybook on iOS simulator
+```
+yarn run ios
+```
+- Run Storybook on Android emulator
+```
+yarn run android
+```
+- Run Storybook Web Developer server (powered with React Native Web)
+```
+yarn run storybook-web
+```
+- Build serveable Storybook static site (To-Do)
+```
+yarn run build:storybook-web
+
+--> ./storybook-static
+```
+

package/lib/commonjs/Containers.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.storyContainer = void 0;
+var _native = _interopRequireDefault(require("styled-components/native"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const storyContainer = exports.storyContainer = _native.default.View`
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`;
+//# sourceMappingURL=Containers.js.map

package/lib/commonjs/Containers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_native","_interopRequireDefault","require","e","__esModule","default","storyContainer","exports","styled","View"],"sourceRoot":"../../src","sources":["Containers.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6C,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,eAAM,CAACC,IAAI;AACzC;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/commonjs/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/lib/commonjs/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/lib/commonjs/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/lib/commonjs/components/AppBar/AppBar.js

@@ -0,0 +1,305 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppBarHome = AppBarHome;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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, modes) {
+  return _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
+
+    // Clone element with modes and processed children
+    return /*#__PURE__*/_react.default.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] = (0, _react.useState)(false);
+  function injectFocusHandlers(node) {
+    if (! /*#__PURE__*/_react.default.isValidElement(node)) return node;
+    const existingOnFocus = node.props?.onFocus;
+    const existingOnBlur = node.props?.onBlur;
+    return /*#__PURE__*/_react.default.cloneElement(node, {
+      ...node.props,
+      onFocus: e => {
+        setChildFocused(true);
+        existingOnFocus?.(e);
+      },
+      onBlur: e => {
+        setChildFocused(false);
+        existingOnBlur?.(e);
+      }
+    });
+  }
+  // Resolve container tokens
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('appBarActions/padding/horizontal', modes) ?? 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('appBarActions/padding/vertical', modes) ?? 10;
+  const actionsGap = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: actionsRowStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      iconName: "ic_hellojio",
+      modes: modes,
+      onPress: () => {},
+      accessibilityLabel: "Hello Jio",
+      accessibilityHint: "Opens Hello Jio menu"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      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.default.Children.toArray(middleSlot), modes) : null;
+  const processedActionsSlot = actionsSlot ? cloneChildrenWithModes(_react.default.Children.toArray(actionsSlot), modes) : defaultActions;
+
+  // Process leading if it's a React element
+  const processedLeading = /*#__PURE__*/_react.default.isValidElement(leading) ? injectFocusHandlers(cloneChildrenWithModes([leading], modes)[0]) : defaultLeading;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, childFocused ? {
+      borderBottomWidth: 2,
+      borderBottomColor: '#222'
+    } : null, style],
+    accessibilityRole: "header",
+    accessibilityLabel: accessibilityLabel,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: [processedLeading, processedMiddleSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _figmaVariablesResolver.getVariableByName)('appBarHome/padding/horizontal', modes) ?? 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('appBarHome/padding/vertical', modes) ?? 16;
+  const actionsGap = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    iconName: leadingIconName,
+    modes: modes,
+    ...(onLeadingPress !== undefined ? {
+      onPress: onLeadingPress
+    } : {}),
+    accessibilityLabel: "Home",
+    accessibilityHint: "Opens home menu"
+  });
+
+  // Default actions: Search and Notification IconButtons
+  const defaultActions = actionsSlot ?? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: homeActionsRowStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      iconName: "ic_search",
+      modes: modes,
+      onPress: () => {},
+      accessibilityLabel: "Search",
+      accessibilityHint: "Opens search screen"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      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.default.Children.toArray(actionsSlot), modes) : defaultActions;
+
+  // Process leading if it's a React element
+  const processedLeading = /*#__PURE__*/_react.default.isValidElement(leading) ? cloneChildrenWithModes([leading], modes)[0] : defaultLeading;
+
+  // Process avatar with modes
+  const avatarModes = avatarProps?.modes ? {
+    ...modes,
+    ...avatarProps.modes
+  } : modes;
+  const processedAvatar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    ...(avatarProps ?? {}),
+    modes: avatarModes
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "header",
+    accessibilityLabel: accessibilityLabel,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: [processedLeading, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: homeActionsRowStyle,
+      children: [processedActionsSlot, processedAvatar]
+    })]
+  });
+}
+var _default = exports.default = AppBar;
+//# sourceMappingURL=AppBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_IconButton","_interopRequireDefault","_Avatar","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","cloneChildrenWithModes","children","modes","React","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","useState","injectFocusHandlers","node","existingOnFocus","onFocus","existingOnBlur","onBlur","paddingHorizontal","getVariableByName","paddingVertical","actionsGap","containerStyle","flexDirection","alignItems","justifyContent","minHeight","actionsRowStyle","gap","defaultLeading","jsx","iconName","onPress","defaultActions","jsxs","View","processedMiddleSlot","processedActionsSlot","processedLeading","borderBottomWidth","borderBottomColor","accessibilityRole","position","left","right","top","bottom","pointerEvents","accessibilityElementsHidden","importantForAccessibility","Array","isArray","AppBarHome","leadingIconName","avatarProps","width","homeActionsRowStyle","avatarModes","processedAvatar","_default","exports"],"sourceRoot":"../../../../src","sources":["components/AppBar/AppBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/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.