jfs-components 0.0.5 → 0.0.7

package/lib/commonjs/components/VStack/VStack.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VStack = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * VStack component for vertical layout using design token spacing.
+ */
+const VStack = ({
+  children,
+  alignHorizontal,
+  justifyVertical,
+  wrap,
+  reverse = false,
+  as,
+  modes: propModes = {},
+  style,
+  ...rest
+}) => {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('vstack/padding/top', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('vstack/padding/bottom', modes);
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('vstack/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('vstack/padding/right', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('vstack/gap', modes);
+  const flexWrap = typeof wrap === 'boolean' ? wrap ? 'wrap' : 'nowrap' : wrap;
+  const containerStyle = {
+    flexDirection: reverse ? 'column-reverse' : 'column',
+    alignItems: alignHorizontal,
+    justifyContent: justifyVertical,
+    flexWrap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap
+  };
+
+  // Pass modes down to children
+  const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null;
+
+  // "as" prop handling for web - passed via rest if supported by the underlying view implementation on web,
+  // or manually added here. Since View from react-native doesn't formally support "as" in types,
+  // we rely on it being passed through or handled by the web layer if applicable.
+  // For type safety with standard RN View, we might cast props if needed, but passing ...rest usually works for extra props.
+  // We explicitly include 'as' in the props passed to View.
+  const viewProps = {
+    ...rest,
+    as
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...viewProps,
+    children: processedChildren
+  });
+};
+exports.VStack = VStack;
+var _default = exports.default = VStack;
+//# sourceMappingURL=VStack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_reactUtils","_jsxRuntime","e","__esModule","default","VStack","children","alignHorizontal","justifyVertical","wrap","reverse","as","modes","propModes","style","rest","globalModes","useTokens","paddingTop","getVariableByName","paddingBottom","paddingLeft","paddingRight","gap","flexWrap","containerStyle","flexDirection","alignItems","justifyContent","processedChildren","cloneChildrenWithModes","viewProps","jsx","View","exports","_default"],"sourceRoot":"../../../../src","sources":["components/VStack/VStack.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAAgE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAoChE;AACA;AACA;AACO,MAAMG,MAAM,GAAGA,CAAC;EACnBC,QAAQ;EACRC,eAAe;EACfC,eAAe;EACfC,IAAI;EACJC,OAAO,GAAG,KAAK;EACfC,EAAE;EACFC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,KAAK;EACL,GAAGC;AACM,CAAC,KAAK;EACf,MAAM;IAAEH,KAAK,EAAEI;EAAY,CAAC,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAC1C,MAAML,KAAK,GAAG;IAAE,GAAGI,WAAW;IAAE,GAAGH;EAAU,CAAC;EAE9C,MAAMK,UAAU,GAAG,IAAAC,yCAAiB,EAAC,oBAAoB,EAAEP,KAAK,CAAC;EACjE,MAAMQ,aAAa,GAAG,IAAAD,yCAAiB,EAAC,uBAAuB,EAAEP,KAAK,CAAC;EACvE,MAAMS,WAAW,GAAG,IAAAF,yCAAiB,EAAC,qBAAqB,EAAEP,KAAK,CAAC;EACnE,MAAMU,YAAY,GAAG,IAAAH,yCAAiB,EAAC,sBAAsB,EAAEP,KAAK,CAAC;EACrE,MAAMW,GAAG,GAAG,IAAAJ,yCAAiB,EAAC,YAAY,EAAEP,KAAK,CAAC;EAElD,MAAMY,QAAQ,GAAG,OAAOf,IAAI,KAAK,SAAS,GAAIA,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAIA,IAAI;EAE9E,MAAMgB,cAAyB,GAAG;IAC9BC,aAAa,EAAEhB,OAAO,GAAG,gBAAgB,GAAG,QAAQ;IACpDiB,UAAU,EAAEpB,eAAe;IAC3BqB,cAAc,EAAEpB,eAAe;IAC/BgB,QAAQ;IACRN,UAAU;IACVE,aAAa;IACbC,WAAW;IACXC,YAAY;IACZC;EACJ,CAAC;;EAED;EACA,MAAMM,iBAAiB,GAAGvB,QAAQ,GAC5B,IAAAwB,kCAAsB,EAACxB,QAAQ,EAAEM,KAAK,CAAC,GACvC,IAAI;;EAEV;EACA;EACA;EACA;EACA;EACA,MAAMmB,SAAS,GAAG;IACd,GAAGhB,IAAI;IACPJ;EACJ,CAAC;EAED,oBACI,IAAAV,WAAA,CAAA+B,GAAA,EAACnC,YAAA,CAAAoC,IAAI;IAACnB,KAAK,EAAE,CAACW,cAAc,EAAEX,KAAK,CAAE;IAAA,GAAKiB,SAAS;IAAAzB,QAAA,EAC9CuB;EAAiB,CAChB,CAAC;AAEf,CAAC;AAAAK,OAAA,CAAA7B,MAAA,GAAAA,MAAA;AAAA,IAAA8B,QAAA,GAAAD,OAAA,CAAA9B,OAAA,GAEcC,MAAM","ignoreList":[]}

package/lib/commonjs/components/VStack/VStack.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as VStackStories from './VStack.stories';
+import VStack from './VStack';
+
+<Meta of={VStackStories} />
+
+# VStack
+
+`VStack` arranges its children in a vertical line. It uses design tokens for spacing and gap.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { VStack } from 'jfs-components';
+
+<VStack alignHorizontal="center" modes={{ 'vstack/gap': 16 }}>
+  <View>Item 1</View>
+  <View>Item 2</View>
+</VStack>
+```
+
+<Canvas>
+  <Story of={VStackStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={VStackStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`vstack/gap`**
+- **`vstack/padding/bottom`**
+- **`vstack/padding/left`**
+- **`vstack/padding/right`**
+- **`vstack/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "CardFeedback", {
     return _CardFeedback.default;
   }
 });
