### Alert Examples

Source: https://wireui.dev/components/alert

Examples demonstrating how to use the WireUI Alert component with different customizations for rounded corners, shadows, and icons.

```APIDOC
## Alert Examples

### Rounded Corners

Demonstrates different ways to apply rounded corners to the alert component.

```html
{{-- CSS: 'rounded-3xl' --}}
<x-alert title="Information Message!" info rounded="3xl" />

{{-- CSS: 'rounded-full' - You can use |rounded| too --}}
<x-alert title="Success Message!" positive rounded="full" />

{{-- Or Custom --}}
<x-alert title="Error Message!" negative rounded="rounded-[1.25rem]" />
```

### Shadows

Illustrates the usage of various shadow options available for the alert component.

```html
{{-- CSS: 'shadow-none' - You can use |shadowless| too --}}
<x-alert title="Success Message!" positive shadow="none" />

{{-- CSS: 'shadow-sm' --}}
<x-alert title="Error Message!" negative shadow="sm" />

{{-- CSS: 'shadow' - DEFAULT --}}
<x-alert title="Alert Message!" warning shadow="base" />

{{-- CSS: 'shadow-md' --}}
<x-alert title="Information Message!" info shadow="md" />

{{-- CSS: 'shadow-lg' --}}
<x-alert title="Success Message!" positive shadow="lg" />

{{-- CSS: 'shadow-xl' --}}
<x-alert title="Error Message!" negative shadow="xl" />

{{-- CSS: 'shadow-2xl' --}}
<x-alert title="Alert Message!" warning shadow="2xl" />

{{-- CSS: 'shadow-inner' --}}
<x-alert title="Information Message!" info shadow="inner" />
```

### Icons

Shows how to manage icons within the alert component, including default icons based on color, custom icons, and removing icons.

**Default Icons by Color:**
* **primary:** bell
* **secondary:** information-circle
* **positive:** check-circle
* **negative:** x-circle
* **warning:** exclamation-triangle
* **info:** information-circle

```html
{{-- This icon is the default for the warning color --}}
<x-alert title="Warning Color!" warning />

{{-- In this alert we changed the icon to one we liked --}}
<x-alert title="Warning Color!" icon="arrow-left-on-rectangle" warning />

{{-- In this alert we completely removed the icon --}}
<x-alert title="Warning Color!" iconless warning />
```
```

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

### WireUI Load Hook Example

Source: https://wireui.dev/actions/hooks

This hook executes a console log when WireUI is ready to use. It's a basic example of how to hook into the WireUI loading event.

```javascript
Wireui.hook('load', () => console.log('wireui is ready to use'))
```

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

### Wire UI Currency Component: Various Examples

Source: https://wireui.dev/components/currency

Presents a collection of examples showcasing different configurations of the Wire UI Currency component, including currency symbols, custom separators, precision settings, and no decimals.

```html
<x-currency
    label="Currency"
    placeholder="Currency"
    icon="currency-dollar"
    thousands="."
    decimal=","
    precision="4"
/>

<x-currency
    label="Currency no Decimals"
    placeholder="Currency"
    precision="0"
/>

<x-currency
    label="Currency"
    placeholder="Currency"
/>

<x-currency
    label="Currency"
    prefix="R$"
    thousands="."
    decimal=","
/>
```

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

### Install WireUI Heroicons Package

Source: https://wireui.dev/packages/heroicons

Installs the WireUI Heroicons package using Composer. This is the primary step to add the icon library to your project.

```bash
composer require wireui/heroicons
```

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

### Customize WireUI Configuration Settings

Source: https://wireui.dev/customize/components

Modify the config/wireui.php file to customize global settings and individual component aliases and classes. This example shows changing the component prefix, default styles, and aliasing specific components.

```php
1'prefix' => 'wireui-',
2
3'style' => [
4    'shadow' => Packs\Shadow::NONE,
5    'rounded' => Packs\Rounded::FULL,
6    'color' => Packs\Color::SECONDARY,
7],
8
9...
10
11'components' => Config::defaultComponents([
12    'button' => [
13        'alias' => 'new-button',
14    ],
15    'mini-button' => [
16        'class' => Components\Button\Mini::class,
17        'alias' => 'new-mini-button',
18    ],
19]),
```

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

### WireUI Dropdown Positioning Examples

Source: https://wireui.dev/components/dropdown

