@rb-games/core 0.1.0

package/dist/ui/components/Comp.utils.d.ts

@@ -0,0 +1,390 @@
+import { type TextStyleOptions } from 'pixi.js';
+import type { ButtonComp, ButtonCompSkinData, ButtonStateKey, ButtonEffect } from './ButtonComp';
+import type { SpriteConfig } from './Component.types';
+/**
+ * Configuration interface for generating button skins with pattern-based texture naming.
+ *
+ * This interface allows you to define button skins using a base texture name and automatic
+ * state suffix generation, reducing boilerplate code and bundle size.
+ *
+ * @example
+ * ```typescript
+ * const config: ButtonSkinGeneratorConfig = {
+ *   background: {
+ *     texture: 'btn_spin',
+ *     perState: true,
+ *     config: { anchor: { x: 0.5, y: 0.5 } }
+ *   },
+ *   icon: {
+ *     texture: 'icon_spin',
+ *     perState: false,
+ *     config: { anchor: { x: 0.5, y: 0.5 } }
+ *   }
+ * };
+ * ```
+ */
+export interface ButtonSkinGeneratorConfig {
+    /**
+     * Array of button states to generate.
+     *
+     * @default ['up', 'over', 'down', 'disabled']
+     */
+    states?: ButtonStateKey[];
+    /**
+     * Separator between base name and state suffix.
+     *
+     * @default '_'
+     */
+    separator?: string;
+    /**
+     * Background configuration for the button.
+     */
+    background?: {
+        /**
+         * Base texture name for the background.
+         */
+        texture: string;
+        /**
+         * Whether background texture changes per state.
+         *
+         * If true, generates 'btn_name_up', 'btn_name_over', etc.
+         * If false, uses the same background texture for all states.
+         *
+         * @default true
+         */
+        perState?: boolean;
+        /**
+         * Additional sprite configuration for the background.
+         */
+        config?: Partial<SpriteConfig>;
+    };
+    /**
+     * Icon configuration for the button.
+     *
+     * If provided, icons will be added to the button skin.
+     */
+    icon?: {
+        /**
+         * Base texture name for the icon.
+         */
+        texture: string;
+        /**
+         * Whether icon texture changes per state.
+         *
+         * If true, generates 'icon_name_up', 'icon_name_over', etc.
+         * If false, uses the same icon texture for all states.
+         *
+         * @default false
+         */
+        perState?: boolean;
+        /**
+         * Additional sprite configuration for the icon.
+         */
+        config?: Partial<SpriteConfig>;
+    };
+    textStyle?: TextStyleOptions;
+}
+/**
+ * Creates a ButtonCompSkinData object using pattern-based texture naming.
+ *
+ * This function generates button skin configurations by automatically creating
+ * texture names for each state based on a base name and separator pattern.
+ * Reduces repetitive code and bundle size compared to manually defining each state.
+ *
+ * @param config - Configuration object for button skin generation
+ * @returns Complete ButtonCompSkinData object with all specified states
+ *
+ * @example
+ * ```typescript
+ * // Simple button with background only
+ * const skin = createButtonSkin({
+ *   background: {
+ *     texture: 'btn_bet_plus',
+ *     perState: true
+ *   }
+ * });
+ * // Generates: btn_bet_plus_up, btn_bet_plus_over, btn_bet_plus_down, btn_bet_plus_disabled
+ *
+ * // Button with icon (icon doesn't change per state)
+ * const spinSkin = createButtonSkin({
+ *   background: {
+ *     texture: 'btn_spin',
+ *     perState: true,
+ *     config: { anchor: { x: 0.5, y: 0.5 } }
+ *   },
+ *   icon: {
+ *     texture: 'icon_spin',
+ *     perState: false,
+ *     config: { anchor: { x: 0.5, y: 0.5 } }
+ *   }
+ * });
+ *
+ * // Button with dynamic icon (icon changes per state)
+ * const dynamicSkin = createButtonSkin({
+ *   background: {
+ *     texture: 'btn_action',
+ *     perState: true
+ *   },
+ *   icon: {
+ *     texture: 'icon_action',
+ *     perState: true
+ *   }
+ * });
+ * // Generates: icon_action_up, icon_action_over, icon_action_down, icon_action_disabled
+ *
+ * // Custom states and configuration
+ * const customSkin = createButtonSkin({
+ *   background: {
+ *     texture: 'btn_custom',
+ *     perState: true,
+ *     config: { alpha: 0.9, tint: 0xFFFFFF }
+ *   },
+ *   states: ['up', 'over'],
+ *   separator: '-'
+ * });
+ * ```
+ */
+export declare function createSpriteButtonSkin(config: ButtonSkinGeneratorConfig): ButtonCompSkinData;
+/**
+ * Context object passed to effect handlers containing button parts and state information.
+ *
+ * Provides access to all visual elements of the button (background, icon, text)
+ * and current state information for creating custom animations and behaviors.
+ *
+ * @example
+ * ```typescript
+ * const effect = createButtonEffect({
+ *   onStateChange: (ctx) => {
+ *     if (ctx.state === 'over' && ctx.icon) {
+ *       gsap.to(ctx.icon, { rotation: Math.PI * 2, duration: 1 });
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export interface ButtonEffectContext {
+    /**
+     * Reference to the button instance.
+     */
+    button: ButtonComp;
+    /**
+     * Current button state.
+     */
+    state: ButtonStateKey;
+    /**
+     * Previous button state (undefined on first state change).
+     */
+    previousState?: ButtonStateKey;
+    /**
+     * Background sprite or graphics element.
+     */
+    background: ButtonComp['background'];
+    /**
+     * Icon sprite element (may be undefined if button has no icon).
+     */
+    icon: ButtonComp['icon'];
+    /**
+     * Text label element (may be null if button has no text).
+     */
+    text: ButtonComp['text'];
+    /**
+     *
+     */
+    placeHolder: ButtonComp['placeHolder'];
+}
+/**
+ * Configuration for creating a button effect.
+ *
+ * Effects are composable behaviors that can be attached to buttons to add
+ * animations, visual feedback, or custom logic triggered by state changes or updates.
+ *
+ * @example
+ * ```typescript
+ * // Simple hover glow effect
+ * const glowEffect = createButtonEffect({
+ *   name: 'glow',
+ *   onStateChange: (ctx) => {
+ *     if (ctx.state === 'over') {
+ *       gsap.to(ctx.background, { alpha: 1.2, duration: 0.3 });
+ *     } else {
+ *       gsap.to(ctx.background, { alpha: 1, duration: 0.3 });
+ *     }
+ *   }
+ * });
+ *
+ * // Continuous rotation effect
+ * const rotateEffect = createButtonEffect({
+ *   name: 'rotate',
+ *   onAttach: (ctx) => {
+ *     if (ctx.icon) {
+ *       gsap.to(ctx.icon, {
+ *         rotation: Math.PI * 2,
+ *         duration: 2,
+ *         repeat: -1,
+ *         ease: 'none'
+ *       });
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export interface ButtonEffectConfig {
+    /**
+     * Unique name for the effect.
+     *
+     * Used to identify and remove effects later.
+     */
+    name: string;
+    /**
+     * Called when the effect is attached to a button.
+     *
+     * Use this to initialize animations, store references, or set up initial state.
+     *
+     * @param ctx - Effect context with button parts and state
+     */
+    onAttach?(ctx: ButtonEffectContext): void;
+    /**
+     * Called when the effect is detached from a button.
+     *
+     * Use this to clean up animations, kill tweens, or remove event listeners.
+     */
+    onDetach?(): void;
+    /**
+     * Called when the button state changes.
+     *
+     * This is where you implement state-dependent animations and behaviors.
+     *
+     * @param ctx - Effect context with current and previous state
+     *
+     * @example
+     * ```typescript
+     * onStateChange: (ctx) => {
+     *   if (ctx.state === 'down') {
+     *     gsap.to(ctx.button.scale, { x: 0.95, y: 0.95, duration: 0.1 });
+     *   } else if (ctx.previousState === 'down') {
+     *     gsap.to(ctx.button.scale, { x: 1, y: 1, duration: 0.1 });
+     *   }
+     * }
+     * ```
+     */
+    onStateChange?(ctx: ButtonEffectContext): void;
+    /**
+     * Called when the button is destroyed.
+     *
+     * Final cleanup opportunity before the button is removed.
+     */
+    onDestroy?(): void;
+}
+/**
+ * Creates a button effect from a configuration object.
+ *
+ * Button effects are reusable, composable behaviors that can be attached to any button
+ * to add animations, visual feedback, or custom logic. Effects receive a context object
+ * with access to all button parts (background, icon, text) and can respond to state changes
+ * or frame updates.
+ *
+ * @param config - Effect configuration with lifecycle handlers
+ * @returns ButtonEffect instance that can be attached to buttons
+ *
+ * @example
+ * ```typescript
+ * import gsap from 'gsap';
+ *
+ * // Create a spin effect for button icons
+ * const spinEffect = createButtonEffect({
+ *   name: 'iconSpin',
+ *   onStateChange: (ctx) => {
+ *     if (!ctx.icon) return;
+ *
+ *     if (ctx.state === 'over' || ctx.state === 'down') {
+ *       gsap.to(ctx.icon, {
+ *         rotation: Math.PI * 2,
+ *         duration: 1,
+ *         repeat: -1,
+ *         ease: 'none'
+ *       });
+ *     } else {
+ *       gsap.killTweensOf(ctx.icon);
+ *       gsap.to(ctx.icon, { rotation: 0, duration: 0.3 });
+ *     }
+ *   },
+ *   onDetach: () => {
+ *     // Cleanup is handled in onStateChange
+ *   }
+ * });
+ *
+ * // Attach to button
+ * const button = new ButtonComp();
+ * button.addEffect(spinEffect);
+ *
+ * // Create a pulse effect
+ * const pulseEffect = createButtonEffect({
+ *   name: 'pulse',
+ *   onAttach: (ctx) => {
+ *     gsap.to(ctx.button.scale, {
+ *       x: 1.05,
+ *       y: 1.05,
+ *       duration: 0.8,
+ *       repeat: -1,
+ *       yoyo: true,
+ *       ease: 'sine.inOut'
+ *     });
+ *   },
+ *   onDetach: () => {
+ *     // Tweens are automatically killed when button is destroyed
+ *   }
+ * });
+ *
+ * // Create a custom update-based effect
+ * let time = 0;
+ * const waveEffect = createButtonEffect({
+ *   name: 'wave',
+ *   onUpdate: (deltaTime, ctx) => {
+ *     time += deltaTime;
+ *     if (ctx.icon) {
+ *       ctx.icon.y = Math.sin(time * 3) * 5;
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare function createButtonEffect(config: ButtonEffectConfig): ButtonEffect;
+export interface ToggleIconSlideEffectOptions {
+    duration?: number;
+    ease?: string;
+    offset?: number;
+}
+export declare function createToggleIconSlideEffect(options?: ToggleIconSlideEffectOptions): ButtonEffect;
+/**
+ * Options for the flat button effect.
+ */
+export interface FlatButtonEffectOptions {
+    /** Background alpha on hover. @default 0.85 */
+    overAlpha?: number;
+    /** Scale factor on press. @default 0.95 */
+    downScale?: number;
+    /** Overall alpha on press. @default 0.9 */
+    downAlpha?: number;
+    /** Overall alpha when disabled. @default 0.5 */
+    disabledAlpha?: number;
+    /** Transition duration in seconds. @default 0.12 */
+    duration?: number;
+    /** GSAP ease string. @default 'power2.out' */
+    ease?: string;
+}
+/**
+ * Creates a flat button effect that provides code-driven visual feedback
+ * for hover, press, and disabled states without requiring per-state textures.
+ *
+ * Automatically applied to every {@link ButtonComp} by default.
+ * Opt-out via `button.removeButtonEffect('flatButton')`.
+ *
+ * @example
+ * ```typescript
+ * // Custom options
+ * button.removeButtonEffect('flatButton');
+ * button.addButtonEffect(createFlatButtonEffect({ downScale: 0.97 }));
+ * ```
+ */
+export declare function createFlatButtonEffect(options?: FlatButtonEffectOptions): ButtonEffect;
+//# sourceMappingURL=Comp.utils.d.ts.map

