@ziyarago/ui 0.7.0 → 0.9.0

package/dist/style.css

@@ -541,6 +541,9 @@
 .zg-ash__media[style*="url("]::after{display:none}
 .zg-ash--light .zg-ash__media{--ash-acc:oklch(.72 .08 80)}
 
+/* page templates: sticky region */
+.zg-pg__two--sticky{align-items:stretch}.zg-pg__stick{position:sticky;inset-block-start:16px;align-self:flex-start;width:100%}
+
 
 /* ./sizes/typography.css */
 /* size overrides for the typography group. Only [data-size] selectors, see the size scale at the end of tokens.css */

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.9.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, 203 components and 36 page templates.",
   "keywords": [
     "ui",
     "design-system",

package/src/core/pages.js

@@ -3,15 +3,15 @@
 // React: <UiPageDashboard title="Dashboard" kpis={<…/>} />
 import { cx } from './components.js';
 
-const region = (h, id, kids) => (kids == null || (Array.isArray(kids) && !kids.length)) ? null : h('div', { key: id, class: 'zg-pg__r', 'data-slot': id }, kids);
+const region = (h, id, kids, stick) => (kids == null || (Array.isArray(kids) && !kids.length)) ? null : h('div', { key: id, class: stick ? 'zg-pg__r zg-pg__stick' : 'zg-pg__r', 'data-slot': id }, kids);
 
 const draw = (h, node, ctx) => {
-  if (typeof node === 'string') return node === 'header' ? ctx.header() : region(h, node, ctx.slots[node]);
-  const [kind, ...a] = node, go = n => draw(h, n, ctx);
+  if (typeof node === 'string') return node === 'header' ? ctx.header() : region(h, node, ctx.slots[node], ctx.stick === node);
+  const [kind, ...a] = node, opt = kind === 'two' ? a[2] : kind === 'wrap' ? a[3] : null, st = typeof opt === 'string' && opt.startsWith('sticky:') ? opt.slice(7) : null, go = n => draw(h, n, st ? { ...ctx, stick: st } : ctx), cls = st ? 'zg-pg__two zg-pg__two--sticky' : 'zg-pg__two';
   if (kind === 'col') return h('div', { class: 'zg-pg' }, ...a.map(go));
   if (kind === 'auto') { const min = a.shift(); return h('div', { class: 'zg-pg__auto', style: { '--min': min + 'px' } }, ...a.map(go)); }
-  if (kind === 'two') return h('div', { class: 'zg-pg__two' }, h('div', { class: 'zg-pg__main' }, ...a[0].map(go)), h('div', { class: 'zg-pg__side' }, ...a[1].map(go)));
-  if (kind === 'wrap') return h('div', { class: 'zg-pg__two' }, h('div', { class: 'zg-pg__aside', style: { flexBasis: (a[2] || 300) + 'px' } }, ...a[0].map(go)), h('div', { class: 'zg-pg__main' }, ...a[1].map(go)));
+  if (kind === 'two') return h('div', { class: cls }, h('div', { class: 'zg-pg__main' }, ...a[0].map(go)), h('div', { class: 'zg-pg__side' }, ...a[1].map(go)));
+  if (kind === 'wrap') return h('div', { class: cls }, h('div', { class: 'zg-pg__aside', style: { flexBasis: (a[2] || 300) + 'px' } }, ...a[0].map(go)), h('div', { class: 'zg-pg__main' }, ...a[1].map(go)));
   return null;
 };
 
@@ -43,7 +43,20 @@ 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]]),
+  page('PageArticle', ['header', 'cover', 'body', 'toc', 'share', 'related'], ['col', 'header', 'cover', ['two', ['body', 'share', 'related'], ['toc'], 'sticky:toc']]),
+  page('PageChangelog', ['header', 'filters', 'timeline', 'subscribe'], ['col', 'header', ['two', ['filters', 'timeline'], ['subscribe'], 'sticky:subscribe']]),
+  page('PageHelp', ['header', 'search', 'categories', 'popular', 'contact'], ['col', 'header', 'search', 'categories', ['auto', 360, 'popular', 'contact']]),
+  page('PageStates', ['header', 'empty', 'noresults', 'forbidden', 'offline', 'error', 'loading', 'success'], ['col', 'header', ['auto', 300, 'empty', 'noresults', 'forbidden'], ['auto', 300, 'offline', 'error', 'loading'], 'success']),
+  page('PageLegal', ['header', 'meta', 'toc', 'document', 'contact'], ['col', 'header', 'meta', ['wrap', ['toc'], ['document', 'contact'], 260, 'sticky:toc']]),
+  page('PageLocations', ['header', 'filters', 'list', 'map'], ['col', 'header', 'filters', ['wrap', ['list'], ['map'], 380, 'sticky:map']]),
+  page('PageBookingFlow', ['header', 'steps', 'content', 'nav', 'summary'], ['col', 'header', 'steps', ['two', ['content', 'nav'], ['summary'], 'sticky:summary']])
 ]);
 
 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', 'PageArticle', 'PageChangelog', 'PageHelp', 'PageStates', 'PageLegal', 'PageLocations', 'PageBookingFlow', '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,164 @@ 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."],
+  },
+  PageArticle: {
+    description: "Article template: cover, post body, sticky table of contents, share row and related posts.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "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."],
+  },
+  PageChangelog: {
+    description: "Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe card.",
+    props: header,
+    slots: {
+      ...headSlots,
+      filters: "Tag filter; FilterChips, SearchInput.",
+      timeline: "Releases grouped by version; Card, Chip, Divider.",
+      subscribe: "Sticky subscribe card; Card, TextField, Button.",
+    },
+    notes: [hdrNote, "Filters and timeline share the main column; the subscribe card is a sticky side column."],
+  },
+  PageHelp: {
+    description: "Help center home: search, category grid, popular articles and a contact card.",
+    props: header,
+    slots: {
+      ...headSlots,
+      search: "Large search field; SearchInput.",
+      categories: "Category tiles; Card with IconTile.",
+      popular: "Popular articles list; Card.",
+      contact: "Contact options; Card, Button.",
+    },
+    notes: [hdrNote, "Popular articles and contact share a row and wrap on narrow screens. For a single question list use PageFaq."],
+  },
+  PageStates: {
+    description: "State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "The first six slots sit in two rows of auto-fit cards; success spans the full width."],
+  },
+  PageLegal: {
+    description: "Legal document template: last-updated line, sticky table of contents, numbered sections and a contact card.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "The table of contents sits left of the document and stacks above it under 860 px."],
+  },
+  PageLocations: {
+    description: "Locations template: filters, a scrollable list of places and a sticky map panel.",
+    props: header,
+    slots: {
+      ...headSlots,
+      filters: "Search and category filters; SearchInput, FilterChips.",
+      list: "Places list; Card rows.",
+      map: "Map panel; Map, or a gradient placeholder.",
+    },
+    notes: [hdrNote, "The list is a fixed-width column left of the map; under 860 px the map goes below the list."],
+  },
+  PageBookingFlow: {
+    description: "Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.",
+    props: header,
+    slots: {
+      ...headSlots,
+      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: [hdrNote, "Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px."],
+  },
   PageAuth: {
     description: 'Sign-in page template without the app shell, as a centered card or a split layout.',
     props: {