repomix-output.xml

This file is a merged representation of a subset of the codebase, containing files not matching ignore patterns, combined into a single document by Repomix.

<file_summary>
This section contains a summary of this file.

<purpose>
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.
</purpose>

<file_format>
The content is organized as follows:
1. This summary section
2. Repository information
3. Directory structure
4. Repository files (if enabled)
5. Multiple file entries, each consisting of:
  - File path as an attribute
  - Full contents of the file
</file_format>

<usage_guidelines>
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.
</usage_guidelines>

<notes>
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
- Files matching these patterns are excluded: **/*.log, tmp/, .js, .html, .blade.php, .css, public/, vendor/, node_modules, venv/, logs/, electorn-sentinerl/
- Files matching patterns in .gitignore are excluded
- Files matching default ignore patterns are excluded
- Files are sorted by Git change count (files with more changes are at the bottom)
</notes>

</file_summary>

<directory_structure>
.github/
  ISSUE_TEMPLATE/
    bug.yml
    config.yml
  workflows/
    dependabot-auto-merge.yml
    fix-php-code-styling.yml
    publish.yml
    tests.yml
  CONTRIBUTING.md
  dependabot.yml
  FUNDING.yml
  SECURITY.md
config/
  laravilt-support.php
docs/
  index.md
  mcp-server.md
lang/
  ar/
    support.php
  en/
    support.php
resources/
  css/
    app.css
    laravilt-core.css
  js/
    components/
      ui/
        alert/
          Alert.vue
          AlertDescription.vue
          AlertTitle.vue
          index.ts
        avatar/
          Avatar.vue
          AvatarFallback.vue
          AvatarImage.vue
          index.ts
        badge/
          Badge.vue
          index.ts
        breadcrumb/
          Breadcrumb.vue
          BreadcrumbEllipsis.vue
          BreadcrumbItem.vue
          BreadcrumbLink.vue
          BreadcrumbList.vue
          BreadcrumbPage.vue
          BreadcrumbSeparator.vue
          index.ts
        button/
          Button.vue
          index.ts
        card/
          Card.vue
          CardAction.vue
          CardContent.vue
          CardDescription.vue
          CardFooter.vue
          CardHeader.vue
          CardTitle.vue
          index.ts
        checkbox/
          Checkbox.vue
          index.ts
        collapsible/
          Collapsible.vue
          CollapsibleContent.vue
          CollapsibleTrigger.vue
          index.ts
        dialog/
          Dialog.vue
          DialogClose.vue
          DialogContent.vue
          DialogDescription.vue
          DialogFooter.vue
          DialogHeader.vue
          DialogOverlay.vue
          DialogScrollContent.vue
          DialogTitle.vue
          DialogTrigger.vue
          index.ts
        dropdown-menu/
          DropdownMenu.vue
          DropdownMenuCheckboxItem.vue
          DropdownMenuContent.vue
          DropdownMenuGroup.vue
          DropdownMenuItem.vue
          DropdownMenuLabel.vue
          DropdownMenuRadioGroup.vue
          DropdownMenuRadioItem.vue
          DropdownMenuSeparator.vue
          DropdownMenuShortcut.vue
          DropdownMenuSub.vue
          DropdownMenuSubContent.vue
          DropdownMenuSubTrigger.vue
          DropdownMenuTrigger.vue
          index.ts
        input/
          index.ts
          Input.vue
        label/
          index.ts
          Label.vue
        navigation-menu/
          index.ts
          NavigationMenu.vue
          NavigationMenuContent.vue
          NavigationMenuIndicator.vue
          NavigationMenuItem.vue
          NavigationMenuLink.vue
          NavigationMenuList.vue
          NavigationMenuTrigger.vue
          NavigationMenuViewport.vue
        pin-input/
          index.ts
          PinInput.vue
          PinInputGroup.vue
          PinInputSeparator.vue
          PinInputSlot.vue
        popover/
          index.ts
          Popover.vue
          PopoverContent.vue
          PopoverTrigger.vue
        radio-group/
          index.ts
          RadioGroup.vue
          RadioGroupItem.vue
        separator/
          index.ts
          Separator.vue
        sheet/
          index.ts
          Sheet.vue
          SheetClose.vue
          SheetContent.vue
          SheetDescription.vue
          SheetFooter.vue
          SheetHeader.vue
          SheetOverlay.vue
          SheetTitle.vue
          SheetTrigger.vue
        sidebar/
          index.ts
          Sidebar.vue
          SidebarContent.vue
          SidebarFooter.vue
          SidebarGroup.vue
          SidebarGroupAction.vue
          SidebarGroupContent.vue
          SidebarGroupLabel.vue
          SidebarHeader.vue
          SidebarInput.vue
          SidebarInset.vue
          SidebarMenu.vue
          SidebarMenuAction.vue
          SidebarMenuBadge.vue
          SidebarMenuButton.vue
          SidebarMenuButtonChild.vue
          SidebarMenuItem.vue
          SidebarMenuSkeleton.vue
          SidebarMenuSub.vue
          SidebarMenuSubButton.vue
          SidebarMenuSubItem.vue
          SidebarProvider.vue
          SidebarRail.vue
          SidebarSeparator.vue
          SidebarTrigger.vue
          utils.ts
        skeleton/
          index.ts
          Skeleton.vue
        spinner/
          index.ts
          Spinner.vue
        switch/
          index.ts
          Switch.vue
        tabs/
          index.ts
          Tabs.vue
          TabsContent.vue
          TabsList.vue
          TabsTrigger.vue
        textarea/
          index.ts
          Textarea.vue
        tooltip/
          index.ts
          Tooltip.vue
          TooltipContent.vue
          TooltipProvider.vue
          TooltipTrigger.vue
        index.ts
        Tabs.vue
        TabsContent.vue
        TabsList.vue
        TabsTrigger.vue
      ComponentRenderer.vue
      Link.vue
      Modal.vue
      Render.vue
      ServerError.vue
    composables/
      index.ts
      useLocalization.ts
    core/
      Laravilt.js
      LaraviltApp.vue
      LaraviltPlugin.js
      LaraviltProgress.js
    lib/
      utils.ts
    mixins/
      component-mixin.js
    utils/
      event-bus.js
      navigate.js
      serializer.js
    laravilt-core.js
  lang/
    ar/
      support.php
    en/
      support.php
  views/
    laravilt-core/
      components/
        component.blade.php
        link.blade.php
        modal.blade.php
        vue-component.blade.php
      app.blade.php
src/
  Colors/
    Color.php
  Commands/
    InstallSupportCommand.php
    MakeComponentCommand.php
  Concerns/
    CanBeDisabled.php
    CanBeReadonly.php
    CanBeRequired.php
    EvaluatesClosures.php
    HasColumnSpan.php
    HasHelperText.php
    HasId.php
    HasLabel.php
    HasPlaceholder.php
    HasVisibility.php
    InteractsWithState.php
  Contracts/
    Buildable.php
    FlutterSerializable.php
    HasLabel.php
    HasState.php
    InertiaSerializable.php
    Serializable.php
  Enums/
    ImageSize.php
  Facades/
    Laravilt.php
  LaraviltCore/
    Blade/
      Components/
        Component.php
        Link.php
        Modal.php
        VueComponent.php
    Bridge/
      ComponentSerializer.php
      RequestHandler.php
    Http/
      Controllers/
        LaraviltController.php
      Middleware/
        LaraviltMiddleware.php
    LaraviltCore.php
    LaraviltServiceProvider.php
  Mcp/
    Tools/
      GenerateComponentTool.php
      SearchDocsTool.php
    LaraviltSupportServer.php
  Utilities/
    Get.php
    Set.php
    Translator.php
  Component.php
  SupportServiceProvider.php
tests/
  Feature/
    DebugTest.php
  Unit/
    Concerns/
      CanBeDisabledTest.php
      CanBeReadonlyTest.php
      CanBeRequiredTest.php
      EvaluatesClosuresTest.php
      HasVisibilityTest.php
      InteractsWithStateTest.php
    ComponentTest.php
  views/
    test-view.blade.php
  Pest.php
  TestCase.php
.gitignore
.npmignore
.npmrc
CHANGELOG.md
CODE_OF_CONDUCT.md
composer.json
LICENSE.md
package.json
phpstan.neon
phpunit.xml
pint.json
README.md
testbench.yaml
vite.config.ts
vite.plugin.js
</directory_structure>

<files>
This section contains the contents of the repository's files.

<file path=".github/ISSUE_TEMPLATE/bug.yml">
name: Bug Report
description: Report a bug
title: "[Bug]: "
labels: ["bug"]
body:
  - type: markdown
    attributes:
      value: |
        Thanks for taking the time to fill out this bug report!
  - type: textarea
    id: description
    attributes:
      label: Description
      description: A clear and concise description of the bug
    validations:
      required: true
  - type: textarea
    id: steps
    attributes:
      label: Steps to Reproduce
      description: Steps to reproduce the behavior
      placeholder: |
        1. Go to '...'
        2. Click on '....'
        3. See error
    validations:
      required: true
  - type: textarea
    id: expected
    attributes:
      label: Expected Behavior
      description: What you expected to happen
    validations:
      required: true
  - type: textarea
    id: actual
    attributes:
      label: Actual Behavior
      description: What actually happened
    validations:
      required: true
  - type: input
    id: version
    attributes:
      label: Package Version
      description: What version of the package are you using?
    validations:
      required: true
  - type: input
    id: php-version
    attributes:
      label: PHP Version
      description: What version of PHP are you using?
    validations:
      required: true
  - type: input
    id: laravel-version
    attributes:
      label: Laravel Version
      description: What version of Laravel are you using?
    validations:
      required: true
</file>

<file path=".github/ISSUE_TEMPLATE/config.yml">
blank_issues_enabled: false
contact_links:
  - name: Ask a question
    url: https://github.com/laravilt/support/discussions/new?category=q-a
    about: Ask the community for help
  - name: Request a feature
    url: https://github.com/laravilt/support/discussions/new?category=ideas
    about: Share ideas for new features
</file>

<file path=".github/workflows/dependabot-auto-merge.yml">
name: Dependabot Auto-Merge

on: [push, pull_request]

permissions:
  pull-requests: write
  contents: write

jobs:
  dependabot:
    runs-on: ubuntu-latest
    if: ${{ github.actor == 'dependabot[bot]' }}
    steps:
      - name: Dependabot metadata
        id: metadata
        uses: dependabot/fetch-metadata@v2
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"

      - name: Auto-merge Dependabot PRs for semver-minor updates
        if: ${{steps.metadata.outputs.update-type == 'version-update:semver-minor'}}
        run: gh pr merge --auto --merge "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

      - name: Auto-merge Dependabot PRs for semver-patch updates
        if: ${{steps.metadata.outputs.update-type == 'version-update:semver-patch'}}
        run: gh pr merge --auto --merge "$PR_URL"
        env:
          PR_URL: ${{github.event.pull_request.html_url}}
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
</file>

<file path=".github/CONTRIBUTING.md">
# Contributing to Support

Thank you for considering contributing to Support!

## Pull Requests

1. Fork the repository
2. Create a new branch for your feature
3. Write tests for your changes
4. Ensure all tests pass
5. Submit a pull request

## Coding Standards

- Follow PSR-12 coding standards
- Run `composer format` before committing
- Write tests for new features
- Ensure PHPStan passes with level 5

## Running Tests

```bash
composer test
```

## Code Style

```bash
composer format
```

## Static Analysis

```bash
composer analyse
```
</file>

<file path=".github/dependabot.yml">
version: 2
updates:
  - package-ecosystem: "composer"
    directory: "/"
    schedule:
      interval: "weekly"
    open-pull-requests-limit: 10

  - package-ecosystem: "github-actions"
    directory: "/"
    schedule:
      interval: "weekly"
</file>

<file path=".github/FUNDING.yml">
github: fadymondy
</file>

<file path=".github/SECURITY.md">
# Security Policy

## Reporting a Vulnerability

If you discover a security vulnerability within Support, please send an email to info@3x1.io. All security vulnerabilities will be promptly addressed.

Please do not publicly disclose the issue until it has been addressed by the team.
</file>

<file path="config/laravilt-support.php">
<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Plugin Settings
    |--------------------------------------------------------------------------
    |
    | Configure your plugin settings here.
    |
    */

    'enabled' => env('LARAVILT_SUPPORT_ENABLED', true),

    // Add your configuration options here
];
</file>

<file path="docs/index.md">
# Laravilt Support Documentation

Foundation package providing base components, utilities, and contracts for all Laravilt packages.

## Table of Contents

