### Install PixiJS UI

Source: https://github.com/pixijs/ui/blob/main/README.md

Install the PixiJS UI library using npm. Ensure compatibility with your PixiJS version.

```sh
npm install @pixi/ui
```

--------------------------------

### Basic Switcher Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/checkbox-switcher.md

Demonstrates how to create a basic Switcher with Graphics elements as views and connect to its onChange event.

```typescript
import { Switcher } from '@pixi/ui';
import { Graphics, Container } from 'pixi.js';

const switcher = new Switcher(
    [
        new Graphics().rect(0, 0, 100, 100).fill(0xFF0000),
        new Graphics().rect(0, 0, 100, 100).fill(0x00FF00),
        new Graphics().rect(0, 0, 100, 100).fill(0x0000FF)
    ],
    'onPress',
    0
);

switcher.onChange.connect((state) => {
    console.log(`Switched to view ${state}`);
});

container.addChild(switcher);
```

--------------------------------

### Initialize RadioGroup Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/circular-progressbar-radiogroup-maskedframe.md

Demonstrates how to initialize a RadioGroup instance with specific layout and spacing options.

```typescript
radioGroup.init({
    items: checkboxes,
    type: 'horizontal',
    elementsMargin: 15
});
```

--------------------------------

### Basic ProgressBar Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/slider-progressbar.md

Demonstrates how to create and configure a basic ProgressBar. Set the progress percentage and dimensions.

```typescript
import { ProgressBar } from '@pixi/ui';

const progressBar = new ProgressBar({
    bg: 'progress_bg.png',
    fill: 'progress_fill.png',
    fillPaddings: {
        top: 5,
        right: 5,
        bottom: 5,
        left: 5
    }
});

progressBar.progress = 65; // 65%
progressBar.width = 300;
progressBar.height = 20;

container.addChild(progressBar);
```

--------------------------------

### Basic Select Dropdown Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Demonstrates how to create a basic Select dropdown with predefined options and a text style. Use this for simple selection UIs.

```typescript
import { Select } from '@pixi/ui';

const select = new Select({
    closedBG: 'select_closed.png',
    openBG: 'select_open.png',
    textStyle: {
        fill: 0xFFFFFF,
        fontSize: 16
    },
    selected: 0,
    items: {
        items: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
        backgroundColor: 0x333333,
        hoverColor: 0x555555,
        width: 200,
        height: 40,
        textStyle: {
            fill: 0xFFFFFF,
            fontSize: 14
        },
        radius: 5
    },
    scrollBox: {
        width: 200,
        height: 200,
        radius: 5
    }
});

select.onSelect.connect((index, text) => {
    console.log(`Selected: ${index} - ${text}`);
});

container.addChild(select);
```

--------------------------------

### Basic Text Input Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/input.md

Demonstrates creating a basic text input field with placeholder text and event handling for text changes and submission.

```typescript
import { Input } from '@pixi/ui';
import { Sprite } from 'pixi.js';

const input = new Input({
    bg: 'input_background.png',
    placeholder: 'Enter your name',
    padding: {
        top: 11,
        right: 11,
        bottom: 11,
        left: 11
    }
});

input.onChange.connect((text) => {
    console.log(`Current text: ${text}`);
});

input.onEnter.connect((text) => {
    console.log(`User submitted: ${text}`);
});

container.addChild(input);
```

--------------------------------

### Dialog with Buttons Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Shows how to create a Dialog with a title, content, and a set of buttons. This is useful for user confirmations or choices. Ensure 'pixi.js' is imported for Graphics.

```typescript
import { Dialog } from '@pixi/ui';
import { Graphics } from 'pixi.js';

const dialog = new Dialog({
    background: new Graphics()
        .roundRect(0, 0, 400, 250, 20)
        .fill(0xFFFFFF),
    title: 'Confirm Action',
    content: 'Are you sure you want to proceed?',
    width: 400,
    height: 250,
    padding: 20,
    buttons: [
        { text: 'Cancel' },
        { text: 'OK' }
    ],
    closeOnBackdropClick: true
});

dialog.onSelect.connect((index, text) => {
    console.log(`Button clicked: ${index} - ${text}`);
    if (index === 1) {
        dialog.close();
    }
});

dialog.onClose.connect(() => {
    console.log('Dialog closed');
});

container.addChild(dialog);
dialog.open();
```

--------------------------------

### Single Slider Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/slider-progressbar.md

Shows how to create a single Slider with custom textures, value range, step, and display options. Listen for update and change events.

```typescript
import { Slider } from '@pixi/ui';

const slider = new Slider({
    bg: 'slider_bg.png',
    fill: 'slider_fill.png',
    slider: 'slider_handle.png',
    min: 0,
    max: 100,
    value: 50,
    step: 5,
    showValue: true,
    valueTextStyle: {
        fill: 0xFFFFFF,
        fontSize: 14
    }
});

slider.onUpdate.connect((value) => {
    console.log(`Slider moving: ${value}`);
});

slider.onChange.connect((value) => {
    console.log(`Slider released: ${value}`);
});

container.addChild(slider);
```

--------------------------------

### Dialog with Animations Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Illustrates creating a Dialog with custom open and close animations. Use this to enhance user experience with visual feedback. Requires 'dialog_bg.png' for background.

