### Implement VStack Example

Source: https://biggaboy212.github.io/Cascade/Components/VStack

Shows how to instantiate a VStack within a layout and verify its properties. This example confirms the component correctly inherits from the Frame class.

```Luau
local vStack = row:Right():VStack()

print(vStack:IsA("Frame")) --> true
print(vStack.ClassName) --> "Frame"
print(vStack.Type) --> "VStack"
```

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

### Window Creation Example

Source: https://biggaboy212.github.io/Cascade/Components/Window

Demonstrates how to create a new Window instance using the app:Window function, setting its title and subtitle properties. It also shows how to verify the created window's type and class.

```lua
local window = app:Window({
    Title = "Cascade",
    Subtitle = "This is my subtitle.",
})

print(window:IsA("Frame")) --> true
print(window.ClassName) --> "Frame"
print(window.Type) --> "Window"
```

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

### Full Example: Multi-Page Navigation with Tabs

Source: https://biggaboy212.github.io/Cascade/Components/Page

A comprehensive example showcasing the creation of a multi-page application using Tabs and Pages. It demonstrates initializing the app, creating windows and sections, defining multiple pages with distinct content, and implementing navigation between them using buttons and the `Navigate` method. This serves as a practical guide for structuring complex UIs.

```lua
local app = cascade.New({
    Theme = cascade.Themes.Light,
})

local window = app:Window({
    Title = "My App",
})

local section = window:Section({
    Disclosure = false,
})

local tab = section:Tab({
    Title = "Navigation",
    Icon = cascade.Symbols.squareStack3dUp,
    Selected = false,
})

-- Create pages
local page1 = app:Page()
local page2 = app:Page()

-- Setup page 1
do
    local form = page1:Form()

    form:Row():Left():TitleStack({
        Title = "Home Page",
        Subtitle = "Welcome to the app",
    })

    form:Row():Right():Button({
        Label = "Go to Next Page",
        Pushed = function()
            tab:Navigate(page2)
        end,
    })
end

-- Setup page 2
do
    local form = page2:Form()

    form:Row():Left():TitleStack({
        Title = "Second Page",
        Subtitle = "You've navigated here",
    })

    form:Row():Right():Button({
        Label = "Back to Home",
        State = "Secondary",
        Pushed = function()
            tab:Navigate(page1)
        end,
    })
end

-- Show page 1 initially
tab:Navigate(page1)
```

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

### Row Component Initialization Example (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/Row

Demonstrates how to initialize a Row component in Lua, set its SearchIndex property, and verify its type and class name.

```lua
local row = section:Row({
    SearchIndex = "Cool Row"
})

print(row:IsA("Frame")) --> true
print(row.ClassName) --> "Frame"
print(row.Type) --> "Row"
```

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

### Button Creation and Interaction Example

Source: https://biggaboy212.github.io/Cascade/Components/Button

Demonstrates how to create a Button with a label, state, and a Pushed event handler in Lua. It also shows how to check the button's type and class.

```lua
local button = row:Right():Button({
    Label = "Button",
    State = "Primary",
    Pushed = function(self)
        print("Pushed")
    end,
})

print(button:IsA("TextButton")) --> true
print(button.ClassName) --> "TextButton"
print(button.Type) --> "Button"
```

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

### TextField Example Usage (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/TextField

Demonstrates how to create and use a TextField component in Lua. It shows setting initial values, handling ValueChanged and TextChanged events, and accessing component properties.

```lua
local textField = row:Right():TextField({
    Value = "Label",
    ValueChanged = function(self, value: string) 
        print("Value changed:", value)
    end,
    TextChanged = function(self, value: string) 
        print("Text changed:", value)
    end,
})

print(textField:IsA("Frame")) --> true
print(textField.ClassName) --> "Frame"
print(textField.Type) --> "TextField"

textField.Value = "Hi" --> Value changed: "Hi"
```

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

### Stepper Initialization and Usage Example

Source: https://biggaboy212.github.io/Cascade/Components/Stepper

Demonstrates how to create and use a Stepper component in Lua. It shows setting properties like minimum, maximum, step, and initial value, as well as handling the ValueChanged event and manually incrementing/decrementing the value.

```lua
local stepper = row:Right():Stepper({
    Minimum = 0,
    Maximum = 5,
    Step = 0.1,
    Fielded = true,
    Value = 3,
    ValueChanged = function(self, value: number)
        print("Value changed:", value)
    end,
})

print(stepper:IsA("ImageLabel")) --> true
print(stepper.ClassName) --> "ImageLabel"
print(stepper.Type) --> "Stepper"

stepper:Increment() --> Value changed: 3.01
stepper.Value += 1 --> Value changed: 4.01
```

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

### Full Example: Multi-Page App with Tabs

Source: https://biggaboy212.github.io/Cascade/Components/Page

A comprehensive example demonstrating the creation of an application with multiple pages and tab-based navigation.

```APIDOC
## Examples

```lua
local app = cascade.New({
    Theme = cascade.Themes.Light,
})

local window = app:Window({
    Title = "My App",
})

local section = window:Section({
    Disclosure = false,
})

local tab = section:Tab({
    Title = "Navigation",
    Icon = cascade.Symbols.squareStack3dUp,
    Selected = false,
})

-- Create pages
local page1 = app:Page()
local page2 = app:Page()

-- Setup page 1
do
    local form = page1:Form()

    form:Row():Left():TitleStack({
        Title = "Home Page",
        Subtitle = "Welcome to the app",
    })

    form:Row():Right():Button({
        Label = "Go to Next Page",
        Pushed = function()
            tab:Navigate(page2)
        end,
    })
