# TallStackUI: Dial

> TallStackUI is a TALL Stack (Tailwind CSS, Alpine.js, Laravel, Livewire)
> component library providing 65+ Blade components for building modern web interfaces.

A floating action button (FAB) / speed dial component that reveals a set of action items on click or hover. Supports fixed corner positioning, multiple sizes, color styles, and horizontal or vertical item layouts. The items animate in from the direction the dial expands (rising from a bottom corner, dropping from a top corner, or sliding sideways when horizontal) and the dial closes automatically when one of its items is clicked.

## Basic Usage

```blade
<x-dial>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="trash" label="Delete" />
    <x-dial.items icon="share" label="Share" />
</x-dial>
```

```blade
<x-dial icon="bars-3" position="bottom-left" color="green" horizontal>
    <x-dial.items icon="home" label="Home" href="/dashboard" />
    <x-dial.items icon="cog-6-tooth" label="Settings" href="/settings" />
</x-dial>
```

```blade
<x-dial icon="plus" position="top-right" style="outline" color="secondary" lg hover square>
    <x-dial.items icon="document-plus" label="New Document" square />
    <x-dial.items icon="folder-plus" label="New Folder" square />
</x-dial>
```

```blade
<x-dial>
    <x-dial.items icon="pencil" label="Edit" color="blue" />
    <x-dial.items icon="trash" label="Delete" color="red" style="light" />
    <x-dial.items icon="share" label="Share" color="green" style="outline" />
</x-dial>
```

```blade
<x-dial icon="bars-3" prevent-rotate>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="trash" label="Delete" />
</x-dial>
```

## Attributes

| Attribute      | Type         | Default        | Description                                                                 |
|----------------|--------------|----------------|-----------------------------------------------------------------------------|
| icon           | string\|null | 'plus'         | Heroicon name for the main dial button (rotates 45deg when open)            |
| square         | bool\|null   | false          | When true, uses rounded-lg instead of rounded-full for the button shape     |
| position       | string\|null | 'bottom-right' | Fixed screen position (top-left, top-right, bottom-left, bottom-right)      |
| color          | string\|null | 'primary'      | Color theme for the dial button                                             |
| style          | string\|null | 'solid'        | Color style variant (solid, light, outline)                                 |
| horizontal     | bool\|null   | false          | When true, arranges items horizontally instead of vertically                |
| hover          | bool\|null   | false          | When true, opens the dial on hover instead of only on click                 |
| withoutTooltip | bool\|null   | null           | When true, hides tooltip labels on child dial items                         |
| xs             | bool\|null   | null           | Extra-small size                                                            |
| sm             | bool\|null   | null           | Small size                                                                  |
| md             | bool\|null   | null           | Medium size (default)                                                       |
| lg             | bool\|null   | null           | Large size                                                                  |
| preventRotate  | bool\|null   | null           | When true, keeps the button icon static instead of rotating 45deg when open |

## Slots

| Slot      | Description                                               |
|-----------|-----------------------------------------------------------|
| (default) | Dial action items (typically `<x-dial.items>` components) |

## Validation Constraints

- The `position` must be one of: top-left, top-right, bottom-left, bottom-right.

## Soft Customization

Soft customization allows you to override default Tailwind CSS classes used by this component at runtime, either through a service provider or scoped per-instance.

### Customization

```php
TallStackUi::customize()
    ->dial()
    ->block('button.base', 'your-tailwind-classes');
```

### Available Blocks

| Block Name            | Purpose                                                         |
|-----------------------|-----------------------------------------------------------------|
| icon.base             | Icon transition styles                                          |
| icon.sizes.xs         | Extra-small icon dimensions                                     |
| icon.sizes.sm         | Small icon dimensions                                           |
| icon.sizes.md         | Medium icon dimensions                                          |
| icon.sizes.lg         | Large icon dimensions                                           |
| button.base           | Main dial button base styles (flex, shadow, focus ring, cursor) |
| button.sizes.xs       | Extra-small button dimensions                                   |
| button.sizes.sm       | Small button dimensions                                         |
| button.sizes.md       | Medium button dimensions                                        |
| button.sizes.lg       | Large button dimensions                                         |
| position.top-left     | Fixed top-left positioning                                      |
| position.top-right    | Fixed top-right positioning                                     |
| position.bottom-left  | Fixed bottom-left positioning                                   |
| position.bottom-right | Fixed bottom-right positioning                                  |
| items                 | Flex container for action items                                 |