Add docs

docs/components/button.md

@@ -0,0 +1,27 @@
+# Button
+
+## Import
+
+```ts
+import { Button } from "@tria/ui";
+```
+
+## Variants
+
+Рекомендуемая модель:
+- `data-variant="primary" | "outline" | "ghost" | "danger"`
+- `data-size="sm" | "md" | "lg"`
+
+## Example
+
+```tsx
+<Button data-variant="primary" data-size="md">Continue</Button>
+<Button data-variant="outline" data-size="md">Cancel</Button>
+```
+
+## Design tokens
+
+- `--btn-h-sm/md/lg`
+- `--btn-px-sm/md/lg`
+- `--btn-radius`
+- `--btn-gap`

docs/components/cells-and-lists.md

@@ -0,0 +1,24 @@
+# Cells & Lists
+
+Списки и ячейки — основной паттерн для настроек и навигации.
+
+## Import
+
+```ts
+import { List, Cell, SimpleCell, RichCell } from "@tria/ui";
+```
+
+## Examples
+
+```tsx
+<List>
+  <Cell title="Profile" subtitle="Account settings" chevron />
+  <Cell title="Notifications" after="12" chevron />
+</List>
+```
+
+## Design tokens
+
+- `--cell-h`, `--cell-px`, `--cell-gap`
+- `--cell-before`, `--cell-chev`
+- `--cell-badge-*`

docs/components/dates.md

@@ -0,0 +1,13 @@
+# Dates
+
+Calendar / CalendarRange / DateInput / DateRangeInput.
+
+## Import
+
+```ts
+import { Calendar, CalendarRange, DateInput, DateRangeInput } from "@tria/ui";
+```
+
+## Tokens
+
+- `--cal-day`, `--cal-day-radius`, `--cal-gap`, `--cal-p`

docs/components/display.md

@@ -0,0 +1,15 @@
+# Display
+
+Компоненты отображения: GridAvatar, Gallery, Accordion и др.
+
+## Import
+
+```ts
+import { GridAvatar, Gallery, Accordion } from "@tria/ui";
+```
+
+## Examples
+
+```tsx
+<GridAvatar items={[{ id:"u1", title:"Alex", initials:"A" }]} cols={2} size={36} />
+```

docs/components/feedback.md

@@ -0,0 +1,16 @@
+# Feedback
+
+Компоненты обратной связи: alert/progress/spinner/skeleton/snackbar/pull-to-refresh.
+
+## Import
+
+```ts
+import { Alert, Progress, Spinner, Skeleton, Snackbar, PullToRefresh } from "@tria/ui";
+```
+
+## Snackbar
+
+```tsx
+const [open, setOpen] = useState(false);
+<Snackbar open={open} onOpenChange={setOpen} text="Saved" />
+```

docs/components/forms.md

@@ -0,0 +1,25 @@
+# Forms
+
+Набор форм‑компонентов: input/select/chips/segmented/file/writebar.
+
+## Import (examples)
+
+```ts
+import {
+  Input, Textarea, Switch, Checkbox, Radio,
+  Slider, SegmentedControl,
+  NativeSelect, CustomSelect, SelectMimicry,
+  ChipsInput, ChipsSelect,
+  DropZone, File,
+  WriteBar
+} from "@tria/ui";
+```
+
+## Controlled inputs
+
+Все поля предпочтительно держать controlled (через state), чтобы унифицировать поведение на платформах.
+
+## Design tokens
+
+- `--input-h-*`, `--input-radius`, `--input-px`
+- `--chip-*`, `--chipsbox-*` (если применимо)

docs/components/modals.md

@@ -0,0 +1,28 @@
+# Modals & Overlays
+
+Набор оверлеев: ActionSheet, ModalCard, ModalPage, Popover/Tooltip.
+
+## Import
+
+```ts
+import { ActionSheet, ModalCard, ModalPage, Popover, Tooltip } from "@tria/ui";
+```
+
+## ActionSheet
+
+```tsx
+<ActionSheet
+  open={open}
+  onOpenChange={setOpen}
+  title="Actions"
+  actions={[
+    { title: "Save", onClick: () => {} },
+    { title: "Delete", tone: "destructive", onClick: () => {} },
+  ]}
+/>
+```
+
+## Tokens
+
+- `--modal-w`, `--modal-p`, `--modal-radius`
+- `--modal-overlay`, `--modal-blur`

docs/components/tabbar.md

@@ -0,0 +1,37 @@
+# TabBar
+
+TabBar — навигация нижнего уровня (в стиле mobile). В web/tablet режимах может менять размещение.
+
+## Import
+
+```ts
+import { TabBar } from "@tria/ui";
+```
+
+## Basic
+
+```tsx
+<TabBar
+  items={[
+    { id: "home", label: "Home" },
+    { id: "search", label: "Search" },
+    { id: "profile", label: "Profile" },
+  ]}
+  value={tab}
+  onChange={setTab}
+  placement="bottom"
+/>
+```
+
+## Responsive placement
+
+- mobile portrait → `bottom`
+- desktop/tablet landscape → `right-top | right-center | right-bottom`
+
+## Design tokens
+
+- `--tabbar-h`
+- `--tabbar-radius`
+- `--tabbar-w`
+- `--tabbar-gap`
+- `--safe-bottom/right`