@ziyarago/ui 0.9.0 → 0.10.0

package/src/meta/templates.json

@@ -4706,6 +4706,554 @@
      "use": "<UiCard title=\"Summary\">…</UiCard>"
     }
    ]
+  },
+  {
+   "key": "itinerary",
+   "route": "itinerary",
+   "label": "Itinerary",
+   "icon": "map",
+   "desc": "Itinerary: day tabs, a timeline of stops, transport and hotel blocks and a sticky trip summary.",
+   "component": "PageItinerary",
+   "tpl": "TplItinerary",
+   "shell": true,
+   "slots": [
+    {
+     "id": "header",
+     "title": "Page heading",
+     "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+     "accepts": [
+      "PageHeader",
+      "Breadcrumbs",
+      "Button",
+      "SegmentedControl"
+     ],
+     "props": [
+      {
+       "name": "title",
+       "type": "string",
+       "desc": "H1, up to 60 characters"
+      },
+      {
+       "name": "subtitle",
+       "type": "string?",
+       "desc": "Gray caption below the heading"
+      },
+      {
+       "name": "crumbs",
+       "type": "{label,href?}[]",
+       "desc": "Breadcrumbs"
+      },
+      {
+       "name": "actions",
+       "type": "VNode",
+       "desc": "Buttons on the right; wrap below on a narrow screen"
+      }
+     ],
+     "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+    },
+    {
+     "id": "days",
+     "title": "Days",
+     "desc": "Switch between the days of the trip.",
+     "accepts": [
+      "Tabs",
+      "PillTabs"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiTabs v-model=\"day\" :items=\"days\" />"
+    },
+    {
+     "id": "timeline",
+     "title": "Day timeline",
+     "desc": "Stops of the active day with times, places and durations.",
+     "accepts": [
+      "Card",
+      "Timeline",
+      "StatRow"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Day 2 · Makkah\">…</UiCard>"
+    },
+    {
+     "id": "transport",
+     "title": "Transport",
+     "desc": "Flights, buses and transfers of the day.",
+     "accepts": [
+      "Card",
+      "StatRow"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Transport\">…</UiCard>"
+    },
+    {
+     "id": "hotel",
+     "title": "Hotel",
+     "desc": "Where the group stays.",
+     "accepts": [
+      "Card",
+      "Badge",
+      "IconTile"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard>…</UiCard>"
+    },
+    {
+     "id": "summary",
+     "title": "Trip summary",
+     "desc": "Dates, group size and what is booked.",
+     "accepts": [
+      "Card",
+      "Descriptions",
+      "Progress"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Trip summary\">…</UiCard>"
+    }
+   ]
+  },
+  {
+   "key": "prayer",
+   "route": "prayer",
+   "label": "Prayer times",
+   "icon": "clock",
+   "desc": "Prayer times: location picker, today with the next prayer, a month table and a sticky Qibla compass.",
+   "component": "PagePrayer",
+   "tpl": "TplPrayer",
+   "shell": true,
+   "slots": [
+    {
+     "id": "header",
+     "title": "Page heading",
+     "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+     "accepts": [
+      "PageHeader",
+      "Breadcrumbs",
+      "Button",
+      "SegmentedControl"
+     ],
+     "props": [
+      {
+       "name": "title",
+       "type": "string",
+       "desc": "H1, up to 60 characters"
+      },
+      {
+       "name": "subtitle",
+       "type": "string?",
+       "desc": "Gray caption below the heading"
+      },
+      {
+       "name": "crumbs",
+       "type": "{label,href?}[]",
+       "desc": "Breadcrumbs"
+      },
+      {
+       "name": "actions",
+       "type": "VNode",
+       "desc": "Buttons on the right; wrap below on a narrow screen"
+      }
+     ],
+     "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+    },
+    {
+     "id": "location",
+     "title": "Location",
+     "desc": "City and calculation method.",
+     "accepts": [
+      "Select",
+      "PillSelect",
+      "SegmentedControl"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiSelect v-model=\"city\" :options=\"cities\" />"
+    },
+    {
+     "id": "today",
+     "title": "Today",
+     "desc": "Five prayers with the next one highlighted and a countdown.",
+     "accepts": [
+      "Card",
+      "PrayerTimes"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiPrayerTimes :items=\"times\" :next=\"2\" />"
+    },
+    {
+     "id": "month",
+     "title": "Month table",
+     "desc": "Prayer times for every day of the month.",
+     "accepts": [
+      "Card",
+      "DataTable"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiDataTable :columns=\"cols\" :rows=\"days\" />"
+    },
+    {
+     "id": "qibla",
+     "title": "Qibla",
+     "desc": "Direction to the Kaaba.",
+     "accepts": [
+      "Card",
+      "QiblaCompass"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiQiblaCompass :bearing=\"248\" />"
+    }
+   ]
+  },
+  {
+   "key": "group-manager",
+   "route": "group-manager",
+   "label": "Group manager",
+   "icon": "users-round",
+   "desc": "Group manager: trip summary, pilgrims with documents and visa, bulk actions, rooming and payments.",
+   "component": "PageGroupManager",
+   "tpl": "TplGroupManager",
+   "shell": true,
+   "slots": [
+    {
+     "id": "header",
+     "title": "Page heading",
+     "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+     "accepts": [
+      "PageHeader",
+      "Breadcrumbs",
+      "Button",
+      "SegmentedControl"
+     ],
+     "props": [
+      {
+       "name": "title",
+       "type": "string",
+       "desc": "H1, up to 60 characters"
+      },
+      {
+       "name": "subtitle",
+       "type": "string?",
+       "desc": "Gray caption below the heading"
+      },
+      {
+       "name": "crumbs",
+       "type": "{label,href?}[]",
+       "desc": "Breadcrumbs"
+      },
+      {
+       "name": "actions",
+       "type": "VNode",
+       "desc": "Buttons on the right; wrap below on a narrow screen"
+      }
+     ],
+     "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+    },
+    {
+     "id": "trip",
+     "title": "Trip summary",
+     "desc": "Dates, route, seats and readiness counters.",
+     "accepts": [
+      "Card",
+      "StatStrip",
+      "Progress"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiStatStrip :items=\"stats\" />"
+    },
+    {
+     "id": "toolbar",
+     "title": "Toolbar",
+     "desc": "Search and status filters.",
+     "accepts": [
+      "SearchInput",
+      "FilterChips"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiSearchInput v-model=\"q\" />"
+    },
+    {
+     "id": "bulk",
+     "title": "Bulk actions",
+     "desc": "Shown when pilgrims are selected.",
+     "accepts": [
+      "Button",
+      "Badge"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiButton icon=\"send\">Remind selected</UiButton>"
+    },
+    {
+     "id": "pilgrims",
+     "title": "Pilgrims",
+     "desc": "Table with passport, visa and payment status.",
+     "accepts": [
+      "Card",
+      "DataTable",
+      "Badge"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+    },
+    {
+     "id": "rooms",
+     "title": "Rooming",
+     "desc": "Room assignment for the hotel.",
+     "accepts": [
+      "Card",
+      "RoomGrid"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiRoomGrid :rooms=\"rooms\" />"
+    },
+    {
+     "id": "payments",
+     "title": "Payments",
+     "desc": "Collected, outstanding and the manager contact.",
+     "accepts": [
+      "Card",
+      "Progress",
+      "ContactPanel"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Payments\">…</UiCard>"
+    }
+   ]
+  },
+  {
+   "key": "tour-public",
+   "route": "tour-public",
+   "label": "Tour page",
+   "icon": "plane",
+   "desc": "Public tour page without the shell: gradient gallery, highlights, itinerary, inclusions, reviews and a sticky booking card.",
+   "component": "PageTourPublic",
+   "tpl": "TplTourPublic",
+   "shell": false,
+   "slots": [
+    {
+     "id": "header",
+     "title": "Page heading",
+     "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+     "accepts": [
+      "PageHeader",
+      "Breadcrumbs",
+      "Button",
+      "SegmentedControl"
+     ],
+     "props": [
+      {
+       "name": "title",
+       "type": "string",
+       "desc": "H1, up to 60 characters"
+      },
+      {
+       "name": "subtitle",
+       "type": "string?",
+       "desc": "Gray caption below the heading"
+      },
+      {
+       "name": "crumbs",
+       "type": "{label,href?}[]",
+       "desc": "Breadcrumbs"
+      },
+      {
+       "name": "actions",
+       "type": "VNode",
+       "desc": "Buttons on the right; wrap below on a narrow screen"
+      }
+     ],
+     "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+    },
+    {
+     "id": "gallery",
+     "title": "Gallery",
+     "desc": "Hero area made of gradients or photos.",
+     "accepts": [
+      "Gallery",
+      "Card"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard>…</UiCard>"
+    },
+    {
+     "id": "highlights",
+     "title": "Highlights",
+     "desc": "Key facts: nights, hotels, flights.",
+     "accepts": [
+      "StatStrip",
+      "IconTile"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiStatStrip :items=\"facts\" />"
+    },
+    {
+     "id": "itinerary",
+     "title": "Itinerary",
+     "desc": "Day by day program in an accordion.",
+     "accepts": [
+      "Accordion"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiAccordion :items=\"days\" />"
+    },
+    {
+     "id": "included",
+     "title": "Included",
+     "desc": "What the price includes and excludes.",
+     "accepts": [
+      "Card",
+      "Descriptions"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Included\">…</UiCard>"
+    },
+    {
+     "id": "reviews",
+     "title": "Reviews",
+     "desc": "What pilgrims say.",
+     "accepts": [
+      "Card",
+      "Rating",
+      "Avatar"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Reviews\">…</UiCard>"
+    },
+    {
+     "id": "booking",
+     "title": "Booking",
+     "desc": "Price, dates, seats and the booking button.",
+     "accepts": [
+      "Card",
+      "Button"
+     ],
+     "props": [
+      {
+       "name": "content",
+       "type": "VNode",
+       "desc": ""
+      }
+     ],
+     "use": "<UiCard title=\"Book\">…</UiCard>"
+    }
+   ]
   }
  ]
-}
+}

package/src/react/index.js

@@ -75,6 +75,7 @@ export const UiHotelCard = C.HotelCard;
 export const UiTourCard = C.TourCard;
 export const UiPrayerTimes = C.PrayerTimes;
 export const UiRamadanTracker = C.RamadanTracker;
+export const UiQiblaCompass = C.QiblaCompass;
 export const UiCallRow = C.CallRow;
 export const UiAlert = C.Alert;
 export const UiBanner = C.Banner;
@@ -212,6 +213,10 @@ export const UiPageStates = C.PageStates;
 export const UiPageLegal = C.PageLegal;
 export const UiPageLocations = C.PageLocations;
 export const UiPageBookingFlow = C.PageBookingFlow;
+export const UiPageItinerary = C.PageItinerary;
+export const UiPagePrayer = C.PagePrayer;
+export const UiPageGroupManager = C.PageGroupManager;
+export const UiPageTourPublic = C.PageTourPublic;
 export const UiPageNotifications = C.PageNotifications;
 export const UiPageInbox = C.PageInbox;
 export const UiPageCheckout = C.PageCheckout;

package/src/styles/components5.css

@@ -2,4 +2,4 @@
 .zg-pgroot{display:block;min-width:0;width:100%}.zg-pg{display:flex;flex-direction:column;gap:16px;min-width:0}.zg-pg__r{min-width:0}
 .zg-pg__auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,340px)),1fr));gap:16px;align-items:start;min-width:0}
 .zg-pg__two{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;min-width:0}.zg-pg__main{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}.zg-pg__side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}.zg-pg__aside{flex:1 1 260px;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:16px}
-.zg-pgauth{position:relative;min-height:100%;display:grid;place-items:center;padding:24px}.zg-pgauth__bg{position:absolute;inset:0;overflow:hidden}.zg-pgauth__c{position:relative;width:100%;max-width:440px}
+.zg-pgauth{position:relative;min-height:100vh;min-height:100dvh;display:grid}.zg-pgauth__bg{position:absolute;inset:0;overflow:hidden}.zg-pgauth__c{position:relative;display:grid;place-items:center;padding:24px;min-height:inherit}.zg-pgauth .zg-auth{min-height:0;padding:0;width:100%;background:transparent;display:grid;place-items:center}.zg-pgauth .zg-auth__card{margin-inline:auto}

package/src/styles/components8.css

@@ -45,8 +45,10 @@
 /* CommandPalette active row, dialog focus */
 .zg-menu__i.is-active,.zg-menu__i[aria-selected="true"]{background:var(--zg-s2)}
 .zg-modal:focus,.zg-sheet:focus,.zg-fsd:focus,.zg-saver:focus{outline:0}
+/* auth page templates fill the viewport */
+.zg-split2{min-height:100vh;min-height:100dvh}
 /* AuthShowcase: photo (dark framed card), light (gradient card + proof pill + glass caption), tint (coloured panel, pill fields) */
-.zg-ash{min-height:100%;padding:clamp(12px,3vw,40px);display:grid;place-items:center;--ash-r:28px;--ash-acc:var(--zg-brand)}
+.zg-ash{min-height:100vh;min-height:100dvh;padding:clamp(12px,3vw,40px);display:grid;place-items:center;--ash-r:28px;--ash-acc:var(--zg-brand)}
 .zg-ash--tint{--ash-acc:oklch(.7 .13 215)}
 .zg-ash__title{margin:0;font:300 clamp(28px,3.4vw,40px)/1.1 var(--zg-font);letter-spacing:-.03em}
 .zg-ash__sub{margin:10px 0 0;color:var(--zg-text-2);line-height:1.55}
@@ -94,3 +96,17 @@
 
 /* page templates: sticky region */
 .zg-pg__two--sticky{align-items:stretch}.zg-pg__stick{position:sticky;inset-block-start:16px;align-self:flex-start;width:100%}
+
+/* QiblaCompass */
+.zg-qb{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;direction:ltr}
+.zg-qb__svg{width:100%;height:auto;display:block}
+.zg-qb__ring{fill:var(--zg-s1);stroke:var(--zg-stroke);stroke-width:1}
+.zg-qb__tk{stroke:var(--zg-text-3);stroke-width:1;stroke-linecap:round}.zg-qb__tk--m{stroke:var(--zg-text-2);stroke-width:1.8}
+.zg-qb__n{fill:var(--zg-red)}.zg-qb__ln{stroke:var(--zg-brand);stroke-width:3;stroke-linecap:round}
+.zg-qb__kb{fill:var(--zg-bg);stroke:var(--zg-brand);stroke-width:2}.zg-qb__kg{fill:var(--zg-brand)}
+.zg-qb__hub{fill:var(--zg-brand)}
+.zg-qb__dial,.zg-qb__ptr{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
+.zg-qb__txt{display:flex;flex-direction:column;align-items:center;line-height:1.2;color:var(--zg-text-2);font-size:calc(13px*var(--dz,1))}
+.zg-qb__txt b{font-size:calc(22px*var(--dz,1));font-weight:600;color:var(--zg-text-1)}.zg-qb__txt small{color:var(--zg-text-3)}
+/* Numbers: tabular figures with a plain zero (no slashed or dotted zero) in KPI values, tables and code cells */
+.zg-num,.zg-mono,.zg-kpi__value,.zg-table .num{font-feature-settings:"zero" 0,"tnum" 1}

package/src/styles/effects.css

@@ -4,7 +4,7 @@
 [data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
 
 /* ── effects lite: flat surfaces for weak browsers and devices ── */
-[data-fx="lite"] *,[data-fx="lite"] *::before,[data-fx="lite"] *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
+[data-fx="lite"]:not([data-effects="full"]) *,[data-fx="lite"]:not([data-effects="full"]) *::before,[data-fx="lite"]:not([data-effects="full"]) *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 [data-fx="lite"]{--zg-shadow-1:0 2px 8px oklch(0 0 0 / .18);--zg-shadow-2:0 6px 20px oklch(0 0 0 / .28);--zg-brand-glow:transparent}
 [data-fx="lite"][data-theme="light"]{--zg-shadow-1:0 2px 8px oklch(0.4 0.03 60 / .12);--zg-shadow-2:0 6px 20px oklch(0.4 0.03 60 / .18)}
 [data-fx="lite"] .zg-glass{background:var(--zg-pop)}
@@ -22,6 +22,7 @@ html[data-bg]:not([data-bg="none"]),.zg-bg:not([data-bg="none"]){background-colo
 .zg-bg:not([data-bg="none"]){background-attachment:scroll}
 html[data-bg]:not([data-bg="none"]) .zg-root{background:transparent}
 html[data-motion="on"][data-bg]:not([data-bg="none"]){background-image:none}
+html[data-motion="on"][data-bg]:not([data-bg="none"]){overflow-x:clip}
 html[data-motion="on"][data-bg]:not([data-bg="none"])::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background-image:var(--zg-bg-image);background-repeat:no-repeat;animation:zg-bg-float 18s ease-in-out infinite alternate,zg-bg-hue 40s linear infinite;will-change:transform,filter}
 @keyframes zg-bg-hue{from{filter:hue-rotate(0deg) saturate(1.15)}to{filter:hue-rotate(360deg) saturate(1.15)}}
 @keyframes zg-bg-float{0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0deg)}50%{transform:translate3d(4%,3%,0) scale(1.18) rotate(3deg)}100%{transform:translate3d(-2%,5%,0) scale(1.08) rotate(-3deg)}}

package/src/styles/fonts.css

@@ -1,4 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+/* Manrope and JetBrains Mono (SIL OFL 1.1), self-hosted variable fonts from Google Fonts, latin and cyrillic subsets. No request to Google, works under a strict CSP. */
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../../assets/fonts/jetbrains-mono/jetbrains-mono-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../../assets/fonts/jetbrains-mono/jetbrains-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../../assets/fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../../assets/fonts/jetbrains-mono/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../../assets/fonts/manrope/manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
+@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../../assets/fonts/manrope/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
+@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../../assets/fonts/manrope/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../../assets/fonts/manrope/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
 /* Thmanyah — free incl. commercial, https://font.thmanyah.com. Files in assets/fonts/thmanyah. Adjust URLs to your bundler.
    Thmanyah is visually heavier than Manrope at the same weight and has no 600 face. Weight ranges map the UI weights (300-900) so Arabic does not look bold:
    200-300 Light, 400-600 Regular, 700 Medium, 800 Bold, 900 Black. */

package/src/vue/index.js

@@ -29,7 +29,7 @@ const wrap = (name, def) => defineComponent({
 });
 for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
 
-export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAnalytics: UiPageAnalytics, PageCalendar: UiPageCalendar, PageKanban: UiPageKanban, PageBilling: UiPageBilling, PageTeam: UiPageTeam, PageIntegrations: UiPageIntegrations, PageSearch: UiPageSearch, PageArticle: UiPageArticle, PageChangelog: UiPageChangelog, PageHelp: UiPageHelp, PageStates: UiPageStates, PageLegal: UiPageLegal, PageLocations: UiPageLocations, PageBookingFlow: UiPageBookingFlow, PageNotifications: UiPageNotifications, PageInbox: UiPageInbox, PageCheckout: UiPageCheckout, PageOnboarding: UiPageOnboarding, PageLanding: UiPageLanding, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
+export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, QiblaCompass: UiQiblaCompass, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAnalytics: UiPageAnalytics, PageCalendar: UiPageCalendar, PageKanban: UiPageKanban, PageBilling: UiPageBilling, PageTeam: UiPageTeam, PageIntegrations: UiPageIntegrations, PageSearch: UiPageSearch, PageArticle: UiPageArticle, PageChangelog: UiPageChangelog, PageHelp: UiPageHelp, PageStates: UiPageStates, PageLegal: UiPageLegal, PageLocations: UiPageLocations, PageBookingFlow: UiPageBookingFlow, PageItinerary: UiPageItinerary, PagePrayer: UiPagePrayer, PageGroupManager: UiPageGroupManager, PageTourPublic: UiPageTourPublic, PageNotifications: UiPageNotifications, PageInbox: UiPageInbox, PageCheckout: UiPageCheckout, PageOnboarding: UiPageOnboarding, PageLanding: UiPageLanding, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
 export const install = app => { for (const [n, c] of Object.entries(C)) app.component('Ui' + n, c); };
 export { fmt, setIconBase, rules } from '../core/index.js';
 export { useUiTheme } from '../theme.js';