hudini 0.7.0 → 0.9.0

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 export * from './circular-progress';
 export * from './column';
-export * from './icon-button';
 export * from './flat-icon-button';
+export * from './icon-button';
 export * from './linear-progress';
 export * from './row';
+export * from './section-header';
+export * from './text-button';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/components/index.js

@@ -1,7 +1,9 @@
 export * from './circular-progress';
 export * from './column';
-export * from './icon-button';
 export * from './flat-icon-button';
+export * from './icon-button';
 export * from './linear-progress';
 export * from './row';
+export * from './section-header';
+export * from './text-button';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/components/section-header/index.d.ts

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

package/dist/components/section-header/index.d.ts.map

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

package/dist/components/section-header/index.js

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

package/dist/components/section-header/index.js.map

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

package/dist/components/section-header/section-header.d.ts

@@ -0,0 +1,155 @@
+import { GameObjects, Scene } from 'phaser';
+import { type ColorKey, type FontKey, type FontSizeKey, type RadiusKey, type SpacingKey } from 'phaser-wind';
+export type SectionHeaderParams = {
+    /** The Phaser scene to add the header to */
+    scene: Scene;
+    /** X position of the header */
+    x: number;
+    /** Y position of the header */
+    y: number;
+    /** Text content of the header */
+    text: string;
+    /** Font size in px (number) or a Phaser Wind font size token (string). Defaults to 'lg'. */
+    textSize?: FontSizeKey | number;
+    /** Font family. Defaults to 'display'. */
+    font?: FontKey | string;
+    /** Background color. Defaults to 'blue-600'. */
+    backgroundColor?: ColorKey | string;
+    /** Text color. Defaults to 'white'. */
+    textColor?: ColorKey | string;
+    /** Text stroke color. Defaults to a darker version of backgroundColor. */
+    strokeColor?: ColorKey | string;
+    /** Border radius in px (number) or a Phaser Wind radius token (string). Defaults to 'md'. */
+    borderRadius?: RadiusKey | number;
+    /** Margin/padding in px (number) or a Phaser Wind spacing token (string). Defaults to '4'. */
+    margin?: SpacingKey | number;
+};
+/**
+ * A stylized section header component with shadow, text stroke and auto-sizing
+ */
+export declare class SectionHeader extends GameObjects.Container {
+    /** The background graphics of the header */
+    backgroundGraphics: GameObjects.Graphics;
+    /** The shadow graphics below the header */
+    shadowGraphics: GameObjects.Graphics;
+    /** The text object of the header */
+    headerText: GameObjects.Text;
+    /** Reference to the PhaserWind plugin */
+    private pw;
+    /** Font size in pixels */
+    private textSizePx;
+    /** Margin size in pixels */
+    private marginPx;
+    /** Border radius in pixels */
+    private borderRadiusPx;
+    /** Background color value */
+    private backgroundColorValue;
+    /** Text color value */
+    private textColorValue;
+    /** Stroke color value */
+    private strokeColorValue;
+    /** Font family value */
+    private fontValue;
+    /** Text content value */
+    private textValue;
+    /**
+     * Creates a new SectionHeader
+     * @param params Configuration parameters for the header
+     */
+    constructor({ scene, x, y, text, textSize, font, backgroundColor, textColor, strokeColor, borderRadius, margin, }: SectionHeaderParams);
+    /**
+     * Sets the text content of the header
+     * @param text New text content
+     * @returns this for chaining
+     */
+    setText(text: string): this;
+    /**
+     * Sets the font size of the header text
+     * @param textSize New font size (number in px or FontSizeKey)
+     * @returns this for chaining
+     */
+    setTextSize(textSize: FontSizeKey | number): this;
+    /**
+     * Sets the font family of the header text
+     * @param font New font family (FontKey or string)
+     * @returns this for chaining
+     */
+    setFont(font: FontKey | string): this;
+    /**
+     * Sets the background color of the header
+     * @param color New background color (ColorKey or string)
+     * @returns this for chaining
+     */
+    setBackgroundColor(color: ColorKey | string): this;
+    /**
+     * Sets the text color of the header
+     * @param color New text color (ColorKey or string)
+     * @returns this for chaining
+     */
+    setTextColor(color: ColorKey | string): this;
+    /**
+     * Sets the stroke color of the header text
+     * @param color New stroke color (ColorKey or string)
+     * @returns this for chaining
+     */
+    setStrokeColor(color: ColorKey | string): this;
+    /**
+     * Sets the border radius of the header
+     * @param borderRadius New border radius (number in px or RadiusKey)
+     * @returns this for chaining
+     */
+    setBorderRadius(borderRadius: RadiusKey | number): this;
+    /**
+     * Sets the margin/padding of the header
+     * @param margin New margin size (number in px or SpacingKey)
+     * @returns this for chaining
+     */
+    setMargin(margin: SpacingKey | number): this;
+    /**
+     * Creates the header text game object
+     * @param scene The scene to add the text to
+     */
+    private createHeaderText;
+    /**
+     * Creates the shadow graphics below the header
+     * @param scene The scene to add the graphics to
+     */
+    private createShadowGraphics;
+    /**
+     * Creates the background graphics for the header
+     * @param scene The scene to add the graphics to
+     */
+    private createBackgroundGraphics;
+    /**
+     * Regenerates all graphics after a property change
+     */
+    private regenerateGraphics;
+    /**
+     * Draws the shadow graphics
+     */
+    private drawShadow;
+    /**
+     * Draws the background graphics
+     */
+    private drawBackground;
+    /**
+     * Gets the dimensions of the header based on text content
+     * @returns Object containing width and height
+     */
+    private getHeaderDimensions;
+    /**
+     * Sets up the container with all graphics in the correct order
+     */
+    private setupContainer;
+    /**
+     * Sets up interactivity for the header
+     */
+    private setupInteractivity;
+    /**
+     * Gets a darker version of the given color
+     * @param color Base color to darken
+     * @returns Darker color string
+     */
+    private getDarkerColor;
+}
+//# sourceMappingURL=section-header.d.ts.map

