hudini 0.17.2 → 0.18.1

package/dist/components/flat-text-button/flat-text-button.spec.js

@@ -0,0 +1,243 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable max-lines-per-function */
+/* eslint-disable no-magic-numbers */
+import { Scene } from 'phaser';
+import { describe, expect, it, vi } from 'vitest';
+// Mock phaser-wind
+vi.mock('phaser-wind', () => ({
+    Color: {
+        rgb: vi.fn((color) => `rgb-${color}`),
+        hex: vi.fn((color) => `hex-${color}`),
+    },
+}));
+// Mock the getPWFromScene utility
+vi.mock('../../utils/get-pw-from-scene', () => ({
+    getPWFromScene: vi.fn(() => ({
+        fontSize: {
+            px: vi.fn((size) => {
+                const sizes = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };
+                return sizes[size] || 16;
+            }),
+        },
+        spacing: {
+            px: vi.fn((spacing) => {
+                const spacings = { xs: 4, sm: 8, md: 12, lg: 16, xl: 20 };
+                return spacings[spacing] || 12;
+            }),
+        },
+        radius: {
+            px: vi.fn((radius) => {
+                const radiuses = { none: 0, sm: 4, md: 8, lg: 12, xl: 16, full: 9999 };
+                return radiuses[radius] || 8;
+            }),
+        },
+        font: {
+            family: vi.fn((font) => {
+                const fonts = {
+                    sans: 'Arial, sans-serif',
+                    serif: 'Georgia, serif',
+                    mono: 'Courier, monospace',
+                };
+                return fonts[font] || 'Arial, sans-serif';
+            }),
+        },
+    })),
+}));
+// Mock the Text component
+vi.mock('../text', () => {
+    class MockText {
+        text;
+        style;
+        constructor(params) {
+            this.text = params.text;
+            this.style = {
+                fontSize: params.size ?? 22,
+                fontFamily: params.fontFamily ?? 'Bebas Neue',
+            };
+        }
+        setText(text) {
+            this.text = text;
+            return this;
+        }
+        setOrigin() {
+            return this;
+        }
+        setFontSize(size) {
+            this.style['fontSize'] = size;
+            return this;
+        }
+        setFontFamily(family) {
+            this.style['fontFamily'] = family;
+            return this;
+        }
+        setColor(color) {
+            this.style['color'] = color;
+            return this;
+        }
+        getBounds() {
+            return getTextBounds(this.text, this.style['fontSize'] ?? 16);
+        }
+    }
+    return { Text: MockText };
+});
+// Helper function for getBounds
+const getTextBounds = (text, fontSize) => {
+    const charWidth = 10;
+    const lineHeight = parseInt(String(fontSize)) || 16;
+    return {
+        width: text.length * charWidth,
+        height: lineHeight,
+    };
+};
+// Mock Phaser
+vi.mock('phaser', () => {
+    class MockText {
+        text;
+        style;
+        constructor(_x, _y, text, style) {
+            this.text = text;
+            this.style = style;
+        }
+        setText(text) {
+            this.text = text;
+            return this;
+        }
+        setOrigin() {
+            return this;
+        }
+        setFontSize(size) {
+            this.style['fontSize'] = size;
+            return this;
+        }
+        setFontFamily(family) {
+            this.style['fontFamily'] = family;
+            return this;
+        }
+        setColor(color) {
+            this.style['color'] = color;
+            return this;
+        }
+        getBounds() {
+            return getTextBounds(this.text, this.style['fontSize'] ?? 16);
+        }
+    }
+    class MockSprite {
+        // eslint-disable-next-line no-unused-vars
+        constructor(_x, _y, _texture) { }
+        setOrigin() {
+            return this;
+        }
+        setInteractive() {
+            return this;
+        }
+        setTexture() {
+            return this;
+        }
+        on() {
+            return this;
+        }
+    }
+    class MockGraphics {
+        fillStyle() {
+            return this;
+        }
+        fillRoundedRect() {
+            return this;
+        }
+        lineStyle() {
+            return this;
+        }
+        strokeRoundedRect() {
+            return this;
+        }
+        generateTexture() {
+            return this;
+        }
+        destroy() {
+            return this;
+        }
+    }
+    class MockContainer {
+        // eslint-disable-next-line no-unused-vars
+        constructor(_scene, _x, _y) {
+            this.scene = _scene;
+        }
+        add() {
+            return this;
+        }
+        scene;
+    }
+    class Scene {
+        add = {
+            text: vi.fn((x, y, text, style) => new MockText(x, y, text, style)),
+            sprite: vi.fn((x, y, texture) => new MockSprite(x, y, texture)),
+            graphics: vi.fn(() => new MockGraphics()),
+        };
+        tweens = { add: vi.fn() };
+    }
+    class BasePlugin {
+        constructor() { }
+    }
+    const GameObjects = { Container: MockContainer };
+    const Plugins = { BasePlugin };
+    return { GameObjects, Scene, Plugins };
+});
+import { FlatTextButton } from './flat-text-button';
+describe('FlatTextButton', () => {
+    it('should create a FlatTextButton instance', () => {
+        const scene = new Scene();
+        const textButton = new FlatTextButton({
+            scene,
+            x: 100,
+            y: 100,
+            text: 'Click Me',
+        });
+        expect(textButton).toBeInstanceOf(FlatTextButton);
+    });
+    it('should create with custom properties', () => {
+        const scene = new Scene();
+        const textButton = new FlatTextButton({
+            scene,
+            x: 100,
+            y: 100,
+            text: 'Custom Button',
+            fontSize: 'lg',
+            color: 'red',
+            textColor: 'white',
+            borderRadius: 'lg',
+            padding: '4',
+        });
+        expect(textButton).toBeInstanceOf(FlatTextButton);
+    });
+    it('should support method chaining', () => {
+        const scene = new Scene();
+        const textButton = new FlatTextButton({
+            scene,
+            x: 100,
+            y: 100,
+            text: 'Test',
+        });
+        const result = textButton
+            .setText('Chained')
+            .setFontSize('lg')
+            .setColor('green')
+            .setBorderRadius('lg')
+            .setPadding('4');
+        expect(result).toBe(textButton);
+    });
+    it('should handle borderRadius full correctly', () => {
+        const scene = new Scene();
+        const textButton = new FlatTextButton({
+            scene,
+            x: 100,
+            y: 100,
+            text: 'Full Radius Test',
+            borderRadius: 'full',
+        });
+        expect(textButton).toBeInstanceOf(FlatTextButton);
+        // Test setBorderRadius with 'full'
+        const result = textButton.setBorderRadius('full');
+        expect(result).toBe(textButton);
+    });
+});
+//# sourceMappingURL=flat-text-button.spec.js.map