```typescript
const animatedDialog = new Dialog({
    background: 'dialog_bg.png',
    title: 'Welcome',
    content: 'This is a dialog with animations',
    width: 500,
    height: 300,
    buttons: [
        { text: 'Close' }
    ],
    animations: {
        open: {
            props: {
                scale: { x: 1, y: 1 },
                alpha: 1
            },
            duration: 300
        },
        close: {
            props: {
                scale: { x: 0.5, y: 0.5 },
                alpha: 0
            },
            duration: 300
        }
    },
    backdropColor: 0x000000,
    backdropAlpha: 0.7
});

animatedDialog.onSelect.connect(() => {
    animatedDialog.close();
});
```

--------------------------------

### CheckBox with Label Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/checkbox-switcher.md

Shows how to create a CheckBox with custom styles for its unchecked and checked states, including text, and connects to its onCheck event.

```typescript
import { CheckBox } from '@pixi/ui';

const checkbox = new CheckBox({
    style: {
        unchecked: 'checkbox_unchecked.png',
        checked: 'checkbox_checked.png',
        text: {
            fill: 0x000000,
            fontSize: 16
        },
        textOffset: {
            x: 10,
            y: 0
        }
    },
    text: 'Accept terms and conditions',
    checked: false
});

checkbox.onCheck.connect((isChecked) => {
    console.log(`Checkbox is now ${isChecked ? 'checked' : 'unchecked'}`);
});

container.addChild(checkbox);
```

--------------------------------

### Horizontal ScrollBox Setup

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Demonstrates the creation of a horizontal scrollable box with defined dimensions, element spacing, and padding. Used for side-scrolling content.

```typescript
const horizontalScroll = new ScrollBox({
    width: 500,
    height: 120,
    type: 'horizontal',
    elementsMargin: 10,
    padding: 10
});

for (let i = 0; i < 10; i++) {
    horizontalScroll.addItem(
        new Graphics().rect(0, 0, 100, 100).fill(0x0066CC)
    );
}
```

--------------------------------

### Using BitmapText with CheckBox

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Example demonstrating how to use a custom text class, BitmapText, with the CheckBox component by passing it via the TextClass option.

```typescript
import { CheckBox } from '@pixi/ui';
import { BitmapText } from 'pixi.js';

const checkbox = new CheckBox({
    style: { unchecked: 'off.png', checked: 'on.png' },
    TextClass: BitmapText,  // Use BitmapText instead of Text
    text: 'Accept'
});
```

--------------------------------

### Dialog with Container Content Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Demonstrates using a PixiJS Container as the content for a Dialog. This allows for complex UI elements within the dialog. Ensure 'Container' and 'Text' are imported from 'pixi.js'.

```typescript
const contentContainer = new Container();
contentContainer.addChild(
    new Graphics().rect(0, 0, 350, 100).fill(0xDDDDDD),
    new Text({
        text: 'Custom content with multiple elements',
        style: { fill: 0x000000, fontSize: 16 }
    })
);

const customDialog = new Dialog({
    background: 'dialog_bg.png',
    content: contentContainer,
    width: 400,
    height: 300,
    buttons: [
        { text: 'OK' }
    ]
});
```

--------------------------------

### PixiJS UI Button Complete Usage Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/button.md

Demonstrates two methods for using the Button component: as a standalone Button with a separate view, and as a ButtonContainer. Includes event handling for press, hover, and out events.

```typescript
import { Button, ButtonContainer } from '@pixi/ui';
import { Container, Graphics } from 'pixi.js';

// Method 1: Using Button with separate view
const view = new Graphics()
    .rect(0, 0, 100, 50, 15)
    .fill(0xFFFFFF);

const button = new Button(view);
button.enabled = true;

button.onPress.connect(() => console.log('Pressed!'));
button.onHover.connect(() => console.log('Hovering'));
button.onOut.connect(() => console.log('Left button'));

// Method 2: Using ButtonContainer
const buttonContainer = new ButtonContainer(
    new Graphics()
        .rect(0, 0, 100, 50, 15)
        .fill(0x0000FF)
);

buttonContainer.onPress.connect(() => {
    console.log('Container button pressed!');
});

// Add to display tree
const container = new Container();
container.addChild(view, buttonContainer);
```

--------------------------------

### Linked Sliders Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/slider-progressbar.md

Demonstrates creating two independent Sliders and logging their values on change. Useful for scenarios requiring synchronized or related slider inputs.

```typescript
const slider1 = new Slider({
    bg: 'bg.png',
    fill: 'fill.png',
    slider: 'handle.png',
    min: 0,
    max: 50,
    value: 25
});

const slider2 = new Slider({
    bg: 'bg.png',
    fill: 'fill.png',
    slider: 'handle.png',
    min: 0,
    max: 50,
    value: 25
});

slider1.onChange.connect((v) => {
    console.log(`Slider 1: ${v}`);
});

slider2.onChange.connect((v) => {
    console.log(`Slider 2: ${v}`);
});

container.addChild(slider1, slider2);
```

--------------------------------

### Range Slider (DoubleSlider) Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/slider-progressbar.md

Illustrates the creation of a DoubleSlider for selecting a range. Configure with textures, min/max values, and step. Handles range update events.

```typescript
import { DoubleSlider } from '@pixi/ui';

const rangeSlider = new DoubleSlider({
    bg: 'slider_bg.png',
    fill: 'slider_fill.png',
    slider1: 'slider_handle.png',
    slider2: 'slider_handle.png',
    min: 0,
    max: 100,
    value1: 30,
    value2: 70,
    step: 1,
    showValue: true
});

rangeSlider.onUpdate.connect((v1, v2) => {
    console.log(`Range: ${v1} - ${v2}`);
});

rangeSlider.onChange.connect((v1, v2) => {
    console.log(`Final range: ${v1} - ${v2}`);
});

container.addChild(rangeSlider);
```