end

-- Setup page 2
do
    local form = page2:Form()

    form:Row():Left():TitleStack({
        Title = "Second Page",
        Subtitle = "You've navigated here",
    })

    form:Row():Right():Button({
        Label = "Back to Home",
        State = "Secondary",
        Pushed = function()
            tab:Navigate(page1)
        end,
    })
end

-- Show page 1 initially
tab:Navigate(page1)
```
```

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

### Lua Slider Component Example

Source: https://biggaboy212.github.io/Cascade/Components/Slider

Demonstrates how to create and use a Slider component in Lua. It shows setting initial properties, handling the ValueChanged event, and interacting with the slider's value.

```lua
local slider = row:Right():Slider({
    Minimum = 0,
    Maximum = 10,
    Value = 5,
    ValueChanged = function(self, value: number)
        print("Value changed:", value)
    end,
})

print(slider:IsA("ImageLabel")) --> true
print(slider.ClassName) --> "ImageLabel"
print(slider.Type) --> "Slider"

slider.Value += 1 --> Value changed: 6
```

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

### Initialize TitleStack Component

Source: https://biggaboy212.github.io/Cascade/Components/TitleStack

Demonstrates how to instantiate a TitleStack component within a layout and verify its inheritance. The example shows setting the Title and Subtitle properties and checking the object's class identity.

```Luau
local titleStack = row:Left():TitleStack({
    Title = "Toggle (Off)",
    Subtitle = "Lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.",
})

print(titleStack:IsA("Frame")) --> true
print(titleStack.ClassName) --> "Frame"
print(titleStack.Type) --> "TitleStack"
```

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

### Nest and Select Tabs

Source: https://biggaboy212.github.io/Cascade/Components/Tab

Examples of creating hierarchical tab structures and managing the selected state of tabs.

```Luau
-- Nested Tabs
local mainTab = section:Tab({ Title = "Main", Icon = cascade.Symbols.squareStack3dUp })
mainTab:Tab({ Title = "Sub 1" })
mainTab:Tab({ Title = "Sub 2" })

-- Manual Selection
local tab1 = section:Tab({ Title = "Tab 1" })
local tab2 = section:Tab({ Title = "Tab 2" })
tab2.Selected = true
```

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

### KeybindField Usage Example (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/KeybindField

Demonstrates how to create and use a KeybindField component in Roblox Lua. It shows setting up event handlers for ValueChanged and BindPressed, and interacting with the Value property.

```lua
local keybindField = row:Right():KeybindField({
    ValueChanged = function(self, value: Enum.KeyCode) 
        print("Value changed:", value)
    end,
    BindPressed = function(
        self,
        value: Enum.KeyCode,
        inputComplete: boolean,
        gameProcessedEvent: boolean
    )
        if not inputComplete or gameProcessedEvent then
            return
        end

        print("Pressed bind:", value)
    end,
})

print(keybindField:IsA("Frame")) --> true
print(keybindField.ClassName) --> "Frame"
print(keybindField.Type) --> "KeybindField"

keybindField.Value = Enum.KeyCode.Z --> Value changed: Enum.KeyCode.Z
```

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

### PageSection Instantiation Example (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/PageSection

Demonstrates how to create and configure a PageSection instance in Lua. It shows setting the Title and Subtitle properties and verifying its type and class name.

```lua
local pageSection = tab:PageSection({
    Title = "Effects",
    Subtitle = "These effects may be resource intensive across different systems.",
})

print(pageSection:IsA("Frame")) --> true
print(pageSection.ClassName) --> "Frame"
print(pageSection.Type) --> "PageSection"
```

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

### Slider Component Documentation

Source: https://biggaboy212.github.io/Cascade/Components/Slider

Detailed documentation for the Slider component, covering its properties, events, and usage examples.

```APIDOC
## Slider Component

A `Slider` is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.

### Properties

- **Minimum** (`number?`) - The minimum value the slider can go.
- **Maximum** (`number?`) - The maximum value the slider can reach.
- **Value** (`number?`) - The slider's current value.

### Events

- **ValueChanged** (`(self: Slider, value: number) -> unknown)?`) - A Callback function that is triggered when the `Value` property has been modified.

### Function Signature

```lua
function(self, properties: SliderProperties): Slider
```

### Example

```lua
local slider = row:Right():Slider({
    Minimum = 0,
    Maximum = 10,
    Value = 5,
    ValueChanged = function(self, value: number)
        print("Value changed:", value)
    end,
})

print(slider:IsA("ImageLabel")) --> true
print(slider.ClassName) --> "ImageLabel"
print(slider.Type) --> "Slider"

slider.Value += 1 --> Value changed: 6
```
```

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

### Notification Creation and Usage Example (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/Notification

Demonstrates how to create and configure a Notification component in Lua. It includes setting properties like App, AppIcon, Title, Subtitle, Icon, Duration, and handling the Closed event. It also shows how to manually close the notification.

```lua
local notification = app:Notification({
    App = "CHAT",
    AppIcon = "rbxassetid://132228700346004",

    Title = "New Message",
    Subtitle = "You received a new message from a friend.",
    Icon = cascade.Symbols.bell, -- Icon appears beside the title label.

    Duration = 5,

    Closed = function(self, fromUser)
        print("Notification was dismissed! (from user: " .. tostring(fromUser) .. ")")
    end
})

-- Sometime later, if you need to manually close it:
-- notification:Close()
```

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

### Basic Custom Component Registration and Usage in Cascade

Source: https://biggaboy212.github.io/Cascade/Custom%20Components/introduction