package/dist/components/flat-text-button/flat-text-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flat-text-button.spec.js","sourceRoot":"","sources":["../../../src/components/flat-text-button/flat-text-button.spec.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,2CAA2C;AAC3C,qCAAqC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAElD,mBAAmB;AACnB,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5B,KAAK,EAAE;QACL,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,KAAK,EAAE,CAAC;QAC7C,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,KAAK,EAAE,CAAC;KAC9C;CACF,CAAC,CAAC,CAAC;AAEJ,kCAAkC;AAClC,EAAE,CAAC,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE,CAAC,CAAC;IAC9C,cAAc,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,QAAQ,EAAE;YACR,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAY,EAAE,EAAE;gBACzB,MAAM,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBACzD,OAAO,KAAK,CAAC,IAA0B,CAAC,IAAI,EAAE,CAAC;YACjD,CAAC,CAAC;SACH;QACD,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAe,EAAE,EAAE;gBAC5B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAC1D,OAAO,QAAQ,CAAC,OAAgC,CAAC,IAAI,EAAE,CAAC;YAC1D,CAAC,CAAC;SACH;QACD,MAAM,EAAE;YACN,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,MAAc,EAAE,EAAE;gBAC3B,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;gBACvE,OAAO,QAAQ,CAAC,MAA+B,CAAC,IAAI,CAAC,CAAC;YACxD,CAAC,CAAC;SACH;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAY,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG;oBACZ,IAAI,EAAE,mBAAmB;oBACzB,KAAK,EAAE,gBAAgB;oBACvB,IAAI,EAAE,oBAAoB;iBAC3B,CAAC;gBACF,OAAO,KAAK,CAAC,IAA0B,CAAC,IAAI,mBAAmB,CAAC;YAClE,CAAC,CAAC;SACH;KACF,CAAC,CAAC;CACJ,CAAC,CAAC,CAAC;AAEJ,0BAA0B;AAC1B,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACtB,MAAM,QAAQ;QACJ,IAAI,CAAS;QACb,KAAK,CAAkC;QAE/C,YAAY,MAAkG;YAC5G,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG;gBACX,QAAQ,EAAE,MAAM,CAAC,IAAI,IAAI,EAAE;gBAC3B,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,YAAY;aAC9C,CAAC;QACJ,CAAC;QAED,OAAO,CAAC,IAAY;YAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,SAAS;YACP,OAAO,IAAI,CAAC;QACd,CAAC;QACD,WAAW,CAAC,IAAY;YACtB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAC9B,OAAO,IAAI,CAAC;QACd,CAAC;QACD,aAAa,CAAC,MAAc;YAC1B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC;YAClC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,QAAQ,CAAC,KAAa;YACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;YAC5B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,SAAS;YACP,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC;KACF;IAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,gCAAgC;AAChC,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,QAAyB,EAAqC,EAAE;IACnG,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;IACpD,OAAO;QACL,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,SAAS;QAC9B,MAAM,EAAE,UAAU;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc;AACd,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;IACrB,MAAM,QAAQ;QACJ,IAAI,CAAS;QACb,KAAK,CAAkC;QAE/C,YACE,EAAU,EACV,EAAU,EACV,IAAY,EACZ,KAAsC;YAEtC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,OAAO,CAAC,IAAY;YAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,SAAS;YACP,OAAO,IAAI,CAAC;QACd,CAAC;QACD,WAAW,CAAC,IAAY;YACtB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAC9B,OAAO,IAAI,CAAC;QACd,CAAC;QACD,aAAa,CAAC,MAAc;YAC1B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC;YAClC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,QAAQ,CAAC,KAAa;YACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;YAC5B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,SAAS;YACP,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC;KACF;IAED,MAAM,UAAU;QACd,0CAA0C;QAC1C,YAAY,EAAU,EAAE,EAAU,EAAE,QAAgB,IAAI,CAAC;QACzD,SAAS;YACP,OAAO,IAAI,CAAC;QACd,CAAC;QACD,cAAc;YACZ,OAAO,IAAI,CAAC;QACd,CAAC;QACD,UAAU;YACR,OAAO,IAAI,CAAC;QACd,CAAC;QACD,EAAE;YACA,OAAO,IAAI,CAAC;QACd,CAAC;KACF;IAED,MAAM,YAAY;QAChB,SAAS;YACP,OAAO,IAAI,CAAC;QACd,CAAC;QACD,eAAe;YACb,OAAO,IAAI,CAAC;QACd,CAAC;QACD,SAAS;YACP,OAAO,IAAI,CAAC;QACd,CAAC;QACD,iBAAiB;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QACD,eAAe;YACb,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO;YACL,OAAO,IAAI,CAAC;QACd,CAAC;KACF;IAED,MAAM,aAAa;QACjB,0CAA0C;QAC1C,YAAY,MAAa,EAAE,EAAU,EAAE,EAAU;YAC/C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACtB,CAAC;QACD,GAAG;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,KAAK,CAAQ;KACd;IAED,MAAM,KAAK;QACT,GAAG,GAAG;YACJ,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;YACnE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;YAC/D,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC;SAC1C,CAAC;QACF,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;KAC3B;IAED,MAAM,UAAU;QACd,gBAAgB,CAAC;KAClB;IAED,MAAM,WAAW,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;IACjD,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AACzC,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACjD,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAE1B,MAAM,UAAU,GAAG,IAAI,cAAc,CAAC;YACpC,KAAK;YACL,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAE1B,MAAM,UAAU,GAAG,IAAI,cAAc,CAAC;YACpC,KAAK;YACL,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,IAAI,EAAE,eAAe;YACrB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,OAAO;YAClB,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,GAAG;SACb,CAAC,CAAC;QAEH,MAAM,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAC1B,MAAM,UAAU,GAAG,IAAI,cAAc,CAAC;YACpC,KAAK;YACL,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,IAAI,EAAE,MAAM;SACb,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,UAAU;aACtB,OAAO,CAAC,SAAS,CAAC;aAClB,WAAW,CAAC,IAAI,CAAC;aACjB,QAAQ,CAAC,OAAO,CAAC;aACjB,eAAe,CAAC,IAAI,CAAC;aACrB,UAAU,CAAC,GAAG,CAAC,CAAC;QAEnB,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAE1B,MAAM,UAAU,GAAG,IAAI,cAAc,CAAC;YACpC,KAAK;YACL,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;YACN,IAAI,EAAE,kBAAkB;YACxB,YAAY,EAAE,MAAM;SACrB,CAAC,CAAC;QAEH,MAAM,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;QAElD,mCAAmC;QACnC,MAAM,MAAM,GAAG,UAAU,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAClD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/flat-text-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './flat-text-button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/flat-text-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/flat-text-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/flat-text-button/index.js