package/dist/ui/components/Comp.utils.d.ts.map

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

package/dist/ui/components/Component.types.d.ts

@@ -0,0 +1,41 @@
+import type { FillInput, StrokeInput } from 'pixi.js';
+import type { LayoutStyles } from '@pixi/layout';
+export type GraphicsConfig = {
+    circle: {
+        radius: number;
+    };
+    fill?: FillInput;
+    stroke?: StrokeInput;
+    layout?: boolean | LayoutStyles | null;
+} | {
+    rect: {
+        width: number;
+        height: number;
+    };
+    fill?: FillInput;
+    stroke?: StrokeInput;
+    layout?: boolean | LayoutStyles | null;
+} | {
+    roundRect: {
+        width: number;
+        height: number;
+        radius: number;
+    };
+    fill?: FillInput;
+    stroke?: StrokeInput;
+    layout?: boolean | LayoutStyles | null;
+};
+export interface SpriteConfig<Keys extends string = string> {
+    texture: Keys;
+    alpha?: number;
+    tint?: number;
+    anchor?: {
+        x: number;
+        y: number;
+    };
+    layout?: boolean | LayoutStyles | null;
+}
+export type DeepPartial<T> = T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+//# sourceMappingURL=Component.types.d.ts.map

package/dist/ui/components/Component.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.types.d.ts","sourceRoot":"","sources":["../../../ui/components/Component.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,cAAc,GACtB;IACA,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;CACxC,GACC;IACA,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;CACxC,GACC;IACA,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;CACxC,CAAC;AAEJ,MAAM,WAAW,YAAY,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM;IACxD,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;CAExC;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,CAAC,CAAC"}