Demonstrates how to register a custom component named 'RedLabel' using `cascade.RegisterComponent`. The example shows how the 'maker' function creates a label with red text and how to instantiate this custom component within a Cascade application.

```lua
cascade.RegisterComponent("RedLabel", function(self, properties)
    local object = self:Label({
        Text = properties.Text or "Default Text",
        TextColor3 = Color3.fromRGB(255, 0, 0),
    })

    return object
end)

-- Now you can use it like any built-in component:
local app = cascade.New()
app:RedLabel({ Text = "Hello World" })

```

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

### Set Application Accent in Cascade

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/accents

Demonstrates how to programmatically update the application-wide accent color using the Cascade framework's accent presets. The example sets the accent to Red by accessing the cascade.Accents enumeration.

```csharp
application.Accent = cascade.Accents.Red
```

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

### Creating and Customizing a Page for a Tab

Source: https://biggaboy212.github.io/Cascade/Components/Page

Demonstrates how to create a custom Page object and assign it to a Tab. This allows for more control over the content displayed within a tabbed interface. The example shows adding a Form with a PageSection to the custom page.

```lua
local customPage = app:Page()

-- Add content to your page
customPage:Form():PageSection({ Title = "Settings" })

-- Pass it to the tab
local tab = section:Tab({
    Title = "Settings",
    Page = customPage,
})
```

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

### Instantiate and Verify Form

Source: https://biggaboy212.github.io/Cascade/Components/Form

Demonstrates how to create a Form instance and verify its inheritance and class properties.

```Lua
local form = section:Form()

print(form:IsA("Frame")) --> true
print(form.ClassName) --> "Frame"
print(form.Type) --> "Form"
```

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

### Initialize Section Component

Source: https://biggaboy212.github.io/Cascade/Components/Section

Demonstrates how to instantiate a new Section component using the constructor function and verify its properties and inheritance.

```lua
local section = window:Section({
    Disclosure = true,
    Title = "Settings",
})

print(section:IsA("Frame")) --> true
print(section.ClassName) --> "Frame"
print(section.Type) --> "Section"
```

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

### Initialize Toggle Component

Source: https://biggaboy212.github.io/Cascade/Components/Toggle

Demonstrates how to instantiate a Toggle component and handle its state changes. It shows the constructor signature and how to verify the component's type and class.

```Luau
local toggle = row:Right():Toggle({
    Value = true,
    ValueChanged = function(self, value: boolean)
        print("Value changed:", value)
    end,
})

print(toggle:IsA("CanvasGroup")) --> true
print(toggle.ClassName) --> "CanvasGroup"
print(toggle.Type) --> "Toggle"
```

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

### Initialize New App Instance

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app

Demonstrates how to instantiate a new application using the cascade.New method with specific configuration properties.

```Luau
local app = cascade.New({
    WindowPill = true,
    Theme = cascade.Themes.Light,
    Accent = cascade.Accents.Blue,
})
```

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

### Initialize and Verify Symbol Component

Source: https://biggaboy212.github.io/Cascade/Components/Symbol

Demonstrates how to instantiate a Symbol component within a row and verify its inheritance and class properties using Luau.

```lua
local symbol = row:Right():Symbol({
    Image = cascade.Symbols.sunMin,
})

print(symbol:IsA("ImageLabel")) --> true
print(symbol.ClassName) --> "ImageLabel"
print(symbol.Type) --> "Symbol"
```

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

### Instantiate and Verify Label

Source: https://biggaboy212.github.io/Cascade/Components/Label

Demonstrates how to create a Label within a layout row and verify its class and type properties.

```lua
local label = row:Right():Label({
    Text = "Label"
})

print(label:IsA("TextLabel")) --> true
print(label.ClassName) --> "TextLabel"
print(label.Type) --> "Label"
```

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

### POST /cascade/New

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app

Initializes a new application instance, returning a custom object merged with a ScreenGui that provides access to UI components.

```APIDOC
## POST /cascade/New

### Description
Creates a new application instance. This method returns a custom object merged with a ScreenGui, exposing built-in components like Window and Tab for UI composition.

### Method
POST

### Endpoint
/cascade/New

### Parameters
#### Request Body
- **WindowPill** (boolean?) - Optional - Whether or not the window minimize/restore pill should be visible.
- **Theme** (Theme?) - Optional - Light or Dark mode configuration.
- **Accent** (Accent?) - Optional - Accent color palette selection.

### Request Example
{
	"WindowPill": true,
	"Theme": "Light",
	"Accent": "Blue"
}

### Response
#### Success Response (200)
- **App** (Object) - A custom object merged with ScreenGui containing UI components.

#### Response Example
{
	"status": "success",
	"data": {
		"WindowPill": true,
		"Theme": "Light",
		"Accent": "Blue"
	}
}
```

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

### Create and Configure Tabs

Source: https://biggaboy212.github.io/Cascade/Components/Tab

Demonstrates how to instantiate a basic tab and a tab with a custom page component.

```Luau
-- Basic Tab
local tab = section:Tab({
    Title = "Settings",
    Icon = cascade.Symbols.gear,
})

-- Tab with Custom Page
local customPage = app:Page()
customPage:Form():Row():Right():Toggle({ Value = false })

local tab = section:Tab({
    Title = "Settings",
    Page = customPage,
})
```

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

### Initialize and Verify HStack

Source: https://biggaboy212.github.io/Cascade/Components/HStack

Demonstrates how to instantiate an HStack within a row and verify its properties and class inheritance. This confirms the component is correctly registered as a Frame.

```Luau
local hStack = row:Right():HStack()

print(hStack:IsA("Frame")) --> true
print(hStack.ClassName) --> "Frame"
print(hStack.Type) --> "HStack"
```

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