@@ -0,0 +1,2 @@
+export * from './flat-text-button';
+//# sourceMappingURL=index.js.map

package/dist/components/flat-text-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/flat-text-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/icon-button/icon-button.d.ts

@@ -14,20 +14,28 @@ export type IconButtonParams = {
 };
 export declare class IconButton extends GameObjects.Container {
     backgroundSprite: GameObjects.Sprite;
-    shadowSprite: GameObjects.Sprite;
+    whiteBorderSprite: GameObjects.Sprite;
     iconText: IconText;
     private pw;
     private baseColor;
+    private colorButton;
+    private lightColorButton;
+    private darkColorButton;
     private sizePx;
     private borderRadiusPx;
     constructor({ scene, x, y, icon, size, color, onClick, borderRadius, }: IconButtonParams);
     setBorderRadius(borderRadius: RadiusKey | number): this;
     setButtonSize(size: FontSizeKey | number): this;
-    private createShadowSprite;
-    private createShadowTexture;
     private updateSize;
+    private createWhiteBorderSprite;
     private createBackgroundSprite;
+    private createWhiteBorderTexture;
     private createBackgroundTexture;
+    /**
+     * Draws gradient using a centered light overlay on CSS color.
+     * For round buttons, uses a smaller centered graphic with light color.
+     */
+    private drawCssColorGradient;
     private createIconText;
     private setupContainer;
     private setupInteractivity;

package/dist/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACnC,CAAC;AAkBF,qBAAa,UAAW,SAAQ,WAAW,CAAC,SAAS;IAC5C,gBAAgB,EAAG,WAAW,CAAC,MAAM,CAAC;IACtC,YAAY,EAAG,WAAW,CAAC,MAAM,CAAC;IAClC,QAAQ,EAAG,QAAQ,CAAC;IAE3B,OAAO,CAAC,EAAE,CAAuB;IACjC,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,MAAM,CAAU;IACxB,OAAO,CAAC,cAAc,CAAU;gBAEpB,EACV,KAAK,EACL,CAAC,EACD,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,GACb,EAAE,gBAAgB;IA2BZ,eAAe,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI;IA0BvD,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IA0BtD,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,mBAAmB;IAuC3B,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,uBAAuB;IAwC/B,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,kBAAkB;IAyC1B;;;OAGG;IACH,IAAW,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,MAAM,CAAC,CAQ9G;IAED;;;;OAIG;IACa,SAAS,CACvB,MAAM,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,GAC7B,MAAM,CAAC,IAAI,CAAC,SAAS;CAoBzB"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACnC,CAAC;AAmCF,qBAAa,UAAW,SAAQ,WAAW,CAAC,SAAS;IAC5C,gBAAgB,EAAG,WAAW,CAAC,MAAM,CAAC;IACtC,iBAAiB,EAAG,WAAW,CAAC,MAAM,CAAC;IACvC,QAAQ,EAAG,QAAQ,CAAC;IAE3B,OAAO,CAAC,EAAE,CAAuB;IACjC,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,eAAe,CAAU;IACjC,OAAO,CAAC,MAAM,CAAU;IACxB,OAAO,CAAC,cAAc,CAAU;gBAEpB,EACV,KAAK,EACL,CAAC,EACD,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,GACb,EAAE,gBAAgB;IA+BZ,eAAe,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI;IAyBvD,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IA0BtD,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,wBAAwB;IAkChC,OAAO,CAAC,uBAAuB;IAyB/B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAyC5B,OAAO,CAAC,cAAc;IAoCtB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,kBAAkB;IA+C1B;;;OAGG;IACH,IAAW,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,MAAM,CAAC,CAQ9G;IAED;;;;OAIG;IACa,SAAS,CACvB,MAAM,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,GAC7B,MAAM,CAAC,IAAI,CAAC,SAAS;CAoBzB"}

