@tempots/beatui 0.51.5 → 0.53.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auth/index.cjs.js +1 -1
- package/dist/auth/index.es.js +28 -27
- package/dist/beatui.css +76 -0
- package/dist/beatui.tailwind.css +76 -0
- package/dist/index.cjs.js +2 -2
- package/dist/index.es.js +1370 -1306
- package/dist/types/components/auth/types.d.ts +1 -1
- package/dist/types/components/overlay/announcement-bar.d.ts +21 -0
- package/dist/types/components/overlay/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/auth/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@tempots/dom"),u=require("../notice-DLDzwKkw.cjs"),g=require("../modal-O7QoP7Zv.cjs"),y=require("../translations-D77sU1Wl.cjs"),I=require("../translations-BAk3j4bi.cjs"),Z=require("@tempots/ui"),C={google:{name:"Google",icon:"logos:google-icon",color:"#4285f4"},github:{name:"GitHub",icon:"logos:github-icon",color:"#333"},apple:{name:"Apple",icon:"logos:apple",color:"#000"},facebook:{name:"Facebook",icon:"logos:facebook",color:"#1877f2"},twitter:{name:"Twitter",icon:"logos:twitter",color:"#1da1f2"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"#00a4ef"},discord:{name:"Discord",icon:"logos:discord-icon",color:"#5865f2"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"#0077b5"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"#e4405f"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"#000"},snapchat:{name:"Snapchat",icon:"logos:snapchat-icon",color:"#fffc00"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"#ff4500"},pinterest:{name:"Pinterest",icon:"logos:pinterest-icon",color:"#bd081c"},twitch:{name:"Twitch",icon:"logos:twitch",color:"#9146ff"},steam:{name:"Steam",icon:"logos:steam-icon",color:"#000"},epic:{name:"Epic Games",icon:"simple-icons:epicgames",color:"#313131"},playstation:{name:"PlayStation",icon:"logos:playstation-icon",color:"#003791"},xbox:{name:"Xbox",icon:"logos:xbox-icon",color:"#107c10"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"#25d366"},wechat:{name:"WeChat",icon:"logos:wechat-icon",color:"#1aad19"},amazon:{name:"Amazon",icon:"logos:amazon-icon",color:"#ff9900"},yahoo:{name:"Yahoo",icon:"logos:yahoo-icon",color:"#720e9e"},paypal:{name:"PayPal",icon:"logos:paypal",color:"#0070ba"},x:{name:"X",icon:"simple-icons:x",color:"#000"}};function R(o){return C[o]?.name||o}function J(o){return C[o]?.icon||"mdi:account"}function K(o){return C[o]?.color||"#666"}function Q(o,e="Continue with {provider}"){return e.replace("{provider}",R(o))}const B={minLength:8,requireUppercase:!0,requireLowercase:!0,requireNumbers:!0,requireSymbols:!1};function tt(o){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o)}function M(o=32){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let l=0;l<o;l++)i+=e.charAt(Math.floor(Math.random()*e.length));return i}function ot(o,e,i,l=[],c={}){const n={google:"https://accounts.google.com/oauth/authorize",github:"https://github.com/login/oauth/authorize",apple:"https://appleid.apple.com/auth/authorize",facebook:"https://www.facebook.com/v18.0/dialog/oauth",twitter:"https://twitter.com/i/oauth2/authorize",microsoft:"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",discord:"https://discord.com/api/oauth2/authorize",linkedin:"https://www.linkedin.com/oauth/v2/authorization",instagram:"https://api.instagram.com/oauth/authorize",tiktok:"https://www.tiktok.com/v2/auth/authorize",snapchat:"https://accounts.snapchat.com/accounts/oauth2/authorize",reddit:"https://www.reddit.com/api/v1/authorize",pinterest:"https://api.pinterest.com/oauth/",twitch:"https://id.twitch.tv/oauth2/authorize",steam:"https://steamcommunity.com/oauth/authorize",epic:"https://auth.epicgames.com/authorize",playstation:"https://auth.api.sonyentertainmentnetwork.com/oauth/authorize",xbox:"https://login.live.com/oauth20_authorize.srf",whatsapp:"https://web.whatsapp.com/oauth/authorize",wechat:"https://open.weixin.qq.com/connect/qrconnect",amazon:"https://www.amazon.com/ap/oa",yahoo:"https://api.login.yahoo.com/oauth2/request_auth",paypal:"https://www.paypal.com/signin/authorize",x:"https://api.twitter.com/oauth2/authorize"},m={google:["openid","email","profile"],github:["user:email"],apple:["email","name"],facebook:["email"],twitter:["users.read"],microsoft:["openid","email","profile"],discord:["identify","email"],linkedin:["r_liteprofile","r_emailaddress"],instagram:["user_profile","user_media"],tiktok:["user.info.basic","user.external.id"],snapchat:["user.info.basic","user.external.id"],reddit:["identity","email"],pinterest:["read_public","read_relationships"],twitch:["openid","email","profile"],steam:["openid","email","profile"],epic:["openid","email","profile"],playstation:["openid","email","profile"],xbox:["openid","email","profile"],whatsapp:["openid","email","profile"],wechat:["openid","email","profile"],amazon:["openid","email","profile"],yahoo:["openid","email","profile"],paypal:["openid","email","profile"],x:["openid","email","profile"]},a=n[o];if(!a)throw new Error(`Unsupported provider: ${o}`);const r=l.length>0?l:m[o],s=M(),h=new URLSearchParams({client_id:e,redirect_uri:i,scope:r.join(" "),state:s,response_type:"code",...c});return`${a}?${h.toString()}`}function et(o,e,i,l){const c=window.open(o,`${e}_login`,"width=500,height=600,scrollbars=yes,resizable=yes");if(!c){l?.(new Error("Failed to open popup window"));return}const n=setInterval(()=>{c.closed&&(clearInterval(n),l?.(new Error("Login cancelled")))},1e3),m=a=>{a.origin===window.location.origin&&(a.data.type==="SOCIAL_LOGIN_SUCCESS"?(clearInterval(n),c.close(),window.removeEventListener("message",m),i?.(a.data.result)):a.data.type==="SOCIAL_LOGIN_ERROR"&&(clearInterval(n),c.close(),window.removeEventListener("message",m),l?.(new Error(a.data.error))))};window.addEventListener("message",m)}function at(o){return o instanceof Error?o.message:typeof o=="string"?o:o&&typeof o=="object"&&"message"in o?String(o.message):"An unexpected error occurred"}function nt(){return typeof window<"u"&&typeof document<"u"}function T({task:o,message:e,onStart:i,onEnd:l}){return async c=>{i?.();const n=await u.taskToValidation({task:o!=null?()=>o(c):async()=>null,errorMessage:e,errorPath:["root"],validation:m=>m!=null?u.a.invalid({message:m}):u.a.valid});return l?.(),n}}function $(o=B){let e=g.string();return o.minLength&&(e=e.min(o.minLength,`Password must be at least ${o.minLength} characters`)),o.requireUppercase&&(e=e.regex(/[A-Z]/,"Password must contain at least one uppercase letter")),o.requireLowercase&&(e=e.regex(/[a-z]/,"Password must contain at least one lowercase letter")),o.requireNumbers&&(e=e.regex(/[0-9]/,"Password must contain at least one number")),o.requireSymbols&&(e=e.regex(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,"Password must contain at least one special character")),o.customValidation&&(e=e.refine(i=>o.customValidation(i))),e}const x=g.string().min(1,"Email is required").email("Please enter a valid email address");function O(o){const e=o?$(o):g.string().refine(i=>i.length>0?null:"Password is required");return g.object({email:x,password:e,rememberMe:g.boolean().default(!1)}).schema()}function z(o=B,e){const i=$(o),l=e?.showNameField!==!1,c=e?.showConfirmPassword!==!1,n=e?.showAcceptTermsAndConditions!==!1,m={name:l?g.string().min(1,"Name is required").optional():g.string().optional(),email:x,password:i,confirmPassword:c?g.string().min(1,"Please confirm your password"):g.string(),acceptTerms:n?g.boolean().refine(r=>r===!0,"You must accept the terms and conditions"):g.boolean().default(!0)},a=g.object(m);return c?a.refine(r=>r.password===r.confirmPassword?null:"Passwords don't match",{path:["confirmPassword"]}).schema():a.schema()}const D=g.object({email:x}).schema(),rt=O(),st=z(),it={signIn:O,signUp:z,resetPassword:()=>D};function ct(o){const e=x.validate(o);return e.success?null:e.errors[0]?.message||"Invalid email"}function lt(o,e=B){const l=$(e).validate(o);return l.success?null:l.errors[0]?.message||"Invalid password"}function E(o,e=B){const i={length:o.length>=(e.minLength||8),uppercase:/[A-Z]/.test(o),lowercase:/[a-z]/.test(o),numbers:/[0-9]/.test(o),symbols:/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(o),custom:e.customValidation?e.customValidation(o)===null:o.length>0},l=[!0,e.requireUppercase,e.requireLowercase,e.requireNumbers,e.requireSymbols,!!e.customValidation].filter(Boolean).length,c=[i.length,e.requireUppercase?i.uppercase:null,e.requireLowercase?i.lowercase:null,e.requireNumbers?i.numbers:null,e.requireSymbols?i.symbols:null,e.customValidation?i.custom:null].filter(a=>a===!0).length,n=l>0?Math.round(c/l*100):0;let m;return n<40?m="weak":n<60?m="fair":n<80?m="good":m="strong",{strength:m,score:n,checks:i}}const V=()=>t.localStorageProp({key:"bui_auth_email",defaultValue:null});function N({onSignIn:o,passwordRules:e,labels:i,showRememberMe:l}){const c=t.prop(!1),n=V(),m=O(e),a=u.useForm({schema:m,onSubmit:T({task:o,message:"Reset password failed",onStart:()=>{c.set(!0),a.controller.disable()},onEnd:()=>{c.set(!1),a.controller.enable()}}),initialValue:{email:"",password:""}}),{controller:r,submit:s}=a;c.on(r.setDisabled);const h=r.field("email"),f=r.field("password");return n.on(b=>{b!=null&&h.change(b)}),h.signal.on(b=>{n.value!=null&&(n.value=b)}),t.Use(y.AuthI18n,b=>t.html.form(t.OnDispose(r.dispose,n.dispose,c.dispose),t.attr.class("bc-auth-form__form"),t.on.submit(s),u.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(r.error,L=>u.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(L))),u.Control(u.EmailInput,{controller:h,label:t.coalesce(i?.emailLabel,b.$.emailLabel)}),u.Control(u.PasswordInput,{controller:f,label:t.coalesce(i?.passwordLabel,b.$.passwordLabel)}),t.When(l??!0,()=>t.html.div(t.attr.class("bc-auth-form__remember-me"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),u.CheckboxInput({value:n.map(L=>L!=null),after:t.html.span(t.coalesce(i?.rememberMeLabel,b.$.rememberMeLabel)),onChange:L=>{L?n.value=h.signal.value??"":n.value=null}}))))),I.Button({type:"submit",variant:"filled",color:"primary",loading:c,disabled:r.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(i?.signInButton,b.$.signInButton))))}function G({password:o,rules:e=B,showLabel:i=!0,className:l}){const c=t.computedOf(o)(s=>!s||s.length===0?{strength:"weak",score:0,checks:{length:!1,uppercase:!1,lowercase:!1,numbers:!1,symbols:!1,custom:!1}}:E(s,e)),n=c.map(s=>s.strength),m=c.map(s=>s.score),a=c.map(s=>s.checks),r=t.computedOf(n,l)((s,h)=>["bc-password-strength",`bc-password-strength--${s}`,h].filter(Boolean).join(" "));return t.html.div(t.OnDispose(c,r),t.attr.class(r),t.html.div(t.attr.class("bc-password-strength__bar"),t.html.div(t.attr.class("bc-password-strength__fill"),t.attr.style(m.map(s=>`width: ${s}%`)))),t.When(i,()=>t.Use(y.AuthI18n,s=>t.html.div(t.attr.class("bc-password-strength__label"),t.computedOf(n,s)((h,f)=>{switch(h){case"weak":return f.passwordStrengthWeak;case"fair":return f.passwordStrengthFair;case"good":return f.passwordStrengthGood;case"strong":return f.passwordStrengthStrong;default:return f.passwordStrengthWeak}})))),t.html.div(t.attr.class("bc-password-strength__requirements"),t.When(e.minLength!==void 0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.length?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.length?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),`At least ${e.minLength} characters`))),t.When(e.requireUppercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.uppercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.uppercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One uppercase letter"))),t.When(e.requireLowercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.lowercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.lowercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One lowercase letter"))),t.When(e.requireNumbers===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.numbers?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.numbers?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One number"))),t.When(e.requireSymbols===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.symbols?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.symbols?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One special character")))))}function mt({password:o,rules:e=B,className:i}){const l=t.computedOf(o)(a=>!a||a.length===0?{strength:"weak",score:0}:E(a,e)),c=l.map(a=>a.strength),n=l.map(a=>a.score),m=t.computedOf(c,i)((a,r)=>["bc-password-strength-bar",`bc-password-strength-bar--${a}`,r].filter(Boolean).join(" "));return t.html.div(t.OnDispose(l,m),t.attr.class(m),t.html.div(t.attr.class("bc-password-strength-bar__fill"),t.attr.style(n.map(a=>`width: ${a}%`))))}function ut({password:o,rules:e=B,className:i}){const l=t.computedOf(o)(n=>!n||n.length===0?"weak":E(n,e).strength),c=t.computedOf(l,i)((n,m)=>["bc-password-strength-text",`bc-password-strength-text--${n}`,m].filter(Boolean).join(" "));return t.Fragment(t.OnDispose(l,c),t.Use(y.AuthI18n,n=>t.html.span(t.attr.class(c),t.computedOf(l,n)((m,a)=>{switch(m){case"weak":return a.passwordStrengthWeak;case"fair":return a.passwordStrengthFair;case"good":return a.passwordStrengthGood;case"strong":return a.passwordStrengthStrong;default:return a.passwordStrengthWeak}}))))}function j({passwordRules:o,labels:e,initialEmail:i,initialName:l,showPasswordStrength:c,onSignUp:n,showNameField:m,showConfirmPassword:a,showAcceptTermsAndConditions:r,termsAndConditions:s}){const h=t.prop(!1),f=o||B,b=z(f,{showNameField:m!==!1,showConfirmPassword:a!==!1,showAcceptTermsAndConditions:r!==!1}),L=u.useForm({schema:b,onSubmit:T({task:n!=null?S=>n({email:S.email,password:S.password,name:S.name}):void 0,message:"Reset password failed",onStart:()=>{h.set(!0),L.controller.disable()},onEnd:()=>{h.set(!1),L.controller.enable()}}),initialValue:{name:l??"",email:i??"",password:"",confirmPassword:"",acceptTerms:!1}}),{controller:_,submit:P}=L;h.on(_.setDisabled);const k=_.field("name"),q=_.field("email"),A=_.field("password"),U=_.field("confirmPassword"),v=_.field("acceptTerms");return t.Use(y.AuthI18n,S=>t.html.form(t.OnDispose(_.dispose,h.dispose),t.attr.class("bc-auth-form__form"),t.on.submit(P),u.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(_.error,w=>u.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(w))),t.When(m!==!1,()=>u.Control(I.TextInput,{controller:k.transform(w=>w??"",w=>w===""?void 0:w),label:t.coalesce(e?.nameLabel,S.$.nameLabel)})),u.Control(u.EmailInput,{controller:q,label:t.coalesce(e?.emailLabel,S.$.emailLabel)}),u.Control(u.PasswordInput,{controller:A,label:t.coalesce(e?.passwordLabel,S.$.passwordLabel)}),t.When(c??!1,()=>G({password:A.signal,rules:f,showLabel:!0})),t.When(a??!1,()=>u.Control(u.PasswordInput,{controller:U,label:t.coalesce(e?.confirmPasswordLabel,S.$.confirmPasswordLabel)})),t.When(r??!1,()=>t.html.div(t.attr.class("bc-auth-form__terms"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),u.CheckboxInput({value:v.signal.map(w=>w??!1),onChange:w=>v.change(w)}),t.html.span(s||t.coalesce(e?.acceptTermsLabel,S.$.acceptTermsLabel))),t.When(v.errorVisible,()=>t.html.div(t.attr.class("bc-auth-form__field-error"),v.error.map(w=>w||"")))))),I.Button({type:"submit",variant:"filled",color:"primary",loading:h,disabled:_.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(e?.signUpButton,S.$.signUpButton))))}function H({onResetPassword:o,labels:e={}}){const i=V(),l=t.prop(!1),c=u.useForm({schema:D,onSubmit:T({task:o,message:"Reset password failed",onStart:()=>{l.set(!0),c.controller.disable()},onEnd:()=>{l.set(!1),c.controller.enable()}}),initialValue:{email:""}}),{controller:n,submit:m}=c;l.on(n.setDisabled);const a=n.field("email");return i.on(r=>{r!=null&&a.change(r)}),t.Use(y.AuthI18n,r=>t.html.form(t.OnDispose(n.dispose,i.dispose,l.dispose),t.attr.class("bc-auth-form__form"),t.Ensure(n.error,s=>u.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(s))),t.html.p(t.attr.class("bc-auth-form__description"),t.coalesce(e?.resetPasswordDescription,r.$.resetPasswordDescription)),t.on.submit(m),u.Stack(t.attr.class("bc-auth-form__fields"),u.Control(u.EmailInput,{controller:a,label:t.coalesce(e?.emailLabel,r.$.emailLabel)})),I.Button({loading:l,type:"submit",variant:"filled",color:"primary",disabled:n.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(e?.resetPasswordButton,r.$.resetPasswordButton))))}function p({provider:o,onClick:e,size:i="md",name:l,icon:c,color:n,flow:m,labels:a}){const r=async()=>{if(e)try{m==="popup"?await e():await e()}catch(s){console.error(`Social login error for ${o} (${m||"redirect"} flow):`,s)}};return I.Button({type:"button",variant:"filled",size:i,color:n,onClick:r,roundedness:"full"},t.attr.class("bc-social-login-button"),t.attr.class(t.computedOf(o)(s=>`bc-social-login-button--${s}`)),t.html.span(t.attr.class("bc-social-login-button__inner"),t.html.span(t.attr.class("bc-social-login-button__icon"),I.Icon({icon:c,size:i},t.attr.class("bc-social-login-button__icon-inner"))),t.Use(y.AuthI18n,s=>t.html.span(t.attr.class("bc-social-login-button__label"),t.bind(t.coalesce(a?.continueWithProvider,s.$.continueWithProvider))(l)))))}function X({providers:o,onProviderClick:e,size:i="md",className:l}){return u.Stack(t.attr.class("bc-social-login-buttons"),t.attr.class(l),t.ForEach(o,c=>p({provider:c.$.provider,flow:c.$.flow,color:c.map(({provider:n})=>d[n].color),name:c.map(({provider:n})=>d[n].name),icon:c.map(({provider:n})=>d[n].icon),onClick:async()=>{e&&await e(c.$.provider.value)},size:i})))}const d={google:{name:"Google",icon:"logos:google-icon",color:"red"},github:{name:"GitHub",icon:"logos:github-icon",color:"black"},apple:{name:"Apple",icon:"logos:apple",color:"stone"},facebook:{name:"Facebook",icon:"logos:facebook",color:"blue"},twitter:{name:"Twitter",icon:"logos:twitter",color:"sky"},x:{name:"X",icon:"logos:x",color:"zinc"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"amber"},discord:{name:"Discord",icon:"logos:discord-icon",color:"indigo"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"cyan"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"fuchsia"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"teal"},snapchat:{name:"Snapchat",icon:"streamline-logos:snapchat-logo-solid",color:"yellow"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"orange"},pinterest:{name:"Pinterest",icon:"logos:pinterest",color:"rose"},twitch:{name:"Twitch",icon:"logos:twitch",color:"purple"},steam:{name:"Steam",icon:"logos:steam",color:"slate"},epic:{name:"Epic Games",icon:"streamline-logos:epic-games-logo-solid",color:"neutral"},playstation:{name:"PlayStation",icon:"streamline-logos:playstation-logo-solid",color:"violet"},xbox:{name:"Xbox",icon:"streamline-logos:xbox-live-logo-solid",color:"green"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"emerald"},wechat:{name:"WeChat",icon:"streamline-logos:wechat-logo",color:"lime"},amazon:{name:"Amazon",icon:"streamline-logos:amazon-logo-solid",color:"red"},yahoo:{name:"Yahoo",icon:"logos:yahoo",color:"rose"},paypal:{name:"PayPal",icon:"logos:paypal",color:"blue"}},dt=o=>p({...o,...d.google,provider:"google"}),pt=o=>p({...o,...d.github,provider:"github"}),ht=o=>p({...o,...d.apple,provider:"apple"}),gt=o=>p({...o,...d.facebook,provider:"facebook"}),ft=o=>p({...o,...d.x,provider:"x"}),bt=o=>p({...o,...d.twitter,provider:"twitter"}),wt=o=>p({...o,...d.microsoft,provider:"microsoft"}),Lt=o=>p({...o,...d.discord,provider:"discord"}),_t=o=>p({...o,...d.linkedin,provider:"linkedin"}),kt=o=>p({...o,...d.instagram,provider:"instagram"}),vt=o=>p({...o,...d.tiktok,provider:"tiktok"}),St=o=>p({...o,...d.snapchat,provider:"snapchat"}),Pt=o=>p({...o,...d.reddit,provider:"reddit"}),yt=o=>p({...o,...d.pinterest,provider:"pinterest"}),Bt=o=>p({...o,...d.twitch,provider:"twitch"}),It=o=>p({...o,...d.steam,provider:"steam"}),xt=o=>p({...o,...d.epic,provider:"epic"}),qt=o=>p({...o,...d.playstation,provider:"playstation"}),At=o=>p({...o,...d.xbox,provider:"xbox"}),Ct=o=>p({...o,...d.whatsapp,provider:"whatsapp"}),Tt=o=>p({...o,...d.wechat,provider:"wechat"}),$t=o=>p({...o,...d.amazon,provider:"amazon"}),Ot=o=>p({...o,...d.yahoo,provider:"yahoo"}),zt=o=>p({...o,...d.paypal,provider:"paypal"});function W({providers:o}){return u.Stack(X({providers:o}))}function Y({mode:o,socialProviders:e,initialName:i,initialEmail:l,passwordRules:c,showRememberMe:n,showSocialDivider:m,showPasswordStrength:a,labels:r,onSignIn:s,onSignUp:h,onResetPassword:f,onModeChange:b,showContainer:L},..._){const P=o!=null?t.Value.deriveProp(o):t.prop("signin");return P.on(k=>b?.(k)),t.Use(y.AuthI18n,k=>{function q(){const v=t.coalesce(r?.hasAccountLink,k.$.hasAccountLink);return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>P.set("signin")),v)}function A(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>P.set("signup")),t.coalesce(r?.noAccountLink,k.$.noAccountLink))}function U(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>P.set("reset-password")),t.coalesce(r?.forgotPasswordLink,k.$.forgotPasswordLink))}return t.html.div(Z.classes({"bc-auth-container":!0,"bc-auth-container--styled":t.Value.map(L??!0,v=>v)}),t.attr.class(P.map(v=>`bc-auth-container--${v}`)),t.attr.class("bc-auth-form"),t.OnDispose(P.dispose),t.OneOfValue(P,{signin:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signInTitle,k.$.signInTitle)),e!=null?t.Fragment(W({providers:e}),t.When(m??!1,F)):null,N({onSignIn:s,showRememberMe:n,passwordRules:c,labels:{emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,rememberMeLabel:r?.rememberMeLabel,signInButton:r?.signInButton,forgotPasswordLink:r?.forgotPasswordLink,noAccountLink:r?.noAccountLink}}),u.Stack(t.attr.class("bc-auth-form__footer"),A(),U())),signup:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signUpTitle,k.$.signUpTitle)),e!=null?t.Fragment(W({providers:e}),t.When(m??!1,F)):null,j({labels:{nameLabel:r?.nameLabel,emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,confirmPasswordLabel:r?.confirmPasswordLabel,acceptTermsLabel:r?.acceptTermsLabel,signUpButton:r?.signUpButton,hasAccountLink:r?.hasAccountLink},initialEmail:l,initialName:i,onSignUp:h,passwordRules:c,showPasswordStrength:a}),u.Stack(t.attr.class("bc-auth-form__footer"),q())),"reset-password":()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.resetPasswordTitle,k.$.resetPasswordTitle)),H({labels:{backToSignInLink:r?.backToSignInLink,emailLabel:r?.emailLabel,resetPasswordButton:r?.resetPasswordButton,resetPasswordDescription:r?.resetPasswordDescription},onResetPassword:f}),u.Stack(t.attr.class("bc-auth-form__footer"),q()))}),..._)})}function Et(o){return g.Modal({size:"sm",dismissable:!0,showCloseButton:!0},(e,i)=>o(l=>e({body:Y({showContainer:!1,...l}),header:t.Use(y.AuthI18n,c=>t.coalesce(l.modalTitle,c.$.authenticationTitle))})))}function F({labels:o,className:e}={}){return t.html.div(t.attr.class("bc-auth-divider"),t.attr.class(e),t.html.div(t.attr.class("bc-auth-divider__line")),t.Use(y.AuthI18n,i=>t.html.span(t.attr.class("bc-auth-divider__text"),t.coalesce(o?.text,i.$.orDivider))),t.html.div(t.attr.class("bc-auth-divider__line")))}exports.AmazonLoginButton=$t;exports.AppleLoginButton=ht;exports.AuthContainer=Y;exports.AuthDivider=F;exports.AuthModal=Et;exports.DiscordLoginButton=Lt;exports.EpicLoginButton=xt;exports.FacebookLoginButton=gt;exports.GitHubLoginButton=pt;exports.GoogleLoginButton=dt;exports.InstagramLoginButton=kt;exports.LinkedInLoginButton=_t;exports.MicrosoftLoginButton=wt;exports.PasswordStrengthBar=mt;exports.PasswordStrengthIndicator=G;exports.PasswordStrengthText=ut;exports.PayPalLoginButton=zt;exports.PinterestLoginButton=yt;exports.PlayStationLoginButton=qt;exports.RedditLoginButton=Pt;exports.ResetPasswordForm=H;exports.SignInForm=N;exports.SignUpForm=j;exports.SnapchatLoginButton=St;exports.SocialLoginButton=p;exports.SocialLoginButtons=X;exports.SocialProviders=W;exports.SteamLoginButton=It;exports.TiktokLoginButton=vt;exports.TwitchLoginButton=Bt;exports.TwitterLoginButton=bt;exports.WeChatLoginButton=Tt;exports.WhatsAppLoginButton=Ct;exports.XLoginButtin=ft;exports.XboxLoginButton=At;exports.YahooLoginButton=Ot;exports.authSchemas=it;exports.calculatePasswordStrength=E;exports.createPasswordSchema=$;exports.createSignInSchema=O;exports.createSignUpSchema=z;exports.createSocialLoginUrl=ot;exports.defaultPasswordRules=B;exports.defaultSignInSchema=rt;exports.defaultSignUpSchema=st;exports.emailSchema=x;exports.formatAuthError=at;exports.formatProviderName=R;exports.formatSocialLoginText=Q;exports.generateRandomString=M;exports.getProviderColor=K;exports.getProviderIcon=J;exports.isBrowser=nt;exports.isValidEmail=tt;exports.openSocialLoginPopup=et;exports.providerInfo=C;exports.requestToControllerValidation=T;exports.resetPasswordSchema=D;exports.socialProviderInfo=d;exports.useAuthEmailProp=V;exports.validateEmail=ct;exports.validatePassword=lt;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@tempots/dom"),u=require("../notice-DLDzwKkw.cjs"),g=require("../modal-O7QoP7Zv.cjs"),y=require("../translations-D77sU1Wl.cjs"),I=require("../translations-BAk3j4bi.cjs"),Z=require("@tempots/ui"),C={google:{name:"Google",icon:"logos:google-icon",color:"#4285f4"},github:{name:"GitHub",icon:"logos:github-icon",color:"#333"},apple:{name:"Apple",icon:"logos:apple",color:"#000"},facebook:{name:"Facebook",icon:"logos:facebook",color:"#1877f2"},twitter:{name:"Twitter",icon:"logos:twitter",color:"#1da1f2"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"#00a4ef"},discord:{name:"Discord",icon:"logos:discord-icon",color:"#5865f2"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"#0077b5"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"#e4405f"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"#000"},snapchat:{name:"Snapchat",icon:"logos:snapchat-icon",color:"#fffc00"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"#ff4500"},pinterest:{name:"Pinterest",icon:"logos:pinterest-icon",color:"#bd081c"},twitch:{name:"Twitch",icon:"logos:twitch",color:"#9146ff"},steam:{name:"Steam",icon:"logos:steam-icon",color:"#000"},epic:{name:"Epic Games",icon:"simple-icons:epicgames",color:"#313131"},playstation:{name:"PlayStation",icon:"logos:playstation-icon",color:"#003791"},xbox:{name:"Xbox",icon:"logos:xbox-icon",color:"#107c10"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"#25d366"},wechat:{name:"WeChat",icon:"logos:wechat-icon",color:"#1aad19"},amazon:{name:"Amazon",icon:"logos:amazon-icon",color:"#ff9900"},yahoo:{name:"Yahoo",icon:"logos:yahoo-icon",color:"#720e9e"},paypal:{name:"PayPal",icon:"logos:paypal",color:"#0070ba"},x:{name:"X",icon:"simple-icons:x",color:"#000"}};function R(o){return C[o]?.name||o}function J(o){return C[o]?.icon||"mdi:account"}function K(o){return C[o]?.color||"#666"}function Q(o,e="Continue with {provider}"){return e.replace("{provider}",R(o))}const B={minLength:8,requireUppercase:!0,requireLowercase:!0,requireNumbers:!0,requireSymbols:!1};function tt(o){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o)}function M(o=32){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let l=0;l<o;l++)i+=e.charAt(Math.floor(Math.random()*e.length));return i}function ot(o,e,i,l=[],c={}){const n={google:"https://accounts.google.com/oauth/authorize",github:"https://github.com/login/oauth/authorize",apple:"https://appleid.apple.com/auth/authorize",facebook:"https://www.facebook.com/v18.0/dialog/oauth",twitter:"https://twitter.com/i/oauth2/authorize",microsoft:"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",discord:"https://discord.com/api/oauth2/authorize",linkedin:"https://www.linkedin.com/oauth/v2/authorization",instagram:"https://api.instagram.com/oauth/authorize",tiktok:"https://www.tiktok.com/v2/auth/authorize",snapchat:"https://accounts.snapchat.com/accounts/oauth2/authorize",reddit:"https://www.reddit.com/api/v1/authorize",pinterest:"https://api.pinterest.com/oauth/",twitch:"https://id.twitch.tv/oauth2/authorize",steam:"https://steamcommunity.com/oauth/authorize",epic:"https://auth.epicgames.com/authorize",playstation:"https://auth.api.sonyentertainmentnetwork.com/oauth/authorize",xbox:"https://login.live.com/oauth20_authorize.srf",whatsapp:"https://web.whatsapp.com/oauth/authorize",wechat:"https://open.weixin.qq.com/connect/qrconnect",amazon:"https://www.amazon.com/ap/oa",yahoo:"https://api.login.yahoo.com/oauth2/request_auth",paypal:"https://www.paypal.com/signin/authorize",x:"https://api.twitter.com/oauth2/authorize"},m={google:["openid","email","profile"],github:["user:email"],apple:["email","name"],facebook:["email"],twitter:["users.read"],microsoft:["openid","email","profile"],discord:["identify","email"],linkedin:["r_liteprofile","r_emailaddress"],instagram:["user_profile","user_media"],tiktok:["user.info.basic","user.external.id"],snapchat:["user.info.basic","user.external.id"],reddit:["identity","email"],pinterest:["read_public","read_relationships"],twitch:["openid","email","profile"],steam:["openid","email","profile"],epic:["openid","email","profile"],playstation:["openid","email","profile"],xbox:["openid","email","profile"],whatsapp:["openid","email","profile"],wechat:["openid","email","profile"],amazon:["openid","email","profile"],yahoo:["openid","email","profile"],paypal:["openid","email","profile"],x:["openid","email","profile"]},a=n[o];if(!a)throw new Error(`Unsupported provider: ${o}`);const r=l.length>0?l:m[o],s=M(),h=new URLSearchParams({client_id:e,redirect_uri:i,scope:r.join(" "),state:s,response_type:"code",...c});return`${a}?${h.toString()}`}function et(o,e,i,l){const c=window.open(o,`${e}_login`,"width=500,height=600,scrollbars=yes,resizable=yes");if(!c){l?.(new Error("Failed to open popup window"));return}const n=setInterval(()=>{c.closed&&(clearInterval(n),l?.(new Error("Login cancelled")))},1e3),m=a=>{a.origin===window.location.origin&&(a.data.type==="SOCIAL_LOGIN_SUCCESS"?(clearInterval(n),c.close(),window.removeEventListener("message",m),i?.(a.data.result)):a.data.type==="SOCIAL_LOGIN_ERROR"&&(clearInterval(n),c.close(),window.removeEventListener("message",m),l?.(new Error(a.data.error))))};window.addEventListener("message",m)}function at(o){return o instanceof Error?o.message:typeof o=="string"?o:o&&typeof o=="object"&&"message"in o?String(o.message):"An unexpected error occurred"}function nt(){return typeof window<"u"&&typeof document<"u"}function T({task:o,message:e,onStart:i,onEnd:l}){return async c=>{i?.();const n=await u.taskToValidation({task:o!=null?()=>o(c):async()=>null,errorMessage:e,errorPath:["root"],validation:m=>m!=null?u.a.invalid({message:m}):u.a.valid});return l?.(),n}}function $(o=B){let e=g.string();return o.minLength&&(e=e.min(o.minLength,`Password must be at least ${o.minLength} characters`)),o.requireUppercase&&(e=e.regex(/[A-Z]/,"Password must contain at least one uppercase letter")),o.requireLowercase&&(e=e.regex(/[a-z]/,"Password must contain at least one lowercase letter")),o.requireNumbers&&(e=e.regex(/[0-9]/,"Password must contain at least one number")),o.requireSymbols&&(e=e.regex(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,"Password must contain at least one special character")),o.customValidation&&(e=e.refine(i=>o.customValidation(i))),e}const x=g.string().min(1,"Email is required").email("Please enter a valid email address");function O(o){const e=o?$(o):g.string().refine(i=>i.length>0?null:"Password is required");return g.object({email:x,password:e,rememberMe:g.boolean().default(!1)}).schema()}function z(o=B,e){const i=$(o),l=e?.showNameField!==!1,c=e?.showConfirmPassword!==!1,n=e?.showAcceptTermsAndConditions!==!1,m={name:l?g.string().min(1,"Name is required").optional():g.string().optional(),email:x,password:i,confirmPassword:c?g.string().min(1,"Please confirm your password"):g.string(),acceptTerms:n?g.boolean().refine(r=>r===!0,"You must accept the terms and conditions"):g.boolean().default(!0)},a=g.object(m);return c?a.refine(r=>r.password===r.confirmPassword?null:"Passwords don't match",{path:["confirmPassword"]}).schema():a.schema()}const D=g.object({email:x}).schema(),rt=O(),st=z(),it={signIn:O,signUp:z,resetPassword:()=>D};function ct(o){const e=x.validate(o);return e.success?null:e.errors[0]?.message||"Invalid email"}function lt(o,e=B){const l=$(e).validate(o);return l.success?null:l.errors[0]?.message||"Invalid password"}function E(o,e=B){const i={length:o.length>=(e.minLength||8),uppercase:/[A-Z]/.test(o),lowercase:/[a-z]/.test(o),numbers:/[0-9]/.test(o),symbols:/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(o),custom:e.customValidation?e.customValidation(o)===null:o.length>0},l=[!0,e.requireUppercase,e.requireLowercase,e.requireNumbers,e.requireSymbols,!!e.customValidation].filter(Boolean).length,c=[i.length,e.requireUppercase?i.uppercase:null,e.requireLowercase?i.lowercase:null,e.requireNumbers?i.numbers:null,e.requireSymbols?i.symbols:null,e.customValidation?i.custom:null].filter(a=>a===!0).length,n=l>0?Math.round(c/l*100):0;let m;return n<40?m="weak":n<60?m="fair":n<80?m="good":m="strong",{strength:m,score:n,checks:i}}const V=()=>t.localStorageProp({key:"bui_auth_email",defaultValue:null});function N({onSignIn:o,passwordRules:e,labels:i,showRememberMe:l}){const c=t.prop(!1),n=V(),m=O(e),a=u.useForm({schema:m,onSubmit:T({task:o,message:"Reset password failed",onStart:()=>{c.set(!0),a.controller.disable()},onEnd:()=>{c.set(!1),a.controller.enable()}}),initialValue:{email:"",password:""}}),{controller:r,submit:s}=a;c.on(r.setDisabled);const h=r.field("email"),f=r.field("password");return n.on(b=>{b!=null&&h.change(b)}),h.signal.on(b=>{n.value!=null&&(n.value=b)}),t.Use(y.AuthI18n,b=>t.html.form(t.OnDispose(r.dispose,n.dispose,c.dispose),t.attr.class("bc-auth-form__form"),t.on.submit(s),u.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(r.error,L=>u.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(L))),u.Control(u.EmailInput,{controller:h,label:t.coalesce(i?.emailLabel,b.$.emailLabel)}),u.Control(u.PasswordInput,{controller:f,label:t.coalesce(i?.passwordLabel,b.$.passwordLabel)}),t.When(l??!0,()=>t.html.div(t.attr.class("bc-auth-form__remember-me"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),u.CheckboxInput({value:n.map(L=>L!=null),after:t.html.span(t.coalesce(i?.rememberMeLabel,b.$.rememberMeLabel)),onChange:L=>{L?n.value=h.signal.value??"":n.value=null}}))))),I.Button({type:"submit",variant:"filled",color:"primary",loading:c,disabled:r.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(i?.signInButton,b.$.signInButton))))}function G({password:o,rules:e=B,showLabel:i=!0,className:l}){const c=t.computedOf(o)(s=>!s||s.length===0?{strength:"weak",score:0,checks:{length:!1,uppercase:!1,lowercase:!1,numbers:!1,symbols:!1,custom:!1}}:E(s,e)),n=c.map(s=>s.strength),m=c.map(s=>s.score),a=c.map(s=>s.checks),r=t.computedOf(n,l)((s,h)=>["bc-password-strength",`bc-password-strength--${s}`,h].filter(Boolean).join(" "));return t.html.div(t.OnDispose(c,r),t.attr.class(r),t.html.div(t.attr.class("bc-password-strength__bar"),t.html.div(t.attr.class("bc-password-strength__fill"),t.attr.style(m.map(s=>`width: ${s}%`)))),t.When(i,()=>t.Use(y.AuthI18n,s=>t.html.div(t.attr.class("bc-password-strength__label"),t.computedOf(n,s)((h,f)=>{switch(h){case"weak":return f.passwordStrengthWeak;case"fair":return f.passwordStrengthFair;case"good":return f.passwordStrengthGood;case"strong":return f.passwordStrengthStrong;default:return f.passwordStrengthWeak}})))),t.html.div(t.attr.class("bc-password-strength__requirements"),t.When(e.minLength!==void 0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.length?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.length?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),`At least ${e.minLength} characters`))),t.When(e.requireUppercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.uppercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.uppercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One uppercase letter"))),t.When(e.requireLowercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.lowercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.lowercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One lowercase letter"))),t.When(e.requireNumbers===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.numbers?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.numbers?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One number"))),t.When(e.requireSymbols===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.symbols?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.symbols?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One special character")))))}function mt({password:o,rules:e=B,className:i}){const l=t.computedOf(o)(a=>!a||a.length===0?{strength:"weak",score:0}:E(a,e)),c=l.map(a=>a.strength),n=l.map(a=>a.score),m=t.computedOf(c,i)((a,r)=>["bc-password-strength-bar",`bc-password-strength-bar--${a}`,r].filter(Boolean).join(" "));return t.html.div(t.OnDispose(l,m),t.attr.class(m),t.html.div(t.attr.class("bc-password-strength-bar__fill"),t.attr.style(n.map(a=>`width: ${a}%`))))}function ut({password:o,rules:e=B,className:i}){const l=t.computedOf(o)(n=>!n||n.length===0?"weak":E(n,e).strength),c=t.computedOf(l,i)((n,m)=>["bc-password-strength-text",`bc-password-strength-text--${n}`,m].filter(Boolean).join(" "));return t.Fragment(t.OnDispose(l,c),t.Use(y.AuthI18n,n=>t.html.span(t.attr.class(c),t.computedOf(l,n)((m,a)=>{switch(m){case"weak":return a.passwordStrengthWeak;case"fair":return a.passwordStrengthFair;case"good":return a.passwordStrengthGood;case"strong":return a.passwordStrengthStrong;default:return a.passwordStrengthWeak}}))))}function j({passwordRules:o,labels:e,initialEmail:i,initialName:l,showPasswordStrength:c,onSignUp:n,showNameField:m,showConfirmPassword:a,showAcceptTermsAndConditions:r,termsAndConditions:s}){const h=t.prop(!1),f=o||B,b=z(f,{showNameField:m!==!1,showConfirmPassword:a!==!1,showAcceptTermsAndConditions:r!==!1}),L=u.useForm({schema:b,onSubmit:T({task:n!=null?k=>n({email:k.email,password:k.password,name:k.name,acceptTerms:k.acceptTerms}):void 0,message:"Reset password failed",onStart:()=>{h.set(!0),L.controller.disable()},onEnd:()=>{h.set(!1),L.controller.enable()}}),initialValue:{name:l??"",email:i??"",password:"",confirmPassword:"",acceptTerms:!1}}),{controller:_,submit:P}=L;h.on(_.setDisabled);const v=_.field("name"),q=_.field("email"),A=_.field("password"),U=_.field("confirmPassword"),S=_.field("acceptTerms");return t.Use(y.AuthI18n,k=>t.html.form(t.OnDispose(_.dispose,h.dispose),t.attr.class("bc-auth-form__form"),t.on.submit(P),u.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(_.error,w=>u.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(w))),t.When(m!==!1,()=>u.Control(I.TextInput,{controller:v.transform(w=>w??"",w=>w===""?void 0:w),label:t.coalesce(e?.nameLabel,k.$.nameLabel)})),u.Control(u.EmailInput,{controller:q,label:t.coalesce(e?.emailLabel,k.$.emailLabel)}),u.Control(u.PasswordInput,{controller:A,label:t.coalesce(e?.passwordLabel,k.$.passwordLabel)}),t.When(c??!1,()=>G({password:A.signal,rules:f,showLabel:!0})),t.When(a??!1,()=>u.Control(u.PasswordInput,{controller:U,label:t.coalesce(e?.confirmPasswordLabel,k.$.confirmPasswordLabel)})),t.When(r??!1,()=>t.html.div(t.attr.class("bc-auth-form__terms"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),u.CheckboxInput({value:S.signal.map(w=>w??!1),onChange:w=>S.change(w)}),t.html.span(s||t.coalesce(e?.acceptTermsLabel,k.$.acceptTermsLabel))),t.When(S.errorVisible,()=>t.html.div(t.attr.class("bc-auth-form__field-error"),S.error.map(w=>w||"")))))),I.Button({type:"submit",variant:"filled",color:"primary",loading:h,disabled:_.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(e?.signUpButton,k.$.signUpButton))))}function H({onResetPassword:o,labels:e={}}){const i=V(),l=t.prop(!1),c=u.useForm({schema:D,onSubmit:T({task:o,message:"Reset password failed",onStart:()=>{l.set(!0),c.controller.disable()},onEnd:()=>{l.set(!1),c.controller.enable()}}),initialValue:{email:""}}),{controller:n,submit:m}=c;l.on(n.setDisabled);const a=n.field("email");return i.on(r=>{r!=null&&a.change(r)}),t.Use(y.AuthI18n,r=>t.html.form(t.OnDispose(n.dispose,i.dispose,l.dispose),t.attr.class("bc-auth-form__form"),t.Ensure(n.error,s=>u.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(s))),t.html.p(t.attr.class("bc-auth-form__description"),t.coalesce(e?.resetPasswordDescription,r.$.resetPasswordDescription)),t.on.submit(m),u.Stack(t.attr.class("bc-auth-form__fields"),u.Control(u.EmailInput,{controller:a,label:t.coalesce(e?.emailLabel,r.$.emailLabel)})),I.Button({loading:l,type:"submit",variant:"filled",color:"primary",disabled:n.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(e?.resetPasswordButton,r.$.resetPasswordButton))))}function p({provider:o,onClick:e,size:i="md",name:l,icon:c,color:n,flow:m,labels:a}){const r=async()=>{if(e)try{m==="popup"?await e():await e()}catch(s){console.error(`Social login error for ${o} (${m||"redirect"} flow):`,s)}};return I.Button({type:"button",variant:"filled",size:i,color:n,onClick:r,roundedness:"full"},t.attr.class("bc-social-login-button"),t.attr.class(t.computedOf(o)(s=>`bc-social-login-button--${s}`)),t.html.span(t.attr.class("bc-social-login-button__inner"),t.html.span(t.attr.class("bc-social-login-button__icon"),I.Icon({icon:c,size:i},t.attr.class("bc-social-login-button__icon-inner"))),t.Use(y.AuthI18n,s=>t.html.span(t.attr.class("bc-social-login-button__label"),t.bind(t.coalesce(a?.continueWithProvider,s.$.continueWithProvider))(l)))))}function X({providers:o,onProviderClick:e,size:i="md",className:l}){return u.Stack(t.attr.class("bc-social-login-buttons"),t.attr.class(l),t.ForEach(o,c=>p({provider:c.$.provider,flow:c.$.flow,color:c.map(({provider:n})=>d[n].color),name:c.map(({provider:n})=>d[n].name),icon:c.map(({provider:n})=>d[n].icon),onClick:async()=>{e&&await e(c.$.provider.value)},size:i})))}const d={google:{name:"Google",icon:"logos:google-icon",color:"red"},github:{name:"GitHub",icon:"logos:github-icon",color:"black"},apple:{name:"Apple",icon:"logos:apple",color:"stone"},facebook:{name:"Facebook",icon:"logos:facebook",color:"blue"},twitter:{name:"Twitter",icon:"logos:twitter",color:"sky"},x:{name:"X",icon:"logos:x",color:"zinc"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"amber"},discord:{name:"Discord",icon:"logos:discord-icon",color:"indigo"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"cyan"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"fuchsia"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"teal"},snapchat:{name:"Snapchat",icon:"streamline-logos:snapchat-logo-solid",color:"yellow"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"orange"},pinterest:{name:"Pinterest",icon:"logos:pinterest",color:"rose"},twitch:{name:"Twitch",icon:"logos:twitch",color:"purple"},steam:{name:"Steam",icon:"logos:steam",color:"slate"},epic:{name:"Epic Games",icon:"streamline-logos:epic-games-logo-solid",color:"neutral"},playstation:{name:"PlayStation",icon:"streamline-logos:playstation-logo-solid",color:"violet"},xbox:{name:"Xbox",icon:"streamline-logos:xbox-live-logo-solid",color:"green"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"emerald"},wechat:{name:"WeChat",icon:"streamline-logos:wechat-logo",color:"lime"},amazon:{name:"Amazon",icon:"streamline-logos:amazon-logo-solid",color:"red"},yahoo:{name:"Yahoo",icon:"logos:yahoo",color:"rose"},paypal:{name:"PayPal",icon:"logos:paypal",color:"blue"}},dt=o=>p({...o,...d.google,provider:"google"}),pt=o=>p({...o,...d.github,provider:"github"}),ht=o=>p({...o,...d.apple,provider:"apple"}),gt=o=>p({...o,...d.facebook,provider:"facebook"}),ft=o=>p({...o,...d.x,provider:"x"}),bt=o=>p({...o,...d.twitter,provider:"twitter"}),wt=o=>p({...o,...d.microsoft,provider:"microsoft"}),Lt=o=>p({...o,...d.discord,provider:"discord"}),_t=o=>p({...o,...d.linkedin,provider:"linkedin"}),kt=o=>p({...o,...d.instagram,provider:"instagram"}),vt=o=>p({...o,...d.tiktok,provider:"tiktok"}),St=o=>p({...o,...d.snapchat,provider:"snapchat"}),Pt=o=>p({...o,...d.reddit,provider:"reddit"}),yt=o=>p({...o,...d.pinterest,provider:"pinterest"}),Bt=o=>p({...o,...d.twitch,provider:"twitch"}),It=o=>p({...o,...d.steam,provider:"steam"}),xt=o=>p({...o,...d.epic,provider:"epic"}),qt=o=>p({...o,...d.playstation,provider:"playstation"}),At=o=>p({...o,...d.xbox,provider:"xbox"}),Ct=o=>p({...o,...d.whatsapp,provider:"whatsapp"}),Tt=o=>p({...o,...d.wechat,provider:"wechat"}),$t=o=>p({...o,...d.amazon,provider:"amazon"}),Ot=o=>p({...o,...d.yahoo,provider:"yahoo"}),zt=o=>p({...o,...d.paypal,provider:"paypal"});function W({providers:o}){return u.Stack(X({providers:o}))}function Y({mode:o,socialProviders:e,initialName:i,initialEmail:l,passwordRules:c,showRememberMe:n,showSocialDivider:m,showPasswordStrength:a,labels:r,onSignIn:s,onSignUp:h,onResetPassword:f,onModeChange:b,showContainer:L},..._){const P=o!=null?t.Value.deriveProp(o):t.prop("signin");return P.on(v=>b?.(v)),t.Use(y.AuthI18n,v=>{function q(){const S=t.coalesce(r?.hasAccountLink,v.$.hasAccountLink);return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>P.set("signin")),S)}function A(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>P.set("signup")),t.coalesce(r?.noAccountLink,v.$.noAccountLink))}function U(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>P.set("reset-password")),t.coalesce(r?.forgotPasswordLink,v.$.forgotPasswordLink))}return t.html.div(Z.classes({"bc-auth-container":!0,"bc-auth-container--styled":t.Value.map(L??!0,S=>S)}),t.attr.class(P.map(S=>`bc-auth-container--${S}`)),t.attr.class("bc-auth-form"),t.OnDispose(P.dispose),t.OneOfValue(P,{signin:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signInTitle,v.$.signInTitle)),e!=null?t.Fragment(W({providers:e}),t.When(m??!1,F)):null,N({onSignIn:s,showRememberMe:n,passwordRules:c,labels:{emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,rememberMeLabel:r?.rememberMeLabel,signInButton:r?.signInButton,forgotPasswordLink:r?.forgotPasswordLink,noAccountLink:r?.noAccountLink}}),u.Stack(t.attr.class("bc-auth-form__footer"),A(),U())),signup:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signUpTitle,v.$.signUpTitle)),e!=null?t.Fragment(W({providers:e}),t.When(m??!1,F)):null,j({labels:{nameLabel:r?.nameLabel,emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,confirmPasswordLabel:r?.confirmPasswordLabel,acceptTermsLabel:r?.acceptTermsLabel,signUpButton:r?.signUpButton,hasAccountLink:r?.hasAccountLink},initialEmail:l,initialName:i,onSignUp:h,passwordRules:c,showPasswordStrength:a}),u.Stack(t.attr.class("bc-auth-form__footer"),q())),"reset-password":()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.resetPasswordTitle,v.$.resetPasswordTitle)),H({labels:{backToSignInLink:r?.backToSignInLink,emailLabel:r?.emailLabel,resetPasswordButton:r?.resetPasswordButton,resetPasswordDescription:r?.resetPasswordDescription},onResetPassword:f}),u.Stack(t.attr.class("bc-auth-form__footer"),q()))}),..._)})}function Et(o){return g.Modal({size:"sm",dismissable:!0,showCloseButton:!0},(e,i)=>o(l=>e({body:Y({showContainer:!1,...l}),header:t.Use(y.AuthI18n,c=>t.coalesce(l.modalTitle,c.$.authenticationTitle))})))}function F({labels:o,className:e}={}){return t.html.div(t.attr.class("bc-auth-divider"),t.attr.class(e),t.html.div(t.attr.class("bc-auth-divider__line")),t.Use(y.AuthI18n,i=>t.html.span(t.attr.class("bc-auth-divider__text"),t.coalesce(o?.text,i.$.orDivider))),t.html.div(t.attr.class("bc-auth-divider__line")))}exports.AmazonLoginButton=$t;exports.AppleLoginButton=ht;exports.AuthContainer=Y;exports.AuthDivider=F;exports.AuthModal=Et;exports.DiscordLoginButton=Lt;exports.EpicLoginButton=xt;exports.FacebookLoginButton=gt;exports.GitHubLoginButton=pt;exports.GoogleLoginButton=dt;exports.InstagramLoginButton=kt;exports.LinkedInLoginButton=_t;exports.MicrosoftLoginButton=wt;exports.PasswordStrengthBar=mt;exports.PasswordStrengthIndicator=G;exports.PasswordStrengthText=ut;exports.PayPalLoginButton=zt;exports.PinterestLoginButton=yt;exports.PlayStationLoginButton=qt;exports.RedditLoginButton=Pt;exports.ResetPasswordForm=H;exports.SignInForm=N;exports.SignUpForm=j;exports.SnapchatLoginButton=St;exports.SocialLoginButton=p;exports.SocialLoginButtons=X;exports.SocialProviders=W;exports.SteamLoginButton=It;exports.TiktokLoginButton=vt;exports.TwitchLoginButton=Bt;exports.TwitterLoginButton=bt;exports.WeChatLoginButton=Tt;exports.WhatsAppLoginButton=Ct;exports.XLoginButtin=ft;exports.XboxLoginButton=At;exports.YahooLoginButton=Ot;exports.authSchemas=it;exports.calculatePasswordStrength=E;exports.createPasswordSchema=$;exports.createSignInSchema=O;exports.createSignUpSchema=z;exports.createSocialLoginUrl=ot;exports.defaultPasswordRules=B;exports.defaultSignInSchema=rt;exports.defaultSignUpSchema=st;exports.emailSchema=x;exports.formatAuthError=at;exports.formatProviderName=R;exports.formatSocialLoginText=Q;exports.generateRandomString=M;exports.getProviderColor=K;exports.getProviderIcon=J;exports.isBrowser=nt;exports.isValidEmail=tt;exports.openSocialLoginPopup=et;exports.providerInfo=C;exports.requestToControllerValidation=T;exports.resetPasswordSchema=D;exports.socialProviderInfo=d;exports.useAuthEmailProp=V;exports.validateEmail=ct;exports.validatePassword=lt;
|
package/dist/auth/index.es.js
CHANGED
|
@@ -622,10 +622,11 @@ function ke({
|
|
|
622
622
|
}), k = G({
|
|
623
623
|
schema: _,
|
|
624
624
|
onSubmit: Z({
|
|
625
|
-
task: n != null ? (
|
|
626
|
-
email:
|
|
627
|
-
password:
|
|
628
|
-
name:
|
|
625
|
+
task: n != null ? (y) => n({
|
|
626
|
+
email: y.email,
|
|
627
|
+
password: y.password,
|
|
628
|
+
name: y.name,
|
|
629
|
+
acceptTerms: y.acceptTerms
|
|
629
630
|
}) : void 0,
|
|
630
631
|
message: "Reset password failed",
|
|
631
632
|
onStart: () => {
|
|
@@ -644,10 +645,10 @@ function ke({
|
|
|
644
645
|
}
|
|
645
646
|
}), { controller: v, submit: x } = k;
|
|
646
647
|
f.on(v.setDisabled);
|
|
647
|
-
const
|
|
648
|
+
const S = v.field("name"), U = v.field("email"), O = v.field("password"), D = v.field("confirmPassword"), P = v.field("acceptTerms");
|
|
648
649
|
return q(
|
|
649
650
|
B,
|
|
650
|
-
(
|
|
651
|
+
(y) => (
|
|
651
652
|
// Registration form
|
|
652
653
|
i.form(
|
|
653
654
|
C(v.dispose, f.dispose),
|
|
@@ -666,22 +667,22 @@ function ke({
|
|
|
666
667
|
b(
|
|
667
668
|
u !== !1,
|
|
668
669
|
() => T(he, {
|
|
669
|
-
controller:
|
|
670
|
+
controller: S.transform(
|
|
670
671
|
(L) => L ?? "",
|
|
671
672
|
(L) => L === "" ? void 0 : L
|
|
672
673
|
),
|
|
673
|
-
label: h(o?.nameLabel,
|
|
674
|
+
label: h(o?.nameLabel, y.$.nameLabel)
|
|
674
675
|
})
|
|
675
676
|
),
|
|
676
677
|
// Email field
|
|
677
678
|
T(H, {
|
|
678
679
|
controller: U,
|
|
679
|
-
label: h(o?.emailLabel,
|
|
680
|
+
label: h(o?.emailLabel, y.$.emailLabel)
|
|
680
681
|
}),
|
|
681
682
|
// Password field
|
|
682
683
|
T(N, {
|
|
683
684
|
controller: O,
|
|
684
|
-
label: h(o?.passwordLabel,
|
|
685
|
+
label: h(o?.passwordLabel, y.$.passwordLabel)
|
|
685
686
|
}),
|
|
686
687
|
// Password strength indicator
|
|
687
688
|
b(
|
|
@@ -699,7 +700,7 @@ function ke({
|
|
|
699
700
|
controller: D,
|
|
700
701
|
label: h(
|
|
701
702
|
o?.confirmPasswordLabel,
|
|
702
|
-
|
|
703
|
+
y.$.confirmPasswordLabel
|
|
703
704
|
)
|
|
704
705
|
})
|
|
705
706
|
),
|
|
@@ -711,18 +712,18 @@ function ke({
|
|
|
711
712
|
i.label(
|
|
712
713
|
t.class("bc-auth-form__checkbox-label"),
|
|
713
714
|
ae({
|
|
714
|
-
value:
|
|
715
|
-
onChange: (L) =>
|
|
715
|
+
value: P.signal.map((L) => L ?? !1),
|
|
716
|
+
onChange: (L) => P.change(L)
|
|
716
717
|
}),
|
|
717
718
|
i.span(
|
|
718
|
-
r || h(o?.acceptTermsLabel,
|
|
719
|
+
r || h(o?.acceptTermsLabel, y.$.acceptTermsLabel)
|
|
719
720
|
)
|
|
720
721
|
),
|
|
721
722
|
b(
|
|
722
|
-
|
|
723
|
+
P.errorVisible,
|
|
723
724
|
() => i.div(
|
|
724
725
|
t.class("bc-auth-form__field-error"),
|
|
725
|
-
|
|
726
|
+
P.error.map((L) => L || "")
|
|
726
727
|
)
|
|
727
728
|
)
|
|
728
729
|
)
|
|
@@ -738,7 +739,7 @@ function ke({
|
|
|
738
739
|
disabled: v.disabledOrHasErrors
|
|
739
740
|
},
|
|
740
741
|
t.class("bc-auth-form__submit"),
|
|
741
|
-
h(o?.signUpButton,
|
|
742
|
+
h(o?.signUpButton, y.$.signUpButton)
|
|
742
743
|
)
|
|
743
744
|
)
|
|
744
745
|
)
|
|
@@ -1143,14 +1144,14 @@ function Se({
|
|
|
1143
1144
|
showContainer: k
|
|
1144
1145
|
}, ...v) {
|
|
1145
1146
|
const x = e != null ? oe.deriveProp(e) : V("signin");
|
|
1146
|
-
return x.on((
|
|
1147
|
+
return x.on((S) => _?.(S)), q(B, (S) => {
|
|
1147
1148
|
function U() {
|
|
1148
|
-
const
|
|
1149
|
+
const P = h(a?.hasAccountLink, S.$.hasAccountLink);
|
|
1149
1150
|
return i.button(
|
|
1150
1151
|
t.type("button"),
|
|
1151
1152
|
t.class("bc-auth-form__link"),
|
|
1152
1153
|
E.click(() => x.set("signin")),
|
|
1153
|
-
|
|
1154
|
+
P
|
|
1154
1155
|
);
|
|
1155
1156
|
}
|
|
1156
1157
|
function O() {
|
|
@@ -1158,7 +1159,7 @@ function Se({
|
|
|
1158
1159
|
t.type("button"),
|
|
1159
1160
|
t.class("bc-auth-form__link"),
|
|
1160
1161
|
E.click(() => x.set("signup")),
|
|
1161
|
-
h(a?.noAccountLink,
|
|
1162
|
+
h(a?.noAccountLink, S.$.noAccountLink)
|
|
1162
1163
|
);
|
|
1163
1164
|
}
|
|
1164
1165
|
function D() {
|
|
@@ -1166,22 +1167,22 @@ function Se({
|
|
|
1166
1167
|
t.type("button"),
|
|
1167
1168
|
t.class("bc-auth-form__link"),
|
|
1168
1169
|
E.click(() => x.set("reset-password")),
|
|
1169
|
-
h(a?.forgotPasswordLink,
|
|
1170
|
+
h(a?.forgotPasswordLink, S.$.forgotPasswordLink)
|
|
1170
1171
|
);
|
|
1171
1172
|
}
|
|
1172
1173
|
return i.div(
|
|
1173
1174
|
fe({
|
|
1174
1175
|
"bc-auth-container": !0,
|
|
1175
|
-
"bc-auth-container--styled": oe.map(k ?? !0, (
|
|
1176
|
+
"bc-auth-container--styled": oe.map(k ?? !0, (P) => P)
|
|
1176
1177
|
}),
|
|
1177
|
-
t.class(x.map((
|
|
1178
|
+
t.class(x.map((P) => `bc-auth-container--${P}`)),
|
|
1178
1179
|
t.class("bc-auth-form"),
|
|
1179
1180
|
C(x.dispose),
|
|
1180
1181
|
ue(x, {
|
|
1181
1182
|
signin: () => z(
|
|
1182
1183
|
i.h2(
|
|
1183
1184
|
t.class("bc-auth-form__title"),
|
|
1184
|
-
h(a?.signInTitle,
|
|
1185
|
+
h(a?.signInTitle, S.$.signInTitle)
|
|
1185
1186
|
),
|
|
1186
1187
|
o != null ? z(
|
|
1187
1188
|
se({ providers: o }),
|
|
@@ -1209,7 +1210,7 @@ function Se({
|
|
|
1209
1210
|
signup: () => z(
|
|
1210
1211
|
i.h2(
|
|
1211
1212
|
t.class("bc-auth-form__title"),
|
|
1212
|
-
h(a?.signUpTitle,
|
|
1213
|
+
h(a?.signUpTitle, S.$.signUpTitle)
|
|
1213
1214
|
),
|
|
1214
1215
|
o != null ? z(
|
|
1215
1216
|
se({ providers: o }),
|
|
@@ -1236,7 +1237,7 @@ function Se({
|
|
|
1236
1237
|
"reset-password": () => z(
|
|
1237
1238
|
i.h2(
|
|
1238
1239
|
t.class("bc-auth-form__title"),
|
|
1239
|
-
h(a?.resetPasswordTitle,
|
|
1240
|
+
h(a?.resetPasswordTitle, S.$.resetPasswordTitle)
|
|
1240
1241
|
),
|
|
1241
1242
|
ve({
|
|
1242
1243
|
labels: {
|
package/dist/beatui.css
CHANGED
|
@@ -5721,6 +5721,82 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5721
5721
|
border-radius: var(--radius-lg);
|
|
5722
5722
|
}
|
|
5723
5723
|
|
|
5724
|
+
@layer components {
|
|
5725
|
+
.bc-announcement-bar {
|
|
5726
|
+
--announcement-bar-bg-color: var(--color-primary-600);
|
|
5727
|
+
--announcement-bar-text-color: #ffffff;
|
|
5728
|
+
|
|
5729
|
+
position: absolute;
|
|
5730
|
+
top: 0;
|
|
5731
|
+
left: 50%;
|
|
5732
|
+
transform: translateX(-50%);
|
|
5733
|
+
z-index: var(--z-index-sticky, 50);
|
|
5734
|
+
|
|
5735
|
+
display: flex;
|
|
5736
|
+
align-items: center;
|
|
5737
|
+
justify-content: center;
|
|
5738
|
+
|
|
5739
|
+
background-color: var(--announcement-bar-bg-color);
|
|
5740
|
+
color: var(--announcement-bar-text-color);
|
|
5741
|
+
|
|
5742
|
+
padding: var(--spacing-sm) var(--spacing-lg);
|
|
5743
|
+
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
5744
|
+
box-shadow: var(--shadow-md);
|
|
5745
|
+
|
|
5746
|
+
font-size: var(--font-size-sm);
|
|
5747
|
+
line-height: var(--line-height-normal);
|
|
5748
|
+
|
|
5749
|
+
max-width: min(90%, 800px);
|
|
5750
|
+
}
|
|
5751
|
+
|
|
5752
|
+
.bc-announcement-bar__content {
|
|
5753
|
+
display: flex;
|
|
5754
|
+
align-items: center;
|
|
5755
|
+
gap: var(--spacing-sm);
|
|
5756
|
+
}
|
|
5757
|
+
|
|
5758
|
+
.bc-announcement-bar__icon {
|
|
5759
|
+
display: flex;
|
|
5760
|
+
align-items: center;
|
|
5761
|
+
line-height: 0;
|
|
5762
|
+
}
|
|
5763
|
+
|
|
5764
|
+
.bc-announcement-bar__text {
|
|
5765
|
+
flex: 1;
|
|
5766
|
+
text-align: center;
|
|
5767
|
+
}
|
|
5768
|
+
|
|
5769
|
+
.bc-announcement-bar__close {
|
|
5770
|
+
display: flex;
|
|
5771
|
+
align-items: center;
|
|
5772
|
+
margin-left: var(--spacing-sm);
|
|
5773
|
+
}
|
|
5774
|
+
|
|
5775
|
+
/* Ensure close button is visible on colored background */
|
|
5776
|
+
.bc-announcement-bar--dismissible .bc-announcement-bar__close button {
|
|
5777
|
+
color: var(--announcement-bar-text-color);
|
|
5778
|
+
opacity: 0.9;
|
|
5779
|
+
}
|
|
5780
|
+
|
|
5781
|
+
.bc-announcement-bar--dismissible .bc-announcement-bar__close button:hover {
|
|
5782
|
+
opacity: 1;
|
|
5783
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
5784
|
+
}
|
|
5785
|
+
|
|
5786
|
+
/* Responsive adjustments */
|
|
5787
|
+
@media (max-width: 640px) {
|
|
5788
|
+
.bc-announcement-bar {
|
|
5789
|
+
max-width: 95%;
|
|
5790
|
+
padding: var(--spacing-xs) var(--spacing-md);
|
|
5791
|
+
font-size: var(--font-size-xs);
|
|
5792
|
+
}
|
|
5793
|
+
|
|
5794
|
+
.bc-announcement-bar__content {
|
|
5795
|
+
gap: var(--spacing-xs);
|
|
5796
|
+
}
|
|
5797
|
+
}
|
|
5798
|
+
}
|
|
5799
|
+
|
|
5724
5800
|
.bc-panel {
|
|
5725
5801
|
--panel-bg: var(--bg-surface-light);
|
|
5726
5802
|
--panel-bg-dark: var(--bg-surface-dark);
|
package/dist/beatui.tailwind.css
CHANGED
|
@@ -5396,6 +5396,82 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
|
|
|
5396
5396
|
border-radius: var(--radius-lg);
|
|
5397
5397
|
}
|
|
5398
5398
|
|
|
5399
|
+
@layer components {
|
|
5400
|
+
.bc-announcement-bar {
|
|
5401
|
+
--announcement-bar-bg-color: var(--color-primary-600);
|
|
5402
|
+
--announcement-bar-text-color: #ffffff;
|
|
5403
|
+
|
|
5404
|
+
position: absolute;
|
|
5405
|
+
top: 0;
|
|
5406
|
+
left: 50%;
|
|
5407
|
+
transform: translateX(-50%);
|
|
5408
|
+
z-index: var(--z-index-sticky, 50);
|
|
5409
|
+
|
|
5410
|
+
display: flex;
|
|
5411
|
+
align-items: center;
|
|
5412
|
+
justify-content: center;
|
|
5413
|
+
|
|
5414
|
+
background-color: var(--announcement-bar-bg-color);
|
|
5415
|
+
color: var(--announcement-bar-text-color);
|
|
5416
|
+
|
|
5417
|
+
padding: var(--spacing-sm) var(--spacing-lg);
|
|
5418
|
+
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
5419
|
+
box-shadow: var(--shadow-md);
|
|
5420
|
+
|
|
5421
|
+
font-size: var(--font-size-sm);
|
|
5422
|
+
line-height: var(--line-height-normal);
|
|
5423
|
+
|
|
5424
|
+
max-width: min(90%, 800px);
|
|
5425
|
+
}
|
|
5426
|
+
|
|
5427
|
+
.bc-announcement-bar__content {
|
|
5428
|
+
display: flex;
|
|
5429
|
+
align-items: center;
|
|
5430
|
+
gap: var(--spacing-sm);
|
|
5431
|
+
}
|
|
5432
|
+
|
|
5433
|
+
.bc-announcement-bar__icon {
|
|
5434
|
+
display: flex;
|
|
5435
|
+
align-items: center;
|
|
5436
|
+
line-height: 0;
|
|
5437
|
+
}
|
|
5438
|
+
|
|
5439
|
+
.bc-announcement-bar__text {
|
|
5440
|
+
flex: 1;
|
|
5441
|
+
text-align: center;
|
|
5442
|
+
}
|
|
5443
|
+
|
|
5444
|
+
.bc-announcement-bar__close {
|
|
5445
|
+
display: flex;
|
|
5446
|
+
align-items: center;
|
|
5447
|
+
margin-left: var(--spacing-sm);
|
|
5448
|
+
}
|
|
5449
|
+
|
|
5450
|
+
/* Ensure close button is visible on colored background */
|
|
5451
|
+
.bc-announcement-bar--dismissible .bc-announcement-bar__close button {
|
|
5452
|
+
color: var(--announcement-bar-text-color);
|
|
5453
|
+
opacity: 0.9;
|
|
5454
|
+
}
|
|
5455
|
+
|
|
5456
|
+
.bc-announcement-bar--dismissible .bc-announcement-bar__close button:hover {
|
|
5457
|
+
opacity: 1;
|
|
5458
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
5459
|
+
}
|
|
5460
|
+
|
|
5461
|
+
/* Responsive adjustments */
|
|
5462
|
+
@media (max-width: 640px) {
|
|
5463
|
+
.bc-announcement-bar {
|
|
5464
|
+
max-width: 95%;
|
|
5465
|
+
padding: var(--spacing-xs) var(--spacing-md);
|
|
5466
|
+
font-size: var(--font-size-xs);
|
|
5467
|
+
}
|
|
5468
|
+
|
|
5469
|
+
.bc-announcement-bar__content {
|
|
5470
|
+
gap: var(--spacing-xs);
|
|
5471
|
+
}
|
|
5472
|
+
}
|
|
5473
|
+
}
|
|
5474
|
+
|
|
5399
5475
|
.bc-panel {
|
|
5400
5476
|
--panel-bg: var(--bg-surface-light);
|
|
5401
5477
|
--panel-bg-dark: var(--bg-surface-dark);
|