The Separator component provides both horizontal and vertical dividers with optional loading indicators, color customization, and image integration. It's useful for separating content sections and can serve as a visual indicator for loading states.

<x-artisanpack-separator />

<x-artisanpack-separator />

<div class="flex items-center h-32">
    <div>Left content</div>
    <x-artisanpack-separator vertical class="mx-4" />
    <div>Right content</div>
</div>

<!-- Predefined colors -->
<x-artisanpack-separator color="primary" />
<x-artisanpack-separator color="secondary" />
<x-artisanpack-separator color="accent" />
<x-artisanpack-separator color="success" />
<x-artisanpack-separator color="warning" />
<x-artisanpack-separator color="error" />

<!-- Hex color -->
<x-artisanpack-separator color="#ff6b35" />

<!-- Tailwind class -->
<x-artisanpack-separator color="border-blue-500" />

<!-- Horizontal separator with centered image -->
<x-artisanpack-separator image="/path/to/icon.png" />

<!-- Vertical separator with centered image -->
<x-artisanpack-separator vertical image="/path/to/icon.png" />

<x-artisanpack-separator progress target="loadData" />

<!-- Button that triggers the loading state -->
<x-artisanpack-button wire:click="loadData">Load Data</x-artisanpack-button>

<!-- Separator with color, image, and progress -->
<x-artisanpack-separator 
    color="primary" 
    image="/path/to/logo.png" 
    progress 
    target="processData" 
/>

<x-artisanpack-card title="User Profile">
    <div>
        <h3>Personal Information</h3>
        <p>Name: John Doe</p>
        <p>Email: john@example.com</p>
    </div>
    
    <x-artisanpack-separator color="accent" />
    
    <div>
        <h3>Account Settings</h3>
        <p>Last login: Yesterday</p>
        <p>Two-factor authentication: Enabled</p>
    </div>
</x-artisanpack-card>

The color prop supports three types of values:

• primary - Primary theme color
• secondary - Secondary theme color
• accent - Accent theme color
• success - Success theme color
• warning - Warning theme color
• error - Error theme color

Any valid hex color code (e.g., #ff6b35, #3b82f6)

Any Tailwind border color class (e.g., border-blue-500, border-red-300)

The Separator component uses responsive design and adapts its styling based on orientation:

• h-[2px] - Height of the separator line
• border-t-[length:var(--border)] - Top border using theme variable
• my-5 - Vertical margin for spacing

• w-[2px] - Width of the separator line
• border-l-[length:var(--border)] - Left border using theme variable
• h-full - Full height of container

• Images are automatically centered within the separator
• Horizontal separators show lines on both sides of the image
• Vertical separators show lines above and below the image
• Images are sized to w-8 h-8 with object-contain for proper scaling

The progress indicator only appears when the progress prop is set to true. This differs from the previous Hr component which showed the indicator by default.

To use the loading feature:

1. Set the progress prop to true
2. Optionally set the target prop to a specific Livewire method
3. The separator will show a progress bar when the target method is running

The Separator component follows accessibility best practices:

• Uses appropriate semantic HTML structure
• Provides sufficient color contrast for visibility
• Includes visual feedback for loading states when enabled
• Maintains proper spacing for content separation
• Images include empty alt attributes as they are decorative

• Card - Content container that often uses separators
• Loading - Dedicated loading indicator component
• Progress - Standalone progress indicator