### Initialize and Use PullDownButton

Source: https://biggaboy212.github.io/Cascade/Components/PullDownButton

Demonstrates how to instantiate a PullDownButton within a layout, handle value changes, and interact with the component's API for adding or removing options.

```Luau
local pullDownButton = row:Right():PullDownButton({
    Options = {
        "Action One",
        "Action Two",
    },
    ValueChanged = function(self, value: number)
        print("Action selected:", self.Options[value])
    end,
})

print(pullDownButton:IsA("Frame")) --> true
print(pullDownButton.ClassName) --> "Frame"
print(pullDownButton.Type) --> "PullDownButton"

pullDownButton.Value = 3 --> Value changed: "Item Three"

local itemThree = pullDownButton:Option("Item Three")

print(itemThree.ClassName) --> Frame
pullDownButton:Remove(13)
```

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

### Create Basic App with Cascade UI

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/example

This code snippet demonstrates the creation of a basic application using the Cascade UI library. It initializes a new app with a theme and accent, creates a main window, a static tab section, and a main tab. Within the tab, it constructs a form with a toggle and a button. Dependencies include the Cascade UI library. Inputs are theme and accent configurations. Outputs are UI elements like windows, tabs, forms, toggles, and buttons.

```lua
-- 

-- Create our main application.
local app = cascade.New({
    Theme = cascade.Themes.Light,
    Accent = cascade.Accents.Blue, -- Optional, defaults to Blue
})

do -- Make the main window
    local window = app:Window({
        Title = "My Window",
        Subtitle = "My window",
    })

    do -- Make a static tab section
        local section = window:Section({ Title = "Section title" })

        do -- Make our main tab
            local tab = section:Tab({
                Selected = true,
                Title = "Main",
                Icon = cascade.Symbols.squareStack3dUp,
            })

            do
                local form = tab:Form()

                do -- Make the toggle
                    local row = form:Row()

                    -- You can of course add a wrapper to simplify creating page components if you only want a title stack and a component to go along.
                    row:Left():TitleStack({
                        Title = "Toggle",
                        Subtitle = "My toggle",
                    })

                    row:Right():Toggle()
                end

                do -- Make the button
                    local row = form:Row()

                    row:Left():TitleStack({
                        Title = "Button",
                        Subtitle = "My button",
                    })

                    row:Right():Button({ Label = "Click me" })
                end
            end
        end
    end
end

```

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

### Registering a Component with Context

Source: https://biggaboy212.github.io/Cascade/Custom%20Components/creating-a-component

Demonstrates how to register a component using cascade.RegisterComponent and access the 'self' context object to identify the component type.

```lua
cascade.RegisterComponent("Test", function(self)
    print(self.Type)
end)

ctx:Toggle():Test() -- "Toggle"
```

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

### Form Initialization Function Signature

Source: https://biggaboy212.github.io/Cascade/Components/Form

Describes the constructor signature for creating a new Form instance.

```Lua
function(self, properties: FormProperties): Form
```

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

### Single-select PopUpButton Implementation

Source: https://biggaboy212.github.io/Cascade/Components/PopUpButton

Demonstrates initializing a single-select PopUpButton with predefined options and a ValueChanged callback to handle user interactions.

```Luau
local popUpButton = row:Right():PopUpButton({
    Options = {
        "Item One",
        "Item Two",
    },
    ValueChanged = function(self, value: number)
        print("Value changed:", self.Options[value])
    end,
})

print(popUpButton:IsA("Frame")) --> true
print(popUpButton.ClassName) --> "Frame"
print(popUpButton.Type) --> "PopUpButton"

popUpButton.Value = 3 --> Value changed: "Item Three"

local itemThree = popUpButton:Option("Item Three")

print(itemThree.ClassName) --> Frame
popUpButton:Remove(13)
```

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

### Stepper Component Initialization

Source: https://biggaboy212.github.io/Cascade/Components/Stepper

Constructor and configuration properties for the Stepper component.

```APIDOC
## Constructor: Stepper(properties: StepperProperties)

### Description
Creates a new instance of a Stepper component with the provided configuration properties.

### Parameters
#### Request Body
- **Minimum** (number) - Optional - The minimum value the stepper can drop.
- **Maximum** (number) - Optional - The maximum value the stepper can reach.
- **Step** (number) - Optional - The increment to increase by on increase/decrease.
- **Fielded** (boolean) - Optional - Whether the stepper should be attached to an editable field. Defaults to false.
- **Value** (number) - Optional - The stepper's current value.
- **ValueChanged** (function) - Optional - Callback function triggered when the Value property is modified.

### Request Example
{
	"Minimum": 0,
	"Maximum": 5,
	"Step": 0.1,
	"Fielded": true,
	"Value": 3
}
```

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

### Import Cascade Library via HTTP (Luau)

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library

This snippet demonstrates how to dynamically import the Cascade library using HttpGet in Luau. It handles fetching the latest release or a specific version from GitHub. Ensure HttpGet is enabled in your environment.

```luau
local function import(owner, repo, version, file)
    local tag = (version == "latest" and "latest/download" or "download/"..version)

    return loadstring(game:HttpGetAsync(("https://github.com/%s/%s/releases/%s/%s"):format(owner, repo, tag, file)), file)()
end

local cascade = import("biggaboy212", "Cascade", "latest", "dist.luau")
-- If you want to use a specific release (i.e, beta releases), replace 'latest' with it's release tag.
```

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

### Creating a Custom Card Component

Source: https://biggaboy212.github.io/Cascade/Custom%20Components/creating-a-component