package/dist/ui/components/InputComp.d.ts

@@ -0,0 +1,43 @@
+import { Container, TextStyleOptions } from 'pixi.js';
+import { DeepPartial, GraphicsConfig, SpriteConfig } from './Component.types';
+import { InputBehavior, InputBehaviorOptions } from '../behaviors';
+export interface InputCompStateData {
+    background?: GraphicsConfig | SpriteConfig;
+    textStyle?: TextStyleOptions;
+    padding?: number;
+}
+export interface InputCompSkinData {
+    up: InputCompStateData;
+    over?: DeepPartial<InputCompStateData>;
+    focused?: DeepPartial<InputCompStateData>;
+    disabled?: DeepPartial<InputCompStateData>;
+}
+export interface InputCompOptions extends InputBehaviorOptions {
+    skinData?: InputCompSkinData;
+}
+declare const InputComp_base: new (options?: import("pixi.js").ContainerOptions<import("pixi.js").ContainerChild> | undefined) => Container<import("pixi.js").ContainerChild> & {
+    setSkinData: (data: InputCompSkinData | Partial<InputCompSkinData> | null, opts?: {
+        mergeWithExisting?: boolean;
+    } | undefined) => void;
+    getSkinData: () => InputCompSkinData | null;
+};
+export declare class InputComp extends InputComp_base {
+    private _background;
+    private _textMask;
+    private _textLabel;
+    private _behavior;
+    private _currentState;
+    private _isFocused;
+    constructor(options?: InputCompOptions);
+    private setState;
+    protected skinApply(_: InputCompSkinData | null): void;
+    private updateVisualState;
+    private updateTextMask;
+    private getCurrentStateData;
+    private updateBackground;
+    private updateHitArea;
+    get behavior(): InputBehavior;
+    destroy(): void;
+}
+export {};
+//# sourceMappingURL=InputComp.d.ts.map

