@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/Navbar.d.ts

@@ -0,0 +1,112 @@
+import React from "react";
+import { type ThemeToggleProps } from "@nextworks/blocks-core";
+/**
+ * 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;
+    };
+    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;
+}
+/**
+ * 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 declare function Navbar({ id, navHeight, brand, brandNode, menuItems, ctaButton, showColorModeToggle, sticky, className, nav, brandText, links, ctaButtonStyle, mobileMenu, container, brandWrapper, desktopMenu, toggleButton, colorModeWrapper, ctaButtonWrapper, mobileMenuInner, mobileLinks, themeToggle, ariaLabel, }: NavbarProps): React.JSX.Element;
+//# sourceMappingURL=Navbar.d.ts.map

package/dist/components/Navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../src/components/Navbar.tsx"],"names":[],"mappings":"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"}

package/dist/components/Navbar.js

@@ -0,0 +1,80 @@
+// components/sections/Navbar.tsx
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { ThemeToggle } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+import { Menu, X } from "lucide-react";
+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", }) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const mobileMenuId = "navbar-mobile-menu";
+    // Measure header height for reliable max height on mobile menu
+    const headerRef = useRef(null);
+    const [headerHeightPx, setHeaderHeightPx] = useState(0);
+    useEffect(() => {
+        const update = () => { var _a, _b; return setHeaderHeightPx((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 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 (_jsxs("nav", { id: id, className: cn("w-full", sticky && "sticky top-0 z-50", nav.className, className), "aria-label": ariaLabel, children: [_jsxs("div", { ref: headerRef, className: cn("flex items-center justify-between px-4 py-2", navHeight, container.className), children: [_jsxs("div", { className: cn("mr-2 flex items-center gap-2 pl-2", brandWrapper.className), children: [brandNode, brand && _jsx("h1", { className: cn(brandText.className), children: brand })] }), _jsx("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), children: isMobileMenuOpen ? (_jsx(X, { className: "h-6 w-6" })) : (_jsx(Menu, { className: "h-6 w-6" })) }), _jsxs("div", { className: cn("hidden md:flex", desktopMenu.className), children: [menuItems.map((item) => (_jsx(Link, { 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), children: item.label }, item.label))), showColorModeToggle && (_jsx("div", { className: cn(colorModeWrapper.className), children: _jsx(ThemeToggle, Object.assign({}, themeToggle)) })), ctaButton && (_jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn(ctaButtonWrapper.className, ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) }))] })] }), isMobileMenuOpen && (_jsx("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",
+                }, children: _jsxs("div", { className: cn(mobileMenuInner.className), children: [menuItems.map((item) => (_jsx(Link, { 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), children: item.label }, item.label))), showColorModeToggle && (_jsx("div", { className: "flex w-full justify-center pt-4", children: _jsx(ThemeToggle, Object.assign({}, themeToggle)) })), ctaButton && (_jsx("div", { className: "flex w-full justify-center pt-6", children: _jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn("w-full max-w-xs", ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) }) }))] }) }))] }));
+}

package/dist/components/Navbar.jsx

@@ -0,0 +1,127 @@
+// components/sections/Navbar.tsx
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { ThemeToggle } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+import { Menu, X } from "lucide-react";
+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", }) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const mobileMenuId = "navbar-mobile-menu";
+    // Measure header height for reliable max height on mobile menu
+    const headerRef = useRef(null);
+    const [headerHeightPx, setHeaderHeightPx] = useState(0);
+    useEffect(() => {
+        const update = () => { var _a, _b; return setHeaderHeightPx((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 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/components/Newsletter.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+/**
+ * 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;
+}
+/**
+ * Compact newsletter/signup block.
+ *
+ * Usage:
+ * <Newsletter section={{ className: "bg-gradient-to-r ..." }} />
+ *
+ * Slots exposed: section, container, header, heading, subheading, form, formRow, input, button
+ */
+export declare function Newsletter({ id, className, headingText, subheadingText, onSubmit, section, container, header, heading, subheading, form, formRow, input, button, enableMotion, ariaLabel, }: NewsletterProps): React.JSX.Element;
+//# sourceMappingURL=Newsletter.d.ts.map

package/dist/components/Newsletter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Newsletter.d.ts","sourceRoot":"","sources":["../../src/components/Newsletter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExE,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,GAAG,CAAC;QACd,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,SAAS,EACT,WAAgC,EAChC,cAAiE,EACjE,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAmB,EACnB,SAAuC,GACxC,EAAE,eAAe,qBAgEjB"}