Shows how to build a functional 'Card' component using the cascade.Creator module. It handles properties for customization and integrates internal UI elements like UICorner.

```lua
local creator = cascade.Creator
local create = creator.Create

cascade.RegisterComponent("Card", function(self, properties)
    local frame = create("Frame")({
        Name = properties.Name or "Card",
        Size = properties.Size or UDim2.fromOffset(200, 100),
        Parent = properties.Parent or self.__container,

        create("UICorner")({
            CornerRadius = UDim.new(0, 8),
        }),
    })

    self:Label({
        Text = properties.Title or "Card Title",
        Parent = frame.__instance,
    })

    return frame
end)
```

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

### Implement Tab Navigation

Source: https://biggaboy212.github.io/Cascade/Components/Tab

Shows how to use the Navigate method to switch between different pages within a tab workflow.

```Luau
local tab = section:Tab({ Title = "Workflow", Selected = true })
local page1 = app:Page()
local page2 = app:Page()

page1:Form():Row():Right():Button({
    Label = "Next",
    Pushed = function() tab:Navigate(page2) end,
})

page2:Form():Row():Right():Button({
    Label = "Back",
    State = "Secondary",
    Pushed = function() tab:Navigate(page1) end,
})

tab:Navigate(page1)
```

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

### RadioButtonGroup Component Instantiation and Usage (Luau)

Source: https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup

Demonstrates how to create and use a RadioButtonGroup component in Luau. It shows setting options, handling the ValueChanged event, accessing properties, and dynamically adding new options.

```luau
local radioButtonGroup = row:Right():RadioButtonGroup({
    Options = {
        "Option 1",
        "Option 2",
    },
    ValueChanged = function(self, value: number)
        print("Value changed:", self.Options[value])
    end,
})

print(radioButtonGroup:IsA("Frame")) --> true
print(radioButtonGroup.ClassName) --> "Frame"
print(radioButtonGroup.Type) --> "RadioButtonGroup"

radioButtonGroup.Value = 2 --> Value changed: "Option 2"

local option3 = radioButtonGroup:Option("Option 3")

print(option3.ClassName) --> Frame
radioButtonGroup.Value = 3 --> Value changed: "Option 3"
```

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

### Define App Types and Properties

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app

Defines the structure for AppProperties and the App object, extending ScreenGui with custom configuration options like WindowPill, Theme, and Accent.

```Luau
type AppProperties = ScreenGui & {
    WindowPill: boolean?,
    Theme: Theme?,
    Accent: Accent?,
}

type App = AppProperties & Components
```

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

### Multi-select PopUpButton Implementation

Source: https://biggaboy212.github.io/Cascade/Components/PopUpButton

Demonstrates configuring a PopUpButton for multi-select functionality by setting the Maximum property. The ValueChanged callback receives a table of indices representing selected items.

```Luau
local multi = row:Right():PopUpButton({
    Options = {"One","Two","Three","Four"},
    Maximum = 3,
    ValueChanged = function(self, value)
        -- `value` is ALWAYS a table of indices when `Maximum > 1` even if only 1 value is selected.
        print("Selections:")
        for _, idx in ipairs(value or {}) do
            print(self.Options[idx])
        end
    end,
})

local five = multi:Option("Five")

multi.Value = {1, 3}
```

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

### Programmatic Page Navigation using Tab.Navigate

Source: https://biggaboy212.github.io/Cascade/Components/Page

Illustrates how to programmatically switch between different Pages associated with a Tab using the `Navigate` method. This is essential for creating dynamic navigation flows within an application. It sets up two pages, 'Home' and 'Settings', and buttons on each to navigate to the other.

```lua
local homePage = app:Page()
local settingsPage = app:Page()

local tab = section:Tab({
    Title = "Routing",
    Selected = false,
})

-- Setup home page
do
    local form = homePage:Form()
    form:Row():Right():Button({
        Label = "Go to Settings",
        Pushed = function()
            tab:Navigate(settingsPage)  -- Switch to settings page
        end,
    })
end

-- Setup settings page
do
    local form = settingsPage:Form()
    form:Row():Right():Button({
        Label = "Back to Home",
        Pushed = function()
            tab:Navigate(homePage)  -- Switch back to home page
        end,
    })
end

-- Show home page initially
tab:Navigate(homePage)
```

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

### Create Standalone Cascade Components

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/standalone

Demonstrates how to create standalone Cascade components using the Component API. It shows initializing a component context with specific theme and accent, and then creating a Toggle component with event handling.

```lua
local ctx = cascade.Component({
    Theme = cascade.Themes.Dark,
    Accent = cascade.Accents.Blue,
})

-- Returns our wrapped object and the raw Roblox instance
local object, instance = ctx:Toggle({
    Parent = someFrame,
    Value = true,
    ValueChanged = function(self, value: boolean)
        print("Value changed:", value)
    end,
})

print(object.__instance)
```

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

### Configure Window Settings in Cascade

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/example

This Lua code snippet demonstrates how to add a 'Window' tab to a Cascade UI, allowing users to configure application appearance, input behavior, and visual effects. It includes settings for dark mode, searchability, window dragging, resizing, dropshadows, and background blur.