1. [Getting Started](#getting-started)
2. [Architecture](#architecture)
3. [Base Component](#base-component)
4. [Concerns](#concerns)
5. [Utilities](#utilities)
6. [Contracts](#contracts)
7. [API Reference](#api-reference)
8. [MCP Server Integration](mcp-server.md)

## Overview

Laravilt Support is the foundation package that provides:

- **Base Component Class**: Foundation for all UI components
- **Concerns (Traits)**: Reusable component behaviors
- **Utilities**: Helper classes for common operations
- **Contracts**: Interfaces for consistent implementations
- **Laravilt Core**: Central configuration and state management
- **Serialization**: Multi-platform data serialization (Laravilt, API, Flutter)

## Key Features

### 🏗️ Base Component
- Factory pattern via `make()`
- Multi-platform serialization
- RTL/LTR support
- Theme support
- Visibility control
- State management

### 🎨 Concerns (Traits)
- `CanBeDisabled`: Disable components
- `CanBeHidden`: Hide components conditionally
- `CanBeReadonly`: Make components readonly
- `CanBeRequired`: Mark components as required
- `EvaluatesClosures`: Evaluate closures with context
- `HasColumnSpan`: Grid column spanning
- `HasHelperText`: Helper text support
- `HasId`: Unique identifiers
- `HasLabel`: Labels and descriptions
- `HasPlaceholder`: Placeholder text
- `HasState`: Component state management
- `HasVisibility`: Conditional visibility
- `InteractsWithState`: State interaction utilities

### 🛠️ Utilities
- **Get**: Retrieve field values from state
- **Set**: Update field values in state
- **Str**: String manipulation helpers
- **Arr**: Array manipulation helpers

### 📝 Contracts
- `Buildable`: Components that can be built
- `Serializable`: Components that can be serialized
- `InertiaSerializable`: Components for Inertia.js
- `HasSchema`: Components with nested schemas

## System Requirements

- PHP 8.3+
- Laravel 12+

## Installation

```bash
composer require laravilt/support
```

The service provider is auto-discovered and will register automatically.

## Base Component

All Laravilt components extend the base `Component` class:

```php
use Laravilt\Support\Component;

class CustomField extends Component
{
    protected string $view = 'laravilt-custom::field';

    protected function setUp(): void
    {
        parent::setUp();
        // Initialize component here
    }

    public function toLaraviltProps(): array
    {
        return array_merge(parent::toLaraviltProps(), [
            'customProperty' => $this->getCustomProperty(),
        ]);
    }
}
```

### Creating Components

```php
$component = CustomField::make('field_name')
    ->label('Field Label')
    ->placeholder('Enter value')
    ->required()
    ->helperText('This is a helpful hint')
    ->disabled(false)
    ->visible(true);
```

## Concerns (Traits)

### CanBeDisabled

```php
use Laravilt\Support\Concerns\CanBeDisabled;

class CustomComponent extends Component
{
    use CanBeDisabled;
}

// Usage
$component->disabled(true);
$component->disabled(fn ($record) => $record->is_locked);
```

### CanBeHidden

```php
use Laravilt\Support\Concerns\CanBeHidden;

class CustomComponent extends Component
{
    use CanBeHidden;
}

// Usage
$component->hidden(true);
$component->hidden(fn ($record) => $record->is_archived);
```

### HasVisibility

```php
use Laravilt\Support\Concerns\HasVisibility;

class CustomComponent extends Component
{
    use HasVisibility;
}

// Usage
$component->visible(true);
$component->visible(fn (Get $get) => $get('show_advanced') === true);
```

### EvaluatesClosures

```php
use Laravilt\Support\Concerns\EvaluatesClosures;

class CustomComponent extends Component
{
    use EvaluatesClosures;

    public function process($value)
    {
        // Evaluates closures with automatic dependency injection
        return $this->evaluate($value, [
            'record' => $this->getRecord(),
            'data' => $this->getData(),
        ]);
    }
}
```

### HasColumnSpan

```php
use Laravilt\Support\Concerns\HasColumnSpan;

class CustomComponent extends Component
{
    use HasColumnSpan;
}

// Usage
$component->columnSpan(2); // Span 2 columns
$component->columnSpan('full'); // Full width
$component->columnSpan([
    'default' => 1,
    'sm' => 2,
    'lg' => 3,
]); // Responsive
```

### HasState

```php
use Laravilt\Support\Concerns\HasState;

class CustomComponent extends Component
{
    use HasState;
}

// Usage
$component->default('default value');
$component->afterStateUpdated(function ($value, Set $set) {
    $set('related_field', $value * 2);
});
$component->live(); // Make field reactive
```

## Utilities

### Get Utility

Retrieve field values from state:

```php
use Laravilt\Support\Utilities\Get;

$component->visible(fn (Get $get) => {
    return $get('country') === 'US';
});

// Get nested values
$get('address.city');

// Get with default
$get('optional_field', 'default');
```

### Set Utility

Update field values in state:

```php
use Laravilt\Support\Utilities\Set;

$component->afterStateUpdated(function ($value, Set $set) {
    // Set single value
    $set('related_field', $value * 2);

    // Set nested value
    $set('address.city', 'New York');

    // Set multiple values
    $set([
        'field1' => 'value1',
        'field2' => 'value2',
    ]);
});
```

### Evaluation Context

Components support evaluation context for dynamic behavior:

```php
use Laravilt\Support\Utilities\Get;
use Laravilt\Support\Utilities\Set;

$component
    ->visible(fn (Get $get) => $get('show_field') === true)
    ->default(fn (Get $get) => $get('other_field') * 2)
    ->afterStateUpdated(function ($value, Set $set, Get $get) {
        if ($value > 100) {
            $set('warning', 'Value is high');
        }
    });
```

## Serialization

### Laravilt Props (Inertia)

```php
$component->toLaraviltProps();
```

Returns data formatted for Laravilt/Inertia.js Vue components.

### API Serialization

```php
$component->toApiResponse();
```

Returns data formatted for REST APIs.

### Flutter Serialization

```php
$component->toFlutterProps();
```

Returns data formatted for Flutter mobile apps.

## Contracts

### Buildable

```php
interface Buildable
{
    public static function make(string $name): static;
}
```

### Serializable

```php
interface Serializable
{
    public function toLaraviltProps(): array;
    public function toApiResponse(): array;
    public function toFlutterProps(): array;
}
```

### InertiaSerializable

```php
interface InertiaSerializable
{
    public function toInertiaProps(): array;
}
```

### HasSchema

```php
interface HasSchema
{
    public function schema(array $components): static;
    public function getSchema(): array;
}
```

## Creating Custom Components

### Step 1: Create Component Class

```php
<?php

namespace App\Forms\Components;

use Laravilt\Support\Component;
use Laravilt\Support\Concerns\CanBeDisabled;
use Laravilt\Support\Concerns\CanBeRequired;
use Laravilt\Support\Concerns\HasLabel;
use Laravilt\Support\Concerns\HasState;

class RatingInput extends Component
{
    use CanBeDisabled;
    use CanBeRequired;
    use HasLabel;
    use HasState;

    protected string $view = 'forms.components.rating-input';

    protected int $maxRating = 5;
    protected ?string $icon = 'star';
    protected ?string $color = 'warning';

    public function maxRating(int $max): static
    {
        $this->maxRating = $max;
        return $this;
    }

    public function icon(string $icon): static
    {
        $this->icon = $icon;
        return $this;
    }

    public function color(string $color): static
    {
        $this->color = $color;
        return $this;
    }

    public function toLaraviltProps(): array
    {
        return array_merge(parent::toLaraviltProps(), [
            'maxRating' => $this->maxRating,
            'icon' => $this->icon,
            'color' => $this->color,
        ]);
    }
}
```

### Step 2: Use Custom Component

```php
use App\Forms\Components\RatingInput;

RatingInput::make('rating')
    ->label('Rate this product')
    ->maxRating(5)
    ->icon('star')
    ->color('warning')
    ->required();
```

## Generator Command

```bash
# Generate a custom component
php artisan make:component RatingInput

# Force overwrite existing file
php artisan make:component RatingInput --force
```

## Best Practices

1. **Extend Base Component**: Always extend `Laravilt\Support\Component`
2. **Use Concerns**: Leverage existing concerns instead of duplicating code
3. **Serialize Properly**: Implement `toLaraviltProps()` for frontend integration
4. **Evaluate Closures**: Use `evaluate()` for dynamic values
5. **Type Hints**: Use proper type hints for better IDE support
6. **Document Methods**: Add docblocks for custom methods
7. **Test Components**: Write tests for custom components

## Advanced Examples

### Conditional Visibility

```php
use Laravilt\Support\Utilities\Get;

TextInput::make('state')
    ->visible(fn (Get $get) => $get('country') === 'US')
    ->required(fn (Get $get) => $get('country') === 'US');
```

### Dependent Fields

```php
use Laravilt\Support\Utilities\Get;
use Laravilt\Support\Utilities\Set;

Select::make('country')
    ->options([...])
    ->afterStateUpdated(function ($value, Set $set) {
        $set('state', null); // Reset state when country changes
    })
    ->live();

Select::make('state')
    ->options(fn (Get $get) =>
        $get('country') === 'US'
            ? ['CA' => 'California', 'NY' => 'New York']
            : []
    );
```

### Complex State Management

```php
NumberField::make('quantity')
    ->default(1)
    ->afterStateUpdated(function ($value, Set $set, Get $get) {
        $price = $get('price');
        $set('subtotal', $price * $value);

        $tax = $get('tax_rate') / 100;
        $subtotal = $get('subtotal');
        $set('total', $subtotal + ($subtotal * $tax));
    })
    ->live();
```

## Support

- GitHub Issues: github.com/laravilt/support
- Documentation: docs.laravilt.com
- Discord: discord.laravilt.com
</file>

<file path="docs/mcp-server.md">
# MCP Server Integration

The Laravilt Support package can be integrated with MCP (Model Context Protocol) server for AI agent interaction.

## Available Generator Command

### make:component
Generate a custom component class.

**Usage:**
```bash
php artisan make:component RatingInput
php artisan make:component Forms/RatingInput
php artisan make:component RatingInput --force
```

**Arguments:**
- `name` (string, required): Component class name (StudlyCase)

**Options:**
- `--force`: Overwrite existing file

**Generated Structure:**
```php
<?php

namespace App\Components;

use Laravilt\Support\Component;
use Laravilt\Support\Concerns\CanBeDisabled;
use Laravilt\Support\Concerns\CanBeRequired;
use Laravilt\Support\Concerns\HasLabel;
use Laravilt\Support\Concerns\HasState;

class RatingInput extends Component
{
    use CanBeDisabled;
    use CanBeRequired;
    use HasLabel;
    use HasState;

    protected string $view = 'components.rating-input';

    protected function setUp(): void
    {
        parent::setUp();
        // Initialize your component here
    }

    public function toLaraviltProps(): array
    {
        return array_merge(parent::toLaraviltProps(), [
            // Add your component properties here
        ]);
    }
}
```

## Available Concerns (Traits)

For MCP tools to provide concern information:

- **CanBeDisabled**: Add disabled state to components
- **CanBeHidden**: Add hidden state to components
- **CanBeReadonly**: Add readonly state to components
- **CanBeRequired**: Add required state to components
- **EvaluatesClosures**: Evaluate closures with dependency injection
- **HasColumnSpan**: Grid column spanning support
- **HasHelperText**: Helper text support
- **HasId**: Unique identifier support
- **HasLabel**: Label and description support
- **HasPlaceholder**: Placeholder text support
- **HasState**: Component state management
- **HasVisibility**: Conditional visibility support
- **InteractsWithState**: State interaction utilities

## Available Utilities

For MCP tools to provide utility information:

- **Get**: Retrieve field values from component state
- **Set**: Update field values in component state
- **Str**: String manipulation helpers
- **Arr**: Array manipulation helpers

## Available Contracts

For MCP tools to provide contract information:

- **Buildable**: Interface for components with factory pattern
- **Serializable**: Interface for multi-platform serialization
- **InertiaSerializable**: Interface for Inertia.js serialization
- **HasSchema**: Interface for components with nested schemas

## Integration Example

MCP server tools should provide:

1. **list-components** - List all custom component classes
2. **component-info** - Get details about a specific component
3. **generate-component** - Generate a new custom component
4. **list-concerns** - List all available concerns (traits)
5. **list-utilities** - List all available utility classes
6. **list-contracts** - List all available contracts (interfaces)

## Security

The MCP server runs with the same permissions as your Laravel application. Ensure:
- Proper file permissions on the app/Components directory
- Secure configuration of the MCP server
- Limited access to the MCP configuration file
</file>

<file path="resources/css/laravilt-core.css">
/**
 * Laravilt Core CSS
 *
 * Base styles for Laravilt components and layout system.
 */

/* Reset & Base */
* {
    box-sizing: border-box;
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* Theme Support */
.dark {
    color-scheme: dark;
}

.light {
    color-scheme: light;
}

/* Laravilt Component Container */
[data-laravilt-component] {
    display: block;
}

/* Laravilt Link */
[data-laravilt-link] {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

[data-laravilt-link]:hover {
    opacity: 0.8;
}

/* Loading State */
.laravilt-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Transitions */
.laravilt-fade-enter-active,
.laravilt-fade-leave-active {
    transition: opacity 0.3s;
}

.laravilt-fade-enter-from,
.laravilt-fade-leave-to {
    opacity: 0;
}

/* Accessibility */
.laravilt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
</file>

<file path="resources/js/components/ui/alert/Alert.vue">
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import type { AlertVariants } from "."
import { cn } from "@/lib/utils"
import { alertVariants } from "."

const props = defineProps<{
  class?: HTMLAttributes["class"]
  variant?: AlertVariants["variant"]
}>()
</script>

<template>
  <div
    data-slot="alert"
    :class="cn(alertVariants({ variant }), props.class)"
    role="alert"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/alert/AlertDescription.vue">
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="alert-description"
    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/alert/AlertTitle.vue">
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="alert-title"
    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/alert/index.ts">
import type { VariantProps } from "class-variance-authority"
import { cva } from "class-variance-authority"

export { default as Alert } from "./Alert.vue"
export { default as AlertDescription } from "./AlertDescription.vue"
export { default as AlertTitle } from "./AlertTitle.vue"

export const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export type AlertVariants = VariantProps<typeof alertVariants>
</file>

<file path="resources/js/components/ui/avatar/Avatar.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { AvatarRoot } from 'reka-ui'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <AvatarRoot
    data-slot="avatar"
    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
  >
    <slot />
  </AvatarRoot>
</template>
</file>

<file path="resources/js/components/ui/avatar/AvatarFallback.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <AvatarFallback
    data-slot="avatar-fallback"
    v-bind="delegatedProps"
    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
  >
    <slot />
  </AvatarFallback>
</template>
</file>

<file path="resources/js/components/ui/avatar/AvatarImage.vue">
<script setup lang="ts">
import type { AvatarImageProps } from 'reka-ui'
import { AvatarImage } from 'reka-ui'

const props = defineProps<AvatarImageProps>()
</script>

<template>
  <AvatarImage
    data-slot="avatar-image"
    v-bind="props"
    class="aspect-square size-full"
  >
    <slot />
  </AvatarImage>
</template>
</file>

<file path="resources/js/components/ui/avatar/index.ts">
export { default as Avatar } from './Avatar.vue'
export { default as AvatarFallback } from './AvatarFallback.vue'
export { default as AvatarImage } from './AvatarImage.vue'
</file>

<file path="resources/js/components/ui/badge/Badge.vue">
<script setup lang="ts">
import type { PrimitiveProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import type { BadgeVariants } from "."
import { reactiveOmit } from "@vueuse/core"
import { Primitive } from "reka-ui"
import { cn } from "@/lib/utils"
import { badgeVariants } from "."

const props = defineProps<PrimitiveProps & {
  variant?: BadgeVariants["variant"]
  class?: HTMLAttributes["class"]
}>()

const delegatedProps = reactiveOmit(props, "class")
</script>

<template>
  <Primitive
    data-slot="badge"
    :class="cn(badgeVariants({ variant }), props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/Breadcrumb.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <nav
    aria-label="breadcrumb"
    data-slot="breadcrumb"
    :class="props.class"
  >
    <slot />
  </nav>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { MoreHorizontal } from 'lucide-vue-next'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-slot="breadcrumb-ellipsis"
    role="presentation"
    aria-hidden="true"
    :class="cn('flex size-9 items-center justify-center', props.class)"
  >
    <slot>
      <MoreHorizontal class="size-4" />
    </slot>
    <span class="sr-only">More</span>
  </span>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/BreadcrumbItem.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-slot="breadcrumb-item"
    :class="cn('inline-flex items-center gap-1.5', props.class)"
  >
    <slot />
  </li>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/BreadcrumbLink.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'reka-ui'

const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
  as: 'a',
})
</script>

<template>
  <Primitive
    data-slot="breadcrumb-link"
    :as="as"
    :as-child="asChild"
    :class="cn('hover:text-foreground transition-colors', props.class)"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/BreadcrumbList.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ol
    data-slot="breadcrumb-list"
    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
  >
    <slot />
  </ol>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/BreadcrumbPage.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-slot="breadcrumb-page"
    role="link"
    aria-disabled="true"
    aria-current="page"
    :class="cn('text-foreground font-normal', props.class)"
  >
    <slot />
  </span>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue">
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { ChevronRight } from 'lucide-vue-next'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    :class="cn('[&>svg]:size-3.5', props.class)"
  >
    <slot>
      <ChevronRight />
    </slot>
  </li>
</template>
</file>

<file path="resources/js/components/ui/breadcrumb/index.ts">
export { default as Breadcrumb } from './Breadcrumb.vue'
export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
export { default as BreadcrumbList } from './BreadcrumbList.vue'
export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
</file>

<file path="resources/js/components/ui/button/index.ts">
import { cva, type VariantProps } from 'class-variance-authority'

export { default as Button } from './Button.vue'

export const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ButtonVariants = VariantProps<typeof buttonVariants>
</file>

<file path="resources/js/components/ui/card/Card.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="card"
    :class="
      cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        props.class,
      )
    "
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/card/CardAction.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="card-action"
    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/card/CardContent.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="card-content"
    :class="cn('px-6', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/card/CardDescription.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <p
    data-slot="card-description"
    :class="cn('text-muted-foreground text-sm', props.class)"
  >
    <slot />
  </p>
</template>
</file>

<file path="resources/js/components/ui/card/CardFooter.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="card-footer"
    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/card/CardHeader.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="card-header"
    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/card/CardTitle.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <h3
    data-slot="card-title"
    :class="cn('leading-none font-semibold', props.class)"
  >
    <slot />
  </h3>
</template>
</file>

<file path="resources/js/components/ui/card/index.ts">
export { default as Card } from './Card.vue'
export { default as CardAction } from './CardAction.vue'
export { default as CardContent } from './CardContent.vue'
export { default as CardDescription } from './CardDescription.vue'
export { default as CardFooter } from './CardFooter.vue'
export { default as CardHeader } from './CardHeader.vue'
export { default as CardTitle } from './CardTitle.vue'
</file>

<file path="resources/js/components/ui/checkbox/index.ts">
export { default as Checkbox } from './Checkbox.vue'
</file>

<file path="resources/js/components/ui/collapsible/CollapsibleContent.vue">
<script setup lang="ts">
import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'

const props = defineProps<CollapsibleContentProps>()
</script>

<template>
  <CollapsibleContent
    data-slot="collapsible-content"
    v-bind="props"
  >
    <slot />
  </CollapsibleContent>
</template>
</file>

<file path="resources/js/components/ui/collapsible/CollapsibleTrigger.vue">
<script setup lang="ts">
import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'

const props = defineProps<CollapsibleTriggerProps>()
</script>

<template>
  <CollapsibleTrigger
    data-slot="collapsible-trigger"
    v-bind="props"
  >
    <slot />
  </CollapsibleTrigger>
</template>
</file>

<file path="resources/js/components/ui/collapsible/index.ts">
export { default as Collapsible } from './Collapsible.vue'
export { default as CollapsibleContent } from './CollapsibleContent.vue'
export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
</file>

<file path="resources/js/components/ui/dialog/DialogClose.vue">
<script setup lang="ts">
import { DialogClose, type DialogCloseProps } from 'reka-ui'

const props = defineProps<DialogCloseProps>()
</script>

<template>
  <DialogClose
    data-slot="dialog-close"
    v-bind="props"
  >
    <slot />
  </DialogClose>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogContent.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { X } from 'lucide-vue-next'
import {
  DialogClose,
  DialogContent,
  type DialogContentEmits,
  type DialogContentProps,
  DialogPortal,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
import DialogOverlay from './DialogOverlay.vue'

const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DialogContentEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent
      data-slot="dialog-content"
      v-bind="forwarded"
      :class="
        cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          props.class,
        )"
    >
      <slot />

      <DialogClose
        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
      >
        <X />
        <span class="sr-only">Close</span>
      </DialogClose>
    </DialogContent>
  </DialogPortal>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogDescription.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DialogDescription
    data-slot="dialog-description"
    v-bind="forwardedProps"
    :class="cn('text-muted-foreground text-sm', props.class)"
  >
    <slot />
  </DialogDescription>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogFooter.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
  <div
    data-slot="dialog-footer"
    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogHeader.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="dialog-header"
    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogOverlay.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <DialogOverlay
    data-slot="dialog-overlay"
    v-bind="delegatedProps"
    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
  >
    <slot />
  </DialogOverlay>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogScrollContent.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { X } from 'lucide-vue-next'
import {
  DialogClose,
  DialogContent,
  type DialogContentEmits,
  type DialogContentProps,
  DialogOverlay,
  DialogPortal,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DialogContentEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DialogPortal>
    <DialogOverlay
      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
    >
      <DialogContent
        :class="
          cn(
            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
            props.class,
          )
        "
        v-bind="forwarded"
        @pointer-down-outside="(event) => {
          const originalEvent = event.detail.originalEvent;
          const target = originalEvent.target as HTMLElement;
          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
            event.preventDefault();
          }
        }"
      >
        <slot />

        <DialogClose
          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
        >
          <X class="w-4 h-4" />
          <span class="sr-only">Close</span>
        </DialogClose>
      </DialogContent>
    </DialogOverlay>
  </DialogPortal>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogTitle.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DialogTitle
    data-slot="dialog-title"
    v-bind="forwardedProps"
    :class="cn('text-lg leading-none font-semibold', props.class)"
  >
    <slot />
  </DialogTitle>
</template>
</file>

<file path="resources/js/components/ui/dialog/DialogTrigger.vue">
<script setup lang="ts">
import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'

const props = defineProps<DialogTriggerProps>()
</script>

<template>
  <DialogTrigger
    data-slot="dialog-trigger"
    v-bind="props"
  >
    <slot />
  </DialogTrigger>
</template>
</file>

<file path="resources/js/components/ui/dialog/index.ts">
export { default as Dialog } from './Dialog.vue'
export { default as DialogClose } from './DialogClose.vue'
export { default as DialogContent } from './DialogContent.vue'
export { default as DialogDescription } from './DialogDescription.vue'
export { default as DialogFooter } from './DialogFooter.vue'
export { default as DialogHeader } from './DialogHeader.vue'
export { default as DialogOverlay } from './DialogOverlay.vue'
export { default as DialogScrollContent } from './DialogScrollContent.vue'
export { default as DialogTitle } from './DialogTitle.vue'
export { default as DialogTrigger } from './DialogTrigger.vue'
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Check } from 'lucide-vue-next'
import {
  DropdownMenuCheckboxItem,
  type DropdownMenuCheckboxItemEmits,
  type DropdownMenuCheckboxItemProps,
  DropdownMenuItemIndicator,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuCheckboxItem
    data-slot="dropdown-menu-checkbox-item"
    v-bind="forwarded"
    :class=" cn(
      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
      props.class,
    )"
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <DropdownMenuItemIndicator>
        <Check class="size-4" />
      </DropdownMenuItemIndicator>
    </span>
    <slot />
  </DropdownMenuCheckboxItem>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import {
  DropdownMenuContent,
  type DropdownMenuContentEmits,
  type DropdownMenuContentProps,
  DropdownMenuPortal,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
  {
    sideOffset: 4,
  },
)
const emits = defineEmits<DropdownMenuContentEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuPortal>
    <DropdownMenuContent
      data-slot="dropdown-menu-content"
      v-bind="forwarded"
      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
    >
      <slot />
    </DropdownMenuContent>
  </DropdownMenuPortal>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue">
<script setup lang="ts">
import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'

const props = defineProps<DropdownMenuGroupProps>()
</script>

<template>
  <DropdownMenuGroup
    data-slot="dropdown-menu-group"
    v-bind="props"
  >
    <slot />
  </DropdownMenuGroup>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'

const props = withDefaults(defineProps<DropdownMenuItemProps & {
  class?: HTMLAttributes['class']
  inset?: boolean
  variant?: 'default' | 'destructive'
}>(), {
  variant: 'default',
})

const delegatedProps = reactiveOmit(props, 'inset', 'variant')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DropdownMenuItem
    data-slot="dropdown-menu-item"
    :data-inset="inset ? '' : undefined"
    :data-variant="variant"
    v-bind="forwardedProps"
    :class="cn(`focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
  >
    <slot />
  </DropdownMenuItem>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'

const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class', 'inset')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DropdownMenuLabel
    data-slot="dropdown-menu-label"
    :data-inset="inset ? '' : undefined"
    v-bind="forwardedProps"
    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
  >
    <slot />
  </DropdownMenuLabel>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue">
<script setup lang="ts">
import {
  DropdownMenuRadioGroup,
  type DropdownMenuRadioGroupEmits,
  type DropdownMenuRadioGroupProps,
  useForwardPropsEmits,
} from 'reka-ui'

const props = defineProps<DropdownMenuRadioGroupProps>()
const emits = defineEmits<DropdownMenuRadioGroupEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuRadioGroup
    data-slot="dropdown-menu-radio-group"
    v-bind="forwarded"
  >
    <slot />
  </DropdownMenuRadioGroup>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Circle } from 'lucide-vue-next'
import {
  DropdownMenuItemIndicator,
  DropdownMenuRadioItem,
  type DropdownMenuRadioItemEmits,
  type DropdownMenuRadioItemProps,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()

const emits = defineEmits<DropdownMenuRadioItemEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuRadioItem
    data-slot="dropdown-menu-radio-item"
    v-bind="forwarded"
    :class="cn(
      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
      props.class,
    )"
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <DropdownMenuItemIndicator>
        <Circle class="size-2 fill-current" />
      </DropdownMenuItemIndicator>
    </span>
    <slot />
  </DropdownMenuRadioItem>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import {
  DropdownMenuSeparator,
  type DropdownMenuSeparatorProps,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DropdownMenuSeparatorProps & {
  class?: HTMLAttributes['class']
}>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <DropdownMenuSeparator
    data-slot="dropdown-menu-separator"
    v-bind="delegatedProps"
    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
  />
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-slot="dropdown-menu-shortcut"
    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
  >
    <slot />
  </span>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue">
<script setup lang="ts">
import {
  DropdownMenuSub,
  type DropdownMenuSubEmits,
  type DropdownMenuSubProps,
  useForwardPropsEmits,
} from 'reka-ui'

const props = defineProps<DropdownMenuSubProps>()
const emits = defineEmits<DropdownMenuSubEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
    <slot />
  </DropdownMenuSub>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import {
  DropdownMenuSubContent,
  type DropdownMenuSubContentEmits,
  type DropdownMenuSubContentProps,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DropdownMenuSubContentEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuSubContent
    data-slot="dropdown-menu-sub-content"
    v-bind="forwarded"
    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
  >
    <slot />
  </DropdownMenuSubContent>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { ChevronRight } from 'lucide-vue-next'
import {
  DropdownMenuSubTrigger,
  type DropdownMenuSubTriggerProps,
  useForwardProps,
} from 'reka-ui'

const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class', 'inset')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DropdownMenuSubTrigger
    data-slot="dropdown-menu-sub-trigger"
    v-bind="forwardedProps"
    :class="cn(
      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
      props.class,
    )"
  >
    <slot />
    <ChevronRight class="ml-auto size-4" />
  </DropdownMenuSubTrigger>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue">
<script setup lang="ts">
import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'

const props = defineProps<DropdownMenuTriggerProps>()

const forwardedProps = useForwardProps(props)
</script>

<template>
  <DropdownMenuTrigger
    data-slot="dropdown-menu-trigger"
    v-bind="forwardedProps"
  >
    <slot />
  </DropdownMenuTrigger>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/index.ts">
export { default as DropdownMenu } from './DropdownMenu.vue'

export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
export { DropdownMenuPortal } from 'reka-ui'
</file>

<file path="resources/js/components/ui/input/index.ts">
export { default as Input } from './Input.vue'
</file>

<file path="resources/js/components/ui/input/Input.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useVModel } from '@vueuse/core'

const props = defineProps<{
  defaultValue?: string | number
  modelValue?: string | number
  class?: HTMLAttributes['class']
}>()

const emits = defineEmits<{
  (e: 'update:modelValue', payload: string | number): void
}>()

const modelValue = useVModel(props, 'modelValue', emits, {
  passive: true,
  defaultValue: props.defaultValue,
})
</script>

<template>
  <input
    v-model="modelValue"
    data-slot="input"
    :class="cn(
      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
      props.class,
    )"
  >
</template>
</file>

<file path="resources/js/components/ui/label/index.ts">
export { default as Label } from './Label.vue'
</file>

<file path="resources/js/components/ui/label/Label.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Label, type LabelProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <Label
    data-slot="label"
    v-bind="delegatedProps"
    :class="
      cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        props.class,
      )
    "
  >
    <slot />
  </Label>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/index.ts">
import { cva } from 'class-variance-authority'

export { default as NavigationMenu } from './NavigationMenu.vue'
export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
export { default as NavigationMenuList } from './NavigationMenuList.vue'
export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'

export const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
)
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuContent.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import {
  NavigationMenuContent,
  type NavigationMenuContentEmits,
  type NavigationMenuContentProps,
  useForwardPropsEmits,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<NavigationMenuContentEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <NavigationMenuContent
    data-slot="navigation-menu-content"
    v-bind="forwarded"
    :class="cn(
      `data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto`,
      `group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,
      props.class,
    )"
  >
    <slot />
  </NavigationMenuContent>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <NavigationMenuIndicator
    data-slot="navigation-menu-indicator"
    v-bind="forwardedProps"
    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
  >
    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
  </NavigationMenuIndicator>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuItem.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'

const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <NavigationMenuItem
    data-slot="navigation-menu-item"
    v-bind="delegatedProps"
    :class="cn('relative', props.class)"
  >
    <slot />
  </NavigationMenuItem>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuLink.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import {
  NavigationMenuLink,
  type NavigationMenuLinkEmits,
  type NavigationMenuLinkProps,
  useForwardPropsEmits,
} from 'reka-ui'

const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<NavigationMenuLinkEmits>()

const delegatedProps = reactiveOmit(props, 'class')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <NavigationMenuLink
    data-slot="navigation-menu-link"
    v-bind="forwarded"
    :class="cn(`'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4'`, props.class)"
  >
    <slot />
  </NavigationMenuLink>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuList.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <NavigationMenuList
    data-slot="navigation-menu-list"
    v-bind="forwardedProps"
    :class="
      cn(
        'group flex flex-1 list-none items-center justify-center gap-1',
        props.class,
      )
    "
  >
    <slot />
  </NavigationMenuList>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { ChevronDown } from 'lucide-vue-next'
import {
  NavigationMenuTrigger,
  type NavigationMenuTriggerProps,
  useForwardProps,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'
import { navigationMenuTriggerStyle } from '.'

const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <NavigationMenuTrigger
    data-slot="navigation-menu-trigger"
    v-bind="forwardedProps"
    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
  >
    <slot />
    <ChevronDown
      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuTrigger>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import {
  NavigationMenuViewport,
  type NavigationMenuViewportProps,
  useForwardProps,
} from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
    <NavigationMenuViewport
      data-slot="navigation-menu-viewport"
      v-bind="forwardedProps"
      :class="
        cn(
          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)]',
          props.class,
        )
      "
    />
  </div>
</template>
</file>

<file path="resources/js/components/ui/pin-input/index.ts">
export { default as PinInput } from "./PinInput.vue"
export { default as PinInputGroup } from "./PinInputGroup.vue"
export { default as PinInputSeparator } from "./PinInputSeparator.vue"
export { default as PinInputSlot } from "./PinInputSlot.vue"
</file>

<file path="resources/js/components/ui/pin-input/PinInputGroup.vue">
<script setup lang="ts">
import type { PrimitiveProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { Primitive, useForwardProps } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
const delegatedProps = reactiveOmit(props, "class")
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <Primitive
    data-slot="pin-input-group"
    v-bind="forwardedProps"
    :class="cn('flex items-center', props.class)"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/pin-input/PinInputSeparator.vue">
<script setup lang="ts">
import type { PrimitiveProps } from "reka-ui"
import { Minus } from "lucide-vue-next"
import { Primitive, useForwardProps } from "reka-ui"

const props = defineProps<PrimitiveProps>()
const forwardedProps = useForwardProps(props)
</script>

<template>
  <Primitive
    data-slot="pin-input-separator"
    v-bind="forwardedProps"
  >
    <slot>
      <Minus />
    </slot>
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/popover/index.ts">
export { default as Popover } from "./Popover.vue"
export { default as PopoverContent } from "./PopoverContent.vue"
export { default as PopoverTrigger } from "./PopoverTrigger.vue"
</file>

<file path="resources/js/components/ui/popover/PopoverContent.vue">
<script setup lang="ts">
import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import {
  PopoverContent,
  PopoverPortal,
  useForwardPropsEmits,
} from "reka-ui"
import { cn } from "@/lib/utils"

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
  {
    align: "center",
    sideOffset: 4,
  },
)
const emits = defineEmits<PopoverContentEmits>()

const delegatedProps = reactiveOmit(props, "class")

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <PopoverPortal>
    <PopoverContent
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          props.class,
        )
      "
    >
      <slot />
    </PopoverContent>
  </PopoverPortal>
</template>
</file>

<file path="resources/js/components/ui/popover/PopoverTrigger.vue">
<script setup lang="ts">
import type { PopoverTriggerProps } from "reka-ui"
import { PopoverTrigger } from "reka-ui"

const props = defineProps<PopoverTriggerProps>()
</script>

<template>
  <PopoverTrigger v-bind="props">
    <slot />
  </PopoverTrigger>
</template>
</file>

<file path="resources/js/components/ui/radio-group/index.ts">
export { default as RadioGroup } from "./RadioGroup.vue"
export { default as RadioGroupItem } from "./RadioGroupItem.vue"
</file>

<file path="resources/js/components/ui/radio-group/RadioGroupItem.vue">
<script setup lang="ts">
import type { RadioGroupItemProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { Circle } from "lucide-vue-next"
import {
  RadioGroupIndicator,
  RadioGroupItem,
  useForwardProps,
} from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RadioGroupItem
    v-bind="forwardedProps"
    :class="
      cn(
        'peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
  >
    <RadioGroupIndicator
      class="flex items-center justify-center"
    >
      <Circle class="h-2.5 w-2.5 fill-current text-current" />
    </RadioGroupIndicator>
  </RadioGroupItem>
</template>
</file>

<file path="resources/js/components/ui/separator/index.ts">
export { default as Separator } from './Separator.vue'
</file>

<file path="resources/js/components/ui/separator/Separator.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { Separator, type SeparatorProps } from 'reka-ui'

const props = withDefaults(defineProps<
  SeparatorProps & { class?: HTMLAttributes['class'] }
>(), {
  orientation: 'horizontal',
  decorative: true,
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Separator
    data-slot="separator-root"
    v-bind="delegatedProps"
    :class="
      cn(
        `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
        props.class,
      )
    "
  />
</template>
</file>

<file path="resources/js/components/ui/sheet/index.ts">
export { default as Sheet } from './Sheet.vue'
export { default as SheetClose } from './SheetClose.vue'
export { default as SheetContent } from './SheetContent.vue'
export { default as SheetDescription } from './SheetDescription.vue'
export { default as SheetFooter } from './SheetFooter.vue'
export { default as SheetHeader } from './SheetHeader.vue'
export { default as SheetTitle } from './SheetTitle.vue'
export { default as SheetTrigger } from './SheetTrigger.vue'
</file>

<file path="resources/js/components/ui/sheet/SheetClose.vue">
<script setup lang="ts">
import { DialogClose, type DialogCloseProps } from 'reka-ui'

const props = defineProps<DialogCloseProps>()
</script>

<template>
  <DialogClose
    data-slot="sheet-close"
    v-bind="props"
  >
    <slot />
  </DialogClose>
</template>
</file>

<file path="resources/js/components/ui/sheet/SheetDescription.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <DialogDescription
    data-slot="sheet-description"
    :class="cn('text-muted-foreground text-sm', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </DialogDescription>
</template>
</file>

<file path="resources/js/components/ui/sheet/SheetFooter.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
  <div
    data-slot="sheet-footer"
    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
    "
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sheet/SheetHeader.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
  <div
    data-slot="sheet-header"
    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sheet/SheetOverlay.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <DialogOverlay
    data-slot="sheet-overlay"
    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </DialogOverlay>
</template>
</file>

<file path="resources/js/components/ui/sheet/SheetTitle.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { DialogTitle, type DialogTitleProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <DialogTitle
    data-slot="sheet-title"
    :class="cn('text-foreground font-semibold', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </DialogTitle>
</template>
</file>

<file path="resources/js/components/ui/sheet/SheetTrigger.vue">
<script setup lang="ts">
import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'

const props = defineProps<DialogTriggerProps>()
</script>

<template>
  <DialogTrigger
    data-slot="sheet-trigger"
    v-bind="props"
  >
    <slot />
  </DialogTrigger>
</template>
</file>

<file path="resources/js/components/ui/sidebar/index.ts">
import type { VariantProps } from 'class-variance-authority'
import type { HTMLAttributes } from 'vue'
import { cva } from 'class-variance-authority'

export interface SidebarProps {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
  class?: HTMLAttributes['class']
}

export { default as Sidebar } from './Sidebar.vue'
export { default as SidebarContent } from './SidebarContent.vue'
export { default as SidebarFooter } from './SidebarFooter.vue'
export { default as SidebarGroup } from './SidebarGroup.vue'
export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
export { default as SidebarHeader } from './SidebarHeader.vue'
export { default as SidebarInput } from './SidebarInput.vue'
export { default as SidebarInset } from './SidebarInset.vue'
export { default as SidebarMenu } from './SidebarMenu.vue'
export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
export { default as SidebarProvider } from './SidebarProvider.vue'
export { default as SidebarRail } from './SidebarRail.vue'
export { default as SidebarSeparator } from './SidebarSeparator.vue'
export { default as SidebarTrigger } from './SidebarTrigger.vue'

export { useSidebar } from './utils'

export const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:pr-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
</file>

<file path="resources/js/components/ui/sidebar/Sidebar.vue">
<script setup lang="ts">
import type { SidebarProps } from '.'
import { cn } from '@/lib/utils'
import { Sheet, SheetContent } from '@/components/ui/sheet'
import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<SidebarProps>(), {
  side: 'left',
  variant: 'sidebar',
  collapsible: 'offcanvas',
})

const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
</script>

<template>
  <div
    v-if="collapsible === 'none'"
    data-slot="sidebar"
    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </div>

  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
    <SheetContent
      data-sidebar="sidebar"
      data-slot="sidebar"
      data-mobile="true"
      :side="side"
      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
      }"
    >
      <SheetHeader class="sr-only">
        <SheetTitle>Sidebar</SheetTitle>
        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
      </SheetHeader>
      <div class="flex h-full w-full flex-col">
        <slot />
      </div>
    </SheetContent>
  </Sheet>

  <div
    v-else
    class="group peer text-sidebar-foreground hidden md:block"
    data-slot="sidebar"
    :data-state="state"
    :data-collapsible="state === 'collapsed' ? collapsible : ''"
    :data-variant="variant"
    :data-side="side"
  >
    <!-- This is what handles the sidebar gap on desktop  -->
    <div
      :class="cn(
        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
        'group-data-[collapsible=offcanvas]:w-0',
        'group-data-[side=right]:rotate-180',
        variant === 'floating' || variant === 'inset'
          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
      )"
    />
    <div
      :class="cn(
        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
        side === 'left'
          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
        // Adjust the padding for floating and inset variants.
        variant === 'floating' || variant === 'inset'
          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
        props.class,
      )"
      v-bind="$attrs"
    >
      <div
        data-sidebar="sidebar"
        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
      >
        <slot />
      </div>
    </div>
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarContent.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="sidebar-content"
    data-sidebar="content"
    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarFooter.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="sidebar-footer"
    data-sidebar="footer"
    :class="cn('flex flex-col gap-2 p-2', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarGroup.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="sidebar-group"
    data-sidebar="group"
    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarGroupAction.vue">
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive } from 'reka-ui'

const props = defineProps<PrimitiveProps & {
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <Primitive
    data-slot="sidebar-group-action"
    data-sidebar="group-action"
    :as="as"
    :as-child="asChild"
    :class="cn(
      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
      'after:absolute after:-inset-2 md:after:hidden',
      'group-data-[collapsible=icon]:hidden',
      props.class,
    )"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarGroupContent.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="sidebar-group-content"
    data-sidebar="group-content"
    :class="cn('w-full text-sm', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarGroupLabel.vue">
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive } from 'reka-ui'

const props = defineProps<PrimitiveProps & {
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <Primitive
    data-slot="sidebar-group-label"
    data-sidebar="group-label"
    :as="as"
    :as-child="asChild"
    :class="cn(
      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
      props.class)"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarHeader.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="sidebar-header"
    data-sidebar="header"
    :class="cn('flex flex-col gap-2 p-2', props.class)"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarInput.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Input } from '@/components/ui/input'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <Input
    data-slot="sidebar-input"
    data-sidebar="input"
    :class="cn(
      'bg-background h-8 w-full shadow-none',
      props.class,
    )"
  >
    <slot />
  </Input>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarInset.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <main
    data-slot="sidebar-inset"
    :class="cn(
      'bg-background relative flex w-full flex-1 flex-col',
      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0',
      props.class,
    )"
  >
    <slot />
  </main>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenu.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ul
    data-slot="sidebar-menu"
    data-sidebar="menu"
    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
  >
    <slot />
  </ul>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuAction.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'reka-ui'

const props = withDefaults(defineProps<PrimitiveProps & {
  showOnHover?: boolean
  class?: HTMLAttributes['class']
}>(), {
  as: 'button',
})
</script>

<template>
  <Primitive
    data-slot="sidebar-menu-action"
    data-sidebar="menu-action"
    :class="cn(
      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
      'after:absolute after:-inset-2 md:after:hidden',
      'peer-data-[size=sm]/menu-button:top-1',
      'peer-data-[size=default]/menu-button:top-1.5',
      'peer-data-[size=lg]/menu-button:top-2.5',
      'group-data-[collapsible=icon]:hidden',
      showOnHover
        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
      props.class,
    )"
    :as="as"
    :as-child="asChild"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuBadge.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="sidebar-menu-badge"
    data-sidebar="menu-badge"
    :class="cn(
      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
      'peer-data-[size=sm]/menu-button:top-1',
      'peer-data-[size=default]/menu-button:top-1.5',
      'peer-data-[size=lg]/menu-button:top-2.5',
      'group-data-[collapsible=icon]:hidden',
      props.class,
    )"
  >
    <slot />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuButton.vue">
<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { type Component, computed } from 'vue'
import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
import { useSidebar } from './utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<SidebarMenuButtonProps & {
  tooltip?: string | Component
}>(), {
  as: 'button',
  variant: 'default',
  size: 'default',
})

const { isMobile, state } = useSidebar()

const delegatedProps = computed(() => {
  const { tooltip, ...delegated } = props
  return delegated
})
</script>

<template>
  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
    <slot />
  </SidebarMenuButtonChild>

  <Tooltip v-else>
    <TooltipTrigger as-child>
      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
        <slot />
      </SidebarMenuButtonChild>
    </TooltipTrigger>
    <TooltipContent
      side="right"
      align="center"
      :hidden="state !== 'collapsed' || isMobile"
    >
      <template v-if="typeof tooltip === 'string'">
        {{ tooltip }}
      </template>
      <component :is="tooltip" v-else />
    </TooltipContent>
  </Tooltip>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuItem.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-slot="sidebar-menu-item"
    data-sidebar="menu-item"
    :class="cn('group/menu-item relative', props.class)"
  >
    <slot />
  </li>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Skeleton } from '@/components/ui/skeleton'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps<{
  showIcon?: boolean
  class?: HTMLAttributes['class']
}>()