--------------------------------

### Select with Custom Styling Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Demonstrates advanced customization of a Select dropdown, including custom background images, text styles, and item appearance. Use for branding or specific UI requirements.

```typescript
const customSelect = new Select({
    closedBG: 'button.png',
    openBG: 'button_open.png',
    textStyle: {
        fill: 0x333333,
        fontSize: 18,
        fontFamily: 'Arial'
    },
    items: {
        items: ['Red', 'Green', 'Blue', 'Yellow', 'Purple'],
        backgroundColor: 0xF5F5F5,
        hoverColor: 0xE8E8E8,
        width: 250,
        height: 45,
        radius: 8,
        textStyle: {
            fill: 0x333333,
            fontSize: 16
        }
    },
    scrollBox: {
        width: 250,
        height: 225,
        radius: 8,
        elementsMargin: 5,
        padding: 5
    },
    visibleItems: 5
});

customSelect.onSelect.connect((index, text) => {
    console.log(`Color selected: ${text}`);
});
```

--------------------------------

### Dialog with Multiple Buttons Example

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Shows a Dialog configured with multiple buttons arranged horizontally. This is suitable for complex decision-making scenarios. Use 'buttonList' for layout control.

```typescript
const confirmDialog = new Dialog({
    background: 'dialog.png',
    title: 'Save Changes?',
    content: 'You have unsaved changes.',
    width: 400,
    height: 200,
    buttons: [
        { text: 'Discard' },
        { text: 'Cancel' },
        { text: 'Save' }
    ],
    buttonList: {
        type: 'horizontal',
        elementsMargin: 10
    }
});

confirmDialog.onSelect.connect((index, text) => {
    switch (index) {
        case 0:
            console.log('Discarding changes');
            confirmDialog.close();
            break;
        case 1:
            console.log('Canceling');
            confirmDialog.close();
            break;
        case 2:
            console.log('Saving changes');
            confirmDialog.close();
            break;
    }
});
```

--------------------------------

### Implement View Management Pattern in Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Demonstrates a pattern for managing multiple views within a component, including storing, setting, getting, and safely removing views. Views are typically PixiJS Containers.

```typescript
// 1. Store views in private property
protected _views: ButtonViews = {};

// 2. Provide setter that handles creation/destruction
set defaultView(view: GetViewSettings | undefined) {
    this.removeView('defaultView');
    this._views.defaultView = getView(view);
    this.updateAnchor();
}

// 3. Provide getter for access
get defaultView(): Container | undefined {
    return this._views.defaultView;
}

// 4. Helper to safely remove views
protected removeView(viewType: string) {
    if (this._views[viewType]) {
        this.innerView.removeChild(this._views[viewType]);
        this._views[viewType] = undefined;
    }
}
```

--------------------------------

### Advanced FancyButton with Animations and Icon

Source: https://github.com/pixijs/ui/blob/main/_autodocs/fancy-button.md

Configure a more complex button with custom views, an icon, animations on hover and press, state-specific offsets for text and views, and nine-slice sprite properties. This example also demonstrates setting the button's dimensions and connecting an event listener.

```typescript
import { FancyButton } from '@pixi/ui';
import { Text } from 'pixi.js';

// Advanced button with animations and icon
const advancedButton = new FancyButton({
    defaultView: 'button.png',
    hoverView: 'button_hover.png',
    pressedView: 'button_pressed.png',
    disabledView: 'button_disabled.png',
    text: 'Submit',
    icon: 'icon.png',
    padding: 20,
    anchor: 0.5,
    nineSliceSprite: [20, 20, 20, 20],
    contentFittingMode: 'fill',
    animations: {
        hover: {
            props: { scale: { x: 1.1, y: 1.1 } },
            duration: 100
        },
        pressed: {
            props: { scale: { x: 0.9, y: 0.9 } },
            duration: 100
        }
    },
    offset: {
        pressed: { y: 5 }
    },
    textOffset: {
        pressed: { y: 5 }
    }
});

advancedButton.onPress.connect(() => {
    console.log('Advanced button clicked!');
});

advancedButton.width = 300;
advancedButton.height = 60;
```

--------------------------------

### Input Padding Variations

Source: https://github.com/pixijs/ui/blob/main/_autodocs/input.md

Provides examples of different ways to specify padding for an input field, including a single value for all sides, vertical/horizontal pairs, and individual top, right, bottom, left values.

```typescript
const input1 = new Input({
    bg: 'bg.png',
    padding: 10  // All sides
});

const input2 = new Input({
    bg: 'bg.png',
    padding: [10, 20]  // Vertical, Horizontal
});

const input3 = new Input({
    bg: 'bg.png',
    padding: [10, 15, 10, 15]  // Top, Right, Bottom, Left
});

const input4 = new Input({
    bg: 'bg.png',
    padding: {
        top: 10,
        right: 15,
        bottom: 10,
        left: 15
    }
});
```

--------------------------------

### Create an Input Field

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Set up an input field with a background image, placeholder text, padding, and a maximum length. Connect to the onChange event to log input changes. Import Input.

```typescript
import { Input } from '@pixi/ui';

const input = new Input({
    bg: 'input_bg.png',
    placeholder: 'Enter text...',
    padding: 10,
    maxLength: 50
});

input.onChange.connect((text) => {
    console.log('Current value:', text);
});
```

