@carparkteam/parz-ui 0.0.0-stage → 1.0.0

package/docs/parz-toggle.en.md

@@ -0,0 +1,62 @@
+# Parz Toggle
+
+`ParzToggle` is a Parz UI switch with a liquid thumb. When it flips, the thumb stretches toward where it is going, squashes on arrival and settles with a light overshoot — the same feel as Parz Menu. Nothing jumps.
+
+- **tap or click** — flips with the liquid motion;
+- **press** — the thumb gently stretches like a drop;
+- **drag** — pull the thumb with a finger or mouse; release past the middle to switch;
+- **keyboard** — Tab to focus (a visible ring appears), Space or Enter to flip;
+- **reduced motion** — with `prefers-reduced-motion` it just slides, no squash.
+
+Under the hood it is a real `<input type="checkbox" role="switch">`, so forms, `name`, screen readers and focus work as usual.
+
+```tsx
+import { useState } from 'react';
+import { ParzToggle } from '@carparkteam/parz-ui';
+import '@carparkteam/parz-ui/style.css';
+
+const [on, setOn] = useState(true);
+
+<ParzToggle checked={on} onChange={setOn} label="Wi-Fi" />
+
+// uncontrolled, no visible label
+<ParzToggle defaultChecked ariaLabel="Dark theme" size="lg" accent="#7aa7ff" />
+```
+
+| Prop | Default | What it does |
+|---|---|---|
+| `checked` | — | State (controlled mode) |
+| `defaultChecked` | `false` | Initial state (uncontrolled mode) |
+| `onChange` | — | `(checked: boolean) => void` — on click, keyboard or drag |
+| `label` | — | Text or node next to the switch |
+| `labelPosition` | `'end'` | `'end'` — label on the right, `'start'` — on the left |
+| `ariaLabel` | — | Name for screen readers when there is no visible `label` |
+| `disabled` | `false` | Turned off, dimmed, not focusable |
+| `size` | `'md'` | `'sm'` (16 px), `'md'` (20 px), `'lg'` (28 px) or track height in px |
+| `accent` | `#6ee7a0` | Track color when on |
+| `trackColor` | `#2a2a30` | Track color when off. On a light page use something like `#d9dae1` |
+| `thumbColor` | `#fff` | Thumb color |
+| `draggable` | `true` | Whether the thumb can be dragged |
+| `cooldown` | `0` | Minimum pause between switches, ms. A too-frequent attempt is rejected |
+| `canChange` | — | `(next) => boolean` — your own check; `false` rejects the switch |
+| `onReject` | — | `(next) => void` — called when an attempt was rejected |
+| `rejectColor` | `#ff5c5c` | Track color while rejecting |
+| `name` / `id` | — | Passed to the inner checkbox |
+| `className` / `style` | — | On the root `<label>` |
+
+## Rejected state
+
+Protect from rapid on/off spam (for example, a setting that hits a server): set `cooldown`. If the user flips again too soon, the switch does not change — for a second the track turns red and the thumb gives a short shake, then everything calmly returns. The same happens when `canChange` returns `false`.
+
+```tsx
+<ParzToggle checked={on} onChange={setOn} label="Notifications"
+  cooldown={1500} onReject={() => toast('Too fast — wait a moment')} />
+```
+
+## CSS variables
+
+Colors can also be set from CSS on the root or any parent: `--pz-tg-accent`, `--pz-tg-track`, `--pz-tg-knob`, `--pz-tg-reject`.
+
+```css
+.settings { --pz-tg-accent: #ff8a3d; }
+```

package/docs/parz-toggle.hy.md