Illustrates various positioning options for the WireUI dropdown component, utilizing Floating UI for precise placement. The 'position' attribute accepts values like 'top', 'bottom', 'left', 'right', and their combinations with 'start' and 'end'.

```html
<x-dropdown icon="arrow-up" position="top">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-up-right" position="top-start">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-up-left" position="top-end">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-right" position="right">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-down-right" position="right-start">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-up-right" position="right-end">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-down" position="bottom">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-down-right" position="bottom-start">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-down-left" position="bottom-end">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-left" position="left">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-down-left" position="left-start">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="arrow-up-left" position="left-end">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>
```

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

### Publish WireUI Language and Config Files

Source: https://wireui.dev/getting-started/installation

These Artisan commands allow you to publish WireUI's language files and configuration files to your project. This enables customization of translations and settings.

```bash
php artisan vendor:publish --tag="wireui.lang"
php artisan vendor:publish --tag="wireui.config"
```

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

### Install WireUI Phosphor Icons Package

Source: https://wireui.dev/packages/phosphor-icons

Installs the WireUI Phosphor Icons package using Composer. This is the first step to integrating the icon library into your project.

```bash
composer require wireui/phosphoricons
```

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

### Create New Laravel Project

Source: https://wireui.dev/customize/contribution-guide

Command to create a new Laravel project using Composer. This is the initial step for setting up a development environment for contributing to WireUI.

```bash
composer create-project laravel/laravel wireui
```

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

### WireUi Select with Simple Options

Source: https://wireui.dev/components/select

Configures the select component using a simple array of string values. The label and value for each option are identical in this basic setup.

```html
<x-select
    label="Select Status"
    placeholder="Select one status"
    :options="['Active', 'Pending', 'Stuck', 'Done']"
/>
```

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

### WireUI Hooks: Load and Notification Examples

Source: https://wireui.dev/actions

Demonstrates how to use WireUI hooks to execute code when WireUI is ready or when notifications are loaded. The 'load' hook logs a message to the console, while 'notifications:load' displays a success notification.

```javascript
Wireui.hook('load', () => console.log('wireui is ready to use'))

Wireui.hook('notifications:load', () => {
    $wireui.notify({
        title: 'Profile saved!',
        description: 'Your profile was successfully saved',
        icon: 'success'
    })
})
```

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

### Using WireUI Icon Component with Heroicons

Source: https://wireui.dev/components/icon

Demonstrates how to render icons using the WireUI x-icon component. It shows examples for different icon styles like mini, solid, and outline, and how to specify them directly.

```blade
<x-icon name="home" class="w-5 h-5" />
<x-icon name="home" class="w-5 h-5" mini />
<x-icon name="home" class="w-5 h-5" solid />
<x-icon name="home" class="w-5 h-5" outline />
```

```blade
<x-heroicons::outline.user />
<x-heroicons::solid.user />
<x-heroicons::mini.solid.user class="w-5 h-5" />
```

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

### WireUI Custom Dialog Hook Example

Source: https://wireui.dev/actions/hooks

This is an example of a custom dialog hook. It serves as a placeholder for custom logic that can be executed when a custom dialog event is triggered.

```javascript
Wireui.hook('dialog:custom:load', () => {})
```

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

### Select with After Options Slot and Create User Button (PHP)

Source: https://wireui.dev/components/select

An example of using the 'afterOptions' slot to display a 'Create user' button when no options are found. This button allows users to initiate a user creation process based on their search input.

```php
<x-select
    label="Search a User"
    placeholder="Select some user"
    :async-data="route('api.users.index')"
    option-label="name"
    option-value="id"
    hide-empty-message
>
    <x-slot name="afterOptions" class="flex justify-center p-2" x-show="displayOptions.length === 0">
        <x-button
            x-on:click="close; $wireui.notify({ title: 'Not implemented yet', icon: 'info' })"
            primary flat full>
            <span x-html="`Create user <b>${search}</b>`"></span>
        </x-button>
    </x-slot>
</x-select>
```

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

### Datetime Picker Start Of Week

Source: https://wireui.dev/components/datetime-picker

Demonstrates how to set the starting day of the week for the Wire UI Datetime Picker. This affects the visual layout of the calendar displayed within the component.

```html
<x-datetime-picker
    wire:model.live="model7"
    label="Start Of Week"
    placeholder="Start Of Week"
    :start-of-week="1" 
/>
```

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

### WireUI Maskable Component: Simple Mask Example