--------------------------------

### Initialize List with Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Initializes the list component with specified configuration options such as layout type, item margin, and padding.

```typescript
list.init({
    type: 'vertical',
    elementsMargin: 10,
    padding: 20
});
```

--------------------------------

### Import PixiUI Layout Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/00-START-HERE.md

Import List, ScrollBox, and Dialog for managing layout and dialogs.

```typescript
import { List, ScrollBox, Dialog } from '@pixi/ui';
```

--------------------------------

### Basic Vertical List

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Demonstrates how to create a basic vertical list with custom elements and spacing. Ensure '@pixi/ui' is imported.

```typescript
import { List } from '@pixi/ui';
import { Graphics } from 'pixi.js';

const list = new List({
    type: 'vertical',
    elementsMargin: 10,
    padding: 20
});

list.addChild(
    new Graphics().rect(0, 0, 100, 50).fill(0xFF0000),
    new Graphics().rect(0, 0, 100, 50).fill(0x00FF00),
    new Graphics().rect(0, 0, 100, 50).fill(0x0000FF)
);

container.addChild(list);
```

--------------------------------

### Input Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/input.md

Specifies the configuration options available when creating a new Input instance.

```typescript
{
  bg: ViewType
  textStyle?: PixiTextStyle
  TextClass?: PixiTextClass
  placeholder?: string
  value?: string
  maxLength?: number
  secure?: boolean
  align?: InputAlign
  padding?: Padding
  cleanOnFocus?: boolean
  nineSliceSprite?: [number, number, number, number]
  addMask?: boolean
}
```

--------------------------------

### Get Visible Items from ScrollBox

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Retrieve an array of all items currently rendered and visible within the ScrollBox viewport. This is useful for inspecting or manipulating only the active elements.

```typescript
const visible = scrollBox.getVisibleItems();
console.log(`Showing ${visible.length} items`);
```

--------------------------------

### Import PixiUI Visual Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/00-START-HERE.md

Import Switcher and MaskedFrame for visual elements and masking.

```typescript
import { Switcher, MaskedFrame } from '@pixi/ui';
```

--------------------------------

### Basic PixiUI Import

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Import essential UI components like Button, CheckBox, Slider, and Input from the '@pixi/ui' package.

```typescript
import { Button, CheckBox, Slider, Input } from '@pixi/ui';
```

--------------------------------

### List Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Defines the configuration options available when creating a new List instance.

```typescript
{
  elementsMargin?: number
  children?: C[]
  padding?: number
  vertPadding?: number
  horPadding?: number
  topPadding?: number
  bottomPadding?: number
  leftPadding?: number
  rightPadding?: number
  items?: C[]
  maxWidth?: number
  maxHeight?: number
  type?: ListType
}
```

--------------------------------

### Import PixiUI Form Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/00-START-HERE.md

Import Input, CheckBox, RadioGroup, and Select for building form elements.

```typescript
import { Input, CheckBox, RadioGroup, Select } from '@pixi/ui';
```

--------------------------------

### Convert Text Input to PixiText Instance

Source: https://github.com/pixijs/ui/blob/main/_autodocs/types.md

Utility function to convert various text inputs (string, number, or existing text instance) into a PixiText object. Simplifies text rendering setup.

```typescript
const textObj = getTextView('Hello');
```

```typescript
const textObj = getTextView(123);
```

```typescript
const textObj = getTextView(textInstance);
```

--------------------------------

### Create and Configure Button View

Source: https://github.com/pixijs/ui/blob/main/_autodocs/button.md

Instantiates a Button and assigns a PixiJS Graphics object as its view. The button is then enabled for interaction.

```typescript
const button = new Button();
const container = new Graphics()
    .rect(0, 0, 100, 50, 15)
    .fill(0xFFFFFF);

button.view = container;
button.enabled = true;
```

--------------------------------

### Create a Slider

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Initialize a slider with background, fill, and handle images, defining minimum, maximum, and initial values. Listen for value changes using onChange. Import Slider.

```typescript
import { Slider } from '@pixi/ui';

const slider = new Slider({
    bg: 'slider_bg.png',
    fill: 'slider_fill.png',
    slider: 'handle.png',
    min: 0,
    max: 100,
    value: 50
});

slider.onChange.connect((value) => {
    console.log('Value changed to:', value);
});
```

--------------------------------

### Horizontal List Configuration

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Shows how to set up a horizontal list with specific margins and padding. Elements are added in a loop.

```typescript
const horizontalList = new List({
    type: 'horizontal',
    elementsMargin: 20,
    padding: { top: 10, bottom: 10, left: 20, right: 20 }
});

for (let i = 0; i < 5; i++) {
    horizontalList.addChild(
        new Graphics().rect(0, 0, 80, 80).fill(Math.random() * 0xFFFFFF)
    );
}
```

--------------------------------

### Select Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Configuration options for the Select component's constructor. Customize appearance, behavior, and item content.

```typescript
{
  closedBG: GetViewSettings
  openBG: GetViewSettings
  textStyle?: PixiTextStyle
  TextClass?: PixiTextClass
  selected?: number
  selectedTextOffset?: { x?: number; y?: number }
  
  items: SelectItemsOptions
  
  scrollBoxOffset?: { x?: number; y?: number }
  scrollBoxWidth?: number
  scrollBoxHeight?: number
  scrollBoxRadius?: number
  visibleItems?: number
  
  scrollBox?: ScrollBoxOptions & { offset?: { x: number; y: number } }
}
```

