### Sonner Component API

Source: https://blazor.art/Tools/Simple-UI/SonnerExample

Documentation for the Sonner component including its properties, event callbacks and usage examples.

```APIDOC
## Sonner Component

### Description
The Sonner component provides toast notifications with customizable properties and event handling.

### Properties / EventCallbacks
| Name | Type | Data Type | Default Value |
|------|------|-----------|---------------|
| ActionName | Property | string | OK |
| Description | Property | string | Here goes your description... |
| OnActionClick | Event | EventCallback | EventCallback |
| Show | Property | bool | False |
| Title | Property | string | Your Title |

### Usage Example
```razor
<Sonner @bind-Show="showToast" 
        Title="Notification Title" 
        Description="This is a notification message" 
        ActionName="OK" 
        OnActionClick="HandleActionClick" />

@code {
    private bool showToast = true;
    
    private void HandleActionClick()
    {
        // Handle action button click
        showToast = false;
    }
}
```

### Response
#### Success Response
- **Show** (bool) - Controls the visibility of the toast notification
- **Title** (string) - The title text displayed in the toast
- **Description** (string) - The description text displayed in the toast
- **ActionName** (string) - Text for the action button
- **OnActionClick** (EventCallback) - Event handler for action button clicks
```

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

### GET Tooltip Component Properties

Source: https://blazor.art/Tools/Simple-UI/TooltipExample

Retrieves the available properties, event callbacks, and methods for the Tooltip component. This endpoint returns the complete API reference for configuring tooltip behavior and appearance.

```APIDOC
## GET /api/components/tooltip

### Description
Returns the complete API reference for the Tooltip component including all available properties, event callbacks, and methods for configuration.

### Method
GET

### Endpoint
/api/components/tooltip

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
{}

### Response
#### Success Response (200)
- **properties** (object) - Component configuration properties
- **eventCallbacks** (object) - Available event handlers
- **methods** (object) - Component methods

#### Response Example
{
  "properties": {
    "ChildContent": {
      "type": "RenderFragment",
      "required": false,
      "description": "Content to be displayed inside the tooltip component"
    },
    "ShowBelow": {
      "type": "bool",
      "required": false,
      "defaultValue": false,
      "description": "Determines tooltip positioning - when true, tooltip appears below the trigger element"
    },
    "Tip": {
      "type": "string",
      "required": false,
      "defaultValue": "Tooltip",
      "description": "Text content displayed in the tooltip"
    },
    "TipWidth": {
      "type": "string",
      "required": false,
      "defaultValue": "fit-content",
      "description": "Width specification for the tooltip container"
    }
  },
  "eventCallbacks": {},
  "methods": {}
}
```

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

### Grid Component Documentation

Source: https://blazor.art/Tools/Simple-UI/GridExample

Documentation for the Grid component, detailing its properties, event callbacks, and usage for regular and masonry layouts.

```APIDOC
## Grid Component

### Description
Documentation for the Grid component, detailing its properties, event callbacks, and usage for regular and masonry layouts.

### Properties / EventCallbacks

#### Properties
- **BorderRadius** (string) - Default: `0.5rem` - Controls the border radius of the grid.
- **ChildContent** (RenderFragment) - The content to be rendered within the grid.
- **Class** (string) - Custom CSS class for the grid.
- **ColGap** (string) - Gap between columns.
- **Columns** (string) - Defines the number or layout of columns.
- **Gap** (string) - Default: `1rem` - General gap for grid items.
- **Id** (string) - Unique identifier for the grid.
- **MasonryColumnCount** (string) - Default: `auto` - Sets the column count for masonry layout.
- **MasonryColumnSize** (string) - Default: `200px` - Sets the width of columns in masonry layout.
- **MasonryItemGap** (string) - Default: `1rem` - Gap between items in masonry layout.
- **MinColWidth** (string) - Default: `200px` - Minimum width for columns.
- **MinRowWidth** (string) - Default: `auto` - Minimum width for rows.
- **RowGap** (string) - Gap between rows.
- **Rows** (string) - Defines the number or layout of rows.
- **ShowAsMasonry** (bool) - Default: `False` - Enables masonry layout.
- **Style** (string) - Custom inline styles for the grid.

### Examples

#### Regular Grid Column Example
```csharp
<Grid>
    <GridColumn>
        <p>I'm Zero</p>
    </GridColumn>
    <GridColumn>
        <p>I'm One</p>
    </GridColumn>
    @* ... other GridColumns *@
</Grid>
```

#### Masonry Example
```csharp
<Grid ShowAsMasonry="true" MasonryColumnCount="3">
    <GridColumn>
        <p>Item 1</p>
    </GridColumn>
    <GridColumn>
        <p>Item 2</p>
    </GridColumn>
    @* ... other GridColumns *@
</Grid>
```
```

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

### Badge Component API

Source: https://blazor.art/Tools/Simple-UI/BadgeExample

Documentation for the Badge component, including its properties, event callbacks, and styling options.