const width = computed(() => {
  return `${Math.floor(Math.random() * 40) + 50}%`;
})
</script>

<template>
  <div
    data-slot="sidebar-menu-skeleton"
    data-sidebar="menu-skeleton"
    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
  >
    <Skeleton
      v-if="showIcon"
      class="size-4 rounded-md"
      data-sidebar="menu-skeleton-icon"
    />

    <Skeleton
      class="h-4 max-w-(--skeleton-width) flex-1"
      data-sidebar="menu-skeleton-text"
      :style="{ '--skeleton-width': width }"
    />
  </div>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuSub.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ul
    data-slot="sidebar-menu-sub"
    data-sidebar="menu-badge"
    :class="cn(
      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
      'group-data-[collapsible=icon]:hidden',
      props.class,
    )"
  >
    <slot />
  </ul>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuSubButton.vue">
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive } from 'reka-ui'

const props = withDefaults(defineProps<PrimitiveProps & {
  size?: 'sm' | 'md'
  isActive?: boolean
  class?: HTMLAttributes['class']
}>(), {
  as: 'a',
  size: 'md',
})
</script>

<template>
  <Primitive
    data-slot="sidebar-menu-sub-button"
    data-sidebar="menu-sub-button"
    :as="as"
    :as-child="asChild"
    :data-size="size"
    :data-active="isActive"
    :class="cn(
      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
      size === 'sm' && 'text-xs',
      size === 'md' && 'text-sm',
      'group-data-[collapsible=icon]:hidden',
      props.class,
    )"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuSubItem.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-slot="sidebar-menu-sub-item"
    data-sidebar="menu-sub-item"
    :class="cn('group/menu-sub-item relative', props.class)"
  >
    <slot />
  </li>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarProvider.vue">
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
import { TooltipProvider } from 'reka-ui'
import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'

const props = withDefaults(defineProps<{
  defaultOpen?: boolean
  open?: boolean
  class?: HTMLAttributes['class']
}>(), {
  defaultOpen: true,
  open: undefined,
})

const emits = defineEmits<{
  'update:open': [open: boolean]
}>()

const isMobile = useMediaQuery('(max-width: 768px)')
const openMobile = ref(false)

const open = useVModel(props, 'open', emits, {
  defaultValue: props.defaultOpen ?? false,
  passive: (props.open === undefined) as false,
}) as Ref<boolean>

function setOpen(value: boolean) {
  open.value = value // emits('update:open', value)

  // This sets the cookie to keep the sidebar state.
  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
}

function setOpenMobile(value: boolean) {
  openMobile.value = value
}

// Helper to toggle the sidebar.
function toggleSidebar() {
  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
}

useEventListener('keydown', (event: KeyboardEvent) => {
  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
    event.preventDefault()
    toggleSidebar()
  }
})

// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = computed(() => open.value ? 'expanded' : 'collapsed')

provideSidebarContext({
  state,
  open,
  setOpen,
  isMobile,
  openMobile,
  setOpenMobile,
  toggleSidebar,
})
</script>

<template>
  <TooltipProvider :delay-duration="0">
    <div
      data-slot="sidebar-wrapper"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH,
        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
      }"
      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
      v-bind="$attrs"
    >
      <slot />
    </div>
  </TooltipProvider>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarRail.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useSidebar } from './utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { toggleSidebar } = useSidebar()
</script>

<template>
  <button
    data-sidebar="rail"
    data-slot="sidebar-rail"
    aria-label="Toggle Sidebar"
    :tabindex="-1"
    title="Toggle Sidebar"
    :class="cn(
      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
      props.class,
    )"
    @click="toggleSidebar"
  >
    <slot />
  </button>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarSeparator.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <Separator
    data-slot="sidebar-separator"
    data-sidebar="separator"
    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
  >
    <slot />
  </Separator>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarTrigger.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { PanelLeft } from 'lucide-vue-next'
import { useSidebar } from './utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { toggleSidebar } = useSidebar()
</script>

<template>
  <Button
    data-sidebar="trigger"
    data-slot="sidebar-trigger"
    variant="ghost"
    size="icon"
    :class="cn('h-7 w-7', props.class)"
    @click="toggleSidebar"
  >
    <PanelLeft />
    <span class="sr-only">Toggle Sidebar</span>
  </Button>
</template>
</file>

<file path="resources/js/components/ui/sidebar/utils.ts">
import type { ComputedRef, Ref } from 'vue'
import { createContext } from 'reka-ui'

export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
export const SIDEBAR_WIDTH = '16rem'
export const SIDEBAR_WIDTH_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem'
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

export const [useSidebar, provideSidebarContext] = createContext<{
  state: ComputedRef<'expanded' | 'collapsed'>
  open: Ref<boolean>
  setOpen: (value: boolean) => void
  isMobile: Ref<boolean>
  openMobile: Ref<boolean>
  setOpenMobile: (value: boolean) => void
  toggleSidebar: () => void
}>('Sidebar')
</file>

<file path="resources/js/components/ui/skeleton/index.ts">
export { default as Skeleton } from './Skeleton.vue'
</file>

<file path="resources/js/components/ui/skeleton/Skeleton.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface SkeletonProps {
  class?: HTMLAttributes['class']
}

const props = defineProps<SkeletonProps>()
</script>

<template>
  <div
    data-slot="skeleton"
    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
  />
</template>
</file>

<file path="resources/js/components/ui/spinner/index.ts">
export { default as Spinner } from "./Spinner.vue"
</file>

<file path="resources/js/components/ui/spinner/Spinner.vue">
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { Loader2Icon } from "lucide-vue-next"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <Loader2Icon
    role="status"
    aria-label="Loading"
    :class="cn('size-4 animate-spin', props.class)"
  />
</template>
</file>

<file path="resources/js/components/ui/switch/index.ts">
export { default as Switch } from "./Switch.vue"
</file>

<file path="resources/js/components/ui/tabs/index.ts">
export { default as Tabs } from "./Tabs.vue"
export { default as TabsContent } from "./TabsContent.vue"
export { default as TabsList } from "./TabsList.vue"
export { default as TabsTrigger } from "./TabsTrigger.vue"
</file>

<file path="resources/js/components/ui/textarea/index.ts">
export { default as Textarea } from "./Textarea.vue"
</file>

<file path="resources/js/components/ui/textarea/Textarea.vue">
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { useVModel } from "@vueuse/core"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
  defaultValue?: string | number
  modelValue?: string | number
}>()

const emits = defineEmits<{
  (e: "update:modelValue", payload: string | number): void
}>()

const modelValue = useVModel(props, "modelValue", emits, {
  passive: true,
  defaultValue: props.defaultValue,
})
</script>

<template>
  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
</template>
</file>

<file path="resources/js/components/ui/tooltip/index.ts">
export { default as Tooltip } from './Tooltip.vue'
export { default as TooltipContent } from './TooltipContent.vue'
export { default as TooltipProvider } from './TooltipProvider.vue'
export { default as TooltipTrigger } from './TooltipTrigger.vue'
</file>

<file path="resources/js/components/ui/tooltip/TooltipContent.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
  sideOffset: 4,
})

const emits = defineEmits<TooltipContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <TooltipPortal>
    <TooltipContent
      data-slot="tooltip-content"
      v-bind="{ ...forwarded, ...$attrs }"
      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
    >
      <slot />

      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
    </TooltipContent>
  </TooltipPortal>
</template>
</file>

<file path="resources/js/components/ui/tooltip/TooltipProvider.vue">
<script setup lang="ts">
import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'

const props = withDefaults(defineProps<TooltipProviderProps>(), {
  delayDuration: 0,
})
</script>

<template>
  <TooltipProvider v-bind="props">
    <slot />
  </TooltipProvider>
</template>
</file>

<file path="resources/js/components/ui/tooltip/TooltipTrigger.vue">
<script setup lang="ts">
import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'

const props = defineProps<TooltipTriggerProps>()
</script>

<template>
  <TooltipTrigger
    data-slot="tooltip-trigger"
    v-bind="props"
  >
    <slot />
  </TooltipTrigger>
</template>
</file>

<file path="resources/js/components/ui/index.ts">
export { default as Tabs } from "./Tabs.vue"
export { default as TabsContent } from "./TabsContent.vue"
export { default as TabsList } from "./TabsList.vue"
export { default as TabsTrigger } from "./TabsTrigger.vue"
</file>

<file path="resources/js/components/ui/TabsContent.vue">
<script setup lang="ts">
import type { TabsContentProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TabsContent } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")
</script>

<template>
  <TabsContent
    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </TabsContent>
</template>
</file>

<file path="resources/js/components/ui/TabsList.vue">
<script setup lang="ts">
import type { TabsListProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TabsList } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")
</script>

<template>
  <TabsList
    v-bind="delegatedProps"
    :class="cn(
      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
      props.class,
    )"
  >
    <slot />
  </TabsList>
</template>
</file>

<file path="resources/js/components/ui/TabsTrigger.vue">
<script setup lang="ts">
import type { TabsTriggerProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TabsTrigger, useForwardProps } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <TabsTrigger
    v-bind="forwardedProps"
    :class="cn(
      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
      props.class,
    )"
  >
    <span class="truncate">
      <slot />
    </span>
  </TabsTrigger>
</template>
</file>

<file path="resources/js/components/ComponentRenderer.vue">
<template>
    <div
        :data-laravilt-component="componentName"
        :data-laravilt-key="componentKey"
        v-html="innerHTML"
    />
</template>

<script setup>
const props = defineProps({
    componentName: {
        type: String,
        required: true
    },
    componentProps: {
        type: Object,
        default: () => ({})
    },
    componentKey: {
        type: String,
        required: true
    },
    innerHTML: {
        type: String,
        default: ''
    }
});
</script>
</file>

<file path="resources/js/components/Link.vue">
<script setup>
const props = defineProps({
    href: {
        type: String,
        required: true
    },
    method: {
        type: String,
        default: 'GET'
    }
});

function handleClick(event) {
    // Prevent default link behavior
    event.preventDefault();
    event.stopPropagation();

    console.log('[LaraviltLink] Click intercepted for:', props.href);

    // Use window.Laravilt.visit() for SPA navigation
    if (window.Laravilt && typeof window.Laravilt.visit === 'function') {
        console.log('[LaraviltLink] Using Laravilt.visit()');
        window.Laravilt.visit(props.href, props.method);
    } else {
        console.error('[LaraviltLink] window.Laravilt.visit not available!');
        console.log('[LaraviltLink] window.Laravilt:', window.Laravilt);
        console.warn('[LaraviltLink] Falling back to regular navigation');
        window.location.href = props.href;
    }
}
</script>

<template>
    <a
        :href="href"
        data-laravilt-link
        :data-laravilt-method="method"
        @click="handleClick"
    >
        <slot />
    </a>
</template>
</file>

<file path="resources/js/components/Modal.vue">
<script setup lang="ts">
import { computed, type Component } from 'vue';
import * as LucideIcons from 'lucide-vue-next';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

const props = defineProps<{
    open: boolean;
    title?: string;
    description?: string;
    closeOnBackdrop?: boolean;
    icon?: string;
    iconColor?: string;
}>();

const emit = defineEmits<{
    'update:open': [value: boolean];
    'close': [];
}>();

const isOpen = computed({
    get: () => props.open,
    set: (value) => {
        emit('update:open', value);
        if (!value) {
            emit('close');
        }
    },
});

// Get Lucide icon component from icon name
const iconComponent = computed<Component | null>(() => {
    if (!props.icon) return null;

    // If it starts with 'heroicon-o-', map it to Lucide
    if (props.icon.startsWith('heroicon-o-')) {
        const iconMap: Record<string, string> = {
            'heroicon-o-bolt': 'Zap',
            'heroicon-o-star': 'Star',
            'heroicon-o-exclamation-triangle': 'AlertTriangle',
            'heroicon-o-document-text': 'FileText',
            'heroicon-o-trash': 'Trash2',
            'heroicon-o-information-circle': 'Info',
            'heroicon-o-squares-2x2': 'LayoutGrid',
            'heroicon-o-x-mark': 'X',
            'heroicon-o-beaker': 'Flask',
            'heroicon-o-home': 'Home',
            'heroicon-o-user': 'User',
            'heroicon-o-users': 'Users',
            'heroicon-o-cog': 'Settings',
            'heroicon-o-chart-bar': 'BarChart',
            'heroicon-o-folder': 'Folder',
            'heroicon-o-shopping-cart': 'ShoppingCart',
        };

        const lucideName = iconMap[props.icon] || 'Circle';
        return (LucideIcons as any)[lucideName] || LucideIcons.Circle;
    }

    // Try to use it as a Lucide icon name directly
    return (LucideIcons as any)[props.icon] || LucideIcons.Circle;
});

// Get icon color classes
const iconColorClasses = computed(() => {
    const colorMap: Record<string, string> = {
        'danger': 'text-red-500',
        'warning': 'text-yellow-500',
        'success': 'text-green-500',
        'info': 'text-blue-500',
        'primary': 'text-primary',
    };

    return props.iconColor ? colorMap[props.iconColor] || 'text-muted-foreground' : 'text-muted-foreground';
});
</script>

<template>
    <Dialog v-model:open="isOpen">
        <DialogContent>
            <DialogHeader v-if="title || description || iconComponent">
                <div v-if="iconComponent" class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-4">
                    <component :is="iconComponent" :class="['h-6 w-6', iconColorClasses]" />
                </div>
                <DialogTitle v-if="title">{{ title }}</DialogTitle>
                <DialogDescription v-if="description">{{ description }}</DialogDescription>
            </DialogHeader>

            <slot />

            <DialogFooter v-if="$slots.footer">
                <slot name="footer" />
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>
</file>

<file path="resources/js/components/Render.vue">
<template>
  <render v-if="html" />
</template>

<script setup>
import { h, ref, watch, nextTick } from "vue";
import { Laravilt } from "../core/Laravilt.js";

const props = defineProps({
    html: {
        type: String,
        required: false,
        default: "",
    },

    passthrough: {
        type: Object,
        required: false,
        default() {
            return {};
        },
    },
});

const render = ref(null);

function updateRender() {
    render.value = h({
        template: props.html,
        data() {
            return { ...props.passthrough };
        },
    });

    nextTick(() => {
        Laravilt.emit("rendered");
    });
}

watch(() => props.html, updateRender, { immediate: true });
</script>
</file>

<file path="resources/js/components/ServerError.vue">
<template>
  <div
    style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 200000; box-sizing: border-box; height: 100vh; width: 100vw; background-color: rgb(0 0 0 / 0.75); padding: 2rem;"
    @click="hide"
  >
    <iframe
      ref="iframeElement"
      class="bg-white w-full h-full"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const props = defineProps({
    html: {
        type: String,
        required: true,
    },
});

const emit = defineEmits(["close"]);
const iframeElement = ref(null);

/**
 * Creates a new HTML element with an iframe holding the HTML from the props.
 */
function create() {
    const page = document.createElement("html");
    page.innerHTML = props.html;
    page.querySelectorAll("a").forEach((a) => a.setAttribute("target", "_top"));

    document.body.style.overflow = "hidden";

    const iframe = iframeElement.value;

    if (!iframe.contentWindow) {
        throw new Error("iframe not yet ready.");
    }

    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(page.outerHTML);
    iframe.contentWindow.document.close();

    document.addEventListener("keydown", keyDownListener);
}

/**
 * Calls the hide() event when the keycode is escape.
 */
function keyDownListener($event) {
    if ($event.keyCode === 27) {
        hide();
    }
}

/**
 * Restore the body overflow style and emit the 'close' event.
 */
function hide() {
    document.body.style.overflow = "visible";
    document.removeEventListener("keydown", keyDownListener);
    emit("close");
}

onMounted(() => create());
</script>
</file>

<file path="resources/js/composables/index.ts">
export { useLocalization, trans, __, setTranslations } from './useLocalization';
</file>

<file path="resources/js/core/Laravilt.js">
import { default as Axios } from "axios";
import { computed, ref } from "vue";
import forEach from "lodash-es/forEach";
import forOwn from "lodash-es/forOwn";
import isObject from "lodash-es/isObject";
import reverse from "lodash-es/reverse";
import EventBus from "../utils/event-bus";

const dynamicVisitId = ref(0);
const pageVisitId = ref(1);
const currentPage = ref({});
const stack = ref(0);
const stackTypes = ref({});
const eventBuses = {};

const isSsr = typeof window === "undefined";

/**
 * Initializes the first request. It adds a listener for when
 * a user navigates with the browser's back/forward buttons,
 * and it sets the current page and Laravilt meta data.
 */
function init(initialHtml, initialDynamics, initialLaraviltData) {
    if (!isSsr) {
        window.addEventListener("popstate", handlePopstateEvent.bind(this));
    }

    // The pageVisitId is always 1, but we might have no
    // Dynamic Components on the initial request.
    if(Object.keys(initialDynamics).length > 0) {
        dynamicVisitId.value++;
    }

    eventBuses[pageVisitId.value] = new EventBus(pageVisitId.value);

    setLaraviltData(initialLaraviltData);
    onHead(initialLaraviltData.head);
    onHtml(initialHtml);

    // SSR has no location
    const href = isSsr ? "" : location.href;

    const newPage = setCurrentPage(
        href,
        initialLaraviltData.head,
        initialHtml,
        initialDynamics,
        {},
        pageVisitId.value,
        dynamicVisitId.value,
        initialLaraviltData.persistentLayout
    );

    // Manipulate the current state so it holds the current page.
    replaceState(newPage);
}

/**
 * This method is called when a user navigates
 * with the browser's back/forward buttons.
 */
function handlePopstateEvent($event) {
    if(!$event.state) {
        return;
    }

    currentPage.value = $event.state;

    // Hide modals that were still visible when the user left the page.
    stack.value = 0;
    stackTypes.value = {};

    // Restore the preloaded modals.
    preloadedModals.value = {};

    // Restore the Persistent Layout key.
    persistentLayoutKey.value = currentPage.value.persistentLayoutKey;

    onHead(currentPage.value.head);
    onHtml(currentPage.value.html, currentPage.value.rememberedState.scrollY);

    emit("history:popped-state", currentPage.value.url);
}

/**
 * Wraps the given arguments in an object and updates the ref.
 */
function setCurrentPage(url, head, html, dynamics, rememberedState, pageVisitId, dynamicVisitId, persistentLayoutKey) {
    const newPage = {
        url,
        head,
        html,
        dynamics,
        rememberedState,
        pageVisitId,
        dynamicVisitId,
        persistentLayoutKey,
    };

    currentPage.value = newPage;

    return newPage;
}

/**
 * Pushes the given page to the browser's history.
 */
function pushState(page) {
    if (!isSsr) {
        window.history.pushState(page, "", page.url);
        emit("history:pushed-state", { url: page.url });
    }
}

/**
 * This updates *just* the URL of the current page and replaces the
 * current history state of the browser with the new URL as well.
 * This method is used, for example, in the Table component.
 */
function replaceUrlOfCurrentPage(newUrl) {
    const newPage = setCurrentPage(
        newUrl,
        JSON.parse(JSON.stringify(currentPage.value.head)),
        currentPage.value.html,
        JSON.parse(JSON.stringify(currentPage.value.dynamics)),
        { ...currentPage.value.rememberedState },
        currentPage.value.pageVisitId,
        currentPage.value.dynamicVisitId,
        currentPage.value.persistentLayoutKey,
    );

    if (!isSsr) {
        window.history.replaceState(newPage, "", newPage.url);
        emit("history:replaced-state", { url: newPage.url });
    }
}

/**
 * Replaces the current browser history state with the given page.
 */
function replaceState(page) {
    if (!isSsr) {
        window.history.replaceState(page, "", page.url);
        emit("history:replaced-state", { url: page.url });
    }
}

/**
 * This is only used to add to the incoming HTML. This way,
 * we never have duplicate HTML content.
 */
const newPages = ref(0);

/**
 * This key is used to keep track of the persistent layout.
 */
const persistentLayoutKey = ref(null);

function downloadFile(response) {
    // Create a new blob from the response data.
    const blobUrl = URL.createObjectURL(response.data);
    const filename = response.headers["content-disposition"].split("filename=")[1];

    // Create a new link element and click it.
    const link = document.createElement("a");
    link.href = blobUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();

    // Remove the link element.
    setTimeout(() => {
        document.body.removeChild(link);
        URL.revokeObjectURL(blobUrl);
    }, 1);
}

/**
 * Handles an incoming response from a Laravilt request.
 */
function newPageFromResponse(response, replace, hash) {
    newPages.value++;

    const url = response.request.responseURL + (hash ? "#" + hash : "");

    // Check if response is a file download
    if (response.data instanceof Blob) {
        downloadFile(response);
        return;
    }

    if (!isObject(response.data?.laravilt)) {
        console.error("The response is not a Laravilt response. Did you use the Laravilt Middleware on this route?");
    }

    // Lazy responses are handled by the Lazy component itself.
    if (response.data.laravilt.lazy || response.data.laravilt.rehydrate) {
        return;
    }

    // If this is a Modal response, we increase the stack count.
    if (response.data.laravilt.modal && !response.data.laravilt.modalTarget) {
        stack.value++;
    }

    const currentPersistentLayout = persistentLayoutKey.value;

    // Update the meta data.
    setLaraviltData(response.data.laravilt);
    onHead(response.data.laravilt.head);

    // If the response URL is the same as the current one, we don't want
    // to increase the 'pageVisitId' as it's not really a new page, and
    // we don't want to push a new state to the browser's history.
    if (url === currentPage.value.url) {
        replace = true;
    }

    if (response.data.laravilt.modal) {
        return onModal(response.data.html, response.data.laravilt.modal);
    } else if (response.data.laravilt.preventRefresh) {
        // The user explicitly requested to prevent a refresh, and the response
        // URL is the same as the current one, so don't do anything.
        return;
    }

    // Reset the modals
    stack.value = 0;
    stackTypes.value = {};

    let html = response.data.html;
    let dynamics = response.data.dynamics;

    const currentPageHasDynamics = Object.keys(currentPage.value.dynamics).length > 0;
    const nextPageHasDynamics = Object.keys(dynamics).length > 0;

    if (replace) {
        // Add the 'newPages' counter as a comment to each Dynamic Component
        // so the Render component will rerender it.
        if (nextPageHasDynamics) {
            forOwn(dynamics, (html, name) => {
                dynamics[name] += `<!-- ${newPages.value} -->`;
            });
        }

        // We only add it to the HTML when we didn't receive Dynamic
        // Components, or when we *do* receive Dynamic Components
        // and the current page should be forced to rerender.
        if (!nextPageHasDynamics || !currentPageHasDynamics) {
            html += `<!-- ${newPages.value} -->`;
        }
    } else {
        // If we don't replace the current state, we increase the
        // visit counters so the KeepAlive component can keep
        // track of the state of the previous request.
        if(nextPageHasDynamics) {
            dynamicVisitId.value++;
        }

        if(!nextPageHasDynamics || !currentPageHasDynamics) {
            pageVisitId.value++;
            eventBuses[pageVisitId.value] = eventBuses[pageVisitId.value] || new EventBus(pageVisitId.value);
        }
    }

    let preventHtmlRefresh = response.data.laravilt.persistentLayout
        && currentPersistentLayout === response.data.laravilt.persistentLayout;

    let scrollY = 0;

    if (!isSsr && response.data.laravilt.preserveScroll) {
        scrollY = window.scrollY;
    }

    // Bring the HTML to the Vue app.
    onHtml(
        preventHtmlRefresh ? currentPage.value.html : html,
        scrollY,
        !replace && !response.data.laravilt.preventViewTransition
    );

    // Initialize a new page object.
    const newPage = setCurrentPage(
        url,
        response.data.laravilt.head,
        preventHtmlRefresh ? currentPage.value.html : html,
        dynamics,
        currentPage.value.rememberedState
            ? { ...currentPage.value.rememberedState }
            : {},
        pageVisitId.value,
        dynamicVisitId.value,
        response.data.laravilt.persistentLayout
    );

    // Replace or push the new page into the browser's history.
    replace ? replaceState(newPage) : pushState(newPage);
}


/**
 * Decrease the stack count when a modal closes and restore the head data.
 */
function popStack() {
    stack.value--;

    onHead(headData(stack.value));
}

const _validationErrors = ref({});

/**
 * Returns the validation errors for the given stack.
 */
const validationErrors = (stack) => {
    return _validationErrors.value[stack];
};

/**
 * Returns a boolean whether the given stack has validation errors.
 */
const hasValidationErrors = (stack) => {
    return Object.keys(validationErrors.value[stack] || {}).length > 0;
};

const _headData = ref({});

/**
 * Returns the head data for the given stack.
 */
const headData = (stack) => {
    return _headData.value[stack];
};

const _flashData = ref({});

/**
 * Returns the flash data for the given stack.
 */
const flashData = (stack) => {
    return _flashData.value[stack];
};

const toasts = ref([]);

/**
 * Adds a new toast to the array.
 */
function pushToast(toast) {
    toasts.value.push(toast);
}

/**
 * Returns all toasts in reversed order so we
 * can show the latest toast on top.
 */
const toastsReversed = computed(() => {
    return reverse([...toasts.value]);
});

/**
 * Mark a toast as dismissed and clear the HTML.
 */
function dismissToast(key) {
    toasts.value[key].dismissed = true;
    toasts.value[key].html = null;
}


const confirmModal = ref(null);

/**
 * Shows the confirm modal with the given texts and
 * returns a promise to listen for the response.
 */
function confirm(title, text, confirmButton, cancelButton, confirmPassword, confirmPasswordOnce, confirmDanger) {
    let resolvePromise;
    let rejectPromise;

    if (typeof confirmPassword === "undefined") {
        confirmPassword = false;
    }

    if (typeof confirmPasswordOnce === "undefined") {
        confirmPasswordOnce = false;
    }

    if (typeof confirmDanger === "undefined") {
        confirmDanger = false;
    }

    const promise = new Promise((resolve, reject) => {
        resolvePromise = resolve;
        rejectPromise = reject;
    });

    confirmModal.value = {
        title,
        text,
        confirmButton,
        cancelButton,
        resolvePromise,
        rejectPromise,
        confirmPassword,
        confirmPasswordOnce,
        confirmDanger
    };

    return promise;
}

/**
 * Clears the confirmation modal.
 */
function clearConfirmModal() {
    confirmModal.value = null;
}

const sharedData = ref({});

/**
 * Parses the Laravilt data (shared data, flash data, head, toasts, and validation errors).
 */
function setLaraviltData(laraviltData) {
    persistentLayoutKey.value = laraviltData.persistentLayout;

    sharedData.value = laraviltData.shared ? laraviltData.shared : {};

    _flashData.value[stack.value] = laraviltData.flash ? laraviltData.flash : {};

    _headData.value[stack.value] = laraviltData.head ? laraviltData.head : {};

    forEach(laraviltData.toasts ? laraviltData.toasts : [], (toast) => {
        toasts.value.push(toast);
    });

    _validationErrors.value[stack.value] = laraviltData.errors
        ? laraviltData.errors
        : {};
}

const onHeadFunction = ref(() => { });
const onHtmlFunction = ref(() => { });
const onModalFunction = ref(() => { });
const onServerErrorFunction = ref(() => { });

/**
 * Passes the given head data to the configurable 'onHead' function.
 */
function onHead(head) {
    onHeadFunction.value(head);
}

/**
 * Passes the given HTML and scroll position to the configurable 'onHtml' function.
 */
function onHtml(html, scrollY, animate) {
    onHtmlFunction.value(html, scrollY, animate === true);
}

/**
 * Passes the given modal HTML and type to the configurable 'onModal' function.
 */
function onModal(html, type) {
    stackTypes.value[stack.value] = true;
    onModalFunction.value(html, type);
}

function stackType(stack) {
    return stackTypes.value[stack];
}

/**
 * Passes the given html to the configurable 'onServerError' function.
 */
function onServerError(html) {
    onServerErrorFunction.value(html);
}

const rememberedData = ref({});

/**
 * Stores the given data in the remember-object, and
 * optionally in the browser's local storage.
 */