Source: https://wireui.dev/components/maskable

Demonstrates a basic implementation of the WireUI Maskable component with a single, predefined mask for a phone number input.

```html
<x-maskable
    id="simple-mask"
    label="Maskable Input"
    mask="(###) ###-####"
    placeholder="Phone number"
/>
```

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

### WireUI Maskable Component: Multiple Mask Example

Source: https://wireui.dev/components/maskable

Illustrates how to apply multiple mask patterns to a single WireUI Maskable input component, allowing for different input formats.

```html
<x-maskable
    id="multiple-mask"
    label="Multiple Maskable Input"
    :mask="['(###) ###-####', '+# ### ###-####', '+## ## ####-####']"
    placeholder="Phone number"
/>
```

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

### WireUI Dialog Hook Example

Source: https://wireui.dev/actions/hooks

This hook displays a success dialog when the Dialog component is loaded. It showcases how to present a modal with a title, description, and icon.

```javascript
Wireui.hook('dialog:load', () => {
    $wireui.dialog({
        title: 'Profile saved!',
        description: 'Your profile was successfully saved',
        icon: 'success'
    })
})
```

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

### WireUI Mini Button Examples

Source: https://wireui.dev/components/button

Illustrates the usage of the mini-button component, showcasing its ability to display icons and labels with various styling options, including rounded corners and color schemes.

```html
<x-mini-button rounded icon="home" />
<x-mini-button squared primary icon="pencil" />
<x-mini-button secondary icon="clipboard" />
<x-mini-button rounded positive icon="check" />
<x-mini-button rounded negative icon="x-mark" />
<x-mini-button rounded warning icon="exclamation-triangle" />
<x-mini-button rounded info icon="information-circle" />
<x-mini-button rounded secondary label="A" />
<x-mini-button rounded positive label="B" />
<x-mini-button rounded negative label="C" />
<x-mini-button rounded primary label="+" />
```

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

### WireUI Hooks: Dialog and Custom Dialog Examples

Source: https://wireui.dev/actions

Shows how to trigger WireUI dialogs and custom dialogs using hooks. The 'dialog:load' hook displays a success dialog, and 'dialog:custom:load' provides a hook for custom dialog logic.

```javascript
Wireui.hook('dialog:load', () => {
    $wireui.dialog({
        title: 'Profile saved!',
        description: 'Your profile was successfully saved',
        icon: 'success'
    })
})

Wireui.hook('dialog:custom:load', () => {})
```

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

### Clone WireUI Repository

Source: https://wireui.dev/customize/contribution-guide

Command to clone the WireUI repository from GitHub. This step is crucial for having the WireUI source code available locally for development and contribution.

```bash
git clone git@github.com:wireui/wireui.git
```

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

### WireUI Maskable Component: Mask Anything Example

Source: https://wireui.dev/components/maskable

Shows an advanced usage of the WireUI Maskable component, utilizing a combination of different tokens to create a highly customizable input mask.

```html
<x-maskable
    id="mask-anything"
    label="Mask Anything"
    mask="##.SS.A.a-##"
    placeholder="12.aB.C.d-34"
/>
```

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

### Install WireUI AlpineJS Hold Directive (npm/yarn)

Source: https://wireui.dev/packages

Installs the AlpineJS Hold Directive package using either npm or yarn. This is the first step to integrate the directive into your project.

```bash
yarn add @wireui/alpinejs-hold-directive
or
npm i @wireui/alpinejs-hold-directive --save
```

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

### Buttons with State and Interaction Styling

Source: https://wireui.dev/components/button

Demonstrates how to apply different styles and colors to buttons based on their interaction states like hover, focus, and general interaction. Includes examples for both standard and mini buttons.

```html
<x-button label="Delete" right-icon="trash" interaction="negative" />

<x-button label="Save" right-icon="check" flat interaction:solid="positive" />

<x-button label="Cancel" right-icon="trash" outline hover="warning" focus:solid.gray />

<x-mini-button rounded icon="trash" flat gray interaction="negative" />

<x-mini-button rounded icon="plus" flat primary interaction:solid />

<x-mini-button rounded icon="bookmark" flat gray hover:outline.negative focus:solid.positive />
```

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

### WireUI Mini Badge Examples

Source: https://wireui.dev/components/badge

Showcases the 'mini-badge' component with various customization options including icons, rounding, and labels. Mini badges offer enhanced rounding flexibility compared to previous versions.

