hudini 0.18.0 → 0.18.1

package/dist/utils/color-variants.d.ts

@@ -2,7 +2,7 @@ import { type ColorKey } from 'phaser-wind';
 /**
  * Calculates a color variant by adjusting brightness.
  *
- * @param color - The base color (can be a Phaser Wind token like "blue-500" or a CSS color like "#3B82F6")
+ * @param color - The base color (can be a Phaser Wind token like "blue-500", a color name like "red", or a CSS color like "#3B82F6")
  * @param tokenDiff - Amount to adjust the shade for color tokens. Positive values make it darker, negative lighter.
  *                    For example: -400 for lighter (blue-500 → blue-100), +400 for darker (blue-500 → blue-900)
  * @param colorDiff - Amount to lighten/darken CSS colors. Positive values lighten, negative values darken.
@@ -10,6 +10,7 @@ import { type ColorKey } from 'phaser-wind';
  * @returns The adjusted color as a number
  *
  * @remarks
+ * - If only a color name is provided without a shade (e.g., "red"), it automatically adds "-500" as the default shade
  * - If a color token is provided (e.g., "blue-500"), it uses the token system to calculate variants
  *   by adjusting the shade value with tokenDiff (clamped between 100-900)
  * - If a CSS color is provided (hex or rgb), it uses Phaser's lighten/darken methods
@@ -17,6 +18,10 @@ import { type ColorKey } from 'phaser-wind';
  *
  * @example
  * ```typescript
+ * // Using color name only - defaults to -500
+ * const defaultRed = getColorVariant('red', 0, 0);
+ * // Returns red-500 color value
+ *
  * // Using color token - lighter variant
  * const lightBlue = getColorVariant('blue-500', -400, 0);
  * // Returns blue-100 color value

package/dist/utils/color-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-variants.d.ts","sourceRoot":"","sources":["../../src/utils/color-variants.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,QAAQ,EAAiB,MAAM,aAAa,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,QAAQ,GAAG,MAAM,EACxB,WAAW,MAAM,EACjB,WAAW,MAAM,KAChB,MA6BF,CAAC"}
+{"version":3,"file":"color-variants.d.ts","sourceRoot":"","sources":["../../src/utils/color-variants.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,QAAQ,EAAiB,MAAM,aAAa,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,QAAQ,GAAG,MAAM,EACxB,WAAW,MAAM,EACjB,WAAW,MAAM,KAChB,MAsCF,CAAC"}

package/dist/utils/color-variants.js

@@ -1,9 +1,9 @@
 import Phaser from 'phaser';
-import { Color } from 'phaser-wind';
+import { Color, palette } from 'phaser-wind';
 /**
  * Calculates a color variant by adjusting brightness.
  *
- * @param color - The base color (can be a Phaser Wind token like "blue-500" or a CSS color like "#3B82F6")
+ * @param color - The base color (can be a Phaser Wind token like "blue-500", a color name like "red", or a CSS color like "#3B82F6")
  * @param tokenDiff - Amount to adjust the shade for color tokens. Positive values make it darker, negative lighter.
  *                    For example: -400 for lighter (blue-500 → blue-100), +400 for darker (blue-500 → blue-900)
  * @param colorDiff - Amount to lighten/darken CSS colors. Positive values lighten, negative values darken.
@@ -11,6 +11,7 @@ import { Color } from 'phaser-wind';
  * @returns The adjusted color as a number
  *
  * @remarks
+ * - If only a color name is provided without a shade (e.g., "red"), it automatically adds "-500" as the default shade
  * - If a color token is provided (e.g., "blue-500"), it uses the token system to calculate variants
  *   by adjusting the shade value with tokenDiff (clamped between 100-900)
  * - If a CSS color is provided (hex or rgb), it uses Phaser's lighten/darken methods
@@ -18,6 +19,10 @@ import { Color } from 'phaser-wind';
  *
  * @example
  * ```typescript
+ * // Using color name only - defaults to -500
+ * const defaultRed = getColorVariant('red', 0, 0);
+ * // Returns red-500 color value
+ *
  * // Using color token - lighter variant
  * const lightBlue = getColorVariant('blue-500', -400, 0);
  * // Returns blue-100 color value
@@ -36,10 +41,18 @@ import { Color } from 'phaser-wind';
  * ```
  */
 export const getColorVariant = (color, tokenDiff, colorDiff) => {
-    const colorRgb = Color.rgb(color);
-    if (Color.isValidColorToken(color)) {
+    // If only the color name is provided (without shade), validate and add -500 as default
+    let normalizedColor = color;
+    if (typeof color === 'string' && !color.includes('-') && !Color.isValidColorToken(color)) {
+        // Check if the color exists in the palette
+        if (color in palette && color !== 'black' && color !== 'white') {
+            normalizedColor = `${color}-500`;
+        }
+    }
+    const colorRgb = Color.rgb(normalizedColor);
+    if (Color.isValidColorToken(normalizedColor)) {
         // Token-based calculation
-        const parts = color.split('-');
+        const parts = normalizedColor.split('-');
         const colorShade = parseInt(parts[1].toString(), 10);
         const shadeMin = 100;
         const shadeMax = 900;

package/dist/utils/color-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-variants.js","sourceRoot":"","sources":["../../src/utils/color-variants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAgC,MAAM,aAAa,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAwB,EACxB,SAAiB,EACjB,SAAiB,EACT,EAAE;IACV,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,KAAiB,CAAC,CAAC;IAE9C,IAAI,KAAK,CAAC,iBAAiB,CAAC,KAAe,CAAC,EAAE,CAAC;QAC7C,0BAA0B;QAC1B,MAAM,KAAK,GAAqB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAC;QACrE,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAC1C,QAAQ,CACT,CAAC,QAAQ,EAAc,CAAC;QAEzB,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,wBAAwB;IACxB,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAE9D,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,SAAS,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;QAClB,OAAO,SAAS,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;IACpD,CAAC;IAED,OAAO,SAAS,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;AAC7D,CAAC,CAAC"}
+{"version":3,"file":"color-variants.js","sourceRoot":"","sources":["../../src/utils/color-variants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgC,MAAM,aAAa,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAwB,EACxB,SAAiB,EACjB,SAAiB,EACT,EAAE;IACV,uFAAuF;IACvF,IAAI,eAAe,GAAG,KAAK,CAAC;IAC5B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;QACzF,2CAA2C;QAC3C,IAAI,KAAK,IAAI,OAAO,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;YAC/D,eAAe,GAAG,GAAG,KAAK,MAAM,CAAC;QACnC,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,eAA2B,CAAC,CAAC;IAExD,IAAI,KAAK,CAAC,iBAAiB,CAAC,eAAyB,CAAC,EAAE,CAAC;QACvD,0BAA0B;QAC1B,MAAM,KAAK,GAAqB,eAAe,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAC;QAC/E,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAC1C,QAAQ,CACT,CAAC,QAAQ,EAAc,CAAC;QAEzB,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,wBAAwB;IACxB,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAE9D,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,SAAS,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;QAClB,OAAO,SAAS,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;IACpD,CAAC;IAED,OAAO,SAAS,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;AAC7D,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hudini",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "🎩 Magical Phaser UI components - Reusable HUD elements for game development. Is magic, like a wizard",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,7 +62,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "phaser-wind": "0.9.0",
+    "phaser-wind": "0.9.1",
     "font-awesome-for-phaser": "0.10.0"
   },
   "peerDependencies": {