--------------------------------

### Create a Simple Button

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Instantiate a basic button with a custom graphic and attach an event listener for press events. Ensure the Button class is imported.

```typescript
import { Button } from '@pixi/ui';
import { Graphics } from 'pixi.js';

const button = new Button(
    new Graphics()
        .rect(0, 0, 100, 50, 15)
        .fill(0xFFFFFF)
);

button.enabled = true;
button.onPress.connect(() => console.log('Clicked!'));
```

--------------------------------

### ProgressBar Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/slider-progressbar.md

Specifies the configuration object for initializing a ProgressBar, including background, fill, padding, and nine-slice sprite settings.

```typescript
{
  bg: ProgressBarViewType
  fill: ProgressBarViewType
  fillPaddings?: FillPaddings
  nineSliceSprite?: NineSliceSprite
  progress?: number
}
```

--------------------------------

### Create a List

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Construct a list with a specified orientation (vertical), element margin, and padding. Add child elements to the list. Import List.

```typescript
import { List } from '@pixi/ui';

const list = new List({
    type: 'vertical',
    elementsMargin: 10,
    padding: 20
});

list.addChild(item1, item2, item3);
```

--------------------------------

### Import and Use Button Component

Source: https://github.com/pixijs/ui/blob/main/README.md

Import the Button component from '@pixi/ui' and attach an event listener for press events.

```js
import { Button } from '@pixi/ui';

const button = new Button();

button.onPress.connect(() => console.log('Button pressed!'));
```

--------------------------------

### Programmatic Switching of Switcher

Source: https://github.com/pixijs/ui/blob/main/_autodocs/checkbox-switcher.md

Demonstrates programmatic control of a Switcher, including switching to a specific view, cycling through views, forcing a switch, and checking the active view.

```typescript
const switcher = new Switcher(['view1.png', 'view2.png']);

// Switch to specific view
switcher.switch(0);

// Cycle through views
switcher.switch();

// Set without emitting event
switcher.forceSwitch(1);

// Check active view
console.log(`Currently showing view ${switcher.active}`);
```

--------------------------------

### Import PixiUI Button Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/00-START-HERE.md

Import Button, ButtonContainer, and FancyButton for creating interactive buttons.

```typescript
import { Button, ButtonContainer, FancyButton } from '@pixi/ui';
```

--------------------------------

### Open Dialog Method

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Use this method to display the dialog. Ensure the dialog instance is properly initialized before calling.

```typescript
dialog.open();
```

--------------------------------

### Import PixiUI Value Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/00-START-HERE.md

Import Slider, DoubleSlider, ProgressBar, and CircularProgressBar for displaying and controlling values.

```typescript
import { Slider, DoubleSlider, ProgressBar, CircularProgressBar } from '@pixi/ui';
```

--------------------------------

### Dialog Constructor

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Initializes a new instance of the Dialog component. It accepts an options object to configure its appearance and behavior, including content, buttons, and animations.

```APIDOC
## Class: Dialog

Modal dialog component for displaying content with buttons and optional backdrop.

### Constructor

**Signature:**
```typescript
constructor(options: DialogOptions)
```

**Parameters:**

#### Constructor Options (`DialogOptions`)

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| background | `GetViewSettings` | Yes | — | Dialog background view |
| backdrop | `GetViewSettings` | No | — | Custom backdrop view |
| backdropColor | `number` | No | 0x000000 | Backdrop color (if custom not provided) |
| backdropAlpha | `number` | No | 0.5 | Backdrop alpha |
| title | `AnyText` | No | — | Dialog title |
| content | `AnyText | Container | Container[]` | No | — | Dialog content (text or container(s)) |
| width | `number` | No | — | Dialog width |
| height | `number` | No | — | Dialog height |
| padding | `number` | No | — | Content padding |
| buttons | `(ButtonOptions | FancyButton | Button)[]` | No | — | Array of buttons |
| buttonList | `ListOptions<Container>` | No | — | Button layout configuration |
| scrollBox | `ScrollBoxOptions` | No | — | Scroll box configuration for content |
| animations | `{ open?: Animation; close?: Animation }` | No | — | Open/close animations |
| closeOnBackdropClick | `boolean` | No | true | Close dialog on backdrop click |
| nineSliceSprite | `[number, number, number, number]` | No | — | Nine-slice sprite values |
```

--------------------------------

### Create a Basic PixiJS Button

Source: https://github.com/pixijs/ui/blob/main/_autodocs/00-START-HERE.md

This snippet shows how to create a simple button using the PixiUI Button component. It requires importing the Button class from '@pixi/ui' and Graphics from 'pixi.js'. The button is constructed with a visual representation (a white rectangle) and an event listener is connected to its onPress event.

```typescript
import { Button } from '@pixi/ui';
import { Graphics } from 'pixi.js';

const button = new Button(
    new Graphics().rect(0, 0, 100, 50).fill(0xFFFFFF)
);
button.onPress.connect(() => console.log('Clicked!'));
```

--------------------------------

### Define and Use a Type-Safe Signal

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Illustrates how to define a signal with a specific event signature and connect/emit listeners. Ensure 'typed-signals' is imported.

```typescript
class Signal<T extends (...args: any[]) => void> {
  connect(listener: T, context?: any): void
  disconnect(listener: T): void
  emit(...args: Parameters<T>): void
  disconnectAll(): void
}
```

