@ziyarago/ui 0.3.0 → 0.5.0

package/src/i18n/components/TourCard.js

@@ -0,0 +1,5 @@
+export default {
+  en: { seats: 'Seats' },
+  ar: { seats: 'المقاعد' },
+  ru: { seats: 'Места' },
+};

package/src/i18n/components/TourPopover.js

@@ -0,0 +1,5 @@
+export default {
+  en: { close: 'Close', back: 'Back', next: 'Next', finish: 'Finish' },
+  ar: { close: 'إغلاق', back: 'رجوع', next: 'التالي', finish: 'إنهاء' },
+  ru: { close: 'Закрыть', back: 'Назад', next: 'Следующий', finish: 'Готово' },
+};

package/src/i18n/components/TreeSelect.js

@@ -0,0 +1,5 @@
+export default {
+  en: { search: 'Search' },
+  ar: { search: 'بحث' },
+  ru: { search: 'Поиск' },
+};

package/src/i18n/components/Validation.js

@@ -0,0 +1,5 @@
+export default {
+  en: { required: 'This field is required', email: 'Enter a valid email', url: 'Enter a valid URL', digits: 'Exactly {n} digits', alpha: 'Letters only', alphaDash: 'Letters, digits, dash and underscore', minLength: 'At least {n} characters', maxLength: 'At most {n} characters', range: 'Between {a} and {b}', invalid: 'Invalid format', confirmed: 'Values do not match', password: '8+ characters, a digit and a capital letter' },
+  ar: { required: 'هذا الحقل مطلوب', email: 'أدخل بريدًا إلكترونيًا صالحًا', url: 'أدخل رابطًا صالحًا', digits: '{n} أرقام بالضبط', alpha: 'أحرف فقط', alphaDash: 'أحرف وأرقام وشرطة وشرطة سفلية', minLength: '{n} أحرف على الأقل', maxLength: '{n} أحرف كحد أقصى', range: 'بين {a} و {b}', invalid: 'تنسيق غير صالح', confirmed: 'القيمتان غير متطابقتين', password: '8 أحرف أو أكثر ورقم وحرف كبير' },
+  ru: { required: 'Обязательное поле', email: 'Введите корректный email', url: 'Введите корректный URL', digits: 'Ровно {n} цифр', alpha: 'Только буквы', alphaDash: 'Буквы, цифры, дефис и подчёркивание', minLength: 'Не менее {n} символов', maxLength: 'Не более {n} символов', range: 'От {a} до {b}', invalid: 'Неверный формат', confirmed: 'Значения не совпадают', password: '8+ символов, цифра и заглавная буква' },
+};

package/src/i18n/components/index.js

@@ -1,5 +1,135 @@
 // generated by scripts/i18n-index.mjs: do not edit
 import { defineMessages } from '../index.js';
+import ActionCard from './ActionCard.js';
+import Actionsheet from './Actionsheet.js';
+import Alert from './Alert.js';
+import Breadcrumbs from './Breadcrumbs.js';
+import Calendar from './Calendar.js';
+import CallCard from './CallCard.js';
+import CallRow from './CallRow.js';
+import Carousel from './Carousel.js';
+import ChartCard from './ChartCard.js';
+import ChatAi from './ChatAi.js';
+import Chip from './Chip.js';
+import ChipInput from './ChipInput.js';
+import CodeInput from './CodeInput.js';
+import Combobox from './Combobox.js';
+import CommandPalette from './CommandPalette.js';
+import ConfirmDialog from './ConfirmDialog.js';
+import ContactPanel from './ContactPanel.js';
 import CopyButton from './CopyButton.js';
