@ziyarago/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.5.0](https://github.com/ziyarago/ui/compare/v0.4.0...v0.5.0) (2026-10-21)
+
+### Features
+
+* AuthShowcase login layouts (photo, light, tint) and PageAuth variants ([4ea5503](https://github.com/ziyarago/ui/commit/4ea5503e223f2c651292372be91987538f0517c8))
+
 ## [0.4.0](https://github.com/ziyarago/ui/compare/v0.3.0...v0.4.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: 182 components, 17 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: 183 components, 17 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,7 +12,7 @@ Glass design system for Vue 3, Nuxt and React: 182 components, 17 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>182 components with props and live examples</sub></td>
+    <td><img src="https://raw.githubusercontent.com/ziyarago/ui/main/docs/images/components.png" alt="Component catalog"><br><sub>183 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>17 page templates</sub></td>
   </tr>
   <tr>
@@ -24,7 +24,7 @@ Glass design system for Vue 3, Nuxt and React: 182 components, 17 page templates
 Files:
 
 ```
-src/core/        components*.js, pages.js: 182 components and 17 page templates as { state, slots, render(ctx) }; no framework imports
+src/core/        components*.js, pages.js: 183 components and 17 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, 182 components and 17 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, 183 components and 17 page templates.
 
-Version 0.4.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.5.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -2110,6 +2110,27 @@ Slots:
 Notes:
 - logo and aside are props in both Vue and React (pass a VNode / element).
 
+## UiAuthShowcase  (domain)
+Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.
+Props:
+- `variant`: 'photo' | 'light' | 'tint' = "photo". 'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent.
+- `title` (required): string. Form heading.
+- `subtitle`: string. Text under the heading.
+- `logo`: VNode. Logo node above the heading.
+- `footer`: VNode. Content under the fields, for example "No account? Sign up".
+- `image`: string. URL of the media image. Without it the panel shows an accent gradient.
+- `headline`: string. Large text on the media panel (photo and tint).
+- `caption`: string. Small text on the media panel (photo) or inside the glass bar (light, tint).
+- `quote`: string. Line at the bottom of the media panel; photo only.
+- `chips`: string[]. Pill labels inside the glass bar; light and tint.
+- `people`: { name: string; src?: string }[]. Avatars: floating on the photo, stacked in the proof pill.
+- `proof`: string. Social-proof title, e.g. "Join 20k+ users"; light and tint. Shows the pill under the form.
+- `proofHint`: string. Second line of the proof pill.
+Slots:
+- default: Form fields and buttons. React passes them as children.
+Notes:
+- logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it).
+
 ## UiPageDashboard  (pages)
 Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.
 Props:
@@ -2351,7 +2372,15 @@ Notes:
 ## UiPageAuth  (pages)
 Sign-in page template without the app shell, as a centered card or a split layout.
 Props:
-- `layout`: 'card' | 'split' = "card". 'split' uses AuthSplit with a side panel; anything else renders a centered AuthLayout card over the background.
+- `layout`: 'card' | 'split' | 'photo' | 'light' | 'tint' = "card". 'split' uses AuthSplit with a side panel. 'photo', 'light' and 'tint' use AuthShowcase with a media panel. Anything else renders a centered AuthLayout card over the background.
+- `image`: string. Media image URL; photo, light and tint layouts.
+- `headline`: string. Large text on the media panel; photo and tint.
+- `caption`: string. Small text on the media panel or glass bar.
+- `quote`: string. Bottom line of the media panel; photo only.
+- `chips`: string[]. Pill labels in the glass bar; light and tint.
+- `people`: { name: string; src?: string }[]. Avatars on the media panel or in the proof pill.
+- `proof`: string. Social-proof title under the form; light and tint.
+- `proofHint`: string. Second line of the proof pill.
 - `title`: string. Form heading.
 - `subtitle`: string. Text under the heading.
 Slots:

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, 182 components and 17 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, 183 components and 17 page templates.
 
-Version 0.4.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.5.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -214,6 +214,7 @@ Umrah, Hajj, hotel and CRM blocks.
 - UiCallCard: Call recording card with status badge, a playback progress bar and duration.
 - UiIncomingCall: Glass banner for an incoming call with Decline and Answer buttons.
 - UiAuthSplit: Two-column sign-in layout with a brand panel on the left and the form on the right.
+- UiAuthShowcase: Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.
 
 ## Page templates
 Ready layouts with named slots.

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.4.0",
+ "version": "0.5.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -251,7 +251,8 @@
     "CallRow",
     "CallCard",
     "IncomingCall",
-    "AuthSplit"
+    "AuthSplit",
+    "AuthShowcase"
    ]
   },
   {
@@ -2273,7 +2274,7 @@
     "id": "auth",
     "label": "Authentication (6)",
     "component": "UiPageAuth",
-    "description": "Six sign-in screens in two layouts: centered card and split with a side panel. Always dark theme.",
+    "description": "Seven sign-in screens in five layouts: centered card, split with a side panel, and three with a media panel (photo, light, tint).",
     "shell": false,
     "slots": [
      {
@@ -10050,6 +10051,79 @@
     "logo and aside are props in both Vue and React (pass a VNode / element)."
    ]
   },
+  {
+   "name": "AuthShowcase",
+   "tag": "UiAuthShowcase",
+   "group": "domain",
+   "description": "Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.",
+   "props": {
+    "variant": {
+     "type": "'photo' | 'light' | 'tint'",
+     "values": [
+      "photo",
+      "light",
+      "tint"
+     ],
+     "default": "photo",
+     "description": "'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent."
+    },
+    "title": {
+     "type": "string",
+     "required": true,
+     "description": "Form heading."
+    },
+    "subtitle": {
+     "type": "string",
+     "description": "Text under the heading."
+    },
+    "logo": {
+     "type": "VNode",
+     "description": "Logo node above the heading."
+    },
+    "footer": {
+     "type": "VNode",
+     "description": "Content under the fields, for example \"No account? Sign up\"."
+    },
+    "image": {
+     "type": "string",
+     "description": "URL of the media image. Without it the panel shows an accent gradient."
+    },
+    "headline": {
+     "type": "string",
+     "description": "Large text on the media panel (photo and tint)."
+    },
+    "caption": {
+     "type": "string",
+     "description": "Small text on the media panel (photo) or inside the glass bar (light, tint)."
+    },
+    "quote": {
+     "type": "string",
+     "description": "Line at the bottom of the media panel; photo only."
+    },
+    "chips": {
+     "type": "string[]",
+     "description": "Pill labels inside the glass bar; light and tint."
+    },
+    "people": {
+     "type": "{ name: string; src?: string }[]",
+     "description": "Avatars: floating on the photo, stacked in the proof pill."
+    },
+    "proof": {
+     "type": "string",
+     "description": "Social-proof title, e.g. \"Join 20k+ users\"; light and tint. Shows the pill under the form."
+    },
+    "proofHint": {
+     "type": "string",
+     "description": "Second line of the proof pill."
+    }
+   },
+   "slots": {
+    "default": "Form fields and buttons. React passes them as children."
+   },
+   "notes": [
+    "logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it)."
+   ]
+  },
   {
    "name": "PageDashboard",
    "tag": "UiPageDashboard",
@@ -10548,13 +10622,56 @@
    "props": {
     "layout": {
      "forwarded": true,
-     "type": "'card' | 'split'",
+     "type": "'card' | 'split' | 'photo' | 'light' | 'tint'",
      "values": [
       "card",
-      "split"
+      "split",
+      "photo",
+      "light",
+      "tint"
      ],
      "default": "card",
-     "description": "'split' uses AuthSplit with a side panel; anything else renders a centered AuthLayout card over the background."
+     "description": "'split' uses AuthSplit with a side panel. 'photo', 'light' and 'tint' use AuthShowcase with a media panel. Anything else renders a centered AuthLayout card over the background."
+    },
+    "image": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Media image URL; photo, light and tint layouts."
+    },
+    "headline": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Large text on the media panel; photo and tint."
+    },
+    "caption": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Small text on the media panel or glass bar."
+    },
+    "quote": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Bottom line of the media panel; photo only."
+    },
+    "chips": {
+     "forwarded": true,
+     "type": "string[]",
+     "description": "Pill labels in the glass bar; light and tint."
+    },
+    "people": {
+     "forwarded": true,
+     "type": "{ name: string; src?: string }[]",
+     "description": "Avatars on the media panel or in the proof pill."
+    },
+    "proof": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Social-proof title under the form; light and tint."
+    },
+    "proofHint": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Second line of the proof pill."
     },
     "title": {
      "forwarded": true,

package/dist/style.css

@@ -494,6 +494,47 @@
 /* CommandPalette active row, dialog focus */
 .zg-menu__i.is-active,.zg-menu__i[aria-selected="true"]{background:var(--zg-s2)}
 .zg-modal:focus,.zg-sheet:focus,.zg-fsd:focus,.zg-saver:focus{outline:0}
+/* AuthShowcase: photo (dark framed card), light (gradient card + proof pill + glass caption), tint (coloured panel, pill fields) */
+.zg-ash{min-height:100%;padding:clamp(12px,3vw,40px);display:grid;place-items:center;--ash-r:28px;--ash-acc:var(--zg-brand)}
+.zg-ash--tint{--ash-acc:oklch(.7 .13 215)}
+.zg-ash__title{margin:0;font:300 clamp(28px,3.4vw,40px)/1.1 var(--zg-font);letter-spacing:-.03em}
+.zg-ash__sub{margin:10px 0 0;color:var(--zg-text-2);line-height:1.55}
+.zg-ash__head{display:flex;flex-direction:column;gap:6px}
+.zg-ash__fields{display:flex;flex-direction:column;gap:14px;margin-top:22px}
+.zg-ash__foot{margin-top:18px;color:var(--zg-text-2);font-size:14px;text-align:center}
+.zg-ash__form{width:100%;max-width:400px;margin-inline:auto}
+.zg-ash__media{position:relative;overflow:hidden;background:linear-gradient(150deg,color-mix(in oklch,var(--ash-acc) 55%,var(--zg-s2)),color-mix(in oklch,var(--ash-acc) 15%,var(--zg-s1)));background-size:cover;background-position:center}
+.zg-ash--photo .zg-ash__frame{width:100%;max-width:1160px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:var(--ash-r);overflow:hidden;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1);min-height:560px}
+.zg-ash--photo .zg-ash__media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in oklch,var(--zg-bg) 15%,transparent),var(--zg-s1) 100%),linear-gradient(0deg,color-mix(in oklch,var(--zg-bg) 70%,transparent),transparent 55%)}
+.zg-ash__copy{position:relative;z-index:1;padding:clamp(24px,5vw,64px);padding-top:clamp(60px,12vw,150px);max-width:480px}
+.zg-ash__copy h2{margin:0 0 14px;font:500 clamp(30px,4vw,46px)/1.08 var(--zg-font);letter-spacing:-.03em}
+.zg-ash__copy p{margin:0;color:var(--zg-text-2);font-size:18px;line-height:1.5}
+.zg-ash__float{position:absolute;z-index:1;border-radius:50%;box-shadow:0 0 28px color-mix(in oklch,var(--zg-brand) 55%,transparent)}
+.zg-ash__float--a{inset-inline-start:7%;top:60%}.zg-ash__float--b{inset-inline-start:52%;top:50%}.zg-ash__float--c{inset-inline-start:36%;top:76%}
+@media(prefers-reduced-motion:no-preference){.zg-ash__float{animation:zg-ash-bob 6s ease-in-out infinite alternate}.zg-ash__float--b{animation-delay:-2s}.zg-ash__float--c{animation-delay:-4s}}
+@keyframes zg-ash-bob{to{transform:translateY(-10px)}}
+.zg-ash__quote{position:absolute;z-index:1;inset-inline-start:clamp(24px,5vw,64px);bottom:28px;color:var(--zg-text-1)}
+.zg-ash--photo .zg-ash__side{display:grid;place-items:center;padding:clamp(24px,5vw,56px)}
+.zg-ash__grid{width:100%;max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
+.zg-ash__col{display:flex;flex-direction:column;gap:16px;min-width:0}
+.zg-ash__card{flex:1;display:grid;align-content:center;padding:clamp(24px,4vw,48px);border-radius:var(--ash-r);background:linear-gradient(165deg,var(--zg-s1) 40%,color-mix(in oklch,var(--ash-acc) 26%,var(--zg-s1)));box-shadow:var(--zg-rim)}
+.zg-ash--light .zg-ash__head,.zg-ash--tint .zg-ash__head{align-items:center;text-align:center}
+.zg-ash--tint .zg-ash__card{background:var(--zg-s1)}
+.zg-ash--tint .zg-ash__title{font-weight:400}
+.zg-ash__proof{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--ash-r);background:var(--zg-s1);box-shadow:var(--zg-rim)}
+.zg-ash__stack{display:inline-flex}.zg-ash__stack .zg-avatar{margin-inline-end:-10px;box-shadow:0 0 0 2px var(--zg-s1)}
+.zg-ash__proofT{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;margin-inline-start:10px}.zg-ash__proofT span{color:var(--zg-text-3);font-size:13px}
+.zg-ash--light .zg-ash__grid>.zg-ash__media,.zg-ash--tint .zg-ash__grid>.zg-ash__media{border-radius:var(--ash-r);min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--zg-rim)}
+.zg-ash__mh{position:absolute;inset-inline:0;top:0;margin:0;padding:clamp(20px,3vw,36px);font:400 clamp(24px,2.8vw,34px)/1.2 var(--zg-font);color:#fff;text-shadow:0 1px 16px rgb(0 0 0/.25)}
+.zg-ash__glass{position:relative;margin:12px;padding:18px;border-radius:calc(var(--ash-r) - 8px);display:flex;flex-direction:column;gap:12px;background:color-mix(in oklch,var(--zg-bg) 38%,transparent);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--zg-rim);color:var(--zg-text-1)}
+.zg-ash__glass p{margin:0;color:var(--zg-text-2)}
+.zg-ash__chips{display:flex;gap:10px;flex-wrap:wrap}
+.zg-ash__chip{flex:1;text-align:center;padding:14px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--zg-text-1) 40%,transparent)}
+@media(max-width:860px){.zg-ash--photo .zg-ash__frame,.zg-ash__grid{grid-template-columns:1fr}.zg-ash--photo .zg-ash__media{min-height:300px}.zg-ash__grid>.zg-ash__media{min-height:320px!important;order:2}}
+/* default media art when no image is given */
+.zg-ash__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 24%,color-mix(in oklch,#fff 55%,transparent) 0,transparent 30%),radial-gradient(circle at 18% 78%,color-mix(in oklch,var(--ash-acc) 70%,transparent) 0,transparent 38%),conic-gradient(from 210deg at 62% 48%,transparent 0 .08turn,color-mix(in oklch,#fff 22%,transparent) .1turn .18turn,transparent .2turn 1turn)}
+.zg-ash__media[style*="url("]::after{display:none}
+.zg-ash--light .zg-ash__media{--ash-acc:oklch(.72 .08 80)}
 
 
 /* ./sizes/typography.css */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.4.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, 182 components and 17 page templates.",
+  "version": "0.5.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, 183 components and 17 page templates.",
   "keywords": [
     "ui",
     "design-system",

package/src/core/components3.js

@@ -30,6 +30,27 @@ export const more3 = {
   Snackbar: { render: ({ h, props: p, children }) => h('div', { class: cx('zg-snack', p.variant === 'tonal' && 'zg-snack--tonal', tc(p.tone)), role: 'status' }, h('span', { style: { flex: 1 } }, ...children), p.action ? h('button', { type: 'button', onClick: p.onAction, style: { color: p.tone === 'success' ? 'var(--zg-green)' : 'var(--zg-red)' } }, p.action) : null, p.onClose ? h('button', { type: 'button', onClick: p.onClose, 'aria-label': t('Snackbar', 'close') }, icon(h, 'x', 14)) : null) },
   TourPopover: { render: ({ C, h, props: p }) => h('div', { class: 'zg-tour' }, h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h('b', { style: { flex: 1, fontSize: '16px' } }, p.title), h('button', { type: 'button', 'aria-label': t('TourPopover', 'close'), class: 'zg-ibtn zg-ibtn--sm zg-ibtn--ghost', onClick: p.onClose }, icon(h, 'x', 14))), h('span', { style: { fontSize: '14px', lineHeight: 1.5 } }, p.text), h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, h('span', { class: 'zg-hint zg-mono' }, p.step || ''), h('div', { style: { display: 'flex', gap: '8px' } }, p.onBack ? h(C.Button, { size: 'sm', onClick: p.onBack }, t('TourPopover', 'back')) : null, h(C.Button, { size: 'sm', variant: 'primary', onClick: p.onNext }, p.last ? t('TourPopover', 'finish') : t('TourPopover', 'next'))))) },
   ProfileHeader: { render: ({ C, h, props: p, children }) => h('section', { class: 'zg-card zg-glass zg-prof' }, h('div', { class: 'zg-prof__cover', style: { backgroundImage: p.cover ? `url(${p.cover})` : undefined } }), h('div', { class: 'zg-prof__row' }, h('span', { class: 'zg-prof__av' }, h(C.Avatar, { name: p.name, src: p.src, size: 104 })), h('div', { style: { flex: 1, minWidth: '200px', display: 'flex', flexDirection: 'column', gap: '8px' } }, h('b', { style: { fontSize: '22px', fontWeight: 500 } }, p.name), h('div', { class: 'zg-chips', style: { color: 'var(--zg-text-3)', fontSize: '13px' } }, ...(p.meta || []).map(m => h('span', { key: m.label, style: { display: 'inline-flex', gap: '6px', alignItems: 'center' } }, icon(h, m.icon, 14), m.label)))), ...children)) },
+  AuthShowcase: { render: ({ C, h, props: p, children }) => {
+    const v = p.variant === 'light' || p.variant === 'tint' ? p.variant : 'photo';
+    const people = p.people || [];
+    const stack = size => h('span', { class: 'zg-ash__stack' }, ...people.slice(0, 4).map((u, i) => h(C.Avatar, { key: i, name: u.name, src: u.src, size })));
+    const head = h('div', { class: 'zg-ash__head' }, p.logo || null, h('h1', { class: 'zg-ash__title' }, p.title), p.subtitle ? h('p', { class: 'zg-ash__sub' }, p.subtitle) : null);
+    const form = h('div', { class: 'zg-ash__form' }, head, h('div', { class: 'zg-ash__fields' }, ...children), p.footer ? h('div', { class: 'zg-ash__foot' }, p.footer) : null);
+    const art = { backgroundImage: p.image ? 'url(' + p.image + ')' : undefined };
+    if (v === 'photo') {
+      const spots = ['a', 'b', 'c'];
+      return h('div', { class: 'zg-root zg-ash zg-ash--photo' }, h('div', { class: 'zg-ash__frame' },
+        h('section', { class: 'zg-ash__media', style: art }, h('div', { class: 'zg-ash__copy' }, p.headline ? h('h2', null, p.headline) : null, p.caption ? h('p', null, p.caption) : null),
+          ...people.slice(0, 3).map((u, i) => h('span', { key: i, class: 'zg-ash__float zg-ash__float--' + spots[i] }, h(C.Avatar, { name: u.name, src: u.src, size: i === 1 ? 'lg' : 'md' }))),
+          p.quote ? h('small', { class: 'zg-ash__quote' }, p.quote) : null),
+        h('main', { class: 'zg-ash__side' }, form)));
+    }
+    return h('div', { class: 'zg-root zg-ash zg-ash--' + v }, h('div', { class: 'zg-ash__grid' },
+      h('div', { class: 'zg-ash__col' }, h('main', { class: 'zg-ash__card' }, form),
+        p.proof ? h('div', { class: 'zg-ash__proof' }, stack('sm'), h('div', { class: 'zg-ash__proofT' }, h('b', null, p.proof), p.proofHint ? h('span', null, p.proofHint) : null), h(C.IconButton, { icon: 'arrow-up-right', label: p.proof, ghost: true })) : null),
+      h('section', { class: 'zg-ash__media', style: art }, v === 'tint' && p.headline ? h('h2', { class: 'zg-ash__mh' }, p.headline) : null,
+        h('div', { class: 'zg-ash__glass' }, (p.chips || []).length ? h('div', { class: 'zg-ash__chips' }, ...p.chips.map((c, i) => h('span', { key: i, class: 'zg-ash__chip' }, c))) : null, p.caption ? h('p', null, p.caption) : null))));
+  } },
   AuthSplit: { render: ({ h, props: p, children }) => h('div', { class: 'zg-root zg-split2' }, h('aside', { class: 'zg-split2__a' }, p.aside), h('main', { class: 'zg-split2__m' }, h('div', { style: { width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '20px' } }, p.logo || null, h('div', null, h('h1', { style: { margin: 0, font: '300 28px var(--zg-font)', letterSpacing: '-.03em' } }, p.title), p.subtitle ? h('p', { style: { margin: '6px 0 0', color: 'var(--zg-text-2)', lineHeight: 1.5 } }, p.subtitle) : null), ...children))) },
   StatusPage: { state: { email: '' }, render: ({ C, h, props: p, children, state, set }) => { const K = { 404: ['404', t('StatusPage', 'nfTitle'), t('StatusPage', 'nfDesc'), t('StatusPage', 'home')], 401: ['401', t('StatusPage', 'authTitle'), t('StatusPage', 'authDesc'), t('StatusPage', 'home')], maintenance: ['', t('StatusPage', 'mtTitle'), t('StatusPage', 'mtDesc'), t('StatusPage', 'home')], soon: ['', t('StatusPage', 'soonTitle'), t('StatusPage', 'soonDesc'), t('StatusPage', 'notify')] }[p.kind || '404'];
     return h('div', { class: 'zg-es zg-es--page' }, p.codeNode || (K[0] ? h('span', { class: 'zg-num', style: { fontSize: 'clamp(80px,14vw,150px)', lineHeight: 1, color: 'var(--zg-brand-text)' } }, K[0]) : h('span', { class: 'zg-es__ico' }, icon(h, p.kind === 'soon' ? 'rocket' : 'wrench', 28))), p.messageNode || [h('b', { key: 't', style: { fontSize: '24px' } }, p.title || K[1]), h('span', { key: 'd' }, p.description || K[2])], p.actionNode || (p.kind === 'soon' ? h('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', justifyContent: 'center', width: '100%', maxWidth: '420px' } }, h('div', { style: { flex: '1 1 200px' } }, h(C.TextField, { placeholder: p.emailLabel || 'name@email.com', icon: 'mail', modelValue: state.email, onChange: v => set({ email: v }) })), h(C.Button, { variant: 'primary', onClick: () => p.onNotify && p.onNotify(state.email) }, p.notifyLabel || K[3])) : h(C.Button, { variant: 'primary', onClick: p.onAction }, p.actionLabel || K[3])), ...children); } }

package/src/core/pages.js

@@ -42,6 +42,7 @@ const T = Object.fromEntries([
 
 T.PageAuth = { slots: ['background', 'logo', 'aside', 'form', 'footer'], render: ({ C, h, props: p, slots: s }) => {
   const body = [s.form || null, s.footer ? h('div', { class: 'zg-pg__r', 'data-slot': 'footer' }, s.footer) : null];
+  if (['photo', 'light', 'tint'].includes(p.layout)) return h(C.AuthShowcase, { variant: p.layout, title: p.title, subtitle: p.subtitle, logo: s.logo, footer: s.footer, image: p.image, headline: p.headline, caption: p.caption, quote: p.quote, chips: p.chips, people: p.people, proof: p.proof, proofHint: p.proofHint }, s.form || null);
   return p.layout === 'split'
     ? h(C.AuthSplit, { title: p.title, subtitle: p.subtitle, logo: s.logo, aside: s.aside }, ...body)
     : h('div', { class: 'zg-pgauth' }, s.background ? h('div', { class: 'zg-pg__r zg-pgauth__bg', 'data-slot': 'background' }, s.background) : null, h('div', { class: 'zg-pgauth__c' }, h(C.AuthLayout, { title: p.title, subtitle: p.subtitle, logo: s.logo }, ...body)));

package/src/meta/domain.js

@@ -198,6 +198,26 @@ export default {
     },
     events: { decline: 'Decline button clicked.', answer: 'Answer button clicked.' },
   },
+  AuthShowcase: {
+    description: 'Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.',
+    props: {
+      variant: { type: "'photo' | 'light' | 'tint'", values: ['photo', 'light', 'tint'], default: 'photo', description: "'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent." },
+      title: { type: 'string', required: true, description: 'Form heading.' },
+      subtitle: { type: 'string', description: 'Text under the heading.' },
+      logo: { type: 'VNode', description: 'Logo node above the heading.' },
+      footer: { type: 'VNode', description: 'Content under the fields, for example "No account? Sign up".' },
+      image: { type: 'string', description: 'URL of the media image. Without it the panel shows an accent gradient.' },
+      headline: { type: 'string', description: 'Large text on the media panel (photo and tint).' },
+      caption: { type: 'string', description: 'Small text on the media panel (photo) or inside the glass bar (light, tint).' },
+      quote: { type: 'string', description: 'Line at the bottom of the media panel; photo only.' },
+      chips: { type: 'string[]', description: 'Pill labels inside the glass bar; light and tint.' },
+      people: { type: '{ name: string; src?: string }[]', description: 'Avatars: floating on the photo, stacked in the proof pill.' },
+      proof: { type: 'string', description: 'Social-proof title, e.g. "Join 20k+ users"; light and tint. Shows the pill under the form.' },
+      proofHint: { type: 'string', description: 'Second line of the proof pill.' },
+    },
+    slots: { default: 'Form fields and buttons. React passes them as children.' },
+    notes: ['logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it).'],
+  },
   AuthSplit: {
     description: 'Two-column sign-in layout with a brand panel on the left and the form on the right.',
     props: {

package/src/meta/groups.js

@@ -9,7 +9,7 @@ export const GROUPS = [
   { id: 'overlay', title: 'Overlay', blurb: 'Dialogs, sheets and popovers.', names: ['Modal', 'Drawer', 'ConfirmDialog', 'Popconfirm', 'StepDialog', 'FullscreenDialog', 'BottomSheet', 'Actionsheet', 'Popover', 'HoverCard', 'Tooltip', 'Dropdown', 'Menu', 'ContextMenu', 'CommandBar', 'CommandPalette', 'ImageViewer', 'Tour', 'TourPopover', 'Screensaver'] },
   { 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'] },
+  { 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'] },
   { 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'] },
 ];
 

package/src/meta/pages.js

@@ -194,7 +194,15 @@ export default {
   PageAuth: {
     description: 'Sign-in page template without the app shell, as a centered card or a split layout.',
     props: {
-      layout: { forwarded: true, type: "'card' | 'split'", values: ['card', 'split'], default: 'card', description: "'split' uses AuthSplit with a side panel; anything else renders a centered AuthLayout card over the background." },
+      layout: { forwarded: true, type: "'card' | 'split' | 'photo' | 'light' | 'tint'", values: ['card', 'split', 'photo', 'light', 'tint'], default: 'card', description: "'split' uses AuthSplit with a side panel. 'photo', 'light' and 'tint' use AuthShowcase with a media panel. Anything else renders a centered AuthLayout card over the background." },
+      image: { forwarded: true, type: 'string', description: 'Media image URL; photo, light and tint layouts.' },
+      headline: { forwarded: true, type: 'string', description: 'Large text on the media panel; photo and tint.' },
+      caption: { forwarded: true, type: 'string', description: 'Small text on the media panel or glass bar.' },
+      quote: { forwarded: true, type: 'string', description: 'Bottom line of the media panel; photo only.' },
+      chips: { forwarded: true, type: 'string[]', description: 'Pill labels in the glass bar; light and tint.' },
+      people: { forwarded: true, type: '{ name: string; src?: string }[]', description: 'Avatars on the media panel or in the proof pill.' },
+      proof: { forwarded: true, type: 'string', description: 'Social-proof title under the form; light and tint.' },
+      proofHint: { forwarded: true, type: 'string', description: 'Second line of the proof pill.' },
       title: { forwarded: true, type: 'string', description: 'Form heading.' },
       subtitle: { forwarded: true, type: 'string', description: 'Text under the heading.' },
     },

package/src/meta/templates.json

@@ -2030,7 +2030,7 @@
    "route": "auth",
    "label": "Authentication (6)",
    "icon": "lock-keyhole",
-   "desc": "Six sign-in screens in two layouts: centered card and split with a side panel. Always dark theme.",
+   "desc": "Seven sign-in screens in five layouts: centered card, split with a side panel, and three with a media panel (photo, light, tint).",
    "component": "PageAuth",
    "tpl": "TplAuth",
    "shell": false,

package/src/react/index.js

@@ -171,6 +171,7 @@ export const UiSnackbar = C.Snackbar;
 export const UiTourPopover = C.TourPopover;
 export const UiProfileHeader = C.ProfileHeader;
 export const UiAuthSplit = C.AuthSplit;
+export const UiAuthShowcase = C.AuthShowcase;
 export const UiStatusPage = C.StatusPage;
 export const UiValidatedField = C.ValidatedField;
 export const UiFooter = C.Footer;

package/src/styles/components8.css

@@ -45,3 +45,44 @@
 /* CommandPalette active row, dialog focus */
 .zg-menu__i.is-active,.zg-menu__i[aria-selected="true"]{background:var(--zg-s2)}
 .zg-modal:focus,.zg-sheet:focus,.zg-fsd:focus,.zg-saver:focus{outline:0}
+/* AuthShowcase: photo (dark framed card), light (gradient card + proof pill + glass caption), tint (coloured panel, pill fields) */
+.zg-ash{min-height:100%;padding:clamp(12px,3vw,40px);display:grid;place-items:center;--ash-r:28px;--ash-acc:var(--zg-brand)}
+.zg-ash--tint{--ash-acc:oklch(.7 .13 215)}
+.zg-ash__title{margin:0;font:300 clamp(28px,3.4vw,40px)/1.1 var(--zg-font);letter-spacing:-.03em}
+.zg-ash__sub{margin:10px 0 0;color:var(--zg-text-2);line-height:1.55}
+.zg-ash__head{display:flex;flex-direction:column;gap:6px}
+.zg-ash__fields{display:flex;flex-direction:column;gap:14px;margin-top:22px}
+.zg-ash__foot{margin-top:18px;color:var(--zg-text-2);font-size:14px;text-align:center}
+.zg-ash__form{width:100%;max-width:400px;margin-inline:auto}
+.zg-ash__media{position:relative;overflow:hidden;background:linear-gradient(150deg,color-mix(in oklch,var(--ash-acc) 55%,var(--zg-s2)),color-mix(in oklch,var(--ash-acc) 15%,var(--zg-s1)));background-size:cover;background-position:center}
+.zg-ash--photo .zg-ash__frame{width:100%;max-width:1160px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:var(--ash-r);overflow:hidden;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1);min-height:560px}
+.zg-ash--photo .zg-ash__media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in oklch,var(--zg-bg) 15%,transparent),var(--zg-s1) 100%),linear-gradient(0deg,color-mix(in oklch,var(--zg-bg) 70%,transparent),transparent 55%)}
+.zg-ash__copy{position:relative;z-index:1;padding:clamp(24px,5vw,64px);padding-top:clamp(60px,12vw,150px);max-width:480px}
+.zg-ash__copy h2{margin:0 0 14px;font:500 clamp(30px,4vw,46px)/1.08 var(--zg-font);letter-spacing:-.03em}
+.zg-ash__copy p{margin:0;color:var(--zg-text-2);font-size:18px;line-height:1.5}
+.zg-ash__float{position:absolute;z-index:1;border-radius:50%;box-shadow:0 0 28px color-mix(in oklch,var(--zg-brand) 55%,transparent)}
+.zg-ash__float--a{inset-inline-start:7%;top:60%}.zg-ash__float--b{inset-inline-start:52%;top:50%}.zg-ash__float--c{inset-inline-start:36%;top:76%}
+@media(prefers-reduced-motion:no-preference){.zg-ash__float{animation:zg-ash-bob 6s ease-in-out infinite alternate}.zg-ash__float--b{animation-delay:-2s}.zg-ash__float--c{animation-delay:-4s}}
+@keyframes zg-ash-bob{to{transform:translateY(-10px)}}
+.zg-ash__quote{position:absolute;z-index:1;inset-inline-start:clamp(24px,5vw,64px);bottom:28px;color:var(--zg-text-1)}
+.zg-ash--photo .zg-ash__side{display:grid;place-items:center;padding:clamp(24px,5vw,56px)}
+.zg-ash__grid{width:100%;max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
+.zg-ash__col{display:flex;flex-direction:column;gap:16px;min-width:0}
+.zg-ash__card{flex:1;display:grid;align-content:center;padding:clamp(24px,4vw,48px);border-radius:var(--ash-r);background:linear-gradient(165deg,var(--zg-s1) 40%,color-mix(in oklch,var(--ash-acc) 26%,var(--zg-s1)));box-shadow:var(--zg-rim)}
+.zg-ash--light .zg-ash__head,.zg-ash--tint .zg-ash__head{align-items:center;text-align:center}
+.zg-ash--tint .zg-ash__card{background:var(--zg-s1)}
+.zg-ash--tint .zg-ash__title{font-weight:400}
+.zg-ash__proof{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--ash-r);background:var(--zg-s1);box-shadow:var(--zg-rim)}
+.zg-ash__stack{display:inline-flex}.zg-ash__stack .zg-avatar{margin-inline-end:-10px;box-shadow:0 0 0 2px var(--zg-s1)}
+.zg-ash__proofT{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;margin-inline-start:10px}.zg-ash__proofT span{color:var(--zg-text-3);font-size:13px}
+.zg-ash--light .zg-ash__grid>.zg-ash__media,.zg-ash--tint .zg-ash__grid>.zg-ash__media{border-radius:var(--ash-r);min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--zg-rim)}
+.zg-ash__mh{position:absolute;inset-inline:0;top:0;margin:0;padding:clamp(20px,3vw,36px);font:400 clamp(24px,2.8vw,34px)/1.2 var(--zg-font);color:#fff;text-shadow:0 1px 16px rgb(0 0 0/.25)}
+.zg-ash__glass{position:relative;margin:12px;padding:18px;border-radius:calc(var(--ash-r) - 8px);display:flex;flex-direction:column;gap:12px;background:color-mix(in oklch,var(--zg-bg) 38%,transparent);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--zg-rim);color:var(--zg-text-1)}
+.zg-ash__glass p{margin:0;color:var(--zg-text-2)}
+.zg-ash__chips{display:flex;gap:10px;flex-wrap:wrap}
+.zg-ash__chip{flex:1;text-align:center;padding:14px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--zg-text-1) 40%,transparent)}
+@media(max-width:860px){.zg-ash--photo .zg-ash__frame,.zg-ash__grid{grid-template-columns:1fr}.zg-ash--photo .zg-ash__media{min-height:300px}.zg-ash__grid>.zg-ash__media{min-height:320px!important;order:2}}
+/* default media art when no image is given */
+.zg-ash__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 24%,color-mix(in oklch,#fff 55%,transparent) 0,transparent 30%),radial-gradient(circle at 18% 78%,color-mix(in oklch,var(--ash-acc) 70%,transparent) 0,transparent 38%),conic-gradient(from 210deg at 62% 48%,transparent 0 .08turn,color-mix(in oklch,#fff 22%,transparent) .1turn .18turn,transparent .2turn 1turn)}
+.zg-ash__media[style*="url("]::after{display:none}
+.zg-ash--light .zg-ash__media{--ash-acc:oklch(.72 .08 80)}

package/src/vue/index.js

@@ -29,7 +29,7 @@ const wrap = (name, def) => defineComponent({
 });
 for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
 
-export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
+export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
 export const install = app => { for (const [n, c] of Object.entries(C)) app.component('Ui' + n, c); };
 export { fmt, setIconBase, rules } from '../core/index.js';
 export { useUiTheme } from '../theme.js';

package/types/react.d.ts

@@ -236,6 +236,44 @@ export interface UiAuthLayoutProps {
 }
 export const UiAuthLayout: ComponentType<UiAuthLayoutProps>;
 
+/**
+ * Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.
+ * Note: logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it).
+ */
+export interface UiAuthShowcaseProps {
+  /**
+   * 'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent.
+   * @default 'photo'
+   */
+  variant?: 'photo' | 'light' | 'tint';
+  /** Form heading. */
+  title: string;
+  /** Text under the heading. */
+  subtitle?: string;
+  /** Logo node above the heading. */
+  logo?: ReactNode;
+  /** Content under the fields, for example "No account? Sign up". */
+  footer?: ReactNode;
+  /** URL of the media image. Without it the panel shows an accent gradient. */
+  image?: string;
+  /** Large text on the media panel (photo and tint). */
+  headline?: string;
+  /** Small text on the media panel (photo) or inside the glass bar (light, tint). */
+  caption?: string;
+  /** Line at the bottom of the media panel; photo only. */
+  quote?: string;
+  /** Pill labels inside the glass bar; light and tint. */
+  chips?: string[];
+  /** Avatars: floating on the photo, stacked in the proof pill. */
+  people?: { name: string; src?: string }[];
+  /** Social-proof title, e.g. "Join 20k+ users"; light and tint. Shows the pill under the form. */
+  proof?: string;
+  /** Second line of the proof pill. */
+  proofHint?: string;
+  children?: ReactNode;
+}
+export const UiAuthShowcase: ComponentType<UiAuthShowcaseProps>;
+
 /**
  * Two-column sign-in layout with a brand panel on the left and the form on the right.
  * Note: logo and aside are props in both Vue and React (pass a VNode / element).
@@ -3058,11 +3096,51 @@ export const UiPageAccount: ComponentType<UiPageAccountProps>;
  */
 export interface UiPageAuthProps {
   /**
-   * 'split' uses AuthSplit with a side panel; anything else renders a centered AuthLayout card over the background.
+   * 'split' uses AuthSplit with a side panel. 'photo', 'light' and 'tint' use AuthShowcase with a media panel. Anything else renders a centered AuthLayout card over the background.
    * @default 'card'
    * @remarks Forwarded to the inner element.
    */
-  layout?: 'card' | 'split';
+  layout?: 'card' | 'split' | 'photo' | 'light' | 'tint';
+  /**
+   * Media image URL; photo, light and tint layouts.
+   * @remarks Forwarded to the inner element.
+   */
+  image?: string;
+  /**
+   * Large text on the media panel; photo and tint.
+   * @remarks Forwarded to the inner element.
+   */
+  headline?: string;
+  /**
+   * Small text on the media panel or glass bar.
+   * @remarks Forwarded to the inner element.
+   */
+  caption?: string;
+  /**
+   * Bottom line of the media panel; photo only.
+   * @remarks Forwarded to the inner element.
+   */
+  quote?: string;
+  /**
+   * Pill labels in the glass bar; light and tint.
+   * @remarks Forwarded to the inner element.
+   */
+  chips?: string[];
+  /**
+   * Avatars on the media panel or in the proof pill.
+   * @remarks Forwarded to the inner element.
+   */
+  people?: { name: string; src?: string }[];
+  /**
+   * Social-proof title under the form; light and tint.
+   * @remarks Forwarded to the inner element.
+   */
+  proof?: string;
+  /**
+   * Second line of the proof pill.
+   * @remarks Forwarded to the inner element.
+   */
+  proofHint?: string;
   /**
    * Form heading.
    * @remarks Forwarded to the inner element.

package/types/vue-global.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     UiAlert: typeof Ui.UiAlert;
     UiAppShell: typeof Ui.UiAppShell;
     UiAuthLayout: typeof Ui.UiAuthLayout;
+    UiAuthShowcase: typeof Ui.UiAuthShowcase;
     UiAuthSplit: typeof Ui.UiAuthSplit;
     UiAvatar: typeof Ui.UiAvatar;
     UiBadge: typeof Ui.UiBadge;

package/types/vue.d.ts

@@ -244,6 +244,47 @@ export interface UiAuthLayoutSlots {
 }
 export const UiAuthLayout: UiVueComponent<UiAuthLayoutProps, UiAuthLayoutSlots>;
 
+/**
+ * Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.
+ * Note: logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it).
+ */
+export interface UiAuthShowcaseProps {
+  /**
+   * 'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent.
+   * @default 'photo'
+   */
+  variant?: 'photo' | 'light' | 'tint';
+  /** Form heading. */
+  title: string;
+  /** Text under the heading. */
+  subtitle?: string;
+  /** Logo node above the heading. */
+  logo?: VNode;
+  /** Content under the fields, for example "No account? Sign up". */
+  footer?: VNode;
+  /** URL of the media image. Without it the panel shows an accent gradient. */
+  image?: string;
+  /** Large text on the media panel (photo and tint). */
+  headline?: string;
+  /** Small text on the media panel (photo) or inside the glass bar (light, tint). */
+  caption?: string;
+  /** Line at the bottom of the media panel; photo only. */
+  quote?: string;
+  /** Pill labels inside the glass bar; light and tint. */
+  chips?: string[];
+  /** Avatars: floating on the photo, stacked in the proof pill. */
+  people?: { name: string; src?: string }[];
+  /** Social-proof title, e.g. "Join 20k+ users"; light and tint. Shows the pill under the form. */
+  proof?: string;
+  /** Second line of the proof pill. */
+  proofHint?: string;
+}
+export interface UiAuthShowcaseSlots {
+  /** Form fields and buttons. React passes them as children. */
+  default?: () => any;
+}
+export const UiAuthShowcase: UiVueComponent<UiAuthShowcaseProps, UiAuthShowcaseSlots>;
+
 /**
  * Two-column sign-in layout with a brand panel on the left and the form on the right.
  * Note: logo and aside are props in both Vue and React (pass a VNode / element).
@@ -3164,11 +3205,51 @@ export const UiPageAccount: UiVueComponent<UiPageAccountProps, UiPageAccountSlot
  */
 export interface UiPageAuthProps {
   /**
-   * 'split' uses AuthSplit with a side panel; anything else renders a centered AuthLayout card over the background.
+   * 'split' uses AuthSplit with a side panel. 'photo', 'light' and 'tint' use AuthShowcase with a media panel. Anything else renders a centered AuthLayout card over the background.
    * @default 'card'
    * @remarks Forwarded to the inner element.
    */
-  layout?: 'card' | 'split';
+  layout?: 'card' | 'split' | 'photo' | 'light' | 'tint';
+  /**
+   * Media image URL; photo, light and tint layouts.
+   * @remarks Forwarded to the inner element.
+   */
+  image?: string;
+  /**
+   * Large text on the media panel; photo and tint.
+   * @remarks Forwarded to the inner element.
+   */
+  headline?: string;
+  /**
+   * Small text on the media panel or glass bar.
+   * @remarks Forwarded to the inner element.
+   */
+  caption?: string;
+  /**
+   * Bottom line of the media panel; photo only.
+   * @remarks Forwarded to the inner element.
+   */
+  quote?: string;
+  /**
+   * Pill labels in the glass bar; light and tint.
+   * @remarks Forwarded to the inner element.
+   */
+  chips?: string[];
+  /**
+   * Avatars on the media panel or in the proof pill.
+   * @remarks Forwarded to the inner element.
+   */
+  people?: { name: string; src?: string }[];
+  /**
+   * Social-proof title under the form; light and tint.
+   * @remarks Forwarded to the inner element.
+   */
+  proof?: string;
+  /**
+   * Second line of the proof pill.
+   * @remarks Forwarded to the inner element.
+   */
+  proofHint?: string;
   /**
    * Form heading.
    * @remarks Forwarded to the inner element.