```lua
do -- Window
    local tab = section:Tab({
        Title = "Window",
        Icon = cascade.Symbols.sidebarLeft,
    })

    do -- Appearance
        local form = tab:PageSection({ Title = "Appearance" }):Form() -- 

        do -- Dark mode
            local row = form:Row({
                SearchIndex = "Dark mode",
            })

            row:Left():TitleStack({
                Title = "Dark mode",
                Subtitle = "Dark Mode is a application appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.",
            })

            row:Right():Toggle({
                Value = app.Theme == cascade.Themes.Dark,
                ValueChanged = function(self, value: boolean)
                    app.Theme = value and cascade.Themes.Dark or cascade.Themes.Light
                end,
            })
        end
    end

    do -- Input
        local form = tab:PageSection({ Title = "Input" }):Form()

        do -- Searching
            local row = form:Row({
                SearchIndex = "Searchable",
            })

            row:Left():TitleStack({
                Title = "Searchable",
                Subtitle = "Allows pages to be searched using a text field in the title bar.",
            })

            row:Right():Toggle({
                Value = window.Searching,
                ValueChanged = function(self, value: boolean)
                    window.Searching = value
                end,
            })
        end

        do -- Draggable
            local row = form:Row({
                SearchIndex = "Draggable",
            })

            row:Left():TitleStack({
                Title = "Draggable",
                Subtitle = "Allows users to move the window with a mouse or touch device.",
            })

            row:Right():Toggle({
                Value = window.Draggable,
                ValueChanged = function(self, value: boolean)
                    window.Draggable = value
                end,
            })
        end

        do -- Resizable
            local row = form:Row({
                SearchIndex = "Resizable",
            })

            row:Left():TitleStack({
                Title = "Resizable",
                Subtitle = "Allows users to resize the window with a mouse or touch device.",
            })

            row:Right():Toggle({
                Value = window.Resizable,
                ValueChanged = function(self, value: boolean)
                    window.Resizable = value
                end,
            })
        end
    end

    do -- Effects
        local form = tab:PageSection({
            Title = "Effects",
            Subtitle = "These effects may be resource intensive across different systems.",
        }):Form()

        do -- Dropshadow
            local row = form:Row({
                SearchIndex = "Dropshadow",
            })

            row:Left():TitleStack({
                Title = "Dropshadow",
                Subtitle = "Enables a dropshadow effect on the window.",
            })

            row:Right():Toggle({
                Value = window.Dropshadow,
                ValueChanged = function(self, value: boolean)
                    window.Dropshadow = value
                end,
            })
        end

        do -- UI Blur
            local row = form:Row({
                SearchIndex = "Background blur",
            })

            row:Left():TitleStack({
                Title = "Background blur",
                Subtitle = "Enables a UI background blur effect on the window. This can be detectable in some games.",
            })

            row:Right():Toggle({
                Value = window.UIBlur,
                ValueChanged = function(self, value: boolean)
                    window.UIBlur = value
                end,
            })
        end
    end
end

```

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

### Button Function Signature

Source: https://biggaboy212.github.io/Cascade/Components/Button

Illustrates the function signature for creating a Button instance, specifying the self parameter and the expected ButtonProperties.

```typescript
function(self, properties: ButtonProperties): Button
```

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

### RadioButtonGroup Constructor

Source: https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup

Initializes a new RadioButtonGroup component with specified properties and event handlers.

```APIDOC
## Constructor: RadioButtonGroup

### Description
Creates a new instance of a RadioButtonGroup, allowing users to select from a set of mutually exclusive choices.

### Method
Constructor (Lua)

### Parameters
#### Request Body
- **Options** ({[number]: string}) - Optional - A table of options to pre-define.
- **Value** (number) - Optional - The numeric index of the initially selected option.
- **ValueChanged** (function) - Optional - Callback function triggered when the selection changes.

### Request Example
{
	"Options": ["Option 1", "Option 2"],
	"Value": 1,
	"ValueChanged": "function(self, value) ... end"
}

### Response
#### Success Response
- **RadioButtonGroup** (Object) - The initialized component instance.

### Response Example
{
	"ClassName": "Frame",
	"Type": "RadioButtonGroup"
}
```

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

### Row Component Function Signature (JavaScript)

Source: https://biggaboy212.github.io/Cascade/Components/Row

Illustrates the function signature for creating a Row component, specifying the input parameters and the return type.

```javascript
function(self, properties: RowProperties): Row
```

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

### Row Component Overview

Source: https://biggaboy212.github.io/Cascade/Components/Row

This section details the properties and methods of the Row component.

```APIDOC
## Row Component

A `Row` is a horizontal container that splits its contents into `Left` and `Right` sections, providing a clear visual distinction between primary and secondary elements.

### Properties

- **SearchIndex** (`string?`) - A string that determines what the user has to type in to show this row in their search query.

### Methods

- **Left** (`() -> Row`) - Returns a shallow clone of `Row` with the container set to the row's **left** container.
- **Right** (`() -> Row`) - Returns a shallow clone of `Row` with the container set to the row's **right** container.

### Types

```lua
type RowProperties = Frame & {
    SearchIndex: string?,
}

type Row = BaseComponent & Components & RowProperties & {
    Left: (self: Row) -> Row,
    Right: (self: Row) -> Row,
}
```

### Function Signature

```lua
function(self, properties: RowProperties): Row
```

### Example

```lua
local row = section:Row({
    SearchIndex = "Cool Row"
})

print(row:IsA("Frame")) --> true
print(row.ClassName) --> "Frame"
print(row.Type) --> "Row"
```
```

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

### Create Roblox Instances with Creator.Create

Source: https://biggaboy212.github.io/Cascade/Custom%20Components/internal-modules

The Creator.Create function generates a factory for creating Roblox instances with specified properties and nested children. It simplifies UI hierarchy construction by allowing a declarative approach to instance instantiation.

```Luau
local create = cascade.Creator.Create

local frame = create("Frame")({
    Name = "MyFrame",
    Size = UDim2.fromScale(1, 1),

    create("UICorner")({ CornerRadius = UDim.new(0, 4) }),
})
```

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

