@ziyarago/ui 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.9.0](https://github.com/ziyarago/ui/compare/v0.8.0...v0.9.0) (2026-10-21)
+
+### Features
+
+* page templates wave 3 (article, changelog, help, states, legal, locations, booking flow) ([435d5b8](https://github.com/ziyarago/ui/commit/435d5b8209a527c845897968da4ffe8a8e009618))
+
+## [0.8.0](https://github.com/ziyarago/ui/compare/v0.7.0...v0.8.0) (2026-10-21)
+
+### Features
+
+* page templates wave 2 (calendar, kanban, billing, team, integrations, search) ([22397b0](https://github.com/ziyarago/ui/commit/22397b000bcb473708eba3f91c415688bb668932))
+
 ## [0.7.0](https://github.com/ziyarago/ui/compare/v0.6.1...v0.7.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: 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.
+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.
 
 <table>
   <tr>
@@ -12,8 +12,8 @@ Glass design system for Vue 3, Nuxt and React: 190 components, 23 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>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>
+    <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>
   </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: 190 components, 23 page templates
 Files:
 
 ```
-src/core/        components*.js, pages.js: 190 components and 23 page templates as { state, slots, render(ctx) }; no framework imports
+src/core/        components*.js, pages.js: 203 components and 36 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, 190 components and 23 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, 203 components and 36 page templates.
 
-Version 0.7.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.9.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -2401,6 +2401,229 @@ 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.
 
+## UiPageCalendar  (pages)
+Calendar template: view switch, time grid, mini calendar and event details.
+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).
+- toolbar: SegmentedControl, Button, IconButton.
+- grid: Time grid with events; Card with custom grid, or CalendarView for the month.
+- mini: Month picker; Calendar.
+- details: Selected event; Card, Descriptions, Avatar, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- The grid sits beside the mini calendar and details; they stack under 860 px.
+
+## UiPageKanban  (pages)
+Kanban template: filters, task board columns and a card detail 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: SearchInput, FilterChips, Select.
+- board: Columns with cards; KanbanColumn, KanbanCard.
+- detail: Selected card; Card, Descriptions, Checkbox, Timeline.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Board scrolls horizontally inside its area; detail goes below it under 860 px.
+
+## UiPageBilling  (pages)
+Billing template: current plan, usage meters, invoices, payment methods and an upgrade 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).
+- plan: Current plan; Card with Badge and Buttons.
+- usage: Usage meters; Progress.
+- invoices: Invoices; DataTable.
+- methods: Saved cards; Card, IconTile, Badge.
+- upgrade: Upgrade call to action; Card variant="inverse" or PricingCard.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Plan, usage and invoices share the main column; methods and upgrade form the side column.
+
+## UiPageTeam  (pages)
+Team template: member stats, members table, roles and permissions matrix, and an invite form.
+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).
+- stats: Counters; KpiTile, StatsCard.
+- members: Members; DataTable with UserCell, Select, Badge.
+- roles: Permissions matrix; DataTable with Checkbox cells.
+- invite: Invite form; Card, TextField, Select, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Members and roles share the main column; the invite form is the side column.
+
+## UiPageIntegrations  (pages)
+Integrations template: connection cards, API keys and webhooks.
+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: SearchInput, FilterChips.
+- connections: IntegrationCard grid.
+- keys: Keys; DataTable with CopyButton and IconButton.
+- webhooks: Webhooks list; Card, Switch, Chip.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Keys and webhooks share a row and wrap on narrow screens.
+
+## UiPageSearch  (pages)
+Search template: query field, filter sidebar, result groups and an empty state.
+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).
+- search: SearchInput, Tabs.
+- filters: Filters; Card, Checkbox, Select.
+- results: Result groups; Card, Chip, Divider.
+- empty: Shown only when there are no results; EmptyState.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results.
+
+## UiPageArticle  (pages)
+Article template: cover, post body, sticky table of contents, share row and related posts.
+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).
+- cover: Cover image area with title and author line; a gradient Card or LazyImage.
+- body: Article text; Heading, Text, Code, Alert.
+- toc: Sticky table of contents; Card with a list of anchor links.
+- share: Share and reaction row; Button, IconButton, CopyButton.
+- related: Related posts; Card grid.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Body, share and related share the main column; the table of contents stays visible on the right while the body scrolls and drops under the body below 860 px.
+
+## UiPageChangelog  (pages)
+Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe 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).
+- filters: Tag filter; FilterChips, SearchInput.
+- timeline: Releases grouped by version; Card, Chip, Divider.
+- subscribe: Sticky subscribe card; Card, TextField, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Filters and timeline share the main column; the subscribe card is a sticky side column.
+
+## UiPageHelp  (pages)
+Help center home: search, category grid, popular articles and a contact 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).
+- search: Large search field; SearchInput.
+- categories: Category tiles; Card with IconTile.
+- popular: Popular articles list; Card.
+- contact: Contact options; Card, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- Popular articles and contact share a row and wrap on narrow screens. For a single question list use PageFaq.
+
+## UiPageStates  (pages)
+State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.
+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).
+- empty: Empty list; EmptyState with a primary action.
+- noresults: No search results; EmptyState with a reset action.
+- forbidden: No permission; EmptyState with a request-access action.
+- offline: Offline; DataState state="offline".
+- error: Error with retry; DataState state="error".
+- loading: Loading; Skeleton or DataState state="loading".
+- success: Success confirmation; Alert tone="success" or EmptyState.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- The first six slots sit in two rows of auto-fit cards; success spans the full width.
+
+## UiPageLegal  (pages)
+Legal document template: last-updated line, sticky table of contents, numbered sections and a contact 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).
+- meta: Version, last-updated date and print or download buttons; Chip, Button.
+- toc: Sticky table of contents; Card with anchor links.
+- document: Document sections; Card, Heading, Text.
+- contact: Questions card; Card, Button.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- The table of contents sits left of the document and stacks above it under 860 px.
+
+## UiPageLocations  (pages)
+Locations template: filters, a scrollable list of places and a sticky map 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 category filters; SearchInput, FilterChips.
+- list: Places list; Card rows.
+- map: Map panel; Map, or a gradient placeholder.
+Notes:
+- Place inside AppShell; fill only the slots you need.
+- The list is a fixed-width column left of the map; under 860 px the map goes below the list.
+
+## UiPageBookingFlow  (pages)
+Booking flow template: stepper, the active step content, back and continue buttons and a sticky 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).
+- steps: Progress; Stepper.
+- content: Content of the active step (search, pick, guests, confirm); Card, DatePicker, OptionCards, NumberInput.
+- nav: Back and Continue buttons.
+- summary: Booking summary; Card, Descriptions.
+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.
+
 ## 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, 190 components and 23 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, 203 components and 36 page templates.
 
-Version 0.7.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.9.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -234,6 +234,19 @@ Ready layouts with named slots.
 - 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.
+- UiPageCalendar: Calendar template: view switch, time grid, mini calendar and event details.
+- UiPageKanban: Kanban template: filters, task board columns and a card detail panel.
+- UiPageBilling: Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.
+- UiPageTeam: Team template: member stats, members table, roles and permissions matrix, and an invite form.
+- UiPageIntegrations: Integrations template: connection cards, API keys and webhooks.
+- UiPageSearch: Search template: query field, filter sidebar, result groups and an empty state.
+- UiPageArticle: Article template: cover, post body, sticky table of contents, share row and related posts.
+- UiPageChangelog: Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe card.
+- UiPageHelp: Help center home: search, category grid, popular articles and a contact card.
+- UiPageStates: State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.
+- 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.
 - 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.
@@ -242,6 +255,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)
+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)
 
 Full API of every component: llms-full.txt