@stampui/blocks 1.0.0 → 1.1.0

package/dist/manifests.js

@@ -1662,5 +1662,272 @@ exports.manifests = {
         supportsLightMode: true,
         promptReady: true,
     },
+    // ─── New Blocks ───────────────────────────────────────────────────────────
+    "waitlist-section": {
+        slug: "waitlist-section",
+        title: "Waitlist Section",
+        description: "Email signup section with a waitlist counter and thank-you state.",
+        category: "Marketing",
+        tags: ["waitlist", "email", "signup", "landing"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/waitlist-section.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "changelog-feed": {
+        slug: "changelog-feed",
+        title: "Changelog Feed",
+        description: "Vertical timeline of versioned product updates with type tags.",
+        category: "Display",
+        tags: ["changelog", "timeline", "updates", "versioning"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/changelog-feed.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "faq-accordion": {
+        slug: "faq-accordion",
+        title: "FAQ Accordion",
+        description: "Expandable FAQ section built without external accordion dependencies.",
+        category: "Marketing",
+        tags: ["faq", "accordion", "help", "landing"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: ["lucide-react"],
+        files: [{ path: "components/blocks/faq-accordion.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "cta-banner": {
+        slug: "cta-banner",
+        title: "CTA Banner",
+        description: "End-of-page call-to-action section with primary and secondary buttons.",
+        category: "Marketing",
+        tags: ["cta", "call-to-action", "landing", "conversion"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/cta-banner.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "site-footer": {
+        slug: "site-footer",
+        title: "Site Footer",
+        description: "Full site footer with brand, grouped nav links, social icons, and copyright.",
+        category: "Navigation",
+        tags: ["footer", "navigation", "links", "social"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: ["lucide-react"],
+        files: [{ path: "components/blocks/site-footer.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "testimonials-wall": {
+        slug: "testimonials-wall",
+        title: "Testimonials Wall",
+        description: "Responsive grid of testimonial cards with author avatars and quotes.",
+        category: "Marketing",
+        tags: ["testimonials", "social-proof", "quotes", "grid"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/testimonials-wall.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "metrics-grid": {
+        slug: "metrics-grid",
+        title: "Metrics Grid",
+        description: "Dashboard KPI grid with trend indicators, icons, and configurable columns.",
+        category: "Dashboard",
+        tags: ["metrics", "kpi", "dashboard", "stats", "analytics"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "intermediate",
+        frameworks: ["nextjs", "react"],
+        dependencies: ["lucide-react"],
+        files: [{ path: "components/blocks/metrics-grid.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "announcement-bar": {
+        slug: "announcement-bar",
+        title: "Announcement Bar",
+        description: "Dismissible top-of-page announcement banner with optional CTA.",
+        category: "Feedback",
+        tags: ["announcement", "banner", "notification", "top-bar"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: ["lucide-react"],
+        files: [{ path: "components/blocks/announcement-bar.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "social-proof-bar": {
+        slug: "social-proof-bar",
+        title: "Social Proof Bar",
+        description: "Horizontal logo strip showing companies or teams using your product.",
+        category: "Marketing",
+        tags: ["logos", "social-proof", "companies", "trust"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/social-proof-bar.tsx", type: "block" }],
+        tokens: ["muted-foreground", "border"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "feature-comparison": {
+        slug: "feature-comparison",
+        title: "Feature Comparison",
+        description: "Plan comparison table with highlighted column, checkmarks, and custom values.",
+        category: "Marketing",
+        tags: ["pricing", "comparison", "table", "features", "plans"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "intermediate",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/feature-comparison.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "team-grid": {
+        slug: "team-grid",
+        title: "Team Grid",
+        description: "Responsive grid of team member cards with avatars, roles, bios, and social links.",
+        category: "Display",
+        tags: ["team", "about", "members", "grid", "people"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: ["lucide-react"],
+        files: [{ path: "components/blocks/team-grid.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "empty-state": {
+        slug: "empty-state",
+        title: "Empty State",
+        description: "Centered empty state with icon, title, description, and optional action.",
+        category: "Feedback",
+        tags: ["empty", "no-data", "placeholder", "state"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: ["lucide-react"],
+        files: [{ path: "components/blocks/empty-state.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "error-page": {
+        slug: "error-page",
+        title: "Error Page",
+        description: "Minimal full-page error display (404/500) with code, title, and back button.",
+        category: "Feedback",
+        tags: ["error", "404", "500", "not-found", "page"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/error-page.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
+    "cookie-consent": {
+        slug: "cookie-consent",
+        title: "Cookie Consent",
+        description: "GDPR-compliant fixed-bottom cookie consent banner with accept/decline/customize actions.",
+        category: "UI",
+        tags: ["cookie", "gdpr", "consent", "privacy", "banner"],
+        version: "1.0.0",
+        updatedAt: "2026-05-17",
+        changelog: ["Initial release"],
+        status: "free",
+        difficulty: "beginner",
+        frameworks: ["nextjs", "react", "vite"],
+        dependencies: [],
+        files: [{ path: "components/blocks/cookie-consent.tsx", type: "block" }],
+        tokens: ["foreground", "muted-foreground", "border", "surface-2"],
+        supportsDarkMode: true,
+        supportsLightMode: false,
+        promptReady: true,
+    },
 };
 exports.blockList = Object.values(exports.manifests);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stampui/blocks",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "StampUI blocks, registry, and source files",
   "files": ["dist", "src"],
   "main": "./dist/index.js",

package/src/components/blocks/announcement-bar.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface AnnouncementCTA {
+  label: string
+  href?: string
+  onClick?: () => void
+}
+
+export interface AnnouncementBarProps {
+  message: string
+  cta?: AnnouncementCTA
+  variant?: "info" | "warning" | "success"
+  dismissible?: boolean
+  className?: string
+}
+
+const variantStyles: Record<
+  NonNullable<AnnouncementBarProps["variant"]>,
+  { bar: string; label: string }
+> = {
+  info: {
+    bar: "bg-[#09090B] border-b border-[#23252A]",
+    label: "text-muted-foreground",
+  },
+  warning: {
+    bar: "bg-[#09090B] border-b border-[#23252A]",
+    label: "text-[#FAFAFA] font-medium",
+  },
+  success: {
+    bar: "bg-[#09090B] border-b border-[#23252A]",
+    label: "text-muted-foreground",
+  },
+}
+
+export function AnnouncementBar({
+  message,
+  cta,
+  variant = "info",
+  dismissible = false,
+  className,
+}: AnnouncementBarProps) {
+  const [dismissed, setDismissed] = React.useState(false)
+
+  if (dismissed) return null
+
+  const styles = variantStyles[variant]
+
+  return (
+    <div
+      className={cx(
+        "relative w-full px-4 py-2.5",
+        styles.bar,
+        className
+      )}
+      role="banner"
+    >
+      <div className="mx-auto flex max-w-5xl items-center justify-center gap-3">
+        <p className={cx("text-xs leading-snug", styles.label)}>
+          {message}
+        </p>
+
+        {cta && (
+          <>
+            <span className="shrink-0 text-[#23252A]" aria-hidden>
+              ·
+            </span>
+            {cta.href ? (
+              <a
+                href={cta.href}
+                className="shrink-0 text-xs font-semibold text-[#FAFAFA] underline-offset-2 hover:underline transition-colors duration-150 ease-out"
+              >
+                {cta.label}
+              </a>
+            ) : (
+              <button
+                type="button"
+                onClick={cta.onClick}
+                className="shrink-0 text-xs font-semibold text-[#FAFAFA] underline-offset-2 hover:underline transition-colors duration-150 ease-out"
+              >
+                {cta.label}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+
+      {dismissible && (
+        <button
+          type="button"
+          aria-label="Dismiss announcement"
+          onClick={() => setDismissed(true)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 ease-out hover:bg-[#101114] hover:text-[#FAFAFA]"
+        >
+          <X size={13} strokeWidth={2} />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/changelog-feed.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface ChangelogEntry {
+  version: string
+  date: string
+  title: string
+  description: string
+  tags?: string[]
+  type: "feature" | "fix" | "breaking"
+}
+
+export interface ChangelogFeedProps {
+  entries?: ChangelogEntry[]
+  className?: string
+}
+
+const TYPE_STYLES: Record<ChangelogEntry["type"], string> = {
+  feature: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+  fix: "bg-sky-500/10 text-sky-400 border-sky-500/20",
+  breaking: "bg-red-500/10 text-red-400 border-red-500/20",
+}
+
+const TYPE_LABELS: Record<ChangelogEntry["type"], string> = {
+  feature: "Feature",
+  fix: "Fix",
+  breaking: "Breaking",
+}
+
+const DEFAULT_ENTRIES: ChangelogEntry[] = [
+  {
+    version: "v1.4.0",
+    date: "May 14, 2025",
+    title: "Block registry search",
+    description: "Full-text search across all blocks with keyboard navigation and instant previews.",
+    tags: ["search", "dx"],
+    type: "feature",
+  },
+  {
+    version: "v1.3.2",
+    date: "May 8, 2025",
+    title: "Fix dark mode flicker on hydration",
+    description: "Resolved a flash of unstyled content when the page first loads in dark mode.",
+    tags: ["ssr"],
+    type: "fix",
+  },
+  {
+    version: "v1.3.0",
+    date: "Apr 29, 2025",
+    title: "Stamp CLI v2",
+    description: "Redesigned CLI with interactive prompts, dry-run mode, and conflict detection.",
+    tags: ["cli"],
+    type: "breaking",
+  },
+]
+
+export function ChangelogFeed({
+  entries = DEFAULT_ENTRIES,
+  className,
+}: ChangelogFeedProps) {
+  return (
+    <section className={cx("w-full py-16 px-6", className)}>
+      <div className="max-w-2xl mx-auto">
+        <h2 className="text-2xl font-bold tracking-tight text-[#FAFAFA] mb-10">
+          Changelog
+        </h2>
+
+        <div className="relative border-l border-[#23252A] pl-8 flex flex-col gap-10">
+          {entries.map((entry, i) => (
+            <div key={i} className="relative">
+              <span className="absolute -left-[calc(2rem+5px)] top-1.5 w-2.5 h-2.5 rounded-full bg-[#23252A] border border-[#23252A] ring-4 ring-[#070708]" />
+
+              <div className="flex flex-wrap items-center gap-2 mb-2">
+                <span className="text-xs font-mono font-medium text-[#FAFAFA] bg-[#101114] border border-[#23252A] px-2 py-0.5 rounded-md">
+                  {entry.version}
+                </span>
+                <span
+                  className={cx(
+                    "text-xs font-medium border px-2 py-0.5 rounded-md",
+                    TYPE_STYLES[entry.type]
+                  )}
+                >
+                  {TYPE_LABELS[entry.type]}
+                </span>
+                <span className="text-xs text-muted-foreground">{entry.date}</span>
+              </div>
+
+              <h3 className="text-base font-semibold text-[#FAFAFA] leading-snug">
+                {entry.title}
+              </h3>
+              <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
+                {entry.description}
+              </p>
+
+              {entry.tags && entry.tags.length > 0 && (
+                <div className="mt-3 flex flex-wrap gap-1.5">
+                  {entry.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="text-xs font-mono text-muted-foreground bg-[#09090B] border border-[#23252A] px-2 py-0.5 rounded-md"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/cookie-consent.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/core/button"
+import { cx } from "@/lib/cx"
+
+export interface CookieConsentProps {
+  onAccept: () => void
+  onDecline: () => void
+  onCustomize?: () => void
+  title?: string
+  description?: string
+  className?: string
+}
+
+export function CookieConsent({
+  onAccept,
+  onDecline,
+  onCustomize,
+  title = "We use cookies",
+  description = "We use cookies to improve your experience, analyze site traffic, and serve personalized content. You can accept all cookies or manage your preferences.",
+  className,
+}: CookieConsentProps) {
+  return (
+    <div
+      role="dialog"
+      aria-label="Cookie consent"
+      className={cx(
+        "fixed bottom-0 left-0 right-0 z-50",
+        "border-t border-[#23252A] bg-[#09090B]",
+        className
+      )}
+    >
+      <div className="mx-auto max-w-5xl px-6 py-4">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-[#FAFAFA] mb-0.5">{title}</p>
+            <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
+          </div>
+
+          <div className="flex items-center gap-2 shrink-0">
+            {onCustomize && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onCustomize}
+                className="text-xs"
+              >
+                Customize
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onDecline}
+              className="text-xs"
+            >
+              Decline
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={onAccept}
+              className="text-xs"
+            >
+              Accept all
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/cta-banner.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/core/button"
+import { cx } from "@/lib/cx"
+
+export interface CtaAction {
+  label: string
+  href?: string
+  onClick?: () => void
+}
+
+export interface CtaBannerProps {
+  headline?: string
+  subtext?: string
+  primaryCta?: CtaAction
+  secondaryCta?: CtaAction
+  className?: string
+}
+
+export function CtaBanner({
+  headline = "Ready to stamp your first block?",
+  subtext = "Copy production-ready components into your project in seconds. No lock-in, no runtime.",
+  primaryCta = { label: "Get Started", href: "/blocks" },
+  secondaryCta = { label: "Read the Docs", href: "/docs" },
+  className,
+}: CtaBannerProps) {
+  return (
+    <section
+      className={cx(
+        "w-full border-t border-[#23252A] py-20 px-6",
+        "flex flex-col items-center text-center",
+        className
+      )}
+    >
+      <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-[#FAFAFA] max-w-xl leading-tight">
+        {headline}
+      </h2>
+
+      {subtext && (
+        <p className="mt-4 text-base text-muted-foreground max-w-md leading-relaxed">
+          {subtext}
+        </p>
+      )}
+
+      <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+        {primaryCta && (
+          <Button
+            asChild={!!primaryCta.href}
+            onClick={primaryCta.onClick}
+            size="lg"
+          >
+            {primaryCta.href ? (
+              <a href={primaryCta.href}>{primaryCta.label}</a>
+            ) : (
+              <span>{primaryCta.label}</span>
+            )}
+          </Button>
+        )}
+        {secondaryCta && (
+          <Button
+            asChild={!!secondaryCta.href}
+            onClick={secondaryCta.onClick}
+            variant="outline"
+            size="lg"
+          >
+            {secondaryCta.href ? (
+              <a href={secondaryCta.href}>{secondaryCta.label}</a>
+            ) : (
+              <span>{secondaryCta.label}</span>
+            )}
+          </Button>
+        )}
+      </div>
+    </section>
+  )
+}