package/dist/components/section-header/section-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.d.ts","sourceRoot":"","sources":["../../../src/components/section-header/section-header.ts"],"names":[],"mappings":"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"}

package/dist/components/section-header/section-header.js

@@ -0,0 +1,323 @@
+/* eslint-disable no-magic-numbers */
+import { GameObjects } from 'phaser';
+import { Color, } from 'phaser-wind';
+import { getPWFromScene } from '../../utils/get-pw-from-scene';
+/** Vertical offset for the shadow */
+const SHADOW_OFFSET_Y = 4;
+/** Opacity value for the shadow */
+const SHADOW_OPACITY = 0.25;
+/** Thickness of the text stroke */
+const STROKE_THICKNESS = 2;
+/** Shadow size as a percentage of the header size */
+const SHADOW_SCALE = 0.95;
+/**
+ * A stylized section header component with shadow, text stroke and auto-sizing
+ */
+export class SectionHeader extends GameObjects.Container {
+    /** The background graphics of the header */
+    backgroundGraphics;
+    /** The shadow graphics below the header */
+    shadowGraphics;
+    /** The text object of the header */
+    headerText;
+    /** Reference to the PhaserWind plugin */
+    pw;
+    /** Font size in pixels */
+    textSizePx;
+    /** Margin size in pixels */
+    marginPx;
+    /** Border radius in pixels */
+    borderRadiusPx;
+    /** Background color value */
+    backgroundColorValue;
+    /** Text color value */
+    textColorValue;
+    /** Stroke color value */
+    strokeColorValue;
+    /** Font family value */
+    fontValue;
+    /** Text content value */
+    textValue;
+    /**
+     * Creates a new SectionHeader
+     * @param params Configuration parameters for the header
+     */
+    constructor({ scene, x, y, text, textSize, font, backgroundColor = 'blue-600', textColor = 'white', strokeColor, borderRadius = 'md', margin = '4', }) {
+        super(scene, x, y);
+        this.pw = getPWFromScene(scene);
+        // Store values
+        this.textValue = text;
+        this.textSizePx =
+            typeof textSize === 'number'
+                ? textSize
+                : this.pw.fontSize.px(textSize ?? 'lg');
+        this.marginPx =
+            typeof margin === 'number'
+                ? margin
+                : this.pw.spacing.px(margin ?? '4');
+        this.borderRadiusPx =
+            typeof borderRadius === 'number'
+                ? borderRadius
+                : this.pw.radius.px(borderRadius ?? 'md');
+        this.backgroundColorValue = Color.rgb(backgroundColor);
+        this.textColorValue = Color.rgb(textColor);
+        // If no stroke color provided, use a darker version of the background
+        this.strokeColorValue = strokeColor
+            ? Color.rgb(strokeColor)
+            : this.getDarkerColor(backgroundColor);
+        this.fontValue = typeof font === 'string' ? font : this.pw.font.family(font ?? 'display');
+        this.createHeaderText(scene);
+        this.createShadowGraphics(scene);
+        this.createBackgroundGraphics(scene);
+        this.setupContainer();
+        this.setupInteractivity();
+    }
+    /**
+     * Sets the text content of the header
+     * @param text New text content
+     * @returns this for chaining
+     */
+    setText(text) {
+        this.textValue = text;
+        this.headerText.setText(text);
+        this.regenerateGraphics();
+        return this;
+    }
+    /**
+     * Sets the font size of the header text
+     * @param textSize New font size (number in px or FontSizeKey)
+     * @returns this for chaining
+     */
+    setTextSize(textSize) {
+        this.textSizePx =
+            typeof textSize === 'number'
+                ? textSize
+                : this.pw.fontSize.px(textSize ?? 'lg');
+        this.headerText.setFontSize(this.textSizePx);
+        this.regenerateGraphics();
+        return this;
+    }
+    /**
+     * Sets the font family of the header text
+     * @param font New font family (FontKey or string)
+     * @returns this for chaining
+     */
+    setFont(font) {
+        this.fontValue = typeof font === 'string' ? font : this.pw.font.family(font ?? 'display');
+        this.headerText.setFontFamily(this.fontValue);
+        this.regenerateGraphics();
+        return this;
+    }
+    /**
+     * Sets the background color of the header
+     * @param color New background color (ColorKey or string)
+     * @returns this for chaining
+     */
+    setBackgroundColor(color) {
+        this.backgroundColorValue = Color.rgb(color);
+        // Update stroke color to match new background if it was auto-generated
+        if (!this.strokeColorValue.startsWith('#')) {
+            this.strokeColorValue = this.getDarkerColor(color);
+            this.headerText.setStroke(this.strokeColorValue, STROKE_THICKNESS);
+        }
+        this.regenerateGraphics();
+        return this;
+    }
+    /**
+     * Sets the text color of the header
+     * @param color New text color (ColorKey or string)
+     * @returns this for chaining
+     */
+    setTextColor(color) {
+        this.textColorValue = Color.rgb(color);
+        this.headerText.setColor(this.textColorValue);
+        return this;
+    }
+    /**
+     * Sets the stroke color of the header text
+     * @param color New stroke color (ColorKey or string)
+     * @returns this for chaining
+     */
+    setStrokeColor(color) {
+        this.strokeColorValue = Color.rgb(color);
+        this.headerText.setStroke(this.strokeColorValue, STROKE_THICKNESS);
+        return this;
+    }
+    /**
+     * Sets the border radius of the header
+     * @param borderRadius New border radius (number in px or RadiusKey)
+     * @returns this for chaining
+     */
+    setBorderRadius(borderRadius) {
+        this.borderRadiusPx =
+            typeof borderRadius === 'number'
+                ? borderRadius
+                : this.pw.radius.px(borderRadius ?? 'md');
+        this.regenerateGraphics();
+        return this;
+    }
+    /**
+     * Sets the margin/padding of the header
+     * @param margin New margin size (number in px or SpacingKey)
+     * @returns this for chaining
+     */
+    setMargin(margin) {
+        this.marginPx =
+            typeof margin === 'number'
+                ? margin
+                : this.pw.spacing.px(margin ?? '4');
+        this.regenerateGraphics();
+        return this;
+    }
+    /**
+     * Creates the header text game object
+     * @param scene The scene to add the text to
+     */
+    createHeaderText(scene) {
+        this.headerText = scene.add.text(0, 0, this.textValue, {
+            fontSize: `${this.textSizePx}px`,
+            fontFamily: this.fontValue,
+            color: this.textColorValue,
+            stroke: this.strokeColorValue,
+            strokeThickness: STROKE_THICKNESS,
+            fontStyle: 'bold', // Make section headers bold by default
+        });
+        this.headerText.setOrigin(0.5, 0.5);
+    }
+    /**
+     * Creates the shadow graphics below the header
+     * @param scene The scene to add the graphics to
+     */
+    createShadowGraphics(scene) {
+        this.shadowGraphics = scene.add.graphics();
+        this.drawShadow();
+    }
+    /**
+     * Creates the background graphics for the header
+     * @param scene The scene to add the graphics to
+     */
+    createBackgroundGraphics(scene) {
+        this.backgroundGraphics = scene.add.graphics();
+        this.drawBackground();
+    }
+    /**
+     * Regenerates all graphics after a property change
+     */
+    regenerateGraphics() {
+        // Update text bounds after text/font changes
+        this.headerText.setText(this.textValue);
+        // Redraw graphics with new properties
+        this.drawShadow();
+        this.drawBackground();
+    }
+    /**
+     * Draws the shadow graphics
+     */
+    drawShadow() {
+        const sizes = this.getHeaderDimensions();
+        const { height, width } = sizes;
+        this.shadowGraphics.clear();
+        // Limit radius to maximum possible for the header dimensions
+        const maxRadius = Math.min(width / 2, height / 2);
+        const effectiveRadius = Math.min(this.borderRadiusPx, maxRadius);
+        // Shadow size is 80% of the header size
+        const shadowWidth = width * SHADOW_SCALE;
+        const shadowHeight = height * SHADOW_SCALE;
+        // Calculate shadow position to center it
+        // Since Graphics doesn't have setOrigin, we need to calculate the offset manually
+        const shadowX = -shadowWidth / 2;
+        const shadowY = SHADOW_OFFSET_Y - shadowHeight / 2 + 4;
+        // Calculate shadow radius (proportional to shadow size)
+        const shadowMaxRadius = Math.min(shadowWidth / 2, shadowHeight / 2);
+        const shadowEffectiveRadius = Math.min(effectiveRadius * SHADOW_SCALE, shadowMaxRadius);
+        // Shadow (only vertical offset, no horizontal)
+        this.shadowGraphics.fillStyle(Color.hex('black'), SHADOW_OPACITY);
+        this.shadowGraphics.fillRoundedRect(shadowX, shadowY, shadowWidth, shadowHeight, shadowEffectiveRadius);
+    }
+    /**
+     * Draws the background graphics
+     */
+    drawBackground() {
+        const { width, height } = this.getHeaderDimensions();
+        this.backgroundGraphics.clear();
+        // Limit radius to maximum possible for the header dimensions
+        const maxRadius = Math.min(width / 2, height / 2);
+        const effectiveRadius = Math.min(this.borderRadiusPx, maxRadius);
+        // Since Graphics doesn't have setOrigin, we need to calculate the offset manually
+        const bgX = -width / 2;
+        const bgY = -height / 2;
+        // Main background with subtle gradient effect
+        this.backgroundGraphics.fillStyle(Color.hex(this.backgroundColorValue), 1);
+        this.backgroundGraphics.fillRoundedRect(bgX, bgY, width, height, effectiveRadius);
+        const depth = 0.15;
+        let hightlightWidth = width;
+        if (this.borderRadiusPx > 12) {
+            hightlightWidth = width * 0.7;
+        }
+        const highlightX = bgX + (width - hightlightWidth) / 2;
+        // Add a subtle highlight on top for depth
+        const highlightHeight = Math.max(2, height * depth);
+        // For the highlight, use a smaller radius if the highlight is too small
+        const highlightRadius = Math.min(effectiveRadius, highlightHeight / 2);
+        this.backgroundGraphics.fillStyle(Color.hex('white'), depth);
+        this.backgroundGraphics.fillRoundedRect(highlightX, bgY, hightlightWidth, highlightHeight, highlightRadius);
+    }
+    /**
+     * Gets the dimensions of the header based on text content
+     * @returns Object containing width and height
+     */
+    getHeaderDimensions() {
+        const textBounds = this.headerText.getBounds();
+        const width = textBounds.width + this.marginPx * 2;
+        const height = textBounds.height + this.marginPx * 2;
+        return { width, height };
+    }
+    /**
+     * Sets up the container with all graphics in the correct order
+     */
+    setupContainer() {
+        this.add([this.shadowGraphics, this.backgroundGraphics, this.headerText]);
+    }
+    /**
+     * Sets up interactivity for the header
+     */
+    setupInteractivity() {
+        this.setInteractive();
+        this.on('pointerdown', () => {
+            this.setScale(0.95);
+            this.on('pointerup', () => {
+                this.setScale(1);
+            });
+        });
+    }
+    /**
+     * Gets a darker version of the given color
+     * @param color Base color to darken
+     * @returns Darker color string
+     */
+    getDarkerColor(color) {
+        // Try to get a darker shade of the same color family
+        const colorStr = color;
+        // If it's already a shade (e.g., "blue-600"), try to make it darker
+        if (colorStr.includes('-')) {
+            const [family, shade] = colorStr.split('-');
+            if (family && shade) {
+                const currentShade = parseInt(shade);
+                const shadeLimit = 900;
+                const shadeIncrement = 200;
+                if (!isNaN(currentShade) && currentShade < shadeLimit) {
+                    const darkerShade = Math.min(shadeLimit, currentShade + shadeIncrement);
+                    return Color.rgb(`${family}-${darkerShade}`);
+                }
+            }
+        }
+        // If it's a base color (e.g., "blue"), add a dark shade
+        const baseColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray'];
+        if (baseColors.includes(colorStr)) {
+            return Color.rgb(`${colorStr}-800`);
+        }
+        // Fallback to a dark color
+        return Color.rgb('gray-800');
+    }
+}
+//# sourceMappingURL=section-header.js.map

package/dist/components/section-header/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.js","sourceRoot":"","sources":["../../../src/components/section-header/section-header.ts"],"names":[],"mappings":"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"}

package/dist/components/section-header/section-header.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=section-header.spec.d.ts.map

package/dist/components/section-header/section-header.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.spec.d.ts","sourceRoot":"","sources":["../../../src/components/section-header/section-header.spec.ts"],"names":[],"mappings":""}