@carparkteam/parz-ui 0.0.0-stage → 1.0.0

package/docs/parz-menu.hy.md

@@ -0,0 +1,395 @@
+# Parz Menu
+
+[English](parz-menu.en.md) · **Հայերեն** · [Русский](parz-menu.ru.md)
+
+CarPark-ի ներքևի մենյուն՝ առանձնացված React կոմպոնենտի տեսքով։ Ակտիվ կետի լուսավորումը հոսում է ներդիրների միջև կաթիլի պես, իսկ աջ կողմի կլոր կոճակները առաձգական են արձագանքում սեղմմանը։ Տեսքն ամբողջությամբ կարգավորելի է՝ գույներ, չափեր, կլորացումներ, ապակի, անիմացիաների արագություն և ուժ։
+
+- 5–6 կետ՝ պատկերակով և պիտակով, թվով կամ կետով նշան ցանկացած կետի վրա.
+- աջ կողմի կլոր կոճակներ՝ պատկերակ կամ ավատար (տառեր կամ լուսանկար), նույնպես նշանով.
+- պատկերակներ՝ ներկառուցված, Material Symbols, Material Icons կամ ձեր ցանկացած React տարրը.
+- երեք դասավորություն՝ պատկերակ պիտակի վրա, տողով, միայն պատկերակներ.
+- կպչում է էկրանի ներքևին կամ վերևին, կամ կանգնում է էջի հոսքում.
+- ներկառուցված պիտակներ անգլերեն, հայերեն և ռուսերեն (`locale`).
+- հարգում է համակարգային «նվազեցնել շարժումը» կարգավորումը և աշխատում է ստեղնաշարով։
+
+## Տեղադրում
+
+```bash
+npm install @carparkteam/parz-ui
+```
+
+```tsx
+import { ParzMenu } from '@carparkteam/parz-ui';
+import '@carparkteam/parz-ui/style.css';
+```
+
+## Արագ մեկնարկ
+
+```tsx
+import { useState } from 'react';
+import { ParzMenu } from '@carparkteam/parz-ui';
+import '@carparkteam/parz-ui/style.css';
+
+export function AppNav() {
+  const [tab, setTab] = useState('garage');
+  const [panel, setPanel] = useState<string | null>(null);
+
+  return (
+    <ParzMenu
+      locale="hy"
+      items={[
+        { id: 'garage', label: 'Ավտոտնակ', icon: 'ms:directions_car' },
+        { id: 'parking', label: 'Կայանատեղի', icon: 'ms:local_parking', badge: 2 },
+        { id: 'map', label: 'Քարտեզ', icon: 'pin' }
+      ]}
+      value={panel ?? tab}
+      onChange={id => { setPanel(null); setTab(id); }}
+      actions={[
+        { id: 'notif', ariaLabel: 'Ծանուցումներ', icon: 'bell', badge: 'dot' },
+        { id: 'profile', ariaLabel: 'Պրոֆիլ', avatar: { text: 'A' } }
+      ]}
+      activeAction={panel}
+      onAction={id => setPanel(p => (p === id ? null : id))}
+    />
+  );
+}
+```
+
+Երբ բաց է կլոր կոճակից բացվող բաժինը, `value`-ին փոխանցեք դրա id-ն․ կետերի տակի կաթիլը կթաքնվի, քանի որ այդպիսի կետ չկա։ Այդպես է արված CarPark-ում։
+
+## Պրոպսներ
+
+| Պրոպ | Տիպ | Լռելյայն | Ինչ է անում |
+|---|---|---|---|
+| `items` | `TabItem[]` | — | Մենյուի կետերը |
+| `value` | `string \| null` | — | Ակտիվ կետը (կառավարվող ռեժիմ)։ Այդպիսի կետ չկա կամ `null` — կաթիլը թաքնվում է |
+| `defaultValue` | `string` | առաջին կետը | Ակտիվ կետը առանց արտաքին կառավարման |
+| `onChange` | `(id) => void` | — | Սեղմեցին կետը |
+| `actions` | `ActionItem[]` | `[]` | Աջ կլոր կոճակներ, ոչ ավելի, քան երկու։ Ցանկացած՝ զանգ, պրոֆիլ, «+», որոնում… |
+| `activeAction` | `string \| null` | `null` | Որ կլոր կոճակն է լուսավորված |
+| `onAction` | `(id) => void` | — | Սեղմեցին կլոր կոճակը |
+| `hideActions` | `boolean` | `false` | Թաքցնել աջ կլոր կոճակները։ Մենյուն կսեղմվի կետերի չափով և կկանգնի կենտրոնում |
+| `position` | `'bottom' \| 'top' \| 'static'` | `'bottom'` | Կպչել էկրանի ներքևին կամ վերևին, կամ կանգնել հոսքում |
+| `layout` | `'stacked' \| 'inline' \| 'icons'` | `'stacked'` | Պատկերակ պիտակի վրա, տողով կամ միայն պատկերակներ |
+| `theme` | `Partial<ParzMenuTheme>` | — | Գույներ և չափեր, տե՛ս ստորև |
+| `glass` | `number \| GlassPreset` | — | Ապակու թափանցիկություն՝ 0…100 % կամ նախադրված, տե՛ս «Ապակի» |
+| `overflow` | `'more' \| 'none'` | `'more'` | Ինչ անել, եթե կետերը չեն տեղավորվում՝ թաքցնել «Մենյու» կոճակում, թե ոչ |
+| `minItemWidth` | `number` | 64 / 104 / 52 | Այս լայնությունից նեղ կետը տեղափոխվում է «Մենյու», px։ Լռելյայն կախված է `layout`-ից |
+| `locale` | `'en' \| 'ru' \| 'hy'` | `'en'` | Ներկառուցված պիտակների լեզուն՝ «Մենյու», որոնում, նշանների բարձրաձայնում։ Ձեր `moreLabel`, `ariaLabel`, `searchPlaceholder`-ն առաջնահերթ են |
+| `moreLabel` | `string` | ըստ `locale`-ի | «Մենյու» կոճակի պիտակը |
+| `mobileSearch` | `boolean \| MobileSearchOptions` | — | Որոնում նեղ էկրանին, ինչպես iOS-ում, տե՛ս «Որոնում հեռախոսում» |
+| `desktop` | `boolean \| DesktopOptions` | — | **Beta.** Վերնագոտի մեծ էկրանների համար, տե՛ս «Վերնագոտի համակարգչի համար» |
+| `moreIcon` | `IconSpec` | `'more'` | «Մենյու» կոճակի պատկերակը։ Լռելյայն՝ երեք կետ շրջանակում․ եզրագիծ, իսկ թաքնված կետը բաց լինելիս՝ լցված |
+| `motion` | `Partial<LiquidMotion>` | — | Անիմացիաներ, տե՛ս ստորև |
+| `maxBadge` | `number` | `99` | Ավելի մեծ թվերը ցուցադրվում են որպես «99+» |
+| `badgeLabel` | `(label, badge) => string` | — | Ինչպես է էկրանի ընթերցիչը կարդում նշանով կետը |
+| `autoLoadFonts` | `boolean` | `true` | Ինքնուրույն միացնել Material տառատեսակները, եթե դրանք կան պատկերակներում |
+| `ariaLabel` | `string` | ըստ `locale`-ի | Ամբողջ մենյուի պիտակը ընթերցիչի համար |
+| `className`, `style` | — | — | Սովորական |
+
+### TabItem
+
+| Դաշտ | Տիպ | Ինչ է անում |
+|---|---|---|
+| `id` | `string` | Եզակի բանալի |
+| `label` | `string` | Պիտակ |
+| `icon` | `IconSpec` | Պատկերակ, տե՛ս «Պատկերակներ» |
+| `activeIcon` | `IconSpec` | Սեփական պատկերակ ակտիվ վիճակի համար։ Ներկառուցվածներին և Material Symbols-ին պետք չէ |
+| `badge` | `number \| string \| 'dot' \| boolean` | Նշան։ `0`, `false`, `null` — նշան չկա |
+| `disabled` | `boolean` | Կետն անջատված է |
+| `ariaLabel` | `string` | Պիտակ ընթերցիչի համար `label`-ի փոխարեն |
+
+### ActionItem
+
+| Դաշտ | Տիպ | Ինչ է անում |
+|---|---|---|
+| `id` | `string` | Եզակի բանալի |
+| `ariaLabel` | `string` | Պիտակ ընթերցիչի համար։ Պարտադիր է՝ կոճակը տեքստ չունի |
+| `icon`, `activeIcon` | `IconSpec` | Պատկերակ |
+| `avatar` | `{ text?: string; src?: string }` | Ավատար պատկերակի փոխարեն՝ տառեր կամ լուսանկար |
+| `badge` | ինչպես կետինը | Նշան |
+| `variant` | `'default' \| 'accent'` | `accent` — գույնով լցված կոճակ գլխավոր գործողության համար, օրինակ «+» |
+
+## Աջ կոճակներ
+
+Աջ խմբում կա մինչև երկու կլոր կոճակ, ցանկացած։ Օրինակներում զանգն ու ավատարը պարզապես ամենահաճախ տարբերակն են։ Եթե փոխանցեք երկուսից ավելի, կցուցադրվեն առաջին երկուսը, իսկ վահանակում կլինի նախազգուշացում։
+
+Կոճակը լինում է երեք տեսակի՝
+- **պատկերակ** — ինչպես զանգը՝ `{ id: 'notif', ariaLabel: 'Ծանուցումներ', icon: 'bell' }`.
+- **շեշտված** — լցված է գույնով, գլխավոր գործողության համար՝ `{ id: 'add', ariaLabel: 'Ավելացնել', icon: 'plus', variant: 'accent' }`.
+- **ավատար** — տառեր կամ լուսանկար՝ `{ id: 'profile', ariaLabel: 'Պրոֆիլ', avatar: { src: '/me.jpg' } }`։
+
+Կոճակը կարող է բացել իր բաժինը (այդ դեպքում փոխանցեք դրա id-ն `activeAction`-ին․ այն կլուսավորվի, իսկ կետերի տակի կաթիլը կթաքնվի) կամ պարզապես կատարել գործողություն, ինչպես «+»-ը․ այդ դեպքում ոչինչ լուսավորել պետք չէ։
+
+```tsx
+<ParzMenu
+  items={items}
+  value={panel ?? tab}
+  onChange={id => { setPanel(null); setTab(id); }}
+  actions={[
+    { id: 'notif', ariaLabel: 'Ծանուցումներ', icon: 'bell', badge: 3 },
+    { id: 'add', ariaLabel: 'Ավելացնել', icon: 'plus', variant: 'accent' }
+  ]}
+  activeAction={panel}
+  onAction={id => (id === 'add' ? openCreateSheet() : setPanel(p => (p === id ? null : id)))}
+/>
+```
+
+## Կետեր և կոճակներ «թռիչքի վրա»
+
+Կետերը և աջ կոճակները կարելի է ավելացնել ու հեռացնել ցանկացած պահի․ օրինակ՝ կայքի սկրիպտը միացնում է «Ակցիաներ» կետը, երբ սկսվել է զեղչը։ Ոչինչ չի ցնցվում՝
+
+- հեռացող կետը կամ կոճակը սահուն փլվում է, հարևանները տեղաշարժվում են նրա տեղը.
+- նորը «աճում» է զրոյից՝ առաձգական թռիչքով.
+- «Մենյու» կոճակը նույն կերպ հայտնվում և անհետանում է, երբ կետերը դադարում կամ նորից սկսում են տեղավորվել.
+- կաթիլը շարժվում է իր կետի հետ։
+
+Տևողությունը նույն `motion.shift`-ն է։ Բավական է պարզապես փոխել `items` կամ `actions` զանգվածը՝
+
+```tsx
+const items = [garage, parking, ...(saleIsOn ? [sale] : [])];
+```
+
+## Մենյու առանց աջ կոճակների
+
+Եթե չփոխանցեք `actions` կամ դնեք `hideActions`, աջ խումբ չի լինի։ `hideActions`-ի փոխարկումն անիմացված է՝ խումբը ծալվում է, կետերով պատիճը սահուն նեղանում է և տեղափոխվում կենտրոն, կաթիլը հետևում է իր կետին։ Արագությունը տալիս է `motion.shift`-ը։ Այդ դեպքում կետերով պատիճը չի ձգվում ամբողջ լայնությամբ, այլ սեղմվում է բովանդակության չափով և կանգնում կենտրոնում։ Ազատված տեղը կարելի է տալ կետերին՝ հեռախոսում հանգիստ տեղավորվում է 5–6։
+
+```tsx
+<ParzMenu
+  items={[
+    { id: 'home', label: 'Գլխավոր', icon: 'ms:home' },
+    { id: 'search', label: 'Որոնում', icon: 'ms:search' },
+    { id: 'parking', label: 'Կայանատեղի', icon: 'ms:local_parking', badge: 2 },
+    { id: 'saved', label: 'Ընտրյալ', icon: 'ms:favorite' },
+    { id: 'profile', label: 'Պրոֆիլ', icon: 'ms:person', badge: 'dot' }
+  ]}
+  value={tab}
+  onChange={setTab}
+/>
+```
+
+Կետերը նույն լայնության են, այն տալիս է `theme.itemMinWidth`-ը (84 px)։ Պատիճի լայնությունը «կետեր × այդ լայնություն» է, բայց ոչ ավելի լայն, քան էկրանը։ Եթե կետերը չեն տեղավորվում, դրանք հավասարապես են բաժանում լայնությունը, իսկ երկար պիտակները կտրվում են բազմակետով․ այդ դեպքում ավելի լավ է `layout="icons"`։
+
+## Եթե կետերը չեն տեղավորվում
+
+Կոմպոնենտն ինքն է հետևում լայնությանը։ Երբ կետը դառնում է `minItemWidth`-ից նեղ («պատկերակ պիտակի վրա» դասավորության համար 64 px), վերջին կետերը տեղափոխվում են «Մենյու» կոճակ (երեք կետ շրջանակում)։ Սեղմելիս դրա վերևում բացվում է թաքնված կետերի ցուցակը՝ պատկերակ, պիտակ և նշան։
+
+- Եթե բաց է թաքնված կետը, կաթիլը կանգնած է «Մենյու»-ի տակ, իսկ ցուցակում այն լուսավորված է։
+- Թաքնված կետերի նշանները հավաքվում են «Մենյու»-ի վրա՝ թվերը գումարվում են, իսկ եթե թվեր չկան, դրվում է կետ։
+- Ցուցակը փակվում է կետ ընտրելով, «Մենյու»-ին կրկին սեղմելով, դրսում սեղմելով կամ Esc ստեղնով։
+- Լայնությունը վերահաշվարկվում է պատուհանի չափը փոխելիս, ուստի պլանշետում և համակարգչում ավելի շատ կետեր են երևում։
+
+```tsx
+<ParzMenu items={tenItems} value={tab} onChange={setTab} moreLabel="Այլ" />
+```
+
+Որպեսզի երբեք ոչինչ չթաքցվի, դրեք `overflow="none"`․ այդ դեպքում կետերը պարզապես սեղմվում են։
+
+## Որոնում հեռախոսում
+
+`mobileSearch`-ը նեղ էկրանին ավելացնում է iOS-ի ոճով որոնում։ Խոշորացույցը դառնում է աջ խմբի առաջին կոճակը, `actions`-ից մնում է վերջինը, որպեսզի խմբում դեռ երկու կոճակ լինի։
+
+Խոշորացույցին սեղմելիս խումբը հեղուկի պես տարածվում է մենյուի ամբողջ լայնությամբ, իսկ կետերով պատիճը փլվում է։ Ներսում՝
+- ձախից խոշորացույցը վերածվում է ավելի փոքր «✕»-ի՝ փակել որոնումը և մաքրել դաշտը, կետերը վերադառնում են.
+- մեջտեղում մուտքագրման դաշտն է, ստեղնաշարն անմիջապես բաց է.
+- աջից, առանձին կլոր կոճակով իր ապակու մեջ՝ «→» (որոնել)․ այն դուրս է գալիս խմբի հետևից և լուսավորվում շեշտի գույնով, երբ դաշտում տեքստ կա։
+
+```tsx
+<ParzMenu
+  items={items}
+  actions={[bell, profile]}            // հեռախոսում խմբում կլինեն խոշորացույցն ու պրոֆիլը
+  mobileSearch={{ searchPlaceholder: 'Մակնիշ կամ կայանատեղի', onSearch: q => navigate(`/search?q=${q}`) }}
+/>
+```
+
+Դաշտերը նույնն են, ինչ վերնագոտու որոնմանը՝ `searchPlaceholder`, `searchValue` / `onSearchChange`, `onSearch`։ Լայն էկրանին, եթե վերնագոտին միացված է, աշխատում է դրա որոնումը։
+
+## Վերնագոտի համակարգչի համար (beta)
+
+Լայն էկրանին մենյուն կարող է դառնալ լիարժեք վերին գոտի՝ ձախից լոգո, հետո կետեր տողով, կենտրոնում որոնում, աջից կոճակներ։ Գոտու տակ մշուշով ստվերում է, և բովանդակությունը գեղեցիկ անցնում է դրա տակով ոլորելիս։ Նեղ էկրանին մենյուն մնում է սովորական ներքևի։
+
+```tsx
+<ParzMenu
+  items={items}
+  value={tab}
+  onChange={setTab}
+  actions={actions}
+  desktop={{
+    logo: 'CARPARK',                  // տող կամ ցանկացած տարր՝ <img>, svg, անիմացված լոգո
+    search: 'expand',                 // 'bar' | 'button' | 'expand' | 'none'
+    searchPlaceholder: 'Մակնիշ, մոդել կամ կայանատեղի…',
+    onSearch: q => navigate(`/search?q=${q}`)
+  }}
+/>
+```
+
+| Դաշտ | Լռելյայն | Ինչ է անում |
+|---|---|---|
+| `breakpoint` | `1100` | Որ լայնությունից է միանում վերնագոտին, px |
+| `breakpointBy` | `'window'` | Չափել պատուհանի, թե մենյուի ծնողի լայնությունը (`'parent'`՝ նեղ կոնտեյներների և նախադիտումների համար) |
+| `logo` | — | Լոգո ձախից՝ տող կամ React տարր |
+| `search` | `'bar'` | `bar` — առանձին որոնման տող. `button` — կլոր որոնման կոճակ աջ խմբում. `expand` — աջ խմբի կոճակ, որը բացվում է տողի հենց խմբի ներսում. `none` — առանց որոնման |
+| `searchPlaceholder` | ըստ `locale`-ի | Հուշում տողում |
+| `searchValue` / `onSearchChange` | — | Որոնման տեքստը, եթե ուզում եք ինքներդ կառավարել |
+| `onSearch` | — | Սեղմեցին Enter (կամ որոնման կոճակը բացված տողում) |
+| `onSearchClick` | — | Սեղմեցին `button` տեսքի որոնման կոճակը՝ օրինակ, ձեր որոնումը բացելու համար |
+| `searchShortcut` | `'/'` | Ստեղն, որը բացում է որոնումը. `false` — անջատել |
+| `searchWidth` | `420` / `320` | Որոնման տողի լայնությունը, px՝ առանձին տողինը 420, խմբի ներսում բացվածինը 320 |
+| `searchAt` | `'start'` | Որտեղ է որոնման կոճակը աջ խմբում (`button`, `expand` և հեռախոսի որոնումը)՝ `start` — առաջինը, `end` — վերջինը |
+| `actionsAlign` | `'end'` | Որտեղ է աջ խումբը, եթե որոնման տող չկա՝ `end` — աջ եզրին, `next` — անմիջապես կետերից հետո |
+| `layout` | `'inline'` | Կետերի դասավորությունը վերնագոտում |
+| `maxWidth` | `1360` | Վերնագոտու բովանդակության լայնությունը, px |
+| `height` | `80` | Վերնագոտու բարձրությունը, px |
+
+Վերնագոտու գույները թեմայում են՝ `headerTop`, `headerMid` (ստվերում), `headerBlur` (մշուշ), `searchBg`, `searchBorder` (որոնման տող)։ Եթե կետերը չեն տեղավորվում լոգոյի և որոնման կողքին, աշխատում է նույն «Մենյու»-ն, միայն ցուցակը բացվում է ներքև։ Վերնագոտու բոլոր փոխարկումները սահուն են՝ որոնման տեսքի փոփոխությունը (տողը փլվում է, կոճակը «աճում» է խմբում), խմբի տեղափոխումը եզրի և կետերի միջև, լոգոյի հայտնվելը և փոխվելը, անցումը վերնագոտու և ներքևի մենյուի միջև լայնությունը փոխելիս։
+
+`button` և `expand` տեսքերի որոնման կոճակը աջ խմբում առաջինն է և չի հաշվվում երկու կոճակի սահմանաչափում։ Բացվող որոնումը ձգում է ամբողջ խումբը․ եթե կետերին նեղ է դառնում, ավելորդները սահուն անցնում են «Մենյու»։ Փակվում է Esc ստեղնով կամ դրսում սեղմելով, եթե ոչինչ մուտքագրված չէ։
+
+## Նշաններ
+
+```tsx
+{ id: 'fines', label: 'Տուգանքներ', icon: 'ms:receipt_long', badge: 3 }     // թիվ
+{ id: 'fines', label: 'Տուգանքներ', icon: 'ms:receipt_long', badge: 150 }   // ցույց կտա «99+»
+{ id: 'news', label: 'Նորույթ', icon: 'sparkles', badge: 'dot' }            // կետ
+{ id: 'sale', label: 'Ակցիաներ', icon: 'gift', badge: 'new' }               // տեքստ
+```
+
+Նշանը հայտնվում է առաձգական «ցատկով» և նորից ցատկում, երբ թիվը փոխվում է։ Գույներ՝ `badgeBg` և `badgeText` թվի համար, `accent` կետի համար։
+
+## Պատկերակներ
+
+| Գրառում | Ինչ է դա |
+|---|---|
+| `'pin'` | Ներկառուցված պատկերակ։ Ակտիվ կետի մոտ եզրագիծը փոխարինվում է լցվածով |
+| `'ms:home'` | Material Symbols Rounded։ Ակտիվ կետի մոտ լցումը սահուն հոսում է |
+| `'ms:home:outlined'`, `'ms:home:sharp'` | Այլ ոճի Material Symbols |
+| `'mi:home'` | Դասական Material Icons (լցված) |
+| `'mi:home:outlined'` | Նաև `round`, `sharp`, `two-tone` |
+| `<MyIcon />` | Ցանկացած React տարր՝ svg, նկար, ցանկացած գրադարանի պատկերակ |
+
+Ներկառուցվածներ՝ `film`, `ticket`, `pin`, `bell`, `glasses3d`, `clapperboard`, `flame`, `gift`, `card`, `globe`, `sparkles`, `info`, `logout`, `bulb`, `rotate`, `star`, `check`, `chevL`, `chevR`, `popcorn`, `calendar`, `wallet`, `route`, `users`, `more`, `plus`, `search`, `close`, `arrowR`։
+
+Material տառատեսակները կոմպոնենտն ինքն է միացնում Google Fonts-ից, երբ տեսնում է `ms:` կամ `mi:`։ Եթե տառատեսակներն արդեն միացված են ձեզ մոտ կամ Google Fonts-ը հասանելի չէ, անջատեք՝ `autoLoadFonts={false}`։ Պատկերակների անունները՝ [fonts.google.com/icons](https://fonts.google.com/icons)։
+
+Ձեր պատկերակների համար ակտիվ վիճակի այլ տեսքը տրվում է `activeIcon`-ով՝
+
+```tsx
+{ id: 'home', label: 'Գլխավոր', icon: <HomeOutline />, activeIcon: <HomeFilled /> }
+```
+
+## Լեզու
+
+`locale`-ը փոխում է կոմպոնենտի սեփական պիտակները՝ «Մենյու» կոճակը, մենյուի պիտակը ընթերցիչի համար, որոնման հուշումներն ու կոճակները և կետ-նշանի բարձրաձայնումը։
+
+| `locale` | «Մենյու» | Որոնում | Կետ-նշան |
+|---|---|---|---|
+| `'en'` (լռելյայն) | More | Search | «Parking, new» |
+| `'hy'` | Մենյու | Որոնում | «Կայանատեղի, նոր» |
+| `'ru'` | Меню | Поиск | «Парковка, есть новое» |
+
+```tsx
+<ParzMenu locale="hy" items={items} />
+```
+
+Կետերի պիտակները և կոճակների `ariaLabel`-ը ձերն են՝ թարգմանեք դրանք ձեր հավելվածում։ Տողերն իրենք արտահանվում են որպես `LTB_STRINGS`, եթե պետք են այլ տեղ։
+
+## Թեմա
+
+Բոլոր դաշտերը պարտադիր չեն։ Գույները՝ ցանկացած CSS գույն, չափերը՝ թվեր պիքսելներով։
+
+| Դաշտ | Լռելյայն | Ինչ է տալիս |
+|---|---|---|
+| `accent` | `#6ee7a0` | Կետ-նշան, ֆոկուսի օղակ, ակտիվ ավատարի եզրագիծ |
+| `text` / `textActive` | `#8b8b93` / `#fff` | Պիտակներ և պատկերակներ |
+| `surfaceTop` / `surfaceBottom` | մուգ ապակի | Պատիճների գրադիենտ |
+| `border` | `rgba(255,255,255,.06)` | Պատիճների բարակ եզրագիծ |
+| `bevelTop` / `bevelBottom` | սպիտակ 14% / սև 40% | Պատիճների ծավալային փայլ՝ գիծ վերևում և ստվեր ներքևում։ Բաց թեմայում ներքևինը արեք գրեթե թափանցիկ |
+| `highlightTop` / `highlightBottom` | սպիտակ 13% / 5% | Կաթիլի գրադիենտ |
+| `highlightShadow` | բարակ փայլ | Կաթիլի ստվեր և փայլ (CSS box-shadow)։ Բաց թեմայում՝ մեղմ ստվեր ներքևում |
+| `actionBg` | սպիտակ 7% | Կլոր կոճակների ֆոն |
+| `actionActiveBg` / `actionActiveText` | `#fff` / `#000` | Սեղմված կլոր կոճակ |
+| `actionAccentBg` / `actionAccentText` | `#6ee7a0` / `#04130a` | Շեշտված կլոր կոճակ (`variant: 'accent'`) |
+| `badgeBg` / `badgeText` | `#ff4d5e` / `#fff` | Թվով նշան |
+| `badgeRing` | `#1d1d21` | Նշանի շուրջ օղակ՝ դրեք վահանակի գույնը |
+| `avatarFrom` / `avatarTo` / `avatarText` | կանաչ գրադիենտ | Ավատար |
+| `fontFamily` | `inherit` | Պիտակների տառատեսակ |
+| `radius` | `999` | Պատիճների և կաթիլի կլորացում |
+| `padding` | `6` | Ներքին լուսանցք պատիճներում |
+| `gap` | `10` | Հեռավորություն պատիճների միջև |
+| `itemPaddingY` | `8` | Կետերի բարձրություն |
+| `iconSize` | `22` | Պատկերակների չափ |
+| `fontSize` | `11` | Պիտակների չափ |
+| `actionSize` | `50` | Կլոր կոճակների տրամագիծ |
+| `blur` | `20` | Ապակու մշուշ |
+| `maxWidth` | `540` | Մենյուի լայնությունը լայն էկրաններին |
+| `offset` | `12` | Հեռավորություն էկրանի եզրից |
+| `itemMinWidth` | `84` | Կետի լայնությունը առանց աջ կոճակների մենյուում |
+| `shadow` | մեղմ ստվեր | Ստվեր պատիճների տակ |
+| `headerTop` / `headerMid` | գրեթե սև 96% / 82% | Ստվերում վերնագոտու տակ մեծ էկրանին՝ վերևում և մեջտեղում, ներքևում լուծվում է |
+| `headerBlur` | `14` | Մշուշ վերնագոտու տակ |
+| `searchBg` / `searchBorder` | սպիտակ 6% / 8% | Որոնման տող՝ ֆոն և եզրագիծ |
+
+Նույնը կարելի է տալ CSS-ով․ յուրաքանչյուր դաշտ `--ltb-*` փոփոխական է՝
+
+```css
+.my-bar {
+  --ltb-accent: #ff7a00;
+  --ltb-surface-top: rgba(255, 255, 255, .8);
+  --ltb-surface-bottom: rgba(240, 240, 245, .9);
+  --ltb-text: #6b6b75;
+  --ltb-text-active: #111;
+}
+```
+
+```tsx
+<ParzMenu className="my-bar" items={items} />
+```
+
+## Ապակի
+
+`glass` պրոպը տալիս է, թե որքան թափանցիկ է պատիճների ֆոնը՝ թիվ 0-ից 100 (թափանցիկության տոկոս) կամ պատրաստի նախադրված։ Գույնը մնում է թեմայից (`surfaceTop` / `surfaceBottom`), փոխվում է միայն թափանցիկությունը։
+
+| Նախադրված | Թափանցիկություն | Մշուշ | Ինչպես է երևում |
+|---|---|---|---|
+| `'solid'` | 0 % | 0 | Ամբողջական թիթեղ, բովանդակությունը դրա միջով չի երևում |
+| `'frosted'` | 15 % | 20 px | Փայլատ ապակի՝ ինչպես CarPark-ում |
+| `'glass'` | 40 % | 16 px | Նկատելիորեն թափանցում է |
+| `'clear'` | 70 % | 10 px | Գրեթե թափանցիկ, պահվում է մշուշի և եզրագծի վրա |
+| `'none'` | 100 % | 0 | Ֆոն չկա՝ միայն պատկերակներ, պիտակներ և կաթիլ |
+
+```tsx
+<ParzMenu glass="glass" items={items} />      // նախադրված
+<ParzMenu glass={55} items={items} />          // 55 % թափանցիկություն, մշուշը թեմայից
+```
+
+Նախադրվածը տալիս է նաև մշուշը։ Պետք է ձեր մշուշը՝ փոխանցեք `glass`-ը թվով, իսկ մշուշը տվեք `theme.blur`-ում։ Առանց `glass`-ի թափանցիկությունը վերցվում է թեմայի գույներից՝ ինչպես կա։ `hsl()`, `oklch()` ձևաչափի և `navy`-ի նման անուններով գույների թափանցիկությունը չի փոխվում․ տվեք դրանք `#rrggbb` կամ `rgb()` ձևաչափով։
+
+## Անիմացիաներ
+
+| Դաշտ | Լռելյայն | Ինչ է տալիս |
+|---|---|---|
+| `lead` | `360` | Կաթիլի առաջատար եզրի ժամանակը, մվ |
+| `lag` | `660` | Հետ մնացող եզրի ժամանակը, մվ։ Որքան մեծ է տարբերությունը `lead`-ից, այնքան ուժեղ է կաթիլը ձգվում |
+| `squash` | `0.26` | Որքան է կաթիլը տափակում թռիչքի ժամանակ։ `0` — առանց դրա |
+| `overshoot` | `1.35` | Զսպանակություն՝ `1` — առանց թռիչքի, `1.6` — ուժեղ |
+| `jelly` | `true` | Կլոր կոճակների առաձգական արձագանքը և դրանց պատիճի «շաղ տալը» |
+| `wave` | `0.035` | Կետերով ամբողջ պատիճի առաձգական ալիք՝ անցման ժամանակ՝ կաթիլի ընթացքի ուղղությամբ, աջ կոճակներից վերադառնալիս՝ ձախ, բաց կետին կրկին սեղմելիս՝ կենտրոնից։ `0` — անջատված, `0.08` — ուժեղ |
+| `shift` | `550` | Քանի մվ-ում է աջ խումբը հայտնվում կամ թաքնվում, իսկ կետերը տեղափոխվում կենտրոն |
+
+```tsx
+<ParzMenu motion={{ lead: 280, lag: 820, squash: 0.35 }} items={items} />
+```
+
+Համակարգային «նվազեցնել շարժումը» կարգավորման դեպքում կաթիլը պարզապես արագ տեղափոխվում է՝ առանց ձգման և առաձգականության։
+
+## Մատչելիություն
+
+- Մենյուն `nav` տարր է, ակտիվ կետը նշված է `aria-current="page"`-ով, կլոր կոճակները՝ `aria-pressed`։
+- Նշանը կարդացվում է կետի հետ միասին՝ «Տուգանքներ, 3», «Նորույթ, նոր»։ Ձևակերպումը փոխում է `badgeLabel`-ը, լեզուն՝ `locale`-ը։
+- Ամեն ինչ աշխատում է ստեղնաշարով՝ Tab և Enter, ֆոկուսի օղակը տեսանելի է։
+
+## Ինչ չկա այստեղ
+
+- Սեփական հաղորդագրություններ, երթուղավորում և էջերի վիճակ․ կոմպոնենտը միայն ցույց է տալիս մենյուն և հաղորդում սեղմումների մասին։
+- Կետերի քաշում և ներդիրների միջև սահեցում։
+- Առանց `backdrop-filter`-ի դիտարկիչների աջակցություն․ այնտեղ պատիճները կլինեն առանց մշուշի, բայց ֆոնով։