@ziyarago/ui 0.6.0 → 0.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.6.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, 184 components and 17 page templates.",
+  "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.",
   "keywords": [
     "ui",
     "design-system",
@@ -95,7 +95,7 @@
   "files": [
     "dist",
     "types",
-    "assets",
+    "assets/fonts",
     "tokens",
     "README.md",
     "LICENSE",

package/src/core/pages.js

@@ -37,7 +37,13 @@ const T = Object.fromEntries([
   page('PageOrder', ['header', 'status', 'items', 'shipping', 'side'], ['col', 'header', 'status', ['two', ['items', 'shipping'], ['side']]]),
   page('PageAccount', ['header', 'tabs', 'panel'], ['col', 'header', 'tabs', 'panel']),
   page('PagePricing', ['header', 'toggle', 'plans', 'faq'], ['col', 'header', 'toggle', 'plans', 'faq']),
-  page('PageFaq', ['header', 'search', 'cats', 'answers', 'contact'], ['col', 'header', 'search', ['wrap', ['cats'], ['answers'], 200], 'contact'])
+  page('PageFaq', ['header', 'search', 'cats', 'answers', 'contact'], ['col', 'header', 'search', ['wrap', ['cats'], ['answers'], 200], 'contact']),
+  page('PageLanding', ['hero', 'logos', 'features', 'proof', 'pricing', 'cta', 'footer'], ['col', 'hero', 'logos', 'features', 'proof', 'pricing', 'cta', 'footer']),
+  page('PageOnboarding', ['header', 'progress', 'steps', 'checklist', 'tips'], ['col', 'header', 'progress', ['two', ['steps', 'checklist'], ['tips']]]),
+  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'])
 ]);
 
 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', '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', 'PageNotifications', 'PageInbox', 'PageCheckout', 'PageOnboarding', 'PageLanding', 'PageAuth', 'PageStatus'] },
 ];
 
 export const groupOf = name => GROUPS.find(g => g.names.includes(name));

package/src/meta/pages.js

@@ -191,6 +191,82 @@ export default {
     },
     notes: [hdrNote],
   },
+  PageLanding: {
+    description: "Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.",
+    props: {},
+    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."],
+  },
+  PageOnboarding: {
+    description: "Onboarding template: progress block, active step content, setup checklist and a column of tips.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "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."],
+  },
+  PageCheckout: {
+    description: "Checkout template: step indicator, cart items, delivery address, payment and an order summary column.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "Summary sits in the side column and drops below the form on narrow screens."],
+  },
+  PageInbox: {
+    description: "Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "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."],
+  },
+  PageNotifications: {
+    description: "Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "Fill empty only when the feed has no rows. Mark all read goes in the actions slot."],
+  },
+  PageAnalytics: {
+    description: "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."],
+  },
   PageAuth: {
     description: 'Sign-in page template without the app shell, as a centered card or a split layout.',
     props: {