### Using Pages with Tabs

Source: https://biggaboy212.github.io/Cascade/Components/Page

Demonstrates how to associate Pages with Tabs, including automatic page creation and how to provide custom pages to tabs.

```APIDOC
## Pages and Tabs

Pages are most commonly used with Tabs. Each Tab has an associated Page that displays when the tab is selected.

When you create a tab, it automatically creates a page for you:

### Tabs with custom pages

You can also pass your own page to a tab:

```lua
local customPage = app:Page()

-- Add content to your page
customPage:Form():PageSection({ Title = "Settings" })

-- Pass it to the tab
local tab = section:Tab({
    Title = "Settings",
    Page = customPage,
})
```
```

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

### Create Cascade Components with Different Contexts

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/standalone

Shows how to create Cascade components within different contexts, each with its own theme and accent. This allows for isolated styling and behavior across different parts of an application.

```lua
-- This one will use the `Light` theme with the `Red` accent.
do
    local ctx = cascade.Component({
        Theme = cascade.Themes.Light,
        Accent = cascade.Accents.Red,
    })

    local toggle = ctx:Toggle({ Value = false })
end

-- This one will use the `Dark` theme with the `Blue` accent.
do
    local ctx = cascade.Component({
        Theme = cascade.Themes.Dark,
        Accent = cascade.Accents.Blue,
    })

    local toggle = ctx:Toggle({ Value = true })
end
```

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

### Page Navigation with Tabs

Source: https://biggaboy212.github.io/Cascade/Components/Page

Explains how to programmatically navigate between pages using the `Navigate` method on a Tab component.

```APIDOC
## Page Navigation

Use the `Navigate` method on a tab to switch between pages programmatically:

```lua
local homePage = app:Page()
local settingsPage = app:Page()

local tab = section:Tab({
    Title = "Routing",
    Selected = false,
})

-- Setup home page
do
    local form = homePage:Form()
    form:Row():Right():Button({
        Label = "Go to Settings",
        Pushed = function()
            tab:Navigate(settingsPage)  -- Switch to settings page
        end,
    })
end

-- Setup settings page
do
    local form = settingsPage:Form()
    form:Row():Right():Button({
        Label = "Back to Home",
        Pushed = function()
            tab:Navigate(homePage)  -- Switch back to home page
        end,
    })
end

-- Show home page initially
tab:Navigate(homePage)
```
```

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

### KeybindField Function Signature (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/KeybindField

Illustrates the function signature for creating a new KeybindField instance. It takes properties as an argument and returns a KeybindField object.

```lua
function(self, properties: KeybindFieldProperties): KeybindField
```

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

### Button Component API

Source: https://biggaboy212.github.io/Cascade/Components/Button

Details on the properties, methods, and events of the Button component.

```APIDOC
## Button Component

### Description
A `Button` initiates an instantaneous action.

### Properties
- **State** (("Primary" or "Secondary" or "Destructive")?) - Optional - Determines the weight of the button. Suggests to the user its impact on surrounding content.
- **Label** (string?) - Optional - The text content of the button.

### Events
- **Pushed** ((self: Button) -> unknown)? - Optional - A callback function that is triggered when the button has been fully clicked or tapped.

### Type Definition
```lua
type ButtonProperties = {
    State: ("Primary" | "Secondary" | "Destructive")?,
    Label: string?,
    Pushed: ((self: Button) -> unknown)?,
}

type Button = BaseComponent & Components & ButtonProperties
```

### Function Signature
```lua
function(self, properties: ButtonProperties): Button
```

### Example
```lua
local button = row:Right():Button({
    Label = "Button",
    State = "Primary",
    Pushed = function(self)
        print("Pushed")
    end,
})

print(button:IsA("TextButton")) --> true
print(button.ClassName) --> "TextButton"
print(button.Type) --> "Button"
```
```

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

### Component Methods

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/standalone

Methods available on the ComponentContext to instantiate specific UI elements.

```APIDOC
## METHOD ctx:Toggle

### Description
Creates a toggle component within the current context.

### Parameters
- **Parent** (Instance?) - Optional - Overrides the context parent.
- **Value** (boolean) - Required - Initial state of the toggle.
- **ValueChanged** (function) - Optional - Callback triggered when the toggle state changes.

### Request Example
{
	"Value": true,
	"ValueChanged": "function(self, value) ... end"
}

## METHOD ctx:Slider

### Description
Creates a slider component within the current context.

### Parameters
- **Value** (number) - Required - Initial value.
- **Minimum** (number) - Required - Minimum range.
- **Maximum** (number) - Required - Maximum range.

### Request Example
{
	"Value": 0.5,
	"Minimum": 0,
	"Maximum": 1
}
```

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

### TextField Function Signature (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/TextField

Provides the function signature for creating a TextField instance. It takes self and TextFieldProperties as arguments and returns a TextField object.

```lua
function(self, properties: TextFieldProperties): TextField
```

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

### Symbol Component Constructor Signature

Source: https://biggaboy212.github.io/Cascade/Components/Symbol

Defines the constructor signature for creating a new Symbol instance, requiring a self reference and a SymbolProperties object.

```typescript
function(self, properties: SymbolProperties): Symbol
```

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

### Window Type Definition

Source: https://biggaboy212.github.io/Cascade/Components/Window

Defines the properties and structure for the Window component, including standard frame properties and specific window behaviors like searching, dragging, and visual effects. It extends Frame and incorporates WindowProperties.

