hudini 0.13.3 → 0.14.0

package/README.md

@@ -1,4 +1,11 @@
-<img src="data/hudini.png" style="max-width: 500px" alt="hudini" />
+<p align="center">
+  <img src="data/hudini.png" style="max-width: 500px" alt="hudini" />
+</p>
+
+[![NPM Version](https://img.shields.io/npm/v/phaser-wind)](https://www.npmjs.com/package/phaser-wind)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
 
 # 🎩 Hudini
 
@@ -195,6 +202,41 @@ Notes:
 - Hover scales the icon subtly, click animates press/release.
 - Colors and sizes integrate with `phaser-wind` theme tokens.
 
+### SizedBox
+
+A simple invisible rectangle component for spacing and layout purposes. It occupies space without any visual appearance.
+
+```ts
+import { SizedBox } from 'hudini';
+// inside a Phaser.Scene (e.g., in create())
+
+const spacer = new SizedBox({
+  scene: this,
+  x: 0,
+  y: 0,
+  width: 0,   // horizontal spacing
+  height: 20, // vertical spacing
+});
+
+// Use in layouts for precise spacing control
+const column = new Column({
+  scene: this,
+  x: 400,
+  y: 300,
+  children: [
+    new TextButton({ scene: this, x: 0, y: 0, text: 'Button 1' }),
+    new SizedBox({ scene: this, x: 0, y: 0, width: 0, height: 20 }),
+    new TextButton({ scene: this, x: 0, y: 0, text: 'Button 2' }),
+  ]
+});
+```
+
+Notes:
+
+- Extends `Phaser.GameObjects.Rectangle` for native width/height support.
+- Default values: `width: 1px`, `height: 1px` if not specified.
+- Perfect for creating custom spacing in layouts where gap isn't sufficient.
+
 ## 📦 API Surfaces
 
 - `Column` and `Row` are `Phaser.GameObjects.Container` subclasses. Useful methods:
@@ -203,6 +245,10 @@ Notes:
   - `addChild(child, relayout = true): this`
   - `addChildren(children, relayout = true): this`
 - `IconButton` constructor accepts `{ scene, x, y, icon, size?, color?, onClick? }`.
+- `SizedBox` extends `Phaser.GameObjects.Rectangle`. Useful methods:
+  - `setWidth(width: number): this`
+  - `setHeight(height: number): this`
+  - `setSize(width: number, height: number): this`
 
 ## 🔗 Storybook
 

package/dist/components/index.d.ts

@@ -7,5 +7,6 @@ export * from './linear-progress';
 export * from './radial-progress';
 export * from './row';
 export * from './section-header';
+export * from './sized-box';
 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,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

package/dist/components/index.js

@@ -7,5 +7,6 @@ export * from './linear-progress';
 export * from './radial-progress';
 export * from './row';
 export * from './section-header';
+export * from './sized-box';
 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,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

package/dist/components/sized-box/index.d.ts

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

package/dist/components/sized-box/index.d.ts.map

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

package/dist/components/sized-box/index.js

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

package/dist/components/sized-box/index.js.map

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

package/dist/components/sized-box/sized-box.d.ts

@@ -0,0 +1,47 @@
+import { GameObjects, Scene } from 'phaser';
+/**
+ * Parameters for creating a SizedBox.
+ */
+export type SizedBoxParams = {
+    /** Phaser scene where the SizedBox will be added. */
+    scene: Scene;
+    /** X position of the SizedBox. */
+    x: number;
+    /** Y position of the SizedBox. */
+    y: number;
+    /** Width of the SizedBox in pixels. If not provided, defaults to 1px. */
+    width?: number;
+    /** Height of the SizedBox in pixels. If not provided, defaults to 1px. */
+    height?: number;
+};
+/**
+ * SizedBox is a simple invisible rectangle component that can be used for spacing
+ * and layout purposes. It has no visual appearance but occupies space.
+ */
+export declare class SizedBox extends GameObjects.Rectangle {
+    /**
+     * Creates a new SizedBox instance.
+     * @param params SizedBoxParams
+     */
+    constructor({ scene, x, y, width, height }: SizedBoxParams);
+    /**
+     * Sets the width of the SizedBox.
+     * @param width New width in pixels.
+     * @returns This SizedBox instance.
+     */
+    setWidth(width: number): this;
+    /**
+     * Sets the height of the SizedBox.
+     * @param height New height in pixels.
+     * @returns This SizedBox instance.
+     */
+    setHeight(height: number): this;
+    /**
+     * Sets both width and height of the SizedBox.
+     * @param width New width in pixels.
+     * @param height New height in pixels.
+     * @returns This SizedBox instance.
+     */
+    setSize(width: number, height: number): this;
+}
+//# sourceMappingURL=sized-box.d.ts.map

package/dist/components/sized-box/sized-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sized-box.d.ts","sourceRoot":"","sources":["../../../src/components/sized-box/sized-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,qDAAqD;IACrD,KAAK,EAAE,KAAK,CAAC;IACb,kCAAkC;IAClC,CAAC,EAAE,MAAM,CAAC;IACV,kCAAkC;IAClC,CAAC,EAAE,MAAM,CAAC;IACV,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,qBAAa,QAAS,SAAQ,WAAW,CAAC,SAAS;IACjD;;;OAGG;gBACS,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,KAAS,EAAE,MAAU,EAAE,EAAE,cAAc;IAalE;;;;OAIG;IACI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKpC;;;;OAIG;IACI,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKtC;;;;;OAKG;IACa,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAK7D"}

package/dist/components/sized-box/sized-box.js

@@ -0,0 +1,51 @@
+import { GameObjects } from 'phaser';
+/**
+ * SizedBox is a simple invisible rectangle component that can be used for spacing
+ * and layout purposes. It has no visual appearance but occupies space.
+ */
+export class SizedBox extends GameObjects.Rectangle {
+    /**
+     * Creates a new SizedBox instance.
+     * @param params SizedBoxParams
+     */
+    constructor({ scene, x, y, width = 1, height = 1 }) {
+        // Validate that at least one dimension is provided
+        if (width === undefined && height === undefined) {
+            throw new Error('SizedBox must have at least width or height specified');
+        }
+        const finalWidth = width ?? 1;
+        const finalHeight = height ?? 1;
+        // Create invisible rectangle (no fill, no stroke)
+        super(scene, x, y, finalWidth, finalHeight, 0x000000, 0);
+    }
+    /**
+     * Sets the width of the SizedBox.
+     * @param width New width in pixels.
+     * @returns This SizedBox instance.
+     */
+    setWidth(width) {
+        this.width = width;
+        return this;
+    }
+    /**
+     * Sets the height of the SizedBox.
+     * @param height New height in pixels.
+     * @returns This SizedBox instance.
+     */
+    setHeight(height) {
+        this.height = height;
+        return this;
+    }
+    /**
+     * Sets both width and height of the SizedBox.
+     * @param width New width in pixels.
+     * @param height New height in pixels.
+     * @returns This SizedBox instance.
+     */
+    setSize(width, height) {
+        this.width = width;
+        this.height = height;
+        return this;
+    }
+}
+//# sourceMappingURL=sized-box.js.map

package/dist/components/sized-box/sized-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sized-box.js","sourceRoot":"","sources":["../../../src/components/sized-box/sized-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAS,MAAM,QAAQ,CAAC;AAkB5C;;;GAGG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW,CAAC,SAAS;IACjD;;;OAGG;IACH,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAkB;QAChE,mDAAmD;QACnD,IAAI,KAAK,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;QAC3E,CAAC;QAED,MAAM,UAAU,GAAG,KAAK,IAAI,CAAC,CAAC;QAC9B,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,CAAC;QAEhC,kDAAkD;QAClD,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC3D,CAAC;IAED;;;;OAIG;IACI,QAAQ,CAAC,KAAa;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACI,SAAS,CAAC,MAAc;QAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACa,OAAO,CAAC,KAAa,EAAE,MAAc;QACnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hudini",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "🎩 Magical Phaser UI components - Reusable HUD elements for game development. Is magic, like a wizard",
   "type": "module",
   "main": "./dist/index.js",