@carparkteam/parz-ui 0.0.0-stage → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,39 @@
1
+ # Ինչ նոր կա
2
+
3
+ [English](CHANGELOG.md) · **Հայերեն** · [Русский](CHANGELOG.ru.md)
4
+
5
+ Parz UI-ի բոլոր նշանակալի փոփոխությունները։ Տարբերակների համարները հետևում են [իմաստային տարբերակավորմանը](https://semver.org)՝ **patch** — ուղղումներ, **minor** — նոր կոմպոնենտներ և կարգավորումներ, **major** — փոփոխություններ, որոնցից հետո հին կոդը կարող է չաշխատել։
6
+
7
+ Թարմացնել ձեր նախագծում՝
8
+
9
+ ```bash
10
+ npm update @carparkteam/parz-ui
11
+ ```
12
+
13
+ ## Unreleased
14
+
15
+ ## 1.0.1 — 2026-11-11
16
+
17
+ ### Ավելացվել է
18
+ - «Ինչ նոր կա» էջ կայքում՝ փոփոխությունների այս ցուցակը երեք լեզվով։
19
+ - Ընթացիկ տարբերակի համարը ցույց է տրվում գլխավոր էջում՝ տեղադրման հրամանի կողքին։
20
+ - `CHANGELOG.md`-ն այժմ գալիս է փաթեթի հետ։
21
+ - «Ինչ նոր կա» էջը ստուգում է թարմացումները՝ համեմատում է կայքի տարբերակը վերջին թողարկման հետ (մեր սերվերի `latest.json`-ից, իսկ եթե այն հասանելի չէ՝ npm-ից)։ Առանց ինտերնետի ստուգումը պարզապես չի երևում։
22
+ - `npm run build`-ն այժմ կայքի կողքին ստեղծում է `latest.json`՝ տարբերակով և ամսաթվով։
23
+
24
+ ### Ուղղվել է
25
+ - **Parz Menu:** iPhone-ում (Safari) և որոշ Android դիտարկիչներում որոնման դաշտին սեղմելիս էկրանն այլևս չի մեծանում. սենսորային էկրաններում դաշտի տեքստն այժմ 16 px է։
26
+
27
+ ## 1.0.0 — 2026-11-11
28
+
29
+ Առաջին հանրային թողարկումը npm-ում՝ `@carparkteam/parz-ui` անունով։
30
+
31
+ ### Ավելացվել է
32
+ - **Parz Menu** (`ParzMenu`) — նավիգացիա, որտեղ ընդգծումը հոսում է կաթիլի պես; համակարգչում դառնում է վերնագիր՝ որոնմամբ։
33
+ - **Parz Toggle** (`ParzToggle`) — անջատիչ հեղուկ սահնակով, որը կարելի է քաշել; կա «չափազանց հաճախ» մերժման վիճակ (`cooldown`, `canChange`, `onReject`)։
34
+ - **Parz Checkbox** (`ParzCheckbox`) — գույնը տարածվում է կաթիլի պես, նշանը գծվում է; «մասամբ ընտրված» և սխալի վիճակ։
35
+ - **Parz Slider** (`ParzSlider`) — սահնակը ձգվում է շարժման արագությամբ։
36
+ - **Parz Range** (`ParzRange`) — 2-ից 5 սահնակ մեկ ուղու վրա, `minDistance`, `fill="pairs"`։
37
+ - **AnimoLogo** — կենդանի տեքստային լոգո։
38
+ - **ParzCredit** — պատրաստի «Components by CarPark Team» գրությունը, որը պահանջում է լիցենզիան։
39
+ - Կայք՝ կենդանի խմբագրիչով և փաստաթղթերով յուրաքանչյուր կոմպոնենտի համար՝ անգլերեն, ռուսերեն և հայերեն։
package/CHANGELOG.md ADDED
@@ -0,0 +1,39 @@
1
+ # Changelog
2
+
3
+ **English** · [Հայերեն](CHANGELOG.hy.md) · [Русский](CHANGELOG.ru.md)
4
+
5
+ All notable changes to Parz UI. Versions follow [semantic versioning](https://semver.org): **patch** — fixes, **minor** — new components and options, **major** — changes that may break existing code.
6
+
7
+ Update in your project:
8
+
9
+ ```bash
10
+ npm update @carparkteam/parz-ui
11
+ ```
12
+
13
+ ## Unreleased
14
+
15
+ ## 1.0.1 — 2026-11-11
16
+
17
+ ### Added
18
+ - “What’s new” page on the site with this changelog in three languages.
19
+ - The current version is shown next to the install command on the home page.
20
+ - `CHANGELOG.md` is now shipped with the package.
21
+ - The “What’s new” page checks for updates: it compares the site version with the latest release (from `latest.json` on our server, or npm if the server is unavailable). Without internet the check simply stays hidden.
22
+ - `npm run build` now also writes `latest.json` (version and date) next to the site.
23
+
24
+ ### Fixed
25
+ - **Parz Menu:** tapping the search field on iPhone (Safari) and some Android browsers no longer zooms the page — on touch screens the field text is now 16 px.
26
+
27
+ ## 1.0.0 — 2026-11-11
28
+
29
+ First public release on npm as `@carparkteam/parz-ui`.
30
+
31
+ ### Added
32
+ - **Parz Menu** (`ParzMenu`) — navigation bar where the highlight flows between tabs like a drop; on desktop it turns into a header with search.
33
+ - **Parz Toggle** (`ParzToggle`) — switch with a liquid, draggable thumb and a “too fast” rejected state (`cooldown`, `canChange`, `onReject`).
34
+ - **Parz Checkbox** (`ParzCheckbox`) — color spreads like a drop, the tick draws itself; indeterminate and error states.
35
+ - **Parz Slider** (`ParzSlider`) — the thumb stretches with the speed of the drag.
36
+ - **Parz Range** (`ParzRange`) — 2 to 5 thumbs on one track, `minDistance`, `fill="pairs"`.
37
+ - **AnimoLogo** — living text logo.
38
+ - **ParzCredit** — ready-made “Components by CarPark Team” attribution required by the license.
39
+ - Playground site with a live editor and docs for every component in English, Russian and Armenian.
@@ -0,0 +1,39 @@
1
+ # Что нового
2
+
3
+ [English](CHANGELOG.md) · [Հայերեն](CHANGELOG.hy.md) · **Русский**
4
+
5
+ Все заметные изменения Parz UI. Номера версий идут по [семантическому версионированию](https://semver.org/lang/ru/): **patch** — исправления, **minor** — новые компоненты и настройки, **major** — изменения, после которых старый код может перестать работать.
6
+
7
+ Обновиться в своём проекте:
8
+
9
+ ```bash
10
+ npm update @carparkteam/parz-ui
11
+ ```
12
+
13
+ ## Unreleased
14
+
15
+ ## 1.0.1 — 2026-11-11
16
+
17
+ ### Добавлено
18
+ - Страница «Что нового» на сайте — этот список изменений на трёх языках.
19
+ - Номер текущей версии показан рядом с командой установки на главной.
20
+ - `CHANGELOG.md` теперь идёт вместе с пакетом.
21
+ - Страница «Что нового» проверяет обновления: сравнивает версию сайта с последним выпуском (из `latest.json` на нашем сервере, а если он недоступен — из npm). Без интернета проверка просто не показывается.
22
+ - `npm run build` теперь кладёт рядом с сайтом `latest.json` с версией и датой.
23
+
24
+ ### Исправлено
25
+ - **Parz Menu:** на iPhone (Safari) и некоторых Android-браузерах экран больше не приближается при нажатии на поле поиска — на сенсорных экранах текст в поле теперь 16 px.
26
+
27
+ ## 1.0.0 — 2026-11-11
28
+
29
+ Первый публичный выпуск в npm под именем `@carparkteam/parz-ui`.
30
+
31
+ ### Добавлено
32
+ - **Parz Menu** (`ParzMenu`) — навигация, где подсветка перетекает каплей; на компьютере становится шапкой с поиском.
33
+ - **Parz Toggle** (`ParzToggle`) — переключатель с жидким бегунком, его можно тянуть; есть состояние отказа «слишком часто» (`cooldown`, `canChange`, `onReject`).
34
+ - **Parz Checkbox** (`ParzCheckbox`) — цвет растекается каплей, галочка дорисовывается; «частично выбрано» и ошибка.
35
+ - **Parz Slider** (`ParzSlider`) — бегунок тянется по скорости движения.
36
+ - **Parz Range** (`ParzRange`) — от 2 до 5 бегунков на одной дорожке, `minDistance`, `fill="pairs"`.
37
+ - **AnimoLogo** — живой логотип-надпись.
38
+ - **ParzCredit** — готовая подпись «Components by CarPark Team», которую требует лицензия.
39
+ - Сайт с живым редактором и документацией для каждого компонента на английском, русском и армянском.
package/LICENSE ADDED
@@ -0,0 +1,40 @@
1
+ Parz UI License (MIT with Attribution)
2
+
3
+ Copyright (c) 2026 CarPark Team & Dev.CarPark
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ 1. The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ 2. Attribution. Any website, application or other product that uses the
16
+ Software or any part of it, including modified versions of its components,
17
+ must display to its end users the text
18
+
19
+ Components by CarPark Team
20
+
21
+ as a link to https://dev.carpark.am/parz-ui
22
+
23
+ The attribution must appear in at least one place that end users can
24
+ reasonably find, for example the footer, an "About" or "Credits" screen, or
25
+ the settings. It must be readable and must not be hidden, removed or made
26
+ invisible. Where links are not possible, the full address
27
+ https://dev.carpark.am/parz-ui must be shown next to the text. The text may
28
+ be translated into the product's language, as long as the names
29
+ "CarPark Team" and the address stay unchanged.
30
+
31
+ The ParzCredit component included in the Software renders a compliant
32
+ attribution.
33
+
34
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
35
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
36
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
37
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
38
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
39
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
40
+ SOFTWARE.
package/README.hy.md ADDED
@@ -0,0 +1,99 @@
1
+ # Parz UI
2
+
3
+ [English](README.md) · **Հայերեն** · [Русский](README.ru.md)
4
+
5
+ React կոմպոնենտներ հեղուկ անիմացիայով՝ առաձգական, սահուն, ոչինչ կտրուկ։ Պատրաստել են **CarPark Team**-ը և **Dev.CarPark**-ը։
6
+
7
+ | Կոմպոնենտ | Ինչ է | Փաստաթղթեր |
8
+ |---|---|---|
9
+ | `ParzMenu` | Նավիգացիա՝ ընդգծումը հոսում է կաթիլի պես, կլոր կոճակները զսպանակում են; համակարգչում դառնում է վերնագիր՝ որոնմամբ | [docs](docs/parz-menu.hy.md) |
10
+ | `ParzToggle` | Անջատիչ հեղուկ սահնակով՝ ձգվում է, տափակում, կարելի է քաշել; կա «չափազանց հաճախ» մերժման վիճակ | [docs](docs/parz-toggle.hy.md) |
11
+ | `ParzCheckbox` | Նշիչ՝ գույնը տարածվում է կաթիլի պես, նշանը գծվում է; կա «մասամբ ընտրված» և սխալի վիճակ | [docs](docs/parz-checkbox.hy.md) |
12
+ | `ParzSlider` | Սահիչ, որի սահնակը ձգվում է շարժման արագությամբ | [docs](docs/parz-slider.hy.md) |
13
+ | `ParzRange` | Միջակայքի սահիչ՝ 2-ից 5 սահնակ մեկ ուղու վրա | [docs](docs/parz-slider.hy.md) |
14
+ | `AnimoLogo` | Կենդանի տեքստային լոգո՝ տառերը լողում են, բռնում ալիքը և վառվում պահելիս | [docs](docs/animologo.hy.md) |
15
+
16
+ ## Տեղադրում
17
+
18
+ ```bash
19
+ npm install @carparkteam/parz-ui
20
+ ```
21
+
22
+ Կամ անմիջապես GitHub-ից՝
23
+
24
+ ```bash
25
+ npm install github:CarParkTeam-Dev/parz-ui
26
+ ```
27
+
28
+ Անհրաժեշտ է React 18 կամ ավելի նոր։
29
+
30
+ ## Օգտագործում
31
+
32
+ Միացրեք ոճերը մեկ անգամ (օրինակ՝ հավելվածի մուտքի կետում) և օգտագործեք ցանկացած կոմպոնենտ՝
33
+
34
+ ```tsx
35
+ import { useState } from 'react';
36
+ import { ParzMenu, ParzToggle, ParzCheckbox, ParzSlider, ParzRange, AnimoLogo } from '@carparkteam/parz-ui';
37
+ import '@carparkteam/parz-ui/style.css';
38
+
39
+ export function Settings() {
40
+ const [wifi, setWifi] = useState(true);
41
+ const [agree, setAgree] = useState(false);
42
+ const [volume, setVolume] = useState(60);
43
+ const [price, setPrice] = useState([20, 70]);
44
+
45
+ return (
46
+ <>
47
+ <ParzToggle checked={wifi} onChange={setWifi} label="Wi-Fi" />
48
+ <ParzCheckbox checked={agree} onChange={setAgree} label="Ընդունում եմ պայմանները" />
49
+ <ParzSlider value={volume} onChange={setVolume} label="Ձայն" formatValue={v => `${v}%`} />
50
+ <ParzRange value={price} onChange={setPrice} label="Գին" />
51
+ </>
52
+ );
53
+ }
54
+ ```
55
+
56
+ Ամեն ինչ գրված է TypeScript-ով, տիպերը գալիս են փաթեթի հետ։ Բոլոր կոմպոնենտներն աշխատում են ստեղնաշարով և էկրանի ընթերցողներով, ճիշտ են երևում հեռախոսում և համակարգչում և հարգում են համակարգի «քիչ շարժում» կարգավորումը։
57
+
58
+ ## Կոնֆիգուրատոր
59
+
60
+ Ռեպոզիտորիայում կա կայք՝ կենդանի խմբագրիչով յուրաքանչյուր կոմպոնենտի համար. կարգավորեք և պատճենեք պատրաստի կոդը։
61
+
62
+ ```bash
63
+ git clone https://github.com/CarParkTeam-Dev/parz-ui.git
64
+ cd parz-ui
65
+ npm install
66
+ npm run dev
67
+ ```
68
+
69
+ Կբացվի `http://localhost:5280`։ `npm run build`-ը կայքը հավաքում է `site/`-ում ցանկացած ստատիկ հոսթինգի համար։
70
+
71
+ ## Մշակում
72
+
73
+ | Հրաման | Ինչ է անում |
74
+ |---|---|
75
+ | `npm run dev` | Կոնֆիգուրատոր՝ տաք վերաբեռնմամբ |
76
+ | `npm run build:lib` | Հավաքում է փաթեթը `dist/`-ում (JS, CSS, տիպեր) |
77
+ | `npm run build` | Հավաքում է կայքը `site/`-ում |
78
+ | `npm run typecheck` | Տիպերի ստուգում |
79
+
80
+ ## Լիցենզիա
81
+
82
+ Parz UI-ն կարելի է օգտագործել անվճար, այդ թվում՝ կոմերցիոն նախագծերում, [Parz UI լիցենզիայով](LICENSE). դա MIT է՝ մեկ լրացուցիչ պայմանով՝
83
+
84
+ **Parz UI օգտագործող ցանկացած արտադրանք պետք է իր օգտատերերին ցույց տա «Components by CarPark Team» գրությունը՝ [dev.carpark.am/parz-ui](https://dev.carpark.am/parz-ui) հղումով** — էջատակում, «Հավելվածի մասին» կամ «Շնորհակալություններ» էկրանին, կամ կարգավորումներում։ Գրությունը պետք է ընթեռնելի լինի և թաքցված չլինի։ «Components by» բառերը կարելի է թարգմանել։
85
+
86
+ Ամենահեշտը պատրաստի `ParzCredit` կոմպոնենտն է՝
87
+
88
+ ```tsx
89
+ import { ParzCredit } from '@carparkteam/parz-ui';
90
+
91
+ <footer>
92
+ © 2026 Իմ հավելվածը · <ParzCredit />
93
+ </footer>
94
+
95
+ // ձեր արտադրանքի լեզվով
96
+ <ParzCredit prefix="Կոմպոնենտները՝" />
97
+ ```
98
+
99
+ © 2026 CarPark Team & Dev.CarPark
package/README.md CHANGED
@@ -1,3 +1,99 @@
1
- # Temporary Holding Version
1
+ # Parz UI
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ **English** · [Հայերեն](README.hy.md) · [Русский](README.ru.md)
4
+
5
+ React components with liquid motion — springy, smooth, nothing abrupt. Crafted by **CarPark Team** & **Dev.CarPark**.
6
+
7
+ | Component | What it is | Docs |
8
+ |---|---|---|
9
+ | `ParzMenu` | Navigation bar: the highlight flows between tabs like a drop, round buttons bounce; on desktop it becomes a header with search | [docs](docs/parz-menu.en.md) |
10
+ | `ParzToggle` | Switch with a liquid thumb that stretches, squashes and can be dragged; optional “too fast” rejected state | [docs](docs/parz-toggle.en.md) |
11
+ | `ParzCheckbox` | Checkbox where color spreads like a drop and the tick draws itself; indeterminate and error states | [docs](docs/parz-checkbox.en.md) |
12
+ | `ParzSlider` | Slider whose thumb stretches with the speed of your drag | [docs](docs/parz-slider.en.md) |
13
+ | `ParzRange` | Range slider with 2 to 5 thumbs on one track | [docs](docs/parz-slider.en.md) |
14
+ | `AnimoLogo` | Living text logo: letters float in, catch a wave on hover, light up when held | [docs](docs/animologo.en.md) |
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install @carparkteam/parz-ui
20
+ ```
21
+
22
+ Or straight from GitHub:
23
+
24
+ ```bash
25
+ npm install github:CarParkTeam-Dev/parz-ui
26
+ ```
27
+
28
+ Requires React 18 or newer.
29
+
30
+ ## Usage
31
+
32
+ Import the styles once (for example, in your app entry), then use any component:
33
+
34
+ ```tsx
35
+ import { useState } from 'react';
36
+ import { ParzMenu, ParzToggle, ParzCheckbox, ParzSlider, ParzRange, AnimoLogo } from '@carparkteam/parz-ui';
37
+ import '@carparkteam/parz-ui/style.css';
38
+
39
+ export function Settings() {
40
+ const [wifi, setWifi] = useState(true);
41
+ const [agree, setAgree] = useState(false);
42
+ const [volume, setVolume] = useState(60);
43
+ const [price, setPrice] = useState([20, 70]);
44
+
45
+ return (
46
+ <>
47
+ <ParzToggle checked={wifi} onChange={setWifi} label="Wi-Fi" />
48
+ <ParzCheckbox checked={agree} onChange={setAgree} label="I accept the terms" />
49
+ <ParzSlider value={volume} onChange={setVolume} label="Volume" formatValue={v => `${v}%`} />
50
+ <ParzRange value={price} onChange={setPrice} label="Price" />
51
+ </>
52
+ );
53
+ }
54
+ ```
55
+
56
+ Everything is written in TypeScript, the types ship with the package. All components work with the keyboard and screen readers, look right on phones and desktops, and respect the system “reduce motion” setting.
57
+
58
+ ## Playground
59
+
60
+ The repository includes a site with a live editor for every component: tweak the settings and copy ready-made code.
61
+
62
+ ```bash
63
+ git clone https://github.com/CarParkTeam-Dev/parz-ui.git
64
+ cd parz-ui
65
+ npm install
66
+ npm run dev
67
+ ```
68
+
69
+ It opens at `http://localhost:5280`. `npm run build` builds the site into `site/` for any static hosting.
70
+
71
+ ## Development
72
+
73
+ | Command | What it does |
74
+ |---|---|
75
+ | `npm run dev` | Playground with hot reload |
76
+ | `npm run build:lib` | Builds the package into `dist/` (JS, CSS, types) |
77
+ | `npm run build` | Builds the playground site into `site/` |
78
+ | `npm run typecheck` | Type check |
79
+
80
+ ## License
81
+
82
+ Parz UI is free to use, including in commercial projects, under the [Parz UI License](LICENSE) — MIT with one extra condition:
83
+
84
+ **any product that uses Parz UI must show its users the text “Components by CarPark Team” as a link to [dev.carpark.am/parz-ui](https://dev.carpark.am/parz-ui)** — in the footer, an “About” or “Credits” screen, or the settings. It must be readable and not hidden. The words “Components by” may be translated.
85
+
86
+ The easiest way is the ready-made `ParzCredit` component:
87
+
88
+ ```tsx
89
+ import { ParzCredit } from '@carparkteam/parz-ui';
90
+
91
+ <footer>
92
+ © 2026 My App · <ParzCredit />
93
+ </footer>
94
+
95
+ // in your product's language
96
+ <ParzCredit prefix="Компоненты от" />
97
+ ```
98
+
99
+ © 2026 CarPark Team & Dev.CarPark
package/README.ru.md ADDED
@@ -0,0 +1,99 @@
1
+ # Parz UI
2
+
3
+ [English](README.md) · [Հայերեն](README.hy.md) · **Русский**
4
+
5
+ React-компоненты с жидкой анимацией — упругие, плавные, ничего резкого. Сделано командой **CarPark Team** и **Dev.CarPark**.
6
+
7
+ | Компонент | Что это | Документация |
8
+ |---|---|---|
9
+ | `ParzMenu` | Навигация: подсветка перетекает каплей, круглые кнопки пружинят; на компьютере становится шапкой с поиском | [docs](docs/parz-menu.ru.md) |
10
+ | `ParzToggle` | Переключатель с жидким бегунком: тянется, сплющивается, его можно тянуть; есть состояние отказа «слишком часто» | [docs](docs/parz-toggle.ru.md) |
11
+ | `ParzCheckbox` | Чекбокс: цвет растекается каплей, галочка дорисовывается; есть «частично выбрано» и ошибка | [docs](docs/parz-checkbox.ru.md) |
12
+ | `ParzSlider` | Ползунок, бегунок которого тянется по скорости движения | [docs](docs/parz-slider.ru.md) |
13
+ | `ParzRange` | Ползунок промежутка: от 2 до 5 бегунков на одной дорожке | [docs](docs/parz-slider.ru.md) |
14
+ | `AnimoLogo` | Живой логотип-надпись: буквы выплывают, ловят волну и загораются при удержании | [docs](docs/animologo.ru.md) |
15
+
16
+ ## Установка
17
+
18
+ ```bash
19
+ npm install @carparkteam/parz-ui
20
+ ```
21
+
22
+ Или прямо с GitHub:
23
+
24
+ ```bash
25
+ npm install github:CarParkTeam-Dev/parz-ui
26
+ ```
27
+
28
+ Нужен React 18 или новее.
29
+
30
+ ## Использование
31
+
32
+ Подключите стили один раз (например, в точке входа приложения) и используйте любые компоненты:
33
+
34
+ ```tsx
35
+ import { useState } from 'react';
36
+ import { ParzMenu, ParzToggle, ParzCheckbox, ParzSlider, ParzRange, AnimoLogo } from '@carparkteam/parz-ui';
37
+ import '@carparkteam/parz-ui/style.css';
38
+
39
+ export function Settings() {
40
+ const [wifi, setWifi] = useState(true);
41
+ const [agree, setAgree] = useState(false);
42
+ const [volume, setVolume] = useState(60);
43
+ const [price, setPrice] = useState([20, 70]);
44
+
45
+ return (
46
+ <>
47
+ <ParzToggle checked={wifi} onChange={setWifi} label="Wi-Fi" />
48
+ <ParzCheckbox checked={agree} onChange={setAgree} label="Принимаю условия" />
49
+ <ParzSlider value={volume} onChange={setVolume} label="Громкость" formatValue={v => `${v}%`} />
50
+ <ParzRange value={price} onChange={setPrice} label="Цена" />
51
+ </>
52
+ );
53
+ }
54
+ ```
55
+
56
+ Всё написано на TypeScript, типы идут вместе с пакетом. Все компоненты работают с клавиатуры и с экранными дикторами, выглядят правильно на телефоне и компьютере и уважают системную настройку «уменьшить движение».
57
+
58
+ ## Площадка
59
+
60
+ В репозитории есть сайт с живым редактором для каждого компонента: настройте и скопируйте готовый код.
61
+
62
+ ```bash
63
+ git clone https://github.com/CarParkTeam-Dev/parz-ui.git
64
+ cd parz-ui
65
+ npm install
66
+ npm run dev
67
+ ```
68
+
69
+ Откроется `http://localhost:5280`. `npm run build` собирает сайт в `site/` для любого статического хостинга.
70
+
71
+ ## Разработка
72
+
73
+ | Команда | Что делает |
74
+ |---|---|
75
+ | `npm run dev` | Площадка с горячей перезагрузкой |
76
+ | `npm run build:lib` | Сборка пакета в `dist/` (JS, CSS, типы) |
77
+ | `npm run build` | Сборка сайта-площадки в `site/` |
78
+ | `npm run typecheck` | Проверка типов |
79
+
80
+ ## Лицензия
81
+
82
+ Parz UI можно использовать бесплатно, в том числе в коммерческих проектах, по [лицензии Parz UI](LICENSE) — это MIT с одним дополнительным условием:
83
+
84
+ **любой продукт, который использует Parz UI, должен показывать пользователям надпись «Components by CarPark Team» со ссылкой на [dev.carpark.am/parz-ui](https://dev.carpark.am/parz-ui)** — в подвале, на экране «О приложении» или «Благодарности», или в настройках. Надпись должна быть читаемой и не скрытой. Слова «Components by» можно перевести.
85
+
86
+ Проще всего — готовым компонентом `ParzCredit`:
87
+
88
+ ```tsx
89
+ import { ParzCredit } from '@carparkteam/parz-ui';
90
+
91
+ <footer>
92
+ © 2026 Моё приложение · <ParzCredit />
93
+ </footer>
94
+
95
+ // на языке вашего продукта
96
+ <ParzCredit prefix="Компоненты от" />
97
+ ```
98
+
99
+ © 2026 CarPark Team & Dev.CarPark
@@ -0,0 +1 @@
1
+ .ltb{--ltb-accent:#6ee7a0;--ltb-text:#8b8b93;--ltb-text-active:#fff;--ltb-surface-top:rgba(38,38,42,.82);--ltb-surface-bottom:rgba(20,20,23,.88);--ltb-border:rgba(255,255,255,.06);--ltb-hl-top:rgba(255,255,255,.13);--ltb-hl-bottom:rgba(255,255,255,.05);--ltb-action-bg:rgba(255,255,255,.07);--ltb-action-active-bg:#fff;--ltb-action-active-text:#000;--ltb-action-accent-bg:#6ee7a0;--ltb-action-accent-text:#04130a;--ltb-bevel-top:rgba(255,255,255,.14);--ltb-bevel-bottom:rgba(0,0,0,.4);--ltb-hl-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25);--ltb-badge-bg:#ff4d5e;--ltb-badge-text:#fff;--ltb-badge-ring:#1d1d21;--ltb-avatar-from:#6ee7a0;--ltb-avatar-to:#2d6a4f;--ltb-avatar-text:#04130a;--ltb-font:inherit;--ltb-radius:999px;--ltb-pad:6px;--ltb-gap:10px;--ltb-item-py:8px;--ltb-icon:22px;--ltb-font-size:11px;--ltb-action:50px;--ltb-blur:20px;--ltb-item-min:84px;--ltb-shift:.55s;--ltb-header-top:rgba(9,9,11,.96);--ltb-header-mid:rgba(9,9,11,.82);--ltb-header-blur:14px;--ltb-search-bg:rgba(255,255,255,.06);--ltb-search-border:rgba(255,255,255,.08);--ltb-max-width:540px;--ltb-offset:12px;--ltb-shadow:0 18px 40px -12px rgba(0,0,0,.8);display:flex;justify-content:center;gap:var(--ltb-gap);font-family:var(--ltb-font);box-sizing:border-box;-webkit-tap-highlight-color:transparent;z-index:50}.ltb *,.ltb *:before,.ltb *:after{box-sizing:border-box}.ltb button{font-family:var(--ltb-font)}.ltb--bottom,.ltb--top{position:fixed;left:max(var(--ltb-offset),calc(50% - var(--ltb-max-width) / 2));right:max(var(--ltb-offset),calc(50% - var(--ltb-max-width) / 2))}.ltb--bottom{bottom:max(var(--ltb-offset),calc(env(safe-area-inset-bottom) - var(--ltb-offset)))}.ltb--top{top:max(var(--ltb-offset),env(safe-area-inset-top))}.ltb--static{position:relative;width:100%;max-width:var(--ltb-max-width);z-index:1}.ltb-main,.ltb-side,.ltb-pill{background:linear-gradient(180deg,var(--ltb-surface-top),var(--ltb-surface-bottom));-webkit-backdrop-filter:blur(var(--ltb-blur)) saturate(1.3);backdrop-filter:blur(var(--ltb-blur)) saturate(1.3);border-radius:var(--ltb-radius);box-shadow:inset 0 1px 0 var(--ltb-bevel-top),inset 0 -1px 0 var(--ltb-bevel-bottom),0 0 0 1px var(--ltb-border),var(--ltb-shadow)}.ltb-main{flex:1 1 0px;display:flex;position:relative;padding:var(--ltb-pad);min-width:0;transition:flex-grow var(--ltb-shift) cubic-bezier(.22,1,.36,1),flex-basis var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-side--search-end>.ltb-expand,.ltb-side--search-end>.ltb-search-btn{order:1}.ltb-side{display:flex;align-items:center;gap:var(--ltb-pad);padding:var(--ltb-pad);flex:none;overflow:hidden;max-width:calc(var(--ltb-na, 2) * (var(--ltb-action) + var(--ltb-pad)) + var(--ltb-pad) + var(--ltb-side-extra, 0px));transition:max-width var(--ltb-shift) cubic-bezier(.22,1,.36,1),padding var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity calc(var(--ltb-shift) * .6) ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1),visibility 0s}.ltb-side.is-hidden{max-width:0;padding-left:0;padding-right:0;margin-left:calc(-1 * var(--ltb-gap));opacity:0;transform:scale(.7);visibility:hidden;pointer-events:none;transition:max-width var(--ltb-shift) cubic-bezier(.22,1,.36,1),padding var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity calc(var(--ltb-shift) * .5) ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1),visibility 0s var(--ltb-shift)}.ltb-side>*{flex:none}.ltb--solo .ltb-main{flex:0 1 calc(var(--ltb-n, 3) * var(--ltb-item-min) + 2 * var(--ltb-pad));max-width:100%}.ltb--solo .ltb-item{flex:1 1 0;min-width:0}.ltb--solo.ltb--inline .ltb-main{flex-basis:calc(var(--ltb-n, 3) * (var(--ltb-item-min) + 40px) + 2 * var(--ltb-pad))}.ltb-hl{position:absolute;top:var(--ltb-pad);bottom:var(--ltb-pad);left:var(--ltb-pad);border-radius:var(--ltb-radius);pointer-events:none;background:linear-gradient(180deg,var(--ltb-hl-top),var(--ltb-hl-bottom));box-shadow:var(--ltb-hl-shadow)}.ltb-item{flex:1;min-width:0;border:0;background:none;margin:0;color:var(--ltb-text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:var(--ltb-item-py) 4px;font-family:var(--ltb-font);font-weight:600;font-size:var(--ltb-font-size);line-height:1.2;cursor:pointer;position:relative;z-index:1;transition:color .35s;border-radius:var(--ltb-radius)}.ltb-item:disabled{opacity:.35;cursor:default}.ltb-item.is-active{color:var(--ltb-text-active)}.ltb--inline .ltb-item{flex-direction:row;gap:8px;padding:calc(var(--ltb-item-py) + 2px) 14px;font-size:calc(var(--ltb-font-size) + 3px)}.ltb--icons .ltb-item{padding:calc(var(--ltb-item-py) + 4px) 6px}.ltb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@supports (text-box:trim-both cap alphabetic){.ltb--inline .ltb-item>.ltb-label,.ltb--desktop .ltb-item>.ltb-label{text-box:trim-both cap alphabetic;overflow:clip;overflow-clip-margin:.3em}}@media (hover:hover){.ltb-item:not(:disabled):not(.is-active):hover{color:var(--ltb-text-active)}}.ltb-ico{position:relative;display:grid;place-items:center;width:var(--ltb-icon);height:var(--ltb-icon);flex:none}.ltb-icon{display:grid;place-items:center;width:100%;height:100%;transition:transform .35s cubic-bezier(.22,1,.36,1)}.is-active .ltb-icon{transform:translateY(-1px) scale(1.06)}.ltb-svg{width:100%;height:100%;display:block}.ltb-s,.is-active .ltb-o{display:none}.is-active .ltb-s{display:block}.ltb-icon--pair>span{display:grid;place-items:center;width:100%;height:100%}.ltb-on,.is-active .ltb-off{display:none!important}.is-active .ltb-on{display:grid!important}.ltb-ms,.ltb-mi{font-size:var(--ltb-icon);line-height:1;width:1em;height:1em;overflow:hidden;-webkit-user-select:none;user-select:none}.ltb-ms{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;transition:font-variation-settings .45s cubic-bezier(.22,1,.36,1)}.is-active .ltb-ms{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}.ltb-ico>img,.ltb-ico>svg{width:100%;height:100%}.ltb-missing{font-size:12px;opacity:.6}.ltb-action{width:var(--ltb-action);height:var(--ltb-action);border-radius:50%;border:0;margin:0;padding:0;background:var(--ltb-action-bg);color:var(--ltb-text-active);display:grid;place-items:center;cursor:pointer;position:relative;transition:background .3s,color .3s,box-shadow .3s,width var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity .25s ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-action.is-leaving{width:0;margin-left:calc(-1 * var(--ltb-pad));opacity:0;transform:scale(.3);pointer-events:none}.ltb-item{transition:color .35s,flex-grow var(--ltb-shift) cubic-bezier(.22,1,.36,1),padding var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity .25s ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-main>.ltb-item.is-leaving{flex-grow:0;flex-basis:0;padding-left:0;padding-right:0;opacity:0;transform:scale(.55);pointer-events:none;overflow:hidden}.ltb-action:active{transform:scale(.9)}.ltb-action.is-active{background:var(--ltb-action-active-bg);color:var(--ltb-action-active-text)}.ltb-action>.ltb-ico{width:calc(var(--ltb-icon) * 1);height:calc(var(--ltb-icon) * 1)}.ltb-action--accent,.ltb-action--accent.is-active{background:var(--ltb-action-accent-bg);color:var(--ltb-action-accent-text);box-shadow:inset 0 1px #ffffff59,inset 0 -1px #0000001f,0 8px 18px -8px color-mix(in srgb,var(--ltb-action-accent-bg) 75%,transparent)}.ltb-action--accent .ltb-svg{stroke-width:1.6}.ltb-action--accent.is-active{box-shadow:inset 0 0 0 2px #ffffffb3,0 0 0 3px color-mix(in srgb,var(--ltb-action-accent-bg) 35%,transparent)}.ltb-action--avatar{background:linear-gradient(135deg,var(--ltb-avatar-from),var(--ltb-avatar-to));color:var(--ltb-avatar-text);box-shadow:inset 0 0 0 2px #ffffff40;overflow:visible}.ltb-action--avatar.is-active{background:linear-gradient(135deg,var(--ltb-avatar-from),var(--ltb-avatar-to));color:var(--ltb-avatar-text);box-shadow:inset 0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,var(--ltb-accent) 35%,transparent)}.ltb-action--avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.ltb-avatar-text{font-family:var(--ltb-font);font-weight:700;font-size:calc(var(--ltb-action) * .34);line-height:1}.ltb-badge{position:absolute;pointer-events:none;animation:ltbPop .45s cubic-bezier(.34,1.56,.64,1)}.ltb-badge--dot{top:-1px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--ltb-accent);box-shadow:0 0 0 2px var(--ltb-badge-ring)}.ltb-badge--count{top:-6px;left:calc(100% - 9px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--ltb-badge-bg);color:var(--ltb-badge-text);font-family:var(--ltb-font);font-weight:700;font-size:10.5px;line-height:1;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--ltb-badge-ring);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}.ltb-badge-n{display:block;line-height:1;text-box:trim-both cap alphabetic}@supports not (text-box:trim-both cap alphabetic){.ltb-badge-n{transform:translateY(.06em)}}.ltb-action>.ltb-badge--dot{top:12%;right:14%}.ltb-action>.ltb-badge--count{top:0;left:auto;right:0;transform-origin:100% 0}@keyframes ltbPop{0%{transform:scale(0)}}.ltb-more.is-open:not(.is-active){color:var(--ltb-text-active)}.ltb-more .ltb-icon{transition:transform .45s cubic-bezier(.3,1.35,.5,1)}.ltb-more.is-open .ltb-icon{transform:rotate(90deg) scale(1.06)}.ltb-menu{position:absolute;right:var(--ltb-menu-right,0px);bottom:calc(100% + 10px);min-width:210px;max-width:min(300px,100%);max-height:min(60vh,420px);overflow:auto;display:flex;flex-direction:column;gap:2px;padding:var(--ltb-pad);border-radius:min(var(--ltb-radius),22px);background:linear-gradient(180deg,var(--ltb-surface-top),var(--ltb-surface-bottom));-webkit-backdrop-filter:blur(var(--ltb-blur)) saturate(1.3);backdrop-filter:blur(var(--ltb-blur)) saturate(1.3);box-shadow:inset 0 1px 0 var(--ltb-bevel-top),inset 0 -1px 0 var(--ltb-bevel-bottom),0 0 0 1px var(--ltb-border),var(--ltb-shadow);transform-origin:calc(100% - 40px) 100%;opacity:0;visibility:hidden;transform:translateY(10px) scale(.86,.7);transition:transform .5s cubic-bezier(.3,1.35,.5,1),opacity .2s ease,visibility 0s .5s}.ltb-menu.is-open{opacity:1;visibility:visible;transform:none;transition:transform .5s cubic-bezier(.3,1.35,.5,1),opacity .2s ease,visibility 0s}.ltb--top .ltb-menu{bottom:auto;top:calc(100% + 10px);transform-origin:calc(100% - 40px) 0;transform:translateY(-10px) scale(.86,.7)}.ltb--top .ltb-menu.is-open{transform:none}.ltb-row{display:flex;align-items:center;gap:12px;width:100%;border:0;margin:0;background:none;color:var(--ltb-text);text-align:left;cursor:pointer;padding:12px 14px;border-radius:calc(min(var(--ltb-radius),22px) - var(--ltb-pad));font-family:var(--ltb-font);font-weight:600;font-size:calc(var(--ltb-font-size) + 3px);line-height:1.2;transition:color .3s,background .3s}.ltb-row:disabled{opacity:.35;cursor:default}.ltb-row.is-active{color:var(--ltb-text-active);background:linear-gradient(180deg,var(--ltb-hl-top),var(--ltb-hl-bottom));box-shadow:var(--ltb-hl-shadow)}@media (hover:hover){.ltb-row:not(:disabled):not(.is-active):hover{color:var(--ltb-text-active)}}.ltb-row:focus-visible{outline:2px solid var(--ltb-accent);outline-offset:-2px}.ltb-row-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ltb-row .ltb-ico{width:20px;height:20px}.ltb-row .ltb-ms,.ltb-row .ltb-mi{font-size:20px}.ltb-row .ltb-icon,.ltb-row.is-active .ltb-icon{transform:none}.ltb-menu.is-open .ltb-row{animation:ltbRow .45s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i) * 35ms + 60ms)}@keyframes ltbRow{0%{opacity:0;transform:translateY(8px)}}.ltb-badge--inline{position:static;flex:none;animation:none}.ltb-badge--inline.ltb-badge--dot{margin-right:4px}.ltb-item>.ltb-badge--inline{margin-left:-2px;align-self:center}.ltb-item:focus-visible,.ltb-action:focus-visible{outline:2px solid var(--ltb-accent);outline-offset:2px}.ltb.ltb--desktop{position:fixed;top:0;left:0;right:0;bottom:auto;max-width:none;height:var(--ltb-header-h,80px);align-items:center;justify-content:flex-start;gap:22px;padding:0 max(32px,calc((100% - var(--ltb-header-max,1360px)) / 2 + 32px))}.ltb--desktop:before{content:"";position:absolute;top:0;right:0;bottom:-26px;left:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ltb-header-top),var(--ltb-header-mid) 60%,transparent);-webkit-backdrop-filter:blur(var(--ltb-header-blur));backdrop-filter:blur(var(--ltb-header-blur));-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}.ltb.ltb--desktop .ltb-main{flex:0 1 auto}.ltb.ltb--desktop .ltb-measure{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;flex:none;width:max-content;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}.ltb-measure>.ltb-item{flex:0 0 auto}.ltb.ltb--desktop .ltb-main>.ltb-item{flex:0 0 auto}.ltb.ltb--desktop.ltb--inline .ltb-item{padding:10px 22px;font-size:14px}.ltb--desktop .ltb-side.is-hidden{margin-left:-22px}.ltb--desktop .ltb-menu{bottom:auto;top:calc(100% - 4px);transform-origin:calc(100% - 40px) 0;transform:translateY(-10px) scale(.86,.7)}.ltb--desktop .ltb-menu.is-open{transform:none}.ltb-logo{flex:none;display:flex;align-items:center;min-width:0;margin-right:4px;max-width:420px;overflow:hidden;transition:max-width var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity .3s}.ltb-logo.is-empty{max-width:0;margin-right:-22px;opacity:0}.ltb-logo-in{display:flex;align-items:center;animation:ltbLogoIn .5s cubic-bezier(.22,1,.36,1)}@keyframes ltbLogoIn{0%{opacity:0;transform:translateY(6px);filter:blur(4px)}}.ltb-wordmark{font-family:var(--ltb-font);font-weight:700;font-size:17px;letter-spacing:.34em;padding-left:.34em;color:var(--ltb-text-active);white-space:nowrap}.ltb-search-slot{flex:1 1 0;min-width:0;display:flex;justify-content:center;transition:flex-grow var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-search-slot.is-collapsed{flex-grow:0;margin-left:-22px}.ltb-search-slot+.ltb-side{margin-left:0}.ltb-search{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;width:100%;max-width:var(--ltb-search-w,420px);min-width:200px;overflow:hidden;border-radius:var(--ltb-radius);background:var(--ltb-search-bg);box-shadow:inset 0 0 0 1px var(--ltb-search-border);color:var(--ltb-text);cursor:text;transition:background .3s,box-shadow .3s,max-width var(--ltb-shift) cubic-bezier(.3,1.15,.5,1),min-width var(--ltb-shift) cubic-bezier(.3,1.15,.5,1),padding var(--ltb-shift) ease,opacity .3s ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1),visibility 0s}.ltb-search.is-hidden{max-width:0;min-width:0;padding:0;opacity:0;transform:scale(.9);visibility:hidden;pointer-events:none;transition:max-width var(--ltb-shift) cubic-bezier(.22,1,.36,1),min-width var(--ltb-shift) cubic-bezier(.22,1,.36,1),padding var(--ltb-shift) ease,opacity .25s ease,transform var(--ltb-shift) ease,visibility 0s var(--ltb-shift)}.ltb-search:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ltb-accent) 55%,transparent)}.ltb-search .ltb-ico,.ltb-expand>.ltb-action .ltb-ico{width:18px;height:18px}.ltb-search input,.ltb-expand input{flex:1;min-width:0;background:none;border:0;outline:0;margin:0;color:var(--ltb-text-active);font-family:var(--ltb-font);font-weight:500;font-size:14px}.ltb-search input::placeholder,.ltb-expand input::placeholder{color:var(--ltb-text);opacity:.85}.ltb-search input::-webkit-search-cancel-button,.ltb-expand input::-webkit-search-cancel-button{-webkit-appearance:none}@media (hover:none),(pointer:coarse){.ltb-search input,.ltb-expand input{font-size:16px}}.ltb{-webkit-text-size-adjust:100%;text-size-adjust:100%}.ltb-search kbd,.ltb-expand-kbd{flex:none;font-family:var(--ltb-font);font-weight:600;font-size:11px;line-height:1;border:1px solid var(--ltb-search-border);border-radius:6px;padding:3px 7px;color:var(--ltb-text)}.ltb-expand{display:flex;align-items:center;flex:none;width:var(--ltb-action);height:var(--ltb-action);border-radius:calc(var(--ltb-action) / 2);background:var(--ltb-action-bg);overflow:hidden;transition:width var(--ltb-shift) cubic-bezier(.3,1.2,.5,1),background .3s,box-shadow .3s,opacity .25s,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-expand.is-leaving{width:0;margin-left:calc(-1 * var(--ltb-pad));opacity:0;transform:scale(.3);pointer-events:none;transition:width var(--ltb-shift) cubic-bezier(.22,1,.36,1),margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity .25s,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-expand.is-open{width:var(--ltb-search-in,320px);background:var(--ltb-search-bg);box-shadow:inset 0 0 0 1px var(--ltb-search-border)}.ltb-expand>.ltb-action{flex:none;background:transparent}.ltb-expand input{opacity:0;padding:0 16px 0 2px;transition:opacity .2s}.ltb-expand.is-open input{opacity:1;transition:opacity .25s ease calc(var(--ltb-shift) * .35)}.ltb--searching .ltb-main{flex:0 0 0px;min-width:0;padding-left:0;padding-right:0;margin-right:calc(-1 * var(--ltb-gap));opacity:0;transform:scale(.85);pointer-events:none;transition:flex-grow var(--ltb-shift) cubic-bezier(.22,1,.36,1),flex-basis var(--ltb-shift) cubic-bezier(.22,1,.36,1),padding var(--ltb-shift) ease,margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity .25s ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb-main{transition:flex-grow var(--ltb-shift) cubic-bezier(.22,1,.36,1),flex-basis var(--ltb-shift) cubic-bezier(.22,1,.36,1),padding var(--ltb-shift) ease,margin var(--ltb-shift) cubic-bezier(.22,1,.36,1),opacity .35s ease,transform var(--ltb-shift) cubic-bezier(.22,1,.36,1)}.ltb--searching .ltb-side{max-width:calc(var(--ltb-full-w) - var(--ltb-row-h) - var(--ltb-gap));flex:1 1 auto}.ltb--searching .ltb-side>.ltb-action{width:0;margin-left:calc(-1 * var(--ltb-pad));opacity:0;transform:scale(.3);pointer-events:none}.ltb-expand--full{width:var(--ltb-action)}.ltb-expand--full.is-open{width:calc(var(--ltb-full-w) - var(--ltb-row-h) - var(--ltb-gap) - 2 * var(--ltb-pad));flex:1 1 auto}.ltb-expand--full input{padding:0 14px 0 8px}.ltb-expand--full>.ltb-swap{transition:width var(--ltb-shift) cubic-bezier(.3,1.25,.5,1),height var(--ltb-shift) cubic-bezier(.3,1.25,.5,1),margin var(--ltb-shift) cubic-bezier(.3,1.25,.5,1),background .3s}.ltb-expand--full>.ltb-swap.is-open{width:calc(var(--ltb-action) * .7);height:calc(var(--ltb-action) * .7);margin-left:calc(var(--ltb-action) * .15)}.ltb-expand--full>.ltb-swap.is-open .ltb-ico{width:calc(var(--ltb-icon) * .8);height:calc(var(--ltb-icon) * .8)}.ltb-expand--full>.ltb-swap .ltb-ico{transition:width .3s,height .3s}.ltb-swap .ltb-ico{position:relative}.ltb-swap-a,.ltb-swap-b{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.35,.5,1)}.ltb-swap-b{opacity:0;transform:rotate(-90deg) scale(.5)}.ltb-swap.is-open .ltb-swap-a{opacity:0;transform:rotate(90deg) scale(.5)}.ltb-swap.is-open .ltb-swap-b{opacity:1;transform:none}.ltb-expand--full>.ltb-swap.is-open{background:var(--ltb-action-bg)}.ltb-go-pill{overflow:hidden;width:0;padding-left:0;padding-right:0;margin-left:calc(-1 * var(--ltb-gap));opacity:0;transform:scale(.4);transform-origin:0 50%;pointer-events:none;transition:width var(--ltb-shift) cubic-bezier(.3,1.25,.5,1),padding var(--ltb-shift) cubic-bezier(.3,1.25,.5,1),margin var(--ltb-shift) cubic-bezier(.3,1.25,.5,1),opacity .25s ease,transform var(--ltb-shift) cubic-bezier(.3,1.35,.5,1)}.ltb-go-pill.is-open{width:calc(var(--ltb-action) + 2 * var(--ltb-pad));padding-left:var(--ltb-pad);padding-right:var(--ltb-pad);margin-left:0;opacity:1;transform:none;pointer-events:auto;transition-delay:calc(var(--ltb-shift) * .2)}.ltb-go-pill{box-sizing:border-box;align-self:stretch;display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;border-radius:999px}.ltb-go-pill.is-open{width:var(--ltb-row-h,calc(var(--ltb-action) + 2 * var(--ltb-pad)))}.ltb-go{flex:none;transition:background .3s,color .3s,opacity .3s,transform .45s cubic-bezier(.3,1.35,.5,1)}.ltb-go:disabled{cursor:default;color:var(--ltb-text-active);opacity:.42}.ltb-go:disabled .ltb-icon{transform:translate(-2px)}.ltb-go.is-ready .ltb-icon{transform:none}.ltb-go.is-ready{background:var(--ltb-action-accent-bg);color:var(--ltb-action-accent-text)}@media (prefers-reduced-motion:reduce){.ltb-icon,.ltb-ms,.ltb-badge,.ltb-menu,.ltb-row{transition:none;animation:none}.ltb{--ltb-shift:0s}}.pz-wm{--pz-dim:#7d7d87;--pz-bright:#fafafa;--pz-hover:#ffffff;--pz-accent:#6ee7a0;--pz-gap:.34em;position:relative;display:inline-flex;align-items:center;gap:var(--pz-gap);padding:4px 0 6px;font-family:inherit;font-weight:700;font-size:var(--pz-size,13px);line-height:1;letter-spacing:0;white-space:nowrap;cursor:default;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}.pz-wm.is-btn{cursor:pointer}.pz-wm:focus-visible{outline:2px solid var(--pz-accent);outline-offset:4px;border-radius:4px}.pz-wm>span{display:inline-block;color:color-mix(in srgb,var(--pz-bright) calc(var(--b,.5) * 100%),var(--pz-dim));animation:pzIdle 6s ease-in-out infinite;animation-delay:calc(4s + var(--i) * .11s);transition:color .5s,text-shadow .5s,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 30ms),calc(var(--i) * 30ms),0s}.pz-wm.no-idle>span{animation:none}@media (hover:hover){.pz-wm:hover>span{color:var(--pz-hover)}}.pz-wm:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--pz-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}@keyframes pzIdle{0%,26%,to{filter:none}11%{filter:brightness(1.8) drop-shadow(0 0 7px rgba(255,255,255,.55))}}@keyframes pzIn{0%{opacity:0;transform:translateY(.7em);filter:blur(5px)}}@keyframes pzSweep{35%{color:#fff;text-shadow:0 0 16px rgba(255,255,255,.7)}}@keyframes pzWave{35%{color:var(--pz-accent);transform:translateY(-.23em);text-shadow:0 0 14px color-mix(in srgb,var(--pz-accent) 60%,transparent)}}.pz-wm.is-intro>span{animation:pzIn .7s cubic-bezier(.22,1,.36,1) backwards,pzSweep .9s ease-out backwards,pzIdle 6s ease-in-out infinite;animation-delay:calc(var(--pz-intro) + var(--i) * 60ms),calc(var(--pz-intro) + .85s + var(--i) * 70ms),calc(4s + var(--i) * .11s)}.pz-wm.is-intro.no-idle>span{animation:pzIn .7s cubic-bezier(.22,1,.36,1) backwards,pzSweep .9s ease-out backwards;animation-delay:calc(var(--pz-intro) + var(--i) * 60ms),calc(var(--pz-intro) + .85s + var(--i) * 70ms)}.pz-wm.is-wave>span{animation:pzWave .7s cubic-bezier(.22,1,.36,1),pzIdle 6s ease-in-out infinite;animation-delay:calc(var(--i) * 55ms),calc(4s + var(--i) * .11s)}.pz-wm.is-wave.no-idle>span{animation:pzWave .7s cubic-bezier(.22,1,.36,1);animation-delay:calc(var(--i) * 55ms)}.pz-wm.is-hold>span{color:color-mix(in srgb,var(--pz-dim) 80%,#000);transform:translate(calc(var(--c) * .18em));transition:color .7s,text-shadow .7s,transform 1s cubic-bezier(.4,0,.2,1);transition-delay:0s}.pz-wm.is-hold:after{transform:scaleX(1);transition:transform var(--pz-hold) linear}.pz-wm.is-full>span{color:var(--pz-accent);text-shadow:0 0 16px color-mix(in srgb,var(--pz-accent) 70%,transparent);transition:color .6s,text-shadow .6s,transform 1s cubic-bezier(.4,0,.2,1)}.pz-wm.is-pop>span{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.4)}@media (prefers-reduced-motion:reduce){.pz-wm>span{animation:none!important;transition:color .2s}.pz-wm:after{transition:none}}.pz-tg{--pz-tg-accent:#6ee7a0;--pz-tg-track:#2a2a30;--pz-tg-knob:#fff;--pz-tg-reject:#ff5c5c;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle}.pz-tg--start{flex-direction:row-reverse}.pz-tg.is-disabled{cursor:default;opacity:.45}.pz-tg-track{position:relative;flex:none;display:block;width:var(--pz-tg-w);height:var(--pz-tg-h);border-radius:999px;background:var(--pz-tg-track);transition:background-color .32s cubic-bezier(.4,0,.2,1),box-shadow .25s;touch-action:pan-y;box-shadow:inset 0 1px 2px #00000040}.pz-tg.is-on .pz-tg-track{background:var(--pz-tg-accent)}.pz-tg-in{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit;z-index:1}.pz-tg-in:focus-visible{outline:0}.pz-tg-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:999px;border:2px solid var(--pz-tg-accent);opacity:0;transform:scale(.92);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1);pointer-events:none}.pz-tg-in:focus-visible~.pz-tg-ring{opacity:1;transform:none}.pz-tg-thumb{position:absolute;top:var(--pz-tg-pad);left:var(--pz-tg-pad);width:var(--pz-tg-thumb);height:var(--pz-tg-thumb);transform:translate(var(--pz-tg-x));transition:transform .52s cubic-bezier(.34,1.48,.5,1);pointer-events:none}[dir=rtl] .pz-tg-thumb{left:auto;right:var(--pz-tg-pad);transform:translate(calc(var(--pz-tg-x)*-1))}.pz-tg.is-drag .pz-tg-thumb{transition:transform .06s linear}.pz-tg-blob{display:block;width:100%;height:100%;transform-origin:left center;transition:transform .34s cubic-bezier(.3,1.4,.5,1)}.pz-tg.is-on .pz-tg-blob{transform-origin:right center}.pz-tg:not(.is-disabled):active .pz-tg-blob,.pz-tg.is-drag .pz-tg-blob{transform:scaleX(1.2)}.pz-tg-core{display:block;width:100%;height:100%;border-radius:999px;background:var(--pz-tg-knob);box-shadow:0 1px 3px #00000059,0 0 0 .5px #0000000f}.pz-tg.is-moved .pz-tg-core{animation:pzTgOff .56s cubic-bezier(.3,.7,.4,1)}.pz-tg.is-moved.is-on .pz-tg-core{animation-name:pzTgOn}.pz-tg.is-drag .pz-tg-core{animation:none}@keyframes pzTgOn{0%{transform:scale(1)}28%{transform:scale(1.42,.8) translate(-12%)}55%{transform:scale(.86,1.1)}76%{transform:scale(1.05,.97)}to{transform:scale(1)}}@keyframes pzTgOff{0%{transform:scale(1)}28%{transform:scale(1.42,.8) translate(12%)}55%{transform:scale(.86,1.1)}76%{transform:scale(1.05,.97)}to{transform:scale(1)}}.pz-tg-label{min-width:0}.pz-tg-track:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--pz-tg-reject);opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1);pointer-events:none}.pz-tg.is-reject .pz-tg-track:after{opacity:.92;transition-duration:.18s}.pz-tg.is-reject .pz-tg-ring{border-color:var(--pz-tg-reject)}.pz-tg.is-reject-a .pz-tg-core{animation:pzTgNoA .62s cubic-bezier(.3,.7,.4,1)}.pz-tg.is-reject-b .pz-tg-core{animation:pzTgNoB .62s cubic-bezier(.3,.7,.4,1)}.pz-tg-thumb{z-index:1}@keyframes pzTgNoA{0%{transform:none}18%{transform:translate(var(--pz-tg-nudge,22%)) scale(1.18,.86)}40%{transform:translate(-10%) scale(.94,1.06)}60%{transform:translate(6%) scale(1.03,.98)}80%{transform:translate(-2%)}to{transform:none}}@keyframes pzTgNoB{0%{transform:none}18%{transform:translate(var(--pz-tg-nudge,22%)) scale(1.18,.86)}40%{transform:translate(-10%) scale(.94,1.06)}60%{transform:translate(6%) scale(1.03,.98)}80%{transform:translate(-2%)}to{transform:none}}.pz-tg.is-on{--pz-tg-nudge:-22%}@media (prefers-reduced-motion:reduce){.pz-tg-thumb{transition:transform .15s ease}.pz-tg-blob{transition:none}.pz-tg:active .pz-tg-blob,.pz-tg.is-drag .pz-tg-blob{transform:none}.pz-tg.is-moved .pz-tg-core,.pz-tg.is-moved.is-on .pz-tg-core,.pz-tg.is-reject .pz-tg-core{animation:none}}.pz-cb{--pz-cb-accent:#6ee7a0;--pz-cb-border:#4a4a55;--pz-cb-check:#04130a;--pz-cb-invalid:#ff5c5c;display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;line-height:1.35}.pz-cb--start{flex-direction:row-reverse}.pz-cb.is-disabled{cursor:default;opacity:.45}.pz-cb.is-invalid{--pz-cb-accent:var(--pz-cb-invalid);--pz-cb-border:var(--pz-cb-invalid)}.pz-cb-box{position:relative;flex:none;display:block;width:var(--pz-cb-s);height:var(--pz-cb-s);border-radius:var(--pz-cb-r);box-shadow:inset 0 0 0 2px var(--pz-cb-border);transition:box-shadow .3s cubic-bezier(.4,0,.2,1),transform .34s cubic-bezier(.3,1.4,.5,1);margin-top:max(0px,calc((1.35em - var(--pz-cb-s)) / 2))}.pz-cb.is-on .pz-cb-box{box-shadow:inset 0 0 0 2px var(--pz-cb-accent)}.pz-cb:not(.is-disabled):active .pz-cb-box{transform:scale(.86)}.pz-cb-in{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit;z-index:2}.pz-cb-in:focus-visible{outline:0}.pz-cb-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:calc(var(--pz-cb-r) + 4px);border:2px solid var(--pz-cb-accent);opacity:0;transform:scale(.9);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1);pointer-events:none}.pz-cb-in:focus-visible~.pz-cb-ring{opacity:1;transform:none}.pz-cb-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--pz-cb-accent);transform:scale(0);border-radius:50%;transition:transform .26s cubic-bezier(.5,0,.75,0),border-radius .26s ease-in;pointer-events:none}.pz-cb.is-on .pz-cb-fill{transform:scale(1);border-radius:var(--pz-cb-r);transition:transform .5s cubic-bezier(.3,1.5,.5,1),border-radius .4s cubic-bezier(.3,1.2,.5,1)}.pz-cb-mark{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;fill:none;stroke:var(--pz-cb-check);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;z-index:1}.pz-cb-tick,.pz-cb-dash{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .16s cubic-bezier(.5,0,.75,0)}.pz-cb.is-on:not(.is-mixed) .pz-cb-tick{stroke-dashoffset:0;transition:stroke-dashoffset .34s cubic-bezier(.3,.8,.4,1) .12s}.pz-cb.is-mixed .pz-cb-dash{stroke-dashoffset:0;transition:stroke-dashoffset .3s cubic-bezier(.3,.8,.4,1) .1s}.pz-cb.is-moved .pz-cb-box{animation:pzCbOff .5s cubic-bezier(.3,.7,.4,1)}.pz-cb.is-moved.is-on .pz-cb-box{animation-name:pzCbOn}@keyframes pzCbOn{0%{transform:scale(1)}25%{transform:scale(1.16,.84)}50%{transform:scale(.92,1.08)}72%{transform:scale(1.03,.97)}to{transform:scale(1)}}@keyframes pzCbOff{0%{transform:scale(1)}30%{transform:scale(.9,1.06)}62%{transform:scale(1.03,.98)}to{transform:scale(1)}}.pz-cb-text{display:flex;flex-direction:column;gap:2px;min-width:0}.pz-cb-label{overflow-wrap:anywhere}.pz-cb-desc{font-size:.86em;opacity:.6}@media (prefers-reduced-motion:reduce){.pz-cb-box,.pz-cb-fill,.pz-cb.is-on .pz-cb-fill{transition-duration:.15s;transition-timing-function:ease}.pz-cb:active .pz-cb-box{transform:none}.pz-cb.is-moved .pz-cb-box,.pz-cb.is-moved.is-on .pz-cb-box{animation:none}.pz-cb-tick,.pz-cb-dash,.pz-cb.is-on:not(.is-mixed) .pz-cb-tick,.pz-cb.is-mixed .pz-cb-dash{transition:stroke-dashoffset .15s ease}}.pz-sl{--pz-sl-accent:#6ee7a0;--pz-sl-track:#2a2a30;--pz-sl-knob:#fff;--pz-sl-tip-bg:#f4f4f5;--pz-sl-tip-fg:#09090b;display:block;width:100%;min-width:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.pz-sl.is-disabled{opacity:.45}.pz-sl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:inherit}.pz-sl-out{font-variant-numeric:tabular-nums;opacity:.7;white-space:nowrap}.pz-sl-rail{position:relative;height:var(--pz-sl-d);margin:0 calc(var(--pz-sl-d) / 2);cursor:pointer;touch-action:pan-y}.pz-sl.is-disabled .pz-sl-rail{cursor:default}.pz-sl.has-labels .pz-sl-rail{margin-bottom:22px}.pz-sl-track,.pz-sl-fill{position:absolute;top:50%;height:var(--pz-sl-h);margin-top:calc(var(--pz-sl-h) / -2);border-radius:999px;pointer-events:none}.pz-sl-track{left:calc(var(--pz-sl-d) / -2);right:calc(var(--pz-sl-d) / -2);background:var(--pz-sl-track)}.pz-sl-fill{background:var(--pz-sl-accent);transition:left .55s cubic-bezier(.3,1.35,.5,1),width .55s cubic-bezier(.3,1.35,.5,1)}.pz-sl:not(.pz-sl--range) .pz-sl-fill{border-radius:0 999px 999px 0}.pz-sl:not(.pz-sl--range) .pz-sl-fill:before{content:"";position:absolute;right:100%;top:0;bottom:0;width:calc(var(--pz-sl-d) / 2);background:inherit;border-radius:999px 0 0 999px}.pz-sl-mark{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:currentColor;opacity:.28;pointer-events:none;transition:opacity .3s,background-color .3s}.pz-sl-mark.is-in{background:var(--pz-sl-knob);opacity:.7}.pz-sl-mark-l{position:absolute;top:calc(var(--pz-sl-d) / 2 + 8px);left:50%;transform:translate(-50%);font-size:11.5px;white-space:nowrap;color:currentColor;opacity:1}.pz-sl-mark:has(.pz-sl-mark-l){opacity:.55;background:transparent}.pz-sl-thumb{--pz-sl-sx:1;--pz-sl-sy:1;--pz-sl-grow:1;position:absolute;top:0;width:var(--pz-sl-d);height:var(--pz-sl-d);margin-left:calc(var(--pz-sl-d) / -2);border-radius:50%;outline:0;transition:left .55s cubic-bezier(.3,1.35,.5,1);touch-action:none}.pz-sl.is-drag .pz-sl-thumb.is-active{transition:left .05s linear}.pz-sl.is-drag .pz-sl-fill{transition:left .05s linear,width .05s linear}.pz-sl-blob{display:block;width:100%;height:100%;border-radius:50%;background:var(--pz-sl-knob);box-shadow:0 1px 4px #00000059,0 0 0 .5px #0000000f;transform:scale(calc(var(--pz-sl-sx) * var(--pz-sl-grow)),calc(var(--pz-sl-sy) * var(--pz-sl-grow)));transition:transform .42s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}.pz-sl-thumb.is-active{--pz-sl-grow:1.22}.pz-sl-thumb:focus-visible .pz-sl-blob{box-shadow:0 1px 4px #00000059,0 0 0 3px var(--pz-sl-ring,rgba(0,0,0,.55)),0 0 0 5px var(--pz-sl-accent)}.pz-sl-tip{position:absolute;bottom:calc(100% + 10px);left:50%;padding:3px 8px;border-radius:8px;background:var(--pz-sl-tip-bg);color:var(--pz-sl-tip-fg);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;transform:translate(-50%,6px) scale(.6);transform-origin:50% 120%;opacity:0;transition:opacity .2s,transform .4s cubic-bezier(.3,1.5,.5,1)}.pz-sl-tip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--pz-sl-tip-bg)}.pz-sl--tip-always .pz-sl-tip,.pz-sl--tip-auto .pz-sl-thumb.is-active .pz-sl-tip,.pz-sl--tip-auto .pz-sl-thumb:focus-visible .pz-sl-tip{opacity:1;transform:translate(-50%) scale(1)}.pz-sl--tip-always .pz-sl-rail{margin-top:34px}@media (prefers-reduced-motion:reduce){.pz-sl-thumb,.pz-sl-fill{transition-duration:.12s;transition-timing-function:ease}.pz-sl-blob{transition:none;transform:none}.pz-sl-tip{transition:opacity .15s}}.pz-credit{display:inline-flex;align-items:baseline;gap:.3em;font-size:12px;line-height:1.4;color:inherit;opacity:.6;text-decoration:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.pz-credit b{font-weight:600}.pz-credit:hover,.pz-credit:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}