@authdog/react-elements 0.0.44 → 0.0.46

package/dist/styles.css

@@ -572,6 +572,19 @@ video {
   color: hsl(var(--foreground));
     font-feature-settings: "rlig" 1, "calt" 1;
 }
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+}
+@media (min-width: 1400px) {
+
+  .container {
+    max-width: 1400px;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -633,9 +646,6 @@ video {
 .top-4 {
   top: 1rem;
 }
-.z-40 {
-  z-index: 40;
-}
 .z-50 {
   z-index: 50;
 }
@@ -1132,9 +1142,6 @@ video {
 .bg-background {
   background-color: hsl(var(--background));
 }
-.bg-background\/80 {
-  background-color: hsl(var(--background) / 0.8);
-}
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -1593,10 +1600,6 @@ video {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
-.backdrop-filter {
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1958,12 +1961,6 @@ video {
 .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
   opacity: 0.5;
 }
-@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
-
-  .supports-\[backdrop-filter\]\:bg-background\/60 {
-    background-color: hsl(var(--background) / 0.6);
-  }
-}
 .dark\:border-amber-400\/40:is(.dark *) {
   border-color: rgb(251 191 36 / 0.4);
 }
@@ -2117,10 +2114,6 @@ video {
 }
 @media (min-width: 1024px) {
 
-  .lg\:max-w-\[80vw\] {
-    max-width: 80vw;
-  }
-
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authdog/react-elements",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -20,7 +20,7 @@
     "autoprefixer": "^10",
     "css-loader": "^6.8.1",
     "eslint-plugin-storybook": "^10.1.3",
-    "next": "15.1.6",
+    "next": "15.4.8",
     "postcss": "^8",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",

package/src/components/core/navbar.tsx

@@ -36,6 +36,12 @@ interface NavbarProps {
   className?: string;
   logoText?: string;
   logoSrc?: string;
+  /**
+   * Optional custom alt text element rendered next to the logo.
+   * When not provided, the plain `logoText` string is rendered.
+   * Use this to pass in custom typography / font classes.
+   */
+  altText?: React.ReactNode;
   isLoading?: boolean;
   user?: any;
   onNavigateHome?: () => void;
@@ -55,6 +61,7 @@ export function Navbar({
   className,
   logoText = "ACME Corp",
   logoSrc,
+  altText,
   user = {
     name: "John Doe",
     email: "john@example.com",
@@ -79,14 +86,16 @@ export function Navbar({
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 w-full border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        // Keep the navbar simple and predictable so host apps can style around it.
+        // We avoid sticky positioning, backdrop filters, and custom width constraints.
+        "w-full border-b bg-background",
         className,
       )}
     >
       <div
         className={cn(
-          "flex h-16 items-center justify-between px-4 md:px-6",
-          "w-full lg:max-w-[80vw] mx-auto",
+          // Basic centered container with horizontal padding.
+          "mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4 md:px-6",
         )}
       >
         <div className="flex items-center gap-3 md:gap-4">
@@ -109,9 +118,11 @@ export function Navbar({
                 />
               </span>
             )}
-            <span className="text-base font-semibold tracking-tight md:text-lg group-hover:text-primary">
-              {logoText}
-            </span>
+            {altText ?? (
+              <span className="text-base font-semibold tracking-tight md:text-lg group-hover:text-primary">
+                {logoText}
+              </span>
+            )}
           </button>
           {children}
         </div>