hudini 0.18.0 → 0.18.1

package/dist/hudini.js

@@ -933,6 +933,19 @@
             }
             return null;
         };
+        /**
+         * Normalizes a color by adding -500 if only color name is provided
+         * @param color - Color token or color name
+         * @returns Normalized color token
+         */
+        const normalizeColorToken = (color) => {
+            if (typeof color === 'string' && !String(color).includes('-')) {
+                if (color in palette && color !== 'black' && color !== 'white') {
+                    return `${color}-500`;
+                }
+            }
+            return color;
+        };
         /**
          * Get RGB string representation of a color
          * @param color - Color token, theme color key or valid color string
@@ -949,25 +962,27 @@
             if (colorFromTheme) {
                 return rgb(colorFromTheme);
             }
-            const parts = color?.split('-') ?? [];
+            // Normalize color: add -500 if only color name is provided
+            const normalizedColor = normalizeColorToken(color);
+            const parts = normalizedColor?.split('-') ?? [];
             if (parts.length === 2) {
                 const colorKey = parts[0];
                 const shade = parts[1];
                 const colorValue = palette[colorKey]?.[shade];
                 if (!colorValue) {
-                    if (isValidColor(color)) {
-                        return color;
+                    if (isValidColor(normalizedColor)) {
+                        return normalizedColor;
                     }
                     throw new Error(`Color token "${colorKey}-${shade}" not found`);
                 }
                 return colorValue;
             }
-            const colorValue = palette[color];
+            const colorValue = palette[normalizedColor];
             if (!colorValue) {
-                if (isValidColor(color)) {
-                    return color;
+                if (isValidColor(normalizedColor)) {
+                    return normalizedColor;
                 }
-                throw new Error(`Color token "${color}" not found`);
+                throw new Error(`Color token "${normalizedColor}" not found`);
             }
             return colorValue;
         };
@@ -998,24 +1013,26 @@
             if (colorFromTheme) {
                 return hex(colorFromTheme);
             }
-            const parts = color?.split('-') ?? [];
+            // Normalize color: add -500 if only color name is provided
+            const normalizedColor = normalizeColorToken(color);
+            const parts = normalizedColor?.split('-') ?? [];
             if (parts.length === 2) {
                 const colorKey = parts[0];
                 const shade = parts[1];
                 const colorValue = palette[colorKey]?.[shade];
                 if (!colorValue) {
-                    if (isValidColor(color)) {
-                        return convertColorValueToNumber(color);
+                    if (isValidColor(normalizedColor)) {
+                        return convertColorValueToNumber(normalizedColor);
                     }
                     throw new Error(`Color token "${colorKey}-${shade}" not found`);
                 }
                 return convertColorValueToNumber(colorValue);
             }
-            const colorToConvert = palette[color];
+            const colorToConvert = palette[normalizedColor];
             if (isValidColor(colorToConvert)) {
                 return convertColorValueToNumber(colorToConvert);
             }
-            throw new Error(`Color token "${color}" not found`);
+            throw new Error(`Color token "${normalizedColor}" not found`);
         };
         const api = {
             rgb,
@@ -1685,7 +1702,8 @@
     // Border constants
     var BLACK_BORDER_THICKNESS$b = 2;
     var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$b = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$b = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$b * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$b = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$b * 3; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$b = 2;
     /**
      * A flexible card component that adapts to its child content size
@@ -4220,8 +4238,8 @@
     var POINTER_DOWN_SCALE$5 = 0.95;
     // Border constants
     var BLACK_BORDER_THICKNESS$a = 2;
-    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$a = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a * 2; // 4 pixels total
+    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a = 3;
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$a = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$a * 2; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$a = 2;
     // Icon constants
     var ICON_STROKE_THICKNESS$3 = 3;
@@ -4234,7 +4252,7 @@
     var FlatIconButton$1 = /** @class */ (function (_super) {
         __extends(FlatIconButton, _super);
         function FlatIconButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, icon = _a.icon, _b = _a.iconStyle, iconStyle = _b === void 0 ? 'solid' : _b, size = _a.size, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'gray-600' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'white' : _d, onClick = _a.onClick, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.backgroundOpacity, backgroundOpacity = _f === void 0 ? 1 : _f, _g = _a.iconOpacity, iconOpacity = _g === void 0 ? 1 : _g;
+            var scene = _a.scene, x = _a.x, y = _a.y, icon = _a.icon, _b = _a.iconStyle, iconStyle = _b === void 0 ? 'solid' : _b, size = _a.size, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'blue-500' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'white' : _d, onClick = _a.onClick, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.backgroundOpacity, backgroundOpacity = _f === void 0 ? 1 : _f, _g = _a.iconOpacity, iconOpacity = _g === void 0 ? 1 : _g;
             var _this = _super.call(this, scene, x, y) || this;
             _this.backgroundOpacityValue = 1;
             _this.iconOpacityValue = 1;
@@ -4590,7 +4608,8 @@
     // Border constants
     const BLACK_BORDER_THICKNESS$9 = 2;
     const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$9 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$9 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$9 * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$9 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$9 * 3; // 6 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$9 = 2;
     /**
      * A flexible card component that adapts to its child content size
@@ -5085,8 +5104,8 @@
     const POINTER_DOWN_SCALE$4 = 0.95;
     // Border constants
     const BLACK_BORDER_THICKNESS$8 = 2;
-    const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$8 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 * 2; // 4 pixels total
+    const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 = 3;
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$8 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$8 * 2; // 6 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$8 = 2;
     // Icon constants
     const ICON_STROKE_THICKNESS$2 = 3;
@@ -5107,7 +5126,7 @@
         iconColorValue; // rgb string
         backgroundOpacityValue = 1;
         iconOpacityValue = 1;
-        constructor({ scene, x, y, icon, iconStyle = 'solid', size, backgroundColor = 'gray-600', iconColor = 'white', onClick, borderRadius = 'md', backgroundOpacity = 1, iconOpacity = 1, }) {
+        constructor({ scene, x, y, icon, iconStyle = 'solid', size, backgroundColor = 'blue-500', iconColor = 'white', onClick, borderRadius = 'md', backgroundOpacity = 1, iconOpacity = 1, }) {
             super(scene, x, y);
             this.pw = getPWFromScene(scene);
             this.baseSizePx =
@@ -5386,7 +5405,7 @@
     /**
      * 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.
@@ -5394,6 +5413,7 @@
      * @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
@@ -5401,6 +5421,10 @@
      *
      * @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
@@ -5419,10 +5443,18 @@
      * ```
      */
     const getColorVariant$1 = (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;
@@ -5455,7 +5487,8 @@
     // Border constants
     const BLACK_BORDER_THICKNESS$7 = 2;
     const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$7 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$7 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$7 * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$7 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$7 * 3; // 5 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$7 = 2;
     // Overlay constants
     const LIGHT_OVERLAY_SCALE$1 = 0.6;
@@ -5484,7 +5517,7 @@
             const sizePx = typeof size === 'number'
                 ? size
                 : this.pw.fontSize.px(size ?? 'md');
-            const baseColor = color ?? 'gray';
+            const baseColor = color ?? 'blue-500';
             this.sizePx = sizePx;
             this.updateSize();
             this.baseColor = baseColor;
@@ -6694,7 +6727,7 @@
     // Border constants
     const BLACK_BORDER_THICKNESS$5 = 2;
     const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$5 = 2;
-    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$5 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$5 * 2; // 4 pixels total
+    const WHITE_BORDER_TOTAL_EXTRA_PIXELS$5 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$5 * 3; // 6 pixels total
     const WHITE_BORDER_RADIUS_EXTRA$5 = 2;
     /**
      * A flat section header component without gradient overlays, with text stroke and auto-sizing
@@ -7122,8 +7155,8 @@
     var POINTER_DOWN_SCALE$2 = 0.95;
     // Border constants
     var BLACK_BORDER_THICKNESS$4 = 2;
-    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$4 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 * 2; // 4 pixels total
+    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 = 3;
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$4 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$4 * 2; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$4 = 2;
     /**
      * A customizable flat text button component for Phaser, supporting auto-sizing,
@@ -7136,7 +7169,7 @@
          * @param params FlatTextButtonParams
          */
         function FlatTextButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _c === void 0 ? 'blue' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
+            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _c === void 0 ? 'blue-500' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
             var _this = _super.call(this, { scene: scene, x: x, y: y }) || this;
             _this.pw = getPWFromScene$1(scene);
             // Store values
@@ -7433,7 +7466,7 @@
     /**
      * 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.
@@ -7441,6 +7474,7 @@
      * @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
@@ -7448,6 +7482,10 @@
      *
      * @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
@@ -7466,10 +7504,18 @@
      * ```
      */
     var getColorVariant = function (color, tokenDiff, colorDiff) {
-        var colorRgb = Color.rgb(color);
-        if (Color.isValidColorToken(color)) {
+        // If only the color name is provided (without shade), validate and add -500 as default
+        var 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 = "".concat(color, "-500");
+            }
+        }
+        var colorRgb = Color.rgb(normalizedColor);
+        if (Color.isValidColorToken(normalizedColor)) {
             // Token-based calculation
-            var parts = color.split('-');
+            var parts = normalizedColor.split('-');
             var colorShade = parseInt(parts[1].toString(), 10);
             var shadeMin = 100;
             var shadeMax = 900;
@@ -7500,7 +7546,8 @@
     // Border constants
     var BLACK_BORDER_THICKNESS$3 = 2;
     var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$3 = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$3 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$3 * 2; // 4 pixels total
+    // eslint-disable-next-line no-magic-numbers
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$3 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$3 * 3; // 5 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$3 = 2;
     // Overlay constants
     var LIGHT_OVERLAY_SCALE = 0.6;
@@ -7521,7 +7568,7 @@
             var sizePx = typeof size === 'number'
                 ? size
                 : _this.pw.fontSize.px(size !== null && size !== void 0 ? size : 'md');
-            var baseColor = color !== null && color !== void 0 ? color : 'gray';
+            var baseColor = color !== null && color !== void 0 ? color : 'blue-500';
             _this.sizePx = sizePx;
             _this.updateSize();
             _this.baseColor = baseColor;
@@ -8701,7 +8748,7 @@
     // Border constants
     var BLACK_BORDER_THICKNESS$1 = 2;
     var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$1 = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$1 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$1 * 2; // 4 pixels total
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS$1 = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE$1 * 3; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA$1 = 2;
     /**
      * A flat section header component without gradient overlays, with text stroke and auto-sizing
@@ -9016,8 +9063,8 @@
     var COLOR_DARKER_AMOUNT = -30;
     // Border constants
     var BLACK_BORDER_THICKNESS = 2;
-    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE = 2;
-    var WHITE_BORDER_TOTAL_EXTRA_PIXELS = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE * 2; // 4 pixels total
+    var WHITE_BORDER_EXTRA_PIXELS_PER_SIDE = 3;
+    var WHITE_BORDER_TOTAL_EXTRA_PIXELS = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE * 2; // 6 pixels total
     var WHITE_BORDER_RADIUS_EXTRA = 2;
     /**
      * A customizable text button component for Phaser, supporting auto-sizing,
@@ -9030,7 +9077,7 @@
          * @param params TextButtonParams
          */
         function TextButton(_a) {
-            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _c === void 0 ? 'blue' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
+            var scene = _a.scene, x = _a.x, y = _a.y, text = _a.text, _b = _a.fontSize, fontSize = _b === void 0 ? 'lg' : _b, font = _a.font, _c = _a.color, color = _c === void 0 ? 'blue-500' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'white' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'md' : _e, _f = _a.padding, padding = _f === void 0 ? '4' : _f, onClick = _a.onClick;
             var _this = _super.call(this, { scene: scene, x: x, y: y }) || this;
             _this.pw = getPWFromScene$1(scene);
             // Store values