jfs-components 0.0.1

package/lib/commonjs/components/CardFeedback/CardFeedback.mdx

@@ -0,0 +1,84 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CardFeedbackStories from './CardFeedback.stories';
+import CardFeedback from './CardFeedback';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={CardFeedbackStories} />
+
+# CardFeedback
+
+CardFeedback component from Figma node 1280:4481. Used for status updates, warnings, or feedback (e.g., success, error states).
+
+## 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.
+
+### Appearance.System
+- **Modes:** positive | warning | negative
+- **Default:** positive
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+## Usage
+
+<Canvas>
+  <Story of={CardFeedbackStories.Default} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'Use standard text elements for Title and Body to ensure readability.',
+    'Buttons in the Action slot should have appropriate accessibility labels.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Icon</strong> — Optional icon slot (top left).</li>
+    <li><strong>Content</strong> — Wraps Title, Body, and Action slots.</li>
+    <li><strong>Title</strong> — Primary message.</li>
+    <li><strong>Body</strong> — Secondary details.</li>
+    <li><strong>Action</strong> — Slot for interactive elements (Buttons).</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use existing `Button` components within the `CardFeedback.Action` slot.',
+    'Ensure correct modes are passed if using specific feedback themes (e.g., Success, Error).',
+  ]}
+/>
+
+## Props
+
+<ArgsTable of={CardFeedback} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`cardFeedback/actionSlot/gap`**
+- **`cardFeedback/background`**
+- **`cardFeedback/body/color`**
+- **`cardFeedback/body/fontFamily`**
+- **`cardFeedback/body/fontSize`**
+- **`cardFeedback/body/fontWeight`**
+- **`cardFeedback/body/lineHeight`**
+- **`cardFeedback/gap`**
+- **`cardFeedback/icon/size`**
+- **`cardFeedback/padding/horizontal`**
+- **`cardFeedback/padding/vertical`**
+- **`cardFeedback/radius`**
+- **`cardFeedback/text/gap`**
+- **`cardFeedback/title/color`**
+- **`cardFeedback/title/fontFamily`**
+- **`cardFeedback/title/fontSize`**
+- **`cardFeedback/title/fontWeight`**
+- **`cardFeedback/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Disclaimer/Disclaimer.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Disclaimer text block that mirrors the Figma "Disclaimer" component.
+ *
+ * All visual attributes (color, typography, etc.) are resolved from
+ * Figma design tokens via `getVariableByName`, with an optional `modes`
+ * configuration object – exactly like other components in this library.
+ *
+ * The text is center‑aligned and constrained to the same width as in Figma,
+ * with two lines:
+ *  - A configurable disclaimer prefix
+ *  - A fixed "Jio Payments Bank Pvt. Ltd." line
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.disclaimer] - First line of the disclaimer text.
+ * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
+ * @param {Object} [props.style] - Optional style overrides for the container.
+ * @param {Object} [props.textStyle] - Optional style overrides for the text element.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses disclaimer text
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Disclaimer({
+  disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
+  modes = {},
+  style,
+  textStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}) {
+  // Resolve typography and color from Figma variables
+  const color = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/color', modes) || '#24262b';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontSize', modes) || 10;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/lineHeight', modes) || 12;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontFamily', modes) || 'System';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontWeight', modes) || 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const baseTextStyle = {
+    color,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight,
+    textAlign: 'center'
+  };
+  const containerStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Match the Figma content width while still being flexible in layouts
+    maxWidth: 281,
+    width: '100%'
+  };
+
+  // Use provided accessibilityLabel or fall back to disclaimer text
+  const defaultAccessibilityLabel = accessibilityLabel || disclaimer;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [baseTextStyle, textStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: [disclaimer, '\n']
+    })
+  });
+}
+var _default = exports.default = Disclaimer;
+//# sourceMappingURL=Disclaimer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","Disclaimer","disclaimer","modes","style","textStyle","accessibilityLabel","accessibilityHint","rest","color","getVariableByName","fontSize","lineHeight","fontFamily","fontWeightRaw","fontWeight","toString","baseTextStyle","textAlign","containerStyle","alignItems","justifyContent","maxWidth","width","defaultAccessibilityLabel","jsx","View","accessibilityRole","children","jsxs","Text","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Disclaimer/Disclaimer.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAgF,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,UAAUA,CAAC;EAClBC,UAAU,GAAG,oEAAoE;EACjFC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,SAAS;EACTC,kBAAkB;EAClBC,iBAAiB;EACjB,GAAGC;AACY,CAAC,EAAE;EAClB;EACA,MAAMC,KAAK,GAAG,IAAAC,yCAAiB,EAAC,kBAAkB,EAAEP,KAAK,CAAC,IAAI,SAAS;EACvE,MAAMQ,QAAQ,GACZ,IAAAD,yCAAiB,EAAC,2BAA2B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC7D,MAAMS,UAAU,GACd,IAAAF,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMU,UAAU,GACd,IAAAH,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,QAAQ;EACrE,MAAMW,aAAa,GACjB,IAAAJ,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,GAAG;EAChE,MAAMY,UAAU,GACd,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,CAACE,QAAQ,CAAC,CAAC,GACxBF,aAAa;EAEnB,MAAMG,aAAwB,GAAG;IAC/BR,KAAK;IACLE,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVE,UAAU;IACVG,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,cAAyB,GAAG;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB;IACAC,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE;EACT,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGlB,kBAAkB,IAAIJ,UAAU;EAElE,oBACE,IAAAL,WAAA,CAAA4B,GAAA,EAAC9B,YAAA,CAAA+B,IAAI;IACHtB,KAAK,EAAE,CAACe,cAAc,EAAEf,KAAK,CAAE;IAC/BuB,iBAAiB,EAAC,MAAM;IACxBrB,kBAAkB,EAAEkB,yBAA0B;IAC9CjB,iBAAiB,EAAEA,iBAAkB;IAAA,GACjCC,IAAI;IAAAoB,QAAA,eAER,IAAA/B,WAAA,CAAAgC,IAAA,EAAClC,YAAA,CAAAmC,IAAI;MACH1B,KAAK,EAAE,CAACa,aAAa,EAAEZ,SAAS,CAAE;MAClC0B,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC,IAAI;MAAAJ,QAAA,GAE7B1B,UAAU,EACV,IAAI;IAAA,CACD;EAAC,CACH,CAAC;AAEX;AAAC,IAAA+B,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEcC,UAAU","ignoreList":[]}

package/lib/commonjs/components/Disclaimer/Disclaimer.mdx

@@ -0,0 +1,62 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DisclaimerStories from './Disclaimer.stories';
+import Disclaimer from './Disclaimer';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={DisclaimerStories} />
+
+# Disclaimer
+
+Disclaimer text block that mirrors the Figma "Disclaimer" component.
+
+## 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.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={DisclaimerStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel` when the disclaimer copy changes; it defaults to the first line.',
+    'Keep the component non-interactive (role `text`); place links/buttons outside.',
+    'Use brief sentences so the announcement is a single utterance.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — centered block constrained to the Figma max width.</li>
+    <li><strong>Text</strong> — two-line disclaimer using token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Avoid inline links; pair nearby buttons for acknowledgements when needed.',
+    'Use `style`/`textStyle` for spacing tweaks without shrinking font sizes.',
+    'Keep width flexible; rely on the built-in max width for alignment.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Disclaimer} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`disclaimer/color`**
+- **`disclaimer/label/fontFamily`**
+- **`disclaimer/label/fontSize`**
+- **`disclaimer/label/fontWeight`**
+- **`disclaimer/label/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Drawer/Drawer.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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); }
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+/**
+ * Lightweight bottom drawer/sheet with a draggable handle.
+ * No external dependencies; uses Animated + PanResponder so it works in RN and Storybook (web).
+ * 
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the drawer. If not provided, uses title or "Drawer"
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Drawer({
+  items = [],
+  modes = {},
+  title,
+  children,
+  collapsedHeight = 120,
+  expandedRatio = 0.75,
+  initialState = 'collapsed',
+  contentStyle,
+  sheetStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}) {
+  const {
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const expandedHeight = screenHeight * clamp(expandedRatio, 0.2, 0.95);
+  const maxTranslateY = Math.max(screenHeight - collapsedHeight, 0); // fully collapsed
+  const minTranslateY = Math.max(screenHeight - expandedHeight, 0); // fully expanded
+
+  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(initialState === 'expanded' ? minTranslateY : maxTranslateY)).current;
+  const lastGestureY = (0, _react.useRef)(initialState === 'expanded' ? minTranslateY : maxTranslateY);
+  (0, _react.useEffect)(() => {
+    // Re-sync when viewport changes (storybook iframe resize, orientation change)
+    const next = initialState === 'expanded' ? minTranslateY : maxTranslateY;
+    lastGestureY.current = next;
+    translateY.setValue(next);
+  }, [initialState, maxTranslateY, minTranslateY, translateY]);
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: () => {
+      translateY.stopAnimation(v => {
+        lastGestureY.current = v;
+      });
+    },
+    onPanResponderMove: (_, gesture) => {
+      const next = clamp(lastGestureY.current + gesture.dy, minTranslateY, maxTranslateY);
+      translateY.setValue(next);
+    },
+    onPanResponderRelease: (_, gesture) => {
+      const current = lastGestureY.current + gesture.dy;
+      const midpoint = (minTranslateY + maxTranslateY) / 2;
+      const shouldOpen = gesture.vy < -0.3 || current < midpoint;
+      const target = shouldOpen ? minTranslateY : maxTranslateY;
+      lastGestureY.current = target;
+      _reactNative.Animated.spring(translateY, {
+        toValue: target,
+        tension: 80,
+        friction: 12,
+        useNativeDriver: true
+      }).start();
+    }
+  }), [maxTranslateY, minTranslateY, translateY]);
+
+  // Resolve tokens with fallbacks to keep storybook stable
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/background', modes) || '#ffffff';
+  const handleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/handle/color', modes) || '#D1D5DB';
+  const handleWidth = (0, _figmaVariablesResolver.getVariableByName)('drawer/handle/width', modes) || 60;
+  const handleHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/handle/height', modes) || 6;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius', modes) || 20;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding', modes) || 16;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes) || '#0f172a';
+  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/size', modes) || 16;
+
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.host,
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      ...panResponder.panHandlers,
+      accessibilityRole: 'dialog',
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint || 'Swipe up or down to expand or collapse',
+      style: [styles.sheet, styles.nonSelectable, {
+        backgroundColor,
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        paddingHorizontal: padding,
+        paddingBottom: padding,
+        transform: [{
+          translateY
+        }]
+      }, sheetStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.handleArea, styles.nonSelectable],
+        accessibilityRole: "button",
+        accessibilityLabel: "Drag handle",
+        accessibilityHint: "Drag up or down to expand or collapse drawer",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.handle, {
+            backgroundColor: handleColor,
+            width: handleWidth,
+            height: handleHeight,
+            borderRadius: handleHeight / 2
+          }],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no"
+        })
+      }), title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        selectable: false,
+        style: [styles.title, styles.nonSelectable, {
+          color: titleColor,
+          fontSize: titleSize
+        }],
+        accessibilityRole: "header",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: title
+      }) : null, items?.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.actionsRow,
+        children: items.map((item, idx) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.action,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            iconName: item.iconName,
+            onPress: item.onPress,
+            modes: item.modes || modes
+            // Let IconButton manage its own accessibility labelling; we don't need to
+            // forward extra props from the item model here.
+            // Cast to any to satisfy the more specific IconButton prop type.
+          }), item.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            selectable: false,
+            style: [styles.actionLabel, styles.nonSelectable],
+            children: item.label
+          }) : null]
+        }, item.label || item.iconName || idx))
+      }) : null, children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.content, styles.nonSelectable, contentStyle],
+        children: children
+      }) : null]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  host: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    shadowColor: '#000000',
+    shadowOpacity: 0.12,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowRadius: 12,
+    elevation: 6,
+    paddingTop: 10
+  },
+  handleArea: {
+    alignItems: 'center',
+    paddingVertical: 8
+  },
+  handle: {
+    opacity: 0.9
+  },
+  title: {
+    fontWeight: '600',
+    marginBottom: 12
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingBottom: 4
+  },
+  action: {
+    alignItems: 'center',
+    minWidth: 72,
+    marginRight: 12,
+    marginBottom: 16
+  },
+  actionLabel: {
+    marginTop: 6,
+    fontSize: 12,
+    color: '#475467'
+  },
+  content: {
+    paddingTop: 12
+  },
+  // `userSelect` is a web-only style; cast to any to keep React Native types happy
+  nonSelectable: {
+    userSelect: 'none'
+  }
+});
+var _default = exports.default = Drawer;
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_IconButton","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","clamp","value","min","max","Math","Drawer","items","modes","title","children","collapsedHeight","expandedRatio","initialState","contentStyle","sheetStyle","accessibilityLabel","accessibilityHint","rest","height","screenHeight","useWindowDimensions","expandedHeight","maxTranslateY","minTranslateY","translateY","useRef","Animated","Value","current","lastGestureY","useEffect","next","setValue","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","stopAnimation","v","onPanResponderMove","_","gesture","dy","onPanResponderRelease","midpoint","shouldOpen","vy","target","spring","toValue","tension","friction","useNativeDriver","start","backgroundColor","getVariableByName","handleColor","handleWidth","handleHeight","radius","padding","titleColor","titleSize","defaultAccessibilityLabel","jsx","View","style","styles","host","jsxs","panHandlers","accessibilityRole","sheet","nonSelectable","borderTopLeftRadius","borderTopRightRadius","paddingHorizontal","paddingBottom","transform","handleArea","handle","width","borderRadius","accessibilityElementsHidden","importantForAccessibility","Text","selectable","color","fontSize","length","actionsRow","map","item","idx","action","iconName","onPress","label","actionLabel","content","StyleSheet","flex","justifyContent","position","left","right","bottom","shadowColor","shadowOpacity","shadowOffset","shadowRadius","elevation","paddingTop","alignItems","paddingVertical","opacity","fontWeight","marginBottom","flexDirection","flexWrap","minWidth","marginRight","marginTop","userSelect","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Drawer/Drawer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Drawer/Drawer.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DrawerStories from './Drawer.stories';
+import Drawer from './Drawer';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={DrawerStories} />
+
+# Drawer
+
+Lightweight bottom drawer/sheet with a draggable handle.
+
+## 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.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={DrawerStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel`/`accessibilityHint` describing what the sheet contains and how to expand/collapse it.',
+    'Ensure the drag handle remains reachable via a `button` role; do not rely on gestures alone.',
+    'Give action items and custom children readable labels and predictable focus order.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Handle</strong> — drag affordance at the top of the sheet.</li>
+    <li><strong>Header</strong> — optional title text above actions.</li>
+    <li><strong>Actions</strong> — grid of IconButtons rendered from the `items` prop.</li>
+    <li><strong>Content slot</strong> — custom children rendered after the actions row.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep `expandedRatio` between 0.2–0.95 to avoid clipping or full-screen takeover.',
+    'Pass stable `items` keys/labels; avoid heavy scrollable children inside the animated sheet.',
+    'For web, keep nested content click/drag friendly; avoid stacking additional absolute sheets inside.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Drawer} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`drawer/background`**
+- **`drawer/handle/color`**
+- **`drawer/handle/height`**
+- **`drawer/handle/width`**
+- **`drawer/padding`**
+- **`drawer/radius`**
+- **`drawer/title/color`**
+- **`drawer/title/size`**
+
+All tokens support mode-based theming through the `modes` prop.