admin-ui-starter-kit 0.1.4 → 0.4.2

package/dist/showcase/assets/layout-auth-BFza65L3.js

@@ -0,0 +1,754 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,Tr as i,hr as a,mr as o,r as s,t as c,yr as l}from"./example-BIrQab7K.js";import{t as u}from"./building-2-zgcwuzxP.js";import{t as d}from"./chart-column-DjAyOA-t.js";import{t as f}from"./circle-check-TT7cFQrr.js";import{t as p}from"./clock-3-DDEsD4Tb.js";import{t as m}from"./earth-C7n2JAYm.js";import{t as h}from"./password-input-BVaUPw7a.js";import{t as g}from"./lock-keyhole-M6KZ_7RC.js";import{t as _}from"./mail-check-DXqQwivW.js";import{t as v}from"./shield-check-CRbBJXw2.js";import{t as y}from"./sparkles-DFJmoAFP.js";import{a as b,k as x,n as S,s as ee}from"./index-Cz4UGUT2.js";import{t as C}from"./props-table-BR-KjRNe.js";import{t as w}from"./text-link-DT-nOORV.js";import{a as te,r as ne,t as T}from"./card-primitives-YgCOqVDI.js";import{i as E,n as re,r as D,t as O}from"./alert-DIelf1qF.js";import{t as ie}from"./checkbox-fwuAAaUZ.js";import{t as k}from"./input-BPDdWrB1.js";import{n as A}from"./form-field-Cxm4APa9.js";import{c as ae,i as j,o as oe,r as se,t as ce,u as M}from"./item-CbiuwbAN.js";import{t as N}from"./use-layout-link-BK_oEoBg.js";var P=b(`key-round`,[[`path`,{d:`M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z`,key:`1s6t7t`}],[`circle`,{cx:`16.5`,cy:`7.5`,r:`.5`,fill:`currentColor`,key:`w0ekpg`}]]),le=b(`users-round`,[[`path`,{d:`M18 21a8 8 0 0 0-16 0`,key:`3ypg7q`}],[`circle`,{cx:`10`,cy:`8`,r:`5`,key:`o932ke`}],[`path`,{d:`M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3`,key:`10s06x`}]]),F=ee();function ue({eyebrow:e,title:t,description:n,headerEnd:a,banner:o,media:s,footer:c,children:l,className:u,headerClassName:d,mediaClassName:f,contentClassName:p,footerClassName:m,...h}){let g=!!(e||t||n||a);return(0,F.jsxs)(te,{"data-slot":`auth-card`,className:S(`auth-card--component`,`gap-0 overflow-hidden rounded-lg border border-border/70 bg-card py-0 shadow-sm`,u),...h,children:[!!s&&(0,F.jsx)(`div`,{className:S(`auth-card--media`,`min-h-12 border-b border-border/60 bg-muted/50`,f),children:s}),!!g&&(0,F.jsxs)(`header`,{className:S(`auth-card--header`,`flex items-start justify-between gap-4 px-6 pt-6 md:px-8 md:pt-8`,d),children:[(0,F.jsxs)(`div`,{className:`min-w-0 space-y-1.5`,children:[!!e&&(0,F.jsx)(r,{tag:`div`,size:`xxs`,type:`secondary`,weight:`semibold`,className:`auth-card--eyebrow uppercase tracking-wide`,children:e}),!!t&&(0,F.jsx)(i,{tag:`h1`,containerClassName:`space-y-0`,className:`auth-card--title border-0 pb-0 text-lg leading-tight`,children:t}),!!n&&(0,F.jsx)(r,{tag:`div`,type:`secondary`,lineHeight:`relaxed`,className:`auth-card--description max-w-prose`,children:n})]}),!!a&&(0,F.jsx)(`div`,{className:`auth-card--header-end shrink-0`,children:a})]}),(0,F.jsxs)(T,{className:S(`auth-card--content`,`px-6 pb-6 md:px-8 md:pb-8`,g?`pt-5`:`pt-6 md:pt-8`,p),children:[!!o&&(0,F.jsx)(`div`,{className:`auth-card--banner mb-5`,children:o}),l]}),!!c&&(0,F.jsx)(ne,{className:S(`auth-card--footer`,`border-t border-border/60 px-6 py-4 md:px-8`,m),children:c})]})}var I=t(n(),1);function L(e){return!!(e&&typeof e==`object`&&!(0,I.isValidElement)(e)&&(`logo`in e||`label`in e||`description`in e||`href`in e))}function R({links:e=[],renderLink:t,LinkComponent:n}={}){let r=N({renderLink:t,LinkComponent:n});return{links:(0,I.useMemo)(()=>e.filter(e=>e.visible!==!1),[e]),renderLink:r}}function de({variant:e=`card`,brand:t,footer:n,footerLinks:r=[],policyLinks:i=[],languageLinks:a=[],languageSwitcher:o,postCard:s,socialProviders:c=[],splitPanel:l,renderLink:u,LinkComponent:d}={}){let f=N({renderLink:u,LinkComponent:d}),p=(0,I.useMemo)(()=>r.filter(e=>e.visible!==!1),[r]),m=(0,I.useMemo)(()=>i.filter(e=>e.visible!==!1),[i]),h=(0,I.useMemo)(()=>a.filter(e=>e.visible!==!1),[a]),g=(0,I.useMemo)(()=>c.filter(e=>e.visible!==!1),[c]),_=!!(t&&(L(t)?t.logo||t.label||t.description:t)),v=!!(s||n||o||p.length>0||m.length>0||h.length>0),y=!!l;return{variant:y?e:`card`,hasBrand:_,hasAfterCard:v,hasSplitPanel:y,hasSocialProviders:g.length>0,renderLink:f,footerLinks:p,policyLinks:m,languageLinks:h,socialProviders:g}}var fe={socialDivider:`or continue with email`,socialProvidersLabel:`Social sign-in options`,footerLinksLabel:`Authentication links`,policyLinksLabel:`Policies`,languageLinksLabel:`Language options`},z={label:`Authentication links`},B={label:`Social sign-in options`},V={label:`Authentication method`,divider:`or`};function H({links:e,leadingIcon:t,separator:n=`·`,renderLink:i,LinkComponent:a,className:o,strings:s,...c}){let l=x(z,s),{links:u,renderLink:d}=R({links:e,renderLink:i,LinkComponent:a});return u.length===0?null:(0,F.jsxs)(`nav`,{"aria-label":c[`aria-label`]??l.label,className:S(`auth-footer-links--component`,`flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-center`,o),...c,children:[!!t&&(0,F.jsx)(`span`,{className:`auth-footer-links--icon flex shrink-0 items-center text-muted-foreground`,"aria-hidden":`true`,children:t}),u.map((e,t)=>{let i=d({href:e.href,target:e.target,rel:e.rel,external:e.external,disabled:e.disabled,onClick:e.onClick,className:S(`auth-footer-links--item`,`text-muted-foreground transition-colors hover:text-foreground`,e.disabled&&`pointer-events-none opacity-50`),children:(0,F.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label})});return(0,F.jsxs)(I.Fragment,{children:[t>0&&(0,F.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,"aria-hidden":`true`,className:`auth-footer-links--separator`,children:n}),i]},e.id??t)})]})}var pe=`auth-social-provider-button--component inline-flex h-9 w-full items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50`;function U(){return(0,F.jsxs)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 256 262`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,F.jsx)(`path`,{fill:`#4285F4`,d:`M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027`}),(0,F.jsx)(`path`,{fill:`#34A853`,d:`M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1`}),(0,F.jsx)(`path`,{fill:`#FBBC05`,d:`M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782`}),(0,F.jsx)(`path`,{fill:`#EB4335`,d:`M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251`})]})}function W(){return(0,F.jsxs)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 23 23`,children:[(0,F.jsx)(`path`,{fill:`#f25022`,d:`M1 1h10v10H1z`}),(0,F.jsx)(`path`,{fill:`#7fba00`,d:`M12 1h10v10H12z`}),(0,F.jsx)(`path`,{fill:`#00a4ef`,d:`M1 12h10v10H1z`}),(0,F.jsx)(`path`,{fill:`#ffb900`,d:`M12 12h10v10H12z`})]})}function G(){return(0,F.jsx)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,F.jsx)(`path`,{d:`M12 2C6.48 2 2 6.58 2 12.24c0 4.53 2.87 8.37 6.84 9.73.5.09.68-.22.68-.49 0-.24-.01-.88-.01-1.73-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.36 1.12 2.93.86.09-.67.35-1.12.64-1.38-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.04 1.03-2.76-.1-.26-.45-1.31.1-2.72 0 0 .84-.28 2.75 1.05A9.32 9.32 0 0 1 12 6.95c.85 0 1.7.12 2.5.35 1.9-1.33 2.74-1.05 2.74-1.05.55 1.41.2 2.46.1 2.72.64.72 1.03 1.64 1.03 2.76 0 3.94-2.34 4.8-4.57 5.06.36.32.68.95.68 1.91 0 1.38-.01 2.49-.01 2.83 0 .27.18.59.69.49A10.12 10.12 0 0 0 22 12.24C22 6.58 17.52 2 12 2Z`})})}function me(){return(0,F.jsx)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,F.jsx)(`path`,{d:`M16.37 12.05c-.02-2.26 1.85-3.35 1.94-3.4-1.06-1.55-2.69-1.76-3.26-1.78-1.37-.14-2.7.82-3.39.82-.71 0-1.78-.8-2.93-.78-1.5.02-2.9.89-3.67 2.25-1.57 2.72-.4 6.72 1.1 8.92.76 1.08 1.64 2.29 2.79 2.25 1.13-.05 1.55-.72 2.91-.72 1.35 0 1.75.72 2.93.69 1.21-.02 1.98-1.09 2.71-2.18.87-1.24 1.22-2.46 1.23-2.52-.03-.01-2.34-.9-2.36-3.55ZM14.16 5.42c.61-.76 1.03-1.8.91-2.85-.88.04-1.98.61-2.62 1.35-.57.65-1.08 1.73-.95 2.74.99.08 2.02-.5 2.66-1.24Z`})})}function he({provider:e}){if(e.icon)return(0,F.jsx)(F.Fragment,{children:e.icon});switch(e.provider){case`google`:return(0,F.jsx)(U,{});case`github`:return(0,F.jsx)(G,{});case`microsoft`:return(0,F.jsx)(W,{});case`apple`:return(0,F.jsx)(me,{});default:return(0,F.jsx)(P,{className:`size-4`,"aria-hidden":`true`})}}function ge({provider:e,renderLink:t,LinkComponent:n,className:i}){let a=N({renderLink:t,LinkComponent:n}),o=(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(he,{provider:e}),(0,F.jsx)(r,{tag:`span`,className:`text-inherit`,children:e.label})]}),c=S(pe,e.disabled&&`pointer-events-none opacity-50`,i);return e.href?a({href:e.href,target:e.target,rel:e.rel,external:e.external,disabled:e.disabled,onClick:e.onClick,className:c,children:o}):(0,F.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,disabled:e.disabled,className:S(`auth-social-provider-button--component`,i),onClick:t=>e.onClick?.(t),children:o})}function _e({providers:e,layout:t=`stack`,renderLink:n,LinkComponent:r,className:i,strings:a,...o}){let s=x(B,a),c=e?.filter(e=>e.visible!==!1)??[];return c.length===0?null:(0,F.jsx)(`div`,{role:`group`,"aria-label":o[`aria-label`]??s.label,"data-layout":t,className:S(`auth-social-providers--component`,t===`grid`?`grid gap-2 sm:grid-cols-2`:`grid gap-2`,i),...o,children:c.map(e=>(0,F.jsx)(ge,{provider:e,renderLink:n,LinkComponent:r},e.id??String(e.label)))})}var ve={card:`border-border/70 bg-card`,muted:`border-border/60 bg-muted/40`};function ye({eyebrow:e,title:t,description:n,media:a,features:o,footer:s,children:c,surface:l=`muted`,className:u,contentClassName:d,...f}){let p=!!(e||t||n),m=o?.filter(e=>e.title)??[];return(0,F.jsx)(`aside`,{"data-slot":`auth-split-panel`,"data-surface":l,className:S(`auth-split-panel--component`,`flex min-h-full w-full flex-col justify-between overflow-hidden border`,ve[l],u),...f,children:(0,F.jsxs)(`div`,{className:S(`auth-split-panel--content`,`flex min-h-full flex-col justify-center gap-8 p-6 md:p-8 lg:p-10`,d),children:[!!a&&(0,F.jsx)(`div`,{className:`auth-split-panel--media overflow-hidden rounded-lg border border-border/60 bg-background/70`,children:a}),!!p&&(0,F.jsxs)(`div`,{className:`auth-split-panel--intro max-w-xl space-y-2`,children:[!!e&&(0,F.jsx)(r,{tag:`div`,size:`xxs`,type:`secondary`,weight:`semibold`,className:`auth-split-panel--eyebrow uppercase tracking-wide`,children:e}),!!t&&(0,F.jsx)(i,{tag:`h2`,containerClassName:`space-y-0`,className:`auth-split-panel--title border-0 pb-0 text-xl leading-tight`,children:t}),!!n&&(0,F.jsx)(r,{tag:`div`,type:`secondary`,lineHeight:`relaxed`,className:`auth-split-panel--description max-w-prose`,children:n})]}),m.length>0&&(0,F.jsx)(oe,{className:`auth-split-panel--features grid gap-3`,children:m.map((e,t)=>(0,F.jsxs)(ce,{variant:`muted`,className:`auth-split-panel--feature bg-background/70`,children:[!!e.icon&&(0,F.jsx)(ae,{variant:`icon`,className:`text-muted-foreground`,children:e.icon}),(0,F.jsxs)(se,{className:`min-w-[min(12rem,100%)]`,children:[(0,F.jsx)(M,{children:e.title}),!!e.description&&(0,F.jsx)(j,{clamp:`none`,children:e.description})]})]},e.id??t))}),c,!!s&&(0,F.jsx)(`div`,{className:`auth-split-panel--footer`,children:s})]})})}var be={sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`};function xe(e){return!!(e&&typeof e==`object`&&!(0,I.isValidElement)(e))}function Se(e){let t=!!(e.label||e.description);return(0,F.jsxs)(F.Fragment,{children:[!!e.logo&&(0,F.jsx)(`div`,{className:`auth-shell--brand-logo shrink-0`,children:e.logo}),!!t&&(0,F.jsxs)(`div`,{className:`auth-shell--brand-text min-w-0`,children:[!!e.label&&(0,F.jsx)(r,{tag:`div`,weight:`semibold`,className:`auth-shell--brand-label`,children:e.label}),!!e.description&&(0,F.jsx)(r,{tag:`div`,size:`xs`,type:`secondary`,className:`auth-shell--brand-description`,children:e.description})]})]})}function Ce({brand:e,renderLink:t}){if(!e)return null;if(!L(e))return(0,F.jsx)(`div`,{className:`auth-shell--brand flex items-center justify-center`,children:e});let n=Se(e),r=S(`auth-shell--brand`,`inline-flex items-center justify-center gap-2.5 self-center rounded-md text-foreground`,e.href&&`transition-opacity hover:opacity-80`);return e.href?t({href:e.href,"aria-label":e.ariaLabel,className:r,children:n}):(0,F.jsx)(`div`,{className:r,children:n})}function we(e){return e?(0,I.isValidElement)(e)?e:xe(e)?(0,F.jsx)(ye,{...e}):null:null}function K({children:e,variant:t=`card`,size:n=`md`,align:i=`center`,brand:a,eyebrow:o,title:s,description:c,headerEnd:l,banner:u,cardMedia:d,cardMediaClassName:f,cardFooter:p,postCard:h,footer:g,footerLinks:_,policyLinks:v,languageLinks:y,languageSwitcher:b,socialProviders:ee,socialProvidersLayout:C=`stack`,socialDivider:w,splitPanel:te,splitSide:ne=`left`,splitMobile:T=`hidden`,renderLink:E,LinkComponent:re,className:D,mainClassName:O,stackClassName:ie,cardClassName:k,cardContentClassName:A,splitGridClassName:ae,splitPanelClassName:j,footerClassName:oe,strings:se,...ce}){let M=x(fe,se),{variant:N,hasBrand:P,hasAfterCard:le,hasSplitPanel:I,hasSocialProviders:L,renderLink:R,footerLinks:z,policyLinks:B,languageLinks:V,socialProviders:pe}=de({variant:t,brand:a,footer:g,footerLinks:_,policyLinks:v,languageLinks:y,languageSwitcher:b,postCard:h,socialProviders:ee,splitPanel:te,renderLink:E,LinkComponent:re}),U=N===`split`&&I,W=we(te),G=ne===`left`,me=T===`stacked`,he=P?Ce({brand:a,renderLink:R}):null,ge=(0,F.jsx)(`main`,{className:S(`auth-shell--main`,`flex min-h-svh w-full items-center justify-center px-4 py-8 sm:px-6 md:px-8`,i===`start`&&`items-start pt-12`,U&&`lg:min-h-svh`,O),children:(0,F.jsxs)(`div`,{className:S(`auth-shell--stack`,`flex w-full flex-col gap-5`,be[n],ie),children:[he,(0,F.jsxs)(ue,{eyebrow:o,title:s,description:c,headerEnd:l,banner:u,media:d,mediaClassName:f,footer:p,className:k,contentClassName:A,children:[!!L&&(0,F.jsxs)(`div`,{className:`auth-shell--social mb-4 grid gap-4`,children:[(0,F.jsx)(_e,{providers:pe,layout:C,renderLink:R,strings:{label:M.socialProvidersLabel}}),(0,F.jsxs)(`div`,{className:`auth-shell--social-divider flex items-center gap-3`,children:[(0,F.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`}),(0,F.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,children:w??M.socialDivider}),(0,F.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`})]})]}),e]}),!!le&&(0,F.jsxs)(`div`,{className:S(`auth-shell--after-card`,`flex flex-col items-center gap-3 text-center`,oe),children:[!!h&&(0,F.jsx)(`div`,{className:`auth-shell--post-card`,children:h}),!!b&&(0,F.jsx)(`div`,{className:`auth-shell--language-switcher`,children:b}),V.length>0&&(0,F.jsx)(H,{className:`auth-shell--language-links`,links:V,leadingIcon:(0,F.jsx)(m,{className:`size-3.5`}),renderLink:R,strings:{label:M.languageLinksLabel}}),z.length>0&&(0,F.jsx)(H,{className:`auth-shell--footer-links`,links:z,renderLink:R,strings:{label:M.footerLinksLabel}}),B.length>0&&(0,F.jsx)(H,{className:`auth-shell--policy-links`,links:B,renderLink:R,strings:{label:M.policyLinksLabel}}),!!g&&(0,F.jsx)(`div`,{className:`auth-shell--footer`,children:g})]})]})});return U?(0,F.jsx)(`div`,{"data-slot":`auth-shell`,"data-variant":`split`,"data-split-side":ne,"data-split-mobile":T,className:S(`auth-shell--component`,`min-h-svh bg-background text-foreground`,D),...ce,children:(0,F.jsxs)(`div`,{className:S(`auth-shell--split-grid min-h-svh lg:grid`,G?`lg:grid-cols-[minmax(0,1fr)_minmax(24rem,34rem)]`:`lg:grid-cols-[minmax(24rem,34rem)_minmax(0,1fr)]`,ae),children:[!!G&&(0,F.jsx)(`div`,{className:S(`auth-shell--split-panel`,me?`block`:`hidden lg:block`,j),children:W}),ge,!G&&(0,F.jsx)(`div`,{className:S(`auth-shell--split-panel`,me?`block`:`hidden lg:block`,j),children:W})]})}):(0,F.jsx)(`div`,{"data-slot":`auth-shell`,"data-variant":`card`,className:S(`auth-shell--component`,`min-h-svh bg-background text-foreground`,D),...ce,children:ge})}function Te(e){return e.find(e=>!e.disabled)}function Ee({options:e=[],value:t,defaultValue:n,onValueChange:r}={}){let i=I.useMemo(()=>e.filter(e=>e.visible!==!1),[e]),a=n??Te(i)?.id,[o,s]=I.useState(a),c=t!==void 0,l=c?t:o,u=i.find(e=>e.id===l),d=I.useCallback(e=>{let t=i.find(t=>t.id===e);!t||t.disabled||(c||s(e),r?.(e,t))},[c,r,i]);return I.useEffect(()=>{c||u||i.length===0||s(Te(i)?.id)},[c,u,i]),{value:l,selectedOption:u,options:i,setValue:d}}function De({options:e=[],value:t,defaultValue:n,onValueChange:i,layout:a=`stack`,divider:o,className:c,strings:l,...u}){let d=x(V,l),{"aria-label":f,...p}=u,{value:m,options:h,setValue:g}=Ee({options:e,value:t,defaultValue:n,onValueChange:i});return h.length===0?null:(0,F.jsxs)(`div`,{className:S(`auth-method-switch--component grid gap-3`,c),...p,children:[o!==null&&o!==!1&&(0,F.jsxs)(`div`,{className:`auth-method-switch--divider flex items-center gap-3`,children:[(0,F.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`}),(0,F.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,children:o??d.divider}),(0,F.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`})]}),(0,F.jsx)(`div`,{role:`group`,"aria-label":f??d.label,"data-layout":a,className:S(`auth-method-switch--options`,a===`grid`&&`grid gap-2 sm:grid-cols-2`,a===`stack`&&`grid gap-2`,a===`segmented`&&`grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-1 rounded-lg border border-border bg-muted/40 p-1`),...u,children:h.map(e=>{let t=e.id===m,n=a===`segmented`;return(0,F.jsx)(s,{type:`button`,"aria-pressed":t,disabled:e.disabled,variant:t?`dark`:`secondary`,buttonStyle:t?`solid`:n?`ghost`:`outline`,fullWidth:!0,className:S(`auth-method-switch--option`,`h-auto min-h-10 justify-start rounded-md px-3 py-2.5 text-start`,n&&`min-h-9 justify-center border-0 px-2 py-2 text-center shadow-none min-[480px]:px-3 min-[480px]:text-start`,t&&`auth-method-switch--option-selected`),onClick:()=>g(e.id),children:(0,F.jsxs)(`span`,{className:S(`auth-method-switch--option-inner flex min-w-0 items-center gap-2`,n&&`w-full flex-col justify-center gap-1 min-[480px]:w-auto min-[480px]:flex-row min-[480px]:justify-start min-[480px]:gap-2`),children:[!!e.icon&&(0,F.jsx)(`span`,{className:`auth-method-switch--option-icon shrink-0`,"aria-hidden":`true`,children:e.icon}),(0,F.jsxs)(`span`,{className:S(`auth-method-switch--option-copy grid min-w-0 gap-0.5`,n&&`justify-items-center min-[480px]:justify-items-start`),children:[(0,F.jsx)(r,{tag:`span`,size:`xs`,weight:`semibold`,className:S(`max-w-full text-inherit leading-tight`,n?`text-center min-[480px]:truncate min-[480px]:text-start`:`text-start`),children:e.label}),!!e.description&&(0,F.jsx)(r,{tag:`span`,size:`xxs`,className:S(n?`hidden min-[480px]:block min-[480px]:truncate`:`text-start leading-snug`,t?`text-inherit opacity-75`:`text-muted-foreground`),children:e.description})]})]})},e.id)})})]})}var Oe=e({CenteredCardAuth:()=>Ue,FrameworkLinkContract:()=>Je,LocalizedPatternCardAuth:()=>Z,ProviderMatrixAuth:()=>We,ResetPasswordAuth:()=>Ge,RightSplitAuthShell:()=>qe,SplitAuthShell:()=>Ke}),q=[{id:`support`,label:`Support`,href:`#/support`},{id:`status`,label:`Status`,href:`https://status.example.com`,external:!0}],J=[{id:`privacy`,label:`Privacy`,href:`#/privacy`},{id:`terms`,label:`Terms`,href:`#/terms`}],ke=[{id:`en`,label:`EN`,href:`#/locale/en`},{id:`bg`,label:`BG`,href:`#/locale/bg`},{id:`el`,label:`EL`,href:`#/locale/el`}],Ae=[{id:`google`,provider:`google`,label:`Google`,href:`#/auth/google`},{id:`github`,provider:`github`,label:`GitHub`,href:`#/auth/github`}],je=[{id:`google`,provider:`google`,label:`Google`,href:`#/auth/google`},{id:`github`,provider:`github`,label:`GitHub`,href:`#/auth/github`},{id:`microsoft`,provider:`microsoft`,label:`Microsoft`,href:`#/auth/microsoft`},{id:`apple`,provider:`apple`,label:`Apple`,href:`#/auth/apple`},{id:`sso`,provider:`sso`,label:`Company SSO`,href:`#/auth/sso`},{id:`custom`,provider:`custom`,label:`Magic link`,href:`#/auth/magic-link`,icon:(0,F.jsx)(_,{className:`size-4`,"aria-hidden":`true`})}],Me=[{id:`magic-link`,label:`Email me a magic link`,description:`Send a single-use sign-in link to the address above.`,icon:(0,F.jsx)(_,{className:`size-3.5`,"aria-hidden":`true`})},{id:`sso`,label:`Continue with company SSO`,description:`Use the identity provider configured by the host app.`,icon:(0,F.jsx)(P,{className:`size-3.5`,"aria-hidden":`true`})}];function Y(){return(0,F.jsx)(`span`,{className:`flex size-9 items-center justify-center rounded-lg bg-foreground text-background`,children:(0,F.jsx)(u,{className:`size-4`,"aria-hidden":`true`})})}function Ne(){return(0,F.jsxs)(`div`,{className:`flex flex-col items-center gap-1 text-center`,children:[(0,F.jsx)(r,{tag:`div`,className:`font-serif text-2xl leading-none tracking-normal text-foreground`,children:`Gift come true`}),(0,F.jsx)(`div`,{className:`h-px w-16 bg-foreground/40`})]})}function X({href:e,children:t,className:n,target:r,rel:i,onClick:a}){return(0,F.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,onClick:a,children:t})}function Pe(){return(0,F.jsxs)(`div`,{className:`relative h-full min-h-16 overflow-hidden`,children:[(0,F.jsx)(`div`,{className:`absolute inset-0 bg-info/15`}),(0,F.jsx)(`div`,{className:`absolute -left-8 top-0 h-24 w-24 rotate-45 border-[10px] border-info/70`}),(0,F.jsx)(`div`,{className:`absolute left-20 -top-6 h-28 w-16 rotate-12 bg-warning/75`}),(0,F.jsx)(`div`,{className:`absolute left-44 top-3 h-20 w-28 rotate-[-18deg] border-[10px] border-success/70`}),(0,F.jsx)(`div`,{className:`absolute right-20 -top-4 h-24 w-12 rotate-45 bg-info/70`}),(0,F.jsx)(`div`,{className:`absolute right-0 top-0 h-20 w-24 rotate-12 border-[10px] border-warning/80`}),(0,F.jsx)(`div`,{className:`absolute inset-x-0 bottom-0 h-3 bg-foreground/80`})]})}function Fe(){return(0,F.jsxs)(`div`,{className:`relative h-full min-h-16 overflow-hidden bg-foreground`,children:[(0,F.jsx)(`div`,{className:`absolute left-0 top-0 h-full w-20 border-e-8 border-warning bg-info/80`}),(0,F.jsx)(`div`,{className:`absolute left-14 top-0 h-24 w-24 rotate-45 border-[10px] border-success`}),(0,F.jsx)(`div`,{className:`absolute left-36 -top-4 h-28 w-16 rotate-12 bg-warning`}),(0,F.jsx)(`div`,{className:`absolute left-52 top-4 h-20 w-32 rotate-[-18deg] border-[10px] border-info`}),(0,F.jsx)(`div`,{className:`absolute right-24 -top-2 h-24 w-20 rotate-45 bg-success`}),(0,F.jsx)(`div`,{className:`absolute right-0 top-0 h-20 w-28 rotate-12 border-[10px] border-warning`})]})}function Ie(){let[e,t]=(0,I.useState)(`password`),n=Me.filter(t=>t.id!==e);return(0,F.jsxs)(`div`,{className:`grid gap-4`,children:[e===`password`&&(0,F.jsxs)(`form`,{className:`grid gap-4`,"aria-label":`Password sign in`,children:[(0,F.jsx)(A,{label:`Email`,required:!0,children:(0,F.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`})}),(0,F.jsx)(A,{label:`Password`,required:!0,children:(0,F.jsx)(h,{placeholder:`Enter your password`,autoComplete:`current-password`,startIcon:g})}),(0,F.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,F.jsxs)(`label`,{className:`flex min-w-0 items-center gap-2`,children:[(0,F.jsx)(ie,{"aria-label":`Remember this device`}),(0,F.jsx)(r,{tag:`span`,size:`xs`,children:`Remember this device`})]}),(0,F.jsx)(s,{type:`button`,size:`xs`,variant:`action`,buttonStyle:`ghost`,className:`h-auto px-1 py-0`,onClick:()=>t(`forgot-password`),children:`Forgot password?`})]}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Sign in`}),(0,F.jsx)(De,{options:n,value:null,onValueChange:e=>t(e)})]}),e===`magic-link`&&(0,F.jsxs)(`form`,{className:`grid gap-4`,"aria-label":`Magic link sign in`,children:[(0,F.jsx)(A,{label:`Work email`,hint:`We will send a single-use link that expires in 15 minutes.`,required:!0,children:(0,F.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`,startIcon:_})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Send magic link`}),(0,F.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,onClick:()=>t(`password`),children:`Use password instead`}),(0,F.jsx)(De,{options:n,value:null,onValueChange:e=>t(e)})]}),e===`sso`&&(0,F.jsxs)(`form`,{className:`grid gap-4`,"aria-label":`SSO sign in`,children:[(0,F.jsx)(A,{label:`Company domain`,hint:`Route the user to the provider owned by the host app.`,required:!0,children:(0,F.jsx)(k,{type:`text`,placeholder:`northwind.com`,autoComplete:`organization`,startIcon:m})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Continue with SSO`}),(0,F.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,onClick:()=>t(`password`),children:`Use password instead`}),(0,F.jsx)(De,{options:n,value:null,onValueChange:e=>t(e)})]}),e===`forgot-password`&&(0,F.jsxs)(`div`,{className:`grid gap-4`,"aria-label":`Forgot password`,children:[(0,F.jsxs)(O,{variant:`info`,children:[(0,F.jsx)(E,{children:`Password reset`}),(0,F.jsx)(D,{children:`Send a recovery link without leaving the auth shell or changing routes first.`})]}),(0,F.jsxs)(`form`,{className:`grid gap-4`,children:[(0,F.jsx)(A,{label:`Account email`,hint:`Use the email connected to your workspace.`,required:!0,children:(0,F.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Send reset link`})]}),(0,F.jsx)(s,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,onClick:()=>t(`password`),children:`Back to password sign in`})]})]})}function Le(){return(0,F.jsxs)(`form`,{className:`grid gap-4`,children:[(0,F.jsx)(A,{label:`Имейл`,required:!0,children:(0,F.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`})}),(0,F.jsx)(A,{label:`Парола`,required:!0,children:(0,F.jsx)(h,{placeholder:`Въведете парола`,autoComplete:`current-password`,startIcon:g,strings:{showPassword:`Покажи паролата`,hidePassword:`Скрий паролата`}})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Вход`})]})}function Re(){return(0,F.jsxs)(`form`,{className:`grid gap-4`,children:[(0,F.jsx)(A,{label:`Work email`,hint:`Use the email address that received the invite.`,required:!0,children:(0,F.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`,startIcon:m})}),(0,F.jsx)(A,{label:`Password`,hint:`Minimum 12 characters.`,required:!0,children:(0,F.jsx)(h,{placeholder:`Create a password`,autoComplete:`new-password`,startIcon:P})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Accept invite`})]})}function ze(){return(0,F.jsxs)(`form`,{className:`grid gap-4`,children:[(0,F.jsx)(A,{label:`Work email`,hint:`We will send a secure one-time code.`,children:(0,F.jsx)(k,{type:`email`,placeholder:`admin@company.com`,autoComplete:`email`})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Send code`})]})}function Be(){return(0,F.jsxs)(`form`,{className:`grid gap-4`,children:[(0,F.jsx)(A,{label:`New password`,hint:`Use at least 12 characters.`,required:!0,children:(0,F.jsx)(h,{autoComplete:`new-password`,placeholder:`Create a new password`})}),(0,F.jsx)(A,{label:`Confirm password`,required:!0,children:(0,F.jsx)(h,{autoComplete:`new-password`,placeholder:`Repeat password`})}),(0,F.jsx)(s,{type:`submit`,fullWidth:!0,children:`Update password`})]})}function Ve(){let e=[{label:`Orders protected`,value:`18.4k`,icon:v},{label:`Team seats`,value:`42`,icon:le},{label:`Risk checks`,value:`99.9%`,icon:d}];return(0,F.jsxs)(`div`,{className:`grid gap-3 p-4`,children:[(0,F.jsxs)(`div`,{className:`rounded-md border border-border/60 bg-card p-4`,children:[(0,F.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,F.jsxs)(`div`,{children:[(0,F.jsx)(r,{size:`xs`,type:`secondary`,children:`Last 30 days`}),(0,F.jsx)(r,{tag:`div`,weight:`semibold`,children:`Operational overview`})]}),(0,F.jsx)(l,{variant:`success`,children:`Live`})]}),(0,F.jsx)(`div`,{className:`mt-4 flex h-24 items-end gap-1.5`,children:[34,42,31,52,48,66,58,72,63,76,68,84].map((e,t)=>(0,F.jsx)(`span`,{className:`flex-1 rounded-t bg-info/70`,style:{height:`${e}%`}},t))})]}),(0,F.jsx)(`div`,{className:`grid gap-2 sm:grid-cols-3`,children:e.map(e=>{let t=e.icon;return(0,F.jsxs)(`div`,{className:`rounded-md border border-border/60 bg-background/80 p-3`,children:[(0,F.jsx)(t,{className:`mb-2 size-4 text-muted-foreground`,"aria-hidden":`true`}),(0,F.jsx)(r,{tag:`div`,weight:`semibold`,children:e.value}),(0,F.jsx)(r,{size:`xs`,type:`secondary`,children:e.label})]},e.label)})})]})}function He(){return(0,F.jsx)(ye,{surface:`card`,eyebrow:`Workspace access`,title:`Secure onboarding for every admin account.`,description:`Use the shell for visual context and trust signals while the app owns the actual auth action, translations, and routing.`,media:(0,F.jsx)(Ve,{}),className:`rounded-lg shadow-sm`,contentClassName:`gap-6 p-5 md:p-7 lg:p-8`,features:[{id:`approval`,icon:(0,F.jsx)(f,{className:`size-4`,"aria-hidden":`true`}),title:`Approval-aware sessions`,description:`Invite, verification, and review states stay visible without crowding the form.`},{id:`audit`,icon:(0,F.jsx)(p,{className:`size-4`,"aria-hidden":`true`}),title:`Audit-friendly copy`,description:`Use concise admin language and keep framework routes at the call site.`}],footer:(0,F.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3`,children:[(0,F.jsx)(r,{size:`xs`,type:`secondary`,children:`Trusted by finance, operations, and support teams.`}),(0,F.jsx)(l,{variant:`success`,children:`SOC2 ready`})]})})}function Ue(){return(0,F.jsx)(K,{brand:{logo:(0,F.jsx)(Y,{}),label:`Northwind Admin`,description:`Operations console`,href:`#/`,ariaLabel:`Northwind Admin home`},title:`Sign in to your workspace`,description:`Use your company account to continue.`,banner:(0,F.jsxs)(O,{variant:`info`,children:[(0,F.jsx)(E,{children:`Single sign-on is available`}),(0,F.jsx)(D,{children:`Company domains can sign in with Google or email.`}),(0,F.jsx)(re,{children:(0,F.jsx)(s,{size:`xs`,variant:`action`,buttonStyle:`ghost`,children:`Learn more`})})]}),socialProviders:Ae,socialProvidersLayout:`grid`,socialDivider:`or use email`,cardFooter:(0,F.jsxs)(r,{size:`xs`,type:`secondary`,children:[`New to Northwind? `,(0,F.jsx)(w,{href:`#/register`,size:`xs`,children:`Request access`})]}),postCard:(0,F.jsx)(r,{size:`xs`,type:`secondary`,children:`Protected by device verification and audit logging.`}),footerLinks:q,policyLinks:J,languageLinks:ke,renderLink:X,children:(0,F.jsx)(Ie,{})})}function Z(){return(0,F.jsx)(K,{size:`md`,brand:(0,F.jsx)(Ne,{}),cardMedia:(0,F.jsx)(Fe,{}),cardMediaClassName:`h-16 min-h-16 overflow-hidden border-b-0 bg-transparent`,title:`Влезте в акаунта си`,description:`Въведете вашите данни, за да получите достъп до таблото.`,cardFooter:(0,F.jsxs)(r,{size:`xs`,type:`secondary`,children:[`Нямате достъп? `,(0,F.jsx)(w,{href:`#/request-access`,size:`xs`,children:`Заявете покана`})]}),languageLinks:[{id:`bg`,label:`Български`,href:`#/locale/bg`},{id:`en`,label:`English`,href:`#/locale/en`}],policyLinks:J,renderLink:X,strings:{languageLinksLabel:`Език`,policyLinksLabel:`Правила`},children:(0,F.jsx)(Le,{})})}function We(){return(0,F.jsx)(K,{brand:{logo:(0,F.jsx)(Y,{}),label:`Northwind Admin`,description:`Identity gateway`,href:`#/`},title:`Choose a sign-in method`,description:`Route every provider through the host app while keeping the button layout consistent.`,socialProviders:je,socialProvidersLayout:`grid`,socialDivider:`or send a one-time code`,footerLinks:q,policyLinks:J,renderLink:X,children:(0,F.jsx)(ze,{})})}function Ge(){return(0,F.jsx)(K,{size:`sm`,brand:{logo:(0,F.jsx)(Y,{}),label:`Northwind Admin`,href:`#/`},title:`Reset your password`,description:`Choose a new password for marina@northwind.test.`,banner:(0,F.jsxs)(O,{variant:`warning`,children:[(0,F.jsx)(E,{children:`Reset link expires soon`}),(0,F.jsx)(D,{children:`For security, this link is valid for another 12 minutes.`})]}),cardFooter:(0,F.jsxs)(r,{size:`xs`,type:`secondary`,children:[`Remembered it? `,(0,F.jsx)(w,{href:`#/login`,size:`xs`,children:`Back to sign in`})]}),policyLinks:J,renderLink:X,children:(0,F.jsx)(Be,{})})}function Ke(){return(0,F.jsx)(K,{variant:`split`,size:`md`,splitSide:`left`,splitMobile:`stacked`,className:`bg-muted/20`,splitPanelClassName:`p-3 lg:p-6`,brand:{logo:(0,F.jsx)(Y,{}),label:`Northwind Admin`,href:`#/`},cardMedia:(0,F.jsx)(Pe,{}),cardMediaClassName:`h-16 min-h-16 overflow-hidden border-b-0 bg-transparent`,eyebrow:`Team invite`,title:`Create your admin account`,description:`Accept the invite and configure your first secure session.`,headerEnd:(0,F.jsx)(l,{variant:`warning`,children:`Invite`}),splitPanel:(0,F.jsx)(He,{}),cardFooter:(0,F.jsxs)(r,{size:`xs`,type:`secondary`,children:[`Already joined? `,(0,F.jsx)(w,{href:`#/login`,size:`xs`,children:`Sign in`})]}),footerLinks:q,policyLinks:J,renderLink:X,children:(0,F.jsx)(Re,{})})}function qe(){return(0,F.jsx)(K,{variant:`split`,size:`sm`,splitSide:`right`,className:`bg-muted/20`,splitPanelClassName:`p-3 lg:p-6`,splitPanel:{surface:`card`,className:`rounded-lg shadow-sm`,contentClassName:`gap-6 p-5 md:p-7 lg:p-8`,eyebrow:`Access policy`,title:`Passwordless flows use the same shell.`,description:`Magic-link, verification, reset-password, and two-factor pages can reuse the same card and after-card areas.`,features:[{id:`configurable`,icon:(0,F.jsx)(y,{className:`size-4`,"aria-hidden":`true`}),title:`Configurable chrome`,description:`Brand, media, footer links, panel, and post-card copy are all slots.`},{id:`framework`,icon:(0,F.jsx)(v,{className:`size-4`,"aria-hidden":`true`}),title:`Framework-neutral links`,description:`Pass renderLink once and the shell uses the host router component.`}]},brand:{logo:(0,F.jsx)(Y,{}),label:`Northwind Admin`,href:`#/`},title:`Check your email`,description:`We sent a one-time sign-in link to marina@northwind.test.`,footerLinks:q,policyLinks:J,languageSwitcher:(0,F.jsx)(s,{size:`xs`,variant:`secondary`,buttonStyle:`outline`,children:`English`}),renderLink:X,children:(0,F.jsxs)(`div`,{className:`grid gap-4`,children:[(0,F.jsxs)(O,{variant:`success`,children:[(0,F.jsx)(E,{children:`Magic link sent`}),(0,F.jsx)(D,{children:`The link expires in 15 minutes.`})]}),(0,F.jsx)(s,{fullWidth:!0,children:`Open mail app`}),(0,F.jsx)(s,{variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,children:`Resend link`})]})})}function Je(){return(0,F.jsxs)(`div`,{className:`max-w-md rounded-lg border border-dashed border-border p-6`,children:[(0,F.jsx)(r,{tag:`div`,weight:`semibold`,children:`Footer links use the host router`}),(0,F.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:`The package never imports Inertia, Next, React Router, or TanStack Router.`}),(0,F.jsx)(H,{className:`mt-4 justify-start`,links:q,renderLink:({href:e,children:t,className:n,target:r,rel:i,onClick:a})=>(0,F.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,onClick:a,"data-router-link":`example`,children:t})})]})}var Q=`import {
+	BarChart3,
+	Building2,
+	CheckCircle2,
+	Clock3,
+	Globe2,
+	KeyRound,
+	LockKeyhole,
+	MailCheck,
+	ShieldCheck,
+	Sparkles,
+	UsersRound,
+} from 'lucide-react';
+import { useState } from 'react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/base/display/alert';
+import { Checkbox, FormField, Input, PasswordInput } from '@/components/base/forms';
+import type { LayoutLinkRenderProps } from '@/components/layout';
+import {
+	AuthFooterLinks,
+	AuthMethodSwitch,
+	AuthShell,
+	AuthSplitPanel,
+	type AuthLink,
+	type AuthMethodOption,
+	type AuthSocialProvider,
+} from '@/components/layout/auth';
+import { Text, TextLink } from '@/components/typography';
+
+const footerLinks: AuthLink[] = [
+	{ id: 'support', label: 'Support', href: '#/support' },
+	{ id: 'status', label: 'Status', href: 'https://status.example.com', external: true },
+];
+
+const policyLinks: AuthLink[] = [
+	{ id: 'privacy', label: 'Privacy', href: '#/privacy' },
+	{ id: 'terms', label: 'Terms', href: '#/terms' },
+];
+
+const languageLinks: AuthLink[] = [
+	{ id: 'en', label: 'EN', href: '#/locale/en' },
+	{ id: 'bg', label: 'BG', href: '#/locale/bg' },
+	{ id: 'el', label: 'EL', href: '#/locale/el' },
+];
+
+const socialProviders: AuthSocialProvider[] = [
+	{ id: 'google', provider: 'google', label: 'Google', href: '#/auth/google' },
+	{ id: 'github', provider: 'github', label: 'GitHub', href: '#/auth/github' },
+];
+
+const providerMatrix: AuthSocialProvider[] = [
+	{ id: 'google', provider: 'google', label: 'Google', href: '#/auth/google' },
+	{ id: 'github', provider: 'github', label: 'GitHub', href: '#/auth/github' },
+	{ id: 'microsoft', provider: 'microsoft', label: 'Microsoft', href: '#/auth/microsoft' },
+	{ id: 'apple', provider: 'apple', label: 'Apple', href: '#/auth/apple' },
+	{ id: 'sso', provider: 'sso', label: 'Company SSO', href: '#/auth/sso' },
+	{
+		id: 'custom',
+		provider: 'custom',
+		label: 'Magic link',
+		href: '#/auth/magic-link',
+		icon: <MailCheck className="size-4" aria-hidden="true" />,
+	},
+];
+
+type AuthDemoMethod = 'password' | 'magic-link' | 'sso' | 'forgot-password';
+
+const alternateAuthMethodOptions: AuthMethodOption[] = [
+	{
+		id: 'magic-link',
+		label: 'Email me a magic link',
+		description: 'Send a single-use sign-in link to the address above.',
+		icon: <MailCheck className="size-3.5" aria-hidden="true" />,
+	},
+	{
+		id: 'sso',
+		label: 'Continue with company SSO',
+		description: 'Use the identity provider configured by the host app.',
+		icon: <KeyRound className="size-3.5" aria-hidden="true" />,
+	},
+];
+
+function LogoMark() {
+	return (
+		<span className="flex size-9 items-center justify-center rounded-lg bg-foreground text-background">
+			<Building2 className="size-4" aria-hidden="true" />
+		</span>
+	);
+}
+
+function Wordmark() {
+	return (
+		<div className="flex flex-col items-center gap-1 text-center">
+			<Text tag="div" className="font-serif text-2xl leading-none tracking-normal text-foreground">
+				Gift come true
+			</Text>
+			<div className="h-px w-16 bg-foreground/40" />
+		</div>
+	);
+}
+
+function renderPreviewLink({
+	href,
+	children,
+	className,
+	target,
+	rel,
+	onClick,
+}: LayoutLinkRenderProps) {
+	return (
+		<a href={href ?? '#'} className={className} target={target} rel={rel} onClick={onClick}>
+			{children}
+		</a>
+	);
+}
+
+function PatternStrip() {
+	return (
+		<div className="relative h-full min-h-16 overflow-hidden">
+			<div className="absolute inset-0 bg-info/15" />
+			<div className="absolute -left-8 top-0 h-24 w-24 rotate-45 border-[10px] border-info/70" />
+			<div className="absolute left-20 -top-6 h-28 w-16 rotate-12 bg-warning/75" />
+			<div className="absolute left-44 top-3 h-20 w-28 rotate-[-18deg] border-[10px] border-success/70" />
+			<div className="absolute right-20 -top-4 h-24 w-12 rotate-45 bg-info/70" />
+			<div className="absolute right-0 top-0 h-20 w-24 rotate-12 border-[10px] border-warning/80" />
+			<div className="absolute inset-x-0 bottom-0 h-3 bg-foreground/80" />
+		</div>
+	);
+}
+
+function DensePatternStrip() {
+	return (
+		<div className="relative h-full min-h-16 overflow-hidden bg-foreground">
+			<div className="absolute left-0 top-0 h-full w-20 border-e-8 border-warning bg-info/80" />
+			<div className="absolute left-14 top-0 h-24 w-24 rotate-45 border-[10px] border-success" />
+			<div className="absolute left-36 -top-4 h-28 w-16 rotate-12 bg-warning" />
+			<div className="absolute left-52 top-4 h-20 w-32 rotate-[-18deg] border-[10px] border-info" />
+			<div className="absolute right-24 -top-2 h-24 w-20 rotate-45 bg-success" />
+			<div className="absolute right-0 top-0 h-20 w-28 rotate-12 border-[10px] border-warning" />
+		</div>
+	);
+}
+
+function LoginForm() {
+	const [method, setMethod] = useState<AuthDemoMethod>('password');
+	const alternateOptions = alternateAuthMethodOptions.filter((option) => option.id !== method);
+
+	return (
+		<div className="grid gap-4">
+			{method === 'password' && (
+				<form className="grid gap-4" aria-label="Password sign in">
+					<FormField label="Email" required>
+						<Input type="email" placeholder="you@company.com" autoComplete="email" />
+					</FormField>
+
+					<FormField label="Password" required>
+						<PasswordInput
+							placeholder="Enter your password"
+							autoComplete="current-password"
+							startIcon={LockKeyhole}
+						/>
+					</FormField>
+
+					<div className="flex items-center justify-between gap-3">
+						<label className="flex min-w-0 items-center gap-2">
+							<Checkbox aria-label="Remember this device" />
+							<Text tag="span" size="xs">
+								Remember this device
+							</Text>
+						</label>
+						<Button
+							type="button"
+							size="xs"
+							variant="action"
+							buttonStyle="ghost"
+							className="h-auto px-1 py-0"
+							onClick={() => setMethod('forgot-password')}
+						>
+							Forgot password?
+						</Button>
+					</div>
+
+					<Button type="submit" fullWidth>
+						Sign in
+					</Button>
+
+					<AuthMethodSwitch
+						options={alternateOptions}
+						value={null}
+						onValueChange={(nextValue) => setMethod(nextValue as AuthDemoMethod)}
+					/>
+				</form>
+			)}
+
+			{method === 'magic-link' && (
+				<form className="grid gap-4" aria-label="Magic link sign in">
+					<FormField label="Work email" hint="We will send a single-use link that expires in 15 minutes." required>
+						<Input type="email" placeholder="you@company.com" autoComplete="email" startIcon={MailCheck} />
+					</FormField>
+
+					<Button type="submit" fullWidth>
+						Send magic link
+					</Button>
+					<Button
+						type="button"
+						variant="secondary"
+						buttonStyle="outline"
+						fullWidth
+						onClick={() => setMethod('password')}
+					>
+						Use password instead
+					</Button>
+
+					<AuthMethodSwitch
+						options={alternateOptions}
+						value={null}
+						onValueChange={(nextValue) => setMethod(nextValue as AuthDemoMethod)}
+					/>
+				</form>
+			)}
+
+			{method === 'sso' && (
+				<form className="grid gap-4" aria-label="SSO sign in">
+					<FormField label="Company domain" hint="Route the user to the provider owned by the host app." required>
+						<Input type="text" placeholder="northwind.com" autoComplete="organization" startIcon={Globe2} />
+					</FormField>
+
+					<Button type="submit" fullWidth>
+						Continue with SSO
+					</Button>
+					<Button
+						type="button"
+						variant="secondary"
+						buttonStyle="outline"
+						fullWidth
+						onClick={() => setMethod('password')}
+					>
+						Use password instead
+					</Button>
+
+					<AuthMethodSwitch
+						options={alternateOptions}
+						value={null}
+						onValueChange={(nextValue) => setMethod(nextValue as AuthDemoMethod)}
+					/>
+				</form>
+			)}
+
+			{method === 'forgot-password' && (
+				<div className="grid gap-4" aria-label="Forgot password">
+					<Alert variant="info">
+						<AlertTitle>Password reset</AlertTitle>
+						<AlertDescription>
+							Send a recovery link without leaving the auth shell or changing routes first.
+						</AlertDescription>
+					</Alert>
+					<form className="grid gap-4">
+						<FormField label="Account email" hint="Use the email connected to your workspace." required>
+							<Input type="email" placeholder="you@company.com" autoComplete="email" />
+						</FormField>
+
+						<Button type="submit" fullWidth>
+							Send reset link
+						</Button>
+					</form>
+					<Button
+						type="button"
+						variant="secondary"
+						buttonStyle="outline"
+						fullWidth
+						onClick={() => setMethod('password')}
+					>
+						Back to password sign in
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function LocalizedLoginForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="Имейл" required>
+				<Input type="email" placeholder="you@company.com" autoComplete="email" />
+			</FormField>
+
+			<FormField label="Парола" required>
+				<PasswordInput
+					placeholder="Въведете парола"
+					autoComplete="current-password"
+					startIcon={LockKeyhole}
+					strings={{
+						showPassword: 'Покажи паролата',
+						hidePassword: 'Скрий паролата',
+					}}
+				/>
+			</FormField>
+
+			<Button type="submit" fullWidth>
+				Вход
+			</Button>
+		</form>
+	);
+}
+
+function InviteForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="Work email" hint="Use the email address that received the invite." required>
+				<Input type="email" placeholder="you@company.com" autoComplete="email" startIcon={Globe2} />
+			</FormField>
+
+			<FormField label="Password" hint="Minimum 12 characters." required>
+				<PasswordInput placeholder="Create a password" autoComplete="new-password" startIcon={KeyRound} />
+			</FormField>
+
+			<Button type="submit" fullWidth>
+				Accept invite
+			</Button>
+		</form>
+	);
+}
+
+function OneTimeCodeForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="Work email" hint="We will send a secure one-time code.">
+				<Input type="email" placeholder="admin@company.com" autoComplete="email" />
+			</FormField>
+			<Button type="submit" fullWidth>
+				Send code
+			</Button>
+		</form>
+	);
+}
+
+function ResetPasswordForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="New password" hint="Use at least 12 characters." required>
+				<PasswordInput autoComplete="new-password" placeholder="Create a new password" />
+			</FormField>
+			<FormField label="Confirm password" required>
+				<PasswordInput autoComplete="new-password" placeholder="Repeat password" />
+			</FormField>
+			<Button type="submit" fullWidth>
+				Update password
+			</Button>
+		</form>
+	);
+}
+
+function MetricsPreview() {
+	const rows = [
+		{ label: 'Orders protected', value: '18.4k', icon: ShieldCheck },
+		{ label: 'Team seats', value: '42', icon: UsersRound },
+		{ label: 'Risk checks', value: '99.9%', icon: BarChart3 },
+	];
+
+	return (
+		<div className="grid gap-3 p-4">
+			<div className="rounded-md border border-border/60 bg-card p-4">
+				<div className="flex items-center justify-between gap-3">
+					<div>
+						<Text size="xs" type="secondary">
+							Last 30 days
+						</Text>
+						<Text tag="div" weight="semibold">
+							Operational overview
+						</Text>
+					</div>
+					<Badge variant="success">Live</Badge>
+				</div>
+				<div className="mt-4 flex h-24 items-end gap-1.5">
+					{[34, 42, 31, 52, 48, 66, 58, 72, 63, 76, 68, 84].map((height, index) => (
+						<span
+							key={index}
+							className="flex-1 rounded-t bg-info/70"
+							style={{ height: \`\${height}%\` }}
+						/>
+					))}
+				</div>
+			</div>
+
+			<div className="grid gap-2 sm:grid-cols-3">
+				{rows.map((row) => {
+					const Icon = row.icon;
+					return (
+						<div key={row.label} className="rounded-md border border-border/60 bg-background/80 p-3">
+							<Icon className="mb-2 size-4 text-muted-foreground" aria-hidden="true" />
+							<Text tag="div" weight="semibold">
+								{row.value}
+							</Text>
+							<Text size="xs" type="secondary">
+								{row.label}
+							</Text>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+function InvitePanel() {
+	return (
+		<AuthSplitPanel
+			surface="card"
+			eyebrow="Workspace access"
+			title="Secure onboarding for every admin account."
+			description="Use the shell for visual context and trust signals while the app owns the actual auth action, translations, and routing."
+			media={<MetricsPreview />}
+			className="rounded-lg shadow-sm"
+			contentClassName="gap-6 p-5 md:p-7 lg:p-8"
+			features={[
+				{
+					id: 'approval',
+					icon: <CheckCircle2 className="size-4" aria-hidden="true" />,
+					title: 'Approval-aware sessions',
+					description: 'Invite, verification, and review states stay visible without crowding the form.',
+				},
+				{
+					id: 'audit',
+					icon: <Clock3 className="size-4" aria-hidden="true" />,
+					title: 'Audit-friendly copy',
+					description: 'Use concise admin language and keep framework routes at the call site.',
+				},
+			]}
+			footer={
+				<div className="flex flex-wrap items-center justify-between gap-3">
+					<Text size="xs" type="secondary">
+						Trusted by finance, operations, and support teams.
+					</Text>
+					<Badge variant="success">SOC2 ready</Badge>
+				</div>
+			}
+		/>
+	);
+}
+
+export function CenteredCardAuth() {
+	return (
+		<AuthShell
+			brand={{
+				logo: <LogoMark />,
+				label: 'Northwind Admin',
+				description: 'Operations console',
+				href: '#/',
+				ariaLabel: 'Northwind Admin home',
+			}}
+			title="Sign in to your workspace"
+			description="Use your company account to continue."
+			banner={
+				<Alert variant="info">
+					<AlertTitle>Single sign-on is available</AlertTitle>
+					<AlertDescription>Company domains can sign in with Google or email.</AlertDescription>
+					<AlertAction>
+						<Button size="xs" variant="action" buttonStyle="ghost">
+							Learn more
+						</Button>
+					</AlertAction>
+				</Alert>
+			}
+			socialProviders={socialProviders}
+			socialProvidersLayout="grid"
+			socialDivider="or use email"
+			cardFooter={
+				<Text size="xs" type="secondary">
+					New to Northwind? <TextLink href="#/register" size="xs">Request access</TextLink>
+				</Text>
+			}
+			postCard={
+				<Text size="xs" type="secondary">
+					Protected by device verification and audit logging.
+				</Text>
+			}
+			footerLinks={footerLinks}
+			policyLinks={policyLinks}
+			languageLinks={languageLinks}
+			renderLink={renderPreviewLink}
+		>
+			<LoginForm />
+		</AuthShell>
+	);
+}
+
+export function LocalizedPatternCardAuth() {
+	return (
+		<AuthShell
+			size="md"
+			brand={<Wordmark />}
+			cardMedia={<DensePatternStrip />}
+			cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+			title="Влезте в акаунта си"
+			description="Въведете вашите данни, за да получите достъп до таблото."
+			cardFooter={
+				<Text size="xs" type="secondary">
+					Нямате достъп? <TextLink href="#/request-access" size="xs">Заявете покана</TextLink>
+				</Text>
+			}
+			languageLinks={[
+				{ id: 'bg', label: 'Български', href: '#/locale/bg' },
+				{ id: 'en', label: 'English', href: '#/locale/en' },
+			]}
+			policyLinks={policyLinks}
+			renderLink={renderPreviewLink}
+			strings={{
+				languageLinksLabel: 'Език',
+				policyLinksLabel: 'Правила',
+			}}
+		>
+			<LocalizedLoginForm />
+		</AuthShell>
+	);
+}
+
+export function ProviderMatrixAuth() {
+	return (
+		<AuthShell
+			brand={{
+				logo: <LogoMark />,
+				label: 'Northwind Admin',
+				description: 'Identity gateway',
+				href: '#/',
+			}}
+			title="Choose a sign-in method"
+			description="Route every provider through the host app while keeping the button layout consistent."
+			socialProviders={providerMatrix}
+			socialProvidersLayout="grid"
+			socialDivider="or send a one-time code"
+			footerLinks={footerLinks}
+			policyLinks={policyLinks}
+			renderLink={renderPreviewLink}
+		>
+			<OneTimeCodeForm />
+		</AuthShell>
+	);
+}
+
+export function ResetPasswordAuth() {
+	return (
+		<AuthShell
+			size="sm"
+			brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
+			title="Reset your password"
+			description="Choose a new password for marina@northwind.test."
+			banner={
+				<Alert variant="warning">
+					<AlertTitle>Reset link expires soon</AlertTitle>
+					<AlertDescription>For security, this link is valid for another 12 minutes.</AlertDescription>
+				</Alert>
+			}
+			cardFooter={
+				<Text size="xs" type="secondary">
+					Remembered it? <TextLink href="#/login" size="xs">Back to sign in</TextLink>
+				</Text>
+			}
+			policyLinks={policyLinks}
+			renderLink={renderPreviewLink}
+		>
+			<ResetPasswordForm />
+		</AuthShell>
+	);
+}
+
+export function SplitAuthShell() {
+	return (
+		<AuthShell
+			variant="split"
+			size="md"
+			splitSide="left"
+			splitMobile="stacked"
+			className="bg-muted/20"
+			splitPanelClassName="p-3 lg:p-6"
+			brand={{
+				logo: <LogoMark />,
+				label: 'Northwind Admin',
+				href: '#/',
+			}}
+			cardMedia={<PatternStrip />}
+			cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+			eyebrow="Team invite"
+			title="Create your admin account"
+			description="Accept the invite and configure your first secure session."
+			headerEnd={<Badge variant="warning">Invite</Badge>}
+			splitPanel={<InvitePanel />}
+			cardFooter={
+				<Text size="xs" type="secondary">
+					Already joined? <TextLink href="#/login" size="xs">Sign in</TextLink>
+				</Text>
+			}
+			footerLinks={footerLinks}
+			policyLinks={policyLinks}
+			renderLink={renderPreviewLink}
+		>
+			<InviteForm />
+		</AuthShell>
+	);
+}
+
+export function RightSplitAuthShell() {
+	return (
+		<AuthShell
+			variant="split"
+			size="sm"
+			splitSide="right"
+			className="bg-muted/20"
+			splitPanelClassName="p-3 lg:p-6"
+			splitPanel={{
+				surface: 'card',
+				className: 'rounded-lg shadow-sm',
+				contentClassName: 'gap-6 p-5 md:p-7 lg:p-8',
+				eyebrow: 'Access policy',
+				title: 'Passwordless flows use the same shell.',
+				description: 'Magic-link, verification, reset-password, and two-factor pages can reuse the same card and after-card areas.',
+				features: [
+					{
+						id: 'configurable',
+						icon: <Sparkles className="size-4" aria-hidden="true" />,
+						title: 'Configurable chrome',
+						description: 'Brand, media, footer links, panel, and post-card copy are all slots.',
+					},
+					{
+						id: 'framework',
+						icon: <ShieldCheck className="size-4" aria-hidden="true" />,
+						title: 'Framework-neutral links',
+						description: 'Pass renderLink once and the shell uses the host router component.',
+					},
+				],
+			}}
+			brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
+			title="Check your email"
+			description="We sent a one-time sign-in link to marina@northwind.test."
+			footerLinks={footerLinks}
+			policyLinks={policyLinks}
+			languageSwitcher={
+				<Button size="xs" variant="secondary" buttonStyle="outline">
+					English
+				</Button>
+			}
+			renderLink={renderPreviewLink}
+		>
+			<div className="grid gap-4">
+				<Alert variant="success">
+					<AlertTitle>Magic link sent</AlertTitle>
+					<AlertDescription>The link expires in 15 minutes.</AlertDescription>
+				</Alert>
+				<Button fullWidth>Open mail app</Button>
+				<Button variant="secondary" buttonStyle="outline" fullWidth>
+					Resend link
+				</Button>
+			</div>
+		</AuthShell>
+	);
+}
+
+export function FrameworkLinkContract() {
+	const adapter = ({
+		href,
+		children,
+		className,
+		target,
+		rel,
+		onClick,
+	}: LayoutLinkRenderProps) => (
+		<a
+			href={href ?? '#'}
+			className={className}
+			target={target}
+			rel={rel}
+			onClick={onClick}
+			data-router-link="example"
+		>
+			{children}
+		</a>
+	);
+
+	return (
+		<div className="max-w-md rounded-lg border border-dashed border-border p-6">
+			<Text tag="div" weight="semibold">
+				Footer links use the host router
+			</Text>
+			<Text size="xs" type="secondary" className="mt-1">
+				The package never imports Inertia, Next, React Router, or TanStack Router.
+			</Text>
+			<AuthFooterLinks
+				className="mt-4 justify-start"
+				links={footerLinks}
+				renderLink={adapter}
+			/>
+		</div>
+	);
+}
+`;function Ye(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return Oe||$(`Examples`,!1),Ue||$(`Examples.CenteredCardAuth`,!0),Je||$(`Examples.FrameworkLinkContract`,!0),Z||$(`Examples.LocalizedPatternCardAuth`,!0),We||$(`Examples.ProviderMatrixAuth`,!0),Ge||$(`Examples.ResetPasswordAuth`,!0),qe||$(`Examples.RightSplitAuthShell`,!0),Ke||$(`Examples.SplitAuthShell`,!0),(0,F.jsxs)(a,{title:`Layout · Auth shell`,description:`Framework-neutral auth card and split shells for login, register, invite, reset, magic-link, and verification pages.`,layer:`layout`,status:`ready`,sourcePath:`src/components/layout/auth`,children:[(0,F.jsxs)(o,{title:`Overview`,id:`overview`,children:[(0,F.jsxs)(t.p,{children:[(0,F.jsx)(t.code,{children:`AuthShell`}),` owns the reusable auth chrome: centered card layout, split panel
+layout, brand area, full-bleed card media strip, social-provider buttons,
+language rows with a globe marker, policy/footer link rows, card header,
+after-card support copy, and footer slots. `,(0,F.jsx)(t.code,{children:`AuthMethodSwitch`}),` renders alternate
+login strategies as explicit buttons behind a divider, with controlled or
+uncontrolled state for magic-link, SSO, recovery, or any other consumer-owned
+auth state. The consuming app still owns the auth form, request action, route
+names, translations, language state, and framework link component.`]}),(0,F.jsxs)(t.p,{children:[`Use `,(0,F.jsx)(t.code,{children:`renderLink`}),` for every router-specific link. This is the same layout link
+contract used by header, sidebar, breadcrumbs, and page actions, so Inertia,
+Next, React Router, TanStack Router, or plain anchors stay app-owned.`]})]}),(0,F.jsx)(o,{title:`Consumer usage`,id:`usage`,children:(0,F.jsx)(t.pre,{children:(0,F.jsx)(t.code,{className:`language-tsx`,children:`import { AuthShell } from 'admin-ui-starter-kit/layout/auth';
+import { AuthMethodSwitch } from 'admin-ui-starter-kit/layout/auth';
+import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { FormField, Input, PasswordInput } from 'admin-ui-starter-kit/base/forms';
+
+<AuthShell
+	brand={{ logo: <Logo />, label: 'Acme Admin', href: '/' }}
+	cardMedia={<PatternStrip />}
+	cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+	title="Sign in"
+	description="Use your company account to continue."
+	socialProviders={[
+		{ provider: 'google', label: 'Google', href: '/auth/google' },
+		{ provider: 'github', label: 'GitHub', href: '/auth/github' },
+	]}
+	footerLinks={[
+		{ label: 'Support', href: '/support' },
+	]}
+	policyLinks={[
+		{ label: 'Privacy', href: '/privacy' },
+		{ label: 'Terms', href: '/terms' },
+	]}
+	languageLinks={[
+		{ label: 'EN', href: '/locale/en' },
+		{ label: 'BG', href: '/locale/bg' },
+	]}
+	renderLink={({ href, children, className }) => (
+		<AppLink href={href ?? '#'} className={className}>{children}</AppLink>
+	)}
+>
+	<form onSubmit={submit}>
+		<FormField label="Email" required>
+			<Input type="email" autoComplete="email" />
+		</FormField>
+		<FormField label="Password" required>
+			<PasswordInput autoComplete="current-password" />
+		</FormField>
+		<Button type="submit" fullWidth>Continue</Button>
+		<AuthMethodSwitch
+			value={method === 'password' ? null : method}
+			onValueChange={setMethod}
+			options={[
+				{ id: 'magic-link', label: 'Email me a magic link' },
+				{ id: 'sso', label: 'Continue with company SSO' },
+			]}
+		/>
+	</form>
+</AuthShell>
+`})})}),(0,F.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,F.jsx)(c,{name:`CenteredCardAuth`,description:`Centered login card with brand, alert banner, password form, forgot-password toggle, alternate strategy buttons behind a divider, footer, and framework-neutral links.`,source:Q,children:(0,F.jsx)(Ue,{})}),(0,F.jsx)(c,{name:`LocalizedPatternCardAuth`,description:`Localized card layout with a full-bleed top pattern, logo, language links, and policy links.`,source:Q,children:(0,F.jsx)(Z,{})}),(0,F.jsx)(c,{name:`ProviderMatrixAuth`,description:`Provider grid covering Google, GitHub, Microsoft, Apple, SSO, and a custom magic-link provider.`,source:Q,children:(0,F.jsx)(We,{})}),(0,F.jsx)(c,{name:`ResetPasswordAuth`,description:`Reset-password card with warning banner and two password reveal fields.`,source:Q,children:(0,F.jsx)(Ge,{})}),(0,F.jsx)(c,{name:`SplitAuthShell`,description:`Modern split auth page with a reusable card-style side panel, feature rows, and a stacked mobile panel.`,source:Q,children:(0,F.jsx)(Ke,{})}),(0,F.jsx)(c,{name:`RightSplitAuthShell`,description:`Right-side split panel with constrained form column and card-style panel surface.`,source:Q,children:(0,F.jsx)(qe,{})}),(0,F.jsx)(c,{name:`FrameworkLinkContract`,description:`Footer links rendered through the host app link adapter.`,source:Q,children:(0,F.jsx)(Je,{})})]}),(0,F.jsxs)(o,{title:`API`,id:`api`,children:[(0,F.jsx)(t.h4,{children:`AuthShell`}),(0,F.jsx)(C,{component:`AuthShell`}),(0,F.jsx)(t.h4,{children:`AuthCard`}),(0,F.jsx)(C,{component:`AuthCard`}),(0,F.jsx)(t.h4,{children:`AuthSplitPanel`}),(0,F.jsx)(C,{component:`AuthSplitPanel`}),(0,F.jsx)(t.h4,{children:`AuthFooterLinks`}),(0,F.jsx)(C,{component:`AuthFooterLinks`}),(0,F.jsx)(t.h4,{children:`AuthMethodSwitch`}),(0,F.jsx)(C,{component:`AuthMethodSwitch`}),(0,F.jsx)(t.h4,{children:`AuthSocialProviders`}),(0,F.jsx)(C,{component:`AuthSocialProviders`}),(0,F.jsx)(t.h4,{children:`AuthSocialProviderButton`}),(0,F.jsx)(C,{component:`AuthSocialProviderButton`})]})]})}function Xe(e={}){let{wrapper:t}=e.components||{};return t?(0,F.jsx)(t,{...e,children:(0,F.jsx)(Ye,{...e})}):Ye(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Xe as default};