Enhance Layout and GuidelinesPage components with improved navbar variant handling and updated design guidelines. Refactor HomePage to include a login card with form fields, and update PatternsPage and DialogPage with consistent default values. Add new navbar variant prop for better customization.

Author: PanJ

.changeset/hip-clowns-eat.md

@@ -0,0 +1,5 @@
+---
+"@pplethai/components": patch
+---
+
+fix badge border

.changeset/odd-pans-act.md

@@ -0,0 +1,5 @@
+---
+"@pplethai/components": patch
+---
+
+fix navbar in mini-app

.changeset/wide-maps-juggle.md

@@ -0,0 +1,5 @@
+---
+"@pplethai/components": patch
+---
+
+fix checkbox animation

apps/docs/src/components/Layout.tsx

@@ -1,4 +1,13 @@
-import { Container, Inline, Navbar, Separator, Stack, type NavbarItem } from "@pplethai/components";
+import {
+  Container,
+  getNavbarVariant,
+  Inline,
+  Navbar,
+  Separator,
+  Stack,
+  type NavbarItem,
+} from "@pplethai/components";
+import * as React from "react";
 
 const footerLinkClass = "text-primary hover:underline";
 import { NavLink, Outlet, useLocation } from "react-router-dom";
@@ -16,6 +25,7 @@ const navItems: NavbarItem[] = [
 
 export function Layout() {
   const { pathname } = useLocation();
+  const [navbarVariant] = React.useState(() => getNavbarVariant());
 
   return (
     <Stack gap="none" className="min-h-screen bg-background text-foreground">
@@ -34,7 +44,13 @@ export function Layout() {
           </NavLink>
         )}
       />
-      <Stack as="main" gap="none" className="flex-1 max-md:pt-12 md:pt-0">
+      <Stack
+        as="main"
+        gap="none"
+        className={
+          navbarVariant === "light" ? "flex-1 max-md:pt-12 md:pt-0" : "flex-1 max-md:pt-16 md:pt-0"
+        }
+      >
         <Container className="py-10">
           <Outlet />
         </Container>
@@ -43,36 +59,40 @@ export function Layout() {
         <Container className="py-6">
           <Stack gap="md">
             <Separator />
-            <p>@pplethai/components — เอกสารระบบดีไซน์พรรคประชาชน</p>
-            <Inline gap="sm" className="flex-wrap">
-              <a
-                href="https://github.com/PPLEThai/pple-design-system"
-                target="_blank"
-                rel="noreferrer"
-                className={footerLinkClass}
-              >
-                GitHub
-              </a>
-              <span aria-hidden="true">·</span>
-              <a
-                href="https://www.npmjs.com/package/@pplethai/components"
-                target="_blank"
-                rel="noreferrer"
-                className={footerLinkClass}
-              >
-                npm
-              </a>
+            <Inline justify="between" align="start" gap="md" className="flex-wrap">
+              <p>@pplethai/components — เอกสารระบบดีไซน์พรรคประชาชน</p>
+              <Stack gap="sm" className="items-end text-right">
+                <Inline gap="sm" className="flex-wrap justify-end">
+                  <a
+                    href="https://github.com/PPLEThai/pple-design-system"
+                    target="_blank"
+                    rel="noreferrer"
+                    className={footerLinkClass}
+                  >
+                    GitHub
+                  </a>
+                  <span aria-hidden="true">·</span>
+                  <a
+                    href="https://www.npmjs.com/package/@pplethai/components"
+                    target="_blank"
+                    rel="noreferrer"
+                    className={footerLinkClass}
+                  >
+                    npm
+                  </a>
+                </Inline>
+                <p>
+                  <a
+                    href="https://github.com/PPLEThai/pple-design-system/blob/main/AGENTS.md"
+                    target="_blank"
+                    rel="noreferrer"
+                    className={footerLinkClass}
+                  >
+                    AGENTS.md สำหรับ Coding Agents ในการใช้งานระบบดีไซน์นี้
+                  </a>
+                </p>
+              </Stack>
             </Inline>
-            <p>
-              <a
-                href="https://github.com/PPLEThai/pple-design-system/blob/main/AGENTS.md"
-                target="_blank"
-                rel="noreferrer"
-                className={footerLinkClass}
-              >
-                AGENTS.md สำหรับ Coding Agents ในการใช้งานระบบดีไซน์นี้
-              </a>
-            </p>
           </Stack>
         </Container>
       </Stack>