@donkit-ai/design-system 0.2.3 → 0.2.4

package/README.md

@@ -2,112 +2,30 @@
 
 Минимальная дизайн система на основе дизайн токенов с поддержкой светлой и темной темы.
 
-## 🚀 Быстрый старт для команды
+## 🚀 Установка
 
-### Вариант 1: Через GitLab Package Registry (БЫСТРО ⚡)
-
-**Рекомендуется** - в 10 раз быстрее чем через Git!
-
-1. **Настройте доступ к GitLab Package Registry (один раз):**
-
-Создайте файл `.npmrc` в корне вашего проекта:
-
-```
-@donkit-ai:registry=https://gitlab.com/api/v4/packages/npm/
-//gitlab.com/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}
-```
-
-Или используйте свой Personal Access Token вместо `${CI_JOB_TOKEN}`:
-
-```
-@donkit-ai:registry=https://gitlab.com/api/v4/packages/npm/
-//gitlab.com/api/v4/packages/npm/:_authToken=YOUR_GITLAB_TOKEN
-```
-
-> **Создать токен:**
-> 1. GitLab → Settings → Access Tokens
-> 2. Name: `npm-packages` (любое имя)
-> 3. **Scope:** `api` или `read_api` (для чтения пакетов)
-> 4. **Role:** `Developer` (минимум для доступа к Package Registry)
-> 5. Create token → скопируйте токен в `.npmrc`
-
-2. **Добавьте пакет в `package.json`:**
-
-```json
-{
-  "dependencies": {
-    "@donkit-ai/design-system": "^0.1.2"
-  }
-}
-```
-
-3. **Установите:**
+Установите пакет из npm:
 
 ```bash
-npm install
+npm install @donkit-ai/design-system
 ```
 
-Установка займет **5-10 секунд** вместо 1-2 минут! 🚀
-
----
-
-### Вариант 2: Через Git (МЕДЛЕННО 🐢)
-
-1. **Добавьте пакет через Git в `package.json`:**
-
-```json
-{
-  "dependencies": {
-    "@donkit-ai/design-system": "git+https://gitlab.com/donkit-ai/platform/design/design-system.git#main"
-  }
-}
-```
-
-Для приватных репозиториев используйте SSH:
-```json
-{
-  "dependencies": {
-    "@donkit-ai/design-system": "git+ssh://[email protected]:donkit-ai/platform/design/design-system.git#main"
-  }
-}
-```
-
-2. **Установите зависимости:**
+или
 
 ```bash
-npm install
+yarn add @donkit-ai/design-system
 ```
 
 **Готово!** Дизайн-система установлена и готова к использованию.
 
-> 💡 **Совет:** Для ускорения установки используйте флаг `--prefer-offline`:
-> ```bash
-> npm install --prefer-offline
-> ```
-> Это использует локальный кэш npm и ускоряет повторные установки.
-
 ### Обновление до последней версии
 
-Когда дизайн-система обновляется, выполните:
-
 ```bash
 npm update @donkit-ai/design-system
 # или
 npm install @donkit-ai/design-system@latest
 ```
 
-### Использование конкретной версии
-
-Можно зафиксировать конкретную версию через Git теги:
-
-```json
-{
-  "dependencies": {
-    "@donkit-ai/design-system": "git+...#v0.1.2"
-  }
-}
-```
-
 ## Особенности
 
 - 🎨 **Дизайн токены** - семантические CSS переменные для цветов, отступов, типографики
@@ -718,16 +636,16 @@ import { AlertCircle } from 'lucide-react';
 
 ## 🛠 Для мейнтейнеров дизайн-системы
 
-### Публикация в GitLab Package Registry (рекомендуется)
+### Публикация в npm
 
 1. **Внесите изменения** в компоненты или токены
 
 2. **Обновите версию** в `package.json`:
 
 ```bash
-npm version patch   # 0.1.0 → 0.1.2 (багфиксы)
-npm version minor   # 0.1.0 → 0.2.0 (новые фичи)
-npm version major   # 0.1.0 → 1.0.0 (breaking changes)
+npm version patch   # 0.2.3 → 0.2.4 (багфиксы)
+npm version minor   # 0.2.3 → 0.3.0 (новые фичи)
+npm version major   # 0.2.3 → 1.0.0 (breaking changes)
 ```
 
 3. **Создайте тег и запушьте:**