```html
<x-mini-badge icon="home" rounded />
<x-mini-badge primary icon="pencil" squared />
<x-mini-badge secondary icon="clipboard-document-list" />
<x-mini-badge positive icon="check" />
<x-mini-badge negative icon="x-mark" />
<x-mini-badge warning icon="exclamation-triangle" />
<x-mini-badge info icon="information-circle" />
<x-mini-badge dark icon="no-symbol" />
<x-mini-badge secondary label="A" />
<x-mini-badge positive label="B" />
<x-mini-badge negative label="C" />
<x-mini-badge primary label="+" />
```

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

### Enable Confirmation for Datetime Picker

Source: https://wireui.dev/components/datetime-picker

This example configures the datetime picker to require user confirmation before updating the model. The `requires-confirmation` attribute is added to the component.

```html
<x-datetime-picker
    wire:model.live="model12"
    label="Requires Confirmation"
    placeholder="Appointment Date"
    without-timezone
    requires-confirmation
/>
```

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

### WireUI Maskable Component: Create Custom Input (PHP)

Source: https://wireui.dev/components/maskable

Provides a PHP example of creating a custom maskable input component using WireUI. It demonstrates how to override the default mask behavior by defining the `getInputMask` method.

```php
namespace App\View\Components;

use WireUi\Components\TextField\Maskable;

class CustomMaskable extends Maskable
{
    protected function getInputMask(): array
    {
        return ['(##) ####-####', '(##) #####-####'];
    }
}
```

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

### WireUI Dropdown Width Examples

Source: https://wireui.dev/components/dropdown

Demonstrates how to set the width of a WireUI dropdown using predefined CSS classes or custom width values. The width attribute controls the visual size of the dropdown menu.

```html
<x-dropdown icon="bars-3" width="2xl">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>

<x-dropdown icon="bars-3" width="3xl">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>

<x-dropdown icon="bars-3" width="4xl">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>

<x-dropdown icon="bars-3" width="5xl">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>

<x-dropdown icon="bars-3" width="6xl">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>

<x-dropdown icon="bars-3" width="7xl">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>

<x-dropdown icon="bars-3" width="w-[17rem]">
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
    <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />
</x-dropdown>
```

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

### Configure Composer JSON for Local Package

Source: https://wireui.dev/customize/contribution-guide

JSON configuration to add to the composer.json file. This tells Composer to use the locally cloned WireUI package from a specific path, enabling development on the package itself.

```json
{
    "repositories": {
        "wireui/wireui": {
            "type": "path",
            "url": "../wireui"
        }
    }
}
```

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

### WireUI Card Shadow Examples (Blade)

Source: https://wireui.dev/components/card

Illustrates how to apply different shadow styles to the WireUI card component using the 'shadow' attribute. Supported values include 'none', 'sm', and 'base' (default), along with other Tailwind CSS shadow utility classes.

```blade
<x-card title="Lorem Ipsum is simply!" shadow="none">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
    Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
</x-card>

<x-card title="Lorem Ipsum is simply!" shadow="sm">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
    Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
</x-card>

<x-card title="Lorem Ipsum is simply!" shadow="base">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
    Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
</x-card>
```

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

### Avatar Image Examples

Source: https://wireui.dev/components/avatar

Demonstrates how to use the Avatar component to display images by providing a source URL. Supports various sizes (xs, sm, md, lg, xl) and colors (primary, secondary, positive, negative, warning, info).

```html
<x-avatar xs warning :src="Vite::docs('andre.jpeg')" />
<x-avatar sm primary :src="Vite::docs('fernando.jpeg')" />
<x-avatar md :src="Vite::docs('keithyellen.jpg')" />
<x-avatar lg :src="Vite::docs('joao-pedro.jpg')" />
<x-avatar xl :src="Vite::docs('pedro.jpg')" />
```

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

### Configure Tailwind CSS for WireUI

Source: https://wireui.dev/getting-started

These configurations integrate WireUI's styles and components with your Tailwind CSS setup. The configuration differs slightly between Tailwind v3 and v4.

```javascript
// tailwind.config.js
module.exports = {
    ... 
    presets: [
        ...
        require("./vendor/wireui/wireui/tailwind.config.js")
    ],
    content: [
        ...
        "./vendor/wireui/wireui/src/*.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/WireUi/**/*.php",
        "./vendor/wireui/wireui/src/Components/**/*.php",
    ],
    ...
}
```