function remember(key, data, useLocalStorage) {
    rememberedData.value[key] = data;

    if (useLocalStorage) {
        storeInLocalStorage(key, data);
    }
}

/**
 * Helper method to retrieve the remembered data from the browser's local storage.
 */
function getLaraviltDataFromLocalStorage() {
    return JSON.parse(localStorage.getItem("laravilt") || "{}") || {};
}

/**
 * Stores the given data in the browser's local storage.
 */
function storeInLocalStorage(key, data) {
    let allData = getLaraviltDataFromLocalStorage();

    allData[key] = data;

    localStorage.setItem("laravilt", JSON.stringify(allData));
}

/**
 * Retrieves an item from the remember-object or from the browser's local storage.
 */
function restore(key, useLocalStorage) {
    if (useLocalStorage) {
        const laraviltData = getLaraviltDataFromLocalStorage();

        return laraviltData[key];
    }

    return rememberedData.value[key];
}

/**
 * Removes an item from the remember-object or from the browser's local storage.
 */
function forget(key, useLocalStorage) {
    if (useLocalStorage) {
        let allData = getLaraviltDataFromLocalStorage();

        delete allData[key];

        localStorage.setItem("laravilt", JSON.stringify(allData));
    }

    delete rememberedData.value[key];
}
/**
 * Performs an ajax request and returns the promise.
 */
function request(url, method, data, headers, replace, blob) {
    if (!isSsr) {
        // In case the user navigates back to the current page.
        remember("scrollY", window.scrollY);
    }

    if (method.toUpperCase() === "GET") {
        const queryString = new URLSearchParams(data).toString();

        if (queryString != "") {
            let urlWithoutQueryString = url.split("?")[0];
            url = `${urlWithoutQueryString}?${queryString}`;
        }

        data = {};
    }

    emit("internal:request", { url, method, data, headers, replace });

    const promise = Axios({
        method,
        url,
        data,
        headers: {
            "X-Laravilt": true,
            "X-Requested-With": "XMLHttpRequest",
            Accept: "text/html, application/xhtml+xml",
            ...headers,
        },
        responseType: blob ? "blob" : "json",
        onUploadProgress: progress => {
            if (data instanceof FormData) {
                // To update the progress bar.
                progress.percentage = Math.round(progress.loaded / progress.total * 100);
                emit("internal:request-progress", { url, method, data, headers, replace, progress });
            }
        },
    });

    promise
        .then((response) => {
            const hash = url.split("#")[1] || "";
            newPageFromResponse(response, replace, hash);
            emit("internal:request-response", { url, method, data, headers, replace, response });
        })
        .catch(async (error) => {
            emit("internal:request-error", { url, method, data, headers, replace, error });

            if (!error.response) {
                return;
            }

            const response = error.response;

            if (response.status == 409 && response.headers["x-laravilt-redirect-away"]) {
                return window.location = response.headers["x-laravilt-redirect-away"];
            }

            let laraviltData = {};

            // Check if response is a file download
            if (response.data instanceof Blob) {
                const responseText = await response.data.text();

                if (response.data.type === "application/json" && typeof responseText === "string") {
                    laraviltData = JSON.parse(responseText) || {};
                } else {
                    response.data.html = responseText;
                }
            } else {
                // Though the request has failed, it may still
                // return Laravilt data with validation errors.
                laraviltData = response.data.laravilt;
            }

            if (laraviltData) {
                if (!laraviltData.lazy && !laraviltData.rehydrate) {
                    setLaraviltData(laraviltData);
                }
            }

            // Validation errors are handled by the 'setLaraviltData' call.
            if (response.status == 422) {
                return;
            }

            // Show an overlay with the server error.
            onServerError(
                response.data.html
                    ? response.data.html
                    : response.data
            );
        });

    return promise;
}

/**
 * Visits the given URL but replaces the current page instead
 * of pushing a new one to the browser's navigation history.
 */
function replace(url, headers) {
    if (typeof headers === "undefined") {
        headers = {};
    }

    return request(url, "GET", {}, headers, true);
}

/**
 * Visits the given URL.
 */
function visit(url, headers) {
    if (typeof headers === "undefined") {
        headers = {};
    }

    return request(url, "GET", {}, headers, false);
}

/**
 * Visit the given URL in a modal.
 */
function modal(url) {
    return request(url, "GET", {}, { "X-Laravilt-Modal": "modal" }, false);
}


const preloadedModals = ref({});

function openPreloadedModal(name) {
    const modal = preloadedModals.value[name];

    if (!modal) {
        return false;
    }

    stack.value++;
    onModal(modal.html, modal.type);
    return true;
}

function registerPreloadedModal(name, html, type) {
    preloadedModals.value[name] = { html, type };
}

/**
 * Visit the given URL in a slideover.
 */
function slideover(url) {
    return request(url, "GET", {}, { "X-Laravilt-Modal": "slideover" }, false);
}

/**
 * Load a Lazy Component.
 */
function lazy(url, name) {
    return request(url, "GET", {}, { "X-Laravilt-Lazy": name }, false);
}

/**
 * Rehydrate a Component.
 */
function rehydrate(url, name) {
    return request(url, "GET", {}, { "X-Laravilt-Rehydrate": name }, false);
}

/**
 * Refresh the current page with a new visit.
 */
function refresh(preserveScroll) {
    if (typeof preserveScroll === "undefined") {
        preserveScroll = false;
    }

    const headers = {
        "X-Laravilt-Refresh": true,
    };

    if(preserveScroll) {
        headers["X-Laravilt-Preserve-Scroll"] = true;
    }

    return replace(currentPage.value.url, headers);
}

/**
 * Adds the event handler to the Event Bus for the current page.
 */
function on(event, handler) {
    eventBuses[pageVisitId.value].on(event, handler);
}

/**
 * Removes the event handler from the Event Bus for the current page.
 */
function off(event, handler) {
    eventBuses[pageVisitId.value].off(event, handler);
}

/**
 * Emits the given event on the Event Bus for the current page.
 */
function emit(event, data) {
    if (typeof data === "undefined") {
        data = {};
    }

    eventBuses[pageVisitId.value].emit(event, data);

    if(!isSsr) {
        document.dispatchEvent(new CustomEvent(`laravilt:${event}`, { detail: data }));
    }
}

/**
 * Laravilt Core instance.
 */
const Laravilt = {
    init,
    replace,
    visit,
    modal,
    slideover,
    refresh,
    request,
    lazy,
    rehydrate,
    replaceUrlOfCurrentPage,
    htmlForDynamicComponent(name) {
        return currentPage.value.dynamics[name];
    },
    setOnHead(onHead) {
        onHeadFunction.value = onHead;
    },
    setOnHtml(onHtml) {
        onHtmlFunction.value = onHtml;
    },
    setOnModal(onModal) {
        onModalFunction.value = onModal;
    },
    setOnServerError(onServerError) {
        onServerErrorFunction.value = onServerError;
    },
    onServerError,
    hasValidationErrors,
    validationErrors,
    sharedData, // ref
    flashData,
    toasts, // ref
    toastsReversed, // computed
    confirmModal, // ref
    confirm,
    clearConfirmModal,
    pushToast,
    dismissToast,
    restore,
    remember,
    forget,
    popStack,
    currentStack: stack,    // ref
    stackType: stackType,
    pageVisitId: computed(() => currentPage.value.pageVisitId),
    dynamicVisitId: computed(() => currentPage.value.dynamicVisitId),
    isSsr,
    openPreloadedModal,
    registerPreloadedModal,
    on,
    off,
    emit,
};

export { Laravilt };
</file>

<file path="resources/js/core/LaraviltApp.vue">
<template>
  <div>
    <!-- main -->
    <KeepAlive
      v-if="!Laravilt.isSsr"
      :max="$laraviltOptions.max_keep_alive"
    >
      <Render
        :key="`visit.${Laravilt.pageVisitId.value}`"
        :style="backdropStyling"
        :html="html"
      />
    </KeepAlive>

    <Render
      v-else
      :key="`visit.${Laravilt.pageVisitId.value}`"
      :style="backdropStyling"
      :html="html"
    />

    <!-- confirm/toast components -->
    <Render :html="components" />

    <!-- modals -->
    <Render
      v-for="stack in Laravilt.currentStack.value"
      :key="`modal.${stack}`"
      :type="modals[stack].type"
      :html="modals[stack].html"
      :stack="stack"
      :on-top-of-stack="Laravilt.currentStack.value === stack"
      :animate="animateModal"
      @close="closeModal(stack)"
    />

    <!-- server errors -->
    <ServerError
      v-if="serverErrorHtml"
      :html="serverErrorHtml"
      @close="closeServerError"
    />
  </div>
</template>

<script setup>
import { ref, provide, nextTick, inject, computed, onMounted } from "vue";
import { Laravilt } from "./Laravilt.js";
import forOwn from "lodash-es/forOwn";
import isString from "lodash-es/isString";
import Render from "../components/Render.vue";
import ServerError from "../components/ServerError.vue";

/**
 * When the app runs in the browser, it will parse the initial data and components
 * from the div#app attributes. Otherwise, when running an SSR server, that
 * data will be passed as props and the 'el' prop will be empty.
 */
const props = defineProps({
    el: {
        type: [String, Object],
        required: false,
        default: "",
    },

    components: {
        type: String,
        required: false,
        default: (props) => {
            if(!Laravilt.isSsr) {
                const $el = isString(props.el) ? document.getElementById(props.el) : props.el;

                return JSON.parse($el.dataset.components) || "";
            }
        },
    },

    initialHtml: {
        type: String,
        required: false,
        default: (props) => {
            if(!Laravilt.isSsr) {
                const $el = isString(props.el) ? document.getElementById(props.el) : props.el;

                return JSON.parse($el.dataset.html) || "";
            }
        },
    },

    initialDynamics: {
        type: Object,
        required: false,
        default: (props) => {
            if(!Laravilt.isSsr) {
                const $el = isString(props.el) ? document.getElementById(props.el) : props.el;

                return JSON.parse($el.dataset.dynamics) || {};
            }
        },
    },

    initialLaraviltData: {
        type: Object,
        required: false,
        default: (props) => {
            if(!Laravilt.isSsr) {
                const $el = isString(props.el) ? document.getElementById(props.el) : props.el;

                return JSON.parse($el.dataset.laravilt) || {};
            }
        },
    },
});

/**
 * Provide the current stack to other components so they
 * can calculate whether they are on top of the stack.
 */
provide("stack", 0);

const html = ref();
const modals = ref([]);
const serverErrorHtml = ref(null);
const currentMeta = ref(null);
const animateModal = ref(true);
const $laraviltOptions = inject("$laraviltOptions") || {};

/**
 * When a modal or slideover is visible, it blurs the underlying page.
 */
const backdropStyling = computed(() => {
    if(Laravilt.currentStack.value < 1) {
        return [];
    }

    return {
        filter: "blur(4px)",
        "transition-property": "filter",
        "transition-duration": "150ms",
        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
    };
});

/**
 * Hides the Server Error iframe.
 */
function closeServerError() {
    serverErrorHtml.value = null;
}

/**
 * Closes the modal in the given stack count.
 */
function closeModal(stack) {
    modals.value[stack] = null;
    Laravilt.popStack();
}

/**
 * It finds the meta tag with the given attribute and content. If it
 * doesn't exists, we create it and append it to the head.
 */
function insertMetaElement(meta)
{
    const $el = document.createElement("meta");

    forOwn(meta, (value, key) => {
        $el[key] = value;
    });

    document.getElementsByTagName("head")[0].appendChild($el);
}

/**
 * Removes the meta tag by the given meta object.
 */
function removeMetaElement(meta) {
    let selector = "meta";

    forOwn(meta, (content, attribute) => {
        selector = `${selector}[${attribute}="${content}"]`;
    });

    try {
        document.querySelector(selector)?.remove();
    } catch {
        //
    }
}

/**
 * Update the document title and meta tags based on the new head data.
 */
Laravilt.setOnHead((newHead) => {
    if(Laravilt.isSsr) {
        return;
    }

    if(currentMeta.value === null) {
        currentMeta.value = newHead.meta;
        return;
    }

    currentMeta.value.forEach((meta) => {
        removeMetaElement(meta);
    });

    currentMeta.value = newHead.meta;
    document.title = newHead.title;

    newHead.meta.forEach((meta) => {
        insertMetaElement(meta);
    });

    document.querySelector("link[rel=\"canonical\"]")?.remove();

    if(newHead.canonical) {
        const $el = document.createElement("link");
        $el.rel = "canonical";
        $el.href = newHead.canonical;

        document.getElementsByTagName("head")[0].appendChild($el);
    }
});

/**
 * Reset the modals array and set the new HTML. Scroll to the given
 * scroll height and, if configured, attach an click handler to
 * all anchor elements to use Laravilt's SPA capabilities.
 */

const onHtml = (newHtml, scrollY) => {
    modals.value = [];

    html.value = newHtml;

    nextTick(() => {
        if (!Laravilt.isSsr) {
            const hash = window.location.hash;

            if (hash) {
                const element = document.getElementById(hash.substring(1));

                if (element) {
                    // Set it explicitly so the browser scrolls to the element.
                    window.location.hash = hash;
                } else {
                    window.scrollTo(0, scrollY);
                }
            } else {
                window.scrollTo(0, scrollY);
            }
        }

        if ($laraviltOptions.transform_anchors) {
            [...document.querySelectorAll("a")].forEach((anchor) => {
                if (anchor.href == "" || anchor.href.charAt(0) == "#") {
                    return;
                }

                if (anchor.__vnode.dynamicProps !== null) {
                    return;
                }

                if (anchor.hasAttribute("download")) {
                    return;
                }

                anchor.onclick = function (event) {
                    event.preventDefault();
                    Laravilt.visit(anchor.href);
                };
            });
        }
    });
};

Laravilt.setOnHtml((newHtml, scrollY, animate) => {
    if (!Laravilt.isSsr && document.startViewTransition && $laraviltOptions.view_transitions && animate) {
        // With a transition:
        return document.startViewTransition(() => onHtml(newHtml, scrollY));
    }

    // SSR, no animation configuration, and fallback for unsupported browsers:
    onHtml(newHtml, scrollY, false);
});

/**
 * Push the modal HTML and type to the modals array.
 */
Laravilt.setOnModal(function (html, type) {
    if(modals.value[Laravilt.currentStack.value]) {
        animateModal.value = false;
    }

    modals.value[Laravilt.currentStack.value] = { html, type };

    nextTick(() => {
        animateModal.value = true;
    });
});
/**
 * Set the Server Error.
 */
Laravilt.setOnServerError(function (html) {
    serverErrorHtml.value = html;
});

/**
 * Initialize the Laravilt app with the data from the div#app attributes.
 */
Laravilt.init(props.initialHtml, props.initialDynamics, props.initialLaraviltData);

onMounted(() => {
    if(Laravilt.isSsr) {
        return;
    }

    const $el = isString(props.el) ? document.getElementById(props.el) : props.el;

    ["components", "html", "dynamics", "laravilt"].forEach((attribute) => {
        delete $el.dataset[attribute];
    });
});
</script>
</file>

<file path="resources/js/core/LaraviltPlugin.js">
// Helper methods
import forOwn from "lodash-es/forOwn";
import has from "lodash-es/has";
import isObject from "lodash-es/isObject";

// Laravilt Components (currently implemented)
import ComponentRenderer from "../components/ComponentRenderer.vue";
import Link from "../components/Link.vue";
import Modal from "../components/Modal.vue";
import Render from "../components/Render.vue";
import ServerError from "../components/ServerError.vue";

// Laravilt Core app and progress bar
import { Laravilt } from "./Laravilt.js";
import { LaraviltProgress } from "./LaraviltProgress.js";

export default {
    /**
     * Registers all Laravilt components and makes the configured
     * options and the Laravilt core globally available.
     */
    install: (app, options) => {
        // Set the default options
        options = options || {};
        options.max_keep_alive = has(options, "max_keep_alive") ? options.max_keep_alive : 10;
        options.prefix = has(options, "prefix") ? options.prefix : "Laravilt";
        options.transform_anchors = has(options, "transform_anchors") ? options.transform_anchors : false;
        options.link_component = has(options, "link_component") ? options.link_component : "Link";
        options.progress_bar = has(options, "progress_bar") ? options.progress_bar : false;
        options.components = has(options, "components") ? options.components : {};
        options.view_transitions = has(options, "view_transitions") ? options.view_transitions : false;
        options.suppress_compile_errors = has(options, "suppress_compile_errors") ? options.suppress_compile_errors : false;

        // Prefixing Vue components
        const prefix = options.prefix;

        app
            .component(`${prefix}ComponentRenderer`, ComponentRenderer)
            .component(`${prefix}Link`, Link)
            .component(`${prefix}Modal`, Modal)
            .component(`${prefix}Render`, Render)
            .component(`${prefix}ServerError`, ServerError)
            .component(options.link_component, Link);

        // TODO: Add these components as they're implemented
        // .component(`${prefix}Confirm`, Confirm)
        // .component(`${prefix}Data`, Data)
        // .component(`${prefix}DataStores`, DataStores)
        // .component(`${prefix}Toast`, Toast)
        // .component(`${prefix}Toasts`, Toasts)
        // .component(`${prefix}Lazy`, Lazy)
        // .component(`${prefix}Rehydrate`, Rehydrate)
        // .component(`${prefix}Event`, Event)
        // .component(`${prefix}Flash`, Flash)
        // .component(`${prefix}Errors`, Errors)
        // .component(`${prefix}DynamicHtml`, DynamicHtml)
        // .component(`${prefix}PreloadedModal`, PreloadedModal)
        // .component(`${prefix}VueBridge`, VueBridge)
        // .component(`${prefix}State`, State)
        // .component(`${prefix}Transition`, Transition)
        // .component(`${prefix}Teleport`, Teleport)
        // .component(`${prefix}OnClickOutside`, OnClickOutside)
        // .component(`${prefix}Script`, Script)
        // .component(`${prefix}Defer`, Defer)
        // .component(`${prefix}Dialog`, Dialog)
        // .directive(`${prefix}PreserveScroll`, PreserveScrollDirective);

        // This way you can inject the global Laravilt instance and the options
        Object.defineProperty(app.config.globalProperties, "$laravilt", { get: () => Laravilt });
        Object.defineProperty(app.config.globalProperties, "$laraviltOptions", { get: () => Object.assign({}, { ...options }) });
        app.provide("$laravilt", app.config.globalProperties.$laravilt);
        app.provide("$laraviltOptions", app.config.globalProperties.$laraviltOptions);

        if (options.progress_bar) {
            // Set the default config
            const progressDefaults = {
                delay: 250,
                color: "#4B5563",
                css: true,
                spinner: false,
            };

            if(!isObject(options.progress_bar)) {
                options.progress_bar = {};
            }

            // Apply the any custom configuration to the default config
            ["delay", "color", "css", "spinner"].forEach((option) => {
                if(!has(options.progress_bar, option)) {
                    options.progress_bar[option] = progressDefaults[option];
                }
            });

            // Init the progress bar
            LaraviltProgress.init(options.progress_bar);
        }

        if(options.suppress_compile_errors) {
            app.config.compilerOptions.onError = (error) => {
                console.error({
                    message: error.message || "Unknown compiler error",
                    lineNumber: error.lineNumber,
                    compileError: error,
                });
            };
        }

        forOwn(options.components, (definition, name) => {
            app.component(name, definition);
        });
    }
};
</file>

<file path="resources/js/core/LaraviltProgress.js">
const LaraviltProgress = {
    /**
     * Inject the default Progress Bar CSS into the HTML Head.
     */
    injectCSS(color) {
        const element = document.createElement("style");
        element.type = "text/css";
        element.textContent = `
    #nprogress {
      pointer-events: none;
    }
    #nprogress .bar {
      background: ${color};
      position: fixed;
      z-index: 1031;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
    }
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
      width: 100px;
      height: 100%;
      box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
      opacity: 1.0;
      -webkit-transform: rotate(3deg) translate(0px, -4px);
          -ms-transform: rotate(3deg) translate(0px, -4px);
              transform: rotate(3deg) translate(0px, -4px);
    }
    #nprogress .spinner {
      display: block;
      position: fixed;
      z-index: 1031;
      top: 15px;
      right: 15px;
    }
    #nprogress .spinner-icon {
      width: 18px;
      height: 18px;
      box-sizing: border-box;
      border: solid 2px transparent;
      border-top-color: ${color};
      border-left-color: ${color};
      border-radius: 50%;
      -webkit-animation: nprogress-spinner 400ms linear infinite;
              animation: nprogress-spinner 400ms linear infinite;
    }
    .nprogress-custom-parent {
      overflow: hidden;
      position: relative;
    }
    .nprogress-custom-parent #nprogress .spinner,
    .nprogress-custom-parent #nprogress .bar {
      position: absolute;
    }
    @-webkit-keyframes nprogress-spinner {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes nprogress-spinner {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `;
        document.head.appendChild(element);
    },

    timeout: null,

    /**
     * Starts the progress bar with the configured timeout.
     */
    start(event, delay, NProgress) {
        LaraviltProgress.timeout = setTimeout(() => NProgress.start(), delay);
    },

    /**
     * Updates the progress bar to the percentage from the event.
     */
    progress(event, NProgress) {
        if (NProgress.isStarted() && event.detail.progress.percentage) {
            NProgress.set(Math.max(NProgress.status, event.detail.progress.percentage / 100 * 0.9));
        }
    },

    /**
     * Clears the timeout and hides the bar.
     */
    stop(event, NProgress) {
        clearTimeout(LaraviltProgress.timeout);
        NProgress.done();
        NProgress.remove();
    },

    /**
     * Initializes the progress bar and registers event listeners for Laravilt request events.
     */
    init(options) {
        const self = this;
        import("nprogress").then((NProgress) => {
            let pendingRequests = 0;

            document.addEventListener("laravilt:internal:request", (event) => {
                pendingRequests++;

                if (pendingRequests === 1) {
                    self.start(event, options.delay, NProgress.default);
                }
            });

            const stop = (event) => {
                pendingRequests--;

                if (pendingRequests === 0) {
                    self.stop(event, NProgress.default);
                } else if (pendingRequests < 0) {
                    pendingRequests = 0;
                }
            };

            document.addEventListener("laravilt:internal:request-progress", (event) => self.progress(event, NProgress.default));
            document.addEventListener("laravilt:internal:request-response", (event) => stop(event));
            document.addEventListener("laravilt:internal:request-error", (event) => stop(event));

            NProgress.default.configure({ showSpinner: options.spinner });

            if(options.css) {
                this.injectCSS(options.color);
            }
        });
    }
};

export { LaraviltProgress };
</file>

<file path="resources/js/lib/utils.ts">
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
</file>

<file path="resources/js/mixins/component-mixin.js">
/**
 * Component Mixin
 *
 * Reusable Vue component logic for Laravilt components.
 */

export default {
    props: {
        id: String,
        name: String,
        label: String,
        state: null,
        helperText: String,
        hidden: Boolean,
        columnSpan: [Number, String],
        rtl: Boolean,
        theme: String,
        locale: String,
        meta: Object,
    },

    computed: {
        /**
         * Check if component should be visible.
         */
        isVisible() {
            return !this.hidden;
        },

        /**
         * Get CSS classes for RTL support.
         */
        directionClass() {
            return this.rtl ? 'rtl' : 'ltr';
        },

        /**
         * Get CSS classes for theme.
         */
        themeClass() {
            return this.theme || 'light';
        },

        /**
         * Get column span CSS class.
         */
        columnSpanClass() {
            if (!this.columnSpan) return '';

            if (this.columnSpan === 'full') {
                return 'col-span-full';
            }

            return `col-span-${this.columnSpan}`;
        },
    },

    methods: {
        /**
         * Emit component state change.
         */
        updateState(value) {
            this.$emit('update:state', value);
            this.$emit('change', value);
        },

        /**
         * Get translated text.
         */
        trans(key, replacements = {}) {
            let text = key;

            // Replace placeholders
            Object.entries(replacements).forEach(([placeholder, value]) => {
                text = text.replace(`:${placeholder}`, value);
            });

            return text;
        },
    },
};
</file>

<file path="resources/js/utils/event-bus.js">
/**
 * Simple Event Bus for inter-component communication.
 */
export default class EventBus {
    constructor() {
        this.events = new Map();
    }

    /**
     * Register an event listener.
     *
     * @param {string} event - Event name
     * @param {Function} callback - Callback function
     */
    on(event, callback) {
        if (!this.events.has(event)) {
            this.events.set(event, []);
        }
        this.events.get(event).push(callback);
    }

    /**
     * Remove an event listener.
     *
     * @param {string} event - Event name
     * @param {Function} callback - Callback function to remove
     */
    off(event, callback) {
        if (!this.events.has(event)) {
            return;
        }

        const callbacks = this.events.get(event);
        const index = callbacks.indexOf(callback);

        if (index > -1) {
            callbacks.splice(index, 1);
        }
    }

    /**
     * Emit an event.
     *
     * @param {string} event - Event name
     * @param {*} data - Data to pass to listeners
     */
    emit(event, data) {
        if (!this.events.has(event)) {
            return;
        }

        this.events.get(event).forEach(callback => {
            callback(data);
        });
    }

    /**
     * Clear all listeners for an event.
     *
     * @param {string} event - Event name
     */
    clear(event) {
        this.events.delete(event);
    }

    /**
     * Clear all event listeners.
     */
    clearAll() {
        this.events.clear();
    }
}
</file>

<file path="resources/js/utils/navigate.js">
/**
 * Navigate to a URL using SPA navigation.
 *
 * @param {string} url - The URL to navigate to
 * @param {string} method - HTTP method (GET, POST, etc.)
 * @param {boolean} updateHistory - Whether to update browser history
 */
export async function navigate(url, method = 'GET', updateHistory = true) {
    try {
        const options = {
            method,
            headers: {
                'X-Laravilt': 'true',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
            }
        };

        const response = await fetch(url, options);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        // Update page content
        if (data.html) {
            const appElement = document.getElementById('laravilt-app');

            if (appElement) {
                appElement.innerHTML = data.html;

                // Re-mount components
                if (window.Laravilt) {
                    window.Laravilt.unmountAll();
                    window.Laravilt.mountComponents();
                }
            }
        }

        // Update URL in browser
        if (updateHistory) {
            history.pushState({ laravilt: true }, '', url);
        }

        // Dispatch navigation event
        window.dispatchEvent(new CustomEvent('laravilt:navigated', {
            detail: { url, method, data }
        }));

        // Scroll to top
        window.scrollTo(0, 0);

    } catch (error) {
        console.error('[Laravilt] Navigation failed:', error);

        // Fallback to regular navigation
        window.location.href = url;
    }
}

/**
 * Expose navigate function as window.Laravilt.visit() for global access
 */
if (typeof window !== 'undefined') {
    window.Laravilt = window.Laravilt || {};
    window.Laravilt.visit = navigate;
}
</file>

<file path="resources/js/utils/serializer.js">
/**
 * Component Serializer
 *
 * Handles client-side serialization of components.
 */

/**
 * Serialize component data to JSON.
 */
export function serialize(component) {
    return JSON.stringify(component);
}

/**
 * Deserialize JSON to component data.
 */
export function deserialize(json) {
    try {
        return JSON.parse(json);
    } catch (error) {
        console.error('Failed to deserialize component:', error);
        return null;
    }
}

/**
 * Deep clone a component object.
 */
export function clone(component) {
    return deserialize(serialize(component));
}

/**
 * Merge component props.
 */
export function mergeProps(target, source) {
    return Object.assign({}, target, source);
}

/**
 * Extract component data from DOM element.
 */
export function extractFromElement(element) {
    const propsAttr = element.getAttribute('data-laravilt-props');
    return propsAttr ? deserialize(propsAttr) : null;
}
</file>

<file path="resources/js/laravilt-core.js">
/**
 * Laravilt Core
 *
 * Complete SPA framework for Laravel applications.
 * Ported from Splade with full feature parity.
 */

// Core
export { Laravilt } from "./core/Laravilt.js";
export { LaraviltProgress } from "./core/LaraviltProgress.js";
export { default as LaraviltPlugin } from "./core/LaraviltPlugin.js";
export { default as LaraviltApp } from "./core/LaraviltApp.vue";

// Components
export { default as ComponentRenderer } from "./components/ComponentRenderer.vue";
export { default as Link } from "./components/Link.vue";
export { default as Modal } from "./components/Modal.vue";
export { default as Render } from "./components/Render.vue";
export { default as ServerError } from "./components/ServerError.vue";

