@ziyarago/ui 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.7.0](https://github.com/ziyarago/ui/compare/v0.6.1...v0.7.0) (2026-10-21)
+
+### Features
+
+* page templates wave 1 (landing, onboarding, checkout, inbox, notifications, analytics) ([82bfc3c](https://github.com/ziyarago/ui/commit/82bfc3cd3b80ef875131040490d7d5dfba94adc9))
+
 ## [0.6.1](https://github.com/ziyarago/ui/compare/v0.6.0...v0.6.1) (2026-10-21)
 
 ### Bug Fixes

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: 184 components, 17 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: 190 components, 23 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: 184 components, 17 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>184 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>17 page templates</sub></td>
+    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>190 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>23 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: 184 components, 17 page templates
 Files:
 
 ```
-src/core/        components*.js, pages.js: 184 components and 17 page templates as { state, slots, render(ctx) }; no framework imports
+src/core/        components*.js, pages.js: 190 components and 23 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

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, 184 components and 17 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, 190 components and 23 page templates.
 
-Version 0.6.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.7.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -2383,6 +2383,106 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
+## UiPageAnalytics  (pages)
+Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.
+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).
+- period: Period presets and compare toggle; SegmentedControl, Select, Switch.
+- kpis: Headline numbers with deltas; KpiTile, StatLine.
+- trend: Main time series; ChartCard with MiniChart.
+- breakdown: Split by channel or country; ChartCard with SegBar and CountryRow.
+- table: Rows behind the numbers; DataTable.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot.
+
+## UiPageNotifications  (pages)
+Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
+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).
+- filters: Filter chips such as all, unread and mentions; FilterChips.
+- feed: Notification rows grouped by day; Card, IconTile, Badge, Divider.
+- empty: Shown instead of the feed when nothing matches; EmptyState.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Fill empty only when the feed has no rows. Mark all read goes in the actions slot.
+
+## UiPageInbox  (pages)
+Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
+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).
+- filters: Search and folder chips above the list; SearchInput, FilterChips.
+- list: Conversation rows with unread marks; Card, Avatar, Badge.
+- thread: Messages of the open conversation; Card, Avatar.
+- composer: Reply field and send button; Textarea, Button.
+- customer: Customer details; ContactPanel, Descriptions, Tag.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state.
+
+## UiPageCheckout  (pages)
+Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
+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).
+- steps: Checkout steps above the content; Stepper.
+- items: Cart lines with quantity and price; Card with NumberInput.
+- address: Contact and delivery fields; Card with TextField and Select.
+- payment: Payment method and card fields; OptionCards, TextField.
+- summary: Totals, promo code and the pay button; Card, Descriptions, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Summary sits in the side column and drops below the form on narrow screens.
+
+## UiPageOnboarding  (pages)
+Onboarding template: progress block, active step content, setup checklist and a column of tips.
+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).
+- progress: Stepper and a completion bar above the content; Stepper, Progress.
+- steps: Content of the active step; Card with form fields.
+- checklist: Remaining setup tasks; Card with Checkbox rows.
+- tips: Side column with help cards; Card, IconTile, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens.
+
+## UiPageLanding  (pages)
+Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.
+Slots:
+- hero: Hero block; HeroBanner, Card, Button.
+- logos: Partner row; Chip or Text.
+- features: Feature cards; Card, IconTile.
+- proof: Numbers and quotes; StatStrip, Card, Avatar.
+- pricing: Plan cards; PricingCard.
+- cta: Closing block; Card variant="gradient", Button.
+- footer: Page footer; Footer.
+Notes:
+- Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens.
+
 ## UiPageAuth  (pages)
 Sign-in page template without the app shell, as a centered card or a split layout.
 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, 184 components and 17 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, 190 components and 23 page templates.
 
-Version 0.6.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.7.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -233,9 +233,15 @@ Ready layouts with named slots.
 - UiPageAccount: Account settings template with pill tabs and a swappable panel.
 - UiPagePricing: Pricing template: billing-period toggle, plan cards and an FAQ.
 - UiPageFaq: Help center template: search, categories, answers accordion and a contact block.
+- UiPageAnalytics: Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.
+- 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.
+- UiPageOnboarding: Onboarding template: progress block, active step content, setup checklist and a column of tips.
+- UiPageLanding: Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.
 - 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)
+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)
 
 Full API of every component: llms-full.txt