sonance-brand-mcp 1.3.111 → 1.3.113

package/dist/assets/components/kbd.tsx

@@ -3,18 +3,33 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const kbdVariants = cva(
-  "inline-flex items-center justify-center font-mono font-medium border transition-all",
+  cn(
+    "inline-flex items-center justify-center font-mono font-medium",
+    "transition-all backdrop-blur-sm"
+  ),
   {
     variants: {
       variant: {
-        default: "bg-background-secondary border-border text-foreground",
-        outline: "bg-transparent border-border text-foreground-secondary",
-        flat: "bg-background-tertiary border-transparent text-foreground-muted",
+        default: cn(
+          "bg-white/60 dark:bg-white/5",
+          "border border-black/10 dark:border-white/10",
+          "text-foreground shadow-sm"
+        ),
+        outline: cn(
+          "bg-transparent",
+          "border border-black/15 dark:border-white/15",
+          "text-foreground-muted"
+        ),
+        glass: cn(
+          "bg-white/40 dark:bg-white/5",
+          "border border-black/5 dark:border-white/10",
+          "text-foreground-muted shadow-sm"
+        ),
       },
       size: {
-        sm: "h-4 sm:h-5 min-w-4 sm:min-w-5 px-0.5 sm:px-1 text-[9px] sm:text-[10px] rounded-sm",
-        md: "h-5 sm:h-6 min-w-5 sm:min-w-6 px-1 sm:px-1.5 text-[10px] sm:text-xs rounded-sm",
-        lg: "h-6 sm:h-7 min-w-6 sm:min-w-7 px-1.5 sm:px-2 text-xs sm:text-sm rounded",
+        sm: "h-4 sm:h-5 min-w-4 sm:min-w-5 px-0.5 sm:px-1 text-[9px] sm:text-[10px] rounded-md",
+        md: "h-5 sm:h-6 min-w-5 sm:min-w-6 px-1 sm:px-1.5 text-[10px] sm:text-xs rounded-md",
+        lg: "h-6 sm:h-7 min-w-6 sm:min-w-7 px-1.5 sm:px-2 text-xs sm:text-sm rounded-lg",
       },
     },
     defaultVariants: {
@@ -36,12 +51,13 @@ export const Kbd = forwardRef<HTMLElement, KbdProps>(
     if (keys) {
       const keyArray = Array.isArray(keys) ? keys : [keys];
       return (
-        <span id="kbd-span" data-sonance-name="kbd" className="inline-flex items-center gap-1">
+        <span data-sonance-name="kbd" className="inline-flex items-center gap-1">
           {keyArray.map((key, index) => (
             <kbd
               key={index}
               ref={index === 0 ? ref : undefined}
-              className={cn(kbdVariants({ variant, size }), className)} data-sonance-name="kbd"
+              data-sonance-name="kbd"
+              className={cn(kbdVariants({ variant, size }), className)}
               {...props}
             >
               {formatKey(key)}
@@ -54,7 +70,8 @@ export const Kbd = forwardRef<HTMLElement, KbdProps>(
     return (
       <kbd
         ref={ref}
-        className={cn(kbdVariants({ variant, size }), className)} data-sonance-name="kbd"
+        data-sonance-name="kbd"
+        className={cn(kbdVariants({ variant, size }), className)}
         {...props}
       >
         {children}
@@ -103,8 +120,8 @@ interface KeyboardShortcutProps {
 
 export function KeyboardShortcut({ keys, label, className }: KeyboardShortcutProps) {
   return (
-    <span id="keyboard-shortcut-span" data-sonance-name="kbd" className={cn("inline-flex items-center gap-1.5 sm:gap-2 flex-wrap", className)}>
-      {label && <span id="keyboard-shortcut-span-label" className="text-xs sm:text-sm text-foreground-muted">{label}</span>}
+    <span data-sonance-name="kbd" className={cn("inline-flex items-center gap-1.5 sm:gap-2 flex-wrap", className)}>
+      {label && <span className="text-xs sm:text-sm text-foreground-muted">{label}</span>}
       <Kbd keys={keys} />
     </span>
   );
@@ -123,4 +140,3 @@ export const shortcuts = {
   newTab: ["cmd", "t"],
   closeTab: ["cmd", "w"],
 } as const;
-

package/dist/assets/components/listbox.tsx

@@ -11,9 +11,9 @@ const getItemStateStyles = (state?: ListboxItemState, isSelected?: boolean) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "bg-secondary-hover",
-    focus: "ring-2 ring-border-focus ring-inset",
-    selected: "bg-primary text-primary-foreground",
+    hover: "bg-white/50 dark:bg-white/5",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-inset",
+    selected: "bg-[color:var(--sonance-blue)] text-white",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -82,7 +82,7 @@ export function Listbox({
         <ul
           role="listbox"
           aria-multiselectable={multiple}
-          className="border border-border bg-card divide-y divide-border overflow-hidden"
+          className="bg-white/70 dark:bg-white/[0.03] backdrop-blur-sm border border-black/8 dark:border-white/8 divide-y divide-black/5 dark:divide-white/5 rounded-xl overflow-hidden"
         >
           {children}
         </ul>
@@ -137,10 +137,10 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
         onClick={() => !isDisabled && onChange(value)}
         className={cn(
           "flex items-center gap-3 px-4 py-3 cursor-pointer",
-          "transition-colors duration-150",
+          "transition-all duration-150",
           finalSelected
-            ? "bg-primary text-primary-foreground"
-            : "hover:bg-secondary-hover",
+            ? "bg-[color:var(--sonance-blue)] text-white"
+            : "hover:bg-white/50 dark:hover:bg-white/5",
           isDisabled && "cursor-not-allowed opacity-50",
           getItemStateStyles(state, finalSelected),
           className
@@ -186,7 +186,7 @@ export function ListboxSection({ title, children, className }: ListboxSectionPro
   return (
     <li data-sonance-name="listbox" className={className}>
       {title && (
-        <div className="px-4 py-2 text-xs font-medium uppercase tracking-widest text-foreground-muted bg-background-secondary">
+        <div className="px-4 py-2 text-xs font-medium uppercase tracking-widest text-foreground-muted bg-white/50 dark:bg-white/[0.02]">
           {title}
         </div>
       )}

package/dist/assets/components/menubar.tsx

@@ -17,8 +17,12 @@ const Menubar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Root
     ref={ref}
+    data-sonance-name="menubar"
     className={cn(
-      "flex h-10 items-center space-x-1 rounded-sm border border-border bg-background p-1",
+      "flex h-10 items-center space-x-1 rounded-xl p-1",
+      "bg-white/70 dark:bg-white/5 backdrop-blur-sm",
+      "border border-black/8 dark:border-white/8",
+      "shadow-sm",
       className
     )}
     {...props}
@@ -33,9 +37,10 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
-      "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
+      "flex cursor-default select-none items-center rounded-lg px-3 py-1.5 text-sm font-medium outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "data-[state=open]:bg-white/60 dark:data-[state=open]:bg-white/10 data-[state=open]:text-foreground",
       className
     )}
     {...props}
@@ -52,9 +57,10 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
-      "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
+      "flex cursor-default select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "data-[state=open]:bg-white/60 dark:data-[state=open]:bg-white/10 data-[state=open]:text-foreground",
       inset && "pl-8",
       className
     )}
@@ -73,7 +79,10 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl p-1 text-foreground",
+      "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+      "border border-black/10 dark:border-white/10",
+      "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -103,9 +112,14 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
-          "data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-[12rem] overflow-hidden rounded-xl p-1 text-foreground",
+          "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+          "border border-black/10 dark:border-white/10",
+          "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+          "data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
@@ -124,8 +138,10 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
+      "relative flex cursor-default select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "focus:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -142,15 +158,17 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
+      "relative flex cursor-default select-none items-center rounded-xl py-1.5 pl-8 pr-2 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "focus:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span id="menubar-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
@@ -167,14 +185,16 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
+      "relative flex cursor-default select-none items-center rounded-xl py-1.5 pl-8 pr-2 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "focus:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span id="menubar-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </MenubarPrimitive.ItemIndicator>
@@ -208,7 +228,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-black/8 dark:bg-white/8", className)}
     {...props}
   />
 ));
@@ -219,12 +239,20 @@ const MenubarShortcut = ({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span id="menubar-shortcut-span" data-sonance-name="menubar"
+    <span
+      data-sonance-name="menubar"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-foreground-muted",
+        "px-1.5 py-0.5 rounded-md",
+        "bg-white/40 dark:bg-white/5",
+        "border border-black/5 dark:border-white/10",
+        className
+      )}
       {...props}
     />
   );
 };
-MenubarShortcut.displayname = "MenubarShortcut";
+MenubarShortcut.displayName = "MenubarShortcut";
 
 export {
   Menubar,
@@ -244,4 +272,3 @@ export {
   MenubarSub,
   MenubarShortcut,
 };
-

package/dist/assets/components/navbar.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import Image from 'next/image';
 import {
   Navbar,
   NavbarContent,
@@ -9,6 +10,24 @@ import {
 } from './navbar';
 import { Button } from './button';
 
+// Logo paths for different contexts
+const LOGO_DARK = '/logos/sonance/Sonance_Logo_2C_Dark_RGB.png'; // Charcoal text - for light backgrounds
+const LOGO_LIGHT = '/logos/sonance/Sonance_Logo_2C_Light_RGB.png'; // White/light text - for dark backgrounds
+
+// Reusable logo component for stories
+function NavbarLogo({ variant = 'dark' }: { variant?: 'dark' | 'light' }) {
+  return (
+    <Image
+      src={variant === 'dark' ? LOGO_DARK : LOGO_LIGHT}
+      alt="Sonance"
+      width={120}
+      height={24}
+      className="h-5 w-auto object-contain"
+      priority
+    />
+  );
+}
+
 const meta: Meta<typeof Navbar> = {
   title: 'Components/Navigation/Navbar',
   component: Navbar,
@@ -39,7 +58,7 @@ export const Default: Story = {
     <Navbar>
       <NavbarContent>
         <NavbarBrand>
-          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+          <NavbarLogo variant="dark" />
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
@@ -58,14 +77,14 @@ export const Dark: Story = {
     <Navbar variant="dark">
       <NavbarContent>
         <NavbarBrand>
-          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+          <NavbarLogo variant="light" />
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
           <NavbarItem href="#">Products</NavbarItem>
           <NavbarItem href="#">About</NavbarItem>
         </NavbarItems>
-        <Button id="nav-button-inverted" size="sm" variant="inverted">Sign In</Button>
+        <Button id="nav-button-outline" size="sm" variant="outline" className="text-white border-white/30 hover:bg-white/10">Sign In</Button>
       </NavbarContent>
     </Navbar>
   ),
@@ -77,14 +96,14 @@ export const Transparent: Story = {
       <Navbar variant="transparent" className="text-white">
         <NavbarContent>
           <NavbarBrand>
-            <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+            <NavbarLogo variant="light" />
           </NavbarBrand>
           <NavbarItems>
             <NavbarItem href="#" active>Home</NavbarItem>
             <NavbarItem href="#">Products</NavbarItem>
             <NavbarItem href="#">About</NavbarItem>
           </NavbarItems>
-          <Button id="nav-button-inverted" size="sm" variant="inverted">Sign In</Button>
+          <Button id="nav-button-outline" size="sm" variant="outline" className="text-white border-white/30 hover:bg-white/10">Sign In</Button>
         </NavbarContent>
       </Navbar>
     </div>
@@ -97,7 +116,7 @@ export const Blur: Story = {
       <Navbar variant="blur">
         <NavbarContent>
           <NavbarBrand>
-            <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+            <NavbarLogo variant="dark" />
           </NavbarBrand>
           <NavbarItems>
             <NavbarItem href="#" active>Home</NavbarItem>
@@ -114,10 +133,56 @@ export const Blur: Story = {
   ),
 };
 
+export const Sticky: Story = {
+  render: () => (
+    <div className="h-[400px] overflow-auto bg-background-secondary">
+      <Navbar sticky>
+        <NavbarContent>
+          <NavbarBrand>
+            <NavbarLogo variant="dark" />
+          </NavbarBrand>
+          <NavbarItems>
+            <NavbarItem href="#" active>Home</NavbarItem>
+            <NavbarItem href="#">Products</NavbarItem>
+            <NavbarItem href="#">About</NavbarItem>
+          </NavbarItems>
+          <Button id="nav-button" size="sm">Sign In</Button>
+        </NavbarContent>
+      </Navbar>
+      <div className="p-8 space-y-4">
+        {Array.from({ length: 10 }).map((_, i) => (
+          <p key={i} className="text-foreground-secondary">
+            Scroll down to see the sticky navbar in action. Lorem ipsum dolor sit amet, 
+            consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
+          </p>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const NoBorder: Story = {
+  render: () => (
+    <Navbar bordered={false}>
+      <NavbarContent>
+        <NavbarBrand>
+          <NavbarLogo variant="dark" />
+        </NavbarBrand>
+        <NavbarItems>
+          <NavbarItem href="#" active>Home</NavbarItem>
+          <NavbarItem href="#">Products</NavbarItem>
+          <NavbarItem href="#">About</NavbarItem>
+        </NavbarItems>
+        <Button id="nav-button" size="sm">Sign In</Button>
+      </NavbarContent>
+    </Navbar>
+  ),
+};
+
 export const Responsive: Story = {
   render: () => (
     <ResponsiveNavbar
-      brand={<span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>}
+      brand={<NavbarLogo variant="dark" />}
       items={[
         { label: 'Home', href: '#', active: true },
         { label: 'Products', href: '#' },
@@ -129,13 +194,12 @@ export const Responsive: Story = {
   ),
 };
 
-export const WithLogo: Story = {
+export const WithActions: Story = {
   render: () => (
     <Navbar>
       <NavbarContent>
         <NavbarBrand>
-          <div className="w-8 h-8 bg-primary rounded" />
-          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+          <NavbarLogo variant="dark" />
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
@@ -160,7 +224,7 @@ export const ResponsiveMatrix: Story = {
         <h4 id="nav-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border overflow-hidden">
           <ResponsiveNavbar
-            brand={<span id="responsive-matrix-span-sonance" className="text-lg font-semibold">Sonance</span>}
+            brand={<NavbarLogo variant="dark" />}
             items={[
               { label: 'Home', href: '#', active: true },
               { label: 'Products', href: '#' },
@@ -177,7 +241,7 @@ export const ResponsiveMatrix: Story = {
           <Navbar>
             <NavbarContent>
               <NavbarBrand>
-                <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+                <NavbarLogo variant="dark" />
               </NavbarBrand>
               <NavbarItems>
                 <NavbarItem href="#" active>Home</NavbarItem>
@@ -196,7 +260,7 @@ export const ResponsiveMatrix: Story = {
           <Navbar>
             <NavbarContent>
               <NavbarBrand>
-                <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
+                <NavbarLogo variant="dark" />
               </NavbarBrand>
               <NavbarItems>
                 <NavbarItem href="#" active>Home</NavbarItem>
@@ -216,3 +280,66 @@ export const ResponsiveMatrix: Story = {
     </div>
   ),
 };
+
+// All Variants Side by Side
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Default</h4>
+        <Navbar>
+          <NavbarContent>
+            <NavbarBrand><NavbarLogo variant="dark" /></NavbarBrand>
+            <NavbarItems>
+              <NavbarItem href="#" active>Home</NavbarItem>
+              <NavbarItem href="#">Products</NavbarItem>
+            </NavbarItems>
+            <Button size="sm">Sign In</Button>
+          </NavbarContent>
+        </Navbar>
+      </div>
+      
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Dark</h4>
+        <Navbar variant="dark">
+          <NavbarContent>
+            <NavbarBrand><NavbarLogo variant="light" /></NavbarBrand>
+            <NavbarItems>
+              <NavbarItem href="#" active>Home</NavbarItem>
+              <NavbarItem href="#">Products</NavbarItem>
+            </NavbarItems>
+            <Button size="sm" variant="outline" className="text-white border-white/30 hover:bg-white/10">Sign In</Button>
+          </NavbarContent>
+        </Navbar>
+      </div>
+      
+      <div className="bg-gradient-to-r from-sonance-charcoal to-sonance-gray-700 p-0">
+        <h4 className="text-xs uppercase text-white/60 mb-2 px-4 pt-4">Transparent (on gradient)</h4>
+        <Navbar variant="transparent" className="text-white">
+          <NavbarContent>
+            <NavbarBrand><NavbarLogo variant="light" /></NavbarBrand>
+            <NavbarItems>
+              <NavbarItem href="#" active>Home</NavbarItem>
+              <NavbarItem href="#">Products</NavbarItem>
+            </NavbarItems>
+            <Button size="sm" variant="outline" className="text-white border-white/30 hover:bg-white/10">Sign In</Button>
+          </NavbarContent>
+        </Navbar>
+      </div>
+      
+      <div className="bg-gradient-to-r from-sonance-blue to-foundation-green p-0">
+        <h4 className="text-xs uppercase text-white/60 mb-2 px-4 pt-4">Blur (on gradient)</h4>
+        <Navbar variant="blur">
+          <NavbarContent>
+            <NavbarBrand><NavbarLogo variant="dark" /></NavbarBrand>
+            <NavbarItems>
+              <NavbarItem href="#" active>Home</NavbarItem>
+              <NavbarItem href="#">Products</NavbarItem>
+            </NavbarItems>
+            <Button size="sm">Sign In</Button>
+          </NavbarContent>
+        </Navbar>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/navbar.tsx

@@ -13,14 +13,30 @@ interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
 export const Navbar = forwardRef<HTMLElement, NavbarProps>(
   ({ className, variant = "default", sticky = false, bordered = true, children, ...props }, ref) => {
     const variantClasses = {
-      default: "bg-background",
+      default: "bg-white/70 dark:bg-white/[0.03] backdrop-blur-lg",
       dark: "bg-sonance-charcoal text-sonance-white",
       transparent: "bg-transparent",
-      blur: "bg-backdrop backdrop-blur-md",
+      blur: "bg-white/60 dark:bg-black/40 backdrop-blur-xl",
+    };
+
+    const borderClasses = {
+      default: "border-b border-black/8 dark:border-white/8",
+      dark: "border-b border-white/10",
+      transparent: "",
+      blur: "border-b border-black/8 dark:border-white/8",
     };
 
     return (
-      <nav data-sonance-name="navbar"
+      <nav
+        ref={ref}
+        data-sonance-name="navbar"
+        className={cn(
+          "w-full px-4 md:px-6 py-3",
+          variantClasses[variant],
+          bordered && borderClasses[variant],
+          sticky && "sticky top-0 z-50",
+          className
+        )}
         {...props}
       >
         {children}
@@ -133,7 +149,8 @@ export function NavbarMobileMenu({ isOpen, children, className }: NavbarMobileMe
     <div
       className={cn(
         "md:hidden absolute left-0 right-0 top-full",
-        "bg-background border-b border-border shadow-lg",
+        "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+        "border-b border-black/10 dark:border-white/10 shadow-xl",
         "animate-in slide-in-from-top-2 duration-200",
         className
       )}
@@ -198,7 +215,7 @@ export function ResponsiveNavbar({
             {item.label}
           </a>
         ))}
-        {actions && <div className="pt-4 border-t border-border">{actions}</div>}
+        {actions && <div className="pt-4 border-t border-black/8 dark:border-white/8">{actions}</div>}
       </NavbarMobileMenu>
     </Navbar>
   );

package/dist/assets/components/navigation-menu.tsx

@@ -12,6 +12,7 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
+    data-sonance-name="navigation-menu"
     className={cn(
       "relative z-10 flex max-w-max flex-1 items-center justify-center",
       className
@@ -42,7 +43,16 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-sm bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-secondary-hover hover:text-foreground focus:bg-secondary-hover focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary-hover/50 data-[state=open]:bg-secondary-hover/50"
+  cn(
+    "group inline-flex h-10 w-max items-center justify-center rounded-xl px-4 py-2 text-sm font-medium",
+    "transition-all duration-150",
+    "bg-transparent backdrop-blur-sm",
+    "hover:bg-white/60 dark:hover:bg-white/10 hover:text-foreground",
+    "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground focus:outline-none",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "data-[active]:bg-white/50 dark:data-[active]:bg-white/8",
+    "data-[state=open]:bg-white/60 dark:data-[state=open]:bg-white/10"
+  )
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -70,7 +80,12 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      "left-0 top-0 w-full",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+      "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+      "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+      "md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -84,10 +99,18 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div data-sonance-name="navigation-menu" className={cn("absolute left-0 top-full flex justify-center")}>
+  <div
+    data-sonance-name="navigation-menu"
+    className={cn("absolute left-0 top-full flex justify-center")}
+  >
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-sm border border-border bg-card text-foreground shadow-lg",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
+        "rounded-xl backdrop-blur-xl",
+        "bg-white/90 dark:bg-black/80",
+        "border border-black/10 dark:border-white/10",
+        "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+        "text-foreground",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
@@ -115,7 +138,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-white/80 dark:bg-white/10 shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =
@@ -132,4 +155,3 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
 };
-