@carparkteam/parz-ui 0.0.0-stage → 1.0.0
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.
- package/LICENSE +40 -0
- package/README.hy.md +99 -0
- package/README.md +98 -2
- package/README.ru.md +99 -0
- package/dist/parz-ui.css +1 -0
- package/dist/parz-ui.js +1442 -0
- package/dist/types/Icon.d.ts +49 -0
- package/dist/types/ParzCheckbox.d.ts +41 -0
- package/dist/types/ParzCredit.d.ts +13 -0
- package/dist/types/ParzMenu.d.ts +240 -0
- package/dist/types/ParzSlider.d.ts +68 -0
- package/dist/types/ParzToggle.d.ts +42 -0
- package/dist/types/Wordmark.d.ts +42 -0
- package/dist/types/icons.d.ts +2 -0
- package/dist/types/index.d.ts +16 -0
- package/docs/animologo.en.md +35 -0
- package/docs/animologo.hy.md +35 -0
- package/docs/animologo.ru.md +35 -0
- package/docs/parz-checkbox.en.md +58 -0
- package/docs/parz-checkbox.hy.md +58 -0
- package/docs/parz-checkbox.ru.md +58 -0
- package/docs/parz-menu.en.md +394 -0
- package/docs/parz-menu.hy.md +395 -0
- package/docs/parz-menu.ru.md +393 -0
- package/docs/parz-slider.en.md +76 -0
- package/docs/parz-slider.hy.md +76 -0
- package/docs/parz-slider.ru.md +76 -0
- package/docs/parz-toggle.en.md +62 -0
- package/docs/parz-toggle.hy.md +62 -0
- package/docs/parz-toggle.ru.md +62 -0
- package/package.json +65 -4
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
|
-
#
|
|
1
|
+
# Parz UI
|
|
2
2
|
|
|
3
|
-
|
|
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
|
package/dist/parz-ui.css
ADDED
|
@@ -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}.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}
|