@ziyarago/ui 0.7.0 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.7.0",
-  "description": "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.8.0",
+  "description": "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.",
   "keywords": [
     "ui",
     "design-system",

package/src/core/pages.js

@@ -43,7 +43,13 @@ const T = Object.fromEntries([
   page('PageCheckout', ['header', 'steps', 'items', 'address', 'payment', 'summary'], ['col', 'header', 'steps', ['two', ['items', 'address', 'payment'], ['summary']]]),
   page('PageInbox', ['header', 'filters', 'list', 'thread', 'composer', 'customer'], ['col', 'header', ['wrap', ['filters', 'list'], [['two', ['thread', 'composer'], ['customer']]], 320]]),
   page('PageNotifications', ['header', 'filters', 'feed', 'empty'], ['col', 'header', 'filters', 'feed', 'empty']),
-  page('PageAnalytics', ['header', 'period', 'kpis', 'trend', 'breakdown', 'table'], ['col', 'header', 'period', 'kpis', ['auto', 420, 'trend', 'breakdown'], 'table'])
+  page('PageAnalytics', ['header', 'period', 'kpis', 'trend', 'breakdown', 'table'], ['col', 'header', 'period', 'kpis', ['auto', 420, 'trend', 'breakdown'], 'table']),
+  page('PageCalendar', ['header', 'toolbar', 'grid', 'mini', 'details'], ['col', 'header', 'toolbar', ['two', ['grid'], ['mini', 'details']]]),
+  page('PageKanban', ['header', 'filters', 'board', 'detail'], ['col', 'header', 'filters', ['two', ['board'], ['detail']]]),
+  page('PageBilling', ['header', 'plan', 'usage', 'invoices', 'methods', 'upgrade'], ['col', 'header', ['two', ['plan', 'usage', 'invoices'], ['methods', 'upgrade']]]),
+  page('PageTeam', ['header', 'stats', 'members', 'roles', 'invite'], ['col', 'header', 'stats', ['two', ['members', 'roles'], ['invite']]]),
+  page('PageIntegrations', ['header', 'filters', 'connections', 'keys', 'webhooks'], ['col', 'header', 'filters', 'connections', ['auto', 420, 'keys', 'webhooks']]),
+  page('PageSearch', ['header', 'search', 'filters', 'results', 'empty'], ['col', 'header', 'search', ['wrap', ['filters'], ['results', 'empty'], 260]])
 ]);
 
 T.PageAuth = { slots: ['background', 'logo', 'aside', 'form', 'footer'], render: ({ C, h, props: p, slots: s }) => {

package/src/meta/groups.js

@@ -10,7 +10,7 @@ export const GROUPS = [
   { id: 'navigation', title: 'Navigation', blurb: 'Menus, tabs and paging.', names: ['TopNav', 'SideNav', 'SubNav', 'Tabs', 'PillTabs', 'Breadcrumbs', 'Pagination', 'Accordion'] },
   { id: 'media', title: 'Media and icons', blurb: 'Avatars, images, maps and icons.', names: ['Avatar', 'Icon', 'LazyImage', 'Gallery', 'Carousel', 'Map', 'ProfileHeader', 'ChatAi'] },
   { id: 'domain', title: 'Domain', blurb: 'Umrah, Hajj, hotel and CRM blocks.', names: ['HotelCard', 'TourCard', 'PrayerTimes', 'RamadanTracker', 'BookingCard', 'GuestCard', 'RoomGrid', 'RoomCalendar', 'LeadCard', 'DealCard', 'PipelineBoard', 'ContactPanel', 'KanbanColumn', 'KanbanCard', 'CallRow', 'CallCard', 'IncomingCall', 'AuthSplit', 'AuthShowcase', 'SocialAuth'] },
-  { id: 'pages', title: 'Page templates', blurb: 'Ready layouts with named slots.', names: ['PageDashboard', 'PagePatterns', 'PageCrm', 'PageBookings', 'PageCatalog', 'PageDetail', 'PageSettings', 'PageUserList', 'PageProfile', 'PageForm', 'PageOrder', 'PageAccount', 'PagePricing', 'PageFaq', 'PageAnalytics', 'PageNotifications', 'PageInbox', 'PageCheckout', 'PageOnboarding', 'PageLanding', 'PageAuth', 'PageStatus'] },
+  { id: 'pages', title: 'Page templates', blurb: 'Ready layouts with named slots.', names: ['PageDashboard', 'PagePatterns', 'PageCrm', 'PageBookings', 'PageCatalog', 'PageDetail', 'PageSettings', 'PageUserList', 'PageProfile', 'PageForm', 'PageOrder', 'PageAccount', 'PagePricing', 'PageFaq', 'PageAnalytics', 'PageCalendar', 'PageKanban', 'PageBilling', 'PageTeam', 'PageIntegrations', 'PageSearch', 'PageNotifications', 'PageInbox', 'PageCheckout', 'PageOnboarding', 'PageLanding', 'PageAuth', 'PageStatus'] },
 ];
 
 export const groupOf = name => GROUPS.find(g => g.names.includes(name));

package/src/meta/pages.js

@@ -267,6 +267,78 @@ export default {
     },
     notes: [hdrNote, "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."],
   },
+  PageCalendar: {
+    description: "Calendar template: view switch, time grid, mini calendar and event details.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "The grid sits beside the mini calendar and details; they stack under 860 px."],
+  },
+  PageKanban: {
+    description: "Kanban template: filters, task board columns and a card detail panel.",
+    props: header,
+    slots: {
+      ...headSlots,
+      filters: "SearchInput, FilterChips, Select.",
+      board: "Columns with cards; KanbanColumn, KanbanCard.",
+      detail: "Selected card; Card, Descriptions, Checkbox, Timeline.",
+    },
+    notes: [hdrNote, "Board scrolls horizontally inside its area; detail goes below it under 860 px."],
+  },
+  PageBilling: {
+    description: "Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "Plan, usage and invoices share the main column; methods and upgrade form the side column."],
+  },
+  PageTeam: {
+    description: "Team template: member stats, members table, roles and permissions matrix, and an invite form.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "Members and roles share the main column; the invite form is the side column."],
+  },
+  PageIntegrations: {
+    description: "Integrations template: connection cards, API keys and webhooks.",
+    props: header,
+    slots: {
+      ...headSlots,
+      filters: "SearchInput, FilterChips.",
+      connections: "IntegrationCard grid.",
+      keys: "Keys; DataTable with CopyButton and IconButton.",
+      webhooks: "Webhooks list; Card, Switch, Chip.",
+    },
+    notes: [hdrNote, "Keys and webhooks share a row and wrap on narrow screens."],
+  },
+  PageSearch: {
+    description: "Search template: query field, filter sidebar, result groups and an empty state.",
+    props: header,
+    slots: {
+      ...headSlots,
+      search: "SearchInput, Tabs.",
+      filters: "Filters; Card, Checkbox, Select.",
+      results: "Result groups; Card, Chip, Divider.",
+      empty: "Shown only when there are no results; EmptyState.",
+    },
+    notes: [hdrNote, "Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results."],
+  },
   PageAuth: {
     description: 'Sign-in page template without the app shell, as a centered card or a split layout.',
     props: {