```typescript
import { Signal } from 'typed-signals';

const onMyEvent = new Signal<(value: number) => void>();

// Connect listener
onMyEvent.connect((value) => {
    console.log('Value:', value);
});

// Emit event
onMyEvent.emit(42);

// Disconnect
onMyEvent.disconnect(listener);
```

--------------------------------

### Select Component

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Documentation for the Select component, which provides a dropdown menu functionality. It includes details on its constructor, options, properties, and events.

```APIDOC
## Class: Select

Dropdown selection component combining a button and scrollable list of options.

### Constructor

**Signature:**
```typescript
constructor(options?: SelectOptions)
```

**Options Type:** `SelectOptions`

```typescript
{
  closedBG: GetViewSettings
  openBG: GetViewSettings
  textStyle?: PixiTextStyle
  TextClass?: PixiTextClass
  selected?: number
  selectedTextOffset?: { x?: number; y?: number }
  
  items: SelectItemsOptions
  
  scrollBoxOffset?: { x?: number; y?: number }
  scrollBoxWidth?: number
  scrollBoxHeight?: number
  scrollBoxRadius?: number
  visibleItems?: number
  
  scrollBox?: ScrollBoxOptions & { offset?: { x: number; y: number } }
}
```

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| closedBG | `GetViewSettings` | Yes | — | Button view when dropdown is closed |
| openBG | `GetViewSettings` | Yes | — | Button view when dropdown is open |
| textStyle | `PixiTextStyle` | No | — | Style for selected text and items |
| TextClass | `PixiTextClass` | No | Text | Text class to use |
| selected | `number` | No | 0 | Initially selected item index |
| selectedTextOffset | `{ x?: number; y?: number }` | No | — | Offset for selected text |
| items | `SelectItemsOptions` | Yes | — | Items configuration |
| scrollBoxOffset | `{ x?: number; y?: number }` | No | — | Position offset for dropdown list |
| scrollBoxWidth | `number` | No | — | Width of dropdown list |
| scrollBoxHeight | `number` | No | — | Height of dropdown list |
| scrollBoxRadius | `number` | No | — | Border radius of dropdown |
| visibleItems | `number` | No | 5 | Number of visible items in dropdown |
| scrollBox | `ScrollBoxOptions` | No | — | Additional scroll box configuration |

### SelectItemsOptions

```typescript
{
  items: string[]
  backgroundColor: FillStyleInputs
  width: number
  height: number
  hoverColor?: FillStyleInputs
  textStyle?: PixiTextStyle
  TextClass?: PixiTextClass
  radius?: number
}
```

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| items | `string[]` | Yes | — | Array of item text values |
| backgroundColor | `FillStyleInputs` | Yes | — | Background color for items |
| width | `number` | Yes | — | Width of each item |
| height | `number` | Yes | — | Height of each item |
| hoverColor | `FillStyleInputs` | No | — | Hover color (defaults to background) |
| textStyle | `PixiTextStyle` | No | — | Text style for items |
| TextClass | `PixiTextClass` | No | Text | Text class to use |
| radius | `number` | No | — | Border radius for items |

### Properties

| Property | Type | Description |
|----------|------|-------------|
| value | `number` | Index of selected item |

### Events

| Event | Callback Signature | Description |
|-------|------------------|-------------|
| onSelect | `(value: number, text: string) => void` | Fires when item is selected |
```

--------------------------------

### Input with Custom Text Styling

Source: https://github.com/pixijs/ui/blob/main/_autodocs/input.md

Illustrates how to apply custom text styles, including color, font size, and font family, to the input field. Also shows how to set input dimensions and enable clearing text on focus.

```typescript
const styledInput = new Input({
    bg: 'input_bg.png',
    textStyle: {
        fill: 0xFFFFFF,
        fontSize: 20,
        fontFamily: 'Arial'
    },
    placeholder: 'Enter text...',
    align: 'center',
    padding: 15,
    cleanOnFocus: true
});

styledInput.width = 400;
styledInput.height = 50;
```

--------------------------------

### MaskedFrame.init

Source: https://github.com/pixijs/ui/blob/main/_autodocs/circular-progressbar-radiogroup-maskedframe.md

Initializes the masked frame with all settings. This method is used to configure the masked frame after instantiation.

```APIDOC
## MaskedFrame.init(options: MaskedFrameOptions): void

### Description
Initializes the masked frame with all settings. This method is used to configure the masked frame after instantiation.

### Parameters
- **options** (MaskedFrameOptions): Configuration object containing target, mask, borderWidth, and borderColor.

### Example
```typescript
maskedFrame.init({
    target: 'avatar.png',
    mask: 'avatar_mask.png',
    borderWidth: 5,
    borderColor: 0xFFFFFF
});
```
```

--------------------------------

### ScrollBox Constructor

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Initializes a new instance of the ScrollBox class. Accepts an options object to configure its behavior and appearance.

