Getting Started

Minimal Setup

Installation:
```
composer require ilsyaa/lazyui
```
Publish the package assets (Blade components + Tailwind config) via:
```
php artisan vendor:publish --provider="Ilsyaa\LazyUI\LazyUIServiceProvider" --tag="lazyui-assets"
```
Add @lazyui directive to your resources/views/layouts/app.blade.php (or equivalent) to load the base styles.
First Component: Use the pre-built lazyui-card component in a Blade view:
```
<x-lazyui-card title="User Profile" icon="user">
    <p>Hello, {{ $user->name }}!</p>
</x-lazyui-card>
```
Verify the component renders with Tailwind styling (e.g., rounded corners, shadow, padding).

Livewire Integration: For Livewire components, extend the base LazyUIComponent:

use Ilsyaa\LazyUI\Components\LazyUIComponent;

class UserProfile extends LazyUIComponent {
    public $user;
    // ...
}

public function boot() {
    LazyUI::component('user-profile', UserProfile::class);
}

Implementation Patterns

Component Workflows

Blade Components:

Data Binding: Pass dynamic data via Blade attributes:

<x-lazyui-button type="primary" :loading="$isProcessing">
    Save Changes
</x-lazyui-button>

Slots: Use default/named slots for content:

<x-lazyui-modal>
    <x-slot name="title">Confirm Action</x-slot>
    <p>Are you sure?</p>
</x-lazyui-modal>

Livewire Components:
- State Management: Leverage Livewire’s reactivity with LazyUI’s props:
```
public $isOpen = false;
public $items = [];
```
- Event Handling: Emit events for parent components:
```
$this->emit('modalClosed');
```
- Form Integration: Use lazyui-form with Livewire validation:
```
<x-lazyui-form wire:submit.prevent="save">
    
</x-lazyui-form>
```

Customization:

Tailwind Classes: Override default styles via class attribute:

<x-lazyui-card class="bg-blue-500 text-white">
    Custom Styling
</x-lazyui-card>

Component Extensions: Create child components by extending base classes:
```
class CustomCard extends LazyUICard {
    public $footer = null;
}
```

Integration with Laravel Features:
- Auth: Use lazyui-auth components for login/register:
```
<x-lazyui-auth.login />
```
- Notifications: Trigger alerts via Livewire:
```
$this->dispatch('alert', type: 'success', message: 'Saved!');
```

Gotchas and Tips

Common Pitfalls

Asset Loading:
- Issue: Styles not applying after publishing assets.
- Fix: Ensure @lazyui directive is in the <head> of your layout. Clear cached views:
```
php artisan view:clear
```

Livewire Component Registration:

Issue: Custom Livewire components not found.

Fix: Register components in LazyUIServiceProvider after Livewire’s boot:

public function boot() {
    Livewire::component('custom-component', CustomComponent::class);
    LazyUI::component('custom-component', CustomComponent::class);
}

Tailwind Conflicts:
- Issue: LazyUI styles overridden by global Tailwind.
- Fix: Use !important sparingly. Prefer scoped classes:
```
<x-lazyui-button class="!bg-red-600"> 
```
State Persistence:
- Issue: Livewire component state resetting on page reload.
- Fix: Use persist() for critical data:
```
public function mount() {
    $this->persist('isOpen');
}
```

Debugging Tips

Inspect Components: Use browser dev tools to check if LazyUI’s base classes (e.g., lazyui-base) are loaded.
Livewire Logs: Enable Livewire logging in config/livewire.php:
```
'log' => env('LIVEWIRE_LOG', true),
```
Component Hierarchy: For nested components, verify parent-child relationships in the DOM.

Extension Points

Custom Components:
- Extend base classes (e.g., LazyUIComponent) to add shared logic.
- Example: Create a LazyUIDataTable by combining LazyUIComponent with a library like Tabler.
Theme Overrides:
- Modify resources/css/lazyui.css to override default styles globally.
- Use @layer directives for Tailwind 3+:
```
@layer components.lazyui-button {
    .lazyui-button {
        @apply bg-indigo-600;
    }
}
```
Dark Mode:
- LazyUI supports dark mode via Tailwind’s dark: classes. Ensure your layout includes:
```
<x-lazyui-dark-mode />
```
Localization:
- Override default labels (e.g., "Cancel") in config/lazyui.php:
```
'labels' => [
    'cancel' => __('buttons.cancel'),
],
```

Performance

Lazy Loading: For heavy components, use Livewire’s wire:ignore and lazy-load content:

<div wire:ignore>
    <x-lazyui-heavy-component wire:init="loadHeavyData" />
</div>

Asset Optimization: LazyUI’s Tailwind config is pre-optimized. Avoid @import in custom CSS to prevent bloat.

Configuration Quirks

Default Values: LazyUI components use null for optional props. Explicitly set defaults in Livewire:
```
public $size = 'md'; // Overrides default
```
Slot Fallbacks: Named slots without content may render empty. Provide defaults:
```
<x-slot name="footer" :default="__('buttons.save')" />
```


```markdown
## Additional Notes
- **Community**: Join the [LazyUI Discord](https://discord.gg/lazyui) for support.
- **Changelog**: Review `CHANGELOG.md` for breaking changes between versions (e.g., Livewire 3.x migration).
- **Testing**: Use `php artisan lazyui:test` to validate component rendering (if included in future updates).

Lazyui Laravel Package