// Utilities
export { default as EventBus } from "./utils/event-bus.js";
export { navigate } from "./utils/navigate.js";

// Mixins
export { default as componentMixin } from "./mixins/component-mixin.js";

// Default export is the plugin
export { default } from "./core/LaraviltPlugin.js";
</file>

<file path="resources/lang/ar/support.php">
<?php

return [
    'common' => [
        'save' => 'حفظ',
        'cancel' => 'إلغاء',
        'delete' => 'حذف',
        'edit' => 'تعديل',
        'create' => 'إنشاء',
        'update' => 'تحديث',
        'search' => 'بحث',
        'filter' => 'تصفية',
        'clear' => 'مسح',
        'apply' => 'تطبيق',
        'close' => 'إغلاق',
        'open' => 'فتح',
        'submit' => 'إرسال',
        'reset' => 'إعادة تعيين',
        'back' => 'رجوع',
        'next' => 'التالي',
        'previous' => 'السابق',
        'finish' => 'إنهاء',
        'loading' => 'جاري التحميل...',
        'success' => 'نجح!',
        'error' => 'خطأ!',
        'warning' => 'تحذير!',
        'info' => 'معلومات',
    ],

    'actions' => [
        'view' => 'عرض',
        'edit' => 'تعديل',
        'delete' => 'حذف',
        'restore' => 'استعادة',
        'export' => 'تصدير',
        'import' => 'استيراد',
        'download' => 'تنزيل',
        'upload' => 'رفع',
    ],

    'labels' => [
        'name' => 'الاسم',
        'email' => 'البريد الإلكتروني',
        'password' => 'كلمة المرور',
        'remember_me' => 'تذكرني',
        'forgot_password' => 'نسيت كلمة المرور؟',
        'login' => 'تسجيل الدخول',
        'logout' => 'تسجيل الخروج',
        'register' => 'تسجيل',
    ],

    'messages' => [
        'created' => 'تم الإنشاء بنجاح.',
        'updated' => 'تم التحديث بنجاح.',
        'deleted' => 'تم الحذف بنجاح.',
        'restored' => 'تمت الاستعادة بنجاح.',
        'no_results' => 'لم يتم العثور على نتائج.',
        'confirm_delete' => 'هل أنت متأكد من حذف هذا العنصر؟',
    ],
];
</file>

<file path="resources/lang/en/support.php">
<?php

return [
    'common' => [
        'save' => 'Save',
        'cancel' => 'Cancel',
        'delete' => 'Delete',
        'edit' => 'Edit',
        'create' => 'Create',
        'update' => 'Update',
        'search' => 'Search',
        'filter' => 'Filter',
        'clear' => 'Clear',
        'apply' => 'Apply',
        'close' => 'Close',
        'open' => 'Open',
        'submit' => 'Submit',
        'reset' => 'Reset',
        'back' => 'Back',
        'next' => 'Next',
        'previous' => 'Previous',
        'finish' => 'Finish',
        'loading' => 'Loading...',
        'success' => 'Success!',
        'error' => 'Error!',
        'warning' => 'Warning!',
        'info' => 'Info',
    ],

    'actions' => [
        'view' => 'View',
        'edit' => 'Edit',
        'delete' => 'Delete',
        'restore' => 'Restore',
        'export' => 'Export',
        'import' => 'Import',
        'download' => 'Download',
        'upload' => 'Upload',
    ],

    'labels' => [
        'name' => 'Name',
        'email' => 'Email',
        'password' => 'Password',
        'remember_me' => 'Remember Me',
        'forgot_password' => 'Forgot Password?',
        'login' => 'Login',
        'logout' => 'Logout',
        'register' => 'Register',
    ],

    'messages' => [
        'created' => 'Created successfully.',
        'updated' => 'Updated successfully.',
        'deleted' => 'Deleted successfully.',
        'restored' => 'Restored successfully.',
        'no_results' => 'No results found.',
        'confirm_delete' => 'Are you sure you want to delete this item?',
    ],
];
</file>

<file path="resources/views/laravilt-core/components/component.blade.php">
<div
    data-laravilt-component="{{ $name }}"
    data-laravilt-props="{{ json_encode($data) }}"
    data-laravilt-key="{{ uniqid('laravilt-') }}"
>
    {{ $slot }}
</div>
</file>

<file path="resources/views/laravilt-core/components/link.blade.php">
<a
    href="{{ $href }}"
    data-laravilt-link
    data-laravilt-method="{{ $method }}"
    {{ $attributes }}
>
    {{ $slot }}
</a>
</file>

<file path="resources/views/laravilt-core/components/modal.blade.php">
<div
    data-laravilt-modal="{{ $name }}"
    data-laravilt-open="{{ $open ? 'true' : 'false' }}"
    {{ $attributes->merge(['class' => 'laravilt-modal']) }}
>
    @if($title)
        <div class="laravilt-modal-header">
            <h3>{{ $title }}</h3>
        </div>
    @endif
    <div class="laravilt-modal-content">
        {{ $slot }}
    </div>
</div>
</file>

<file path="resources/views/laravilt-core/components/vue-component.blade.php">
<div data-laravilt-vue data-component="{{ $component }}" data-props="{{ json_encode($props) }}"></div>
</file>

<file path="resources/views/laravilt-core/app.blade.php">
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ \Laravilt\Support\Utilities\Translator::direction() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    @stack('styles')
</head>
<body class="{{ session('theme', 'light') }}">
    <div id="laravilt-app">
        @yield('content')
    </div>

    @stack('scripts')
</body>
</html>
</file>

<file path="src/Commands/MakeComponentCommand.php">
<?php

namespace Laravilt\Support\Commands;

use Illuminate\Console\Command;
use Illuminate\Filesystem\Filesystem;
use Illuminate\Support\Str;

/**
 * Make Component Command
 *
 * Generates a new Laravilt component with view template.
 */
class MakeComponentCommand extends Command
{
    protected $signature = 'laravilt:component {name} {--force : Overwrite existing component}';

    protected $description = 'Generate a new Laravilt component';

    protected Filesystem $files;

    public function __construct(Filesystem $files)
    {
        parent::__construct();
        $this->files = $files;
    }

    public function handle(): int
    {
        $name = $this->argument('name');
        $className = Str::studly($name);
        $componentName = Str::kebab($name);

        $this->info("Creating Laravilt component: {$className}");

        // Create component class
        $componentPath = $this->getComponentPath($className);
        if ($this->files->exists($componentPath) && ! $this->option('force')) {
            $this->error("Component {$className} already exists!");

            return self::FAILURE;
        }

        $this->createComponent($componentPath, $className, $componentName);
        $this->info("✓ Created component: {$componentPath}");

        // Create view file
        $viewPath = $this->getViewPath($componentName);
        if ($this->files->exists($viewPath) && ! $this->option('force')) {
            $this->warn("View already exists: {$viewPath}");
        } else {
            $this->createView($viewPath, $componentName);
            $this->info("✓ Created view: {$viewPath}");
        }

        // Success message
        $this->newLine();
        $this->info('Component created successfully!');
        $this->newLine();
        $this->comment('Next steps:');
        $this->comment("1. Customize {$className} in {$componentPath}");
        $this->comment("2. Edit the view template in {$viewPath}");
        $this->comment("3. Use in Blade: {!! {$className}::make('my-id')->render() !!}");

        return self::SUCCESS;
    }

    protected function getComponentPath(string $className): string
    {
        return app_path("Components/{$className}.php");
    }

    protected function getViewPath(string $componentName): string
    {
        return resource_path("views/components/{$componentName}.blade.php");
    }

    protected function createComponent(string $path, string $className, string $componentName): void
    {
        $directory = dirname($path);
        if (! $this->files->isDirectory($directory)) {
            $this->files->makeDirectory($directory, 0755, true);
        }

        $stub = $this->getComponentStub();
        $content = str_replace(
            ['{{className}}', '{{componentName}}'],
            [$className, $componentName],
            $stub
        );

        $this->files->put($path, $content);
    }

    protected function createView(string $path, string $componentName): void
    {
        $directory = dirname($path);
        if (! $this->files->isDirectory($directory)) {
            $this->files->makeDirectory($directory, 0755, true);
        }

        $stub = $this->getViewStub();
        $content = str_replace('{{componentName}}', $componentName, $stub);

        $this->files->put($path, $content);
    }

    protected function getComponentStub(): string
    {
        return <<<'STUB'
<?php

namespace App\Components;

use Laravilt\Support\Component;

class {{className}} extends Component
{
    protected string $view = 'components.{{componentName}}';

    protected string $title = '';
    protected string $description = '';

    public function title(string $title): static
    {
        $this->title = $title;
        return $this;
    }

    public function description(string $description): static
    {
        $this->description = $description;
        return $this;
    }

    public function getTitle(): string
    {
        return $this->evaluate($this->title);
    }

    public function getDescription(): string
    {
        return $this->evaluate($this->description);
    }

    public function toLaraviltProps(): array
    {
        return array_merge(parent::toLaraviltProps(), [
            'title' => $this->getTitle(),
            'description' => $this->getDescription(),
        ]);
    }
}

STUB;
    }

    protected function getViewStub(): string
    {
        return <<<'STUB'
<div class="laravilt-{{componentName}}" data-component="{{ $component->getId() }}">
    @if ($component->getLabel())
        <label class="component-label">{{ $component->getLabel() }}</label>
    @endif

    <div class="component-content">
        @if ($component->getTitle())
            <h3>{{ $component->getTitle() }}</h3>
        @endif

        @if ($component->getDescription())
            <p>{{ $component->getDescription() }}</p>
        @endif

        <div class="component-state">
            {!! $component->getState() !!}
        </div>
    </div>

    @if ($component->getHelperText())
        <small class="helper-text">{{ $component->getHelperText() }}</small>
    @endif
</div>

STUB;
    }
}
</file>

<file path="src/Concerns/CanBeDisabled.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * CanBeDisabled Trait
 *
 * Provides disabled state functionality for components.
 */
trait CanBeDisabled
{
    protected bool|Closure $disabled = false;

    /**
     * Disable the component conditionally.
     */
    public function disabled(bool|Closure $condition = true): static
    {
        $this->disabled = $condition;

        return $this;
    }

    /**
     * Check if component is disabled.
     */
    public function isDisabled(): bool
    {
        return $this->evaluate($this->disabled);
    }

    /**
     * Check if component is enabled.
     */
    public function isEnabled(): bool
    {
        return ! $this->isDisabled();
    }
}
</file>

<file path="src/Concerns/CanBeReadonly.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * CanBeReadonly Trait
 *
 * Provides readonly state functionality for components.
 */
trait CanBeReadonly
{
    protected bool|Closure $readonly = false;

    /**
     * Make the component readonly conditionally.
     */
    public function readonly(bool|Closure $condition = true): static
    {
        $this->readonly = $condition;

        return $this;
    }

    /**
     * Check if component is readonly.
     */
    public function isReadonly(): bool
    {
        return $this->evaluate($this->readonly);
    }
}
</file>

<file path="src/Concerns/CanBeRequired.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * CanBeRequired Trait
 *
 * Provides required state functionality for form fields.
 */
trait CanBeRequired
{
    protected bool|Closure $required = false;

    /**
     * Mark the field as required conditionally.
     */
    public function required(bool|Closure $condition = true): static
    {
        $this->required = $condition;

        return $this;
    }

    /**
     * Check if field is required.
     */
    public function isRequired(): bool
    {
        return $this->evaluate($this->required);
    }
}
</file>

<file path="src/Concerns/HasColumnSpan.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * HasColumnSpan Trait
 *
 * Provides column span functionality for grid-based layouts.
 */
trait HasColumnSpan
{
    protected int|string|Closure|null $columnSpan = null;

    /**
     * Set the column span (e.g., 1, 2, 'full').
     */
    public function columnSpan(int|string|Closure $span): static
    {
        $this->columnSpan = $span;

        return $this;
    }

    /**
     * Make component span full width.
     */
    public function columnSpanFull(): static
    {
        $this->columnSpan = 'full';

        return $this;
    }

    /**
     * Get the column span value.
     */
    public function getColumnSpan(): int|string|null
    {
        return $this->evaluate($this->columnSpan);
    }
}
</file>

<file path="src/Concerns/HasHelperText.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * HasHelperText Trait
 *
 * Provides helper/hint text functionality for components.
 */
trait HasHelperText
{
    protected string|Closure|null $helperText = null;

    protected string|Closure|null $hint = null;

    /**
     * Set helper text for the component.
     */
    public function helperText(string|Closure $text): static
    {
        $this->helperText = $text;

        return $this;
    }

    /**
     * Set hint text (alias for helperText).
     */
    public function hint(string|Closure $text): static
    {
        $this->hint = $text;

        return $this;
    }

    /**
     * Get the helper text.
     */
    public function getHelperText(): ?string
    {
        return $this->evaluate($this->helperText ?? $this->hint);
    }
}
</file>

<file path="src/Concerns/HasId.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * HasId Trait
 *
 * Provides custom ID functionality for components.
 */
trait HasId
{
    protected string|Closure|null $id = null;

    /**
     * Set a custom ID for the component.
     */
    public function id(string|Closure|null $id): static
    {
        $this->id = $id;

        return $this;
    }

    /**
     * Get the component's ID (custom or auto-generated).
     */
    public function getId(): string
    {
        $customId = $this->evaluate($this->id);

        if ($customId) {
            return $customId;
        }

        // Auto-generate ID from name if available
        if (isset($this->name)) {
            return 'laravilt-'.$this->name.'-'.md5($this->name.spl_object_id($this));
        }

        return 'laravilt-'.md5(spl_object_id($this));
    }
}
</file>

<file path="src/Concerns/HasVisibility.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * HasVisibility Trait
 *
 * Provides visibility control (show/hide) for components.
 */
trait HasVisibility
{
    protected bool|Closure|null $hidden = null;

    protected bool|Closure|null $visible = null;

    /**
     * Hide the component conditionally.
     */
    public function hidden(bool|Closure $condition = true): static
    {
        $this->hidden = $condition;
        $this->visible = null; // Reset visible when hidden is set

        return $this;
    }

    /**
     * Show the component conditionally.
     */
    public function visible(bool|Closure $condition = true): static
    {
        $this->visible = $condition;
        $this->hidden = null; // Reset hidden when visible is set

        return $this;
    }

    /**
     * Check if component is hidden.
     */
    public function isHidden(): bool
    {
        // If hidden is explicitly set, evaluate it
        if ($this->hidden !== null) {
            return $this->evaluate($this->hidden) === true;
        }

        // If visible is explicitly set, return opposite
        if ($this->visible !== null) {
            return $this->evaluate($this->visible) === false;
        }

        // Default: not hidden
        return false;
    }

    /**
     * Check if component is visible.
     */
    public function isVisible(): bool
    {
        return ! $this->isHidden();
    }
}
</file>

<file path="src/Contracts/Buildable.php">
<?php

namespace Laravilt\Support\Contracts;

/**
 * Buildable Contract
 *
 * Defines components that can be instantiated via make() factory pattern.
 */
interface Buildable
{
    /**
     * Create a new component instance using the factory pattern.
     *
     * @param  string  $name  The unique name/identifier for this component
     */
    public static function make(string $name): static;
}
</file>

<file path="src/Contracts/FlutterSerializable.php">
<?php

namespace Laravilt\Support\Contracts;

interface FlutterSerializable
{
    /**
     * Serialize the component to Flutter props.
     *
     * @return array<string, mixed>
     */
    public function toFlutterProps(): array;
}
</file>

<file path="src/Contracts/HasLabel.php">
<?php

namespace Laravilt\Support\Contracts;

use Closure;

/**
 * HasLabel Contract
 *
 * Defines components that support labels.
 */
interface HasLabel
{
    /**
     * Set the component's label.
     */
    public function label(string|Closure $label): static;

    /**
     * Get the component's label.
     */
    public function getLabel(): ?string;
}
</file>

<file path="src/Contracts/HasState.php">
<?php

namespace Laravilt\Support\Contracts;

/**
 * HasState Contract
 *
 * Defines components that maintain internal state.
 */
interface HasState
{
    /**
     * Set the component's state/value.
     */
    public function state(mixed $state): static;

    /**
     * Get the component's current state/value.
     */
    public function getState(): mixed;
}
</file>

<file path="src/Contracts/InertiaSerializable.php">
<?php

namespace Laravilt\Support\Contracts;

interface InertiaSerializable
{
    /**
     * Serialize the component to Inertia props for Vue.
     *
     * @return array<string, mixed>
     */
    public function toInertiaProps(): array;
}
</file>

<file path="src/Contracts/Serializable.php">
<?php

namespace Laravilt\Support\Contracts;

/**
 * Serializable Contract
 *
 * Defines components that can be serialized to different formats.
 */
interface Serializable
{
    /**
     * Serialize component for Laravilt (Blade + Vue.js).
     */
    public function toLaraviltProps(): array;

    /**
     * Serialize component for REST API.
     */
    public function toApiProps(): array;

    /**
     * Serialize component for Flutter.
     */
    public function toFlutterProps(): array;
}
</file>

<file path="src/Facades/Laravilt.php">
<?php

namespace Laravilt\Support\Facades;

use Illuminate\Support\Facades\Facade;
use Laravilt\Auth\AuthManager;

/**
 * Laravilt Facade
 *
 * Main facade for accessing Laravilt services.
 *
 * @method static AuthManager auth()
 * @method static mixed component(string $name, array $data)
 * @method static string generateKey()
 * @method static bool isLaraviltRequest()
 * @method static bool wantsJson()
 *
 * @see \Laravilt\Support\LaraviltCore\LaraviltCore
 */
class Laravilt extends Facade
{
    /**
     * Get the registered name of the component.
     */
    protected static function getFacadeAccessor(): string
    {
        return 'laravilt';
    }

    /**
     * Get the AuthManager instance.
     */
    public static function auth(): AuthManager
    {
        return app('laravilt.auth');
    }
}
</file>

<file path="src/LaraviltCore/Blade/Components/Component.php">
<?php

namespace Laravilt\Support\LaraviltCore\Blade\Components;

use Illuminate\View\Component as BladeComponent;

/**
 * Laravilt Blade Component
 *
 * Renders a Laravilt component in Blade templates.
 * Usage: <x-laravilt-component name="my-component" :data="$data" />
 */
class Component extends BladeComponent
{
    public function __construct(
        public string $name,
        public array $data = []
    ) {}

    public function render()
    {
        return view('laravilt-support::laravilt-core.components.component', [
            'name' => $this->name,
            'data' => $this->data,
        ]);
    }
}
</file>

<file path="src/LaraviltCore/Blade/Components/Link.php">
<?php

namespace Laravilt\Support\LaraviltCore\Blade\Components;

use Illuminate\View\Component as BladeComponent;

/**
 * Laravilt Link Component
 *
 * Renders an SPA-enabled link.
 * Usage: <x-laravilt-link href="/path">Link Text</x-laravilt-link>
 */
class Link extends BladeComponent
{
    public function __construct(
        public string $href,
        public ?string $method = 'GET'
    ) {}

    public function render()
    {
        return view('laravilt-support::laravilt-core.components.link');
    }
}
</file>

<file path="src/LaraviltCore/Blade/Components/Modal.php">
<?php

namespace Laravilt\Support\LaraviltCore\Blade\Components;

use Illuminate\View\Component as BladeComponent;

/**
 * Laravilt Modal Component
 *
 * Renders a modal dialog.
 * Usage: <x-laravilt-modal name="my-modal" :open="true">Content</x-laravilt-modal>
 */
class Modal extends BladeComponent
{
    public function __construct(
        public string $name,
        public bool $open = false,
        public ?string $title = null
    ) {}

    public function render()
    {
        return view('laravilt-support::laravilt-core.components.modal');
    }
}
</file>

<file path="src/LaraviltCore/Blade/Components/VueComponent.php">
<?php

namespace Laravilt\Support\LaraviltCore\Blade\Components;

use Illuminate\View\Component as BladeComponent;

/**
 * Vue Component Blade Wrapper
 *
 * Renders a Vue component placeholder in Blade that gets hydrated on the frontend.
 * Similar to Splade's approach where Blade templates contain Vue component markers.
 *
 * Usage: <x-laravilt-vue-component component="Tabs" :props="['tabs' => $tabs]" />
 */
class VueComponent extends BladeComponent
{
    public function __construct(
        public string $component,
        public array $props = []
    ) {}

    public function render()
    {
        return view('laravilt-support::laravilt-core.components.vue-component', [
            'component' => $this->component,
            'props' => $this->props,
        ]);
    }
}
</file>

<file path="src/LaraviltCore/Bridge/ComponentSerializer.php">
<?php

namespace Laravilt\Support\LaraviltCore\Bridge;

use Laravilt\Support\Component;

/**
 * Component Serializer
 *
 * Handles serialization of components for different platforms.
 */
class ComponentSerializer
{
    /**
     * Serialize a component for Laravilt (Blade + Vue).
     */
    public static function toLaravilt(Component $component): array
    {
        return $component->toLaraviltProps();
    }

    /**
     * Serialize a component for REST API.
     */
    public static function toApi(Component $component): array
    {
        return $component->toApiProps();
    }

    /**
     * Serialize a component for Flutter.
     */
    public static function toFlutter(Component $component): array
    {
        return $component->toFlutterProps();
    }

    /**
     * Serialize multiple components.
     */
    public static function serializeMany(array $components, string $format = 'laravilt'): array
    {
        return array_map(function ($component) use ($format) {
            return match ($format) {
                'api' => static::toApi($component),
                'flutter' => static::toFlutter($component),
                default => static::toLaravilt($component),
            };
        }, $components);
    }

    /**
     * Serialize a component to JSON.
     */
    public static function toJson(Component $component, string $format = 'laravilt'): string
    {
        $data = match ($format) {
            'api' => static::toApi($component),
            'flutter' => static::toFlutter($component),
            default => static::toLaravilt($component),
        };

        return json_encode($data);
    }
}
</file>

<file path="src/LaraviltCore/Bridge/RequestHandler.php">
<?php

namespace Laravilt\Support\LaraviltCore\Bridge;

use Illuminate\Http\Request;

/**
 * Request Handler
 *
 * Handles incoming Laravilt requests.
 */
class RequestHandler
{
    /**
     * Check if the current request is a Laravilt request.
     */
    public static function isLaraviltRequest(Request $request): bool
    {
        return $request->header('X-Laravilt') === 'true';
    }

    /**
     * Check if the request wants JSON.
     */
    public static function wantsJson(Request $request): bool
    {
        return static::isLaraviltRequest($request) || $request->wantsJson();
    }

    /**
     * Get request data for component hydration.
     */
    public static function getComponentData(Request $request): array
    {
        return [
            'route' => $request->route()?->getName(),
            'url' => $request->url(),
            'method' => $request->method(),
            'params' => $request->all(),
            'laravilt' => static::isLaraviltRequest($request),
        ];
    }

    /**
     * Extract component props from request.
     */
    public static function extractProps(Request $request, string $key = 'component'): ?array
    {
        $data = $request->input($key);

        if (is_string($data)) {
            return json_decode($data, true);
        }

        return $data;
    }
}
</file>

<file path="src/LaraviltCore/Http/Controllers/LaraviltController.php">
<?php

namespace Laravilt\Support\LaraviltCore\Http\Controllers;

use Illuminate\Http\JsonResponse;
use Illuminate\Routing\Controller;

/**
 * Laravilt Controller
 *
 * Base controller for Laravilt SPA requests.
 */
class LaraviltController extends Controller
{
    /**
     * Return JSON response for Laravilt SPA.
     */
    protected function laraviltResponse(string $html, array $data = []): JsonResponse
    {
        return response()->json(array_merge([
            'html' => $html,
            'laravilt' => true,
        ], $data));
    }

    /**
     * Return error response for Laravilt SPA.
     */
    protected function laraviltError(string $message, int $status = 400): JsonResponse
    {
        return response()->json([
            'error' => $message,
            'laravilt' => true,
        ], $status);
    }
}
</file>

<file path="src/LaraviltCore/Http/Middleware/LaraviltMiddleware.php">
<?php

namespace Laravilt\Support\LaraviltCore\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Laravilt\Support\LaraviltCore\LaraviltCore;
use Symfony\Component\HttpFoundation\Response;

/**
 * Laravilt Middleware
 *
 * Handles Laravilt SPA requests and responses.
 */
class LaraviltMiddleware
{
    /**
     * Handle an incoming request.
     */
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);

        // Only process Laravilt requests
        if (! LaraviltCore::isLaraviltRequest()) {
            return $response;
        }

        // If response is already JSON, return as-is
        if ($response->headers->get('Content-Type') === 'application/json') {
            return $response;
        }

        // Convert HTML response to JSON for SPA
        if ($response->getStatusCode() === 200 && method_exists($response, 'getContent')) {
            $content = $response->getContent();

            return response()->json([
                'html' => $content,
                'dynamics' => [],
                'laravilt' => [
                    'head' => [
                        'title' => $this->extractTitle($content),
                    ],
                    'shared' => [],
                    'flash' => [],
                    'errors' => session()->get('errors', new \Illuminate\Support\MessageBag)->toArray(),
                    'toasts' => [],
                    'persistentLayout' => null,
                    'modal' => false,
                    'preventRefresh' => false,
                ],
            ]);
        }

        return $response;
    }

    /**
     * Extract title from HTML content.
     */
    protected function extractTitle(string $html): ?string
    {
        if (preg_match('/<title>(.*?)<\/title>/i', $html, $matches)) {
            return $matches[1];
        }

        return null;
    }
}
</file>

<file path="src/LaraviltCore/LaraviltCore.php">
<?php

namespace Laravilt\Support\LaraviltCore;

/**
 * Laravilt Core
 *
 * Main class for Laravilt SPA functionality.
 * Handles component registration, request detection, and key generation.
 */
class LaraviltCore
{
    /**
     * Register a component with Laravilt.
     */
    public static function component(string $name, array $data): array
    {
        return [
            'laravilt' => [
                'component' => $name,
                'data' => $data,
                'key' => static::generateKey(),
            ],
        ];
    }

    /**
     * Generate unique component key.
     */
    public static function generateKey(): string
    {
        return 'laravilt-'.uniqid('', true);
    }

    /**
     * Check if current request is a Laravilt SPA request.
     */
    public static function isLaraviltRequest(): bool
    {
        return request()->header('X-Laravilt') === 'true';
    }

    /**
     * Check if current request expects JSON response.
     */
    public static function wantsJson(): bool
    {
        return static::isLaraviltRequest() || request()->wantsJson();
    }
}
</file>

<file path="src/LaraviltCore/LaraviltServiceProvider.php">
<?php

namespace Laravilt\Support\LaraviltCore;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
use Laravilt\Support\LaraviltCore\Blade\Components\Component;
use Laravilt\Support\LaraviltCore\Blade\Components\Link;
use Laravilt\Support\LaraviltCore\Blade\Components\Modal;
use Laravilt\Support\LaraviltCore\Blade\Components\VueComponent;

/**
 * Laravilt Core Service Provider
 *
 * Registers Laravilt Core functionality including Blade components.
 */
class LaraviltServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        // Register core singleton
        $this->app->singleton(LaraviltCore::class);

        // Register main Laravilt singleton
        $this->app->singleton('laravilt', function ($app) {
            return $app->make(LaraviltCore::class);
        });

        // Register AuthManager singleton
        if (class_exists(\Laravilt\Auth\AuthManager::class)) {
            $this->app->singleton('laravilt.auth', function ($app) {
                return new \Laravilt\Auth\AuthManager(
                    $app->make(\Illuminate\Contracts\Auth\Factory::class),
                    $app->make(\Illuminate\Http\Request::class)
                );
            });
        }
    }

    public function boot(): void
    {
        // Load views for laravilt-core namespace
        $this->loadViewsFrom(__DIR__.'/../../resources/views/laravilt-core', 'laravilt-core');

        // Register Blade components
        Blade::component('laravilt-component', Component::class);
        Blade::component('laravilt-vue-component', VueComponent::class);
        Blade::component('laravilt-link', Link::class);
        Blade::component('laravilt-modal', Modal::class);

        // Register custom Blade directives
        $this->registerBladeDirectives();
    }

    /**
     * Register custom Blade directives.
     */
    protected function registerBladeDirectives(): void
    {
        // @laravilt directive for checking Laravilt requests
        Blade::if('laravilt', function () {
            return LaraviltCore::isLaraviltRequest();
        });
    }
}
</file>

<file path="src/Mcp/Tools/GenerateComponentTool.php">
<?php

