@ziyarago/ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.6.0](https://github.com/ziyarago/ui/compare/v0.5.0...v0.6.0) (2026-10-21)
+
+### Features
+
+* SocialAuth component with Google and Apple buttons ([398b36d](https://github.com/ziyarago/ui/commit/398b36dcc808e8f4656c09e8c12acf2e21c6084d))
+
 ## [0.5.0](https://github.com/ziyarago/ui/compare/v0.4.0...v0.5.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: 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.
+Glass design system for Vue 3, Nuxt and React: 184 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: 183 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>183 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>184 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: 183 components, 17 page templates
 Files:
 
 ```
-src/core/        components*.js, pages.js: 183 components and 17 page templates as { state, slots, render(ctx) }; no framework imports
+src/core/        components*.js, pages.js: 184 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, 183 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, 184 components and 17 page templates.
 
-Version 0.5.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.6.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -2131,6 +2131,20 @@ Slots:
 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).
 
+## UiSocialAuth  (domain)
+Continue with Google and Apple buttons with an "or" divider. Place it under the sign-in form.
+Props:
+- `providers`: ('google' | 'apple')[] = "['google', 'apple']". Which buttons to show, in order.
+- `variant`: 'stack' | 'icons' = "stack". 'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons.
+- `divider`: boolean = "true". Show the "or" line above the buttons.
+- `labels`: { google?: string; apple?: string }. Provider names inserted into "Continue with {provider}".
+- `onSelect`: (provider: 'google' | 'apple') => void. Called with the clicked provider. Start your OAuth flow here.
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scales padding, text and avatars.
+Events:
+- select: A provider button was clicked; payload is "google" or "apple".
+Notes:
+- The kit only renders the buttons. The OAuth flow itself is yours.
+
 ## UiPageDashboard  (pages)
 Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.
 Props:

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, 183 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, 184 components and 17 page templates.
 
-Version 0.5.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.6.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -215,6 +215,7 @@ Umrah, Hajj, hotel and CRM blocks.
 - 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.
+- UiSocialAuth: Continue with Google and Apple buttons with an "or" divider. Place it under the sign-in form.
 
 ## Page templates
 Ready layouts with named slots.

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.5.0",
+ "version": "0.6.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -252,7 +252,8 @@
     "CallCard",
     "IncomingCall",
     "AuthSplit",
-    "AuthShowcase"
+    "AuthShowcase",
+    "SocialAuth"
    ]
   },
   {
@@ -10124,6 +10125,59 @@
     "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": "SocialAuth",
+   "tag": "UiSocialAuth",
+   "group": "domain",
+   "description": "Continue with Google and Apple buttons with an \"or\" divider. Place it under the sign-in form.",
+   "props": {
+    "providers": {
+     "type": "('google' | 'apple')[]",
+     "default": "['google', 'apple']",
+     "description": "Which buttons to show, in order."
+    },
+    "variant": {
+     "type": "'stack' | 'icons'",
+     "values": [
+      "stack",
+      "icons"
+     ],
+     "default": "stack",
+     "description": "'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons."
+    },
+    "divider": {
+     "type": "boolean",
+     "default": "true",
+     "description": "Show the \"or\" line above the buttons."
+    },
+    "labels": {
+     "type": "{ google?: string; apple?: string }",
+     "description": "Provider names inserted into \"Continue with {provider}\"."
+    },
+    "onSelect": {
+     "type": "(provider: 'google' | 'apple') => void",
+     "description": "Called with the clicked provider. Start your OAuth flow here."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
+    }
+   },
+   "events": {
+    "select": "A provider button was clicked; payload is \"google\" or \"apple\"."
+   },
+   "notes": [
+    "The kit only renders the buttons. The OAuth flow itself is yours."
+   ]
+  },
   {
    "name": "PageDashboard",
    "tag": "UiPageDashboard",

package/dist/style.css

@@ -531,6 +531,11 @@
 .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}}
+/* SocialAuth */
+.zg-social{display:flex;flex-direction:column;gap:14px}
+.zg-social__or{display:flex;align-items:center;gap:12px;color:var(--zg-text-3);font-size:13px}.zg-social__or::before,.zg-social__or::after{content:"";flex:1;height:1px;background:var(--zg-stroke)}
+.zg-social__row{display:flex;gap:10px}.zg-social--stack .zg-social__row{flex-direction:column}
+.zg-social .zg-btn{gap:10px}.zg-social:not(.zg-social--stack) .zg-social__row{justify-content:center}
 /* 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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ziyarago/ui",
-  "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.",
+  "version": "0.6.0",
+  "description": "ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 184 components and 17 page templates.",
   "keywords": [
     "ui",
     "design-system",

package/src/core/bools.js

@@ -1,4 +1,4 @@
 // Names of props that are boolean in EVERY component that documents them. The Vue adapter turns the bare-attribute form (<UiButton block>, which Vue delivers as '') into true for these.
 // Names that are boolean somewhere and text elsewhere (modelValue, image, brand) are not listed: '' is a legitimate value there.
 // scripts/check-meta.mjs keeps this list in sync with src/meta.
-export const BOOL_PROPS = new Set(['addable', 'allowEmpty', 'autoResize', 'autofocus', 'banner', 'block', 'bold', 'checked', 'clearable', 'closable', 'closeOnBackdrop', 'closeOnEsc', 'collapsed', 'collapsible', 'disabled', 'dot', 'external', 'featured', 'frame', 'ghost', 'glass', 'hideArrows', 'hideIcon', 'highlightLast', 'iconOnly', 'indeterminate', 'interactive', 'labelLeft', 'last', 'loading', 'multi', 'multiple', 'open', 'pill', 'plain', 'readonly', 'required', 'resize', 'ring', 'sanitize', 'selectGroups', 'showCount', 'showForgot', 'showValue', 'spellcheck', 'ticks', 'truncate', 'vertical', 'vip', 'wrap']);
+export const BOOL_PROPS = new Set(['addable', 'allowEmpty', 'autoResize', 'autofocus', 'banner', 'block', 'bold', 'checked', 'clearable', 'closable', 'closeOnBackdrop', 'closeOnEsc', 'collapsed', 'collapsible', 'disabled', 'divider', 'dot', 'external', 'featured', 'frame', 'ghost', 'glass', 'hideArrows', 'hideIcon', 'highlightLast', 'iconOnly', 'indeterminate', 'interactive', 'labelLeft', 'last', 'loading', 'multi', 'multiple', 'open', 'pill', 'plain', 'readonly', 'required', 'resize', 'ring', 'sanitize', 'selectGroups', 'showCount', 'showForgot', 'showValue', 'spellcheck', 'ticks', 'truncate', 'vertical', 'vip', 'wrap']);

package/src/core/components3.js

@@ -30,6 +30,21 @@ 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)) },
+  SocialAuth: { render: ({ C, h, props: p }) => {
+    const list = (p.providers || ['google', 'apple']).filter(k => k === 'google' || k === 'apple');
+    const icon = k => k === 'apple'
+      ? h('svg', { viewBox: '0 0 24 24', width: 20, height: 20, 'aria-hidden': 'true', fill: 'currentColor' }, h('path', { d: 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701' }))
+      : h('svg', { viewBox: '0 0 24 24', width: 20, height: 20, 'aria-hidden': 'true' },
+        h('path', { fill: '#4285F4', d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' }),
+        h('path', { fill: '#34A853', d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' }),
+        h('path', { fill: '#FBBC05', d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' }),
+        h('path', { fill: '#EA4335', d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' }));
+    const name = k => (p.labels && p.labels[k]) || t('SocialAuth', k);
+    const stack = p.variant !== 'icons';
+    return h('div', { class: 'zg-social' + (stack ? ' zg-social--stack' : '') },
+      p.divider === false ? null : h('div', { class: 'zg-social__or', role: 'separator' }, h('span', null, t('SocialAuth', 'or'))),
+      h('div', { class: 'zg-social__row' }, ...list.map(k => h(C.Button, { key: k, variant: 'secondary', size: 'lg', block: stack, iconOnly: !stack, title: t('SocialAuth', 'continueWith', { provider: name(k) }), 'aria-label': t('SocialAuth', 'continueWith', { provider: name(k) }), onClick: () => p.onSelect && p.onSelect(k) }, icon(k), stack ? t('SocialAuth', 'continueWith', { provider: name(k) }) : null))));
+  } },
   AuthShowcase: { render: ({ C, h, props: p, children }) => {
     const v = p.variant === 'light' || p.variant === 'tint' ? p.variant : 'photo';
     const people = p.people || [];

package/src/i18n/components/SocialAuth.js

@@ -0,0 +1,5 @@
+export default {
+  en: { or: 'or', continueWith: 'Continue with {provider}', google: 'Google', apple: 'Apple' },
+  ar: { or: 'أو', continueWith: 'المتابعة باستخدام {provider}', google: 'Google', apple: 'Apple' },
+  ru: { or: 'или', continueWith: 'Продолжить с {provider}', google: 'Google', apple: 'Apple' },
+};

package/src/i18n/components/index.js

@@ -53,6 +53,7 @@ import Screensaver from './Screensaver.js';
 import SearchInput from './SearchInput.js';
 import SideNav from './SideNav.js';
 import Snackbar from './Snackbar.js';
+import SocialAuth from './SocialAuth.js';
 import Sortable from './Sortable.js';
 import Spinner from './Spinner.js';
 import StatusPage from './StatusPage.js';
@@ -120,6 +121,7 @@ defineMessages('Screensaver', Screensaver);
 defineMessages('SearchInput', SearchInput);
 defineMessages('SideNav', SideNav);
 defineMessages('Snackbar', Snackbar);
+defineMessages('SocialAuth', SocialAuth);
 defineMessages('Sortable', Sortable);
 defineMessages('Spinner', Spinner);
 defineMessages('StatusPage', StatusPage);

package/src/meta/domain.js

@@ -198,6 +198,19 @@ export default {
     },
     events: { decline: 'Decline button clicked.', answer: 'Answer button clicked.' },
   },
+  SocialAuth: {
+    description: 'Continue with Google and Apple buttons with an "or" divider. Place it under the sign-in form.',
+    props: {
+      providers: { type: "('google' | 'apple')[]", default: "['google', 'apple']", description: 'Which buttons to show, in order.' },
+      variant: { type: "'stack' | 'icons'", values: ['stack', 'icons'], default: 'stack', description: "'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons." },
+      divider: { type: 'boolean', default: 'true', description: 'Show the "or" line above the buttons.' },
+      labels: { type: '{ google?: string; apple?: string }', description: 'Provider names inserted into "Continue with {provider}".' },
+      onSelect: { type: "(provider: 'google' | 'apple') => void", description: 'Called with the clicked provider. Start your OAuth flow here.' },
+      size,
+    },
+    events: { select: 'A provider button was clicked; payload is "google" or "apple".' },
+    notes: ['The kit only renders the buttons. The OAuth flow itself is yours.'],
+  },
   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: {

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', 'AuthShowcase'] },
+  { id: 'domain', title: 'Domain', blurb: 'Umrah, Hajj, hotel and CRM blocks.', names: ['HotelCard', 'TourCard', 'PrayerTimes', 'RamadanTracker', 'BookingCard', 'GuestCard', 'RoomGrid', 'RoomCalendar', 'LeadCard', 'DealCard', 'PipelineBoard', 'ContactPanel', 'KanbanColumn', 'KanbanCard', 'CallRow', 'CallCard', 'IncomingCall', 'AuthSplit', 'AuthShowcase', 'SocialAuth'] },
   { id: 'pages', title: 'Page templates', blurb: 'Ready layouts with named slots.', names: ['PageDashboard', 'PagePatterns', 'PageCrm', 'PageBookings', 'PageCatalog', 'PageDetail', 'PageSettings', 'PageUserList', 'PageProfile', 'PageForm', 'PageOrder', 'PageAccount', 'PagePricing', 'PageFaq', 'PageAuth', 'PageStatus'] },
 ];
 

package/src/react/index.js

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

package/src/styles/components8.css

@@ -82,6 +82,11 @@
 .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}}
+/* SocialAuth */
+.zg-social{display:flex;flex-direction:column;gap:14px}
+.zg-social__or{display:flex;align-items:center;gap:12px;color:var(--zg-text-3);font-size:13px}.zg-social__or::before,.zg-social__or::after{content:"";flex:1;height:1px;background:var(--zg-stroke)}
+.zg-social__row{display:flex;gap:10px}.zg-social--stack .zg-social__row{flex-direction:column}
+.zg-social .zg-btn{gap:10px}.zg-social:not(.zg-social--stack) .zg-social__row{justify-content:center}
 /* 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}

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, 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 { 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, SocialAuth: UiSocialAuth, 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

@@ -5125,6 +5125,39 @@ export interface UiSnackbarProps {
 }
 export const UiSnackbar: ComponentType<UiSnackbarProps>;
 
+/**
+ * Continue with Google and Apple buttons with an "or" divider. Place it under the sign-in form.
+ * Note: The kit only renders the buttons. The OAuth flow itself is yours.
+ */
+export interface UiSocialAuthProps {
+  /**
+   * Which buttons to show, in order.
+   * @default ['google', 'apple']
+   */
+  providers?: ('google' | 'apple')[];
+  /**
+   * 'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons.
+   * @default 'stack'
+   */
+  variant?: 'stack' | 'icons';
+  /**
+   * Show the "or" line above the buttons.
+   * @default 'true'
+   */
+  divider?: boolean;
+  /** Provider names inserted into "Continue with {provider}". */
+  labels?: { google?: string; apple?: string };
+  /** Called with the clicked provider. Start your OAuth flow here. */
+  onSelect?: (provider: 'google' | 'apple') => void;
+  /**
+   * Scales padding, text and avatars.
+   * @default 'md'
+   */
+  size?: Size;
+  children?: ReactNode;
+}
+export const UiSocialAuth: ComponentType<UiSocialAuthProps>;
+
 /**
  * Drag-and-drop reorderable list with grip handles and up/down buttons.
  * Note: Controlled: the parent must store the array from change and pass it back as items.

package/types/vue-global.d.ts

@@ -153,6 +153,7 @@ declare module 'vue' {
     UiSkeleton: typeof Ui.UiSkeleton;
     UiSlider: typeof Ui.UiSlider;
     UiSnackbar: typeof Ui.UiSnackbar;
+    UiSocialAuth: typeof Ui.UiSocialAuth;
     UiSortable: typeof Ui.UiSortable;
     UiSpinner: typeof Ui.UiSpinner;
     UiSplitLayout: typeof Ui.UiSplitLayout;

package/types/vue.d.ts

@@ -4996,6 +4996,39 @@ export interface UiSnackbarSlots {
 }
 export const UiSnackbar: UiVueComponent<UiSnackbarProps, UiSnackbarSlots>;
 
+/**
+ * Continue with Google and Apple buttons with an "or" divider. Place it under the sign-in form.
+ * Note: The kit only renders the buttons. The OAuth flow itself is yours.
+ */
+export interface UiSocialAuthProps {
+  /**
+   * Which buttons to show, in order.
+   * @default ['google', 'apple']
+   */
+  providers?: ('google' | 'apple')[];
+  /**
+   * 'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons.
+   * @default 'stack'
+   */
+  variant?: 'stack' | 'icons';
+  /**
+   * Show the "or" line above the buttons.
+   * @default 'true'
+   */
+  divider?: boolean;
+  /** Provider names inserted into "Continue with {provider}". */
+  labels?: { google?: string; apple?: string };
+  /** Called with the clicked provider. Start your OAuth flow here. */
+  onSelect?: (provider: 'google' | 'apple') => void;
+  /**
+   * Scales padding, text and avatars.
+   * @default 'md'
+   */
+  size?: Size;
+}
+export interface UiSocialAuthSlots {}
+export const UiSocialAuth: UiVueComponent<UiSocialAuthProps, UiSocialAuthSlots>;
+
 /**
  * Drag-and-drop reorderable list with grip handles and up/down buttons.
  * Note: Controlled: the parent must store the array from change and pass it back as items.