```APIDOC
## Badge Component API

### Description
Provides details on the properties and event callbacks available for the Badge component, allowing for customization of its appearance and behavior.

### Properties / EventCallbacks

| Name | Type | Data Type | Default Value |
|---|---|---|---|
| Class | Property | string | |
| OnClick | Event | EventCallback | EventCallback |
| OnKeyDown | Event | EventCallback[KeyboardEventArgs] | EventCallback[KeyboardEventArgs] |
| OnKeyUp | Event | EventCallback[KeyboardEventArgs] | EventCallback[KeyboardEventArgs] |
| Style | Property | string | |
| Text | Property | string | |
| Tooltip | Property | string | |
| Type | Property | BadgeType | Default |
```

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

### Input OTP Component

Source: https://blazor.art/Tools/Simple-UI/InputOTPExample

Documentation for the Input OTP component, covering its properties and event callbacks.

```APIDOC
## Input OTP Component Documentation

### Description
This component allows users to input One-Time Passwords (OTP) with various configuration options for display and behavior.

### Properties / EventCallbacks

| Name | Type | Data Type | Default Value |
|---|---|---|---|
| DigitCount | Property | int | 6 |
| GroupBy | Property | int | 3 |
| HideInput | Property | bool | False |
| OnComplete | Event | EventCallback[string] | EventCallback[string] |
| Placeholder | Property | string |   |

### Examples

**Basic Usage (Default Settings)**
```csharp
<InputOTP />
```

**Customized OTP Input**
```csharp
<InputOTP DigitCount="4" GroupBy="2" HideInput="true" Placeholder="****" />
```

**Handling OTP Completion**
```csharp
<InputOTP OnComplete="(otp) => HandleOtpCompletion(otp)" />

@code {
    private void HandleOtpCompletion(string otp) {
        // Process the entered OTP
        Console.WriteLine($"Entered OTP: {otp}");
    }
}
```

### Notes
- `DigitCount`: Specifies the total number of digits for the OTP.
- `GroupBy`: Determines how digits are visually grouped (e.g., grouping by 3 means ***-***).
- `HideInput`: If true, the entered digits will be hidden (e.g., shown as ****).
- `OnComplete`: An event callback that is triggered when the user has successfully entered all digits.
```

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

### Pagination Component API

Source: https://blazor.art/Tools/Simple-UI/PaginationExample

API documentation for the Blazor.Art Pagination component, detailing its properties and event callbacks.

```APIDOC
## Pagination Component

### Description
Provides a customizable pagination component for Blazor applications.

### Properties / EventCallbacks

| Name | Type | Data Type | Default Value |
|---|---|---|---|
| ActiveType | Property | ButtonType | Outline |
| HidePageNumbers | Property | bool | False |
| NextText | Property | string | Next |
| OnPageChange | Event | EventCallback[int] | EventCallback[int] |
| PreviousText | Property | string | Previous |
| ShowFirstLast | Property | bool | False |
| Size | Property | ButtonSize | Regular |
| State | Property | PaginationState | |
| Type | Property | ButtonType | Ghost |

### Usage Examples

**Default Pagination:**
```csharp
<Pagination />
```

**Pagination with custom text and active type:**
```csharp
<Pagination PreviousText="Back" NextText="Forward" ActiveType="ButtonType.Primary" />
```

**Handling page changes:**
```csharp
<Pagination @onpagechange="HandlePageChange" />

@code {
    private void HandlePageChange(int pageNumber) {
        // Logic to handle page change, e.g., fetching data for the new page
        Console.WriteLine($"Page changed to: {pageNumber}");
    }
}
```
```

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

### Blazor Initialization Code (C#)

Source: https://blazor.art/Tools/Simple-UI

Demonstrates the initialization code required in a Blazor layout file (e.g., MainLayout.razor) to initialize the Sysinfocus simple/ui theme and enable certain component functionalities.

```C#
@inherits LayoutComponentBase @inject Initialization init
@Body
@code {
  protected override async Task OnAfterRenderAsync(bool firstRender) {
    // This initializes the theme for the components.
    // Then you can use init.ToggleTheme() to toggle between light and dark modes.
    if (firstRender) await init.InitializeTheme();
  }
}
```

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

### TextToSpeech Component API

Source: https://blazor.art/Tools/Simple-UI/TextToSpeechExample

Provides a comprehensive overview of the TextToSpeech component's properties, events, and methods.

```APIDOC
## TextToSpeech Component

### Description
Provides functionalities for text-to-speech conversion with various parameters and event callbacks.

### Properties / EventCallbacks
- **Continuous** (bool) - Default Value: False
- **InterimResults** (bool) - Default Value: False
- **Language** (string) - Default Value: en-US
- **MaxAlternatives** (int) - Default Value: 1
- **OnSpeechEnd** (EventCallback) - Event Callback
- **Pitch** (double) - Default Value: 0.9
- **Rate** (double) - Default Value: 0.9
- **Text** (string) - Default Value: 
- **VoiceID** (int) - Default Value: 0
- **Volume** (double) - Default Value: 1

### Methods
- **GetVoices** (Task) - Returns: Task
- **IsSpeaking** (Task) - Returns: Task
- **Pause** (Task) - Returns: Task
- **Resume** (Task) - Returns: Task
- **Speak** (Task) - Returns: Task
- **Stop** (Task) - Returns: Task
```