@ziyarago/ui 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.11.0](https://github.com/ziyarago/ui/compare/v0.10.0...v0.11.0) (2026-10-21)
+
+### Features
+
+* Localization docs page, i18n tests, Pro language pack moved to private repo ([89dfed3](https://github.com/ziyarago/ui/commit/89dfed36ce7a9de6204fe54e912564ef19723160))
+
+## [0.10.0](https://github.com/ziyarago/ui/compare/v0.9.0...v0.10.0) (2026-10-21)
+
+### Features
+
+* page templates wave 4 (itinerary, prayer, group manager, public tour), QiblaCompass, bundled fonts, auth page and compat fixes ([4809362](https://github.com/ziyarago/ui/commit/48093620085425bb936a44294c6d2c6cf2a888f6))
+
 ## [0.9.0](https://github.com/ziyarago/ui/compare/v0.8.0...v0.9.0) (2026-10-21)
 
 ### Features

package/README.md

@@ -4,7 +4,7 @@
 
 <p align="center"><a href="https://ziyara.vip"><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/hero-dark.png" alt="ziyarago/ui: glass design system for Vue, Nuxt and React" width="100%"></a></p>
 
-Glass design system for Vue 3, Nuxt and React: 203 components, 36 page templates, OKLCH tokens, dark and light, RTL and Arabic, 16 interface languages. One framework-neutral core with thin adapters. Built for Umrah and Hajj products, usable anywhere.
+Glass design system for Vue 3, Nuxt and React: 208 components, 40 page templates, OKLCH tokens, dark and light, RTL and Arabic, 16 interface languages. One framework-neutral core with thin adapters. Built for Umrah and Hajj products, usable anywhere.
 
 <table>
   <tr>
@@ -12,8 +12,8 @@ Glass design system for Vue 3, Nuxt and React: 203 components, 36 page templates
     <td width="50%"><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/hero-rtl.png" alt="Arabic RTL"><br><sub>Arabic, RTL mirrored</sub></td>
   </tr>
   <tr>
-    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>203 components with props and live examples</sub></td>
-    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/templates.png" alt="Page templates"><br><sub>36 page templates</sub></td>
+    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>208 components with props and live examples</sub></td>
+    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/templates.png" alt="Page templates"><br><sub>40 page templates</sub></td>
   </tr>
   <tr>
     <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/button-docs.png" alt="Props docs"><br><sub>Every prop and variant documented</sub></td>
@@ -24,7 +24,7 @@ Glass design system for Vue 3, Nuxt and React: 203 components, 36 page templates
 Files:
 
 ```
-src/core/        components*.js, pages.js: 203 components and 36 page templates as { state, slots, render(ctx) }; no framework imports
+src/core/        components*.js, pages.js: 208 components and 40 page templates as { state, slots, render(ctx) }; no framework imports
 src/vue/         Vue 3 adapter  (UiButton, UiAppShell … + install(app))
 src/react/       React adapter  (same names)
 src/theme.js     useUiTheme(): theme · palette · dir → <html> attributes, persisted
@@ -59,7 +59,7 @@ Types ship with the package. Only 9 core components have typed props so far; the
 
 ### Requirements and notes
 - Node 18+ for tooling; any bundler that handles ES modules and CSS imports (Vite, webpack 5, Nuxt, Next). The package is plain ESM, not pre-bundled.
-- Fonts: Manrope (Latin, Cyrillic), Thmanyah Sans (Arabic, `dir="rtl"`), JetBrains Mono (code). Thmanyah ships in `assets/fonts`; Manrope and JetBrains Mono load from Google Fonts. Full table, weight mapping and self-hosting: docs site `/docs/fonts`. Colors: `/docs/colors`. Icons (Lucide) and map tiles load from the network — see `THIRD_PARTY_NOTICES.md` for self-hosting.
+- Fonts: Manrope (Latin, Cyrillic), Thmanyah Sans (Arabic, `dir="rtl"`), JetBrains Mono (code). All three ship in `assets/fonts` and load from your own origin, no Google request. Full table, weight mapping and self-hosting: docs site `/docs/fonts`. Colors: `/docs/colors`. Icons (Lucide) and map tiles load from the network — see `THIRD_PARTY_NOTICES.md` for self-hosting.
 - SSR: components render on the server; icons, `UiMap`, `UiRichEditor`, `UiTour` and `useUiTheme()` touch `document` only on the client.
 - Palettes via `data-palette="gold|tamam"`, theme via `data-theme="dark|light"`, direction via `dir="rtl"` on `<html>`.
 - Releases: see `docs/PUBLISHING.md`, history in `CHANGELOG.md`.
@@ -87,7 +87,7 @@ Controls and density-bearing components take `size="xs|sm|md|lg|xl"` (default `m
 ## Conventions
 - Controlled inputs: Vue `v-model` / `@change`; React `modelValue` + `onChange(value)`.
 - Slots: Vue named slots (`#actions`, `#footer`); React props `actions`, `footer`.
-- Icons are Lucide names (`icon="search"`). SVGs are fetched once from unpkg `lucide-static@0.460.0` and inlined as data-URI masks (they take `currentColor`). Self-host with `setIconBase('/icons/')` from `@ziyarago/ui`.
+- Icons are Lucide names (`icon="search"`). SVGs are fetched once from unpkg `lucide-static@0.460.0` and inlined as data-URI masks (they take `currentColor`). Under a strict CSP (`connect-src 'self'`) the CDN request is blocked: copy `lucide-static/icons` to your public folder and call `setIconBase('/icons/')` from `@ziyarago/ui` before mount.
 - Theme: `[data-theme=dark|light]`, palette `[data-palette=gold|tamam]`, direction `dir`.
 - Formatters `fmt.num / sar / dur`: `-1 → ∞`, NaN/null → `—`, `1 м 05 с`.
 - Brand fill for ONE hero element per view.
@@ -99,7 +99,7 @@ Surfaces: Card · Modal · Drawer · Toast
 Data: KpiTile · Progress · Ring · DataTable · KanbanColumn · KanbanCard · Timeline
 Navigation: TopNav · SideNav · Breadcrumbs · Pagination
 Layout: AppShell · PageHeader · AuthLayout
-Domain: LeadCard · HotelCard · TourCard · PrayerTimes · RamadanTracker · CallRow
+Domain: LeadCard · HotelCard · TourCard · PrayerTimes · RamadanTracker · QiblaCompass · CallRow
 
 ## Not done yet
 TypeScript typings, a build step (the package ships ES source), tests, DatePicker, CommandPalette, Map components, i18n bundle (6 locales), and a Flutter widget port (tokens.json is ready for it).

package/THIRD_PARTY_NOTICES.md

@@ -3,8 +3,8 @@
 | Asset | Source | License | How it is used |
 |---|---|---|---|
 | Thmanyah Sans, Serif Display, Serif Text | https://font.thmanyah.com | Free, including commercial use (check the foundry page before redistributing changes) | Shipped in `assets/fonts/thmanyah` for Arabic and RTL |
-| Manrope | https://fonts.google.com/specimen/Manrope | SIL OFL 1.1 | Loaded from Google Fonts in `dist/style.css` |
-| JetBrains Mono | https://www.jetbrains.com/lp/mono/ | SIL OFL 1.1 | Loaded from Google Fonts |
+| Manrope | https://fonts.google.com/specimen/Manrope | SIL OFL 1.1 | Shipped in `assets/fonts/manrope` (variable woff2, latin and cyrillic) |
+| JetBrains Mono | https://www.jetbrains.com/lp/mono/ | SIL OFL 1.1 | Shipped in `assets/fonts/jetbrains-mono` (variable woff2, latin and cyrillic) |
 | Lucide icons | https://lucide.dev | ISC | Fetched at runtime from unpkg; set a self-hosted path with `setIconBase()` |
 | Map tiles (`UiMap`) | CARTO basemaps, © OpenStreetMap contributors | ODbL data, CARTO terms | Requested at runtime; keep the attribution the component shows |
 | ZiyaraGo logo and 3D icons | ZiyaraGo | All rights reserved | not shipped in the package; shown on ziyara.vip for demonstration only |

package/dist/llms-full.txt

@@ -1,8 +1,8 @@
 # @ziyarago/ui
 
-> ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 203 components and 36 page templates.
+> ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 208 components and 40 page templates.
 
-Version 0.9.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.11.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -520,6 +520,9 @@ Props:
 - `placeholder`: string. Placeholder text.
 - `hint`: string. Helper text under the control. Hidden while error is set.
 - `error`: string. Error message under the control. Turns the control red and is announced with role="alert".
+- `required`: boolean = false. Adds a red asterisk to the label and the native required attribute.
+- `name`: string. Native name attribute of the input.
+- `autofocus`: boolean. Focuses the input on mount.
 - `autocomplete`: string = "current-password". Native autocomplete token. Use "new-password" on sign-up and password-change forms so managers offer to generate one.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
 Events:
@@ -961,6 +964,7 @@ Props:
 - `error`: string. Failure message shown in a danger alert above the fields.
 - `loading`: boolean = false. Disables the submit button and shows a spinner.
 - `showForgot`: boolean = true. Show the "Forgot password?" link.
+- `showRemember`: boolean = true. Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.
 - `submitLabel`: string = "Sign in". Submit button text. Wins over labels.submit.
 - `labels`: { email?: string; password?: string; remember?: string; forgot?: string; submit?: string } = "{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }". Texts of the form; any missing key keeps its English default.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
@@ -1947,6 +1951,16 @@ Props:
 Notes:
 - Exposed as role="img" with aria-label "Day N of 30".
 
+## UiQiblaCompass  (domain)
+Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.
+Props:
+- `bearing` (required): number = 0. Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap.
+- `heading`: number = 0. Direction the device points to, in degrees. The dial turns against it so the marker follows the real Qibla; 0 keeps north up.
+- `distance`: string. Optional small caption under the bearing, such as "4 210 km to the Kaaba".
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = "md". Diameter: xs 120, sm 160, md 200, lg 250, xl 300 px; a number is used as px.
+Notes:
+- Exposed as role="img" with a label that states the bearing. Compute the bearing and heading yourself (geolocation and DeviceOrientation); the component only draws them.
+
 ## UiBookingCard  (domain)
 Compact booking summary: code, status, guest, hotel, dates and total.
 Props:
@@ -2624,6 +2638,79 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px.
 
+## UiPageItinerary  (pages)
+Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.
+Props:
+- `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
+- `subtitle`: string. Caption under the heading.
+- `crumbs`: { label: string; href?: string }[]. Breadcrumb trail above the title.
+Slots:
+- header: Custom page header; replaces the built-in title/subtitle/crumbs header.
+- actions: Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+- days: Day switcher; Tabs or PillTabs.
+- timeline: Stops of the active day with times and places; Card, Timeline, StatRow.
+- transport: Flights, buses and transfers of the day; Card, StatRow.
+- hotel: Where the group stays that night; Card, Badge, IconTile.
+- summary: Trip summary; Card, Descriptions, Progress.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Render only the active day in timeline, transport and hotel. The summary stays visible on the right and goes below the day under 860 px.
+
+## UiPagePrayer  (pages)
+Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.
+Props:
+- `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
+- `subtitle`: string. Caption under the heading.
+- `crumbs`: { label: string; href?: string }[]. Breadcrumb trail above the title.
+Slots:
+- header: Custom page header; replaces the built-in title/subtitle/crumbs header.
+- actions: Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+- location: City and method pickers; Select, PillSelect, SegmentedControl.
+- today: Today's prayers and the countdown to the next one; Card, PrayerTimes.
+- month: Prayer times for the whole month; Card, DataTable.
+- qibla: Qibla direction; Card, QiblaCompass.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- The Qibla card stays visible on the right and goes below the times under 860 px.
+
+## UiPageGroupManager  (pages)
+Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.
+Props:
+- `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
+- `subtitle`: string. Caption under the heading.
+- `crumbs`: { label: string; href?: string }[]. Breadcrumb trail above the title.
+Slots:
+- header: Custom page header; replaces the built-in title/subtitle/crumbs header.
+- actions: Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+- trip: Trip header with dates, route and counters; Card, StatStrip, Progress.
+- toolbar: Search and status filters; SearchInput, FilterChips.
+- bulk: Actions for the selected pilgrims; Button, Badge.
+- pilgrims: Pilgrims table with documents and visa; Card, DataTable, Badge.
+- rooms: Rooming assignment; Card, RoomGrid.
+- payments: Payments summary and manager contact; Card, Progress, ContactPanel.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- The payments card stays visible on the right and goes below the table under 860 px.
+
+## UiPageTourPublic  (pages)
+Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.
+Props:
+- `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
+- `subtitle`: string. Caption under the heading.
+- `crumbs`: { label: string; href?: string }[]. Breadcrumb trail above the title.
+Slots:
+- header: Custom page header; replaces the built-in title/subtitle/crumbs header.
+- actions: Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+- gallery: Hero area made of gradients or photos; Gallery, Card.
+- highlights: Key facts and highlights; StatStrip, IconTile.
+- itinerary: Day by day program; Accordion.
+- included: What the price includes and excludes; Card, Descriptions.
+- reviews: Pilgrim reviews; Card, Rating, Avatar.
+- booking: Price, dates, seats and the booking button; Card, Button.
+Notes:
+- Render the page on its own, without AppShell: it supplies its own width and padding in your layout.
+- The booking card stays visible on the right and goes below the content under 860 px.
+
 ## UiPageNotifications  (pages)
 Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
 Props:

package/dist/llms.txt

@@ -1,8 +1,8 @@
 # @ziyarago/ui
 
-> ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 203 components and 36 page templates.
+> ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 208 components and 40 page templates.
 
-Version 0.9.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.11.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -200,6 +200,7 @@ Umrah, Hajj, hotel and CRM blocks.
 - UiTourCard: Tour or virtual-tour card with session count and a seat-occupancy bar.
 - UiPrayerTimes: Row of daily prayer times with the upcoming prayer highlighted.
 - UiRamadanTracker: Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.
+- UiQiblaCompass: Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.
 - UiBookingCard: Compact booking summary: code, status, guest, hotel, dates and total.
 - UiGuestCard: Guest profile card with avatar, country, stay length and tags.
 - UiRoomGrid: Tile grid of rooms colored by housekeeping status; use for front-desk room selection.
@@ -247,6 +248,10 @@ Ready layouts with named slots.
 - UiPageLegal: Legal document template: last-updated line, sticky table of contents, numbered sections and a contact card.
 - UiPageLocations: Locations template: filters, a scrollable list of places and a sticky map panel.
 - UiPageBookingFlow: Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.
+- UiPageItinerary: Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.
+- UiPagePrayer: Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.
+- UiPageGroupManager: Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.
+- UiPageTourPublic: Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.
 - UiPageNotifications: Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
 - UiPageInbox: Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
 - UiPageCheckout: Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
@@ -255,6 +260,6 @@ Ready layouts with named slots.
 - UiPageAuth: Sign-in page template without the app shell, as a centered card or a split layout.
 - UiPageStatus: Full-page status screen (404, 401, maintenance, coming soon) with one action.
 
-Page templates: UiPageDashboard (header, hero, kpis, occupancy, funnel, top, activity); UiPageCrm (header, summary, filters, board, calls); UiPageBookings (header, stats, toolbar, bulk, table, pager); UiPageCatalog (header, filters, toolbar, grid, pager); UiPageDetail (header, gallery, summary, tabs, booking, history); UiPageSettings (header, subnav, profile, notifications, integrations, danger); UiPageAuth (background, logo, form, footer); UiPagePatterns (header, hero, strip, statlines, chartcard, listrows, countries, tiles, versus, segbar, activity, actioncard); UiPageUserList (header, stats, filters, toolbar, table, drawer); UiPageProfile (profile, tabs, about, activity, plan); UiPageForm (header, main, media, side, actions); UiPageOrder (header, status, items, shipping, side); UiPageAuth (aside, logo, form, footer); UiPageStatus (code, message, action); UiPageAccount (header, tabs, panel); UiPageFaq (search, cats, answers, contact); UiPagePricing (toggle, plans, faq); UiPageLanding (hero, logos, features, proof, pricing, cta, footer); UiPageOnboarding (header, progress, steps, checklist, tips); UiPageCheckout (header, steps, items, address, payment, summary); UiPageInbox (header, filters, list, thread, composer, customer); UiPageNotifications (header, filters, feed, empty); UiPageAnalytics (header, period, kpis, trend, breakdown, table); UiPageCalendar (header, toolbar, grid, mini, details); UiPageKanban (header, filters, board, detail); UiPageBilling (header, plan, usage, invoices, methods, upgrade); UiPageTeam (header, stats, members, roles, invite); UiPageIntegrations (header, filters, connections, keys, webhooks); UiPageSearch (header, search, filters, results, empty); UiPageArticle (header, cover, body, toc, share, related); UiPageChangelog (header, filters, timeline, subscribe); UiPageHelp (header, search, categories, popular, contact); UiPageStates (header, empty, noresults, forbidden, offline, error, loading, success); UiPageLegal (header, meta, toc, document, contact); UiPageLocations (header, filters, list, map); UiPageBookingFlow (header, steps, content, nav, summary)
+Page templates: UiPageDashboard (header, hero, kpis, occupancy, funnel, top, activity); UiPageCrm (header, summary, filters, board, calls); UiPageBookings (header, stats, toolbar, bulk, table, pager); UiPageCatalog (header, filters, toolbar, grid, pager); UiPageDetail (header, gallery, summary, tabs, booking, history); UiPageSettings (header, subnav, profile, notifications, integrations, danger); UiPageAuth (background, logo, form, footer); UiPagePatterns (header, hero, strip, statlines, chartcard, listrows, countries, tiles, versus, segbar, activity, actioncard); UiPageUserList (header, stats, filters, toolbar, table, drawer); UiPageProfile (profile, tabs, about, activity, plan); UiPageForm (header, main, media, side, actions); UiPageOrder (header, status, items, shipping, side); UiPageAuth (aside, logo, form, footer); UiPageStatus (code, message, action); UiPageAccount (header, tabs, panel); UiPageFaq (search, cats, answers, contact); UiPagePricing (toggle, plans, faq); UiPageLanding (hero, logos, features, proof, pricing, cta, footer); UiPageOnboarding (header, progress, steps, checklist, tips); UiPageCheckout (header, steps, items, address, payment, summary); UiPageInbox (header, filters, list, thread, composer, customer); UiPageNotifications (header, filters, feed, empty); UiPageAnalytics (header, period, kpis, trend, breakdown, table); UiPageCalendar (header, toolbar, grid, mini, details); UiPageKanban (header, filters, board, detail); UiPageBilling (header, plan, usage, invoices, methods, upgrade); UiPageTeam (header, stats, members, roles, invite); UiPageIntegrations (header, filters, connections, keys, webhooks); UiPageSearch (header, search, filters, results, empty); UiPageArticle (header, cover, body, toc, share, related); UiPageChangelog (header, filters, timeline, subscribe); UiPageHelp (header, search, categories, popular, contact); UiPageStates (header, empty, noresults, forbidden, offline, error, loading, success); UiPageLegal (header, meta, toc, document, contact); UiPageLocations (header, filters, list, map); UiPageBookingFlow (header, steps, content, nav, summary); UiPageItinerary (header, days, timeline, transport, hotel, summary); UiPagePrayer (header, location, today, month, qibla); UiPageGroupManager (header, trip, toolbar, bulk, pilgrims, rooms, payments); UiPageTourPublic (header, gallery, highlights, itinerary, included, reviews, booking)
 
 Full API of every component: llms-full.txt