heroes-of-chess-components 0.5.73 → 0.5.75

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

@@ -1,7 +1,10 @@
 import styled from "styled-components";
 import { HBoxStyledProps } from "./type";
 
-export const HBoxContainer = styled.div<HBoxStyledProps>`
+export const HBoxContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) =>
+    !["borderRadius", "overflowX", "overflowY", "boxShadow"].includes(prop),
+})<HBoxStyledProps>`
   display: flex;
   flex-direction: ${(props) => props.direction}; /* Dirección (row o column) */
   gap: ${(props) => props.gap}; /* Espaciado entre elementos */
@@ -14,7 +17,7 @@ export const HBoxContainer = styled.div<HBoxStyledProps>`
   padding: ${(props) => props.padding}; /* Padding */
   margin: ${(props) => props.margin}; /* Margin */
   border: ${(props) => props.border}; /* Border */
-  border-radius: ${(props) => props.$borderRadius}; /* Bordes redondeados */
+  border-radius: ${(props) => props.borderRadius}; /* Bordes redondeados */
   position: ${(props) => props.position}; /* Posición del contenedor */
   top: ${(props) => props.top}; /* Posición superior */
   bottom: ${(props) => props.bottom}; /* Posición inferior */
@@ -23,10 +26,10 @@ export const HBoxContainer = styled.div<HBoxStyledProps>`
   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"};