@@ -0,0 +1,62 @@
+# Parz Toggle
+
+`ParzToggle`-ը Parz UI-ի անջատիչն է՝ հեղուկ սահնակով։ Փոխարկելիս սահնակը ձգվում է դեպի իր ուղղությունը, տեղ հասնելով տափակում է և հանգստանում թեթև անցումով՝ ինչպես Parz Menu-ում։ Ոչինչ կտրուկ չէ։
+
+- **սեղմում կամ կտտոց** — փոխարկվում է հեղուկ անիմացիայով;
+- **պահում** — սահնակը մեղմ ձգվում է կաթիլի պես;
+- **քաշում** — քաշեք սահնակը մատով կամ մկնիկով, մեջտեղից այն կողմ բաց թողնելիս կփոխարկվի;
+- **ստեղնաշար** — Tab-ը տալիս է ֆոկուս (երևում է օղակ), Space կամ Enter՝ փոխարկում;
+- **քիչ շարժում** — `prefers-reduced-motion`-ի դեպքում պարզապես սահում է՝ առանց տափակելու։
+
+Ներսում իսկական `<input type="checkbox" role="switch">` է, ուստի ձևերը, `name`-ը, էկրանի ընթերցողները և ֆոկուսը աշխատում են սովորականի պես։
+
+```tsx
+import { useState } from 'react';
+import { ParzToggle } from '@carparkteam/parz-ui';
+import '@carparkteam/parz-ui/style.css';
+
+const [on, setOn] = useState(true);
+
+<ParzToggle checked={on} onChange={setOn} label="Wi-Fi" />
+
+// չկառավարվող, առանց տեսանելի պիտակի
+<ParzToggle defaultChecked ariaLabel="Մուգ թեմա" size="lg" accent="#7aa7ff" />
+```
+
+| Prop | Լռելյայն | Ինչ է անում |
+|---|---|---|
+| `checked` | — | Վիճակ (կառավարվող ռեժիմ) |
+| `defaultChecked` | `false` | Սկզբնական վիճակ (չկառավարվող ռեժիմ) |
+| `onChange` | — | `(checked: boolean) => void` — կտտոցով, ստեղնաշարով կամ քաշելով |
+| `label` | — | Տեքստ կամ տարր անջատիչի կողքին |
+| `labelPosition` | `'end'` | `'end'` — պիտակը աջից, `'start'` — ձախից |
+| `ariaLabel` | — | Անուն էկրանի ընթերցողների համար, եթե տեսանելի `label` չկա |
+| `disabled` | `false` | Անջատված, խամրած, ֆոկուս չի ստանում |
+| `size` | `'md'` | `'sm'` (16 px), `'md'` (20 px), `'lg'` (28 px) կամ ուղու բարձրությունը px-ով |
+| `accent` | `#6ee7a0` | Միացված ուղու գույնը |
+| `trackColor` | `#2a2a30` | Անջատված ուղու գույնը։ Բաց էջում՝ օրինակ `#d9dae1` |
+| `thumbColor` | `#fff` | Սահնակի գույնը |
+| `draggable` | `true` | Կարելի՞ է քաշել սահնակը |
+| `cooldown` | `0` | Նվազագույն դադարը փոխարկումների միջև, մվ։ Չափազանց հաճախ փորձը մերժվում է |
+| `canChange` | — | `(next) => boolean` — սեփական ստուգում; `false`-ը մերժում է փոխարկումը |
+| `onReject` | — | `(next) => void` — կանչվում է, երբ փորձը մերժվել է |
+| `rejectColor` | `#ff5c5c` | Ուղու գույնը մերժման ժամանակ |
+| `name` / `id` | — | Փոխանցվում են ներքին checkbox-ին |
+| `className` / `style` | — | Արմատային `<label>`-ի վրա |
+
+## Մերժման վիճակ
+
+Պաշտպանություն հաճախակի միացնել/անջատելուց (օրինակ՝ սերվերին դիմող կարգավորում)՝ տվեք `cooldown`։ Եթե շատ շուտ նորից փոխարկեն, անջատիչը չի փոխվի․ մեկ վայրկյան ուղին կկարմրի, սահնակը կարճ կցնցվի, հետո ամեն ինչ հանգիստ կվերադառնա։ Նույնը՝ երբ `canChange`-ը վերադարձնում է `false`։
+
+```tsx
+<ParzToggle checked={on} onChange={setOn} label="Ծանուցումներ"
+  cooldown={1500} onReject={() => toast('Չափազանց հաճախ է, սպասեք')} />
+```
+
+## CSS փոփոխականներ
+
+Գույները կարելի է տալ նաև CSS-ով՝ անջատիչի կամ ցանկացած ծնողի վրա՝ `--pz-tg-accent`, `--pz-tg-track`, `--pz-tg-knob`, `--pz-tg-reject`։
+
+```css
+.settings { --pz-tg-accent: #ff8a3d; }
+```

package/docs/parz-toggle.ru.md