```css
// app.css
@import '../../vendor/wireui/wireui/ts/global.css';
@source '../../vendor/wireui/wireui';
```

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

### Basic Select with Array Options (PHP)

Source: https://wireui.dev/components/select

Demonstrates how to use the x-select component with an array of options defined in PHP. Each option includes a name, id, and description.

```php
<x-select label="Order Status" placeholder="Select one status"
    :options="[
        ['name' => 'Active', 'id' => 1, 'description' => 'The status is active'],
        ['name' => 'Pending', 'id' => 2, 'description' => 'The status is pending'],
        ['name' => 'Stuck', 'id' => 3, 'description' => 'The status is stuck'],
        ['name' => 'Done', 'id' => 4, 'description' => 'The status is done'],
    ]" option-label="name" option-value="id"
/>
```

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

### Require WireUI Package

Source: https://wireui.dev/customize/contribution-guide

Command to require the WireUI package using Composer. After configuring the local repository, this command installs WireUI into the Laravel project, allowing for its usage and modification.

```bash
composer require wireui/wireui
```

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

### Update Tailwind Forms Version

Source: https://wireui.dev/getting-started/troubleshooting

Resolves the 'TypeError: require(...) is not a function' error by updating the Tailwind Forms package to version '^0.3.0'. This is a common fix for issues arising during Laravel Breeze installations.

```json
"devDependencies": {
    "@tailwindcss/forms": "^0.3.0",
    //..
}
```

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

### Select with User Options and Async Search (PHP)

Source: https://wireui.dev/components/select

Illustrates using custom user options with images and implementing an asynchronous search for users. The async-data property fetches users from a route, and a template defines how user data is displayed.

```php
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
    <x-select label="Select Relator" placeholder="Select relator">
        <x-select.user-option :src="Vite::docs('andre.jpeg')" label="André Luiz" value="1" />
        <x-select.user-option :src="Vite::docs('fernando.jpeg')" label="Fernando Gunther" value="2" />
        <x-select.user-option :src="Vite::docs('keithyellen.jpg')" label="Keithyellen Huhn" value="3" />
        <x-select.user-option :src="Vite::docs('joao-pedro.jpg')" label="João Pedro" value="4" />
        <x-select.user-option :src="Vite::docs('pedro.jpg')" label="Pedro Henrique" value="5" />
    </x-select>

    <x-select label="Search a User" placeholder="Select some user"
        :async-data="route('api.users.index')" :template="[
            'name' => 'user-option',
            'config' => ['src' => 'profile_image'],
        ]" option-label="name" option-value="id" option-description="email"
    />
</div>
```

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

### Install WireUI Breadcrumbs Package

Source: https://wireui.dev/packages/breadcrumbs

Installs the WireUI Breadcrumbs package using Composer. This is the first step to integrating breadcrumbs into your Laravel project.

```bash
composer require wireui/breadcrumbs
```

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

### Wire UI Dropdown: Basic Implementation

Source: https://wireui.dev/components/dropdown

Demonstrates the basic implementation of a Wire UI dropdown component. It shows how to create a dropdown with a default icon and how to customize the icon using the 'icon' attribute.

```html
<x-dropdown>
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>

<x-dropdown icon="bars-3">
    <x-dropdown.item label="Settings" />
    <x-dropdown.item label="My Profile" />
    <x-dropdown.item label="Logout" />
</x-dropdown>
```

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

### Publish WireUI Phosphor Icons Configuration and Views

Source: https://wireui.dev/packages/phosphor-icons

Publishes the configuration and view files for WireUI Phosphor Icons. This step is optional and allows for customization of the package's behavior and appearance.

```bash
php artisan vendor:publish --tag="wireui.phosphoricons.config"
php artisan vendor:publish --tag="wireui.phosphoricons.views"
```

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

### Datetime Picker - Basic Usage

Source: https://wireui.dev/components/datetime-picker

Demonstrates the basic usage of the datetime picker component with a label and placeholder.

```APIDOC
## Datetime Picker - Basic Usage

### Description
This example shows how to use the `x-datetime-picker` component with a label and placeholder.

### Method
N/A (This is a component usage example, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<x-datetime-picker
    wire:model.live="model7"
    label="Start Of Week"
    placeholder="Appointment Date"
    start-of-week="1"
    without-timezone
/>
```

### Response
#### Success Response (200)
N/A (Component rendering)

