@sanvika/auth 2.9.3 → 2.9.4

package/dist/index.js

@@ -368,7 +368,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // SanvikaAccountButton.css
-styleInject("@keyframes snvk-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n.snvk-skeleton {\n  width: clamp(72px, 20vw, 96px);\n  height: clamp(34px, 8vw, 40px);\n  border-radius: 8px;\n  background:\n    linear-gradient(\n      90deg,\n      var(--skeleton-base-color, #d0d0d0) 25%,\n      var(--skeleton-highlight-color, #f0f0f0) 50%,\n      var(--skeleton-base-color, #d0d0d0) 75%);\n  background-size: 200% 100%;\n  animation: snvk-shimmer 1.4s infinite;\n  display: inline-block;\n}\n.snvk-wrapper {\n  position: relative;\n  display: inline-block;\n}\n.snvk-guestBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);\n  min-height: 44px;\n  min-width: 44px;\n  background: var(--sanvika-brand-color, #4f46e5);\n  color: #ffffff;\n  border: none;\n  border-radius: 8px;\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  white-space: nowrap;\n}\n.snvk-guestBtn:hover {\n  background: var(--sanvika-brand-hover, #4338ca);\n}\n.snvk-iconWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.snvk-profileBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 5px;\n  min-height: 44px;\n  background: var(--muted-bg, #f5f5f5);\n  border: 1px solid var(--border-color-light, #e5e7eb);\n  border-radius: 99px;\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--text-color, #1a1a1a);\n  transition:\n    background-color 0.3s ease,\n    border-color 0.3s ease,\n    color 0.3s ease;\n  white-space: nowrap;\n  outline: none;\n}\n.snvk-profileBtn:hover {\n  background: var(--hover-color, #ebebeb);\n  border-color: var(--border-color-dark, #d1d5db);\n}\n.snvk-profileBtn:focus-visible {\n  outline: 2px solid var(--sanvika-brand-color, #4f46e5);\n  outline-offset: 2px;\n}\n.snvk-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sanvika-brand-color, #4f46e5);\n  flex-shrink: 0;\n}\n.snvk-textWrap {\n  display: inline;\n}\n.snvk-hideTextOnMobile {\n  display: none;\n}\n@media (min-width: 500px) {\n  .snvk-hideTextOnMobile {\n    display: inline;\n  }\n}\n.snvk-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: clamp(200px, 60vw, 240px);\n  background: var(--card-bg, #f3f3f3);\n  border: 1px solid var(--border-color-light, #cccccc);\n  border-radius: 12px;\n  box-shadow: 0 8px 24px var(--shadow-color, rgba(0, 0, 0, 0.2));\n  z-index: 9999;\n  overflow: hidden;\n  transition: background-color 0.3s ease, border-color 0.3s ease;\n}\n.snvk-dropdownHeader {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px 16px;\n  background: var(--section-bg, #ebebeb);\n  transition: background-color 0.3s ease;\n}\n.snvk-dropdownAvatar {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sanvika-brand-color, #4f46e5);\n  flex-shrink: 0;\n}\n.snvk-dropdownName {\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 800;\n  color: var(--text-color, #000000);\n  line-height: 1.3;\n  transition: color 0.3s ease;\n}\n.snvk-dropdownMobile {\n  font-size: clamp(11px, 2.5vw, 12px);\n  color: var(--secondary-text-color, #333333);\n  margin-top: 2px;\n  transition: color 0.3s ease;\n  font-weight: 700;\n}\n.snvk-divider {\n  height: 1px;\n  background: var(--muted-border, #d8d8d8);\n  transition: background-color 0.3s ease;\n}\n.snvk-dropdownItem {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 11px 16px;\n  min-height: 44px;\n  background: none;\n  border: none;\n  font-size: clamp(13px, 3vw, 14px);\n  color: var(--text-color, #000000);\n  font-weight: 600;\n  cursor: pointer;\n  text-decoration: none;\n  text-align: left;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.snvk-dropdownItem:hover {\n  background: var(--hover-color, #e8e8e8);\n}\n");
+styleInject("@keyframes snvk-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n.snvk-skeleton {\n  width: clamp(72px, 20vw, 96px);\n  height: clamp(34px, 8vw, 40px);\n  border-radius: 8px;\n  background:\n    linear-gradient(\n      90deg,\n      var(--skeleton-base-color, #d0d0d0) 25%,\n      var(--skeleton-highlight-color, #f0f0f0) 50%,\n      var(--skeleton-base-color, #d0d0d0) 75%);\n  background-size: 200% 100%;\n  animation: snvk-shimmer 1.4s infinite;\n  display: inline-block;\n}\n.snvk-wrapper {\n  position: relative;\n  display: inline-block;\n}\n.snvk-guestBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);\n  min-height: 44px;\n  min-width: 44px;\n  background: var(--sanvika-brand-color, #4f46e5);\n  color: #ffffff;\n  border: none;\n  border-radius: 8px;\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  white-space: nowrap;\n}\n.snvk-guestBtn:hover {\n  background: var(--sanvika-brand-hover, #4338ca);\n}\n.snvk-iconWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.snvk-profileBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 5px;\n  min-height: 44px;\n  background: var(--muted-bg, #f5f5f5);\n  border: 1px solid var(--border-color-light, #e5e7eb);\n  border-radius: 99px;\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--text-color, #1a1a1a);\n  transition:\n    background-color 0.3s ease,\n    border-color 0.3s ease,\n    color 0.3s ease;\n  white-space: nowrap;\n  outline: none;\n}\n.snvk-profileBtn:hover {\n  background: var(--hover-color, #ebebeb);\n  border-color: var(--border-color-dark, #d1d5db);\n}\n.snvk-profileBtn:focus-visible {\n  outline: 2px solid var(--sanvika-brand-color, #4f46e5);\n  outline-offset: 2px;\n}\n.snvk-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sanvika-brand-color, #4f46e5);\n  flex-shrink: 0;\n}\n.snvk-textWrap {\n  display: inline;\n}\n.snvk-hideTextOnMobile {\n  display: none;\n}\n@media (min-width: 500px) {\n  .snvk-hideTextOnMobile {\n    display: inline;\n  }\n}\n.snvk-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: clamp(200px, 60vw, 240px);\n  background: var(--card-bg, #f3f3f3);\n  border: 1px solid var(--border-color-light, #cccccc);\n  border-radius: 12px;\n  box-shadow: 0 8px 24px var(--shadow-color, rgba(0, 0, 0, 0.2));\n  z-index: 9999;\n  overflow: hidden;\n  transition: background-color 0.3s ease, border-color 0.3s ease;\n}\n.snvk-dropdownHeader {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px 16px;\n  background: var(--section-bg, #ebebeb);\n  transition: background-color 0.3s ease;\n}\n.snvk-dropdownAvatar {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sanvika-brand-color, #4f46e5);\n  flex-shrink: 0;\n}\n.snvk-dropdownName {\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 800;\n  color: var(--text-color, #000000);\n  line-height: 1.3;\n  transition: color 0.3s ease;\n}\n.snvk-dropdownMobile {\n  font-size: clamp(11px, 2.5vw, 12px);\n  color: var(--secondary-text-color, #333333);\n  margin-top: 2px;\n  transition: color 0.3s ease;\n  font-weight: 700;\n}\n.snvk-divider {\n  height: 1px;\n  background: var(--muted-border, #d8d8d8);\n  transition: background-color 0.3s ease;\n}\n.snvk-dropdownItem {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 11px 16px;\n  min-height: 44px;\n  background: none;\n  border: none;\n  font-size: clamp(13px, 3vw, 14px);\n  color: var(--text-color, #000000);\n  font-weight: 600;\n  cursor: pointer;\n  text-decoration: none;\n  text-align: left;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.snvk-dropdownItem:hover {\n  background: var(--hover-color, #e8e8e8);\n}\n.snvk-layout-navbarChip.snvk-guestBtn,\n.snvk-layout-navbarChip-profile {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  height: clamp(32px, 8vw, 38px) !important;\n  min-height: clamp(32px, 8vw, 38px) !important;\n  max-height: clamp(32px, 8vw, 38px) !important;\n  padding: clamp(3px, 0.8vw, 5px) clamp(4px, 1.2vw, 8px) !important;\n  border-radius: 4px !important;\n  border: 1px solid var(--border-color) !important;\n  background-color: var(--btn-primary-bg) !important;\n  color: var(--btn-primary-text) !important;\n  font-size: clamp(9px, 2.4vw, 13px) !important;\n  font-weight: 600 !important;\n  line-height: 1.1 !important;\n  box-sizing: border-box !important;\n  white-space: nowrap !important;\n  cursor: pointer;\n}\n.snvk-layout-navbarChip.snvk-guestBtn {\n  min-width: clamp(52px, 16vw, 90px) !important;\n  max-width: clamp(64px, 22vw, 200px) !important;\n  gap: 0 !important;\n}\n.snvk-layout-navbarChip.snvk-guestBtn .snvk-iconWrap {\n  display: none !important;\n}\n.snvk-layout-navbarChip-profile {\n  min-width: clamp(52px, 16vw, 90px) !important;\n  max-width: clamp(72px, 24vw, 120px) !important;\n  gap: clamp(3px, 0.8vw, 5px) !important;\n}\n.snvk-layout-navbarChip-profile .snvk-avatar {\n  width: clamp(18px, 5vw, 22px) !important;\n  height: clamp(18px, 5vw, 22px) !important;\n  border: 2px solid var(--success-color, #00b894) !important;\n}\n.snvk-layout-navbarChip-profile .snvk-textWrap {\n  display: inline !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: clamp(32px, 12vw, 64px);\n}\n.snvk-layout-navbarChip.snvk-wrapper {\n  display: inline-flex;\n  align-items: center;\n}\n");
 
 // SanvikaAccountButton.jsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -453,9 +453,13 @@ function SanvikaAccountButtonContent({
   onLoginClick,
   onProfileClick,
   onboardingPath,