namespace Laravilt\Support\Mcp\Tools;

use Illuminate\JsonSchema\JsonSchema;
use Laravel\Mcp\Request;
use Laravel\Mcp\Response;
use Laravel\Mcp\Server\Tool;

class GenerateComponentTool extends Tool
{
    protected string $description = 'Generate a custom component class extending the base Component';

    public function handle(Request $request): Response
    {
        $name = $request->string('name');

        $command = 'php '.base_path('artisan').' make:component "'.$name.'" --no-interaction';

        if ($request->boolean('force', false)) {
            $command .= ' --force';
        }

        exec($command, $output, $returnCode);

        if ($returnCode === 0) {
            $response = "✅ Component '{$name}' created successfully!\n\n";
            $response .= "📖 Location: app/Components/{$name}.php\n\n";
            $response .= "📦 Available concerns: CanBeDisabled, HasLabel, HasState, HasVisibility, and more\n";

            return Response::text($response);
        } else {
            return Response::text('❌ Failed to create component: '.implode("\n", $output));
        }
    }

    public function schema(JsonSchema $schema): array
    {
        return [
            'name' => $schema->string()
                ->description('Component class name in StudlyCase (e.g., "RatingInput")')
                ->required(),
            'force' => $schema->boolean()
                ->description('Overwrite existing file')
                ->default(false),
        ];
    }
}
</file>

<file path="src/Utilities/Translator.php">
<?php

namespace Laravilt\Support\Utilities;

/**
 * Translator Utility
 *
 * Provides translation helpers and RTL detection.
 */
class Translator
{
    /**
     * RTL locales.
     */
    protected static array $rtlLocales = [
        'ar', // Arabic
        'he', // Hebrew
        'fa', // Persian/Farsi
        'ur', // Urdu
        'yi', // Yiddish
        'ji', // Yiddish (alternative)
        'iw', // Hebrew (alternative)
    ];

    /**
     * Check if a locale is RTL.
     */
    public static function isRTL(?string $locale = null): bool
    {
        if ($locale === null) {
            // Try to get locale from app, fallback to 'en' if not available
            $app = app();
            if (method_exists($app, 'getLocale')) {
                $locale = $app->getLocale();
            } else {
                $locale = 'en';
            }
        }

        return in_array($locale, static::$rtlLocales);
    }

    /**
     * Get the text direction for a locale.
     *
     * @return string 'rtl' or 'ltr'
     */
    public static function direction(?string $locale = null): string
    {
        return static::isRTL($locale) ? 'rtl' : 'ltr';
    }

    /**
     * Get list of RTL locales.
     */
    public static function getRTLLocales(): array
    {
        return static::$rtlLocales;
    }

    /**
     * Add a locale to the RTL list.
     */
    public static function addRTLLocale(string $locale): void
    {
        if (! in_array($locale, static::$rtlLocales)) {
            static::$rtlLocales[] = $locale;
        }
    }
}
</file>

<file path="tests/Feature/DebugTest.php">
<?php

it('will not use debugging functions', function () {
    expect(['dd', 'dump', 'ray'])->each->not->toBeUsed();
});
</file>

<file path="tests/Unit/Concerns/CanBeDisabledTest.php">
<?php

use Laravilt\Support\Concerns\CanBeDisabled;
use Laravilt\Support\Concerns\EvaluatesClosures;

beforeEach(function () {
    $this->subject = new class
    {
        use CanBeDisabled;
        use EvaluatesClosures;
    };
});

it('is enabled by default', function () {
    expect($this->subject->isEnabled())->toBeTrue()
        ->and($this->subject->isDisabled())->toBeFalse();
});

it('can be disabled', function () {
    $this->subject->disabled();

    expect($this->subject->isDisabled())->toBeTrue()
        ->and($this->subject->isEnabled())->toBeFalse();
});

it('can be conditionally disabled', function () {
    $this->subject->disabled(true);
    expect($this->subject->isDisabled())->toBeTrue();

    $this->subject->disabled(false);
    expect($this->subject->isDisabled())->toBeFalse();
});

it('evaluates closure for disabled condition', function () {
    $shouldDisable = false;
    $this->subject->disabled(function () use (&$shouldDisable) {
        return $shouldDisable;
    });

    expect($this->subject->isDisabled())->toBeFalse();

    $shouldDisable = true;
    expect($this->subject->isDisabled())->toBeTrue();
});
</file>

<file path="tests/Unit/Concerns/CanBeReadonlyTest.php">
<?php

use Laravilt\Support\Concerns\CanBeReadonly;
use Laravilt\Support\Concerns\EvaluatesClosures;

beforeEach(function () {
    $this->subject = new class
    {
        use CanBeReadonly;
        use EvaluatesClosures;
    };
});

it('is not readonly by default', function () {
    expect($this->subject->isReadonly())->toBeFalse();
});

it('can be readonly', function () {
    $this->subject->readonly();

    expect($this->subject->isReadonly())->toBeTrue();
});

it('can be conditionally readonly', function () {
    $this->subject->readonly(true);
    expect($this->subject->isReadonly())->toBeTrue();

    $this->subject->readonly(false);
    expect($this->subject->isReadonly())->toBeFalse();
});

it('evaluates closure for readonly condition', function () {
    $shouldBeReadonly = false;
    $this->subject->readonly(function () use (&$shouldBeReadonly) {
        return $shouldBeReadonly;
    });

    expect($this->subject->isReadonly())->toBeFalse();

    $shouldBeReadonly = true;
    expect($this->subject->isReadonly())->toBeTrue();
});
</file>

<file path="tests/Unit/Concerns/CanBeRequiredTest.php">
<?php

use Laravilt\Support\Concerns\CanBeRequired;
use Laravilt\Support\Concerns\EvaluatesClosures;

beforeEach(function () {
    $this->subject = new class
    {
        use CanBeRequired;
        use EvaluatesClosures;
    };
});

it('is not required by default', function () {
    expect($this->subject->isRequired())->toBeFalse();
});

it('can be required', function () {
    $this->subject->required();

    expect($this->subject->isRequired())->toBeTrue();
});

it('can be conditionally required', function () {
    $this->subject->required(true);
    expect($this->subject->isRequired())->toBeTrue();

    $this->subject->required(false);
    expect($this->subject->isRequired())->toBeFalse();
});

it('evaluates closure for required condition', function () {
    $shouldBeRequired = false;
    $this->subject->required(function () use (&$shouldBeRequired) {
        return $shouldBeRequired;
    });

    expect($this->subject->isRequired())->toBeFalse();

    $shouldBeRequired = true;
    expect($this->subject->isRequired())->toBeTrue();
});
</file>

<file path="tests/Unit/Concerns/HasVisibilityTest.php">
<?php

use Laravilt\Support\Concerns\EvaluatesClosures;
use Laravilt\Support\Concerns\HasVisibility;

beforeEach(function () {
    $this->subject = new class
    {
        use EvaluatesClosures;
        use HasVisibility;
    };
});

it('is visible by default', function () {
    expect($this->subject->isVisible())->toBeTrue()
        ->and($this->subject->isHidden())->toBeFalse();
});

it('can be hidden', function () {
    $this->subject->hidden();

    expect($this->subject->isHidden())->toBeTrue()
        ->and($this->subject->isVisible())->toBeFalse();
});

it('can be shown', function () {
    $this->subject->hidden();
    $this->subject->visible();

    expect($this->subject->isVisible())->toBeTrue()
        ->and($this->subject->isHidden())->toBeFalse();
});

it('can be conditionally hidden', function () {
    $this->subject->hidden(true);
    expect($this->subject->isHidden())->toBeTrue();

    $this->subject->hidden(false);
    expect($this->subject->isHidden())->toBeFalse();
});

it('can be conditionally visible', function () {
    $this->subject->visible(true);
    expect($this->subject->isVisible())->toBeTrue();

    $this->subject->visible(false);
    expect($this->subject->isVisible())->toBeFalse();
});

it('evaluates closure for hidden condition', function () {
    $shouldHide = false;
    $this->subject->hidden(function () use (&$shouldHide) {
        return $shouldHide;
    });

    expect($this->subject->isHidden())->toBeFalse();

    $shouldHide = true;
    expect($this->subject->isHidden())->toBeTrue();
});

it('evaluates closure for visible condition', function () {
    $shouldShow = true;
    $this->subject->visible(function () use (&$shouldShow) {
        return $shouldShow;
    });

    expect($this->subject->isVisible())->toBeTrue();

    $shouldShow = false;
    expect($this->subject->isVisible())->toBeFalse();
});

it('hidden takes precedence over visible', function () {
    $this->subject->visible(true);
    $this->subject->hidden(true);

    expect($this->subject->isHidden())->toBeTrue();
});
</file>

<file path="tests/Unit/Concerns/InteractsWithStateTest.php">
<?php

use Laravilt\Support\Concerns\InteractsWithState;

beforeEach(function () {
    $this->subject = new class
    {
        use InteractsWithState;
    };
});

it('has no state by default', function () {
    expect($this->subject->hasState())->toBeFalse()
        ->and($this->subject->getState())->toBeNull();
});

it('can set and get state', function () {
    $this->subject->state('test value');

    expect($this->subject->getState())->toBe('test value')
        ->and($this->subject->hasState())->toBeTrue();
});

it('can set default state', function () {
    $this->subject->default('default value');

    expect($this->subject->getState())->toBe('default value');
});

it('state takes precedence over default', function () {
    $this->subject->default('default value');
    $this->subject->state('actual value');

    expect($this->subject->getState())->toBe('actual value');
});

it('can set state to various types', function () {
    $this->subject->state(42);
    expect($this->subject->getState())->toBe(42);

    $this->subject->state(['array']);
    expect($this->subject->getState())->toBe(['array']);

    $this->subject->state(true);
    expect($this->subject->getState())->toBeTrue();
});

it('can set state to null explicitly', function () {
    $this->subject->state('value');
    $this->subject->state(null);

    expect($this->subject->hasState())->toBeFalse();
});
</file>

<file path="tests/Unit/ComponentTest.php">
<?php

use Laravilt\Support\Component;

beforeEach(function () {
    $this->component = new class('test-component') extends Component
    {
        protected string $view = 'test-view';

        public function __construct(string $name)
        {
            $this->name = $name;
            $this->setUp();
        }
    };
});

it('can be instantiated with make method', function () {
    $component = TestComponent::make('test');

    expect($component)->toBeInstanceOf(TestComponent::class)
        ->and($component->getName())->toBe('test');
});

it('has a unique name', function () {
    expect($this->component->getName())->toBe('test-component');
});

it('generates unique ID', function () {
    $id = $this->component->getId();

    expect($id)->toBeString()
        ->and($id)->toContain('laravilt-');
});

it('can set custom ID', function () {
    $this->component->id('custom-id');

    expect($this->component->getId())->toBe('custom-id');
});

it('can set and get label', function () {
    $this->component->label('Test Label');

    expect($this->component->getLabel())->toBe('Test Label');
});

it('can set and get placeholder', function () {
    $this->component->placeholder('Enter text');

    expect($this->component->getPlaceholder())->toBe('Enter text');
});

it('can set and get helper text', function () {
    $this->component->helperText('This is a hint');

    expect($this->component->getHelperText())->toBe('This is a hint');
});

it('can set and get state', function () {
    $this->component->state('test value');

    expect($this->component->getState())->toBe('test value')
        ->and($this->component->hasState())->toBeTrue();
});

it('returns default state when no state is set', function () {
    $this->component->default('default value');

    expect($this->component->getState())->toBe('default value');
});

it('can be hidden', function () {
    $this->component->hidden();

    expect($this->component->isHidden())->toBeTrue()
        ->and($this->component->isVisible())->toBeFalse();
});

it('can be shown', function () {
    $this->component->hidden();
    $this->component->visible();

    expect($this->component->isVisible())->toBeTrue()
        ->and($this->component->isHidden())->toBeFalse();
});

it('can be disabled', function () {
    $this->component->disabled();

    expect($this->component->isDisabled())->toBeTrue()
        ->and($this->component->isEnabled())->toBeFalse();
});

it('can be readonly', function () {
    $this->component->readonly();

    expect($this->component->isReadonly())->toBeTrue();
});

it('can be required', function () {
    $this->component->required();

    expect($this->component->isRequired())->toBeTrue();
});

it('can set column span', function () {
    $this->component->columnSpan(6);

    expect($this->component->getColumnSpan())->toBe(6);
});

it('can set full column span', function () {
    $this->component->columnSpanFull();

    expect($this->component->getColumnSpan())->toBe('full');
});

it('can set metadata', function () {
    $this->component->meta(['key' => 'value']);

    expect($this->component->getMeta())->toBe(['key' => 'value']);
});

it('can merge metadata', function () {
    $this->component->meta(['key1' => 'value1']);
    $this->component->meta(['key2' => 'value2']);

    expect($this->component->getMeta())->toBe([
        'key1' => 'value1',
        'key2' => 'value2',
    ]);
});

it('serializes to laravilt props', function () {
    $this->component
        ->label('Test Label')
        ->placeholder('Test Placeholder')
        ->helperText('Test Helper')
        ->state('test value')
        ->required()
        ->disabled();

    $props = $this->component->toLaraviltProps();

    expect($props)->toHaveKeys([
        'component',
        'id',
        'name',
        'state',
        'label',
        'placeholder',
        'helperText',
        'hidden',
        'disabled',
        'readonly',
        'required',
        'columnSpan',
        'rtl',
        'theme',
        'locale',
        'meta',
    ])
        ->and($props['name'])->toBe('test-component')
        ->and($props['label'])->toBe('Test Label')
        ->and($props['placeholder'])->toBe('Test Placeholder')
        ->and($props['helperText'])->toBe('Test Helper')
        ->and($props['state'])->toBe('test value')
        ->and($props['required'])->toBeTrue()
        ->and($props['disabled'])->toBeTrue();
});

it('converts to array', function () {
    $array = $this->component->toArray();

    expect($array)->toBeArray()
        ->and($array)->toHaveKey('component');
});

it('converts to json', function () {
    $json = $this->component->toJson();

    expect($json)->toBeString()
        ->and(json_decode($json, true))->toBeArray();
});

it('evaluates closures for dynamic values', function () {
    $this->component->label(fn () => 'Dynamic Label');

    expect($this->component->getLabel())->toBe('Dynamic Label');
});

it('evaluates closures for conditional visibility', function () {
    $show = false;
    $this->component->visible(function () use (&$show) {
        return $show;
    });

    expect($this->component->isVisible())->toBeFalse();

    $show = true;
    expect($this->component->isVisible())->toBeTrue();
});

it('gets component type as snake_case', function () {
    $component = TestInputComponent::make('test');
    $props = $component->toLaraviltProps();

    expect($props['component'])->toBe('test_input_component');
});

it('renders to html when visible', function () {
    $this->component->label('Test Label');
    $this->component->state('Test Content');

    $html = $this->component->render();

    expect($html)->toBeString()
        ->and($html)->toContain('test-component')
        ->and($html)->toContain('Test Label')
        ->and($html)->toContain('Test Content');
});

it('renders empty string when hidden', function () {
    $this->component->hidden();
    $html = $this->component->render();

    expect($html)->toBe('');
});

// Helper test components
class TestComponent extends Component
{
    protected string $view = 'test-view';
}

class TestInputComponent extends Component
{
    protected string $view = 'test-input-view';
}
</file>

<file path="tests/views/test-view.blade.php">
<div class="test-component" data-id="{{ $component->getId() }}">
    @if ($component->getLabel())
        <label>{{ $component->getLabel() }}</label>
    @endif

    @if ($component->getState())
        <div class="content">{!! $component->getState() !!}</div>
    @endif

    @if ($component->getHelperText())
        <small>{{ $component->getHelperText() }}</small>
    @endif
</div>
</file>

<file path="tests/Pest.php">
<?php

use Laravilt\Support\Tests\TestCase;

uses(TestCase::class)->in(__DIR__);
</file>

<file path=".gitignore">
.idea
.phpunit.cache
.phpunit.result.cache
.DS_Store
Thumbs.db
/vendor/
/node_modules/
/.vscode/
composer.lock
package-lock.json
*.log
.env
.env.backup
.env.production
/dist/
/build/
</file>

<file path=".npmignore">
# Development files
node_modules
.env
.env.*
!.env.example

# Build files
.vite
vite.config.ts.timestamp-*

# Testing
tests
*.test.ts
*.test.js
*.spec.ts
*.spec.js
coverage
.nyc_output

# IDE
.vscode
.idea
*.swp
*.swo
*~

# PHP/Composer files
vendor
composer.json
composer.lock
phpunit.xml
phpunit.xml.dist
.phpunit.result.cache

# Laravel specific
bootstrap/cache
storage
database
routes
config
.artisan

# Git
.git
.gitignore
.gitattributes

# CI/CD
.github
.gitlab-ci.yml
.travis.yml

# Documentation source
docs

# Source maps
*.map

# Lock files (optional - you might want to include these)
package-lock.json
yarn.lock
pnpm-lock.yaml
</file>

<file path=".npmrc">
@laravilt:registry=https://npm.pkg.github.com
</file>

<file path="CHANGELOG.md">
# Changelog

All notable changes to `Support` will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Added
- Initial release

### Changed

### Deprecated

### Removed

### Fixed

### Security
</file>

<file path="CODE_OF_CONDUCT.md">
# Contributor Covenant Code of Conduct

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

## Our Standards

Examples of behavior that contributes to a positive environment for our
community include:

* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
  overall community

Examples of unacceptable behavior include:

* The use of sexualized language or imagery, and sexual attention or
  advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
  address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Enforcement Responsibilities

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

## Scope

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement.

All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org),
version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
</file>

<file path="LICENSE.md">
MIT License

Copyright (c) 2025 Fady Mondy

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
</file>

<file path="phpstan.neon">
includes:
    - phpstan-baseline.neon

parameters:
    level: 5
    paths:
        - src
    tmpDir: build/phpstan
    checkOctaneCompatibility: true
    checkModelProperties: true
    checkMissingIterableValueType: false
</file>

<file path="phpunit.xml">
<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/11.0/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
    <testsuites>
        <testsuite name="Test Suite">
            <directory suffix="Test.php">./tests</directory>
        </testsuite>
    </testsuites>
    <coverage>
        <report>
            <html outputDirectory="build/coverage"/>
            <text outputFile="build/coverage.txt"/>
            <clover outputFile="build/logs/clover.xml"/>
        </report>
    </coverage>
    <source>
        <include>
            <directory suffix=".php">./src</directory>
        </include>
    </source>
</phpunit>
</file>

<file path="pint.json">
{
    "preset": "laravel",
    "rules": {
        "simplified_null_return": true,
        "braces": false,
        "new_with_braces": {
            "anonymous_class": false,
            "named_class": false
        }
    }
}
</file>

<file path="testbench.yaml">
providers:
  - Laravilt\Support\SupportServiceProvider

workbench:
  welcome: false
  discovers:
    web: true
    api: true
    commands: true
    components: true
</file>

<file path="vite.plugin.js">
import { resolve } from 'path';

export default function SupportPlugin() {
    const pluginPath = resolve(__dirname);

    return {
        name: 'support-plugin',
        config: () => ({
            build: {
                rollupOptions: {
                    input: {
                        'support': resolve(pluginPath, 'resources/js/app.js'),
                    },
                    output: {
                        entryFileNames: 'js/[name].js',
                        chunkFileNames: 'js/[name].js',
                        assetFileNames: (assetInfo) => {
                            if (assetInfo.name.endsWith('.css')) {
                                return 'css/[name][extname]';
                            }
                            return 'assets/[name][extname]';
                        },
                    },
                },
                outDir: resolve(pluginPath, 'dist'),
                emptyOutDir: true,
            },
        }),
    };
}
</file>

<file path=".github/workflows/publish.yml">
name: Publish to NPM

on:
  push:
    branches:
      - master
      - main
    tags:
      - 'v*'
  workflow_dispatch:
    inputs:
      version_bump:
        description: 'Version bump type'
        required: true
        default: 'patch'
        type: choice
        options:
          - patch
          - minor
          - major

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      packages: write
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js for npm
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          registry-url: 'https://registry.npmjs.org'
          scope: '@laravilt'

      - name: Configure npm authentication
        run: |
          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc

      - name: Install dependencies
        run: npm install

      - name: Bump version (if manual trigger)
        if: github.event_name == 'workflow_dispatch'
        run: |
          git config user.name "GitHub Actions"
          git config user.email "actions@github.com"
          npm version ${{ github.event.inputs.version_bump }} --no-git-tag-version
          git add package.json
          git commit -m "chore: bump version to $(node -p "require('./package.json').version")"
          git push origin HEAD:${{ github.ref_name }}

      - name: Build package
        run: npm run build:npm

      - name: Publish to npm registry
        if: startsWith(github.ref, 'refs/tags/v') || github.event_name == 'workflow_dispatch'
        run: |
          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
          echo "registry=https://registry.npmjs.org/" >> .npmrc
          npm publish --access public

      - name: Publish to GitHub Packages
        if: startsWith(github.ref, 'refs/tags/v') || github.event_name == 'workflow_dispatch'
        run: |
          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > .npmrc
          echo "registry=https://npm.pkg.github.com/" >> .npmrc
          echo "@laravilt:registry=https://npm.pkg.github.com/" >> .npmrc
          npm publish

      - name: Get package info
        id: package_info
        run: |
          echo "name=$(node -p "require('./package.json').name")" >> $GITHUB_OUTPUT
          echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

      - name: Create Release
        if: startsWith(github.ref, 'refs/tags/v') || github.event_name == 'workflow_dispatch'
        uses: softprops/action-gh-release@v1
        with:
          tag_name: v${{ steps.package_info.outputs.version }}
          name: v${{ steps.package_info.outputs.version }}
          body: |
            ## ${{ steps.package_info.outputs.name }} v${{ steps.package_info.outputs.version }}

            Published to npm: https://www.npmjs.com/package/${{ steps.package_info.outputs.name }}

            Install with:
            ```bash
            npm install ${{ steps.package_info.outputs.name }}@${{ steps.package_info.outputs.version }}
            ```
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Push version tag (if manual trigger)
        if: github.event_name == 'workflow_dispatch'
        run: |
          git tag "v${{ steps.package_info.outputs.version }}"
          git push origin --tags
</file>

<file path=".github/workflows/tests.yml">
name: Tests

on:
  push:
    branches: [ "master", "main" ]
  pull_request:
    branches: [ "master", "main" ]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: true
      matrix:
        php: [8.3, 8.4]
        laravel: [12.*]
        dependency-version: [prefer-stable]

    name: PHP ${{ matrix.php }} - Laravel ${{ matrix.laravel }} - ${{ matrix.dependency-version }}

    steps:
      - name: Checkout code
        uses: actions/checkout@v6

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: ${{ matrix.php }}
          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv
          coverage: none

      - name: Setup problem matchers
        run: |
          echo "::add-matcher::${{ runner.tool_cache }}/php.json"
          echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"

      - name: Install dependencies
        run: |
          composer require "laravel/framework:${{ matrix.laravel }}" --no-interaction --no-update
          composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction

      - name: Execute tests
        run: vendor/bin/pest
</file>

<file path="lang/ar/support.php">
<?php

return [
    // Common Actions
    'common' => [
        'save' => 'حفظ',
        'cancel' => 'إلغاء',
        'delete' => 'حذف',
        'edit' => 'تعديل',
        'create' => 'إنشاء',
        'update' => 'تحديث',
        'search' => 'بحث',
        'filter' => 'تصفية',
        'clear' => 'مسح',
        'apply' => 'تطبيق',
        'close' => 'إغلاق',
        'open' => 'فتح',
        'submit' => 'إرسال',
        'reset' => 'إعادة تعيين',
        'back' => 'رجوع',
        'next' => 'التالي',
        'previous' => 'السابق',
        'finish' => 'إنهاء',
        'confirm' => 'تأكيد',
        'yes' => 'نعم',
        'no' => 'لا',
    ],

    // States
    'states' => [
        'loading' => 'جاري التحميل...',
        'saving' => 'جاري الحفظ...',
        'deleting' => 'جاري الحذف...',
        'processing' => 'جاري المعالجة...',
        'success' => 'نجاح!',
        'error' => 'خطأ!',
        'warning' => 'تحذير!',
        'info' => 'معلومات',
    ],

    // Resource Actions
    'actions' => [
        'view' => 'عرض',
        'edit' => 'تعديل',
        'delete' => 'حذف',
        'restore' => 'استعادة',
        'export' => 'تصدير',
        'import' => 'استيراد',
        'download' => 'تنزيل',
        'upload' => 'رفع',
        'copy' => 'نسخ',
        'duplicate' => 'تكرار',
    ],

    // Common Labels
    'labels' => [
        'id' => 'المعرف',
        'name' => 'الاسم',
        'email' => 'البريد الإلكتروني',
        'password' => 'كلمة المرور',
        'title' => 'العنوان',
        'description' => 'الوصف',
        'status' => 'الحالة',
        'type' => 'النوع',
        'date' => 'التاريخ',
        'time' => 'الوقت',
        'created_at' => 'تاريخ الإنشاء',
        'updated_at' => 'تاريخ التحديث',
        'actions' => 'الإجراءات',
    ],

    // Messages
    'messages' => [
        'created' => 'تم الإنشاء بنجاح.',
        'updated' => 'تم التحديث بنجاح.',
        'deleted' => 'تم الحذف بنجاح.',
        'restored' => 'تم الاستعادة بنجاح.',
        'saved' => 'تم الحفظ بنجاح.',
        'copied' => 'تم النسخ إلى الحافظة.',
        'no_results' => 'لا توجد نتائج.',
        'confirm_delete' => 'هل أنت متأكد أنك تريد حذف هذا العنصر؟',
        'confirm_action' => 'هل أنت متأكد أنك تريد تنفيذ هذا الإجراء؟',
        'error_occurred' => 'حدث خطأ. يرجى المحاولة مرة أخرى.',
    ],

    // Validation
    'validation' => [
        'required' => 'هذا الحقل مطلوب.',
        'email' => 'يرجى إدخال بريد إلكتروني صحيح.',
        'min' => 'الحد الأدنى للقيمة هو :min.',
        'max' => 'الحد الأقصى للقيمة هو :max.',
    ],
];
</file>

<file path="lang/en/support.php">
<?php

return [
    // Common Actions
    'common' => [
        'save' => 'Save',
        'cancel' => 'Cancel',
        'delete' => 'Delete',
        'edit' => 'Edit',
        'create' => 'Create',
        'update' => 'Update',
        'search' => 'Search',
        'filter' => 'Filter',
        'clear' => 'Clear',
        'apply' => 'Apply',
        'close' => 'Close',
        'open' => 'Open',
        'submit' => 'Submit',
        'reset' => 'Reset',
        'back' => 'Back',
        'next' => 'Next',
        'previous' => 'Previous',
        'finish' => 'Finish',
        'confirm' => 'Confirm',
        'yes' => 'Yes',
        'no' => 'No',
    ],

    // States
    'states' => [
        'loading' => 'Loading...',
        'saving' => 'Saving...',
        'deleting' => 'Deleting...',
        'processing' => 'Processing...',
        'success' => 'Success!',
        'error' => 'Error!',
        'warning' => 'Warning!',
        'info' => 'Info',
    ],

    // Resource Actions
    'actions' => [
        'view' => 'View',
        'edit' => 'Edit',
        'delete' => 'Delete',
        'restore' => 'Restore',
        'export' => 'Export',
        'import' => 'Import',
        'download' => 'Download',
        'upload' => 'Upload',
        'copy' => 'Copy',
        'duplicate' => 'Duplicate',
    ],

    // Common Labels
    'labels' => [
        'id' => 'ID',
        'name' => 'Name',
        'email' => 'Email',
        'password' => 'Password',
        'title' => 'Title',
        'description' => 'Description',
        'status' => 'Status',
        'type' => 'Type',
        'date' => 'Date',
        'time' => 'Time',
        'created_at' => 'Created At',
        'updated_at' => 'Updated At',
        'actions' => 'Actions',
    ],

    // Messages
    'messages' => [
        'created' => 'Created successfully.',
        'updated' => 'Updated successfully.',
        'deleted' => 'Deleted successfully.',
        'restored' => 'Restored successfully.',
        'saved' => 'Saved successfully.',
        'copied' => 'Copied to clipboard.',
        'no_results' => 'No results found.',
        'confirm_delete' => 'Are you sure you want to delete this item?',
        'confirm_action' => 'Are you sure you want to perform this action?',
        'error_occurred' => 'An error occurred. Please try again.',
    ],

    // Validation
    'validation' => [
        'required' => 'This field is required.',
        'email' => 'Please enter a valid email address.',
        'min' => 'The minimum value is :min.',
        'max' => 'The maximum value is :max.',
    ],
];
</file>