+import DataGroup from './DataGroup.js';
+import DataState from './DataState.js';
+import DataTable from './DataTable.js';
+import DatePicker from './DatePicker.js';
+import DealCard from './DealCard.js';
+import Drawer from './Drawer.js';
+import ErrorPage from './ErrorPage.js';
+import FileUpload from './FileUpload.js';
+import FullscreenDialog from './FullscreenDialog.js';
+import Gallery from './Gallery.js';
+import GuestCard from './GuestCard.js';
+import ImageUpload from './ImageUpload.js';
+import ImageViewer from './ImageViewer.js';
+import IncomingCall from './IncomingCall.js';
+import InlineEdit from './InlineEdit.js';
+import IntegrationCard from './IntegrationCard.js';
+import LoginForm from './LoginForm.js';
+import Map from './Map.js';
+import Modal from './Modal.js';
+import MultiSelect from './MultiSelect.js';
+import NotificationBell from './NotificationBell.js';
+import NumberInput from './NumberInput.js';
+import Pagination from './Pagination.js';
+import PasswordInput from './PasswordInput.js';
+import Popconfirm from './Popconfirm.js';
+import PricingCard from './PricingCard.js';
+import RamadanTracker from './RamadanTracker.js';
+import RangeCalendar from './RangeCalendar.js';
+import RangeSlider from './RangeSlider.js';
+import Rating from './Rating.js';
+import RichEditor from './RichEditor.js';
+import Screensaver from './Screensaver.js';
+import SearchInput from './SearchInput.js';
+import SideNav from './SideNav.js';
+import Snackbar from './Snackbar.js';
+import Sortable from './Sortable.js';
+import Spinner from './Spinner.js';
+import StatusPage from './StatusPage.js';
+import StepDialog from './StepDialog.js';
+import StepForm from './StepForm.js';
+import TabTiles from './TabTiles.js';
+import Tag from './Tag.js';
+import TopNav from './TopNav.js';
+import Tour from './Tour.js';
+import TourCard from './TourCard.js';
+import TourPopover from './TourPopover.js';
+import TreeSelect from './TreeSelect.js';
+import Validation from './Validation.js';
 
+defineMessages('ActionCard', ActionCard);
+defineMessages('Actionsheet', Actionsheet);
+defineMessages('Alert', Alert);
+defineMessages('Breadcrumbs', Breadcrumbs);
+defineMessages('Calendar', Calendar);
+defineMessages('CallCard', CallCard);
+defineMessages('CallRow', CallRow);
+defineMessages('Carousel', Carousel);
+defineMessages('ChartCard', ChartCard);
+defineMessages('ChatAi', ChatAi);
+defineMessages('Chip', Chip);
+defineMessages('ChipInput', ChipInput);
+defineMessages('CodeInput', CodeInput);
+defineMessages('Combobox', Combobox);
+defineMessages('CommandPalette', CommandPalette);
+defineMessages('ConfirmDialog', ConfirmDialog);
+defineMessages('ContactPanel', ContactPanel);
 defineMessages('CopyButton', CopyButton);
+defineMessages('DataGroup', DataGroup);
+defineMessages('DataState', DataState);
+defineMessages('DataTable', DataTable);
+defineMessages('DatePicker', DatePicker);
+defineMessages('DealCard', DealCard);
+defineMessages('Drawer', Drawer);
+defineMessages('ErrorPage', ErrorPage);
+defineMessages('FileUpload', FileUpload);
+defineMessages('FullscreenDialog', FullscreenDialog);
+defineMessages('Gallery', Gallery);
+defineMessages('GuestCard', GuestCard);
+defineMessages('ImageUpload', ImageUpload);
+defineMessages('ImageViewer', ImageViewer);
+defineMessages('IncomingCall', IncomingCall);
+defineMessages('InlineEdit', InlineEdit);
+defineMessages('IntegrationCard', IntegrationCard);
+defineMessages('LoginForm', LoginForm);
+defineMessages('Map', Map);
+defineMessages('Modal', Modal);
+defineMessages('MultiSelect', MultiSelect);
+defineMessages('NotificationBell', NotificationBell);
+defineMessages('NumberInput', NumberInput);
+defineMessages('Pagination', Pagination);
+defineMessages('PasswordInput', PasswordInput);
+defineMessages('Popconfirm', Popconfirm);
+defineMessages('PricingCard', PricingCard);
+defineMessages('RamadanTracker', RamadanTracker);
+defineMessages('RangeCalendar', RangeCalendar);
+defineMessages('RangeSlider', RangeSlider);
+defineMessages('Rating', Rating);
+defineMessages('RichEditor', RichEditor);
+defineMessages('Screensaver', Screensaver);
+defineMessages('SearchInput', SearchInput);
+defineMessages('SideNav', SideNav);
+defineMessages('Snackbar', Snackbar);
+defineMessages('Sortable', Sortable);
+defineMessages('Spinner', Spinner);
+defineMessages('StatusPage', StatusPage);
+defineMessages('StepDialog', StepDialog);
+defineMessages('StepForm', StepForm);
+defineMessages('TabTiles', TabTiles);
+defineMessages('Tag', Tag);
+defineMessages('TopNav', TopNav);
+defineMessages('Tour', Tour);
+defineMessages('TourCard', TourCard);
+defineMessages('TourPopover', TourPopover);
+defineMessages('TreeSelect', TreeSelect);
+defineMessages('Validation', Validation);

package/src/i18n/index.js

