nextworks 0.0.1 → 0.1.0-alpha.0

package/dist/kits/blocks/components/sections/Navbar.tsx

@@ -0,0 +1,353 @@
+// components/sections/Navbar.tsx
+
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  ThemeToggle,
+  type ThemeToggleProps,
+} from "@/components/ui/theme-toggle";
+import { cn } from "@/lib/utils";
+import { Menu, X } from "lucide-react";
+
+/**
+ * Props for the Navbar component.
+ *
+ * @remarks
+ * Slot-style className overrides are available for structural parts. The mobile
+ * menu locks body scroll when open and restores it on close/unmount.
+ *
+ * @public
+ */
+export interface NavbarProps {
+  /** Optional id to attach to the root nav element */
+  id?: string;
+
+  /** The height of the navbar as a Tailwind class. Example: "h-16" or "h-[13vh]" */
+  navHeight?: string;
+
+  /**
+   * The text displayed as the brand/logo.
+   * @defaultValue "Brand Name"
+   */
+  brand?: string;
+  /** Optional custom brand node (e.g., logo). Rendered left of brand text */
+  brandNode?: React.ReactNode;
+
+  /** Navigation links array. Each item has a label and href */
+  menuItems?: { label: string; href: string }[];
+
+  /**
+   * Call to action button config or null to hide it.
+   * Example: { label: "Get Started", href: "#contact" }
+   */
+  ctaButton?: { label: string; href: string } | null;
+
+  /**
+   * Whether to display the color mode toggle.
+   * @defaultValue true
+   */
+  showColorModeToggle?: boolean;
+
+  /**
+   * Whether navbar should stick to top when scrolling.
+   * @defaultValue true
+   */
+  sticky?: boolean;
+
+  /** Optional top-level class to override the nav root */
+  className?: string;
+
+  /** Styling configuration objects */
+  nav?: {
+    className?: string;
+  };
+
+  brandText?: {
+    className?: string;
+  };
+  links?: {
+    className?: string;
+  };
+  ctaButtonStyle?: {
+    unstyled?: boolean;
+    style?: React.CSSProperties;
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+  };
+  mobileMenu?: {
+    className?: string;
+  };
+
+  /* Additional style slots for targeted overrides */
+  container?: { className?: string };
+  brandWrapper?: { className?: string };
+  desktopMenu?: { className?: string };
+  toggleButton?: { className?: string };
+  colorModeWrapper?: { className?: string };
+  ctaButtonWrapper?: { className?: string };
+  mobileMenuInner?: { className?: string };
+  /** Additional class overrides for mobile menu link hover/background, etc. */
+  mobileLinks?: { className?: string };
+
+  /** Props forwarded to ThemeToggle so templates can fully style it */
+  themeToggle?: ThemeToggleProps;
+
+  /** ARIA label for the navbar. */
+  ariaLabel?: string;
+}
+
+const defaultMenuItems = [
+  { label: "Home", href: "#home" },
+  { label: "Features", href: "#features" },
+  { label: "Pricing", href: "#pricing" },
+  { label: "FAQ", href: "#faq" },
+  { label: "Contact", href: "#contact" },
+];
+
+/**
+ * Responsive navbar with brand, menu links, color mode toggle, and optional CTA.
+ *
+ * @remarks
+ * - Sticky behavior is enabled by default (sticky top-0 z-50).
+ * - Mobile menu toggles with a button and traps body scroll while open.
+ * - Accessibility: Focus rings are applied to interactive elements; aria
+ *   attributes are set on the toggle button for state.
+ *
+ * @example
+ * <Navbar brand="Acme" />
+ */
+export function Navbar({
+  id,
+  navHeight = "h-16",
+  brand = "Brand Name",
+  brandNode,
+  menuItems = defaultMenuItems,
+  ctaButton = { label: "Get Started", href: "#contact" },
+  showColorModeToggle = true,
+  sticky = true,
+  className,
+  nav = {
+    className: "bg-background text-foreground border-b border-border",
+  },
+  brandText = {
+    className: "text-2xl font-bold text-primary",
+  },
+  links = {
+    className:
+      "text-base font-normal text-foreground hover:text-gray-500 dark:hover-text-gray-400 transition-colors",
+  },
+  ctaButtonStyle = {
+    variant: "default",
+    size: "default",
+    className:
+      "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+  },
+  mobileMenu = {
+    className: "border-t border-border",
+  },
+
+  /* new slot defaults */
+  container = { className: "" },
+  brandWrapper = { className: "" },
+  desktopMenu = {
+    className: "hidden items-center space-x-1 lg:flex lg:space-x-6",
+  },
+  toggleButton = {
+    className:
+      "hover:bg-accent flex items-center justify-center rounded-md p-2 transition-colors",
+  },
+  colorModeWrapper = { className: "ml-2" },
+  ctaButtonWrapper = { className: "ml-2" },
+  mobileMenuInner = { className: "space-y-2 px-4 pt-2 pb-4" },
+  mobileLinks = { className: "hover:bg-accent" },
+
+  themeToggle = {},
+
+  ariaLabel = "Main navigation",
+}: NavbarProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const mobileMenuId = "navbar-mobile-menu";
+
+  // Measure header height for reliable max height on mobile menu
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const [headerHeightPx, setHeaderHeightPx] = useState(0);
+
+  useEffect(() => {
+    const update = () =>
+      setHeaderHeightPx(headerRef.current?.offsetHeight ?? 0);
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  // Lock body scroll when mobile menu is open
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = originalOverflow || "";
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow || "";
+    };
+  }, [isMobileMenuOpen]);
+
+  return (
+    <nav
+      id={id}
+      className={cn(
+        "w-full",
+        sticky && "sticky top-0 z-50",
+        nav.className,
+        className,
+      )}
+      aria-label={ariaLabel}
+    >
+      <div
+        ref={headerRef}
+        className={cn(
+          "flex items-center justify-between px-4 py-2",
+          navHeight,
+          container.className,
+        )}
+      >
+        <div
+          className={cn(
+            "mr-2 flex items-center gap-2 pl-2",
+            brandWrapper.className,
+          )}
+        >
+          {brandNode}
+          {brand && <h1 className={cn(brandText.className)}>{brand}</h1>}
+        </div>
+
+        <button
+          aria-label="Toggle mobile menu"
+          aria-expanded={isMobileMenuOpen}
+          aria-controls={mobileMenuId}
+          className={cn("lg:hidden", toggleButton.className)}
+          // className={cn("lg:hidden", toggleButton.className)}
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        >
+          {isMobileMenuOpen ? (
+            <X className="h-6 w-6" />
+          ) : (
+            <Menu className="h-6 w-6" />
+          )}
+        </button>
+
+        <div className={cn("hidden md:flex", desktopMenu.className)}>
+          {/* <div className={cn("hidden lg:flex", desktopMenu.className)}> */}
+          {menuItems.map((item) => (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={cn(
+                "rounded-md px-2 py-2 transition-colors duration-200 lg:px-4",
+                "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
+                "focus-visible:ring-[var(--navbar-ring)]",
+                links.className,
+              )}
+            >
+              {item.label}
+            </Link>
+          ))}
+
+          {showColorModeToggle && (
+            <div className={cn(colorModeWrapper.className)}>
+              <ThemeToggle {...themeToggle} />
+            </div>
+          )}
+
+          {ctaButton && (
+            <Button
+              asChild
+              unstyled={ctaButtonStyle.unstyled}
+              variant={ctaButtonStyle.variant}
+              size={ctaButtonStyle.size}
+              className={cn(
+                ctaButtonWrapper.className,
+                ctaButtonStyle.className,
+              )}
+              style={ctaButtonStyle.style}
+            >
+              <Link href={ctaButton.href} aria-label={ctaButton.label}>
+                {ctaButton.label}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {isMobileMenuOpen && (
+        <div
+          id={mobileMenuId}
+          className={cn(
+            "md:hidden",
+            // "lg:hidden",
+            "overflow-y-auto overscroll-y-contain",
+            nav.className,
+            mobileMenu.className,
+          )}
+          style={{
+            maxHeight: `calc(100dvh - ${headerHeightPx}px)`,
+            WebkitOverflowScrolling: "touch",
+          }}
+        >
+          <div className={cn(mobileMenuInner.className)}>
+            {menuItems.map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                className={cn(
+                  "block w-full rounded-md px-2 py-4 text-center transition-colors duration-200",
+                  mobileLinks.className,
+                  "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
+                  "focus-visible:ring-[var(--navbar-ring)]",
+                  links.className,
+                )}
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                {item.label}
+              </Link>
+            ))}
+
+            {showColorModeToggle && (
+              <div className="flex w-full justify-center pt-4">
+                <ThemeToggle {...themeToggle} />
+              </div>
+            )}
+
+            {ctaButton && (
+              <div className="flex w-full justify-center pt-6">
+                <Button
+                  asChild
+                  unstyled={ctaButtonStyle.unstyled}
+                  variant={ctaButtonStyle.variant}
+                  size={ctaButtonStyle.size}
+                  className={cn("w-full max-w-xs", ctaButtonStyle.className)}
+                  style={ctaButtonStyle.style}
+                >
+                  <Link href={ctaButton.href} aria-label={ctaButton.label}>
+                    {ctaButton.label}
+                  </Link>
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

package/dist/kits/blocks/components/sections/Newsletter.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Props for a compact newsletter/signup block.
+ *
+ * - Slot-style API (section, container, header, heading, subheading, form, formRow, input, button)
+ * - Merges consumer classes with sensible defaults via cn(...)
+ * - Uses CSS vars in defaults so token/theming overrides don't break
+ */
+export interface NewsletterProps {
+  id?: string;
+  className?: string;
+
+  headingText?: string;
+  subheadingText?: string;
+
+  /** Called after successful submit (form event will be passed) */
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>, email: string) => void;
+
+  /** Slot-style overrides */
+  section?: { className?: string };
+  container?: { className?: string };
+  header?: { className?: string };
+  heading?: { className?: string };
+  subheading?: { className?: string };
+  form?: { className?: string };
+  formRow?: { className?: string };
+  input?: { className?: string };
+  button?: {
+    className?: string;
+    variant?: any;
+    size?: any;
+    unstyled?: boolean;
+  };
+
+  enableMotion?: boolean;
+
+  ariaLabel?: string;
+}
+
+// Default classes used for slot merging. Consumers' slot.className will be merged after these.
+const DEFAULT_SECTION = "py-12 bg-[var(--card-bg)] text-[var(--card-fg)]";
+const DEFAULT_CONTAINER = "max-w-3xl mx-auto px-4";
+const DEFAULT_HEADER = "text-center mb-6";
+const DEFAULT_HEADING =
+  "text-2xl font-bold font-poppins text-foreground text-[var(--heading-fg)]";
+const DEFAULT_SUBHEADING =
+  "text-sm font-inter text-muted-foreground max-w-xl mx-auto leading-relaxed text-[var(--subheading-fg)]";
+const DEFAULT_FORM = "w-full";
+const DEFAULT_FORM_ROW =
+  "mt-6 flex flex-col sm:flex-row items-center gap-3 justify-center";
+const DEFAULT_INPUT =
+  "w-full sm:flex-1 p-3 rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)]";
+const DEFAULT_BUTTON =
+  "w-full sm:w-auto px-5 py-3 rounded-md bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary text-primary-foreground font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]";
+
+/**
+ * Compact newsletter/signup block.
+ *
+ * Usage:
+ * <Newsletter section={{ className: "bg-gradient-to-r ..." }} />
+ *
+ * Slots exposed: section, container, header, heading, subheading, form, formRow, input, button
+ */
+export function Newsletter({
+  id,
+  className,
+  headingText = "Stay in the loop",
+  subheadingText = "Subscribe for product news, tips, and updates.",
+  onSubmit,
+  section,
+  container,
+  header,
+  heading,
+  subheading,
+  form,
+  formRow,
+  input,
+  button,
+  enableMotion = true,
+  ariaLabel = "Newsletter signup section",
+}: NewsletterProps) {
+  const [email, setEmail] = React.useState("");
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit?.(e, email);
+    // Optimistic clear; consumer can override behavior via onSubmit
+    setEmail("");
+  };
+
+  return (
+    <section
+      id={id}
+      className={cn(DEFAULT_SECTION, section?.className, className)}
+      aria-label={ariaLabel}
+    >
+      <div className={cn(DEFAULT_CONTAINER, container?.className)}>
+        <div className={cn(DEFAULT_HEADER, header?.className)}>
+          <h2 className={cn(DEFAULT_HEADING, heading?.className)}>
+            {headingText}
+          </h2>
+          <p className={cn(DEFAULT_SUBHEADING, subheading?.className)}>
+            {subheadingText}
+          </p>
+        </div>
+
+        <form
+          className={cn(DEFAULT_FORM, form?.className)}
+          onSubmit={handleSubmit}
+          aria-label="Newsletter signup form"
+        >
+          <div className={cn(DEFAULT_FORM_ROW, formRow?.className)}>
+            <Input
+              id="newsletter-email"
+              name="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Your email address"
+              required
+              aria-label="Email address"
+              className={cn(DEFAULT_INPUT, input?.className)}
+            />
+
+            <Button
+              type="submit"
+              unstyled={button?.unstyled}
+              variant={button?.variant}
+              size={button?.size}
+              className={cn(
+                DEFAULT_BUTTON,
+                button?.className,
+                !enableMotion &&
+                  "transition-none hover:!translate-y-0 hover:shadow-none",
+              )}
+            >
+              Subscribe
+            </Button>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+}
+
+/*
+  Example component summary:
+  - Slots exposed: section, container, header, heading, subheading, form, formRow, input, button
+  - Accessibility: aria-label defaults; form has aria-label; input has aria-label; uses semantic <section>
+  - Motion: enableMotion prop implemented (removes hover/transition classes when false)
+*/