## Getting Started

### Minimal Setup
1. **Installation**:
   ```bash
   composer require robsontenorio/mary

For Tailwind CSS integration (default):

npm install -D daisyui

Add to tailwind.config.js:

plugins: [require("daisyui")],
daisyui: { themes: ["light", "dark"] }

Publish Assets (if not using default Tailwind setup):
```
php artisan mary:install
```
First Use Case:
```
<livewire:mary-button label="Click Me" />
```
Renders a pre-styled button with Livewire reactivity.

Key Starting Points

Documentation: mary-ui.com (official docs)
Discord: Community Support
Component Explorer: Browse component examples

Implementation Patterns

Core Workflows

1. Component Integration

Livewire Components:

<livewire:mary-input
    name="email"
    label="Email Address"
    type="email"
    :rules="['required', 'email']"
/>

Standalone DaisyUI:

<mary-card>
    <mary-card-header>Title</mary-card-header>
    <mary-card-body>Content</mary-card-body>
</mary-card>

2. Form Handling

Validation + Errors:

<livewire:mary-form>
    <mary-input name="username" :rules="['required']" />
    {{ $errors->mary('username') }} <!-- Auto-renders error messages -->
</livewire:mary-form>

Multi-Step Forms: Use mary-tabs with Livewire’s wire:model.live for real-time validation.

3. Data Tables

Sortable/Paginated:

<livewire:mary-table
    :items="$users"
    :columns="[
        ['label' => 'Name', 'property' => 'name'],
        ['label' => 'Email', 'property' => 'email', 'sortable' => true],
    ]"
/>

Expandable Rows:

<livewire:mary-table
    :items="$orders"
    expandable
    :expandable-content="fn($order) => view('orders.detail', ['order' => $order])"
/>

4. Modals/Drawers

Dynamic Content:

<mary-drawer wire:model="showDrawer">
    <mary-drawer-header>Settings</mary-drawer-header>
    <mary-drawer-body>
        <livewire:user-settings />
    </mary-drawer-body>
</mary-drawer>

5. Advanced Features

Spotlight (Search):

<livewire:mary-spotlight
    :items="$searchResults"
    property="name"
    wire:model="searchQuery"
/>

Calendar Integration:

<livewire:mary-calendar
    wire:model="selectedDate"
    :events="$events"
/>

Badge Component:

<mary-badge value="3" />
<!-- Now correctly handles value logic (fixed in 2.8.3) -->

Integration Tips

Tailwind Customization: Extend DaisyUI themes in tailwind.config.js:

daisyui: {
    themes: [
        {
            mytheme: {
                "primary": "#3b82f6",
                "secondary": "#10b981",
            }
        }
    ]
}

Livewire Hooks: Use wire:ignore for non-reactive elements:

<div wire:ignore>
    <mary-toast id="success-toast" />
</div>

Asset Optimization:

Exclude unused CSS:
```
php artisan mary:install --no-css
```

Lazy-load components with Alpine.js:

<div x-data="{ show: false }" @click.away="show = false">
    <button @click="show = !show">Toggle</button>
    <mary-dropdown x-show="show">...</mary-dropdown>
</div>

RTL Support:
- Improved in 2.8.3: Uses logical margin utilities (e.g., me-* instead of mr-*).
- Add dir="rtl" to <html> and ensure logical properties are used:
```
<mary-button class="me-4">  </mary-button>
```

Gotchas and Tips

Pitfalls

Livewire 4 Migration:
- Issue: Components like mary-calendar may need CDN updates (e.g., VanillaCalendarPro v3).
- Fix: Update CDN links in resources/views/components/mary/calendar.blade.php:
```
<script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.min.js"></script>
```
Currency Input:
- Issue: Blur events may trigger unexpected behavior (pre-v2.7.0).
- Fix: Use wire:model.live.debounce.500ms for smoother updates.
Table Sorting:
- Issue: sort-by-property conflicts with custom column names.
- Fix: Use sort-by="custom_method" and define the method in your Livewire component:
```
public function custom_method($query, $direction) {
    return $query->orderBy('custom_column', $direction);
}
```
Drawer Backdrop:
- Issue: Clicking outside doesn’t close the drawer.
- Fix: Add without-backdrop-close or handle wire:click.away manually.
Badge Component:
- Issue (pre-2.8.3): Incorrect value rendering logic.
- Fix: Update to 2.8.3 for corrected behavior. Ensure value prop is passed as a string:
```
<mary-badge :value="'3'" /> 
```
Choices.js (Select2 Alternative):
- Issue: Firefox compatibility (pre-v2.4.6).
- Fix: Ensure choices.js is loaded after Livewire’s Alpine.js.

Debugging Tips

Component Props: Use {{ dd($this->props) }} in Livewire components to inspect passed attributes.
Tailwind Conflicts:
- Symptom: Styles override DaisyUI classes.
- Fix: Use !important sparingly; prefer utility classes like !rounded-none.
Livewire Events:
- Issue: Component not updating.
- Fix: Check for missing wire:model or wire:key attributes.
Asset Loading:
- Symptom: CSS/JS not loading.
- Fix: Verify mary:install ran and assets are published to public/build.
RTL Debugging:
- Symptom: Margins/padding appear misaligned.
- Fix: Replace physical utilities (mr-*, ml-*) with logical ones (me-*, ms-*) in 2.8.3+.

Extension Points

Custom Components: Extend existing components by copying from resources/views/components/mary/ and modifying:

@props(['customProp' => 'default'])
<div x-data="{ open: false }">
    {{ $slot }}
    <div x-show="open" @click.away="open = false">
        {{ $customProp }}
    </div>
</div>

Theme Overrides: Override DaisyUI variables in tailwind.config.js:

theme: {
    extend: {
        colors: {
            primary: '#7dd3fc',
        }
    }
}

Alpine.js Integration: Use x-init for dynamic behavior:

<mary-collapse x-data="{ open: true }" x-init="setTimeout(() => open = false, 3000)">
    Content
</mary-collapse>

Localization: Override default labels (e.g., "Cancel") in your Livewire component:

public function mount() {
    $this->labels = [
        'cancel' => __('buttons.cancel'),
    ];
}

Testing: Use Livewire’s testing helpers

Mary Laravel Package