Установка

Пакет @tulls/ui живёт в монорепо tulls и подключается как workspace-зависимость. Сборки у пакета нет — приложение получает исходники TypeScript и транспилирует их своим бандлером вместе со своим кодом.

Зависимость

Добавьте пакет в package.json приложения и установите зависимости:

{
  "dependencies": {
    "@tulls/ui": "workspace:*"
  }
}

pnpm install

У пакета три входа:

Стили

Импортируйте application.css один раз — в корневом CSS-файле приложения:

@import "@tulls/ui/application.css";

Файл приносит всё окружение, на которое рассчитаны компоненты: CSS-reset, светлую тему (--theme-*), токены размеров, отступов, радиусов и теней, шрифт Golos Text (self-hosted, внешних запросов нет). Без этого импорта компоненты остаются без темы и токенов.

Локаль

Оберните корень приложения в LocaleProvider — компоненты на Ark UI (даты, числа, датпикер) форматируют значения по этой локали, по умолчанию берётся en-US:

import { LocaleProvider } from "@tulls/ui";

export function Providers({ children }: { children: React.ReactNode }) {
  return <LocaleProvider locale="ru-RU">{children}</LocaleProvider>;
}

Уведомления

Функция toast() показывает уведомления через регион Toaster — смонтируйте его один раз в корне приложения:

import { Toaster } from "@tulls/ui";

export function App() {
  return (
    <>
      {/* ... */}
      <Toaster />
    </>
  );
}

Проверка

Компоненты импортируются из корневого входа:

import { Badge, Button } from "@tulls/ui";

export function Example() {
  return (
    <>
      <Button.Root variant="primary">
        <Button.Label>Создать</Button.Label>
      </Button.Root>
      <Badge.Root variant="success" appearance="ghost">
        <Badge.Label>Готово</Badge.Label>
      </Badge.Root>
    </>
  );
}

Как устроен общий словарь пропсов (size, variant, appearance, radius, color) — на странице Основные принципы.

Типы CSS-модулей

Пакет отдаётся исходниками, поэтому его *.module.css-импорты попадают в программу TypeScript потребителя. Next.js и Vite приносят объявления таких модулей сами; чистому workspace-пакету без фреймворка (например, пакетам modules/*) нужна собственная декларация — файл src/css-modules.d.ts:

declare module "*.module.css" {
  const classes: Record<string, string>;
  export default classes;
}

Без неё tsc пакета споткнётся об исходники @tulls/ui, даже если своих CSS-модулей в пакете нет.