package/dist/components/icon-button/icon-button.js

@@ -1,28 +1,45 @@
+/* eslint-disable max-lines-per-function */
 /* eslint-disable max-lines */
 import { IconText } from 'font-awesome-for-phaser';
 import { GameObjects } from 'phaser';
 import { Color, } from 'phaser-wind';
+import { getColorVariant } from '../../utils/color-variants';
 import { getPWFromScene } from '../../utils/get-pw-from-scene';
 const durations = {
-    click: 100,
-    hover: 150,
+    click: 60,
+    hover: 100,
 };
 const BUTTON_SCALE = 2.2;
 const CENTER_OFFSET = 1.1;
-const SHADOW_OFFSET = 4;
-const SHADOW_OPACITY = 0.1;
-const MAIN_SHADOW_OPACITY = 0.9;
-const INNER_OVERLAY_OPACITY = 0.7;
-const HOVER_SCALE = 1.07;
-const CLICK_OFFSET = 2;
-const MAIN_OVERLAY_SCALE = 0.9;
-const INNER_OVERLAY_SCALE = 0.7;
+const HOVER_SCALE = 1.05;
+const POINTER_DOWN_SCALE = 0.95;
+const TOKEN_LIGHTER_DIFF = -100;
+const COLOR_LIGHTER_AMOUNT = 30;
+// Border constants
+const BLACK_BORDER_THICKNESS = 2;
+const WHITE_BORDER_EXTRA_PIXELS_PER_SIDE = 2;
+// eslint-disable-next-line no-magic-numbers
+const WHITE_BORDER_TOTAL_EXTRA_PIXELS = WHITE_BORDER_EXTRA_PIXELS_PER_SIDE * 3; // 5 pixels total
+const WHITE_BORDER_RADIUS_EXTRA = 2;
+// Overlay constants
+const LIGHT_OVERLAY_SCALE = 0.6;
+// Icon constants
+const ICON_STROKE_THICKNESS = 3;
+const ICON_SHADOW_OFFSET_X = 0;
+const ICON_SHADOW_OFFSET_Y = 3;
+const ICON_SHADOW_BLUR = 0;
+const ICON_OFFSET_Y = -1.5; // Half of shadow offset to keep visually centered
+// Origin constants
+const SPRITE_ORIGIN = 0.5;
 export class IconButton extends GameObjects.Container {
     backgroundSprite;
-    shadowSprite;
+    whiteBorderSprite;
     iconText;
     pw;
     baseColor;
+    colorButton;
+    lightColorButton;
+    darkColorButton;
     sizePx;
     borderRadiusPx;
     constructor({ scene, x, y, icon, size, color, onClick, borderRadius, }) {
@@ -31,17 +48,21 @@ export class IconButton extends GameObjects.Container {
         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;
+        this.colorButton = Color.rgb(baseColor);
+        this.lightColorButton = getColorVariant(baseColor, TOKEN_LIGHTER_DIFF, COLOR_LIGHTER_AMOUNT);
+        // this.darkColorButton = getColorVariant(baseColor as string, TOKEN_DARKER_DIFF, COLOR_DARKER_AMOUNT);
+        this.darkColorButton = Color.blackHex();
         this.borderRadiusPx =
             typeof borderRadius === 'number'
                 ? borderRadius
                 : this.pw.radius.px((borderRadius ?? 'full'));
-        this.createShadowSprite(scene, sizePx, baseColor, this.borderRadiusPx);
+        this.createWhiteBorderSprite(scene, sizePx, this.borderRadiusPx);
         this.createBackgroundSprite(scene, sizePx, baseColor, this.borderRadiusPx);
-        this.createIconText(scene, icon, sizePx, baseColor);
+        this.createIconText(scene, icon, sizePx);
         this.setupContainer();
         this.setupInteractivity(onClick);
     }
@@ -52,10 +73,10 @@ export class IconButton extends GameObjects.Container {
         if (this.borderRadiusPx === newRadiusPx)
             return this;
         this.borderRadiusPx = newRadiusPx;
-        // Regenerate textures for background and shadow
-        const shadowTexture = this.createShadowTexture(this.scene, this.sizePx, this.baseColor, this.borderRadiusPx);
+        // Regenerate textures for white border and background
+        const whiteBorderTexture = this.createWhiteBorderTexture(this.scene, this.sizePx, this.borderRadiusPx);
         const backgroundTexture = this.createBackgroundTexture(this.scene, this.sizePx, this.baseColor, this.borderRadiusPx);
-        this.shadowSprite.setTexture(shadowTexture);
+        this.whiteBorderSprite.setTexture(whiteBorderTexture);
         this.backgroundSprite.setTexture(backgroundTexture);
         return this;
     }
@@ -66,42 +87,43 @@ export class IconButton extends GameObjects.Container {
                 : this.pw.fontSize.px(size ?? 'md');
         this.iconText.setFontSize(`${this.sizePx}px`);
         this.updateSize();
-        const shadowTexture = this.createShadowTexture(this.scene, this.sizePx, this.baseColor, this.borderRadiusPx);
+        const whiteBorderTexture = this.createWhiteBorderTexture(this.scene, this.sizePx, this.borderRadiusPx);
         const backgroundTexture = this.createBackgroundTexture(this.scene, this.sizePx, this.baseColor, this.borderRadiusPx);
-        this.shadowSprite.setTexture(shadowTexture);
+        this.whiteBorderSprite.setTexture(whiteBorderTexture);
         this.backgroundSprite.setTexture(backgroundTexture);
         return this;
     }
-    createShadowSprite(scene, size, baseColor, borderRadiusPx) {
-        const shadowTexture = this.createShadowTexture(scene, size, baseColor, borderRadiusPx);
-        this.shadowSprite = scene.add.sprite(1, SHADOW_OFFSET, shadowTexture);
-        this.shadowSprite.setOrigin(0.5, 0.5);
-    }
-    createShadowTexture(scene, size, baseColor, borderRadiusPx) {
-        const textureKey = `iconButton_shadow_r${borderRadiusPx}_${baseColor}_${size}`;
-        const textureSize = size * BUTTON_SCALE;
-        const centerX = size * CENTER_OFFSET;
-        const centerY = size * CENTER_OFFSET;
-        const graphics = scene.add.graphics();
-        const sideOuter = size * 2 * CENTER_OFFSET;
-        const side = size * 2;
-        const radiusOuter = Math.min(borderRadiusPx, sideOuter / 2);
-        const radius = Math.min(borderRadiusPx, side / 2);
-        graphics.fillStyle(Color.hex('black'), SHADOW_OPACITY);
-        graphics.fillRoundedRect(centerX + 1 - sideOuter / 2, centerY - sideOuter / 2, sideOuter, sideOuter, radiusOuter);
-        graphics.fillStyle(Color.hex(`${baseColor}-900`), MAIN_SHADOW_OPACITY);
-        graphics.fillRoundedRect(centerX - side / 2, centerY - CLICK_OFFSET - side / 2, side, side, radius);
-        graphics.generateTexture(textureKey, textureSize, textureSize);
-        graphics.destroy();
-        return textureKey;
-    }
     updateSize() {
         this.setSize(this.sizePx * BUTTON_SCALE, this.sizePx * BUTTON_SCALE);
     }
+    createWhiteBorderSprite(scene, size, borderRadiusPx) {
+        const whiteBorderTexture = this.createWhiteBorderTexture(scene, size, borderRadiusPx);
+        this.whiteBorderSprite = scene.add.sprite(0, 0, whiteBorderTexture);
+        this.whiteBorderSprite.setOrigin(SPRITE_ORIGIN, SPRITE_ORIGIN);
+    }
     createBackgroundSprite(scene, size, baseColor, borderRadiusPx) {
         const backgroundTexture = this.createBackgroundTexture(scene, size, baseColor, borderRadiusPx);
-        this.backgroundSprite = scene.add.sprite(1, 0, backgroundTexture);
-        this.backgroundSprite.setOrigin(0.5, 0.5);
+        this.backgroundSprite = scene.add.sprite(0, 0, backgroundTexture);
+        this.backgroundSprite.setOrigin(SPRITE_ORIGIN, SPRITE_ORIGIN);
+    }
+    createWhiteBorderTexture(scene, size, borderRadiusPx) {
+        const textureKey = `iconButton_whiteBorder_r${borderRadiusPx}_${size}`;
+        // White border is larger on each side
+        const side = size * 2 + WHITE_BORDER_TOTAL_EXTRA_PIXELS;
+        // Increase texture size to accommodate the larger border
+        const textureSize = size * BUTTON_SCALE + WHITE_BORDER_TOTAL_EXTRA_PIXELS;
+        const centerX = textureSize / 2;
+        const centerY = textureSize / 2;
+        const graphics = scene.add.graphics();
+        const maxRadius = Math.floor(Math.min(side / 2, side / 2));
+        const effectiveRadius = Math.min(borderRadiusPx + WHITE_BORDER_RADIUS_EXTRA, maxRadius);
+        const finalRadius = Math.max(0, effectiveRadius);
+        // White border (outer)
+        graphics.fillStyle(Color.hex('white'), 1);
+        graphics.fillRoundedRect(centerX - side / 2, centerY - side / 2, side, side, finalRadius);
+        graphics.generateTexture(textureKey, textureSize, textureSize);
+        graphics.destroy();
+        return textureKey;
     }
     createBackgroundTexture(scene, size, baseColor, borderRadiusPx) {
         const textureKey = `iconButton_r${borderRadiusPx}_${baseColor}_${size}`;
@@ -110,67 +132,100 @@ export class IconButton extends GameObjects.Container {
         const centerY = size * CENTER_OFFSET;
         const graphics = scene.add.graphics();
         const side = size * 2;
-        const mainSide = side * MAIN_OVERLAY_SCALE;
-        const innerSide = side * INNER_OVERLAY_SCALE;
-        const mainRadius = Math.min(borderRadiusPx, mainSide / 2);
-        const innerRadius = Math.min(borderRadiusPx, innerSide / 2);
-        graphics.fillStyle(Color.hex(`${baseColor}-600`), 1);
-        graphics.fillRoundedRect(centerX - mainSide / 2, centerY - mainSide / 2, mainSide, mainSide, mainRadius);
-        graphics.fillStyle(Color.hex(`${baseColor}-500`), INNER_OVERLAY_OPACITY);
-        graphics.fillRoundedRect(centerX - innerSide / 2, centerY - innerSide / 2, innerSide, innerSide, innerRadius);
+        const maxRadius = Math.floor(Math.min(side / 2, side / 2));
+        const effectiveRadius = Math.min(borderRadiusPx, maxRadius);
+        const finalRadius = Math.max(0, effectiveRadius);
+        this.drawCssColorGradient(graphics, centerX, centerY, side, finalRadius);
         graphics.generateTexture(textureKey, textureSize, textureSize);
         graphics.destroy();
         return textureKey;
     }
-    createIconText(scene, icon, size, baseColor) {
+    /**
+     * Draws gradient using a centered light overlay on CSS color.
+     * For round buttons, uses a smaller centered graphic with light color.
+     */
+    drawCssColorGradient(graphics, centerX, centerY, side, effectiveRadius) {
+        // Main background
+        graphics.fillStyle(Color.hex(this.colorButton), 1);
+        graphics.fillRoundedRect(centerX - side / 2, centerY - side / 2, side, side, effectiveRadius);
+        // Centered light overlay (smaller, circular/rounded)
+        const overlaySide = side * LIGHT_OVERLAY_SCALE;
+        const overlayRadius = Math.min(effectiveRadius, overlaySide / 2);
+        graphics.fillStyle(this.lightColorButton, 1);
+        graphics.fillRoundedRect(centerX - overlaySide / 2, centerY - overlaySide / 2, overlaySide, overlaySide, overlayRadius);
+        // Black stroke border
+        graphics.lineStyle(BLACK_BORDER_THICKNESS, Color.hex('black'), 1);
+        graphics.strokeRoundedRect(centerX - side / 2, centerY - side / 2, side, side, effectiveRadius);
+    }
+    createIconText(scene, icon, size) {
+        // Convert darkColorButton (number) to RGB string
+        const darkColorObj = Phaser.Display.Color.ValueToColor(this.darkColorButton);
+        const RGB_MASK = 0xff;
+        const RGB_SHIFT_R = 16;
+        const RGB_SHIFT_G = 8;
+        const darkColorString = `rgb(${darkColorObj.color32 >> RGB_SHIFT_R & RGB_MASK}, ${darkColorObj.color32 >> RGB_SHIFT_G & RGB_MASK}, ${darkColorObj.color32 & RGB_MASK})`;
         this.iconText = new IconText({
             scene,
-            x: 1,
-            y: 1,
+            x: 0,
+            y: ICON_OFFSET_Y,
             icon,
             size,
             style: {
                 color: Color.rgb('white'),
-                strokeThickness: 3,
-                stroke: Color.rgb(`${baseColor}-900`),
+                strokeThickness: ICON_STROKE_THICKNESS,
+                stroke: darkColorString,
+                shadow: {
+                    offsetX: ICON_SHADOW_OFFSET_X,
+                    offsetY: ICON_SHADOW_OFFSET_Y,
+                    color: darkColorString,
+                    blur: ICON_SHADOW_BLUR,
+                    stroke: true,
+                    fill: true,
+                },
             },
         });
         this.iconText.setFontStyle('900');
-        this.iconText.setOrigin(0.5, 0.5);
+        this.iconText.setOrigin(SPRITE_ORIGIN, SPRITE_ORIGIN);
     }
     setupContainer() {
-        this.add([this.shadowSprite, this.backgroundSprite, this.iconText]);
+        this.add([this.whiteBorderSprite, this.backgroundSprite, this.iconText]);
     }
     setupInteractivity(onClick) {
         this.backgroundSprite.setInteractive({ useHandCursor: true });
+        // Hover effects
         this.backgroundSprite.on('pointerover', () => {
             this.scene.tweens.add({
-                targets: this.iconText,
-                scale: HOVER_SCALE,
+                targets: this,
                 duration: durations.hover,
-                ease: 'Linear',
+                scaleX: HOVER_SCALE,
+                scaleY: HOVER_SCALE,
+                ease: 'Back.easeOut',
             });
         });
         this.backgroundSprite.on('pointerout', () => {
             this.scene.tweens.add({
-                targets: this.iconText,
-                scale: 1,
+                targets: this,
                 duration: durations.hover,
-                ease: 'Linear',
+                scaleX: 1,
+                scaleY: 1,
+                ease: 'Back.easeOut',
             });
         });
+        // Click effects
         this.backgroundSprite.on('pointerdown', () => {
             this.scene.tweens.add({
-                targets: [this.backgroundSprite, this.iconText],
-                y: CLICK_OFFSET,
+                targets: [this.whiteBorderSprite, this.backgroundSprite, this.iconText],
+                scaleX: POINTER_DOWN_SCALE,
+                scaleY: POINTER_DOWN_SCALE,
                 duration: durations.click,
                 ease: 'Linear',
             });
         });
         this.backgroundSprite.on('pointerup', () => {
             this.scene.tweens.add({
-                targets: [this.backgroundSprite, this.iconText],
-                y: 0,
+                targets: [this.whiteBorderSprite, this.backgroundSprite, this.iconText],
+                scaleX: 1,
+                scaleY: 1,
                 duration: durations.click,
                 ease: 'Linear',
             });
@@ -196,8 +251,8 @@ export class IconButton extends GameObjects.Container {
      * @returns Rectangle with the button bounds
      */
     getBounds(output) {
-        const width = this.shadowSprite.displayWidth ?? this.shadowSprite.width;
-        const height = this.shadowSprite.displayHeight ?? this.shadowSprite.height;
+        const width = this.backgroundSprite.displayWidth ?? this.backgroundSprite.width;
+        const height = this.backgroundSprite.displayHeight ?? this.backgroundSprite.height;
         if (output) {
             return output.setTo(this.x - width / 2, this.y - height / 2, width, height);
         }