@stampui/blocks 1.0.0

package/src/components/blocks/notification-center.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import { Bell, Check, X, MessageSquare, AlertCircle, CreditCard, UserPlus } from "lucide-react"
+import { Badge } from "@/components/core/badge"
+import { Button } from "@/components/core/button"
+import { Separator } from "@/components/core/separator"
+import { StatusPulse } from "@/components/core/status-pulse"
+import { cx } from "@/lib/cx"
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export type NotificationType = "message" | "alert" | "billing" | "invite" | "system"
+
+export interface Notification {
+  id: string
+  type: NotificationType
+  title: string
+  body: string
+  time: string
+  read: boolean
+  href?: string
+}
+
+export interface NotificationCenterProps {
+  notifications?: Notification[]
+  className?: string
+}
+
+// ── Icons ──────────────────────────────────────────────────────────────────
+
+const typeConfig: Record<NotificationType, { icon: React.ReactNode; color: string }> = {
+  message:  { icon: <MessageSquare className="h-3.5 w-3.5" />, color: "bg-blue-500/15 text-blue-500 border-blue-500/20" },
+  alert:    { icon: <AlertCircle className="h-3.5 w-3.5" />, color: "bg-orange-500/15 text-orange-500 border-orange-500/20" },
+  billing:  { icon: <CreditCard className="h-3.5 w-3.5" />, color: "bg-green-500/15 text-green-500 border-green-500/20" },
+  invite:   { icon: <UserPlus className="h-3.5 w-3.5" />, color: "bg-purple-500/15 text-purple-500 border-purple-500/20" },
+  system:   { icon: <AlertCircle className="h-3.5 w-3.5" />, color: "bg-surface-3 text-muted-foreground border-border" },
+}
+
+const defaultNotifications: Notification[] = [
+  { id: "1", type: "invite",   title: "New team invite",        body: "Sarah invited you to join Acme Design team.",           time: "2m ago",  read: false },
+  { id: "2", type: "message",  title: "Comment on your block",  body: "Alex left a comment on HeroSection: 'Love the variant...'", time: "14m ago", read: false },
+  { id: "3", type: "billing",  title: "Payment successful",     body: "Your Pro plan has been renewed for $29.",               time: "1h ago",  read: false },
+  { id: "4", type: "alert",    title: "Usage limit approaching",body: "You're at 80% of your monthly API limit.",              time: "3h ago",  read: true },
+  { id: "5", type: "system",   title: "Maintenance window",     body: "Scheduled downtime on May 12 from 02:00–04:00 UTC.",    time: "1d ago",  read: true },
+]
+
+// ── Notification Item ──────────────────────────────────────────────────────
+
+function NotifItem({
+  notif,
+  onRead,
+  onDismiss,
+}: {
+  notif: Notification
+  onRead: (id: string) => void
+  onDismiss: (id: string) => void
+}) {
+  const { icon, color } = typeConfig[notif.type]
+  return (
+    <div
+      className={cx(
+        "flex gap-3 px-4 py-3 transition-colors hover:bg-surface-2/50",
+        !notif.read && "bg-surface-2/30"
+      )}
+      onClick={() => onRead(notif.id)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === "Enter" && onRead(notif.id)}
+    >
+      <div className={cx("mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border", color)}>
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-2">
+          <p className={cx("text-sm leading-snug", notif.read ? "text-muted-foreground" : "font-medium text-foreground")}>
+            {notif.title}
+          </p>
+          <div className="flex items-center gap-1 shrink-0">
+            <span className="text-[11px] text-muted-foreground whitespace-nowrap">{notif.time}</span>
+            {!notif.read && <StatusPulse status="online" size="sm" pulse={false} />}
+          </div>
+        </div>
+        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed">{notif.body}</p>
+      </div>
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); onDismiss(notif.id) }}
+        className="mt-0.5 shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground transition-opacity"
+        aria-label="Dismiss"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}
+
+// ── Root ───────────────────────────────────────────────────────────────────
+
+export function NotificationCenter({ notifications: initial = defaultNotifications, className }: NotificationCenterProps) {
+  const [open, setOpen] = React.useState(false)
+  const [notifs, setNotifs] = React.useState(initial)
+  const unread = notifs.filter((n) => !n.read).length
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener("mousedown", close)
+    return () => document.removeEventListener("mousedown", close)
+  }, [open])
+
+  const markRead = (id: string) => setNotifs((n) => n.map((x) => x.id === id ? { ...x, read: true } : x))
+  const dismiss = (id: string) => setNotifs((n) => n.filter((x) => x.id !== id))
+  const markAllRead = () => setNotifs((n) => n.map((x) => ({ ...x, read: true })))
+
+  return (
+    <div ref={ref} className={cx("relative inline-block", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label={`Notifications${unread > 0 ? `, ${unread} unread` : ""}`}
+        className="relative inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border text-muted-foreground hover:bg-surface-2 hover:text-foreground transition-colors"
+      >
+        <Bell className="h-4 w-4" />
+        {unread > 0 && (
+          <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background">
+            {unread > 9 ? "9+" : unread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-2 z-50 w-[380px] rounded-xl border border-border bg-background shadow-lg overflow-hidden">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold">Notifications</span>
+              {unread > 0 && (
+                <Badge variant="neutral" className="h-5 px-1.5 text-[10px] tabular-nums">{unread}</Badge>
+              )}
+            </div>
+            {unread > 0 && (
+              <button
+                type="button"
+                onClick={markAllRead}
+                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <Check className="h-3 w-3" />
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          {/* List */}
+          <div className="max-h-[420px] overflow-y-auto divide-y divide-border/50 group">
+            {notifs.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center px-6">
+                <Bell className="h-8 w-8 text-muted-foreground/30 mb-3" />
+                <p className="text-sm font-medium">All caught up</p>
+                <p className="text-xs text-muted-foreground mt-1">No new notifications</p>
+              </div>
+            ) : (
+              notifs.map((notif) => (
+                <NotifItem key={notif.id} notif={notif} onRead={markRead} onDismiss={dismiss} />
+              ))
+            )}
+          </div>
+
+          {/* Footer */}
+          {notifs.length > 0 && (
+            <>
+              <Separator />
+              <div className="px-4 py-2">
+                <Button variant="ghost" className="w-full text-xs h-8">View all notifications</Button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/onboarding-flow.tsx

@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/core/button"
+import { Input } from "@/components/core/input"
+import { Label } from "@/components/core/label"
+import { Progress } from "@/components/core/progress"
+import { Badge } from "@/components/core/badge"
+import { Check } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export interface OnboardingStep {
+  id: string
+  title: string
+  description: string
+  content: React.ReactNode
+}
+
+export interface OnboardingFlowProps {
+  steps?: OnboardingStep[]
+  onComplete?: (data: Record<string, unknown>) => void
+  className?: string
+}
+
+// ── Default Steps ──────────────────────────────────────────────────────────
+
+function WorkspaceStep({ data, onChange }: { data: Record<string, string>; onChange: (k: string, v: string) => void }) {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="workspace-name">Workspace name</Label>
+        <Input
+          id="workspace-name"
+          placeholder="Acme Corp"
+          value={data.workspaceName ?? ""}
+          onChange={(e) => onChange("workspaceName", e.target.value)}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="workspace-slug">URL slug</Label>
+        <div className="flex">
+          <span className="inline-flex items-center rounded-l-lg border border-r-0 border-border bg-surface-2 px-3 text-xs text-muted-foreground whitespace-nowrap">
+            app.example.com/
+          </span>
+          <Input
+            id="workspace-slug"
+            placeholder="acme"
+            value={data.workspaceSlug ?? ""}
+            onChange={(e) => onChange("workspaceSlug", e.target.value)}
+            className="rounded-l-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function InviteStep({ data, onChange }: { data: Record<string, string>; onChange: (k: string, v: string) => void }) {
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Invite teammates to collaborate. You can skip this and do it later.</p>
+      {[0, 1, 2].map((i) => (
+        <div key={i} className="space-y-1.5">
+          <Label>Email {i + 1}</Label>
+          <Input
+            type="email"
+            placeholder={`teammate${i + 1}@example.com`}
+            value={data[`invite_${i}`] ?? ""}
+            onChange={(e) => onChange(`invite_${i}`, e.target.value)}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function PlanStep() {
+  const [selected, setSelected] = React.useState<"free" | "pro">("free")
+  const plans = [
+    { id: "free", label: "Free", price: "$0/mo", features: ["5 projects", "3 seats", "Community support"] },
+    { id: "pro", label: "Pro", price: "$29/mo", features: ["Unlimited projects", "Unlimited seats", "Priority support", "Pro blocks"] },
+  ] as const
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {plans.map((plan) => (
+        <button
+          key={plan.id}
+          type="button"
+          onClick={() => setSelected(plan.id)}
+          className={cx(
+            "flex flex-col gap-3 rounded-xl border p-5 text-left transition-colors",
+            selected === plan.id
+              ? "border-border-strong bg-surface-2"
+              : "border-border hover:bg-surface-2/50"
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <span className="font-semibold text-sm">{plan.label}</span>
+            {plan.id === "pro" && <Badge variant="neutral" className="text-[10px]">Popular</Badge>}
+          </div>
+          <span className="text-2xl font-bold tracking-tight">{plan.price}</span>
+          <ul className="space-y-1.5">
+            {plan.features.map((f) => (
+              <li key={f} className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Check className="h-3 w-3 shrink-0 text-foreground" />
+                {f}
+              </li>
+            ))}
+          </ul>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function CompleteStep() {
+  return (
+    <div className="flex flex-col items-center text-center py-6 gap-4">
+      <div className="h-14 w-14 rounded-full bg-foreground text-background flex items-center justify-center">
+        <Check className="h-7 w-7" />
+      </div>
+      <div>
+        <h3 className="font-semibold text-lg">You're all set!</h3>
+        <p className="text-sm text-muted-foreground mt-1 max-w-xs">Your workspace is ready. Start building your first project.</p>
+      </div>
+    </div>
+  )
+}
+
+// ── Root ───────────────────────────────────────────────────────────────────
+
+export function OnboardingFlow({ onComplete, className }: OnboardingFlowProps) {
+  const [step, setStep] = React.useState(0)
+  const [data, setData] = React.useState<Record<string, string>>({})
+
+  const updateData = (k: string, v: string) => setData((d) => ({ ...d, [k]: v }))
+
+  const steps = [
+    {
+      id: "workspace",
+      title: "Create your workspace",
+      description: "Give your team a home.",
+      content: <WorkspaceStep data={data} onChange={updateData} />,
+    },
+    {
+      id: "invite",
+      title: "Invite your team",
+      description: "Collaboration starts here.",
+      content: <InviteStep data={data} onChange={updateData} />,
+    },
+    {
+      id: "plan",
+      title: "Choose a plan",
+      description: "Start free, upgrade anytime.",
+      content: <PlanStep />,
+    },
+    {
+      id: "complete",
+      title: "You're ready",
+      description: "Let's build something great.",
+      content: <CompleteStep />,
+    },
+  ]
+
+  const total = steps.length
+  const current = steps[step]
+  const progress = Math.round(((step) / (total - 1)) * 100)
+  const isLast = step === total - 1
+
+  return (
+    <div className={cx("w-full max-w-lg mx-auto", className)}>
+      <div className="rounded-2xl border border-border bg-background shadow-sm overflow-hidden">
+        {/* Header */}
+        <div className="px-8 pt-8 pb-6 border-b border-border">
+          <div className="flex items-center justify-between mb-4">
+            <span className="text-xs font-mono text-muted-foreground">Step {step + 1} of {total}</span>
+            <span className="text-xs text-muted-foreground">{progress}%</span>
+          </div>
+          <Progress value={progress} className="h-1.5 mb-6" />
+          <h2 className="text-lg font-semibold">{current.title}</h2>
+          <p className="text-sm text-muted-foreground mt-0.5">{current.description}</p>
+        </div>
+
+        {/* Content */}
+        <div className="px-8 py-6">
+          {current.content}
+        </div>
+
+        {/* Footer */}
+        <div className="px-8 pb-8 flex items-center justify-between">
+          <Button
+            variant="ghost"
+            onClick={() => setStep((s) => Math.max(0, s - 1))}
+            disabled={step === 0}
+          >
+            Back
+          </Button>
+          <Button
+            onClick={() => {
+              if (isLast) {
+                onComplete?.(data)
+              } else {
+                setStep((s) => s + 1)
+              }
+            }}
+          >
+            {isLast ? "Go to dashboard" : step === 1 ? "Skip for now" : "Continue"}
+          </Button>
+        </div>
+      </div>
+
+      {/* Step dots */}
+      <div className="flex justify-center gap-2 mt-4">
+        {steps.map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => i < step && setStep(i)}
+            className={cx(
+              "h-1.5 rounded-full transition-all",
+              i === step ? "w-6 bg-foreground" : i < step ? "w-1.5 bg-muted-foreground/50" : "w-1.5 bg-border"
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/pricing-section.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+interface PricingTier {
+  name: string
+  price: string
+  period?: string
+  description: string
+  features: string[]
+  cta: string
+  highlighted?: boolean
+}
+
+const DEFAULT_TIERS: PricingTier[] = [
+  {
+    name: "Starter",
+    price: "$0",
+    period: "/month",
+    description: "For side projects and personal use.",
+    features: [
+      "Up to 3 projects",
+      "Core UI components",
+      "Community support",
+      "MIT license",
+    ],
+    cta: "Get Started",
+  },
+  {
+    name: "Pro",
+    price: "$29",
+    period: "/month",
+    description: "For teams shipping production products.",
+    features: [
+      "Unlimited projects",
+      "All UI components",
+      "Advanced blocks",
+      "Priority support",
+      "Private registry",
+      "Team access",
+    ],
+    cta: "Start Free Trial",
+    highlighted: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "For organizations with custom requirements.",
+    features: [
+      "Everything in Pro",
+      "SSO / SAML",
+      "SLA guarantee",
+      "Dedicated support",
+      "Custom licensing",
+      "Source audit",
+    ],
+    cta: "Contact Sales",
+  },
+]
+
+interface PricingSectionProps {
+  tiers?: PricingTier[]
+  onSelect?: (tier: PricingTier) => void
+}
+
+export function PricingSection({ tiers = DEFAULT_TIERS, onSelect }: PricingSectionProps) {
+  return (
+    <section className="w-full py-16 px-4">
+      <div className="mx-auto max-w-5xl">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-3">Pricing</p>
+          <h2 className="text-3xl font-semibold tracking-tight mb-4">Simple, transparent pricing</h2>
+          <p className="text-muted-foreground max-w-md mx-auto text-sm leading-relaxed">
+            Start free. Scale when you need to. No hidden fees, no per-seat traps.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
+          {tiers.map((tier) => (
+            <div
+              key={tier.name}
+              className={cx(
+                "relative flex flex-col rounded-2xl border p-6 transition-shadow",
+                tier.highlighted
+                  ? "border-border-strong bg-surface-2 shadow-lg -mt-2 mb-[-0.5rem]"
+                  : "border-border bg-card"
+              )}
+            >
+              {tier.highlighted && (
+                <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full border border-border bg-primary px-3 py-0.5 text-xs font-medium text-primary-foreground">
+                  Most popular
+                </span>
+              )}
+
+              <div className="mb-6">
+                <p className="text-sm font-medium text-muted-foreground mb-1">{tier.name}</p>
+                <div className="flex items-end gap-1 mb-2">
+                  <span className="text-3xl font-bold tracking-tight">{tier.price}</span>
+                  {tier.period && (
+                    <span className="text-sm text-muted-foreground pb-1">{tier.period}</span>
+                  )}
+                </div>
+                <p className="text-sm text-muted-foreground">{tier.description}</p>
+              </div>
+
+              <ul className="flex-1 space-y-2.5 mb-6">
+                {tier.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-2.5 text-sm">
+                    <Check className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <button
+                type="button"
+                onClick={() => onSelect?.(tier)}
+                className={cx(
+                  "w-full rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                  tier.highlighted
+                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                    : "border border-border bg-surface-2 hover:bg-surface-3 text-foreground"
+                )}
+              >
+                {tier.cta}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}