@tempots/beatui 0.30.2 → 0.32.0

package/dist/auth/index.es.js

@@ -1,7 +1,8 @@
 import { localStorageProp as re, prop as E, Use as P, html as i, OnDispose as U, attr as t, on as T, When as L, coalesce as h, Ensure as N, computedOf as f, bind as ie, ForEach as ce, Value as Q, OneOfValue as le, Fragment as A } from "@tempots/dom";
-import { t as me, b as ee, u as R, S as q, c as se, d as $, P as M, E as W, N as G, a as O, T as ue, I as de } from "../notice-DVEacWKt.js";
-import { s as I, o as H, b as D, M as pe } from "../modal-DvGSDVSv.js";
-import { AuthI18n as x } from "../translations-DdNHXAWr.js";
+import { t as me, a as ee, u as R, S as q, b as se, c as $, P as M, E as W, N as G } from "../notice-Ct8ZHvwq.js";
+import { s as I, o as H, b as D, M as ue } from "../modal-eY-3j_zS.js";
+import { AuthI18n as x } from "../translations-1yD6Rm5l.js";
+import { B as O, T as de, I as pe } from "../translations-iam7PITs.js";
 import { classes as he } from "@tempots/ui";
 const j = {
   google: { name: "Google", icon: "logos:google-icon", color: "#4285f4" },
@@ -52,13 +53,13 @@ const j = {
 function ge(e) {
   return j[e]?.name || e;
 }
-function Be(e) {
+function $e(e) {
   return j[e]?.icon || "mdi:account";
 }
-function $e(e) {
+function Ie(e) {
   return j[e]?.color || "#666";
 }
-function Ie(e, o = "Continue with {provider}") {
+function Te(e, o = "Continue with {provider}") {
   return o.replace("{provider}", ge(e));
 }
 const B = {
@@ -68,7 +69,7 @@ const B = {
   requireNumbers: !0,
   requireSymbols: !1
 };
-function Te(e) {
+function Ae(e) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
 function fe(e = 32) {
@@ -78,7 +79,7 @@ function fe(e = 32) {
     c += o.charAt(Math.floor(Math.random() * o.length));
   return c;
 }
-function Ae(e, o, c, m = [], l = {}) {
+function Ce(e, o, c, m = [], l = {}) {
   const a = {
     google: "https://accounts.google.com/oauth/authorize",
     github: "https://github.com/login/oauth/authorize",
@@ -142,7 +143,7 @@ function Ae(e, o, c, m = [], l = {}) {
   });
   return `${n}?${w.toString()}`;
 }
-function Ce(e, o, c, m) {
+function ze(e, o, c, m) {
   const l = window.open(
     e,
     `${o}_login`,
@@ -159,10 +160,10 @@ function Ce(e, o, c, m) {
   };
   window.addEventListener("message", s);
 }
-function ze(e) {
+function Ee(e) {
   return e instanceof Error ? e.message : typeof e == "string" ? e : e && typeof e == "object" && "message" in e ? String(e.message) : "An unexpected error occurred";
 }
-function Ee() {
+function Ue() {
   return typeof window < "u" && typeof document < "u";
 }
 function X({
@@ -234,16 +235,16 @@ function J(e = B, o) {
 }
 const ne = H({
   email: V
-}).schema(), Ue = Z(), Oe = J(), Ve = {
+}).schema(), Oe = Z(), Ve = J(), Fe = {
   signIn: Z,
   signUp: J,
   resetPassword: () => ne
 };
-function Fe(e) {
+function Me(e) {
   const o = V.validate(e);
   return o.success ? null : o.errors[0]?.message || "Invalid email";
 }
-function Me(e, o = B) {
+function De(e, o = B) {
   const m = Y(o).validate(e);
   return m.success ? null : m.errors[0]?.message || "Invalid password";
 }
@@ -539,7 +540,7 @@ function we({
     )
   );
 }
-function De({
+function Ne({
   password: e,
   rules: o = B,
   className: c
@@ -560,7 +561,7 @@ function De({
     )
   );
 }
-function Ne({
+function Re({
   password: e,
   rules: o = B,
   className: c
@@ -657,7 +658,7 @@ function _e({
           // Name field (optional)
           L(
             l !== !1,
-            () => $(ue, {
+            () => $(de, {
               controller: k.transform(
                 (v) => v ?? "",
                 (v) => v === "" ? void 0 : v
@@ -841,7 +842,7 @@ function p({
       t.class("bc-social-login-button__inner"),
       i.span(
         t.class("bc-social-login-button__icon"),
-        de({ icon: l, size: c }, t.class("bc-social-login-button__icon-inner"))
+        pe({ icon: l, size: c }, t.class("bc-social-login-button__icon-inner"))
       ),
       P(
         x,
@@ -1013,99 +1014,99 @@ const d = {
     color: "blue"
     // distinct deep blue tone (not Facebook’s exact blue)
   }
-}, Re = (e) => p({
+}, We = (e) => p({
   ...e,
   ...d.google,
   provider: "google"
-}), We = (e) => p({
+}), Ge = (e) => p({
   ...e,
   ...d.github,
   provider: "github"
-}), Ge = (e) => p({
+}), He = (e) => p({
   ...e,
   ...d.apple,
   provider: "apple"
-}), He = (e) => p({
+}), je = (e) => p({
   ...e,
   ...d.facebook,
   provider: "facebook"
-}), je = (e) => p({
+}), Xe = (e) => p({
   ...e,
   ...d.x,
   provider: "x"
-}), Xe = (e) => p({
+}), Ye = (e) => p({
   ...e,
   ...d.twitter,
   provider: "twitter"
-}), Ye = (e) => p({
+}), Ze = (e) => p({
   ...e,
   ...d.microsoft,
   provider: "microsoft"
-}), Ze = (e) => p({
+}), Je = (e) => p({
   ...e,
   ...d.discord,
   provider: "discord"
-}), Je = (e) => p({
+}), Ke = (e) => p({
   ...e,
   ...d.linkedin,
   provider: "linkedin"
-}), Ke = (e) => p({
+}), Qe = (e) => p({
   ...e,
   ...d.instagram,
   provider: "instagram"
-}), Qe = (e) => p({
+}), eo = (e) => p({
   ...e,
   ...d.tiktok,
   provider: "tiktok"
-}), eo = (e) => p({
+}), oo = (e) => p({
   ...e,
   ...d.snapchat,
   provider: "snapchat"
-}), oo = (e) => p({
+}), to = (e) => p({
   ...e,
   ...d.reddit,
   provider: "reddit"
-}), to = (e) => p({
+}), so = (e) => p({
   ...e,
   ...d.pinterest,
   provider: "pinterest"
-}), so = (e) => p({
+}), no = (e) => p({
   ...e,
   ...d.twitch,
   provider: "twitch"
-}), no = (e) => p({
+}), ao = (e) => p({
   ...e,
   ...d.steam,
   provider: "steam"
-}), ao = (e) => p({
+}), ro = (e) => p({
   ...e,
   ...d.epic,
   provider: "epic"
-}), ro = (e) => p({
+}), io = (e) => p({
   ...e,
   ...d.playstation,
   provider: "playstation"
-}), io = (e) => p({
+}), co = (e) => p({
   ...e,
   ...d.xbox,
   provider: "xbox"
-}), co = (e) => p({
+}), lo = (e) => p({
   ...e,
   ...d.whatsapp,
   provider: "whatsapp"
-}), lo = (e) => p({
+}), mo = (e) => p({
   ...e,
   ...d.wechat,
   provider: "wechat"
-}), mo = (e) => p({
+}), uo = (e) => p({
   ...e,
   ...d.amazon,
   provider: "amazon"
-}), uo = (e) => p({
+}), po = (e) => p({
   ...e,
   ...d.yahoo,
   provider: "yahoo"
-}), po = (e) => p({
+}), ho = (e) => p({
   ...e,
   ...d.paypal,
   provider: "paypal"
@@ -1242,8 +1243,8 @@ function ke({
     );
   });
 }
-function ho(e) {
-  return pe(
+function go(e) {
+  return ue(
     {
       size: "sm",
       dismissable: !0,
@@ -1279,66 +1280,66 @@ function te({
   );
 }
 export {
-  mo as AmazonLoginButton,
-  Ge as AppleLoginButton,
+  uo as AmazonLoginButton,
+  He as AppleLoginButton,
   ke as AuthContainer,
   te as AuthDivider,
-  ho as AuthModal,
-  Ze as DiscordLoginButton,
-  ao as EpicLoginButton,
-  He as FacebookLoginButton,
-  We as GitHubLoginButton,
-  Re as GoogleLoginButton,
-  Ke as InstagramLoginButton,
-  Je as LinkedInLoginButton,
-  Ye as MicrosoftLoginButton,
-  De as PasswordStrengthBar,
+  go as AuthModal,
+  Je as DiscordLoginButton,
+  ro as EpicLoginButton,
+  je as FacebookLoginButton,
+  Ge as GitHubLoginButton,
+  We as GoogleLoginButton,
+  Qe as InstagramLoginButton,
+  Ke as LinkedInLoginButton,
+  Ze as MicrosoftLoginButton,
+  Ne as PasswordStrengthBar,
   we as PasswordStrengthIndicator,
-  Ne as PasswordStrengthText,
-  po as PayPalLoginButton,
-  to as PinterestLoginButton,
-  ro as PlayStationLoginButton,
-  oo as RedditLoginButton,
+  Re as PasswordStrengthText,
+  ho as PayPalLoginButton,
+  so as PinterestLoginButton,
+  io as PlayStationLoginButton,
+  to as RedditLoginButton,
   Le as ResetPasswordForm,
   be as SignInForm,
   _e as SignUpForm,
-  eo as SnapchatLoginButton,
+  oo as SnapchatLoginButton,
   p as SocialLoginButton,
   ve as SocialLoginButtons,
   oe as SocialProviders,
-  no as SteamLoginButton,
-  Qe as TiktokLoginButton,
-  so as TwitchLoginButton,
-  Xe as TwitterLoginButton,
-  lo as WeChatLoginButton,
-  co as WhatsAppLoginButton,
-  je as XLoginButtin,
-  io as XboxLoginButton,
-  uo as YahooLoginButton,
-  Ve as authSchemas,
+  ao as SteamLoginButton,
+  eo as TiktokLoginButton,
+  no as TwitchLoginButton,
+  Ye as TwitterLoginButton,
+  mo as WeChatLoginButton,
+  lo as WhatsAppLoginButton,
+  Xe as XLoginButtin,
+  co as XboxLoginButton,
+  po as YahooLoginButton,
+  Fe as authSchemas,
   K as calculatePasswordStrength,
   Y as createPasswordSchema,
   Z as createSignInSchema,
   J as createSignUpSchema,
-  Ae as createSocialLoginUrl,
+  Ce as createSocialLoginUrl,
   B as defaultPasswordRules,
-  Ue as defaultSignInSchema,
-  Oe as defaultSignUpSchema,
+  Oe as defaultSignInSchema,
+  Ve as defaultSignUpSchema,
   V as emailSchema,
-  ze as formatAuthError,
+  Ee as formatAuthError,
   ge as formatProviderName,
-  Ie as formatSocialLoginText,
+  Te as formatSocialLoginText,
   fe as generateRandomString,
-  $e as getProviderColor,
-  Be as getProviderIcon,
-  Ee as isBrowser,
-  Te as isValidEmail,
-  Ce as openSocialLoginPopup,
+  Ie as getProviderColor,
+  $e as getProviderIcon,
+  Ue as isBrowser,
+  Ae as isValidEmail,
+  ze as openSocialLoginPopup,
   j as providerInfo,
   X as requestToControllerValidation,
   ne as resetPasswordSchema,
   d as socialProviderInfo,
   ae as useAuthEmailProp,
-  Fe as validateEmail,
-  Me as validatePassword
+  Me as validateEmail,
+  De as validatePassword
 };

package/dist/beatui.css

@@ -2184,6 +2184,27 @@ a:focus-visible {
   border-radius: var(--radius-full);
 }
 
+/* Shared control font sizing to align heights across components */
+.bc-control--text-size-xs {
+  font-size: var(--font-size-xs);
+}
+
+.bc-control--text-size-sm {
+  font-size: var(--font-size-sm);
+}
+
+.bc-control--text-size-md {
+  font-size: var(--font-size-base);
+}
+
+.bc-control--text-size-lg {
+  font-size: var(--font-size-lg);
+}
+
+.bc-control--text-size-xl {
+  font-size: var(--font-size-xl);
+}
+
 /* Control Input Wrapper Component */
 .bc-control-input-wrapper {
   display: flex;
@@ -3289,10 +3310,13 @@ a:focus-visible {
 
 .bc-input-container {
   width: 100%;
-  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 4);
-  border: 0;
+  /* Horizontal padding only; vertical padding comes from size classes */
+  padding-inline: calc(var(--spacing-base) * 4);
+  /* Add a transparent border to match button height math */
+  border: 1.5px solid transparent;
   border-radius: var(--radius-control, var(--radius-md));
   box-shadow: var(--shadow-surface, var(--shadow-sm));
+  line-height: 1;
   transition: all
     var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
     var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
@@ -3504,8 +3528,8 @@ a:focus-visible {
 /* Responsive styles */
 @media (width >=var(--breakpoint-sm)) {
   .bc-input-container {
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-normal);
+    /* Do not force font-size; sizing classes control this */
+    line-height: 1;
   }
 }
 
@@ -6477,6 +6501,8 @@ span.bc-sidebar-link {
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  min-height: max-content;
+  flex-shrink: 0;
 }
 
 .bc-tabs__list::-webkit-scrollbar {
@@ -6553,7 +6579,7 @@ span.bc-sidebar-link {
 }
 
 /* Tab States */
-.bc-tab:hover:not(.bc-tab--disabled) {
+.bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
   color: var(--color-base-800);
   background-color: var(--color-base-50);
 }
@@ -6568,6 +6594,7 @@ span.bc-sidebar-link {
   color: var(--color-primary-600);
   background-color: var(--color-white);
   font-weight: var(--font-weight-semibold);
+  cursor: default;
 }
 
 .bc-tab--active::after {
@@ -6606,13 +6633,10 @@ span.bc-sidebar-link {
 
 /* Tab Panels Container */
 .bc-tabs__panels {
-  flex: 1;
-  position: relative;
   flex-grow: 1;
 }
 
 .bc-tabs--vertical .bc-tabs__panels {
-  flex: 1;
   min-height: 0;
 }
 
@@ -6663,7 +6687,7 @@ span.bc-sidebar-link {
   color: var(--color-base-300);
 }
 
-.b-dark .bc-tab:hover:not(.bc-tab--disabled) {
+.b-dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
   color: var(--color-base-100);
   background-color: var(--color-base-700);
 }
@@ -6708,6 +6732,124 @@ span.bc-sidebar-link {
   }
 }
 
+/* Variants */
+/* Text variant: minimal, link-like tabs */
+.bc-tabs--variant-text .bc-tabs__list {
+  background-color: transparent;
+  border-bottom: none;
+}
+.bc-tabs--variant-text .bc-tab {
+  background: transparent;
+  color: var(--color-primary-600);
+  border-radius: 0;
+}
+.bc-tabs--variant-text .bc-tab:hover:not(.bc-tab--disabled) {
+  background: transparent;
+  text-decoration: underline;
+}
+.bc-tabs--variant-text .bc-tab--active {
+  background: transparent;
+  color: var(--color-primary-700);
+  font-weight: var(--font-weight-semibold);
+}
+.bc-tabs--variant-text .bc-tab--active::after {
+  display: none;
+}
+
+/* Filled variant: inverted - inactive tabs filled with color, active is white */
+.bc-tabs--variant-filled .bc-tabs__list {
+  background-color: transparent;
+  border-bottom: none;
+}
+.bc-tabs--variant-filled .bc-tab {
+  background-color: var(--tabs-filled-inactive-bg);
+  color: var(--tabs-filled-inactive-text);
+  border-radius: 0;
+}
+.bc-tabs--variant-filled .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
+.bc-tabs--variant-filled .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
+  background-color: var(--tabs-filled-inactive-bg-hover, var(--tabs-filled-inactive-bg));
+  color: var(--tabs-filled-inactive-text, var(--color-white));
+}
+.bc-tabs--variant-filled .bc-tab--active {
+  background-color: var(--tabs-filled-active-bg, var(--color-white));
+  color: var(--tabs-filled-active-text, var(--color-base-800));
+}
+.bc-tabs--variant-filled .bc-tab--active::after {
+  display: none;
+}
+/* Corner rounding rules */
+.bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:first-child {
+  border-top-left-radius: var(--radius-control-sm, var(--radius-sm));
+}
+.bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:last-child {
+  border-top-right-radius: var(--radius-control-sm, var(--radius-sm));
+}
+.bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:first-child {
+  border-top-left-radius: var(--radius-control-sm, var(--radius-sm));
+}
+.bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:last-child {
+  border-bottom-left-radius: var(--radius-control-sm, var(--radius-sm));
+}
+
+/* Outline variant: tabs look like segmented buttons */
+.bc-tabs--variant-outline .bc-tabs__list {
+  border-bottom: none;
+  gap: var(--spacing-2xs);
+}
+.bc-tabs--variant-outline .bc-tab {
+  background-color: var(--color-base-50);
+  border: 1px solid var(--color-base-300);
+  border-bottom: 1px solid var(--color-base-300);
+  border-radius: var(--radius-control-sm, var(--radius-sm)) var(--radius-control-sm, var(--radius-sm)) 0 0;
+}
+.bc-tabs--variant-outline .bc-tab--active {
+  background-color: var(--color-white);
+  border-color: var(--color-primary-400);
+  border-bottom-color: var(--color-white);
+}
+.bc-tabs--variant-outline .bc-tab--active::after {
+  display: none;
+}
+
+/* Dark mode adjustments for variants */
+.b-dark .bc-tabs--variant-text .bc-tabs__list {
+  background-color: transparent;
+  border-bottom: none;
+}
+.b-dark .bc-tabs--variant-text .bc-tab {
+  color: var(--color-primary-300);
+}
+.b-dark .bc-tabs--variant-text .bc-tab--active {
+  color: var(--color-primary-200);
+}
+
+.b-dark .bc-tabs--variant-filled .bc-tab {
+  background-color: var(--tabs-filled-inactive-bg-dark);
+  color: var(--tabs-filled-inactive-text-dark);
+}
+.b-dark .bc-tabs--variant-filled .bc-tab--active {
+  background-color: var(--tabs-filled-active-bg-dark, var(--color-white));
+  color: var(--tabs-filled-active-text-dark);
+}
+.b-dark .bc-tabs--variant-filled .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
+.b-dark .bc-tabs--variant-filled .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
+  background-color: var(--tabs-filled-inactive-bg-dark-hover, var(--tabs-filled-inactive-bg-dark));
+}
+
+
+
+.b-dark .bc-tabs--variant-outline .bc-tab {
+  background-color: var(--color-base-800);
+  border-color: var(--color-base-600);
+}
+.b-dark .bc-tabs--variant-outline .bc-tab--active {
+  background-color: var(--color-base-900);
+  border-color: var(--color-primary-600);
+  border-bottom-color: var(--color-base-900);
+}
+
+
 .bc-tooltip {
   background-color: var(--color-neutral-900);
   color: var(--color-neutral-50);
@@ -6872,11 +7014,13 @@ span.bc-sidebar-link {
 }
 
 .bc-toolbar__button--icon-only .bc-button {
-  padding: var(--spacing-2xs);
+  /* Keep button height consistent; only adjust horizontal padding */
+  padding-inline: var(--spacing-2xs);
 }
 
 .bc-toolbar .bc-input-container {
-  padding: calc(var(--spacing-base) * 1) calc(var(--spacing-base) * 3);
+  /* Reduce horizontal padding in toolbar but keep vertical from size */
+  padding-inline: calc(var(--spacing-base) * 3);
   outline-width: 1px;
   outline-offset: -1px;
   width: auto;
@@ -7047,6 +7191,69 @@ span.bc-sidebar-link {
 }
 
 
+/* Ribbon component - diagonal label on the top-right corner */
+
+.bc-ribbon {
+  position: absolute;
+  inset: 0;
+  pointer-events: none; /* decorative by default */
+  z-index: var(--z-index-tooltip, 50);
+  width: 100%;
+  height: 0;
+}
+
+/* The diagonal band */
+.bc-ribbon__band {
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* Tune how much the band shifts before rotation so its midline crosses the corner exactly */
+  transform-origin: top right;
+  /* Keep the band centerline on the corner regardless of width */
+  transform: rotate(45deg) translateX(calc(50% - var(--ribbon-inset, 0px)))
+    translateY(
+      calc(-0.5 * var(--ribbon-thickness, 28px) + var(--ribbon-offset, 0))
+    );
+
+  display: flex;
+  justify-content: center;
+
+  height: var(--ribbon-thickness, 28px);
+  line-height: var(--ribbon-thickness, 28px);
+
+  background: var(--ribbon-bg);
+  color: var(--ribbon-text);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-ribbon, var(--shadow-md));
+  text-shadow: var(--text-shadow-ribbon, var(--text-shadow-2xs));
+  font-weight: var(--text-weight-semibold);
+  font-size: var(--text-size-sm);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  min-width: var(--ribbon-min-width, 0);
+}
+
+/* Dark mode overrides */
+.b-dark .bc-ribbon__band {
+  background: var(--ribbon-bg-dark);
+  color: var(--ribbon-text-dark);
+}
+
+/* High contrast */
+@media (prefers-contrast: more) {
+  .bc-ribbon__band {
+    outline: 1px solid var(--border-border, var(--color-neutral-500));
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bc-ribbon__band {
+    transition: none;
+  }
+}
+
+
 }
 
 @layer utilities {