<file path="resources/css/app.css">
/* Plugin styles */
</file>

<file path="resources/js/components/ui/badge/index.ts">
import type { VariantProps } from "class-variance-authority"
import { cva } from "class-variance-authority"

export { default as Badge } from "./Badge.vue"

export const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
        // Semantic colors
        primary:
          "border-transparent bg-blue-500 text-white [a&]:hover:bg-blue-600",
        success:
          "border-transparent bg-emerald-500 text-white [a&]:hover:bg-emerald-600",
        danger:
          "border-transparent bg-red-500 text-white [a&]:hover:bg-red-600",
        warning:
          "border-transparent bg-amber-500 text-white [a&]:hover:bg-amber-600",
        info:
          "border-transparent bg-sky-500 text-white [a&]:hover:bg-sky-600",
        gray:
          "border-transparent bg-gray-500 text-white [a&]:hover:bg-gray-600",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)
export type BadgeVariants = VariantProps<typeof badgeVariants>
</file>

<file path="resources/js/components/ui/button/Button.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'reka-ui'
import { type ButtonVariants, buttonVariants } from '.'

interface Props extends /* @vue-ignore */ PrimitiveProps {
  variant?: ButtonVariants['variant']
  size?: ButtonVariants['size']
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  as: 'button',
})
</script>

<template>
  <Primitive
    data-slot="button"
    :as="as"
    :as-child="asChild"
    :class="cn(buttonVariants({ variant, size }), props.class)"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/checkbox/Checkbox.vue">
<script setup lang="ts">
import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { Check } from 'lucide-vue-next'
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue'

const props = defineProps</* @vue-ignore */ CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits</* @vue-ignore */ CheckboxRootEmits>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <CheckboxRoot
    data-slot="checkbox"
    v-bind="forwarded"
    :class="
      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         props.class)"
  >
    <CheckboxIndicator
      data-slot="checkbox-indicator"
      class="flex items-center justify-center text-current transition-none"
    >
      <slot>
        <Check class="size-3.5" />
      </slot>
    </CheckboxIndicator>
  </CheckboxRoot>
</template>
</file>

<file path="resources/js/components/ui/collapsible/Collapsible.vue">
<script setup lang="ts">
import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps</* @vue-ignore */ CollapsibleRootProps>()
const emits = defineEmits</* @vue-ignore */ CollapsibleRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <CollapsibleRoot
    v-slot="{ open }"
    data-slot="collapsible"
    v-bind="forwarded"
  >
    <slot :open="open" />
  </CollapsibleRoot>
</template>
</file>

<file path="resources/js/components/ui/dialog/Dialog.vue">
<script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'

const props = defineProps</* @vue-ignore */ DialogRootProps>()
const emits = defineEmits</* @vue-ignore */ DialogRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DialogRoot
    data-slot="dialog"
    v-bind="forwarded"
  >
    <slot />
  </DialogRoot>
</template>
</file>

<file path="resources/js/components/ui/dropdown-menu/DropdownMenu.vue">
<script setup lang="ts">
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'

const props = defineProps</* @vue-ignore */ DropdownMenuRootProps>()
const emits = defineEmits</* @vue-ignore */ DropdownMenuRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuRoot
    data-slot="dropdown-menu"
    v-bind="forwarded"
  >
    <slot />
  </DropdownMenuRoot>
</template>
</file>

<file path="resources/js/components/ui/navigation-menu/NavigationMenu.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import {
  NavigationMenuRoot,
  type NavigationMenuRootEmits,
  type NavigationMenuRootProps,
  useForwardPropsEmits,
} from 'reka-ui'
import NavigationMenuViewport from './NavigationMenuViewport.vue'

const props = withDefaults(defineProps<NavigationMenuRootProps & {
  class?: HTMLAttributes['class']
  viewport?: boolean
}>(), {
  viewport: true,
})
const emits = defineEmits</* @vue-ignore */ NavigationMenuRootEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'viewport')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <NavigationMenuRoot
    data-slot="navigation-menu"
    :data-viewport="viewport"
    v-bind="forwarded"
    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
  >
    <slot />
    <NavigationMenuViewport v-if="viewport" />
  </NavigationMenuRoot>
</template>
</file>

<file path="resources/js/components/ui/pin-input/PinInput.vue">
<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
import type { PinInputRootEmits, PinInputRootProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { PinInputRoot, useForwardPropsEmits } from "reka-ui"
import { cn } from "@/lib/utils"

const props = withDefaults(defineProps</* @vue-ignore */ PinInputRootProps<Type> & { class?: HTMLAttributes["class"] }>(), {
  modelValue: () => [],
})
const emits = defineEmits</* @vue-ignore */ PinInputRootEmits<Type>>()

const delegatedProps = reactiveOmit(props, "class")

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <PinInputRoot
    data-slot="pin-input"
    v-bind="forwarded" :class="cn('flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed', props.class)"
  >
    <slot />
  </PinInputRoot>
</template>
</file>

<file path="resources/js/components/ui/pin-input/PinInputSlot.vue">
<script setup lang="ts">
import type { PinInputInputProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { PinInputInput, useForwardProps } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<PinInputInputProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PinInputInput
    data-slot="pin-input-slot"
    v-bind="forwardedProps"
    :class="cn('border-input focus:border-ring focus:ring-ring/50 focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative h-9 w-9 border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md focus:z-10 focus:ring-[3px]', props.class)"
    style="text-align: center; direction: ltr; padding: 0; line-height: 36px;"
  />
</template>
</file>

<file path="resources/js/components/ui/popover/Popover.vue">
<script setup lang="ts">
import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
import { PopoverRoot, useForwardPropsEmits } from "reka-ui"

const props = defineProps</* @vue-ignore */ PopoverRootProps>()
const emits = defineEmits</* @vue-ignore */ PopoverRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <PopoverRoot v-bind="forwarded">
    <slot />
  </PopoverRoot>
</template>
</file>

<file path="resources/js/components/ui/radio-group/RadioGroup.vue">
<script setup lang="ts">
import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps</* @vue-ignore */ RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
const emits = defineEmits</* @vue-ignore */ RadioGroupRootEmits>()

const delegatedProps = reactiveOmit(props, "class")

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <RadioGroupRoot
    :class="cn('grid gap-2', props.class)"
    v-bind="forwarded"
  >
    <slot />
  </RadioGroupRoot>
</template>
</file>

<file path="resources/js/components/ui/sheet/Sheet.vue">
<script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'

const props = defineProps</* @vue-ignore */ DialogRootProps>()
const emits = defineEmits</* @vue-ignore */ DialogRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DialogRoot
    data-slot="sheet"
    v-bind="forwarded"
  >
    <slot />
  </DialogRoot>
</template>
</file>

<file path="resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'reka-ui'
import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'

export interface SidebarMenuButtonProps extends /* @vue-ignore */ PrimitiveProps {
  variant?: SidebarMenuButtonVariants['variant']
  size?: SidebarMenuButtonVariants['size']
  isActive?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
  as: 'button',
  variant: 'default',
  size: 'default',
})
</script>

<template>
  <Primitive
    data-slot="sidebar-menu-button"
    data-sidebar="menu-button"
    :data-size="size"
    :data-active="isActive"
    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
    :as="as"
    :as-child="asChild"
    v-bind="$attrs"
  >
    <slot />
  </Primitive>
</template>
</file>

<file path="resources/js/components/ui/switch/Switch.vue">
<script setup lang="ts">
import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import {
  SwitchRoot,
  SwitchThumb,
  useForwardPropsEmits,
} from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps</* @vue-ignore */ SwitchRootProps & { class?: HTMLAttributes["class"] }>()

const emits = defineEmits</* @vue-ignore */ SwitchRootEmits>()

const delegatedProps = reactiveOmit(props, "class")

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <SwitchRoot
    v-bind="forwarded"
    :class="cn(
      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
      props.class,
    )"
  >
    <SwitchThumb
      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
    >
      <slot name="thumb" />
    </SwitchThumb>
  </SwitchRoot>
</template>
</file>

<file path="resources/js/components/ui/tabs/Tabs.vue">
<script setup lang="ts">
import type { TabsRootEmits, TabsRootProps } from "reka-ui"
import { TabsRoot, useForwardPropsEmits } from "reka-ui"

const props = defineProps</* @vue-ignore */ TabsRootProps>()
const emits = defineEmits</* @vue-ignore */ TabsRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <TabsRoot v-bind="forwarded">
    <slot />
  </TabsRoot>
</template>
</file>

<file path="resources/js/components/ui/tabs/TabsContent.vue">
<script setup lang="ts">
import type { TabsContentProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TabsContent } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")
</script>

<template>
  <TabsContent
    v-cloak
    :class="cn('mt-4 ring-offset-background focus-visible:outline-none animate-in fade-in-0 duration-200', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </TabsContent>
</template>
</file>

<file path="resources/js/components/ui/tabs/TabsList.vue">
<script setup lang="ts">
import type { TabsListProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TabsList } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")
</script>

<template>
  <TabsList
    v-bind="delegatedProps"
    :class="cn(
      'flex max-w-full gap-x-1 overflow-x-auto border-b border-gray-200 dark:border-white/10 py-2',
      props.class,
    )"
  >
    <slot />
  </TabsList>
</template>
</file>

<file path="resources/js/components/ui/tabs/TabsTrigger.vue">
<script setup lang="ts">
import type { TabsTriggerProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import { TabsTrigger, useForwardProps } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()

const delegatedProps = reactiveOmit(props, "class")

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <TabsTrigger
    v-bind="forwardedProps"
    :class="cn(
      'flex items-center justify-center rounded-lg px-3 py-2 text-sm font-medium gap-x-2 whitespace-nowrap transition-all duration-75 outline-none',
      'text-gray-500 dark:text-gray-400',
      'hover:bg-gray-50 dark:hover:bg-white/5',
      'focus:bg-gray-50 dark:focus:bg-white/5',
      'data-[state=active]:bg-gray-50 dark:data-[state=active]:bg-white/5',
      'data-[state=active]:text-primary-600 dark:data-[state=active]:text-primary-400',
      'disabled:pointer-events-none disabled:opacity-50',
      props.class,
    )"
  >
    <slot />
  </TabsTrigger>
</template>
</file>

<file path="resources/js/components/ui/tooltip/Tooltip.vue">
<script setup lang="ts">
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'

const props = defineProps</* @vue-ignore */ TooltipRootProps>()
const emits = defineEmits</* @vue-ignore */ TooltipRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <TooltipRoot
    data-slot="tooltip"
    v-bind="forwarded"
  >
    <slot />
  </TooltipRoot>
</template>
</file>

<file path="resources/js/components/ui/Tabs.vue">
<script setup lang="ts">
import type { TabsRootEmits, TabsRootProps } from "reka-ui"
import { TabsRoot, useForwardPropsEmits } from "reka-ui"

const props = defineProps</* @vue-ignore */ TabsRootProps>()
const emits = defineEmits</* @vue-ignore */ TabsRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <TabsRoot v-bind="forwarded">
    <slot />
  </TabsRoot>
</template>
</file>

<file path="resources/js/composables/useLocalization.ts">
import { computed, watchEffect } from 'vue';
import { usePage } from '@inertiajs/vue3';

interface Localization {
    locale: string;
    timezone: string;
    direction: 'ltr' | 'rtl';
    isRtl: boolean;
}

interface Translations {
    [key: string]: string | Translations;
}

// Global translations cache
let translationsCache: Record<string, Translations> = {};

/**
 * Get value from translations object.
 * First tries direct key lookup (for flattened keys like 'laravilt-auth::auth.login.title'),
 * then falls back to nested object traversal using dot notation.
 */
function getNestedValue(obj: Translations, path: string): string | undefined {
    // First, try direct key lookup (for flattened translations)
    if (path in obj && typeof obj[path] === 'string') {
        return obj[path] as string;
    }

    // Fall back to nested object traversal
    const keys = path.split('.');
    let current: string | Translations = obj;

    for (const key of keys) {
        if (typeof current !== 'object' || current === null) {
            return undefined;
        }
        current = (current as Translations)[key];
    }

    return typeof current === 'string' ? current : undefined;
}

/**
 * Replace placeholders in translation string
 */
function replacePlaceholders(str: string, replacements: Record<string, string | number>): string {
    return str.replace(/:(\w+)/g, (_, key) => {
        return String(replacements[key] ?? `:${key}`);
    });
}

/**
 * Composable for localization
 */
export function useLocalization() {
    const page = usePage();

    const localization = computed<Localization>(() => {
        return (page.props as any).localization ?? {
            locale: 'en',
            timezone: 'UTC',
            direction: 'ltr',
            isRtl: false,
        };
    });

    const locale = computed(() => localization.value.locale);
    const timezone = computed(() => localization.value.timezone);
    const direction = computed(() => localization.value.direction);
    const isRtl = computed(() => localization.value.isRtl);

    // Update HTML attributes when localization changes
    watchEffect(() => {
        if (typeof document !== 'undefined') {
            document.documentElement.lang = locale.value;
            document.documentElement.dir = direction.value;
        }
    });

    /**
     * Get translations for the current locale
     */
    const translations = computed<Translations>(() => {
        return (page.props as any).translations ?? translationsCache[locale.value] ?? {};
    });

    /**
     * Translate a key with optional replacements
     * Similar to Laravel's __() / trans() function
     */
    function trans(key: string, replacements: Record<string, string | number> = {}): string {
        const value = getNestedValue(translations.value, key);

        if (value === undefined) {
            // Return the key if no translation found (like Laravel does)
            return replacePlaceholders(key, replacements);
        }

        return replacePlaceholders(value, replacements);
    }

    /**
     * Alias for trans()
     */
    function __(key: string, replacements: Record<string, string | number> = {}): string {
        return trans(key, replacements);
    }

    /**
     * Check if a translation exists
     */
    function hasTranslation(key: string): boolean {
        return getNestedValue(translations.value, key) !== undefined;
    }

    /**
     * Get plural translation
     * Similar to Laravel's trans_choice()
     */
    function transChoice(key: string, count: number, replacements: Record<string, string | number> = {}): string {
        const value = getNestedValue(translations.value, key);

        if (value === undefined) {
            return replacePlaceholders(key, { ...replacements, count });
        }

        // Simple plural handling: "one|many" format
        const parts = value.split('|');
        const text = count === 1 ? parts[0] : (parts[1] ?? parts[0]);

        return replacePlaceholders(text, { ...replacements, count });
    }

    return {
        locale,
        timezone,
        direction,
        isRtl,
        localization,
        translations,
        trans,
        __,
        hasTranslation,
        transChoice,
    };
}

/**
 * Set translations cache (called from server)
 */
export function setTranslations(locale: string, translations: Translations): void {
    translationsCache[locale] = translations;
}

/**
 * Global trans function for use outside components
 */
export function trans(key: string, replacements: Record<string, string | number> = {}): string {
    // Try to get from page props first
    if (typeof window !== 'undefined' && (window as any).__inertia_page) {
        const pageData = (window as any).__inertia_page;
        const translations = pageData.props?.translations ?? {};
        const value = getNestedValue(translations, key);

        if (value !== undefined) {
            return replacePlaceholders(value, replacements);
        }
    }

    return replacePlaceholders(key, replacements);
}

// Export __ as alias
export const __ = trans;
</file>

<file path="src/Colors/Color.php">
<?php

namespace Laravilt\Support\Colors;

class Color
{
    // Semantic colors
    public const Primary = '#3b82f6';    // Blue

    public const Secondary = '#6b7280';  // Gray

    public const Success = '#10b981';    // Green/Emerald

    public const Danger = '#ef4444';     // Red

    public const Warning = '#f59e0b';    // Amber/Yellow

    public const Info = '#0ea5e9';       // Sky/Baby blue

    // Primary colors
    public const Slate = '#64748b';

    public const Gray = '#6b7280';

    public const Zinc = '#71717a';

    public const Neutral = '#737373';

    public const Stone = '#78716c';

    public const Red = '#ef4444';

    public const Orange = '#f97316';

    public const Amber = '#f59e0b';

    public const Yellow = '#eab308';

    public const Lime = '#84cc16';

    public const Green = '#10b981';

    public const Emerald = '#10b981';

    public const Teal = '#14b8a6';

    public const Cyan = '#06b6d4';

    public const Sky = '#0ea5e9';

    public const Blue = '#3b82f6';

    public const Indigo = '#6366f1';

    public const Violet = '#8b5cf6';

    public const Purple = '#a855f7';

    public const Fuchsia = '#d946ef';

    public const Pink = '#ec4899';

    public const Rose = '#f43f5e';

    /**
     * Get all available colors.
     */
    public static function all(): array
    {
        return [
            // Semantic colors
            'primary' => self::Primary,
            'secondary' => self::Secondary,
            'success' => self::Success,
            'danger' => self::Danger,
            'warning' => self::Warning,
            'info' => self::Info,
            // Tailwind colors
            'slate' => self::Slate,
            'gray' => self::Gray,
            'zinc' => self::Zinc,
            'neutral' => self::Neutral,
            'stone' => self::Stone,
            'red' => self::Red,
            'orange' => self::Orange,
            'amber' => self::Amber,
            'yellow' => self::Yellow,
            'lime' => self::Lime,
            'green' => self::Green,
            'emerald' => self::Emerald,
            'teal' => self::Teal,
            'cyan' => self::Cyan,
            'sky' => self::Sky,
            'blue' => self::Blue,
            'indigo' => self::Indigo,
            'violet' => self::Violet,
            'purple' => self::Purple,
            'fuchsia' => self::Fuchsia,
            'pink' => self::Pink,
            'rose' => self::Rose,
        ];
    }

    /**
     * Get semantic colors only.
     */
    public static function semantic(): array
    {
        return [
            'primary' => self::Primary,
            'secondary' => self::Secondary,
            'success' => self::Success,
            'danger' => self::Danger,
            'warning' => self::Warning,
            'info' => self::Info,
        ];
    }
}
</file>

<file path="src/Commands/InstallSupportCommand.php">
<?php

namespace Laravilt\Support\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Artisan;

class InstallSupportCommand extends Command
{
    /**
     * The name and signature of the console command.
     */
    protected $signature = 'support:install
                            {--force : Overwrite existing files}
                            {--without-assets : Skip asset publishing}';

    /**
     * The console command description.
     */
    protected $description = 'Install Support plugin';

    /**
     * Execute the console command.
     */
    public function handle(): int
    {
        $this->info('Installing {{ name }} plugin...');
        $this->newLine();

        // Publish config
        $this->publishConfig();

        $this->publishAssets();
        if (! $this->option('without-assets')) {
            $this->buildAssets();
        }
        $this->newLine();
        $this->info('✅ {{ name }} plugin installed successfully!');
        $this->newLine();

        return self::SUCCESS;
    }

    /**
     * Publish configuration file.
     */
    protected function publishConfig(): void
    {
        $this->info('Publishing configuration...');

        $params = ['--tag' => '{{ config }}-config'];

        if ($this->option('force')) {
            $params['--force'] = true;
        }

        Artisan::call('vendor:publish', $params, $this->output);
    }

    protected function publishAssets(): void
    {
        $this->info('Publishing assets...');

        $this->call('vendor:publish', [
            '--tag' => 'support-assets',
            '--force' => true,
        ]);

        $this->components->success('Assets published successfully!');
    }

    protected function buildAssets(): void
    {
        $this->info('Building assets...');

        $process = Process::path(base_path('packages/laravilt/support'))
            ->run('npm install && npm run build');

        if ($process->successful()) {
            $this->components->success('Assets built successfully!');
        } else {
            $this->components->error('Failed to build assets: '.$process->errorOutput());
        }
    }
}
</file>

<file path="src/Concerns/HasLabel.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * HasLabel Trait
 *
 * Provides label functionality to components.
 */
trait HasLabel
{
    protected string|Closure|null $label = null;

    /**
     * Set the component's label.
     */
    public function label(string|Closure $label): static
    {
        $this->label = $label;

        return $this;
    }

    /**
     * Get the component's label (evaluates closures).
     * If no label is set, generates a default label from the field name.
     */
    public function getLabel(): ?string
    {
        $label = $this->evaluate($this->label);

        // If no label is set, generate one from the field name
        if ($label === null && isset($this->name)) {
            return $this->generateLabelFromName($this->name);
        }

        return $label;
    }

    /**
     * Generate a human-readable label from a field name.
     *
     * Examples:
     * - 'first_name' => 'First Name'
     * - 'email_address' => 'Email Address'
     * - 'company' => 'Company'
     */
    protected function generateLabelFromName(string $name): string
    {
        // Remove common prefixes/suffixes
        $name = preg_replace('/^_+|_+$/', '', $name);

        // Replace underscores and hyphens with spaces
        $name = str_replace(['_', '-'], ' ', $name);

        // Convert to title case
        return \Illuminate\Support\Str::title($name);
    }
}
</file>

<file path="src/Concerns/InteractsWithState.php">
<?php

namespace Laravilt\Support\Concerns;

/**
 * InteractsWithState Trait
 *
 * Provides state management functionality for components.
 */
trait InteractsWithState
{
    public mixed $state = null;

    protected mixed $defaultState = null;

    /**
     * Set the component's state/value.
     */
    public function state(mixed $state): static
    {
        $this->state = $state;

        return $this;
    }

    /**
     * Set the default state.
     */
    public function default(mixed $state): static
    {
        $this->defaultState = $state;

        return $this;
    }

    /**
     * Get the component's current state.
     */
    public function getState(): mixed
    {
        return $this->state ?? $this->defaultState;
    }

    /**
     * Check if component has state.
     */
    public function hasState(): bool
    {
        return $this->state !== null;
    }
}
</file>

<file path="src/Enums/ImageSize.php">
<?php

namespace Laravilt\Support\Enums;

enum ImageSize: string
{
    case ExtraSmall = 'xs';
    case Small = 'sm';
    case Medium = 'md';
    case Large = 'lg';
    case ExtraLarge = 'xl';
    case TwoExtraLarge = '2xl';

    /**
     * Get the pixel size for the image.
     */
    public function getSize(): int
    {
        return match ($this) {
            self::ExtraSmall => 24,
            self::Small => 32,
            self::Medium => 40,
            self::Large => 48,
            self::ExtraLarge => 56,
            self::TwoExtraLarge => 64,
        };
    }

    /**
     * Get the size as a CSS value with px unit.
     */
    public function getCssSize(): string
    {
        return $this->getSize().'px';
    }
}
</file>

<file path="src/Mcp/Tools/SearchDocsTool.php">
<?php

namespace Laravilt\Support\Mcp\Tools;

use Illuminate\JsonSchema\JsonSchema;
use Illuminate\Support\Facades\File;
use Laravel\Mcp\Request;
use Laravel\Mcp\Response;
use Laravel\Mcp\Server\Tool;

class SearchDocsTool extends Tool
{
    protected string $description = 'Search the Laravilt Support documentation';

    public function handle(Request $request): Response
    {
        $query = $request->string('query');
        $packagePath = base_path('packages/laravilt/support');

        $docFiles = $this->getDocumentationFiles($packagePath);
        $results = $this->searchDocumentation($docFiles, $query);

        if (empty($results)) {
            return Response::text("No documentation found matching '{$query}'.");
        }

        $output = "Documentation Search Results for: {$query}\n\n";
        $output .= 'Found '.count($results)." relevant section(s):\n\n";

        foreach ($results as $result) {
            $output .= "📄 {$result['file']}\n";
            $output .= str_repeat('=', 60)."\n\n";
            $output .= $result['content']."\n\n";
            $output .= str_repeat('-', 60)."\n\n";
        }

        return Response::text($output);
    }

    public function schema(JsonSchema $schema): array
    {
        return [
            'query' => $schema->string()
                ->description('QUERY_Search the Laravilt Support documentation')
                ->required(),
        ];
    }

    protected function getDocumentationFiles(string $path): array
    {
        $files = [];

        if (File::exists($path.'/README.md')) {
            $files[] = [
                'path' => $path.'/README.md',
                'name' => 'README.md',
                'content' => File::get($path.'/README.md'),
            ];
        }

        $docsPath = $path.'/docs';
        if (File::isDirectory($docsPath)) {
            foreach (File::allFiles($docsPath) as $file) {
                if ($file->getExtension() === 'md') {
                    $relativePath = str_replace($path.'/', '', $file->getPathname());
                    $files[] = [
                        'path' => $file->getPathname(),
                        'name' => $relativePath,
                        'content' => File::get($file->getPathname()),
                    ];
                }
            }
        }

        return $files;
    }

    protected function searchDocumentation(array $files, string $query): array
    {
        $results = [];
        $queryLower = strtolower($query);
        $keywords = explode(' ', $queryLower);

        foreach ($files as $file) {
            $content = $file['content'];
            $contentLower = strtolower($content);

            $matchCount = 0;
            foreach ($keywords as $keyword) {
                if (stripos($contentLower, $keyword) !== false) {
                    $matchCount++;
                }
            }

            if ($matchCount > 0) {
                $sections = $this->extractRelevantSections($content, $query, $keywords);
                foreach ($sections as $section) {
                    $results[] = [
                        'file' => $file['name'],
                        'content' => $section,
                        'relevance' => $matchCount,
                    ];
                }
            }
        }

        usort($results, fn ($a, $b) => $b['relevance'] <=> $a['relevance']);

        return array_slice($results, 0, 5);
    }

    protected function extractRelevantSections(string $content, string $query, array $keywords): array
    {
        $sections = [];
        $lines = explode("\n", $content);
        $currentSection = '';
        $currentHeader = '';
        $inRelevantSection = false;

        foreach ($lines as $line) {
            if (preg_match('/^#+\s+(.+)$/', $line, $matches)) {
                if ($inRelevantSection && ! empty(trim($currentSection))) {
                    $sections[] = trim($currentHeader."\n\n".$currentSection);
                }

                $currentHeader = $line;
                $currentSection = '';
                $headerLower = strtolower($matches[1]);
                $inRelevantSection = false;
                foreach ($keywords as $keyword) {
                    if (stripos($headerLower, $keyword) !== false) {
                        $inRelevantSection = true;
                        break;
                    }
                }
            } else {
                $currentSection .= $line."\n";
                if (! $inRelevantSection) {
                    $lineLower = strtolower($line);
                    foreach ($keywords as $keyword) {
                        if (stripos($lineLower, $keyword) !== false) {
                            $inRelevantSection = true;
                            break;
                        }
                    }
                }
            }
        }

        if ($inRelevantSection && ! empty(trim($currentSection))) {
            $sections[] = trim($currentHeader."\n\n".$currentSection);
        }

        return $sections;
    }
}
</file>

<file path="src/Mcp/LaraviltSupportServer.php">
<?php

namespace Laravilt\Support\Mcp;

use Laravel\Mcp\Server;
use Laravilt\Support\Mcp\Tools\GenerateComponentTool;
use Laravilt\Support\Mcp\Tools\SearchDocsTool;

class LaraviltSupportServer extends Server
{
    protected string $name = 'Laravilt Support';

    protected string $version = '1.0.0';

    protected string $instructions = <<<'MARKDOWN'
        This server provides support and component capabilities for Laravilt projects.

        You can:
        - Generate custom component classes
        - Search support documentation
        - Access information about base components, concerns, and utilities

        Support is the foundation providing base components, traits, and utilities.
    MARKDOWN;

    protected array $tools = [
        GenerateComponentTool::class,
        SearchDocsTool::class,
    ];
}
</file>

<file path="src/Utilities/Get.php">
<?php

namespace Laravilt\Support\Utilities;

/**
 * Get Utility
 *
 * Provides safe access to nested array values using dot notation.
 * Can be used as a callable or static utility.
 */
class Get
{
    /**
     * The form data array.
     */
    protected array $data;

    /**
     * Create a new Get instance.
     */
    public function __construct(array &$data = [])
    {
        $this->data = &$data;
    }

    /**
     * Get a value from the form data using dot notation.
     *
     * @param  string  $key  The key in dot notation (e.g., 'user.name')
     * @param  mixed  $default  Default value if key doesn't exist
     */
    public function __invoke(string $key, mixed $default = null): mixed
    {
        $value = static::value($this->data, $key, $default);
        \Log::info('Get::__invoke called', [
            'key' => $key,
            'value' => $value,
            'all_data' => $this->data,
        ]);

        return $value;
    }