```APIDOC
## Class: ScrollBox

Scrollable container with dynamic rendering of visible items only.

### Constructor

**Signature:**
```typescript
new ScrollBox(options?: ScrollBoxOptions)
```

**Options:**
```typescript
{
  width?: number
  height?: number
  background?: ColorSource
  type?: ListType
  radius?: number
  disableDynamicRendering?: boolean
  disableEasing?: boolean
  dragTrashHold?: number
  globalScroll?: boolean
  shiftScroll?: boolean
  proximityRange?: number
  proximityDebounce?: number
  disableProximityCheck?: boolean
  elementsMargin?: number
  padding?: number
  // ...ListOptions
}
```

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| width | `number` | No | — | Width of scrollable area |
| height | `number` | No | — | Height of scrollable area |
| background | `ColorSource` | No | — | Background color |
| type | `ListType` | No | 'vertical' | Scroll direction |
| radius | `number` | No | — | Border radius |
| disableDynamicRendering | `boolean` | No | false | Render all items (performance impact) |
| disableEasing | `boolean` | No | false | Disable scroll easing |
| dragTrashHold | `number` | No | 5 | Drag threshold in pixels |
| globalScroll | `boolean` | No | true | Scroll even when mouse not over |
| shiftScroll | `boolean` | No | false | Require shift+scroll for horizontal |
| proximityRange | `number` | No | 0 | Range for proximity detection |
| proximityDebounce | `number` | No | 100 | Debounce for proximity check |
| disableProximityCheck | `boolean` | No | false | Disable proximity events |
| elementsMargin | `number` | No | — | Margin between elements |
| padding | `number` | No | — | Padding around the content |
```

--------------------------------

### Password Input Configuration

Source: https://github.com/pixijs/ui/blob/main/_autodocs/input.md

Shows how to configure an input field as a password input, masking characters and setting a maximum length.

```typescript
const passwordInput = new Input({
    bg: 'input_bg.png',
    placeholder: 'Enter password',
    secure: true,
    maxLength: 20,
    padding: 10
});

passwordInput.onChange.connect((text) => {
    console.log(`Password length: ${text.length}`);
});
```

--------------------------------

### RadioGroup Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/circular-progressbar-radiogroup-maskedframe.md

Specifies the configuration object for initializing a RadioGroup, including items, layout type, margins, and initial selection.

```typescript
{
  items: CheckBox[]
  type: ListType
  elementsMargin: number
  selectedItem?: number
}
```

--------------------------------

### CheckBox Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/checkbox-switcher.md

Defines the configuration options for creating a CheckBox instance. Includes style, initial text, text class, and checked state.

```typescript
{
  style: CheckBoxStyle
  text?: string
  TextClass?: PixiTextClass
  checked?: boolean
}
```

--------------------------------

### Switcher with Multiple Events

Source: https://github.com/pixijs/ui/blob/main/_autodocs/checkbox-switcher.md

Illustrates creating a Switcher that responds to multiple events ('onPress' and 'onHover') for state changes.

```typescript
const switcher = new Switcher(
    ['view1.png', 'view2.png', 'view3.png'],
    ['onPress', 'onHover'],  // Switch on both press and hover
    0
);

switcher.onChange.connect((state) => {
    console.log(`Active view: ${state}`);
});
```

--------------------------------

### Create ButtonContainer with Graphics View

Source: https://github.com/pixijs/ui/blob/main/_autodocs/button.md

Creates a ButtonContainer instance, setting a PixiJS Graphics object as its initial view. Connects a callback to the onPress event.

```typescript
const button = new ButtonContainer(
    new Graphics()
        .rect(0, 0, 100, 50, 15)
        .fill(0xFFFFFF)
);

button.onPress.connect(() => console.log('Button pressed!'));
container.addChild(button);
```

--------------------------------

### Create and Manage a Dialog

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Create a dialog with a custom background graphic, title, content, and buttons. Handle user selection via onSelect and open the dialog. Import Dialog and Graphics.

```typescript
import { Dialog } from '@pixi/ui';
import { Graphics } from 'pixi.js';

const dialog = new Dialog({
    background: new Graphics().rect(0, 0, 400, 300).fill(0xFFFFFF),
    title: 'Confirm',
    content: 'Are you sure?',
    buttons: [
        { text: 'Cancel' },
        { text: 'OK' }
    ]
});

dialog.onSelect.connect((index) => {
    if (index === 1) dialog.close();
});

dialog.open();
```

--------------------------------

### Set Button View with String Texture Name

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Configure a button's default view by providing a string representing the texture name. This is a common way to load assets.

```typescript
button.defaultView = 'button.png';
```

--------------------------------

### Input with Nine-Slice Sprite Background

Source: https://github.com/pixijs/ui/blob/main/_autodocs/input.md

Demonstrates using a nine-slice sprite for the input background, allowing for scalable UI elements. Includes enabling a mask for proper rendering.

```typescript
const ninesliceInput = new Input({
    bg: 'input_texture.png',
    nineSliceSprite: [20, 20, 20, 20],
    placeholder: 'Scalable input',
    padding: 15,
    addMask: true
});

ninesliceInput.width = 500;
ninesliceInput.height = 60;
```

--------------------------------

### Dialog Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/select-dialog.md

Specifies the configuration options available when creating a new Dialog instance. These options control the appearance, content, and behavior of the dialog.

```typescript
{
  backdrop?: GetViewSettings
  backdropColor?: number
  backdropAlpha?: number
  background: GetViewSettings
  title?: AnyText
  content?: AnyText | Container | Container[]
  width?: number
  height?: number
  padding?: number
  buttons?: (ButtonOptions | FancyButton | Button)[ ]
  buttonList?: ListOptions<Container>
  scrollBox?: ScrollBoxOptions
  animations?: {
    open?: Animation
    close?: Animation
  }
  closeOnBackdropClick?: boolean
  nineSliceSprite?: [number, number, number, number]
}
```

--------------------------------

### ScrollBox Constructor Options

Source: https://github.com/pixijs/ui/blob/main/_autodocs/scrollbox-list.md