-  className
+  className,
+  layout = "default"
 }) {
   var _a, _b;
+  const isNavbarChip = layout === "navbarChip";
+  const guestBtnClass = `snvk-guestBtn${isNavbarChip ? " snvk-layout-navbarChip" : ""}${className ? ` ${className}` : ""}`;
+  const wrapperClass = `snvk-wrapper${isNavbarChip ? " snvk-layout-navbarChip" : ""}${className ? ` ${className}` : ""}`;
   const auth = useSanvikaAuth();
   const [dropdownOpen, setDropdownOpen] = useState2(false);
   const [imgError, setImgError] = useState2(false);
@@ -475,7 +479,7 @@ function SanvikaAccountButtonContent({
     return /* @__PURE__ */ jsxs(
       "button",
       {
-        className: `snvk-guestBtn ${className}`,
+        className: guestBtnClass,
         onClick: (e) => {
           if (onLoginClick) {
             onLoginClick();
@@ -485,11 +489,11 @@ function SanvikaAccountButtonContent({
         },
         "aria-label": "Login or Sign Up",
         children: [
-          /* @__PURE__ */ jsx2("span", { className: "snvk-iconWrap", children: /* @__PURE__ */ jsx2(UserIcon, { size: 18 }) }),
+          !isNavbarChip ? /* @__PURE__ */ jsx2("span", { className: "snvk-iconWrap", children: /* @__PURE__ */ jsx2(UserIcon, { size: 18 }) }) : null,
           /* @__PURE__ */ jsx2(
             "span",
             {
-              className: hideTextOnMobile ? "snvk-hideTextOnMobile" : "snvk-textWrap",
+              className: hideTextOnMobile && !isNavbarChip ? "snvk-hideTextOnMobile" : "snvk-textWrap",
               children: text
             }
           )
@@ -509,7 +513,7 @@ function SanvikaAccountButtonContent({
     return /* @__PURE__ */ jsxs(
       "button",
       {
-        className: `snvk-guestBtn ${className}`,
+        className: guestBtnClass,
         onClick: (e) => {
           if (onLoginClick) {
             onLoginClick();
@@ -519,11 +523,11 @@ function SanvikaAccountButtonContent({
         },
         "aria-label": "Login or Sign Up",
         children: [
-          /* @__PURE__ */ jsx2("span", { className: "snvk-iconWrap", children: /* @__PURE__ */ jsx2(UserIcon, { size: 18 }) }),
+          !isNavbarChip ? /* @__PURE__ */ jsx2("span", { className: "snvk-iconWrap", children: /* @__PURE__ */ jsx2(UserIcon, { size: 18 }) }) : null,
           /* @__PURE__ */ jsx2(
             "span",
             {
-              className: hideTextOnMobile ? "snvk-hideTextOnMobile" : "snvk-textWrap",
+              className: hideTextOnMobile && !isNavbarChip ? "snvk-hideTextOnMobile" : "snvk-textWrap",
               children: text
             }
           )
@@ -541,11 +545,11 @@ function SanvikaAccountButtonContent({
     await logout(false);
     setDropdownOpen(false);
   };
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: `snvk-wrapper ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: wrapperClass, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        className: "snvk-profileBtn",
+        className: `snvk-profileBtn${isNavbarChip ? " snvk-layout-navbarChip-profile" : ""}`,
         onClick: () => setDropdownOpen((o) => !o),
         onDoubleClick: handleProfileClick,
         "aria-label": "Account menu",
@@ -563,11 +567,11 @@ function SanvikaAccountButtonContent({
           /* @__PURE__ */ jsx2(
             "span",
             {
-              className: hideTextOnMobile ? "snvk-hideTextOnMobile" : "snvk-textWrap",
+              className: hideTextOnMobile && !isNavbarChip ? "snvk-hideTextOnMobile" : "snvk-textWrap",
               children: displayName
             }
           ),
-          /* @__PURE__ */ jsx2(ChevronIcon, { open: dropdownOpen })
+          !isNavbarChip ? /* @__PURE__ */ jsx2(ChevronIcon, { open: dropdownOpen }) : null
         ]
       }
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanvika/auth",
-  "version": "2.9.3",
+  "version": "2.9.4",
   "description": "Sanvika Auth SDK — React components/hooks + server-side token verification and user proxy",
   "type": "module",
   "main": "dist/index.js",