package/dist/components/Newsletter.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+import { Input, Button } from "@nextworks/blocks-core";
+// 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", }) {
+    const [email, setEmail] = React.useState("");
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e, email);
+        // Optimistic clear; consumer can override behavior via onSubmit
+        setEmail("");
+    };
+    return (_jsx("section", { id: id, className: cn(DEFAULT_SECTION, section === null || section === void 0 ? void 0 : section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(DEFAULT_CONTAINER, container === null || container === void 0 ? void 0 : container.className), children: [_jsxs("div", { className: cn(DEFAULT_HEADER, header === null || header === void 0 ? void 0 : header.className), children: [_jsx("h2", { className: cn(DEFAULT_HEADING, heading === null || heading === void 0 ? void 0 : heading.className), children: headingText }), _jsx("p", { className: cn(DEFAULT_SUBHEADING, subheading === null || subheading === void 0 ? void 0 : subheading.className), children: subheadingText })] }), _jsx("form", { className: cn(DEFAULT_FORM, form === null || form === void 0 ? void 0 : form.className), onSubmit: handleSubmit, "aria-label": "Newsletter signup form", children: _jsxs("div", { className: cn(DEFAULT_FORM_ROW, formRow === null || formRow === void 0 ? void 0 : formRow.className), children: [_jsx(Input, { id: "newsletter-email", name: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Your email address", required: true, "aria-label": "Email address", className: cn(DEFAULT_INPUT, input === null || input === void 0 ? void 0 : input.className) }), _jsx(Button, { type: "submit", unstyled: button === null || button === void 0 ? void 0 : button.unstyled, variant: button === null || button === void 0 ? void 0 : button.variant, size: button === null || button === void 0 ? void 0 : button.size, className: cn(DEFAULT_BUTTON, button === null || button === void 0 ? void 0 : button.className, !enableMotion &&
+                                    "transition-none hover:!translate-y-0 hover:shadow-none"), children: "Subscribe" })] }) })] }) }));
+}

package/dist/components/Newsletter.jsx

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+import { Input, Button } from "@nextworks/blocks-core";
+// 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", }) {
+    const [email, setEmail] = React.useState("");
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e, email);
+        // Optimistic clear; consumer can override behavior via onSubmit
+        setEmail("");
+    };
+    return (<section id={id} className={cn(DEFAULT_SECTION, section === null || section === void 0 ? void 0 : section.className, className)} aria-label={ariaLabel}>
+      <div className={cn(DEFAULT_CONTAINER, container === null || container === void 0 ? void 0 : container.className)}>
+        <div className={cn(DEFAULT_HEADER, header === null || header === void 0 ? void 0 : header.className)}>
+          <h2 className={cn(DEFAULT_HEADING, heading === null || heading === void 0 ? void 0 : heading.className)}>
+            {headingText}
+          </h2>
+          <p className={cn(DEFAULT_SUBHEADING, subheading === null || subheading === void 0 ? void 0 : subheading.className)}>
+            {subheadingText}
+          </p>
+        </div>
+
+        <form className={cn(DEFAULT_FORM, form === null || form === void 0 ? void 0 : form.className)} onSubmit={handleSubmit} aria-label="Newsletter signup form">
+          <div className={cn(DEFAULT_FORM_ROW, formRow === null || formRow === void 0 ? void 0 : 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 === null || input === void 0 ? void 0 : input.className)}/>
+
+            <Button type="submit" unstyled={button === null || button === void 0 ? void 0 : button.unstyled} variant={button === null || button === void 0 ? void 0 : button.variant} size={button === null || button === void 0 ? void 0 : button.size} className={cn(DEFAULT_BUTTON, button === null || button === void 0 ? void 0 : button.className, !enableMotion &&
+            "transition-none hover:!translate-y-0 hover:shadow-none")}>
+              Subscribe
+            </Button>
+          </div>
+        </form>
+      </div>
+    </section>);
+}

package/dist/components/PortfolioSimple.d.ts