#### Response Example
N/A
```

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

### Configure Datetime Picker Start of Week

Source: https://wireui.dev/components/datetime-picker

This snippet demonstrates how to configure the datetime picker to set the start of the week. It uses the `x-datetime-picker` component with the `start-of-week` attribute set to '1' (Monday).

```html
<x-datetime-picker
    wire:model.live="model7"
    label="Start Of Week"
    placeholder="Appointment Date"
    start-of-week="1"
    without-timezone
/>
```

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

### WireUI Modal Card: Basic Usage and Event Handling

Source: https://wireui.dev/components/modal

Demonstrates how to create a simple modal with a card inside and a button to trigger its opening. It also shows how to define footer actions with cancel and agree buttons, including a wire:click action for the agree button.

```html
<x-button label="Open" x-on:click="$openModal('simpleModal')" primary />

<x-modal name="simpleModal">
    <x-card title="Consent Terms">
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
            leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
            with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>

        <x-slot name="footer" class="flex justify-end gap-x-4">
            <x-button flat label="Cancel" x-on:click="close" />

            <x-button primary label="I Agree" wire:click="agree" />
        </x-slot>
    </x-card>
</x-modal>
```

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

### Select with Slot Options (HTML)

Source: https://wireui.dev/components/select

Shows how to populate the x-select component using individual x-select.option tags within the default slot. This allows for more granular control over each option.

```html
<x-select label="Select Status" placeholder="Select one status">
    <x-select.option label="Pending" value="1" />
    <x-select.option label="In Progress" value="2" />
    <x-select.option label="Stuck" value="3" />
    <x-select.option label="Done" value="4" />
</x-select>
```

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

### WireUI Notification Hook Example

Source: https://wireui.dev/actions/hooks

This hook triggers a success notification after the Notification component is loaded. It demonstrates how to display a message with a title, description, and icon.

```javascript
Wireui.hook('notifications:load', () => {
    $wireui.notify({
        title: 'Profile saved!',
        description: 'Your profile was successfully saved',
        icon: 'success'
    })
})
```

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

### Input Simple Usage

Source: https://wireui.dev/components/input

Demonstrates the basic usage of the input component with a label.

```APIDOC
## POST /input/simple

### Description
This example shows how to use the input component with a label and placeholder.

### Method
GET

### Endpoint
/input/simple

### Request Example
```html
<x-input
    label="Name"
    placeholder="your name"
/>
```

### Response
#### Success Response (200)
- **html** (string) - The rendered HTML for the input component.
```

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

### Clear Laravel Cache

Source: https://wireui.dev/getting-started/troubleshooting

Clears Laravel's cache to apply configuration changes, such as the APP_URL update for HTTPS. This command is essential after modifying environment variables.

```bash
php artisan optimize:clear
```

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

### Configuring Async Data

Source: https://wireui.dev/components/select

Learn how to customize the async data configuration for the select component, including changing the HTTP method and adding custom parameters.

```APIDOC
## Customizing Async Data Configuration

### Description
This section explains how to personalize the `asyncData` configuration for the WireUi select component, allowing for custom API endpoints, HTTP methods, and parameters.

### Method
N/A (Configuration via component props)

### Endpoint
N/A

### Parameters
#### Request Body (for `asyncData` prop)
- **api** (string | null) - The API endpoint URL. Defaults to null.
- **method** (string) - The HTTP method to use for the request. Defaults to 'GET'.
- **params** (any) - Additional parameters to send with the request. Defaults to an empty array.
- **credentials** (RequestCredentials) - Specifies whether to include credentials (e.g., cookies, authorization headers) in the request. Defaults to undefined.
- **alwaysFetch** (boolean) - If true, the data will always be fetched, regardless of whether it's already loaded. Defaults to false.

### Request Example
```html
<x-select 
    label="Search a User"
    placeholder="Select some user"
    :async-data="{
        api: route('api.users.index'),
        method: 'POST',
        params: { foo: 'bar' },
        credentials: 'include'
    }"
    option-label="name"
    option-value="id"
/>
```

### Response
N/A (This describes configuration, not a direct API response)

### Additional Notes
- Query string parameters defined in the `route()` function will be merged with the `params` defined in `asyncData`.
- The `asyncData` configuration can be provided as an object or an array.
```

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

### Clear View Cache

Source: https://wireui.dev/customize/components

After modifying the WireUI configuration, clear the view cache to apply the changes. This command is recommended to be run whenever configuration changes are made.

```bash
php artisan view:clear
```

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

### Select Component Slots (HTML)

Source: https://wireui.dev/components/select

Shows how to use the 'beforeOptions' and 'afterOptions' slots within the x-select component for advanced customization of the dropdown content.

```html
<x-slot name="beforeOptions">
    // html code