+Object.defineProperty(exports, "ChipGroup", {
+  enumerable: true,
+  get: function () {
+    return _ChipGroup.default;
+  }
+});
 Object.defineProperty(exports, "CtaCard", {
   enumerable: true,
   get: function () {
@@ -87,12 +93,24 @@ Object.defineProperty(exports, "Drawer", {
     return _Drawer.default;
   }
 });
+Object.defineProperty(exports, "EmptyState", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.default;
+  }
+});
 Object.defineProperty(exports, "FilterBar", {
   enumerable: true,
   get: function () {
     return _FilterBar.default;
   }
 });
+Object.defineProperty(exports, "HStack", {
+  enumerable: true,
+  get: function () {
+    return _HStack.default;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -219,6 +237,12 @@ Object.defineProperty(exports, "UpiHandle", {
     return _UpiHandle.default;
   }
 });
+Object.defineProperty(exports, "VStack", {
+  enumerable: true,
+  get: function () {
+    return _VStack.default;
+  }
+});
 var _ActionFooter = _interopRequireDefault(require("./ActionFooter/ActionFooter"));
 var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
 var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
@@ -234,6 +258,7 @@ var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
 var _CtaCard = _interopRequireDefault(require("./CtaCard/CtaCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
+var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
 var _LazyList = _interopRequireDefault(require("./LazyList/LazyList"));
@@ -255,5 +280,8 @@ var _TransactionBubble = _interopRequireDefault(require("./TransactionBubble/Tra
 var _TransactionDetails = _interopRequireDefault(require("./TransactionDetails/TransactionDetails"));
 var _TransactionStatus = _interopRequireDefault(require("./TransactionStatus/TransactionStatus"));
 var _UpiHandle = _interopRequireDefault(require("./UpiHandle/UpiHandle"));
+var _VStack = _interopRequireDefault(require("./VStack/VStack"));
+var _ChipGroup = _interopRequireDefault(require("./ChipGroup/ChipGroup"));
+var _EmptyState = _interopRequireDefault(require("./EmptyState/EmptyState"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_ActionFooter","_interopRequireDefault","require","_AppBar","_Avatar","_AvatarGroup","_Badge","_BottomNav","_BottomNavItem","_Button","_Card","_CardFeedback","_Disclaimer","_Divider","_Drawer","_CtaCard","_FilterBar","_IconButton","_IconCapsule","_LazyList","_ListGroup","_ListItem","_MediaCard","_MerchantProfile","_MoneyValue","_NavArrow","_PageTitle","_Section","_Stepper","_Step","_StepLabel","_TextInput","_ThreadHero","_Tooltip","_TransactionBubble","_TransactionDetails","_TransactionStatus","_UpiHandle","e","__esModule","default"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,KAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,WAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,QAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,OAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,QAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,UAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,WAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,YAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,SAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,UAAA,GAAAnB,sBAAA,CAAAC,OAAA;AACA,IAAAmB,SAAA,GAAApB,sBAAA,CAAAC,OAAA;AACA,IAAAoB,UAAA,GAAArB,sBAAA,CAAAC,OAAA;AACA,IAAAqB,gBAAA,GAAAtB,sBAAA,CAAAC,OAAA;AACA,IAAAsB,WAAA,GAAAvB,sBAAA,CAAAC,OAAA;AACA,IAAAuB,SAAA,GAAAxB,sBAAA,CAAAC,OAAA;AACA,IAAAwB,UAAA,GAAAzB,sBAAA,CAAAC,OAAA;AACA,IAAAyB,QAAA,GAAA1B,sBAAA,CAAAC,OAAA;AACA,IAAA0B,QAAA,GAAA3B,sBAAA,CAAAC,OAAA;AACA,IAAA2B,KAAA,GAAA3B,OAAA;AACA,IAAA4B,UAAA,GAAA5B,OAAA;AACA,IAAA6B,UAAA,GAAA9B,sBAAA,CAAAC,OAAA;AACA,IAAA8B,WAAA,GAAA/B,sBAAA,CAAAC,OAAA;AACA,IAAA+B,QAAA,GAAA/B,OAAA;AACA,IAAAgC,kBAAA,GAAAjC,sBAAA,CAAAC,OAAA;AACA,IAAAiC,mBAAA,GAAAlC,sBAAA,CAAAC,OAAA;AACA,IAAAkC,kBAAA,GAAAnC,sBAAA,CAAAC,OAAA;AACA,IAAAmC,UAAA,GAAApC,sBAAA,CAAAC,OAAA;AAA6D,SAAAD,uBAAAqC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"names":["_ActionFooter","_interopRequireDefault","require","_AppBar","_Avatar","_AvatarGroup","_Badge","_BottomNav","_BottomNavItem","_Button","_Card","_CardFeedback","_Disclaimer","_Divider","_Drawer","_CtaCard","_FilterBar","_HStack","_IconButton","_IconCapsule","_LazyList","_ListGroup","_ListItem","_MediaCard","_MerchantProfile","_MoneyValue","_NavArrow","_PageTitle","_Section","_Stepper","_Step","_StepLabel","_TextInput","_ThreadHero","_Tooltip","_TransactionBubble","_TransactionDetails","_TransactionStatus","_UpiHandle","_VStack","_ChipGroup","_EmptyState","e","__esModule","default"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,KAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,WAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,QAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,OAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,QAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,UAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,OAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,WAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,YAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,SAAA,GAAAnB,sBAAA,CAAAC,OAAA;AACA,IAAAmB,UAAA,GAAApB,sBAAA,CAAAC,OAAA;AACA,IAAAoB,SAAA,GAAArB,sBAAA,CAAAC,OAAA;AACA,IAAAqB,UAAA,GAAAtB,sBAAA,CAAAC,OAAA;AACA,IAAAsB,gBAAA,GAAAvB,sBAAA,CAAAC,OAAA;AACA,IAAAuB,WAAA,GAAAxB,sBAAA,CAAAC,OAAA;AACA,IAAAwB,SAAA,GAAAzB,sBAAA,CAAAC,OAAA;AACA,IAAAyB,UAAA,GAAA1B,sBAAA,CAAAC,OAAA;AACA,IAAA0B,QAAA,GAAA3B,sBAAA,CAAAC,OAAA;AACA,IAAA2B,QAAA,GAAA5B,sBAAA,CAAAC,OAAA;AACA,IAAA4B,KAAA,GAAA5B,OAAA;AACA,IAAA6B,UAAA,GAAA7B,OAAA;AACA,IAAA8B,UAAA,GAAA/B,sBAAA,CAAAC,OAAA;AACA,IAAA+B,WAAA,GAAAhC,sBAAA,CAAAC,OAAA;AACA,IAAAgC,QAAA,GAAAhC,OAAA;AACA,IAAAiC,kBAAA,GAAAlC,sBAAA,CAAAC,OAAA;AACA,IAAAkC,mBAAA,GAAAnC,sBAAA,CAAAC,OAAA;AACA,IAAAmC,kBAAA,GAAApC,sBAAA,CAAAC,OAAA;AACA,IAAAoC,UAAA,GAAArC,sBAAA,CAAAC,OAAA;AACA,IAAAqC,OAAA,GAAAtC,sBAAA,CAAAC,OAAA;AACA,IAAAsC,UAAA,GAAAvC,sBAAA,CAAAC,OAAA;AACA,IAAAuC,WAAA,GAAAxC,sBAAA,CAAAC,OAAA;AAAsF,SAAAD,uBAAAyC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}