@ziyarago/ui 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [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: 196 components, 29 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>196 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>29 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: 196 components and 29 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, 196 components and 29 page templates.
 
-Version 0.7.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.8.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -2401,6 +2401,108 @@ 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.
+
 ## 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, 196 components and 29 page templates.
 
-Version 0.7.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.8.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -234,6 +234,12 @@ 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.
 - 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 +248,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)
 
 Full API of every component: llms-full.txt