@@ -0,0 +1,62 @@
+# Parz Toggle
+
+`ParzToggle` — переключатель Parz UI с жидким бегунком. При переключении бегунок тянется туда, куда едет, сплющивается на месте и успокаивается с лёгким перелётом — как в Parz Menu. Ничего резкого.
+
+- **нажатие или клик** — переключается с жидкой анимацией;
+- **удержание** — бегунок мягко вытягивается, как капля;
+- **перетаскивание** — тяните бегунок пальцем или мышью; отпустите за серединой — переключится;
+- **клавиатура** — Tab ставит фокус (появляется заметное кольцо), Пробел или Enter переключают;
+- **меньше движения** — при `prefers-reduced-motion` просто скользит, без сплющивания.
+
+Внутри — настоящий `<input type="checkbox" role="switch">`, поэтому формы, `name`, экранные дикторы и фокус работают как обычно.
+
+```tsx
+import { useState } from 'react';
+import { ParzToggle } from '@carparkteam/parz-ui';
+import '@carparkteam/parz-ui/style.css';
+
+const [on, setOn] = useState(true);
+
+<ParzToggle checked={on} onChange={setOn} label="Wi-Fi" />
+
+// неуправляемый, без видимой подписи
+<ParzToggle defaultChecked ariaLabel="Тёмная тема" size="lg" accent="#7aa7ff" />
+```
+
+| Проп | По умолчанию | Что делает |
+|---|---|---|
+| `checked` | — | Состояние (управляемый режим) |
+| `defaultChecked` | `false` | Начальное состояние (неуправляемый режим) |
+| `onChange` | — | `(checked: boolean) => void` — при клике, с клавиатуры или перетаскиванием |
+| `label` | — | Текст или элемент рядом с тумблером |
+| `labelPosition` | `'end'` | `'end'` — подпись справа, `'start'` — слева |
+| `ariaLabel` | — | Имя для экранных дикторов, если нет видимой `label` |
+| `disabled` | `false` | Отключён, приглушён, не получает фокус |
+| `size` | `'md'` | `'sm'` (16 px), `'md'` (20 px), `'lg'` (28 px) или высота дорожки в px |
+| `accent` | `#6ee7a0` | Цвет включённой дорожки |
+| `trackColor` | `#2a2a30` | Цвет выключенной дорожки. На светлой странице — например, `#d9dae1` |
+| `thumbColor` | `#fff` | Цвет бегунка |
+| `draggable` | `true` | Можно ли тянуть бегунок |
+| `cooldown` | `0` | Минимальная пауза между переключениями, мс. Слишком частая попытка отклоняется |
+| `canChange` | — | `(next) => boolean` — своя проверка; `false` отклоняет переключение |
+| `onReject` | — | `(next) => void` — вызывается, когда попытку отклонили |
+| `rejectColor` | `#ff5c5c` | Цвет дорожки при отказе |
+| `name` / `id` | — | Передаются во внутренний чекбокс |
+| `className` / `style` | — | На корневой `<label>` |
+
+## Состояние отказа
+
+Защита от частых вкл/выкл (например, настройка, которая ходит на сервер): задайте `cooldown`. Если переключить снова слишком рано, тумблер не изменится — на секунду дорожка станет красной, бегунок коротко вздрогнет, и всё спокойно вернётся. То же самое — когда `canChange` вернул `false`.
+
+```tsx
+<ParzToggle checked={on} onChange={setOn} label="Уведомления"
+  cooldown={1500} onReject={() => toast('Слишком часто — подождите')} />
+```
+
+## CSS-переменные
+
+Цвета можно задать и из CSS — на самом тумблере или любом родителе: `--pz-tg-accent`, `--pz-tg-track`, `--pz-tg-knob`, `--pz-tg-reject`.
+
+```css
+.settings { --pz-tg-accent: #ff8a3d; }
+```

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@carparkteam/parz-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Parz UI — React components with liquid motion, crafted by CarPark Team & Dev.CarPark: Parz Menu, Parz Toggle, Parz Checkbox, Parz Slider, Parz Range, AnimoLogo.",
+  "keywords": [
+    "react",
+    "react-component",
+    "ui",
+    "ui-kit",
+    "components",
+    "animation",
+    "liquid",
+    "tabbar",
+    "navigation",
+    "toggle",
+    "switch",
+    "checkbox",
+    "slider",
+    "range-slider",
+    "parz"
+  ],
+  "author": "CarPark Team & Dev.CarPark",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/CarParkTeam-Dev/parz-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CarParkTeam-Dev/parz-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CarParkTeam-Dev/parz-ui/issues"
+  },
+  "type": "module",
+  "main": "./dist/parz-ui.js",
+  "module": "./dist/parz-ui.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/types/index.d.ts", "import": "./dist/parz-ui.js" },
+    "./style.css": "./dist/parz-ui.css",
+    "./package.json": "./package.json"
+  },
+  "files": ["dist", "docs", "README.md", "README.ru.md", "README.hy.md", "LICENSE"],
+  "sideEffects": ["*.css"],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
+    "prepare": "npm run build:lib",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}