@capy-vn/ui 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -3033,16 +3033,16 @@ function NavDesktopLink({ link }) {
           variant: "ghost",
           size: "sm",
           className: cn(
-            "gap-1",
-            link.active && "text-foreground"
+            "gap-1.5 text-muted-foreground hover:bg-transparent hover:text-foreground",
+            link.active && "text-foreground font-medium"
           ),
           children: [
             link.label,
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60", "aria-hidden": "true" })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-50", "aria-hidden": "true" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: link.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: !!child.href, children: child.href ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "center", children: link.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: !!child.href, children: child.href ? /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
           href: child.href,
@@ -3061,7 +3061,10 @@ function NavDesktopLink({ link }) {
       variant: "ghost",
       size: "sm",
       asChild: !!link.href,
-      className: cn(link.active && "text-foreground"),
+      className: cn(
+        "text-muted-foreground hover:bg-transparent hover:text-foreground",
+        link.active && "text-foreground font-medium"
+      ),
       onClick: !link.href ? link.onClick : void 0,
       children: link.href ? /* @__PURE__ */ jsxRuntime.jsx(
         "a",
@@ -3093,9 +3096,9 @@ function NavMobileLink({
     onClose();
   };
   const baseClass = cn(
-    "flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors",
+    "flex w-full items-center justify-between rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
     "hover:bg-accent hover:text-accent-foreground",
-    link.active && "bg-accent text-accent-foreground",
+    link.active ? "text-foreground bg-accent/60" : "text-muted-foreground",
     depth > 0 && "pl-6 font-normal"
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
@@ -3119,7 +3122,7 @@ function NavMobileLink({
         lucideReact.ChevronDown,
         {
           className: cn(
-            "h-4 w-4 opacity-60 transition-transform",
+            "h-4 w-4 opacity-50 transition-transform",
             open && "rotate-180"
           ),
           "aria-hidden": "true"
@@ -3146,8 +3149,7 @@ var PublicNavbar = React50__namespace.forwardRef(
     const [scrolled, setScrolled] = React50__namespace.useState(false);
     const [sheetOpen, setSheetOpen] = React50__namespace.useState(false);
     React50__namespace.useEffect(() => {
-      if (!transparent) return;
-      const handler = () => setScrolled(window.scrollY > transparentThreshold);
+      const handler = () => setScrolled(window.scrollY > (transparent ? transparentThreshold : 10));
       window.addEventListener("scroll", handler, { passive: true });
       handler();
       return () => window.removeEventListener("scroll", handler);
@@ -3162,41 +3164,52 @@ var PublicNavbar = React50__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "z-50 w-full transition-all duration-200",
+          "z-50 w-full transition-all duration-300",
           sticky && "sticky top-0",
-          isTransparent ? "bg-transparent" : "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+          isTransparent ? "bg-transparent" : cn(
+            "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+            scrolled && "shadow-sm"
+          ),
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Container, { size: containerSize, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center gap-6", children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: logo }),
-          links && links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden md:flex items-center gap-1", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavDesktopLink, { link }, link.label)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-          cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center gap-3", children: cta }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: sheetOpen, onOpenChange: handleSheetOpen, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                "aria-label": "M\u1EDF menu",
-                className: "h-9 w-9",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5", "aria-hidden": "true" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: mobileMenuTitle }) }),
-              links && links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-4 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
-                NavMobileLink,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Container, { size: containerSize, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-16 grid-cols-[auto_1fr_auto] items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: logo }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "nav",
+            {
+              className: "hidden items-center justify-center gap-0.5 md:flex",
+              "aria-label": "Main navigation",
+              children: (links ?? []).map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavDesktopLink, { link }, link.label))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden items-center gap-3 md:flex", children: cta }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: sheetOpen, onOpenChange: handleSheetOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
                 {
-                  link,
-                  onClose: () => handleSheetOpen(false)
-                },
-                link.label
-              )) }) }),
-              cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto border-t pt-4", children: cta })
-            ] })
-          ] }) })
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": "M\u1EDF menu",
+                  className: "h-9 w-9",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5", "aria-hidden": "true" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "flex flex-col w-72", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: mobileMenuTitle }) }),
+                links && links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-4 flex-1", "aria-label": "Mobile navigation", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-0.5", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+                  NavMobileLink,
+                  {
+                    link,
+                    onClose: () => handleSheetOpen(false)
+                  },
+                  link.label
+                )) }) }),
+                cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto border-t pt-4", children: cta })
+              ] })
+            ] }) })
+          ] })
         ] }) })
       }
     );
@@ -3230,31 +3243,40 @@ var PublicFooter = React50__namespace.forwardRef(
       ref,
       className: cn("border-t bg-background", className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { size: containerSize, className: "py-12", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-10", children: [
-          (logo || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-3", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { size: containerSize, className: "py-14", children: [
+        (logo || tagline || linkGroups && linkGroups.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-10 md:grid-cols-[2fr_3fr] md:gap-16", children: [
+          (logo || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
             logo,
-            tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: tagline })
+            tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-sm leading-relaxed text-muted-foreground", children: tagline })
           ] }),
-          linkGroups && linkGroups.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-10", children: linkGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: group.heading }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: link.href,
-                target: link.external ? "_blank" : void 0,
-                rel: link.external ? "noopener noreferrer" : void 0,
-                className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
-                children: link.label
-              }
-            ) }, link.href)) })
-          ] }, group.heading)) })
+          linkGroups && linkGroups.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "grid gap-8",
+                linkGroups.length === 1 ? "grid-cols-1" : linkGroups.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3"
+              ),
+              children: linkGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-wide", children: group.heading }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: link.href,
+                    target: link.external ? "_blank" : void 0,
+                    rel: link.external ? "noopener noreferrer" : void 0,
+                    className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+                    children: link.label
+                  }
+                ) }, link.href)) })
+              ] }, group.heading))
+            }
+          )
         ] }),
-        newsletter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10", children: newsletter }),
+        newsletter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn((logo || tagline || linkGroups?.length) && "mt-10"), children: newsletter }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col-reverse gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
           copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: copyright }),
-          socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: socialLinks.map((social) => {
+          socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: socialLinks.map((social) => {
             const Icon2 = socialIconMap[social.platform];
             return /* @__PURE__ */ jsxRuntime.jsx(
               "a",
@@ -3263,7 +3285,7 @@ var PublicFooter = React50__namespace.forwardRef(
                 target: "_blank",
                 rel: "noopener noreferrer",
                 "aria-label": social.label ?? social.platform,
-                className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
+                className: "flex h-9 w-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4", "aria-hidden": "true" })
               },
               social.platform