package/dist/ui/components/InputComp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputComp.d.ts","sourceRoot":"","sources":["../../../ui/components/InputComp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmC,gBAAgB,EAAa,MAAM,SAAS,CAAC;AAElG,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9E,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;IAC3C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,kBAAkB,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;;;;;;;AAED,qBAAa,SAAU,SAAQ,cAAwD;IACrF,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,UAAU,CAAkB;gBAExB,OAAO,GAAE,gBAAqB;IAoD1C,OAAO,CAAC,QAAQ;IAKhB,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI;IAItD,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,gBAAgB;IAkDxB,OAAO,CAAC,aAAa;IAMrB,IAAW,QAAQ,IAAI,aAAa,CAEnC;IAEM,OAAO,IAAI,IAAI;CAIvB"}

package/dist/ui/components/LabelBox.d.ts

@@ -0,0 +1,49 @@
+import { Container, Graphics, TextStyleOptions } from 'pixi.js';
+import type { DeepPartial, GraphicsConfig } from './Component.types';
+import type { LayoutStyles } from '@pixi/layout';
+export type LabelBoxState = 'default' | 'enabled' | 'disabled' | 'required' | 'success' | 'fail';
+export interface LabelBoxStateData {
+    background?: GraphicsConfig;
+    textStyle?: TextStyleOptions;
+    textLayout?: boolean | LayoutStyles | null;
+    layout?: boolean | LayoutStyles | null;
+}
+export interface LabelBoxSkinData {
+    default: LabelBoxStateData;
+    enabled?: DeepPartial<LabelBoxStateData>;
+    disabled?: DeepPartial<LabelBoxStateData>;
+    required?: DeepPartial<LabelBoxStateData>;
+    success?: DeepPartial<LabelBoxStateData>;
+    fail?: DeepPartial<LabelBoxStateData>;
+}
+export interface LabelBoxOptions {
+    text?: string;
+    label?: string;
+    state?: LabelBoxState;
+    skinData?: LabelBoxSkinData;
+}
+declare const LabelBox_base: new (options?: import("pixi.js").ContainerOptions<import("pixi.js").ContainerChild> | undefined) => Container<import("pixi.js").ContainerChild> & {
+    setSkinData: (data: LabelBoxSkinData | Partial<LabelBoxSkinData> | null, opts?: {
+        mergeWithExisting?: boolean;
+    } | undefined) => void;
+    getSkinData: () => LabelBoxSkinData | null;
+};
+export declare class LabelBox extends LabelBox_base {
+    private _background;
+    private _text;
+    private _currentState;
+    private _stateDataCache;
+    constructor(options?: LabelBoxOptions);
+    get text(): string;
+    set text(value: string);
+    get background(): Graphics;
+    get state(): LabelBoxState;
+    set state(value: LabelBoxState);
+    private getStateData;
+    private applyCurrentState;
+    private applyStateData;
+    private drawGraphics;
+    protected skinApply(skin: LabelBoxSkinData | null): void;
+}
+export {};
+//# sourceMappingURL=LabelBox.d.ts.map

