heroes-of-chess-components 0.5.82 → 0.5.84

package/dist/lib/HocComponents/HBox/HBox.styled.ts

@@ -3,28 +3,7 @@ import { HBoxStyledProps } from "./type";
 
 export const HBoxContainer = styled.div.withConfig({
   shouldForwardProp: (prop) =>
-    ![
-      "direction",
-      "gap",
-      "align",
-      "justify",
-      "wrap",
-      "width",
-      "height", 
-      "padding",
-      "margin",
-      "border",
-      "borderRadius",
-      "background",
-      "overflowX",
-      "overflowY",
-      "boxShadow",
-      "position",
-      "top",
-      "bottom",
-      "left",
-      "right"
-    ].includes(prop),
+    !["borderRadius", "overflowX", "overflowY", "boxShadow"].includes(prop),
 })<HBoxStyledProps>`
   display: flex;
   flex-direction: ${(props) => props.direction}; /* Dirección (row o column) */
@@ -47,8 +26,8 @@ export const HBoxContainer = styled.div.withConfig({
   background: ${({ theme, background }) =>
     (background && theme?.[background]) || background || "transparent"};
   transition: all 0.3s ease;
-  overflow-x: ${(props) => props.overflowX ?? "auto"};
-  overflow-y: ${(props) => props.overflowY ?? "auto"};
+  overflow-x: ${(props) => props.overflowX ?? "visible"};
+  overflow-y: ${(props) => props.overflowY ?? "visible"};
   box-shadow: ${({ boxShadow, theme }) =>
     (boxShadow && theme?.[boxShadow]) || boxShadow || "none"}; /* Sombra */
 

package/dist/lib/HocComponents/HBox/HBox.tsx

@@ -24,48 +24,31 @@ const HBox: React.FC<HBoxProps> = ({
   bottom = "auto", // Posición inferior
   left = "auto", // Posición izquierda
   right = "auto", // Posición derecha
-  ...restProps // Resto de props que no son de estilo
+  ...props
 }) => {
-  // Separar props de estilo que van al styled component
-  const styledProps = {
-    background,
-    direction,
-    gap,
-    align,
-    justify,
-    wrap,
-    width,
-    height,
-    padding,
-    margin,
-    border,
-    borderRadius,
-    overflowX,
-    overflowY,
-    boxShadow,
-    position,
-    top,
-    bottom,
-    left,
-    right,
-  };
-
-  // Props que sí queremos pasar al DOM (como onClick, onMouseOver, etc.)
-  const domProps = Object.fromEntries(
-    Object.entries(restProps).filter(([key]) => 
-      key.startsWith('on') || 
-      key === 'className' || 
-      key === 'id' || 
-      key === 'style' ||
-      key === 'aria-' ||
-      key === 'data-'
-    )
-  );
-
   return (
     <HBoxContainer
-      {...styledProps}
-      {...domProps}
+      background={background}
+      direction={direction}
+      gap={gap}
+      align={align}
+      justify={justify}
+      wrap={wrap}
+      width={width}
+      height={height}
+      padding={padding}
+      margin={margin}
+      border={border}
+      borderRadius={borderRadius}
+      overflowX={overflowX}
+      overflowY={overflowY}
+      boxShadow={boxShadow}
+      position={position}
+      top={top}
+      bottom={bottom}
+      left={left}
+      right={right}
+      {...props}
     >
       {children}
     </HBoxContainer>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroes-of-chess-components",
-  "version": "0.5.82",
+  "version": "0.5.84",
   "description": "Reusable React Components for Heroes of Chess Apps",
   "type": "module",
   "main": "dist/index.js",