jfs-components 0.0.58 → 0.0.60

package/lib/commonjs/utils/react-utils.js

@@ -42,7 +42,12 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
       ...modes,
       ...existingModes
     } : modes;
-    const processedChildren = hasChildren ? cloneChildrenWithModes(childChildren, modes, forcedModes) : undefined;
+    let processedChildren;
+    if (hasChildren) {
+      const childArray = _react.default.Children.toArray(childChildren);
+      const processed = cloneChildrenWithModes(childArray, modes, forcedModes);
+      processedChildren = processed.length === 1 ? processed[0] : processed;
+    }
     result.push(/*#__PURE__*/_react.default.cloneElement(child, {
       ...child.props,
       modes: mergedModes

package/lib/module/components/Button/Button.js

@@ -57,7 +57,7 @@ function Button({
   const lineHeight = getVariableByName('button/lineHeight', modes) || 19;
   const fontSize = getVariableByName('button/fontSize', modes) || 16;
   const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a';
-  const iconColor = getVariableByName('button/icon/color', modes) ?? textColor;
+  const iconColor = textColor;
   const iconSize = getVariableByName('button/icon/size', modes) ?? 18;
   const [isHovered, setIsHovered] = useState(false);
   const [isPressed, setIsPressed] = useState(false);
@@ -68,7 +68,7 @@ function Button({
   const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor;
   const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
   const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor;
-  const hoverIconColor = getVariableByName('button/icon/color', hoverModes) ?? hoverTextColor;
+  const hoverIconColor = hoverTextColor;
   const pressedModes = {
     ...modes,
     "Button / State": "Pressed"
@@ -76,7 +76,7 @@ function Button({
   const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor;
   const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
   const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor;
-  const pressedIconColor = getVariableByName('button/icon/color', pressedModes) ?? pressedTextColor;
+  const pressedIconColor = pressedTextColor;
   const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
   const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
   const baseLabelTextStyle = {

package/lib/module/components/ButtonGroup/ButtonGroup.js

@@ -29,7 +29,7 @@ function ButtonGroup({
   style
 }) {
   // Resolve design tokens
-  const gap = getVariableByName('buttonGroup/padding/gap', modes) ?? 12;
+  const gap = getVariableByName('buttonGroup/gap', modes) ?? 12;
   const paddingHorizontal = getVariableByName('buttonGroup/padding/horizontal', modes) ?? 0;
   const paddingVertical = getVariableByName('buttonGroup/padding/vertical', modes) ?? 0;
 

package/lib/module/components/Drawer/Drawer.js

@@ -224,7 +224,7 @@ function Drawer({
 
   // Design Tokens
   const backgroundColor = getVariableByName('drawer/background', modes) || '#f5f5f5';
-  const radius = getVariableByName('drawer/radius', modes) || 12;
+  const radius = getVariableByName('drawer/radius/top', modes) || 12;
 
   // Handle
   const handleColor = getVariableByName('drawer/handlebar/background', modes) || '#e0e0e3';

package/lib/module/components/Section/Section.js

@@ -19,12 +19,19 @@ function SlotGrid({
   maxColumns = SLOT_GRID_MAX_COLUMNS
 }) {
   const [maxItemWidth, setMaxItemWidth] = useState(null);
+  const [measureTimedOut, setMeasureTimedOut] = useState(false);
   const itemWidthsRef = useRef(new Map());
   const totalItems = items.length;
   useEffect(() => {
     itemWidthsRef.current.clear();
     setMaxItemWidth(null);
+    setMeasureTimedOut(false);
   }, [totalItems]);
+  useEffect(() => {
+    if (maxItemWidth !== null) return;
+    const timer = setTimeout(() => setMeasureTimedOut(true), 500);
+    return () => clearTimeout(timer);
+  }, [maxItemWidth, totalItems]);
   const handleItemLayout = useCallback((index, width) => {
     itemWidthsRef.current.set(index, width);
     if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
@@ -40,7 +47,7 @@ function SlotGrid({
   return /*#__PURE__*/_jsx(View, {
     style: {
       gap,
-      ...(isMeasured ? {} : {
+      ...(isMeasured || measureTimedOut ? {} : {
         opacity: 0
       })
     },