@opensite/ui 3.4.8 → 3.5.0

package/dist/hero-stats-social-proof.d.cts

@@ -53,7 +53,7 @@ interface HeroStatsSocialProofProps {
     statusCard?: {
         title?: React.ReactNode;
         subtitle?: React.ReactNode;
-        icon?: React.ReactNode;
+        icon?: React.ReactNode | string;
     };
     /**
      * Custom slot for status card (overrides statusCard)

package/dist/hero-stats-social-proof.d.ts

@@ -53,7 +53,7 @@ interface HeroStatsSocialProofProps {
     statusCard?: {
         title?: React.ReactNode;
         subtitle?: React.ReactNode;
-        icon?: React.ReactNode;
+        icon?: React.ReactNode | string;
     };
     /**
      * Custom slot for status card (overrides statusCard)

package/dist/hero-stats-social-proof.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo } from 'react';
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -7,6 +8,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Pressable, buttonVariants } from '@page-speed/pressable';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { Icon } from '@page-speed/icon';
 
 // components/blocks/hero/hero-stats-social-proof.tsx
 function cn(...inputs) {
@@ -21,7 +23,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React.forwardRef(
+var Container = React__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -327,7 +329,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React.forwardRef(
+var Section = React__default.forwardRef(
   ({
     id,
     title,
@@ -420,6 +422,19 @@ function Badge({
     }
   );
 }
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+var DynamicIcon = React.memo(function DynamicIcon2({
+  apiKey,
+  name,
+  ...props
+}) {
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+});
+DynamicIcon.displayName = "DynamicIcon";
 var MOBILE_CLASSES = {
   "fit-left": "items-start md:items-center",
   "fit-center": "items-center",
@@ -547,7 +562,7 @@ function HeroStatsSocialProof({
           "pr-4 md:pr-6 shadow-2xl bg-card text-card-foreground"
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          statusCard.icon && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
+          statusCard.icon ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: statusCard.icon }) }) : null,
           /* @__PURE__ */ jsxs("div", { className: "text-balance", children: [
             statusCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
             statusCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })

package/dist/index.cjs

@@ -4495,6 +4495,7 @@ function FooterLinksGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-links-grid",
       background,
       spacing,
       pattern,
@@ -4613,6 +4614,7 @@ function FooterSocialNewsletter({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-social-newsletter",
       background,
       spacing,
       pattern,
@@ -4770,6 +4772,7 @@ function FooterSocialApps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-social-apps",
       background,
       spacing,
       pattern,
@@ -4885,7 +4888,7 @@ function FooterSimpleCentered({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-simple-centered",
       background,
       spacing,
       pattern,
@@ -5015,6 +5018,7 @@ function FooterBrandDescription({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-brand-description",
       background,
       spacing,
       pattern,
@@ -5226,6 +5230,7 @@ function FooterNewsletterGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-newsletter-grid",
       background,
       spacing,
       pattern,
@@ -5342,7 +5347,7 @@ function FooterCtaBanner({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-banner",
       background,
       spacing,
       pattern,
@@ -5563,7 +5568,7 @@ function FooterContactCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-contact-card",
       background,
       spacing,
       pattern,
@@ -5748,7 +5753,7 @@ function FooterBackgroundCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-background-card",
       background,
       spacing,
       pattern,
@@ -6048,7 +6053,7 @@ function FooterAnimatedSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-animated-social",
       background,
       spacing,
       pattern,
@@ -6316,7 +6321,7 @@ function FooterNewsletterMinimal({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-newsletter-minimal",
       background,
       spacing,
       pattern,
@@ -6533,7 +6538,7 @@ function FooterCtaSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-social",
       background,
       spacing,
       pattern,
@@ -6668,6 +6673,7 @@ function FooterNavSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-nav-social",
       background,
       spacing,
       pattern,

package/dist/index.js

@@ -4473,6 +4473,7 @@ function FooterLinksGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-links-grid",
       background,
       spacing,
       pattern,
@@ -4591,6 +4592,7 @@ function FooterSocialNewsletter({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-social-newsletter",
       background,
       spacing,
       pattern,
@@ -4748,6 +4750,7 @@ function FooterSocialApps({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-social-apps",
       background,
       spacing,
       pattern,
@@ -4863,7 +4866,7 @@ function FooterSimpleCentered({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-simple-centered",
       background,
       spacing,
       pattern,
@@ -4993,6 +4996,7 @@ function FooterBrandDescription({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-brand-description",
       background,
       spacing,
       pattern,
@@ -5204,6 +5208,7 @@ function FooterNewsletterGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-newsletter-grid",
       background,
       spacing,
       pattern,
@@ -5320,7 +5325,7 @@ function FooterCtaBanner({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-banner",
       background,
       spacing,
       pattern,
@@ -5541,7 +5546,7 @@ function FooterContactCard({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-contact-card",
       background,
       spacing,
       pattern,
@@ -5726,7 +5731,7 @@ function FooterBackgroundCard({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-background-card",
       background,
       spacing,
       pattern,
@@ -6026,7 +6031,7 @@ function FooterAnimatedSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-animated-social",
       background,
       spacing,
       pattern,
@@ -6294,7 +6299,7 @@ function FooterNewsletterMinimal({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-newsletter-minimal",
       background,
       spacing,
       pattern,
@@ -6511,7 +6516,7 @@ function FooterCtaSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-social",
       background,
       spacing,
       pattern,
@@ -6646,6 +6651,7 @@ function FooterNavSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-nav-social",
       background,
       spacing,
       pattern,

package/dist/navbar-animated-preview.cjs

@@ -938,6 +938,7 @@ var NavbarAnimatedPreview = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-animated-preview",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(

package/dist/navbar-animated-preview.d.cts

@@ -38,6 +38,20 @@ interface IMenuLink {
  * Props for the NavbarAnimatedPreview component
  */
 interface NavbarAnimatedPreviewProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu links with optional dropdown groups
+       */
+    menuLinks?: IMenuLink[];
+    /**
+       * Action configurations (e.g., Sign In, Get Started buttons)
+       */
+    actions?: ActionConfig[];
+}
+interface NavbarAnimatedPreviewRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -120,6 +134,6 @@ interface NavbarAnimatedPreviewProps {
  * menu spans full width with smooth fade-in animations. Mobile view uses a full-screen sheet with
  * accordion navigation. Ideal for complex SaaS products and developer platforms.
  */
-declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { type AnimatedPreviewLayout, type IFeaturedImageLink, ILinkItem, type IMenuLink, IMenuLinkGroup, LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.d.ts

@@ -38,6 +38,20 @@ interface IMenuLink {
  * Props for the NavbarAnimatedPreview component
  */
 interface NavbarAnimatedPreviewProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu links with optional dropdown groups
+       */
+    menuLinks?: IMenuLink[];
+    /**
+       * Action configurations (e.g., Sign In, Get Started buttons)
+       */
+    actions?: ActionConfig[];
+}
+interface NavbarAnimatedPreviewRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -120,6 +134,6 @@ interface NavbarAnimatedPreviewProps {
  * menu spans full width with smooth fade-in animations. Mobile view uses a full-screen sheet with
  * accordion navigation. Ideal for complex SaaS products and developer platforms.
  */
-declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { type AnimatedPreviewLayout, type IFeaturedImageLink, ILinkItem, type IMenuLink, IMenuLinkGroup, LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.js

@@ -913,6 +913,7 @@ var NavbarAnimatedPreview = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-animated-preview",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(

package/dist/navbar-centered-menu.cjs

@@ -738,10 +738,10 @@ var SubMenuLink = ({ item }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     pressable.Pressable,
     {
-      className: "flex flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-foreground",
+      className: "flex flex-row items-center gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-foreground",
       href: item.url,
       children: [
-        item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
+        item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: item.title }),
           item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-snug text-muted-foreground", children: item.description })
@@ -860,7 +860,7 @@ var NavbarCenteredMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-centered-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-centered-menu.d.cts

@@ -24,6 +24,20 @@ interface MenuItem {
  * Props for the NavbarCenteredMenu component
  */
 interface NavbarCenteredMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarCenteredMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -111,6 +125,6 @@ interface NavbarCenteredMenuProps {
  * slide-out sheet with accordion navigation. The dropdowns are centered under their
  * trigger elements for a balanced visual appearance.
  */
-declare const NavbarCenteredMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarCenteredMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarCenteredMenu, type NavbarCenteredMenuProps };

package/dist/navbar-centered-menu.d.ts

@@ -24,6 +24,20 @@ interface MenuItem {
  * Props for the NavbarCenteredMenu component
  */
 interface NavbarCenteredMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarCenteredMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -111,6 +125,6 @@ interface NavbarCenteredMenuProps {
  * slide-out sheet with accordion navigation. The dropdowns are centered under their
  * trigger elements for a balanced visual appearance.
  */
-declare const NavbarCenteredMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarCenteredMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarCenteredMenu, type NavbarCenteredMenuProps };

package/dist/navbar-centered-menu.js

@@ -715,10 +715,10 @@ var SubMenuLink = ({ item }) => {
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
-      className: "flex flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-foreground",
+      className: "flex flex-row items-center gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-foreground",
       href: item.url,
       children: [
-        item.icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
+        item.icon && /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: item.title }),
           item.description && /* @__PURE__ */ jsx("p", { className: "text-sm leading-snug text-muted-foreground", children: item.description })
@@ -837,7 +837,7 @@ var NavbarCenteredMenu = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-centered-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-dark-icons.cjs

@@ -866,7 +866,7 @@ var NavbarDarkIcons = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dark-icons",
       background,
       spacing: spacingOverride ?? spacing,
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
@@ -968,13 +968,14 @@ var MenuSubLink = ({ link }) => {
       href: link.url,
       className: "flex items-center gap-4 rounded-lg p-2 hover:bg-muted",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
               name: link.icon || link.iconName,
               size: 20,
-              color: link.iconColor
+              color: link.iconColor,
+              className: "shrink-0"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [

package/dist/navbar-dark-icons.d.cts

@@ -26,6 +26,20 @@ interface MenuItem {
  * Props for the NavbarDarkIcons component
  */
 interface NavbarDarkIconsProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    navigation?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarDarkIconsRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -117,6 +131,6 @@ interface NavbarDarkIconsProps {
  * view uses a full-screen dark sheet with accordion navigation. Ideal for developer
  * tools, open-source projects, and tech-focused applications.
  */
-declare const NavbarDarkIcons: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarDarkIcons: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarDarkIcons, type NavbarDarkIconsProps };

package/dist/navbar-dark-icons.d.ts

@@ -26,6 +26,20 @@ interface MenuItem {
  * Props for the NavbarDarkIcons component
  */
 interface NavbarDarkIconsProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    navigation?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarDarkIconsRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -117,6 +131,6 @@ interface NavbarDarkIconsProps {
  * view uses a full-screen dark sheet with accordion navigation. Ideal for developer
  * tools, open-source projects, and tech-focused applications.
  */
-declare const NavbarDarkIcons: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarDarkIcons: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarDarkIcons, type NavbarDarkIconsProps };

package/dist/navbar-dark-icons.js

@@ -843,7 +843,7 @@ var NavbarDarkIcons = ({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dark-icons",
       background,
       spacing: spacingOverride ?? spacing,
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
@@ -945,13 +945,14 @@ var MenuSubLink = ({ link }) => {
       href: link.url,
       className: "flex items-center gap-4 rounded-lg p-2 hover:bg-muted",
       children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsx(
             DynamicIcon,
             {
               name: link.icon || link.iconName,
               size: 20,
-              color: link.iconColor
+              color: link.iconColor,
+              className: "shrink-0"
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [

package/dist/navbar-dropdown-menu.cjs

@@ -770,10 +770,10 @@ var SubMenuLink = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     pressable.Pressable,
     {
-      className: "flex min-w-80 flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted",
+      className: "flex min-w-80 flex-row items-center gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted",
       href: item.url,
       children: [
-        item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
+        item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: item.title }),
           item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-snug text-muted-foreground", children: item.description })
@@ -888,7 +888,7 @@ var NavbarDropdownMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dropdown-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-dropdown-menu.d.cts

@@ -24,6 +24,20 @@ interface MenuItem {
  * Props for the NavbarDropdownMenu component
  */
 interface NavbarDropdownMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarDropdownMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -110,6 +124,6 @@ interface NavbarDropdownMenuProps {
  * menu with accordion navigation on mobile. Includes login and signup call-to-action buttons.
  * The dropdown menus display icons and descriptions for each submenu item.
  */
-declare const NavbarDropdownMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarDropdownMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDropdownMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarDropdownMenu, type NavbarDropdownMenuProps };