@nextworks/blocks-templates 0.2.0-alpha.7 → 0.2.0-alpha.8

package/dist/templates/saasdashboard/components/Dashboard.jsx

@@ -0,0 +1,168 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+export function Dashboard({ stats, projects, floatingCards, activeTab = "Analytics", navItems = ["Analytics", "Projects", "Team"], }) {
+    return (<div className="relative isolate">
+      <DashboardMockup stats={stats} projects={projects} activeTab={activeTab} navItems={navItems}/>
+
+      {floatingCards.map(({ position, icon, text }) => (<FloatingCard key={position} position={position} icon={icon} text={text}/>))}
+
+      <style>{`
+        .dashboard-mockup {
+          transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
+          transition: transform 0.3s ease;
+          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+        }
+        .dashboard-mockup:hover {
+          transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
+        }
+        .trend-line {
+          clip-path: polygon(
+            0 100%,
+            20% 80%,
+            40% 85%,
+            60% 60%,
+            80% 50%,
+            100% 20%
+          );
+        }
+        @keyframes growUp {
+          0% {
+            height: 0;
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+        @keyframes floatAnim {
+          0%,
+          100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(-20px);
+          }
+        }
+      `}</style>
+    </div>);
+}
+function DashboardMockup({ stats, projects, activeTab, navItems, }) {
+    const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
+    const targetTilt = useRef({ rx: 0, ry: 0 });
+    const rafId = useRef(null);
+    const animate = () => {
+        setTilt((prev) => {
+            const smoothing = 0.15;
+            const nextRx = prev.rx + (targetTilt.current.rx - prev.rx) * smoothing;
+            const nextRy = prev.ry + (targetTilt.current.ry - prev.ry) * smoothing;
+            return { rx: nextRx, ry: nextRy };
+        });
+        rafId.current = requestAnimationFrame(animate);
+    };
+    const handleMove = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const rx = (y / rect.height - 0.5) * -6;
+        const ry = (x / rect.width - 0.5) * 6;
+        targetTilt.current = { rx, ry };
+        if (rafId.current == null)
+            rafId.current = requestAnimationFrame(animate);
+    };
+    const handleLeave = () => {
+        targetTilt.current = { rx: 0, ry: 0 };
+    };
+    useEffect(() => {
+        return () => {
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+        };
+    }, []);
+    return (<div className={"dashboard-mockup transform-gpu rounded-2xl border border-blue-500/20 p-6 shadow-2xl ring-1 ring-blue-500/10 backdrop-blur transition-transform duration-150 ease-out motion-reduce:transition-none " +
+            "bg-slate-900/80 dark:bg-slate-900/80"} style={{
+            willChange: "transform",
+            transform: `perspective(1000px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
+        }} onMouseMove={handleMove} onMouseLeave={handleLeave}>
+      <DashboardHeader activeTab={activeTab} navItems={navItems}/>
+      <DashboardGrid stats={stats} projects={projects}/>
+    </div>);
+}
+function DashboardHeader({ activeTab = "Analytics", navItems = ["Analytics", "Projects", "Team"], }) {
+    return (<div className="mb-6 flex items-center justify-between border-b border-blue-500/10 pb-4">
+      <div className="text-[1.1rem] font-semibold text-slate-200">
+        Business Overview
+      </div>
+      <div className="hidden gap-3 md:flex">
+        {navItems.map((item) => (<div key={item} className={"rounded-md px-3 py-2 text-sm " +
+                (item === activeTab
+                    ? "bg-gradient-to-br from-blue-500 to-purple-500 text-white"
+                    : "bg-blue-500/10 text-blue-400")}>
+            {item}
+          </div>))}
+      </div>
+    </div>);
+}
+function DashboardGrid({ stats, projects, }) {
+    return (<div className="mb-4 grid grid-cols-[2fr_1fr] gap-4">
+      <ChartArea />
+      <StatsPanel stats={stats}/>
+      <ProjectList projects={projects}/>
+    </div>);
+}
+function ChartArea() {
+    const barHeights = [30, 45, 35, 60, 55, 75, 70, 85, 90, 100];
+    return (<div className="relative overflow-hidden rounded-lg border border-blue-500/10 bg-slate-900/50 p-4">
+      <div className="mb-2 text-sm text-slate-300">Revenue Growth</div>
+      <div className="relative h-32 overflow-hidden rounded-md" style={{
+            background: "linear-gradient(45deg, transparent 20%, rgba(59,130,246,0.1) 20%, rgba(59,130,246,0.1) 40%, transparent 40%, transparent 60%, rgba(139,92,246,0.1) 60%, rgba(139,92,246,0.1) 80%, transparent 80%)",
+        }}>
+        <div className="absolute inset-[10px] flex items-end gap-[3px]">
+          {barHeights.map((h, i) => (<div key={i} className="flex-1 rounded-t bg-gradient-to-b from-blue-500 to-purple-500" style={{
+                minHeight: "20px",
+                height: `${h}%`,
+                animation: "growUp 2s ease-out both",
+                animationDelay: `${(i + 1) * 0.1}s`,
+            }}/>))}
+        </div>
+        <div className="trend-line absolute top-5 right-[5%] left-[5%] h-[2px] rounded bg-gradient-to-r from-emerald-500 to-blue-500 opacity-80"/>
+      </div>
+    </div>);
+}
+function StatsPanel({ stats }) {
+    return (<div className="flex flex-col gap-2">
+      {stats.map((s, i) => (<div key={i} className="rounded-lg border border-blue-500/10 bg-slate-900/50 p-3">
+          <div className="text-lg font-bold text-blue-500">{s.value}</div>
+          <div className="text-[0.7rem] text-slate-400 uppercase">
+            {s.label}
+          </div>
+        </div>))}
+    </div>);
+}
+function ProjectList({ projects }) {
+    return (<div className="col-span-2 rounded-lg border border-blue-500/10 bg-slate-900/50 p-4">
+      <div className="mb-2 text-sm text-slate-300">Active Projects</div>
+      <div className="flex flex-wrap gap-2">
+        {projects.map((p, i) => (<div key={i} className="rounded border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/10 px-2 py-2 text-[0.8rem] text-slate-200">
+            {p}
+          </div>))}
+      </div>
+    </div>);
+}
+function FloatingCard({ position, icon, text }) {
+    const positionClasses = position === "card-1"
+        ? "top-[10%] right-[6%]"
+        : position === "card-2"
+            ? "bottom-[20%] left-[2%]"
+            : "top-0 left-0";
+    return (<div className={[
+            "absolute z-10 transform-gpu rounded-lg border border-blue-500/20 p-4 shadow-lg",
+            "animate-[floatAnim_6s_ease-in-out_infinite]",
+            "bg-slate-800 dark:bg-slate-900",
+            positionClasses,
+        ].join(" ")} style={{ willChange: "transform" }}>
+      <div className="mb-2 flex h-[30px] w-[30px] items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-purple-500 text-sm text-white">
+        {icon}
+      </div>
+      <div className="text-sm text-slate-300">{text}</div>
+    </div>);
+}

package/dist/templates/saasdashboard/components/Hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Hero.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,IAAI,gCAkFnB"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Hero.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,IAAI,gCAiFnB"}

package/dist/templates/saasdashboard/components/Hero.jsx

@@ -58,7 +58,6 @@ export function Hero() {
             </div>
           </div>} imageContainer={{
             className: "pl-0 relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[32rem] md:h-[34rem] lg:h-[33rem] md:w-1/2 mb-0 md:mb-0 lg:mb-0 opacity-100",
-            // "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[28rem] md:w-1/2 mb-6 md:mb-0",
         }} textContainer={{ className: "flex-1 p-5 lg:p-8" }} buttonsContainer={{
             className: [
                 "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",

package/dist/templates/saasdashboard/components/Hero_mask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero_mask.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Hero_mask.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,wBAAgB,IAAI,sBAuGnB"}
+{"version":3,"file":"Hero_mask.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Hero_mask.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,wBAAgB,IAAI,sBAsGnB"}

package/dist/templates/saasdashboard/components/Hero_mask.jsx

@@ -76,7 +76,6 @@ export function Hero() {
               </div>
             </div>} imageContainer={{
             className: "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[31rem] md:w-1/2 mb-6 md:mb-0",
-            // "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[28rem] md:w-1/2 mb-6 md:mb-0",
         }} textContainer={{ className: "flex-1 p-5 lg:p-8" }} buttonsContainer={{
             className: "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
         }} textAlign="center" ariaLabel="DashFlow hero section"/>

package/dist/templates/saasdashboard/components/Navbar.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+/**
+ * SaaS Dashboard preset Navbar
+ *
+ * - DashFlow branding with blue/purple gradient logo square (brandNode)
+ * - Inter font for brand and links
+ * - No CTA button (ctaButton = null)
+ * - Blue hover states for links and theme toggle
+ * - Glassy background with backdrop blur (light/dark)
+ *
+ * This preset exposes the Shared Navbar API so any prop/slot can be overridden.
+ *
+ * Example:
+ * <Navbar
+ *   brand="My SaaS"
+ *   links={{ className: "hover:text-emerald-600" }}
+ *   container={{ className: "max-w-6xl mx-auto" }}
+ * />
+ */
+type SharedNavbarProps = ComponentProps<typeof SharedNavbar>;
+type PresetOverrides = Partial<SharedNavbarProps>;
+export declare function Navbar(overrides?: PresetOverrides): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Navbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;;;;;;;;;;;;;;GAiBG;AACH,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,KAAK,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAsFlD,wBAAgB,MAAM,CAAC,SAAS,GAAE,eAAoB,+BAQrD"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;;;;;;;;;;;;;;GAiBG;AACH,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,KAAK,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAqFlD,wBAAgB,MAAM,CAAC,SAAS,GAAE,eAAoB,+BAQrD"}

package/dist/templates/saasdashboard/components/Navbar.jsx

@@ -0,0 +1,83 @@
+"use client";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+const defaultProps = {
+    brand: "DashFlow",
+    // Preserve custom gradient logo block
+    brandNode: (<div className="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-blue-600 to-purple-600 font-bold text-white shadow-sm ring-1 ring-white/40">
+      DF
+    </div>),
+    menuItems: [
+        { label: "Home", href: "#home" },
+        { label: "Features", href: "#features" },
+        { label: "Pricing", href: "#pricing" },
+        { label: "Contact", href: "#contact" },
+    ],
+    ctaButton: null,
+    showColorModeToggle: true,
+    navHeight: "h-16",
+    sticky: true,
+    ariaLabel: "DashFlow main navigation",
+    // Allow layout constraints to be added at page-level
+    className: "",
+    // Style slots tuned for the blue SaaS theme
+    nav: {
+        className: "bg-white/60 dark:bg-gray-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/60 supports-[backdrop-filter]:dark:bg-gray-900/60 text-gray-800 dark:text-white " +
+            // Accent variables for this preset (read by toggle, links, mobile links)
+            "[--navbar-accent:theme(colors.blue.700)] dark:[--navbar-accent:theme(colors.blue.400)] " +
+            "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
+            "[--navbar-hover-bg:theme(colors.blue.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.23 0.05 264) 20%, transparent)] " +
+            "[--navbar-ring:theme(colors.blue.500)] dark:[--navbar-ring:theme(colors.blue.400)] " +
+            "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
+    },
+    brandText: {
+        className: "text-xl font-bold font-inter text-blue-700 dark:text-blue-500",
+    },
+    links: {
+        className: "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-blue-700 dark:hover:text-blue-400 " +
+            "focus:ring-[var(--navbar-ring)]",
+    },
+    // Preset keeps CTA hidden; if enabled, provide subtle interactive defaults
+    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-gray-200/80 dark:border-gray-800/80",
+    },
+    container: {
+        className: "max-w-7xl mx-auto",
+    },
+    brandWrapper: {
+        className: "",
+    },
+    desktopMenu: {
+        className: "hidden items-center space-x-1 md:flex lg:space-x-6",
+    },
+    toggleButton: {
+        className: "md:hidden flex items-center justify-center rounded-md p-2 transition-colors " +
+            "hover:bg-blue-50 dark:hover:bg-blue-900/20 " +
+            "focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400",
+    },
+    colorModeWrapper: {
+        className: "ml-2",
+    },
+    // With variables above, ThemeToggle can rely on them; explicit override optional
+    // themeToggle: { ... }
+    ctaButtonWrapper: {
+        className: "ml-2",
+    },
+    mobileMenuInner: {
+        className: "space-y-2 px-4 pt-2 pb-4",
+    },
+    // Mobile links will read --navbar-hover-bg; explicit class optional
+    mobileLinks: {
+        className: "hover:bg-[var(--navbar-hover-bg)]",
+    },
+};
+export function Navbar(overrides = {}) {
+    // Shallow-merge: passing a style-slot object (e.g., links, nav, etc.)
+    // replaces the default for that slot.
+    const props = Object.assign(Object.assign({}, defaultProps), overrides);
+    return <SharedNavbar {...props}/>;
+}

package/dist/templates/saasdashboard/components/SmoothScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothScroll.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/SmoothScroll.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,SA0F3B"}

package/dist/templates/saasdashboard/components/SmoothScroll.jsx

@@ -0,0 +1,86 @@
+"use client";
+import { useEffect } from "react";
+// Smoothly scrolls to section links with a faster duration
+export function SmoothScroll() {
+    useEffect(() => {
+        let suppressClick = false;
+        const animateTo = (href) => {
+            const el = document.querySelector(href);
+            if (!el)
+                return;
+            const navbarOffsetPx = 64;
+            const start = window.scrollY;
+            const targetTop = el.getBoundingClientRect().top + window.scrollY - navbarOffsetPx;
+            const distance = targetTop - start;
+            const duration = 300;
+            const startTime = performance.now();
+            const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
+            const step = (now) => {
+                const elapsed = now - startTime;
+                const t = Math.min(1, elapsed / duration);
+                const eased = easeOutQuart(t);
+                window.scrollTo(0, start + distance * eased);
+                if (t < 1)
+                    requestAnimationFrame(step);
+                else
+                    history.replaceState(null, "", href);
+            };
+            requestAnimationFrame(step);
+        };
+        const onPointerDown = (e) => {
+            const ev = e;
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            // Only primary button, no modifiers
+            if (ev.button !== 0 ||
+                ev.metaKey ||
+                ev.ctrlKey ||
+                ev.altKey ||
+                ev.shiftKey)
+                return;
+            e.preventDefault();
+            suppressClick = true;
+            animateTo(href);
+        };
+        const onClick = (e) => {
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            if (suppressClick) {
+                e.preventDefault();
+                suppressClick = false;
+                return;
+            }
+            e.preventDefault();
+            animateTo(href);
+        };
+        const onKeyDown = (e) => {
+            const ev = e;
+            if (ev.key !== "Enter" && ev.key !== " ")
+                return;
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            e.preventDefault();
+            animateTo(href);
+        };
+        const links = Array.from(document.querySelectorAll('a[href^="#"]'));
+        links.forEach((a) => {
+            a.addEventListener("pointerdown", onPointerDown);
+            a.addEventListener("click", onClick);
+            a.addEventListener("keydown", onKeyDown);
+        });
+        return () => {
+            links.forEach((a) => {
+                a.removeEventListener("pointerdown", onPointerDown);
+                a.removeEventListener("click", onClick);
+                a.removeEventListener("keydown", onKeyDown);
+            });
+        };
+    }, []);
+    return null;
+}

package/package.json

@@ -1,34 +1,34 @@
-{
-  "name": "@nextworks/blocks-templates",
-  "version": "0.2.0-alpha.7",
-  "private": false,
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "package.json",
-    "README.md"
-  ],
-  "repository": "github:jblh/nextworks-cli",
-  "bugs": "https://github.com/jblh/nextworks-cli/issues",
-  "homepage": "https://github.com/jblh/nextworks-cli#readme",
-  "scripts": {
-    "build": "npx tsc -p tsconfig.json"
-  },
-  "dependencies": {
-    "@nextworks/blocks-core": "0.2.0-alpha.7",
-    "@nextworks/blocks-sections": "0.2.0-alpha.7",
-    "lucide-react": "^0.542.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.9.3",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "^15.0.0 || ^16.0.0"
-  }
-}
+{
+  "name": "@nextworks/blocks-templates",
+  "version": "0.2.0-alpha.8",
+  "private": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "repository": "github:jblh/nextworks-cli",
+  "bugs": "https://github.com/jblh/nextworks-cli/issues",
+  "homepage": "https://github.com/jblh/nextworks-cli#readme",
+  "scripts": {
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@nextworks/blocks-core": "0.2.0-alpha.8",
+    "@nextworks/blocks-sections": "0.2.0-alpha.8",
+    "lucide-react": "^0.542.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "^15.0.0 || ^16.0.0"
+  }
+}