package/dist/ui/components/LabelBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelBox.d.ts","sourceRoot":"","sources":["../../../ui/components/LabelBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAQ,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEtE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjG,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;;;;;;;AAED,qBAAa,QAAS,SAAQ,aAAuD;IACnF,OAAO,CAAC,WAAW,CAAW;IAC9B,OAAO,CAAC,KAAK,CAAO;IACpB,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,eAAe,CAAoD;gBAE/D,OAAO,GAAE,eAAoB;IAqBzC,IAAW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,IAAW,UAAU,IAAI,QAAQ,CAEhC;IAED,IAAW,KAAK,IAAI,aAAa,CAEhC;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,aAAa,EAIpC;IAED,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,YAAY;IA4BpB,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,GAAG,IAAI;CAUzD"}

package/dist/ui/components/ListTableComp.d.ts

@@ -0,0 +1,106 @@
+import { Container, TextStyleOptions } from 'pixi.js';
+import { GraphicsConfig } from './Component.types';
+import { SliderComp, type SliderCompSkinData } from './SliderComp';
+export type CellRenderer<TData = Record<string, any>> = (data: TData, index: number, column: ListTableColumn) => Container;
+export interface ListTableColumn<K extends string = string> {
+    key: K;
+    label: string;
+    width: number;
+    renderer?: CellRenderer;
+}
+export interface ListTableSeparatorConfig {
+    color?: number;
+    alpha?: number;
+    thickness?: number;
+}
+export interface ListTableRowSkinData {
+    textStyle?: TextStyleOptions;
+    background?: GraphicsConfig;
+    oddBackground?: GraphicsConfig;
+    evenBackground?: GraphicsConfig;
+    hoverBackground?: GraphicsConfig;
+}
+export interface ListTableCompSkinData {
+    header?: {
+        textStyle?: TextStyleOptions;
+        background?: GraphicsConfig;
+    };
+    row?: ListTableRowSkinData;
+    cellStyles?: Record<string, {
+        textStyle?: TextStyleOptions;
+    }>;
+    separator?: ListTableSeparatorConfig;
+    scrollbar?: SliderCompSkinData;
+}
+export interface ListTableOptions<TData extends Record<string, any> = Record<string, any>> {
+    columns: ListTableColumn<keyof TData & string>[];
+    tableWidth: number;
+    tableHeight: number;
+    rowHeight: number;
+    headerHeight?: number;
+    rowGap?: number;
+    cellGap?: number;
+    showHeader?: boolean;
+    showScrollbar?: boolean;
+    skinData?: ListTableCompSkinData;
+}
+export interface ListTableEvents {
+    rowClick: [data: Record<string, any>, index: number];
+    rowHover: [data: Record<string, any>, index: number];
+    rowOut: [data: Record<string, any>, index: number];
+    scroll: [value: number];
+}
+declare const ListTableComp_base: new (options?: import("pixi.js").ContainerOptions<import("pixi.js").ContainerChild> | undefined) => Container<import("pixi.js").ContainerChild> & {
+    setSkinData: (data: ListTableCompSkinData | Partial<ListTableCompSkinData> | null, opts?: {
+        mergeWithExisting?: boolean;
+    } | undefined) => void;
+    getSkinData: () => ListTableCompSkinData | null;
+};
+export declare class ListTableComp<TData extends Record<string, any> = Record<string, any>> extends ListTableComp_base {
+    private _columns;
+    private _tableWidth;
+    private _tableHeight;
+    private _rowHeight;
+    private _headerHeight;
+    private _rowGap;
+    private _cellGap;
+    private _showHeader;
+    private _showScrollbar;
+    private _headerContainer;
+    private _headerCells;
+    private _listContainer;
+    private _listContent;
+    private _listMask;
+    private _scrollbar;
+    private _data;
+    private _rowViews;
+    private _hoveredRowIndex;
+    private _scrollValue;
+    constructor(options: ListTableOptions<TData>);
+    private buildHeader;
+    private updateLayout;
+    private updateScrollRange;
+    private onWheel;
+    drawList(data: TData[]): void;
+    private createRow;
+    private drawRowBackground;
+    clearList(): void;
+    getRowAt(index: number): Container | null;
+    scrollTo(index: number): void;
+    get data(): TData[];
+    get columns(): ListTableColumn<keyof TData & string>[];
+    get showHeader(): boolean;
+    set showHeader(value: boolean);
+    get showScrollbar(): boolean;
+    set showScrollbar(value: boolean);
+    get scrollbar(): SliderComp;
+    get headerContainer(): Container;
+    get listContainer(): Container;
+    get listContent(): Container;
+    protected skinApply(skin: ListTableCompSkinData | null): void;
+    private applyHeaderSkin;
+    private applyRowSkins;
+    destroy(): void;
+}
+export {};
+//# sourceMappingURL=ListTableComp.d.ts.map

package/dist/ui/components/ListTableComp.d.ts.map

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