jfs-components 0.0.26 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,7 +8,11 @@ import { View, Image, Text } from 'react-native';
8
8
 
9
9
  ## Available Collections and Modes
10
10
 
11
- This component does not use any design token collections with multiple modes.
11
+ This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
12
+
13
+ ### peekOffset
14
+ - **Modes:** Medium | Small | Large | None
15
+ - **Default:** Medium
12
16
  ## Usage
13
17
 
14
18
  <Canvas>
@@ -32,11 +32,11 @@ const HStack = ({
32
32
  ...globalModes,
33
33
  ...propModes
34
34
  };
35
- const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/top', modes);
36
- const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/bottom', modes);
37
- const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/left', modes);
38
- const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('hstack/padding/right', modes);
39
- const gap = (0, _figmaVariablesResolver.getVariableByName)('hstack/gap', modes);
35
+ const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('hStack/padding/top', modes);
36
+ const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('hStack/padding/bottom', modes);
37
+ const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('hStack/padding/left', modes);
38
+ const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('hStack/padding/right', modes);
39
+ const gap = (0, _figmaVariablesResolver.getVariableByName)('hStack/gap', modes);
40
40
  const flexWrap = typeof wrap === 'boolean' ? wrap ? 'wrap' : 'nowrap' : wrap;
41
41
  const containerStyle = {
42
42
  flexDirection: reverse ? 'row-reverse' : 'row',
@@ -35,10 +35,10 @@ import { HStack } from 'jfs-components';
35
35
 
36
36
  This component uses the following design tokens, resolved through `getVariableByName`:
37
37
 
38
- - **`hstack/gap`**
39
- - **`hstack/padding/bottom`**
40
- - **`hstack/padding/left`**
41
- - **`hstack/padding/right`**
42
- - **`hstack/padding/top`**
38
+ - **`hStack/gap`**
39
+ - **`hStack/padding/bottom`**
40
+ - **`hStack/padding/left`**
41
+ - **`hStack/padding/right`**
42
+ - **`hStack/padding/top`**
43
43
 
44
44
  All tokens support mode-based theming through the `modes` prop.
@@ -22,7 +22,7 @@ This component uses the following design token collections. Each collection supp
22
22
  - **Default:** POC
23
23
 
24
24
  ### Context3
25
- - **Modes:** Default | Transaction Bubble | Balance
25
+ - **Modes:** Default | Transaction Bubble & Cards | Balance | Amount Input
26
26
  - **Default:** Default
27
27
  ## Usage
28
28