```typescript
type WindowProperties = Frame & {
    Searching: boolean?,
    Draggable: boolean?,
    Resizable: boolean?,
    Title: string?,
    Subtitle: string?,
    Maximized: boolean?,
    Minimized: boolean?,

    -- These effects can be system resource intensive.
    Dropshadow: boolean?,
    UIBlur: boolean?, -- Detectable in some games.
}

type Window = BaseComponent & Components & WindowProperties
```

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

### RadioButtonGroup Methods

Source: https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup

Methods available on the RadioButtonGroup instance for managing options and state.

```APIDOC
## Method: Option(Name)

### Description
Creates a new option within the group and returns the instance, allowing for manual control or dynamic updates.

### Parameters
- **Name** (string) - Optional - The display name for the new option.

### Response
- **Frame** (Object) - The created option instance.
```

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

### Define Form Types and Structure

Source: https://biggaboy212.github.io/Cascade/Components/Form

Defines the type structure for the Form component, extending BaseComponent and Frame properties.

```Lua
type FormProperties = Frame

type Form = BaseComponent & Components & FormProperties
```

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

### Stepper Methods

Source: https://biggaboy212.github.io/Cascade/Components/Stepper

Methods available to manipulate the Stepper value programmatically.

```APIDOC
## Method: Increment()

### Description
Increments the `Value` of the stepper by the defined `Step` amount.

## Method: Decrement()

### Description
Decrements the `Value` of the stepper by the defined `Step` amount.
```

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

### HStack Function Signature

Source: https://biggaboy212.github.io/Cascade/Components/HStack

Defines the constructor signature for creating a new HStack instance. It accepts a self-reference and a properties object to initialize the component.

```Luau
function(self, properties: StackProperties): Stack
```

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

### cascade.Component

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/standalone

Initializes a new component context with specific properties, allowing for the creation of themed UI components.

```APIDOC
## FUNCTION cascade.Component

### Description
Initializes a standalone component context. This function returns a context object that can be used to instantiate various UI components like Toggles or Sliders.

### Method
Function Call

### Parameters
#### Request Body
- **Theme** (Theme?) - Optional - Light or Dark mode setting.
- **Accent** (Accent?) - Optional - Accent color palette.
- **Parent** (Instance?) - Optional - Default parent for components created within this context.

### Request Example
{
	"Theme": "cascade.Themes.Dark",
	"Accent": "cascade.Accents.Blue",
	"Parent": "someFrame"
}

### Response
#### Success Response
- **ComponentContext** (Object) - A context object containing methods to create UI components (e.g., :Toggle, :Slider).

#### Response Example
{
	"ctx": "ComponentContext"
}
```

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

### PopUpButton Type Definitions

Source: https://biggaboy212.github.io/Cascade/Components/PopUpButton

Defines the structure and properties for the PopUpButton component, including its inheritance from Frame and BaseComponent, and the expected property types.

```Luau
type PopUpButtonProperties = Frame & {
    Options: { [number]: string }?,
    Expanded: boolean?,
    Maximum: number?,
    Value: (number | {number})?,
    ValueChanged: ((self: PopUpButton, value: number | {number}) -> unknown)?,
}

type PopUpButton = BaseComponent & Components & PopUpButtonProperties & {
    Option: (Name: string?) -> Frame,
    Remove: (Index: number?) -> nil,
}
```

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

### Set Application Theme to Dark using Cascade

Source: https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/themes

This snippet demonstrates how to set the application's theme to Dark using the Cascade library. It assumes the 'cascade' object and its 'Themes' enum are accessible. The primary input is the desired theme value from the 'Themes' enum.

```javascript
application.Theme = cascade.Themes.Dark
```

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

### Access Icons with Symbols

Source: https://biggaboy212.github.io/Cascade/Custom%20Components/internal-modules

The Symbols module provides a centralized lookup table for hundreds of icons. Developers can access specific icons by referencing their property names directly from the cascade.Symbols object.

```Luau
local icon = cascade.Symbols.squareStack3dUp
```

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

### Label Function Signature

Source: https://biggaboy212.github.io/Cascade/Components/Label

The constructor signature for creating a new Label instance, requiring a self reference and LabelProperties.

```typescript
function(self, properties: LabelProperties): Label
```

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

### Button Type Definitions

Source: https://biggaboy212.github.io/Cascade/Components/Button

Defines the properties and types for the Button component, including its state, label, and the Pushed event. It also shows inheritance from TextButton and BaseComponent.

```typescript
type ButtonProperties = TextButton & {
    State: ("Primary" | "Secondary" | "Destructive")?,
    Label: string?,
    Pushed: ((self: Button) -> unknown)?,
}

type Button = BaseComponent & Components & ButtonProperties
```

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

### Define Toggle Types

Source: https://biggaboy212.github.io/Cascade/Components/Toggle

Defines the structure and properties of the Toggle component using custom type definitions. This ensures type safety for the component's state and event callbacks.

```Luau
type ToggleProperties = CanvasGroup & {
    Value: boolean?,
    ValueChanged: ((self: Toggle, value: boolean) -> unknown)?,
}

type Toggle = BaseComponent & Components & ToggleProperties
```

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

### TextField Properties and Types (Lua)

Source: https://biggaboy212.github.io/Cascade/Components/TextField

Defines the properties and types for the TextField component, including Placeholder, Value, TextChanged, and ValueChanged events. These types extend from BaseComponent and Frame.

```lua
type TextFieldProperties = Frame & {
    Placeholder: string?,
    Value: string?,
    TextChanged: ((self: TextField, text: string) -> unknown)?,
    ValueChanged: ((self: TextField, value: string) -> unknown)?,
}

type TextField = BaseComponent & Components & TextFieldProperties
```