    /**
     * Get a value from an array using dot notation.
     *
     * @param  array  $data  The data array
     * @param  string  $key  The key in dot notation (e.g., 'user.name')
     * @param  mixed  $default  Default value if key doesn't exist
     */
    public static function value(array $data, string $key, mixed $default = null): mixed
    {
        // Direct key exists
        if (array_key_exists($key, $data)) {
            return $data[$key];
        }

        // Not a nested key
        if (! str_contains($key, '.')) {
            return $default;
        }

        // Navigate through nested structure
        foreach (explode('.', $key) as $segment) {
            if (is_array($data) && array_key_exists($segment, $data)) {
                $data = $data[$segment];
            } else {
                return $default;
            }
        }

        return $data;
    }
}
</file>

<file path="src/Utilities/Set.php">
<?php

namespace Laravilt\Support\Utilities;

/**
 * Set Utility
 *
 * Provides safe setting of nested array values using dot notation.
 * Can be used as a callable or static utility.
 */
class Set
{
    /**
     * The form data array.
     */
    protected array $data;

    /**
     * Track if any changes were made.
     */
    protected bool $hasChanges = false;

    /**
     * Create a new Set instance.
     */
    public function __construct(array &$data = [])
    {
        $this->data = &$data;
    }

    /**
     * Set a value in the form data using dot notation.
     *
     * @param  string  $key  The key in dot notation (e.g., 'user.name')
     * @param  mixed  $value  The value to set
     */
    public function __invoke(string $key, mixed $value): void
    {
        \Log::info('Set::__invoke called', [
            'key' => $key,
            'value' => $value,
            'data_before' => $this->data,
        ]);
        static::value($this->data, $key, $value);
        $this->hasChanges = true;
        \Log::info('Set::__invoke after', [
            'data_after' => $this->data,
        ]);
    }

    /**
     * Check if any changes were made.
     */
    public function hasChanges(): bool
    {
        return $this->hasChanges;
    }

    /**
     * Get the data array.
     */
    public function getData(): array
    {
        return $this->data;
    }

    /**
     * Set a value in an array using dot notation.
     *
     * @param  array  $data  The data array (passed by reference)
     * @param  string  $key  The key in dot notation (e.g., 'user.name')
     * @param  mixed  $value  The value to set
     * @return array The modified array
     */
    public static function value(array &$data, string $key, mixed $value): array
    {
        // Direct key
        if (! str_contains($key, '.')) {
            $data[$key] = $value;

            return $data;
        }

        // Navigate and create nested structure
        $keys = explode('.', $key);
        $current = &$data;

        foreach ($keys as $i => $segment) {
            // Last segment - set the value
            if ($i === count($keys) - 1) {
                $current[$segment] = $value;
                break;
            }

            // Create array if doesn't exist
            if (! isset($current[$segment]) || ! is_array($current[$segment])) {
                $current[$segment] = [];
            }

            // Move deeper
            $current = &$current[$segment];
        }

        return $data;
    }
}
</file>

<file path="src/Component.php">
<?php

namespace Laravilt\Support;

use Illuminate\Contracts\Support\Arrayable;
use Illuminate\Contracts\Support\Jsonable;
use Laravilt\Support\Concerns\CanBeDisabled;
use Laravilt\Support\Concerns\CanBeReadonly;
use Laravilt\Support\Concerns\CanBeRequired;
use Laravilt\Support\Concerns\EvaluatesClosures;
use Laravilt\Support\Concerns\HasColumnSpan;
use Laravilt\Support\Concerns\HasHelperText;
use Laravilt\Support\Concerns\HasId;
use Laravilt\Support\Concerns\HasLabel;
use Laravilt\Support\Concerns\HasPlaceholder;
use Laravilt\Support\Concerns\HasVisibility;
use Laravilt\Support\Concerns\InteractsWithState;
use Laravilt\Support\Contracts\Buildable;
use Laravilt\Support\Contracts\Serializable;

/**
 * Base Component Class
 *
 * Foundation for all Laravilt UI components. Provides:
 * - Factory pattern via make()
 * - Multi-platform serialization (Laravilt, API, Flutter)
 * - RTL/LTR support
 * - Theme support
 * - Visibility control
 * - State management
 */
abstract class Component implements Arrayable, Buildable, Jsonable, Serializable
{
    use CanBeDisabled;
    use CanBeReadonly;
    use CanBeRequired;
    use EvaluatesClosures;
    use HasColumnSpan;
    use HasHelperText;
    use HasId;
    use HasLabel;
    use HasPlaceholder;
    use HasVisibility;
    use InteractsWithState;

    /**
     * The component's unique name/key.
     */
    protected string $name;

    /**
     * The Blade view for this component.
     */
    protected string $view;

    /**
     * Additional metadata for this component.
     */
    protected array $meta = [];

    /**
     * Create a new component instance using the factory pattern.
     */
    public static function make(string $name): static
    {
        $static = app(static::class);
        $static->name = $name;
        $static->setUp();

        return $static;
    }

    /**
     * Set up the component (override in subclasses for initialization).
     */
    protected function setUp(): void
    {
        //
    }

    /**
     * Get the component's name.
     */
    public function getName(): string
    {
        return $this->name ?? '';
    }

    /**
     * Set metadata for this component.
     */
    public function meta(array $meta): static
    {
        $this->meta = array_merge($this->meta, $meta);

        return $this;
    }

    /**
     * Get component metadata.
     */
    public function getMeta(): array
    {
        return $this->meta;
    }

    /**
     * Serialize component for Laravilt (Blade + Vue.js).
     */
    public function toLaraviltProps(): array
    {
        return [
            'component' => $this->getComponentType(),
            'id' => $this->getId(),
            'name' => $this->getName(),
            'state' => $this->getState(),
            'label' => $this->getLabel(),
            'placeholder' => $this->getPlaceholder(),
            'helperText' => $this->getHelperText(),
            'hidden' => $this->isHidden(),
            'disabled' => $this->isDisabled(),
            'readonly' => $this->isReadonly(),
            'required' => $this->isRequired(),
            'columnSpan' => $this->getColumnSpan(),
            'rtl' => $this->isRTL(),
            'theme' => $this->getTheme(),
            'locale' => $this->getLocale(),
            'meta' => $this->getMeta(),
        ];
    }

    /**
     * Get the component type for Vue.js (snake_case class basename).
     */
    protected function getComponentType(): string
    {
        $className = class_basename(static::class);

        // Convert PascalCase to snake_case (e.g., "TextInput" => "text_input")
        return strtolower(preg_replace('/(?<!^)[A-Z]/', '_$0', $className));
    }

    /**
     * Serialize component for REST API.
     */
    public function toApiProps(): array
    {
        return [
            'type' => class_basename(static::class),
            'name' => $this->getName(),
            'value' => $this->getState(),
            'label' => $this->getLabel(),
            'helperText' => $this->getHelperText(),
            'meta' => $this->getMeta(),
        ];
    }

    /**
     * Serialize component for Flutter.
     */
    public function toFlutterProps(): array
    {
        return [
            'widget' => class_basename(static::class),
            'name' => $this->getName(),
            'value' => $this->getState(),
            'label' => $this->getLabel(),
            'helperText' => $this->getHelperText(),
            'isRTL' => $this->isRTL(),
            'meta' => $this->getMeta(),
        ];
    }

    /**
     * Render the component to HTML.
     */
    public function render(): string
    {
        if ($this->isHidden()) {
            return '';
        }

        return view($this->view, [
            'component' => $this,
        ])->render();
    }

    /** Check if current locale is RTL. */
    protected function isRTL(): bool
    {
        return \Laravilt\Support\Utilities\Translator::isRTL();
    }

    /** Get current locale. */
    protected function getLocale(): string
    {
        $app = app();
        if (method_exists($app, 'getLocale')) {
            return $app->getLocale();
        }

        return 'en';
    }

    /** Get current theme. */
    protected function getTheme(): string
    {
        try {
            return session('theme', 'light');
        } catch (\Exception $e) {
            return 'light';
        }
    }

    /** Convert component to array (for JSON serialization). */
    public function toArray(): array
    {
        return $this->toLaraviltProps();
    }

    /** Convert component to JSON. */
    public function toJson($options = 0): string
    {
        return json_encode($this->toArray(), $options);
    }
}
</file>

<file path="src/SupportServiceProvider.php">
<?php

namespace Laravilt\Support;

use Illuminate\Support\ServiceProvider;
use Laravilt\Support\Commands\MakeComponentCommand;
use Laravilt\Support\LaraviltCore\LaraviltServiceProvider;

/**
 * Support Service Provider
 *
 * Foundation service provider for Laravilt framework.
 * Registers base Component class, Laravilt Core, and utilities.
 */
class SupportServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        // Register Laravilt Core
        $this->app->register(LaraviltServiceProvider::class);

        // Merge config
        $this->mergeConfigFrom(
            __DIR__.'/../config/laravilt-support.php',
            'laravilt-support'
        );
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        // Load views
        $this->loadViewsFrom(__DIR__.'/../resources/views', 'laravilt-support');

        // Load translations
        $this->loadTranslationsFrom(__DIR__.'/../resources/lang', 'laravilt-support');

        if ($this->app->runningInConsole()) {
            // Register commands
            $this->commands([
                MakeComponentCommand::class,
            ]);

            // Publish config
            $this->publishes([
                __DIR__.'/../config/laravilt-support.php' => config_path('laravilt-support.php'),
            ], 'laravilt-support-config');

            // Publish assets
            $this->publishes([
                __DIR__.'/../dist' => public_path('vendor/laravilt/support'),
            ], 'laravilt-support-assets');

            // Publish views
            $this->publishes([
                __DIR__.'/../resources/views' => resource_path('views/vendor/laravilt/support'),
            ], 'laravilt-support-views');

            // Publish translations
            $this->publishes([
                __DIR__.'/../resources/lang' => lang_path('vendor/laravilt/support'),
            ], 'laravilt-support-translations');
        }
    }
}
</file>

<file path="tests/Unit/Concerns/EvaluatesClosuresTest.php">
<?php

use Laravilt\Support\Concerns\EvaluatesClosures;
use Laravilt\Support\Utilities\Get;
use Laravilt\Support\Utilities\Set;

beforeEach(function () {
    $this->subject = new class
    {
        use EvaluatesClosures;

        public function evaluatePublic(mixed $value, array $parameters = []): mixed
        {
            return $this->evaluate($value, $parameters);
        }

        public function setContext(array $data, mixed $record = null): void
        {
            $this->evaluationContext($data, $record);
        }
    };
});

it('returns static values unchanged', function () {
    expect($this->subject->evaluatePublic('static string'))->toBe('static string')
        ->and($this->subject->evaluatePublic(42))->toBe(42)
        ->and($this->subject->evaluatePublic(true))->toBeTrue()
        ->and($this->subject->evaluatePublic(['array']))->toBe(['array']);
});

it('evaluates closures', function () {
    $closure = fn () => 'evaluated';

    expect($this->subject->evaluatePublic($closure))->toBe('evaluated');
});

it('passes named parameters to closures', function () {
    $closure = fn ($a, $b) => $a + $b;

    expect($this->subject->evaluatePublic($closure, ['a' => 5, 'b' => 3]))->toBe(8);
});

it('evaluates nested closures', function () {
    $outerClosure = fn () => fn () => 'nested';

    $result = $this->subject->evaluatePublic($outerClosure);

    expect($result)->toBeInstanceOf(Closure::class);
    expect($result())->toBe('nested');
});

it('handles closures with no parameters', function () {
    $closure = fn () => 'no params';

    expect($this->subject->evaluatePublic($closure, []))->toBe('no params');
});

it('handles closures with optional parameters', function () {
    $closure = fn ($a = 'default') => $a;

    expect($this->subject->evaluatePublic($closure, []))->toBe('default')
        ->and($this->subject->evaluatePublic($closure, ['a' => 'custom']))->toBe('custom');
});

it('injects Get utility when type-hinted', function () {
    $this->subject->setContext(['name' => 'John', 'age' => 30]);

    $closure = fn (Get $get) => $get('name');

    expect($this->subject->evaluatePublic($closure))->toBe('John');
});

it('injects Set utility when type-hinted', function () {
    $this->subject->setContext(['name' => 'John']);

    $closure = function (Set $set, Get $get) {
        $set('name', 'Jane');

        return $get('name');
    };

    $result = $this->subject->evaluatePublic($closure);

    // Verify Set modified the data that Get can read
    expect($result)->toBe('Jane');
});

it('passes data parameter by name', function () {
    $this->subject->setContext(['key' => 'value']);

    $closure = fn ($data) => $data['key'];

    expect($this->subject->evaluatePublic($closure))->toBe('value');
});

it('passes record parameter by name', function () {
    $record = (object) ['id' => 1, 'name' => 'Test'];
    $this->subject->setContext([], $record);

    $closure = fn ($record) => $record->name;

    expect($this->subject->evaluatePublic($closure))->toBe('Test');
});

it('supports mixed dependency injection', function () {
    $this->subject->setContext(['status' => 'active']);

    $closure = fn (Get $get, $data) => [
        'status' => $get('status'),
        'hasData' => ! empty($data),
    ];

    $result = $this->subject->evaluatePublic($closure);

    expect($result)->toBe([
        'status' => 'active',
        'hasData' => true,
    ]);
});

it('handles Get utility with nested data', function () {
    $this->subject->setContext([
        'user' => [
            'profile' => [
                'name' => 'John Doe',
            ],
        ],
    ]);

    $closure = fn (Get $get) => $get('user.profile.name');

    expect($this->subject->evaluatePublic($closure))->toBe('John Doe');
});

it('handles Set utility with nested data', function () {
    $this->subject->setContext(['user' => ['name' => 'John']]);

    $closure = function (Set $set, Get $get) {
        $set('user.email', 'john@example.com');

        return $get('user.email');
    };

    $result = $this->subject->evaluatePublic($closure);
    expect($result)->toBe('john@example.com');
});

it('uses default values when parameter not provided', function () {
    $closure = fn ($name = 'Guest', $role = 'User') => "$name ($role)";

    expect($this->subject->evaluatePublic($closure))->toBe('Guest (User)');
});

it('combines named parameters with defaults', function () {
    $closure = fn ($name = 'Guest', $role = 'User') => "$name ($role)";

    expect($this->subject->evaluatePublic($closure, ['name' => 'Admin']))
        ->toBe('Admin (User)');
});

it('passes null for unresolvable parameters', function () {
    $closure = fn ($unknown) => $unknown === null ? 'null received' : 'value received';

    expect($this->subject->evaluatePublic($closure))->toBe('null received');
});
</file>

<file path="tests/TestCase.php">
<?php

namespace Laravilt\Support\Tests;

use Orchestra\Testbench\TestCase as Orchestra;

class TestCase extends Orchestra
{
    protected function setUp(): void
    {
        parent::setUp();

        // Additional setup if needed
    }

    protected function getPackageProviders($app): array
    {
        return [
            \Laravilt\Support\SupportServiceProvider::class,
        ];
    }

    protected function getEnvironmentSetUp($app): void
    {
        // Setup environment for testing
        config()->set('database.default', 'testing');

        // Register test views path
        $app['view']->addLocation(__DIR__.'/views');
    }
}
</file>

<file path="vite.config.ts">
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve, dirname } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'resources/js/laravilt-core.js'),
      name: 'LaraviltSupport',
      formats: ['es', 'umd'],
      fileName: (format) => `support.${format}.js`,
    },
    rollupOptions: {
      external: ['vue', '@inertiajs/vue3', 'radix-vue', 'reka-ui', 'lucide-vue-next', 'tailwind-merge', 'clsx', 'class-variance-authority', '@vueuse/core', /@laravilt\/.*/],
      output: {
        globals: {
          vue: 'Vue',
          '@inertiajs/vue3': 'InertiaVue3',
          'radix-vue': 'RadixVue',
          'reka-ui': 'RekaUI',
          'lucide-vue-next': 'LucideVueNext',
          'tailwind-merge': 'TailwindMerge',
          clsx: 'clsx',
          'class-variance-authority': 'ClassVarianceAuthority',
          '@vueuse/core': 'VueUseCore',
        },
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'style.css') return 'style.css'
          return assetInfo.name as string
        },
      },
    },
    outDir: 'dist',
    emptyOutDir: true,
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'resources/js'),
    },
  },
})
</file>

<file path="resources/js/components/ui/sheet/SheetContent.vue">
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { X } from 'lucide-vue-next'
import {
  DialogClose,
  DialogContent,
  type DialogContentEmits,
  type DialogContentProps,
  DialogPortal,
  useForwardPropsEmits,
} from 'reka-ui'
import SheetOverlay from './SheetOverlay.vue'
import { useLocalization } from '@laravilt/support/composables'

interface SheetContentProps extends /* @vue-ignore */ DialogContentProps {
  class?: HTMLAttributes['class']
  side?: 'top' | 'right' | 'bottom' | 'left'
}

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<SheetContentProps>(), {
  side: 'right',
})
const emits = defineEmits<DialogContentEmits>()

const { isRtl } = useLocalization()

// Compute effective side - flip left/right for RTL
const effectiveSide = computed(() => {
  if (!isRtl.value) return props.side
  if (props.side === 'left') return 'right'
  if (props.side === 'right') return 'left'
  return props.side
})

const delegatedProps = reactiveOmit(props, 'class', 'side')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DialogPortal>
    <SheetOverlay />
    <DialogContent
      data-slot="sheet-content"
      :class="cn(
        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
        effectiveSide === 'right'
          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
        effectiveSide === 'left'
          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
        effectiveSide === 'top'
          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
        effectiveSide === 'bottom'
          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
        props.class)"
      v-bind="{ ...forwarded, ...$attrs }"
    >
      <slot />

      <DialogClose
        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 end-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
      >
        <X class="size-4" />
        <span class="sr-only">Close</span>
      </DialogClose>
    </DialogContent>
  </DialogPortal>
</template>
</file>

<file path="src/Concerns/EvaluatesClosures.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;
use Laravilt\Support\Utilities\Get;
use Laravilt\Support\Utilities\Set;
use ReflectionFunction;

/**
 * EvaluatesClosures Trait
 *
 * Provides ability to evaluate closures or return direct values with dependency injection support.
 */
trait EvaluatesClosures
{
    /**
     * Evaluation context data for closures.
     */
    protected array $evaluationData = [];

    /**
     * Evaluation context record for closures.
     */
    protected mixed $evaluationRecord = null;

    /**
     * Set the evaluation context for closures.
     */
    public function evaluationContext(array $data = [], mixed $record = null): static
    {
        $this->evaluationData = $data;
        $this->evaluationRecord = $record;

        return $this;
    }

    /**
     * Evaluate a value (closure or direct value) with dependency injection support.
     *
     * @param  mixed  $value  The value to evaluate
     * @param  array  $parameters  Parameters to pass if value is a closure
     */
    protected function evaluate(mixed $value, array $parameters = []): mixed
    {
        if ($value instanceof Closure) {
            // Use reflection to get closure parameters
            $reflection = new ReflectionFunction($value);
            $closureParams = [];

            // Create Get and Set instances with references
            $get = new Get($this->evaluationData);
            $set = new Set($this->evaluationData);

            // Build parameters based on what the closure expects
            foreach ($reflection->getParameters() as $param) {
                $paramName = $param->getName();
                $paramType = $param->getType();

                // Check if a custom parameter was provided
                if (isset($parameters[$paramName])) {
                    $closureParams[] = $parameters[$paramName];

                    continue;
                }

                // Type-based injection
                if ($paramType && ! $paramType->isBuiltin()) {
                    $typeName = $paramType->getName();

                    if ($typeName === Get::class) {
                        $closureParams[] = $get;
                    } elseif ($typeName === Set::class) {
                        $closureParams[] = $set;
                    } else {
                        // Let Laravel resolve other types
                        $closureParams[] = app()->make($typeName);
                    }
                } elseif ($paramName === 'get') {
                    // Name-based injection for $get parameter (Filament-style)
                    $closureParams[] = $get;
                } elseif ($paramName === 'set') {
                    // Name-based injection for $set parameter (Filament-style)
                    $closureParams[] = $set;
                } elseif ($paramName === 'data') {
                    $closureParams[] = $this->evaluationData;
                } elseif ($paramName === 'record') {
                    $closureParams[] = $this->evaluationRecord;
                } elseif ($param->isDefaultValueAvailable()) {
                    $closureParams[] = $param->getDefaultValue();
                } else {
                    $closureParams[] = null;
                }
            }

            return $value(...$closureParams);
        }

        return $value;
    }
}
</file>

<file path="src/Concerns/HasPlaceholder.php">
<?php

namespace Laravilt\Support\Concerns;

use Closure;

/**
 * HasPlaceholder Trait
 *
 * Provides placeholder functionality for form inputs.
 */
trait HasPlaceholder
{
    protected string|Closure|null $placeholder = null;

    /**
     * Set the placeholder text.
     */
    public function placeholder(string|Closure|null $placeholder): static
    {
        $this->placeholder = $placeholder;

        return $this;
    }

    /**
     * Get the placeholder text.
     */
    public function getPlaceholder(): ?string
    {
        return $this->evaluate($this->placeholder);
    }
}
</file>

<file path=".github/workflows/fix-php-code-styling.yml">
name: Fix PHP Code Styling

on:
  push:
    branches: [ "master", "main" ]

permissions:
  contents: write

jobs:
  php-code-styling:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v6
        with:
          ref: ${{ github.head_ref }}

      - name: Fix PHP code style issues
        uses: aglipanci/laravel-pint-action@2.6
        with:
          preset: laravel

      - name: Commit changes
        uses: stefanzweifel/git-auto-commit-action@v7
        with:
          commit_message: Fix styling
</file>

<file path="README.md">
![support](https://raw.githubusercontent.com/laravilt/support/master/arts/screenshot.jpg)

# Laravilt Support

[![Latest Stable Version](https://poser.pugx.org/laravilt/support/version.svg)](https://packagist.org/packages/laravilt/support)
[![License](https://poser.pugx.org/laravilt/support/license.svg)](https://packagist.org/packages/laravilt/support)
[![Downloads](https://poser.pugx.org/laravilt/support/d/total.svg)](https://packagist.org/packages/laravilt/support)
[![Dependabot Updates](https://github.com/laravilt/support/actions/workflows/dependabot/dependabot-updates/badge.svg)](https://github.com/laravilt/support/actions/workflows/dependabot/dependabot-updates)
[![PHP Code Styling](https://github.com/laravilt/support/actions/workflows/fix-php-code-styling.yml/badge.svg)](https://github.com/laravilt/support/actions/workflows/fix-php-code-styling.yml)
[![Tests](https://github.com/laravilt/support/actions/workflows/tests.yml/badge.svg)](https://github.com/laravilt/support/actions/workflows/tests.yml)


Foundation package providing base components, utilities, and contracts for all Laravilt packages. Build custom components with reusable traits, utilities, and base classes.

## Features

- 🏗️ **Base Component** - Foundation for all UI components
- 🎨 **Concerns** - 13+ reusable component behaviors
- 🛠️ **Utilities** - Get, Set, Str, Arr helpers
- 📝 **Contracts** - Interfaces for consistent implementations
- 🔄 **Serialization** - Multi-platform support

## Installation

```bash
composer require laravilt/support
```

## Generator Command

```bash
php artisan make:component RatingInput
```

## Documentation

- **[Complete Documentation](docs/index.md)** - Base components, concerns, utilities
- **[MCP Server Guide](docs/mcp-server.md)** - AI agent integration

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
</file>

<file path="composer.json">
{
    "name": "laravilt/support",
    "description": "Foundation package providing base components, utilities, and contracts for all Laravilt packages. Build custom components with 13+ reusable traits, Get/Set utilities, and multi-platform serialization support.",
    "version": "1.0.4",
    "type": "library",
    "license": "MIT",
    "keywords": [
        "laravel",
        "laravilt",
        "support",
        "components",
        "utilities",
        "traits",
        "base",
        "foundation"
    ],
    "authors": [
        {
            "name": "Fady Mondy",
            "email": "info@3x1.io"
        }
    ],
    "require": {
        "php": "^8.3|^8.4",
        "spatie/laravel-package-tools": "^1.14"
    },
    "require-dev": {
        "larastan/larastan": "^2.9||^3.0",
        "laravel/pint": "^1.14",
        "nunomaduro/collision": "^8.1.1||^7.10.0",
        "orchestra/testbench": "^10.0",
        "pestphp/pest": "^3.0",
        "pestphp/pest-plugin-arch": "^3.0",
        "pestphp/pest-plugin-laravel": "^3.0",
        "pestphp/pest-plugin-livewire": "^3.0",
        "pestphp/pest-plugin-type-coverage": "^3.5",
        "phpstan/extension-installer": "^1.3||^2.0",
        "phpstan/phpstan-deprecation-rules": "^1.1||^2.0",
        "phpstan/phpstan-phpunit": "^1.3||^2.0"
    },
    "autoload": {
        "psr-4": {
            "Laravilt\\Support\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Laravilt\\Support\\Tests\\": "tests/",
            "Laravilt\\Support\\Tests\\Database\\Factories\\": "tests/database/factories",
            "Laravilt\\Support\\Tests\\Database\\Seeders\\": "tests/database/seeders"
        }
    },
    "scripts": {
        "testbench": "vendor/bin/testbench package:discover --ansi",
        "db": "vendor/bin/testbench package:create-sqlite-db && vendor/bin/testbench migrate",
        "analyse": "vendor/bin/phpstan analyse --memory-limit=512M",
        "test": "vendor/bin/pest",
        "test-coverage": "vendor/bin/pest --coverage",
        "format": "vendor/bin/pint"
    },
    "config": {
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "phpstan/extension-installer": true
        }
    },
    "extra": {
        "laravel": {
            "providers": [
                "Laravilt\\Support\\SupportServiceProvider"
            ]
        }
    },
    "prefer-stable": true
}
</file>

<file path="package.json">
{
    "name": "@laravilt/support",
    "version": "1.0.4",
    "description": "Foundation package providing base components, utilities, and contracts for all Laravilt packages. Build custom components with reusable utilities and composables.",
    "author": "Fady Mondy <info@3x1.io>",
    "license": "MIT",
    "type": "module",
    "main": "./dist/support.umd.js",
    "module": "./dist/support.es.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "types": "./dist/index.d.ts",
            "import": "./dist/support.es.js",
            "require": "./dist/support.umd.js"
        },
        "./style.css": "./dist/style.css"
    },
    "files": [
        "dist",
        "resources"
    ],
    "keywords": [
        "laravilt",
        "support",
        "utilities",
        "vue",
        "vue3",
        "base",
        "foundation",
        "composables",
        "inertia",
        "laravel"
    ],
    "repository": {
        "type": "git",
        "url": "https://github.com/laravilt/support"
    },
    "bugs": {
        "url": "https://github.com/laravilt/support/issues"
    },
    "homepage": "https://laravilt.dev/support",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist resources/js/laravilt-core.js || true",
        "build:npm": "npm run build",
        "prepublishOnly": "npm run build:npm",
        "format": "prettier --write resources/",
        "format:check": "prettier --check resources/",
        "lint": "eslint . --fix"
    },
    "peerDependencies": {
        "vue": "^3.3.0"
    },
    "devDependencies": {
        "@eslint/js": "^9.19.0",
        "@tailwindcss/vite": "^4.1.11",
        "@types/node": "^22.13.5",
        "@vitejs/plugin-vue": "^6.0.0",
        "@vue/eslint-config-typescript": "^14.3.0",
        "@vueuse/core": "^14.1.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "eslint": "^9.17.0",
        "eslint-config-prettier": "^10.0.1",
        "eslint-plugin-vue": "^9.32.0",
        "lucide-vue-next": "^0.555.0",
        "prettier": "^3.4.2",
        "prettier-plugin-organize-imports": "^4.1.0",
        "prettier-plugin-tailwindcss": "^0.6.11",
        "radix-vue": "^1.9.17",
        "reka-ui": "^2.6.1",
        "tailwind-merge": "^3.4.0",
        "typescript": "^5.2.2",
        "typescript-eslint": "^8.23.0",
        "vite": "^7.0.4",
        "vue": "^3.5.13",
        "vue-tsc": "^2.2.4"
    },
    "dependencies": {
        "axios": "^1.7.2",
        "lodash-es": "^4.17.21",
        "nprogress": "^0.2.0",
        "tailwindcss": "^4.1.1"
    }
}
</file>

</files>