</x-slot>

<x-slot name="afterOptions">
    // html code
</x-slot>
```

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

### Create Simple Card with WireUI

Source: https://wireui.dev/components/card

Demonstrates how to create a basic card component using WireUI's x-card tag. It shows how to include content and optionally set a title. The 'borderless' attribute can be used to remove default borders.

```html
<x-card>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
    Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
</x-card>

<x-card title="Lorem Ipsum is simply!">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
    Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
</x-card>

<x-card title="Lorem Ipsum is simply!" borderless>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui eget scelerisque dapibus.
    Quisque mattis dignissim cursus. Pellentesque sed arcu ac augue bibendum gravida.
</x-card>
```

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

### WireUI Number Input: With Options (min, max, step)

Source: https://wireui.dev/components/number

Shows how to configure the WireUI Number component using standard HTML number input attributes like 'min', 'max', and 'step'. This allows for precise control over the acceptable numerical range and increments.

```html
<x-number min="5" max="10" step="0.2" label="How many Burgers?" value="6" />
```

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

### Flat Buttons with Default and Color Options

Source: https://wireui.dev/components/button

Illustrates the use of flat buttons, which have a solid background color. This includes examples for default, black, white, and a variety of other color options.

```html
<div class="flex flex-wrap items-center justify-center gap-4 mb-4">
    <x-button flat label="Default" />
    <x-button flat black label="Black" />
    <x-button flat white label="White" />
</div>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6">
    <x-button flat primary label="Primary" />
    <x-button flat secondary label="Secondary" />
    <x-button flat positive label="Positive" />
    <x-button flat negative label="Negative" />
    <x-button flat warning label="Warning" />
    <x-button flat info label="Info" />
    <x-button flat slate label="Slate" />
    <x-button flat gray label="Gray" />
    <x-button flat zinc label="Zinc" />
    <x-button flat neutral label="Neutral" />
    <x-button flat stone label="Stone" />
    <x-button flat red label="Red" />
    <x-button flat yellow label="Yellow" />
    <x-button flat amber label="Amber" />
    <x-button flat orange label="Orange" />
    <x-button flat lime label="Lime" />
    <x-button flat green label="Green" />
    <x-button flat emerald label="Emerald" />
    <x-button flat teal label="Teal" />
    <x-button flat cyan label="Cyan" />
    <x-button flat sky label="Sky" />
    <x-button flat blue label="Blue" />
    <x-button flat indigo label="Indigo" />
    <x-button flat violet label="Violet" />
    <x-button flat purple label="Purple" />
    <x-button flat fuchsia label="Fuchsia" />
    <x-button flat pink label="Pink" />
    <x-button flat rose label="Rose" />
</div>
```

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

### Wire UI Input: With Corner Label

Source: https://wireui.dev/components/input

Illustrates the use of the 'corner' attribute to display a small piece of text, like an example or hint, in the corner of the input field.

```html
<x-input
    label="Name"
    placeholder="your name"
    corner="Ex: John"
/>
```

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

### Render WireUI Breadcrumbs Component

Source: https://wireui.dev/packages/breadcrumbs

Includes the WireUI breadcrumbs component in your layout file to display the breadcrumb trail. This assumes you have installed the necessary packages and configured breadcrumbs.

```html
<x-breadcrumbs />
```

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

### Disable Specific Months in Datetime Picker

Source: https://wireui.dev/components/datetime-picker

This example demonstrates disabling specific months in the datetime picker. The `:disabled-months` attribute accepts an array of month numbers (1-12).

```html
<x-datetime-picker
    wire:model.live="model10"
    label="Disabled Months"
    placeholder="Appointment Date"
    without-timezone
    :disabled-months="[3, 5]"
/>
```

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

### Publish WireUI Heroicons Assets

Source: https://wireui.dev/packages/heroicons

Publishes the configuration and view files for the WireUI Heroicons package. This step is optional and allows for customization.

```bash
php artisan vendor:publish --tag="wireui.heroicons.config"
php artisan vendor:publish --tag="wireui.heroicons.views"
```

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

### Input with Description

Source: https://wireui.dev/components/input

Shows how to add a description to the input field.

```APIDOC
## POST /input/description

