README

Переиспользуемый UI kit для Laravel-приложений. Пакет содержит:

• Blade components для базовых UI-элементов;
• Tailwind CSS 4 entrypoint;
• дизайн-токены, которые можно переопределять на уровне проекта.

Пакет рассчитан на подключение через Composer и package discovery Laravel.

Установка

Для локальной разработки подключи пакет через path repository:

{
    "repositories": [
        {
            "type": "path",
            "url": "../package",
            "options": {
                "symlink": true
            }
        }
    ],
    "require": {
        "vyatka-it/laravel-ui-kit": "dev-main"
    }
}

После composer install Laravel автоматически зарегистрирует service provider через package discovery.

Что входит в пакет

Blade components

Компоненты доступны через anonymous component prefix ui:

<x-ui::action>Сохранить</x-ui::action>

<x-ui::action-mini variant="secondary">
    Предпросмотр
</x-ui::action-mini>

<x-ui::link href="/docs">
    Открыть документацию
</x-ui::link>

<x-ui::spinner class="text-text-brand-default" />

x-ui::input-code

Компонент для ввода одноразового кода из нескольких ячеек. Внутри использует x-ui::input-code-cell и подключаемый JS для автоперехода, удаления назад и вставки целиком.

<x-ui::input-code name="otp" :length="6" />

Если нужно подключить поведение в приложении, импортируй JS-энтрипоинт пакета рядом с основным app.js:

import '../../vendor/vyatka-it/laravel-ui-kit/resources/js/index.js';

CSS entrypoint

Основной файл для подключения стилей:

@import 'tailwindcss';
@import '../../vendor/vyatka-it/laravel-ui-kit/resources/css/index.css';

index.css подключает:

tokens.css    дефолтные design tokens
theme.css     mapping design tokens -> Tailwind theme
utilities.css  вспомогательные utility-классы пакета
js/index.js   поведение интерактивных компонентов

@source внутри index.css уже указывает на Blade-шаблоны пакета, поэтому Tailwind видит используемые классы без дополнительной настройки.

Компоненты

x-ui::action

Основная кнопка действия. Поддерживает:

• tag для рендера не только как button;
• size (s, m, l);
• variant (filled, outlined);
• color (primary, secondary);
• disabled и loading;
• leftIcon и rightIcon.

Пример:

<x-ui::action size="l" variant="filled" color="primary">
    Сохранить
</x-ui::action>

<x-ui::action variant="outlined" color="secondary" loading>
    Синхронизация
</x-ui::action>

x-ui::action-mini

Компактная action-кнопка для тулбаров и inline-действий.

<x-ui::action-mini>
    Подробнее
</x-ui::action-mini>

x-ui::link

Текстовая ссылка с состояниями hover, active и visited.

<x-ui::link href="/profile" color="primary">
    Профиль
</x-ui::link>

x-ui::spinner

Индикатор загрузки, который используется внутри action в состоянии loading, но также доступен отдельно.

<x-ui::spinner class="text-text-brand-default" />

Тема и токены

Пакет строится вокруг CSS-переменных --figma-* и Tailwind tokens, определённых в resources/css/theme.css.

Если нужно переопределить визуальный стиль в приложении, создай свой файл токенов и подключи его после CSS пакета:

@import 'tailwindcss';
@import '../../vendor/vyatka-it/laravel-ui-kit/resources/css/index.css';
@import './tokens.css';

Пример переопределения:

@layer base {
    :root {
        --figma-color-brand-primary: oklch(62% 0.2 145);
        --figma-color-brand-primary-hover: oklch(55% 0.18 145);
        --figma-radius-md: 0.75rem;
        --figma-size-control-md: 2.75rem;
    }
}

Так один и тот же пакет можно использовать в разных проектах, меняя только токены.

Структура пакета

src/
  UiKitServiceProvider.php
resources/
  css/
    index.css
    tokens.css
    theme.css
    utilities.css
  views/
    components/
      action.blade.php
      action-mini.blade.php
      link.blade.php
      spinner.blade.php

Локальная разработка

Для проверки пакета в playground используй локальный repository path из соседней папки. Это позволяет видеть изменения сразу, без публикации в Packagist.

Лицензия

MIT