-  box-shadow: ${({ $boxShadow, theme }) =>
-    ($boxShadow && theme?.[$boxShadow]) || $boxShadow || "none"}; /* Sombra */
+  overflow-x: ${(props) => props.overflowX ?? "auto"};
+  overflow-y: ${(props) => props.overflowY ?? "auto"};
+  box-shadow: ${({ boxShadow, theme }) =>
+    (boxShadow && theme?.[boxShadow]) || boxShadow || "none"}; /* Sombra */
 
   /* Estilos de la barra de scroll */
   &::-webkit-scrollbar {

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

@@ -39,10 +39,10 @@ const HBox: React.FC<HBoxProps> = ({
       padding={padding}
       margin={margin}
       border={border}
-      $borderRadius={borderRadius}
-      $overflowX={overflowX}
-      $overflowY={overflowY}
-      $boxShadow={boxShadow}
+      borderRadius={borderRadius}
+      overflowX={overflowX}
+      overflowY={overflowY}
+      boxShadow={boxShadow}
       position={position}
       top={top}
       bottom={bottom}

package/dist/lib/HocComponents/HBox/type.d.ts

@@ -58,10 +58,10 @@ export interface HBoxStyledProps
   bottom?: DimensionType;
   left?: DimensionType;
   right?: DimensionType;
-  $borderRadius?: BorderRadiusType;
-  $overflowX?: OverflowType;
-  $overflowY?: OverflowType;
-  $boxShadow?: BoxShadowType;
+  borderRadius?: BorderRadiusType;
+  overflowX?: OverflowType;
+  overflowY?: OverflowType;
+  boxShadow?: BoxShadowType;
   theme?: any;
 }
 

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

@@ -1,7 +1,15 @@
 import styled from "styled-components";
 import type { ButtonStyledProps } from "./types";
 
-export const Button = styled.button<ButtonStyledProps>`
+export const Button = styled.button.withConfig({
+  shouldForwardProp: (prop) =>
+    ![
+      "activeBackground",
+      "hoverBackground",
+      "borderRadius",
+      "boxShadow",
+    ].includes(prop),
+})<ButtonStyledProps>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,37 +20,36 @@ export const Button = styled.button<ButtonStyledProps>`
   color: ${({ color, theme }) =>
     (color && theme?.[color]) || color || theme?.goldColor} !important;
 
-  font-size: ${({ $fontSize }) => {
-    if (!$fontSize) return "var(--h4)";
+  font-size: ${({ fontSize }) => {
+    if (!fontSize) return "var(--h4)";
 
-    if ($fontSize?.startsWith("h") || $fontSize?.startsWith("p")) {
-      return `var(--${$fontSize}, var(--h4))`;
+    if (fontSize?.startsWith("h") || fontSize?.startsWith("p")) {
+      return `var(--${fontSize}, var(--h4))`;
     }
 
-    return $fontSize;
+    return fontSize;
   }} !important;
 
-  font-weight: ${({ $fontWeight }) => {
-    if (!$fontWeight) return "var(--weight-bold)";
-
-    if ($fontWeight?.startsWith("weight-")) {
-      return `var(--${$fontWeight}, var(--weight-bold))`;
+  font-weight: ${({ fontWeight }) => {
+    if (!fontWeight) return "var(--weight-bold)";
+    if (fontWeight?.startsWith("weight-")) {
+      return `var(--${fontWeight}, var(--weight-bold))`;
     }
-    return $fontWeight; // 400, 700, 'inherit', etc.
+    return fontWeight; // 400, 700, 'inherit', etc.
   }} !important;
 
   width: ${({ width }) => width || "auto"};
   height: ${({ height }) => height || "auto"};
-  border-radius: ${({ $borderRadius }) => $borderRadius || "8px"} !important;
+  border-radius: ${({ borderRadius }) => borderRadius || "8px"} !important;
   border: none;
   outline: none;
   transition: all 0.3s ease;
   padding: ${({ padding }) => padding ?? "10px"};
   text-transform: uppercase;
   margin: ${({ margin }) => margin || "0"};
-  box-shadow: ${({ $boxShadow, theme }) =>
-    ($boxShadow && theme?.[$boxShadow]) ||
-    $boxShadow ||
+  box-shadow: ${({ boxShadow, theme }) =>
+    (boxShadow && theme?.[boxShadow]) ||
+    boxShadow ||
     "none"} !important; /* Sombra */
   opacity: ${({ opacity }) => opacity || 1};
   pointer-events: ${({ pointerEvents }) => pointerEvents || "auto"};

package/dist/lib/HocComponents/HButton/HButton.tsx

@@ -28,15 +28,15 @@ const HButton: React.FC<HButtonProps> = ({
       type={type}
       onClick={onClick}
       background={background}
-      $boxShadow={boxShadow}
+      boxShadow={boxShadow}
       color={color}
       width={width}
       height={height}
-      $fontSize={fontSize}
-      $fontWeight={fontWeight}
-      $borderRadius={borderRadius}
-      $hoverBackground={hoverBackground}
-      $activeBackground={activeBackground}
+      fontSize={fontSize}
+      fontWeight={fontWeight}
+      borderRadius={borderRadius}
+      hoverBackground={hoverBackground}
+      activeBackground={activeBackground}
       padding={padding}
       disabled={disabled}
       opacity={disabled ? 0.5 : 1}

package/dist/lib/HocComponents/HButton/types.d.ts

@@ -33,15 +33,15 @@ export interface HButtonProps
 // Styled components props
 export interface ButtonStyledProps {
   background?: ColorType;
-  $boxShadow?: BoxShadowType;
+  boxShadow?: BoxShadowType;
   color?: ColorType;
   width?: DimensionType;
   height?: DimensionType;
-  $fontSize?: FontSizeType;
-  $fontWeight?: FontWeightType;
-  $borderRadius?: BorderRadiusType;
-  $hoverBackground?: ColorType;
-  $activeBackground?: ColorType;
+  fontSize?: FontSizeType;
+  fontWeight?: FontWeightType;
+  borderRadius?: BorderRadiusType;
+  hoverBackground?: ColorType;
+  activeBackground?: ColorType;
   padding?: SpacingType;
   margin?: SpacingType;
   opacity?: number;

package/dist/lib/hooks/sounds/soundLibrary.js

@@ -330,11 +330,12 @@ export var soundLibrary = {
     used: true
   },
   codeBreakerFinish: {
+    // NO USADO porque sobrepisa con otro sonido
     id: "codeBreakerFinish",
     title: "Code Breaker Finish",
     description: "Sound when finishing code breaker game - Used when: Completing code breaker mini-game",
-    file: codeBreakerFinish,
-    used: true
+    // file: codeBreakerFinish,
+    used: false
   },
   codeBreakerCheckCode: {
     id: "codeBreakerCheckCode",
@@ -365,11 +366,12 @@ export var soundLibrary = {
     used: true
   },
   minigameStart: {
+    // NO USADO, INSOPORTABLE
     id: "minigameStart",
     title: "Mini Game Start",
     description: "Mini game start sound - Used when: Starting mini-games",
-    file: minigameStart,
-    used: true
+    // file: minigameStart,
+    used: false
   },
   miniGameNewGame: {
     id: "miniGameNewGame",
@@ -379,11 +381,12 @@ export var soundLibrary = {
     used: true
   },
   miniGameEnter: {
+    // No USADO, INSOPORTABLE
     id: "miniGameEnter",
     title: "Mini Game Enter",
     description: "Enter mini game sound - Used when: Entering mini-game area",
-    file: miniGameEnter,
-    used: true
+    // file: miniGameEnter,
+    used: false
   },
   miniGameLoose: {
     id: "miniGameLoose",

package/dist/lib/hooks/sounds/soundTypes.ts

@@ -119,9 +119,6 @@ export const HOC_SOUNDS = {
   /** Claim reward sound - Used when: Claiming jackpot rewards, coins, bonuses (roulette) */
   claimJackpot: "claimJackpot" as const,
 
-  /** Sound when finishing code breaker game - Used when: Completing code breaker mini-game */
-  codeBreakerFinish: "codeBreakerFinish" as const,
-
   /** Sound when checking code in code breaker - Used when: Validating code in code breaker mini-game */
   codeBreakerCheckCode: "codeBreakerCheckCode" as const,
 
@@ -134,15 +131,9 @@ export const HOC_SOUNDS = {
   /** Profile modal opening sound - Used when: Opening profile modals */
   profileModalOpen: "profileModalOpen" as const,
 
-  /** Mini game start sound - Used when: Starting mini-games */
-  minigameStart: "minigameStart" as const,
-
   /** New mini game sound - Used when: Starting a new mini-game session */
   miniGameNewGame: "miniGameNewGame" as const,
 
-  /** Enter mini game sound - Used when: Entering mini-game area */
-  miniGameEnter: "miniGameEnter" as const,
-
   /** Mini game lose sound - Used when: Losing in mini-games */
   miniGameLoose: "miniGameLoose" as const,
 

package/package.json

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