@@ -0,0 +1,137 @@
+import React from "react";
+export interface PortfolioProject {
+    id: number;
+    title: string;
+    category: string;
+    industry: string;
+    result: string;
+    description: string;
+    image?: string;
+    tags: string[];
+    color: string;
+    url?: string;
+}
+/**
+ * Props for the PortfolioSimple section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: entrance animations respect enableMotion; prefers-reduced-motion is supported.
+ *
+ * @public
+ */
+interface PortfolioSimpleProps {
+    /** Optional id on root section */
+    id?: string;
+    /** Root className merged into section slot */
+    className?: string;
+    projects?: PortfolioProject[];
+    /**
+     * List of filter labels. Filtering matches project.category exactly.
+     * The first item is selected by default; a value of "All Projects" disables filtering.
+     */
+    filters?: string[];
+    /** When false, disables entrance animations and hover transitions. */
+    enableMotion?: boolean;
+    sectionTitle?: string;
+    sectionSubtitle?: string;
+    ctaTitle?: string;
+    ctaDescription?: string;
+    /** Label for the first call-to-action button */
+    cta1Label?: string;
+    /** URL or anchor target for the first CTA button */
+    cta1Href?: string;
+    /** Label for the second call-to-action button */
+    cta2Label?: string;
+    /** URL or anchor target for the second CTA button */
+    cta2Href?: string;
+    /** Styling configuration objects */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    header?: {
+        className?: string;
+    };
+    title?: {
+        className?: string;
+    };
+    subtitle?: {
+        className?: string;
+    };
+    filterContainer?: {
+        className?: string;
+    };
+    filterButton?: {
+        className?: string;
+    };
+    activeFilterButton?: {
+        className?: string;
+    };
+    grid?: {
+        className?: string;
+    };
+    projectCard?: {
+        className?: string;
+    };
+    imageContainer?: {
+        className?: string;
+    };
+    projectInfo?: {
+        className?: string;
+    };
+    projectTitle?: {
+        className?: string;
+    };
+    projectDescription?: {
+        className?: string;
+    };
+    tagsContainer?: {
+        className?: string;
+    };
+    tagStyle?: {
+        className?: string;
+    };
+    result?: {
+        className?: string;
+    };
+    ctaSection?: {
+        className?: string;
+    };
+    ctaTitleStyle?: {
+        className?: string;
+    };
+    ctaDescriptionStyle?: {
+        className?: string;
+    };
+    ctaButtons?: {
+        className?: string;
+    };
+    cta1Button?: {
+        className?: string;
+    };
+    cta2Button?: {
+        className?: string;
+    };
+    /** Called when a project image or card is clicked. */
+    onProjectClick?: (project: PortfolioProject) => void;
+    onPrimaryCtaClick?: () => void;
+    onSecondaryCtaClick?: () => void;
+    /** ARIA label for the portfolio section */
+    ariaLabel?: string;
+}
+/**
+ * Responsive portfolio/gallery grid with simple category filtering and CTA block.
+ *
+ * @remarks
+ * - Filtering uses exact category match; include "All Projects" to disable filtering.
+ * - Accessibility: Renders a semantic <section> with aria-label; ensure images have informative titles or alt text.
+ *
+ * @example
+ * <PortfolioSimple sectionTitle="Our Work" />
+ */
+export declare function PortfolioSimple({ id, className, projects, filters, enableMotion, sectionTitle, sectionSubtitle, ctaTitle, ctaDescription, cta1Label, cta1Href, cta2Label, cta2Href, section, container, header, title, subtitle, filterContainer, filterButton, activeFilterButton, grid, projectCard, imageContainer, projectInfo, projectTitle, projectDescription, tagsContainer, tagStyle, result, ctaSection, ctaTitleStyle, ctaDescriptionStyle, ctaButtons, cta1Button, cta2Button, onProjectClick, onPrimaryCtaClick, onSecondaryCtaClick, ariaLabel, }: PortfolioSimpleProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PortfolioSimple.d.ts.map

package/dist/components/PortfolioSimple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortfolioSimple.d.ts","sourceRoot":"","sources":["../../src/components/PortfolioSimple.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,UAAU,oBAAoB;IAC5B,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oCAAoC;IACpC,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE;QACV,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,eAAe,CAAC,EAAE;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,cAAc,CAAC,EAAE;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,aAAa,CAAC,EAAE;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,aAAa,CAAC,EAAE;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,mBAAmB,CAAC,EAAE;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAGF,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEjC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmJD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,SAAS,EACT,QAA0B,EAC1B,OAAwB,EACxB,YAAmB,EACnB,YAAgC,EAChC,eAA8J,EAC9J,QAA4C,EAC5C,cAAwG,EACxG,SAA4B,EAC5B,QAAqB,EACrB,SAAS,EACT,QAAQ,EACR,OAEC,EACD,SAEC,EACD,MAEC,EACD,KAGC,EACD,QAGC,EACD,eAEC,EACD,YAGC,EACD,kBAGC,EACD,IAGC,EACD,WAEC,EACD,cAGC,EACD,WAEC,EACD,YAGC,EACD,kBAEC,EACD,aAEC,EACD,QAGC,EACD,MAGC,EACD,UAEC,EACD,aAEC,EACD,mBAGC,EACD,UAEC,EACD,UAGC,EACD,UAGC,EACD,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,SAAwC,GACzC,EAAE,oBAAoB,qBAuJtB"}