@@ -736,7 +654,7 @@ npm version major   # 0.1.0 → 1.0.0 (breaking changes)
 git push --follow-tags
 ```
 
-**Готово!** GitLab CI автоматически опубликует новую версию в Package Registry.
+**Готово!** GitLab CI автоматически опубликует новую версию в публичный npm registry.
 
 ### Команда получит обновления
 
@@ -746,28 +664,6 @@ npm update @donkit-ai/design-system
 npm install @donkit-ai/design-system@latest
 ```
 
----
-
-### Публикация через Git (альтернатива)
-
-Если не используете Package Registry:
-
-```bash
-git add .
-git commit -m "Update button styles"
-git push origin main
-
-# Опционально: создать тег
-git tag v0.1.2
-git push --tags
-```
-
-Команда обновляет:
-
-```bash
-npm update @donkit-ai/design-system
-```
-
 ### Локальная разработка
 
 Для тестирования изменений локально используйте `npm link`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donkit-ai/design-system",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Donkit Design System - minimal design tokens and React components",
   "type": "module",
   "main": "src/index.js",

package/src/components/Modal.css

@@ -6,20 +6,20 @@
   bottom: 0;
   background-color: var(--color-overlay);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   z-index: 1000;
   padding: var(--space-m);
+  overflow-y: auto;
 }
 
 .ds-modal {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-s);
-  max-height: 90vh;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
+  margin: auto 0;
 }
 
 .ds-modal--small {
@@ -54,7 +54,6 @@
 .ds-modal__body {
   padding: 0 var(--space-l) var(--space-s);
   flex: 1;
-  overflow-y: auto;
 }
 
 .ds-modal__footer {
@@ -63,4 +62,7 @@
   justify-content: flex-start;
   gap: var(--space-s);
   padding: var(--space-l);
+  background-color: var(--color-bg);
+  position: relative;
+  z-index: 10;
 }

package/src/components/Textarea.css

@@ -28,6 +28,11 @@
   transition: border-color var(--transition-normal);
   line-height: 1.5;
   resize: vertical;
+  /* Кастомный resize handle (уголок) */
+  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-border) 50%, var(--color-border) 56%, transparent 56%, transparent 62%, var(--color-border) 62%, var(--color-border) 68%, transparent 68%);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: 12px 12px;
 }
 
 .ds-textarea::placeholder {
@@ -36,12 +41,14 @@
 
 .ds-textarea:hover:not(:disabled) {
   border-color: var(--color-border-hover);
+  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-border-hover) 50%, var(--color-border-hover) 56%, transparent 56%, transparent 62%, var(--color-border-hover) 62%, var(--color-border-hover) 68%, transparent 68%);
 }
 
 .ds-textarea:focus,
 .ds-textarea:active {
   outline: none;
   border-color: var(--color-border-hover);
+  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-border-hover) 50%, var(--color-border-hover) 56%, transparent 56%, transparent 62%, var(--color-border-hover) 62%, var(--color-border-hover) 68%, transparent 68%);
 }
 
 .ds-textarea:disabled {
@@ -50,10 +57,12 @@
 
 .ds-textarea--error {
   border-color: var(--color-error);
+  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-error) 50%, var(--color-error) 56%, transparent 56%, transparent 62%, var(--color-error) 62%, var(--color-error) 68%, transparent 68%);
 }
 
 .ds-textarea--no-resize {
   resize: none;
+  background-image: none;
 }
 
 /* Sizes */

package/src/styles/tokens.css

@@ -73,7 +73,7 @@
     --color-item-bg-selected: var(--color-white-06);
     --color-item-bg-hover: var(--color-white-13);
     --color-code-bg: var(--color-white-15);
-    --color-overlay: var(--color-black-60);
+    --color-overlay: var(--color-black-65);
 
     /* Status colors - adaptive (bright for dark theme) */
     --color-status-info: var(--color-info);