Configure a ScrollBox instance with various properties like dimensions, background, scroll type, and rendering behavior. Many options are inherited from ListOptions.

```typescript
{
  width?: number
  height?: number
  background?: ColorSource
  type?: ListType
  radius?: number
  disableDynamicRendering?: boolean
  disableEasing?: boolean
  dragTrashHold?: number
  globalScroll?: boolean
  shiftScroll?: boolean
  proximityRange?: number
  proximityDebounce?: number
  disableProximityCheck?: boolean
  elementsMargin?: number
  padding?: number
  ...ListOptions
}
```

--------------------------------

### getView()

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Converts flexible view input (string, Texture, Container, Sprite, or Graphics) to a PixiJS display object. It handles different input types by creating Sprites from strings or Textures, or returning other types as-is.

```APIDOC
## getView() (Function)

### Description
Converts flexible view input to PixiJS display object.

### Parameters
#### Path Parameters
- **view** (GetViewSettings) - Required - View input (string, Texture, Container, Sprite, or Graphics)

### Return Type
`Container | Sprite | Graphics`

### Implementation Details
- If input is a string, creates `Sprite.from(view)`
- If input is a Texture, wraps in new Sprite
- Otherwise returns input as-is

### Example
```typescript
import { getView } from '@pixi/ui';

const view1 = getView('texture.png');        // Sprite
const view2 = getView(texture);              // Sprite wrapping texture
const view3 = getView(container);            // Container (returned as-is)
const view4 = getView(sprite);               // Sprite (returned as-is)
const view5 = getView(graphics);             // Graphics (returned as-is)
```
```

--------------------------------

### Implement State Machine Pattern in Components

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Shows a pattern for managing component states, including transitioning between states, hiding/showing corresponding views, and triggering animations. State transitions can be forced.

```typescript
protected state: State = 'default';

setState(newState: State, force = false) {
    if (!force && this.state === newState) return;
    
    // Hide old state
    const currentView = this.getStateView(this.state);
    if (currentView) currentView.visible = false;
    
    // Show new state
    this.state = newState;
    const activeView = this.getStateView(newState);
    if (activeView) activeView.visible = true;
    
    // Trigger animations
    this.playAnimations(newState);
}
```

--------------------------------

### Create a Styled Button

Source: https://github.com/pixijs/ui/blob/main/_autodocs/README.md

Create a visually styled button using FancyButton, specifying different views for default, hover, and pressed states, along with text and animations. Import FancyButton.

```typescript
import { FancyButton } from '@pixi/ui';

const button = new FancyButton({
    defaultView: 'button_default.png',
    hoverView: 'button_hover.png',
    pressedView: 'button_pressed.png',
    text: 'Click Me',
    padding: 10,
    animations: {
        hover: {
            props: { scale: { x: 1.1, y: 1.1 } },
            duration: 100
        }
    }
});
```

--------------------------------

### Basic FancyButton with Text

Source: https://github.com/pixijs/ui/blob/main/_autodocs/fancy-button.md

Create a simple button with text. Specify different image assets for default, hover, and pressed states. Padding can be adjusted for text spacing.

```typescript
import { FancyButton } from '@pixi/ui';
import { Text } from 'pixi.js';

// Basic button with text
const simpleButton = new FancyButton({
    defaultView: 'button_default.png',
    hoverView: 'button_hover.png',
    pressedView: 'button_pressed.png',
    text: 'Click me!',
    padding: 10
});
```

--------------------------------

### Common PixiTextStyle Properties

Source: https://github.com/pixijs/ui/blob/main/_autodocs/types.md

Illustrates common properties available for PixiJS text styling, such as fill, font size, and alignment.

```typescript
{
  fill?: ColorSource
  fontSize?: number
  fontFamily?: string
  align?: 'left' | 'center' | 'right'
  fontWeight?: string
  fontStyle?: string
  lineHeight?: number
  // ... many more PixiJS text style options
}
```

--------------------------------

### getTextView()

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Converts flexible text input (string, number, or PixiText instance) to a PixiJS text instance. It creates a new Text instance for strings or numbers, and returns existing PixiText instances directly.

```APIDOC
## getTextView() (Function)

### Description
Converts flexible text input to PixiJS text instance.

### Parameters
#### Path Parameters
- **text** (AnyText) - Required - Text input (string, number, or PixiText instance)

### Return Type
`PixiText` (AbstractText)

### Implementation Details
- If input is string or number, creates `new Text({ text: String(text) })`
- Otherwise returns input as-is

### Example
```typescript
import { getTextView } from '@pixi/ui';

const text1 = getTextView('Hello');          // Text instance
const text2 = getTextView(123);              // Text with content "123"
const text3 = getTextView(textInstance);     // Returns textInstance as-is
```
```

--------------------------------

### Common PixiTextStyle Properties

Source: https://github.com/pixijs/ui/blob/main/_autodocs/utilities-and-internals.md

Illustrates common properties available for configuring text styles in PixiJS, including color, font size, family, alignment, and spacing.

```typescript
{
  fill?: ColorSource              // Text color
  fontSize?: number               // Font size in pixels
  fontFamily?: string             // Font name
  fontWeight?: string             // 'normal', 'bold', 'bolder', etc.
  fontStyle?: string              // 'normal', 'italic', 'oblique'
  align?: 'left' | 'center' | 'right'  // Text alignment
  lineHeight?: number             // Line height
  letterSpacing?: number          // Space between characters
  // ... many more PixiJS text options
}
```