@@ -1,11 +1,13 @@
 // Built-in component strings. One file per component in ./components/<Name>.js with all locales:
-//   export default { en: { copy: 'Copy' } }     (the open source package ships English; other languages come from a language pack
-//   that calls defineMessages(component, { ru: {...} }) or from the app via setUiMessages)
+//   export default { en: { copy: 'Copy' } }     (the open source package ships en, ar, ru; the other 13 languages come from the Pro language pack
+//   that calls defineMessages(component, { uz: {...} }) or from the app via setUiMessages). A locale without strings falls back to English.
 // The kit has its own translator: it never depends on the host app's i18n library. Sync it with yours:
 //   watch(() => i18n.locale.value, l => setUiLocale(l))        // vue-i18n
 //   setUiMessages('ru', { CopyButton: { copy: 'Скопировать' } }) // override single strings from the app
-export const LOCALES = ['en', 'uz', 'ru', 'tr', 'zh', 'ar'];
-export const RTL_LOCALES = ['ar'];
+export const LOCALES = ['en', 'ar', 'ru', 'uz', 'tg', 'tr', 'fr', 'fa', 'hi', 'ur', 'bn', 'id', 'kk', 'ky', 'ms', 'ha'];
+/** Languages whose strings ship in the free package. The rest come from the Pro language pack. */
+export const FREE_LOCALES = ['en', 'ar', 'ru'];
+export const RTL_LOCALES = ['ar', 'fa', 'ur'];
 
 const registry = {};
 const overrides = {};
@@ -16,7 +18,7 @@ let version = 0;
 const norm = l => { const k = String(l || 'en').toLowerCase().split(/[-_]/)[0]; return LOCALES.includes(k) ? k : 'en'; };
 const bump = () => { version++; subs.forEach(f => f(locale)); };
 
-/** Register strings of a component. Calling it again for the same component MERGES locales: an extra pack can add uz, ru, tr, zh, ar on top of the built-in English. */
+/** Register strings of a component. Calling it again for the same component MERGES locales: a language pack can add locales on top of the built-in ones. */
 export function defineMessages(component, messages) {
   const cur = registry[component] || (registry[component] = {});
   for (const [l, msgs] of Object.entries(messages)) cur[l] = { ...(cur[l] || {}), ...msgs };
@@ -45,4 +47,4 @@ export function t(component, key, params) {
 }
 
 /** Locale-aware helper for numbers and dates in components (uses the browser/Node Intl). */
-export const intlLocale = () => ({ en: 'en-US', uz: 'uz-UZ', ru: 'ru-RU', tr: 'tr-TR', zh: 'zh-CN', ar: 'ar' })[locale];
+export const intlLocale = () => ({ en: 'en-US', ar: 'ar', ru: 'ru-RU', uz: 'uz-UZ', tg: 'tg-TJ', tr: 'tr-TR', fr: 'fr-FR', fa: 'fa-IR', hi: 'hi-IN', ur: 'ur-PK', bn: 'bn-BD', id: 'id-ID', kk: 'kk-KZ', ky: 'ky-KG', ms: 'ms-MY', ha: 'ha-NG' })[locale];

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/i18n.d.ts

@@ -1,5 +1,7 @@
-export type UiLocale = 'en' | 'uz' | 'ru' | 'tr' | 'zh' | 'ar';
+export type UiLocale = 'en' | 'ar' | 'ru' | 'uz' | 'tg' | 'tr' | 'fr' | 'fa' | 'hi' | 'ur' | 'bn' | 'id' | 'kk' | 'ky' | 'ms' | 'ha';
 export const LOCALES: readonly UiLocale[];
+/** en, ar, ru: included in the free package. */
+export const FREE_LOCALES: readonly UiLocale[];
 export const RTL_LOCALES: readonly UiLocale[];
 /** Switch the language of the built-in component strings. Components re-render by themselves. */
 export function setUiLocale(locale: UiLocale | string): void;
@@ -8,5 +10,5 @@ export function isRtlLocale(locale?: string): boolean;
 /** Override single strings from the app: setUiMessages('ru', { Pagination: { prev: 'Назад' } }). Pass null to clear a locale. */
 export function setUiMessages(locale: UiLocale | string, messages: Record<string, Record<string, string>> | null): void;
 export function t(component: string, key: string, params?: Record<string, string | number>): string;
-export function defineMessages(component: string, messages: Record<UiLocale, Record<string, string>>): void;
+export function defineMessages(component: string, messages: Partial<Record<UiLocale, Record<string, string>>>): void;
 export function subscribeUiLocale(fn: (locale: UiLocale) => void): () => void;

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.