jfs-components 0.0.58 → 0.0.60

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.
Files changed (20) hide show
  1. package/lib/commonjs/components/Button/Button.js +3 -3
  2. package/lib/commonjs/components/ButtonGroup/ButtonGroup.js +1 -1
  3. package/lib/commonjs/components/Drawer/Drawer.js +1 -1
  4. package/lib/commonjs/components/Section/Section.js +8 -1
  5. package/lib/commonjs/icons/registry.js +1 -1
  6. package/lib/commonjs/utils/react-utils.js +6 -1
  7. package/lib/module/components/Button/Button.js +3 -3
  8. package/lib/module/components/ButtonGroup/ButtonGroup.js +1 -1
  9. package/lib/module/components/Drawer/Drawer.js +1 -1
  10. package/lib/module/components/Section/Section.js +8 -1
  11. package/lib/module/icons/registry.js +1 -1
  12. package/lib/module/utils/react-utils.js +6 -1
  13. package/lib/typescript/src/icons/registry.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/src/components/Button/Button.tsx +3 -3
  16. package/src/components/ButtonGroup/ButtonGroup.tsx +1 -1
  17. package/src/components/Drawer/Drawer.tsx +1 -1
  18. package/src/components/Section/Section.tsx +9 -1
  19. package/src/icons/registry.ts +1 -1
  20. package/src/utils/react-utils.ts +6 -3
package/lib/commonjs/components/Button/Button.js CHANGED
@@ -63,7 +63,7 @@ function Button({
63
63
  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
64
64
  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
65
65
  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
66
- const iconColor = (0, _figmaVariablesResolver.getVariableByName)('button/icon/color', modes) ?? textColor;
66
+ const iconColor = textColor;
67
67
  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('button/icon/size', modes) ?? 18;
68
68
  const [isHovered, setIsHovered] = (0, _react.useState)(false);
69
69
  const [isPressed, setIsPressed] = (0, _react.useState)(false);
@@ -74,7 +74,7 @@ function Button({
74
74
  const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
75
75
  const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
76
76
  const hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
77
- const hoverIconColor = (0, _figmaVariablesResolver.getVariableByName)('button/icon/color', hoverModes) ?? hoverTextColor;
77
+ const hoverIconColor = hoverTextColor;
78
78
  const pressedModes = {
79
79
  ...modes,
80
80
  "Button / State": "Pressed"
@@ -82,7 +82,7 @@ function Button({
82
82
  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
83
83
  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
84
84
  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
85
- const pressedIconColor = (0, _figmaVariablesResolver.getVariableByName)('button/icon/color', pressedModes) ?? pressedTextColor;
85
+ const pressedIconColor = pressedTextColor;
86
86
  const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
87
87
  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
88
88
  const baseLabelTextStyle = {
package/lib/commonjs/components/ButtonGroup/ButtonGroup.js CHANGED
@@ -34,7 +34,7 @@ function ButtonGroup({
34
34
  style
35
35
  }) {
36
36
  // Resolve design tokens
37
- const gap = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/gap', modes) ?? 12;
37
+ const gap = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/gap', modes) ?? 12;
38
38
  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/horizontal', modes) ?? 0;
39
39
  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/vertical', modes) ?? 0;
40
40
 
package/lib/commonjs/components/Drawer/Drawer.js CHANGED
@@ -229,7 +229,7 @@ function Drawer({
229
229
 
230
230
  // Design Tokens
231
231
  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/background', modes) || '#f5f5f5';
232
- const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius', modes) || 12;
232
+ const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius/top', modes) || 12;
233
233
 
234
234
  // Handle
235
235
  const handleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/background', modes) || '#e0e0e3';
package/lib/commonjs/components/Section/Section.js CHANGED
@@ -24,12 +24,19 @@ function SlotGrid({
24
24
  maxColumns = SLOT_GRID_MAX_COLUMNS
25
25
  }) {
26
26
  const [maxItemWidth, setMaxItemWidth] = (0, _react.useState)(null);
27
+ const [measureTimedOut, setMeasureTimedOut] = (0, _react.useState)(false);
27
28
  const itemWidthsRef = (0, _react.useRef)(new Map());
28
29
  const totalItems = items.length;
29
30
  (0, _react.useEffect)(() => {
30
31
  itemWidthsRef.current.clear();
31
32
  setMaxItemWidth(null);
33
+ setMeasureTimedOut(false);
32
34
  }, [totalItems]);
35
+ (0, _react.useEffect)(() => {
36
+ if (maxItemWidth !== null) return;
37
+ const timer = setTimeout(() => setMeasureTimedOut(true), 500);
38
+ return () => clearTimeout(timer);
39
+ }, [maxItemWidth, totalItems]);
33
40
  const handleItemLayout = (0, _react.useCallback)((index, width) => {
34
41
  itemWidthsRef.current.set(index, width);
35
42
  if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
@@ -45,7 +52,7 @@ function SlotGrid({
45
52
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
46
53
  style: {
47
54
  gap,
48
- ...(isMeasured ? {} : {
55
+ ...(isMeasured || measureTimedOut ? {} : {
49
56
  opacity: 0
50
57
  })
51
58
  },