Add docs

docs/getting-started/installation.md

@@ -0,0 +1,49 @@
+# Installation
+
+## Requirements
+- React 18+
+- TypeScript 5+ (рекомендуется)
+- Vite 5+ (для dev/примера)
+
+## Install
+
+```bash
+pnpm add @tria/ui
+```
+
+## Import styles
+
+Рекомендуемый способ:
+
+```ts
+import "@tria/ui/styles";
+```
+
+Альтернатива:
+
+```ts
+import "@tria/ui/auto";
+```
+
+## First render
+
+```tsx
+import React from "react";
+import { UIProvider, Button } from "@tria/ui";
+
+export function App() {
+  return (
+    <UIProvider config={{ theme: "dark", platform: "web", skin: "ios" }}>
+      <Button data-variant="primary">Hello Tria</Button>
+    </UIProvider>
+  );
+}
+```
+
+## Monorepo note (pnpm workspaces)
+
+Если `@tria/ui` подключён как workspace‑пакет, и вы используете `package.json#exports`,
+избегайте deep‑imports вида `@tria/ui/src/...`. Все публичные сущности должны импортироваться из `@tria/ui`:
+
+✅ `import { TabBar } from "@tria/ui";`  
+❌ `import { TabBar } from "@tria/ui/src/components/tabbar/TabBar";`

docs/getting-started/styles.md

@@ -0,0 +1,36 @@
+# Styles & Bundling
+
+Tria UI использует **CSS tokens** и глобальные классы компонентов. Предпочтительная схема — один импорт CSS‑пакета.
+
+## Recommended: global styles pack
+
+```ts
+import "@tria/ui/styles";
+```
+
+Преимущества:
+- предсказуемый порядок слоёв (base → tokens → presets → components)
+- меньше дублей CSS
+- проще кастомизация (вы добавляете свой слой после `@tria/ui/styles`)
+
+## Auto entry
+
+```ts
+import "@tria/ui/auto";
+```
+
+Подходит для быстрых прототипов. В production чаще используют отдельный импорт `@tria/ui/styles`.
+
+## CSS entry layout
+
+Внутри пакета (ориентир):
+
+- `styles/base.css` — reset/база
+- `styles/tokens.css` — базовые токены (`--ui-*`)
+- `styles/presets.css` — platform/skin/theme значения
+- `styles/components/*.css` — стили конкретных компонентов
+
+## Don’t do
+
+- Не импортируйте CSS из каждого компонента (можно получить дубли и хаос порядка).
+- Не смешивайте `@tria/ui/auto` и `@tria/ui/styles` одновременно.

docs/getting-started/theming.md

@@ -0,0 +1,41 @@
+# Theming (theme/platform/skin)
+
+Tria UI использует три измерения конфигурации:
+
+- `theme`: `light | dark`
+- `platform`: `web | vk | tg`
+- `skin`: `web | ios | android`
+
+Комбинация управляет *CSS пресетами* и компонентными токенами.
+
+## UIProvider
+
+```tsx
+import { UIProvider } from "@tria/ui";
+
+<UIProvider config={{ theme: "dark", platform: "vk", skin: "ios" }}>
+  ...
+</UIProvider>
+```
+
+UIProvider устанавливает `data-theme`, `data-platform`, `data-skin` на `document.documentElement`
+(или на `config.root`), и может применить `config.vars` — набор CSS variables.
+
+## Runtime switching
+
+```tsx
+const [theme, setTheme] = useState<"light"|"dark">("dark");
+<UIProvider config={{ theme, platform, skin }} />
+```
+
+## Which combos matter
+
+- `platform="vk" + skin="ios"` — VK iOS‑вид (Cupertino‑ощущение)
+- `platform="vk" + skin="android"` — VK Android‑вид (Material‑ощущение)
+- `platform="tg"` — более “telegram‑ui” акценты
+- `platform="web"` — нейтральный web preset
+
+## Troubleshooting
+
+Если визуально не меняется “skin”, значит компоненты ещё используют жёсткие px.
+Нужно заменить размеры на токены (`--btn-*`, `--input-*`, `--cell-*`, `--tabbar-*`) и т.п.