### Description
This example demonstrates adding a description below the label for the input field.

### Method
GET

### Endpoint
/input/description

### Request Example
```html
<x-input
    label="Name"
    placeholder="your name"
    description="Inform your full name"
/>
```

### Response
#### Success Response (200)
- **html** (string) - The rendered HTML for the input component with a description.
```

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

### WireUI Badge Slot Customization

Source: https://wireui.dev/components/badge

Demonstrates the use of 'prepend' and 'append' slots for advanced customization of content on either side of the badge label. Includes examples with custom elements and icons.

```html
<x-badge flat primary label="Prepend">
    <x-slot name="prepend" class="relative flex items-center w-2 h-2">
        <span
            class="absolute inline-flex w-full h-full rounded-full opacity-75 bg-cyan-500 animate-ping"></span>

        <span class="relative inline-flex w-2 h-2 rounded-full bg-cyan-500"></span>
    </x-slot>
</x-badge>

<x-badge flat primary label="Append">
    <x-slot name="append" class="relative flex items-center w-2 h-2">
        <span
            class="absolute inline-flex w-full h-full rounded-full opacity-75 bg-cyan-500 animate-ping"></span>

        <span class="relative inline-flex w-2 h-2 rounded-full bg-cyan-500"></span>
    </x-slot>
</x-badge>

<x-badge flat red label="Laravel">
    <x-slot name="append" class="relative flex items-center w-2 h-2">
        <badge type="badge">
            <x-icon name="x-mark" class="w-4 h-4" />
        </badge>
    </x-slot>
</x-badge>
```

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

### Add WireUI Scripts to Blade Layout

Source: https://wireui.dev/getting-started/installation

Integrates WireUI's JavaScript and CSS assets into your main Blade layout file. This should be placed in the `<head>` section, typically before the Alpine.js script tag.

```html
<html>
<head>
    ...
    <wireui:scripts />
    <script src="//unpkg.com/alpinejs" defer></script>
</head>
</html>
```

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

### Publish WireUI Configuration for Icons

Source: https://wireui.dev/components/icon

This command publishes the WireUI configuration file, allowing you to customize default settings, such as the default icon variant.

```bash
php artisan vendor:publish --tag="wireui.config"
```

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

### Configure APP_URL for HTTPS in .env

Source: https://wireui.dev/getting-started/troubleshooting

Ensures assets are loaded via HTTPS by setting the correct APP_URL in the .env file. This is a crucial step for resolving issues where WireUI assets are loaded over HTTP.

```env
APP_URL=https://example.com
```

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

### WireUI Badge Size Options

Source: https://wireui.dev/components/badge

Demonstrates the three native size options for WireUI badges: 'sm' (small), 'md' (medium, default), and 'lg' (large). Each example includes an icon and a label.

```html
{{-- You can use |size="sm"| too - DEFAULT --}}
<x-badge icon="face-smile" secondary label="Secondary" />

<x-badge md icon="inbox-stack" positive label="Positive" />

<x-badge lg icon="power" negative label="Negative" />
```

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

### WireUi Select with Merged Async Data Parameters

Source: https://wireui.dev/components/select

Demonstrates how to merge query string parameters with asyncData parameters in the WireUi Select component. This allows for passing additional data or overriding default settings.

```html
<x-select ... :async-data="route('api.users.index', ['foo' => 'bar'])" />

OR

<x-select ... :async-data=[
    'api' => route('api.users.index'),
    'method' => 'POST', // default is GET
    'params' => ['ble' => 'baz'], // default is []
    'credentials' => 'include', // default is undefined
] />
```

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

### Wire UI Input: Simple Usage

Source: https://wireui.dev/components/input

Demonstrates the basic usage of the Wire UI Input component by providing a label. This is the most straightforward way to implement an input field.

```html
<x-input
    label="Name"
    placeholder="your name"
/>
```

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

### Disable Specific Dates in Datetime Picker

Source: https://wireui.dev/components/datetime-picker

This example shows how to disable specific dates in the datetime picker component. The `:disabled-dates` attribute is used, accepting an array of date strings in 'YYYY-MM-DD' format.

```html
<x-datetime-picker
    wire:model.live="model8"
    label="Disabled Dates"
    placeholder="Appointment Date"
    without-timezone
    :disabled-dates='["2021-05-21", "2021-05-20"]'
/>
```