Merge pull request #8 from adriannoes/feat/design-system-s2-premium-components

feat(design): add GlassContainer, BentoGrid, BackgroundPaths, AnimatedText, EmptyState components

Author: adriannoes

src/app/globals.css

@@ -142,6 +142,22 @@
 }
 
 @layer utilities {
+  /* Touch-safe hover lift */
+  @media (hover: hover) {
+    .hover-lift:hover {
+      transform: translateY(-0.125rem);
+    }
+  }
+  .hover-lift {
+    will-change: transform;
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
+  }
+  .hover-lift:active {
+    transform: scale(0.98);
+  }
+
   /* Smooth node dragging */
   .node-drag-active {
     transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);

src/components/ui/animated-text.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { cn } from "@/lib/utils"
+
+interface AnimatedTextProps {
+  text: string
+  className?: string
+  as?: "h1" | "h2" | "h3" | "p" | "span"
+  delay?: number
+  /** When true, animation triggers when in viewport */
+  triggerOnView?: boolean
+}
+
+function AnimatedText({
+  text,
+  className,
+  as: Tag = "h1",
+  delay = 0,
+  triggerOnView = false,
+}: AnimatedTextProps) {
+  const words = text.split(/\s+/).filter(Boolean)
+
+  const animationProps = triggerOnView
+    ? {
+        initial: { y: 20, opacity: 0 },
+        whileInView: { y: 0, opacity: 1 },
+        viewport: { once: true, margin: "-50px" } as const,
+      }
+    : {
+        initial: { y: 20, opacity: 0 },
+        animate: { y: 0, opacity: 1 },
+      }
+
+  return (
+    <Tag className={cn(className)}>
+      {words.map((word, i) => (
+        <motion.span
+          key={`${word}-${i}`}
+          className="mr-[0.25em] inline-block"
+          {...animationProps}
+          transition={{
+            type: "spring",
+            stiffness: 150,
+            damping: 25,
+            delay: delay + i * 0.05,
+          }}
+        >
+          {word}
+        </motion.span>
+      ))}
+    </Tag>
+  )
+}
+
+export { AnimatedText }

src/components/ui/background-paths.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { useMemo } from "react"
+import { cn } from "@/lib/utils"
+
+interface BackgroundPathsProps {
+  className?: string
+  pathCount?: number
+}
+
+function seededRandom(seed: number): (n: number) => number {
+  return (n: number) => (Math.sin(seed * n) + 1) / 2
+}
+
+function createPathData(index: number): string {
+  const f = seededRandom(index * 7919 + 1)
+  const y0 = 5 + f(1) * 90
+  const y1 = 5 + f(2) * 90
+  const c1x = 20 + f(3) * 60
+  const c1y = 10 + f(4) * 80
+  const c2x = 40 + f(5) * 50
+  const c2y = 20 + f(6) * 60
+  return `M 0 ${y0} C ${c1x} ${c1y} ${c2x} ${c2y} 100 ${y1}`
+}
+
+function BackgroundPaths({ className, pathCount = 6 }: BackgroundPathsProps) {
+  const paths = useMemo(() => {
+    return Array.from({ length: pathCount }, (_, i) => ({
+      d: createPathData(i),
+      opacity: 0.03 + i * 0.015,
+      duration: 20 + i * 5,
+    }))
+  }, [pathCount])
+
+  return (
+    <div className={cn("text-foreground absolute inset-0 -z-10 overflow-hidden", className)}>
+      <svg className="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden>
+        {paths.map(({ d, opacity, duration }, i) => (
+          <motion.path
+            key={i}
+            d={d}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={0.5}
+            opacity={opacity}
+            strokeDasharray="1000"
+            initial={{ strokeDashoffset: 1000 }}
+            animate={{ strokeDashoffset: 0 }}
+            transition={{
+              duration,
+              repeat: Infinity,
+              repeatType: "loop",
+              ease: "linear",
+            }}
+            className={i >= 4 ? "max-md:hidden" : undefined}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}
+
+export { BackgroundPaths }

src/components/ui/bento-grid.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from "react"
+import { type LucideIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface BentoGridProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function BentoGrid({ children, className }: BentoGridProps) {
+  return (
+    <div
+      data-slot="bento-grid"
+      className={cn("grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3", className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface BentoCardProps {
+  title: string
+  description: string
+  icon: LucideIcon
+  value?: string | number
+  className?: string
+}
+
+const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(
+  ({ title, description, icon: Icon, value, className }, ref) => (
+    <div
+      ref={ref}
+      data-slot="bento-card"
+      className={cn(
+        "group border-border bg-card hover-lift relative overflow-hidden rounded-xl border p-6 transition-all duration-300 hover:shadow-sm",
+        className,
+      )}
+    >
+      {/* Radial grid reveal */}
+      <div
+        data-slot="bento-card-radial"
+        aria-hidden
+        className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle, oklch(var(--foreground) / 0.04) 1px, transparent 1px)",
+          backgroundSize: "4px 4px",
+        }}
+      />
+      {/* Gleam border overlay */}
+      <div
+        aria-hidden
+        className="via-muted absolute inset-0 bg-gradient-to-br from-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+      />
+      <div className="relative">
+        <div className="bg-muted mb-3 w-fit rounded-lg p-2">
+          <Icon className="h-5 w-5" />
+        </div>
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <p className="text-muted-foreground mt-1 text-sm">{description}</p>
+        {value != null && (
+          <p className="mt-2 font-mono text-3xl font-bold tracking-tight">{value}</p>
+        )}
+      </div>
+    </div>
+  ),
+)
+
+BentoCard.displayName = "BentoCard"
+
+export { BentoGrid, BentoCard }

src/components/ui/empty-state.tsx

@@ -0,0 +1,57 @@
+import { type LucideIcon } from "lucide-react"
+import Link from "next/link"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { Button } from "@/components/ui/button"
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description: string
+  actionLabel?: string
+  actionHref?: string
+  /** Requires client boundary. Use actionHref in Server Components. */
+  onAction?: () => void
+}
+
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  actionLabel,
+  actionHref,
+  onAction,
+}: EmptyStateProps) {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Icon className="text-muted-foreground h-5 w-5 opacity-50" />
+        </EmptyMedia>
+        <EmptyTitle>
+          <h2 className="text-lg font-semibold">{title}</h2>
+        </EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+      {actionLabel && (
+        <EmptyContent>
+          {actionHref ? (
+            <Button asChild>
+              <Link href={actionHref}>{actionLabel}</Link>
+            </Button>
+          ) : (
+            <Button onClick={onAction}>{actionLabel}</Button>
+          )}
+        </EmptyContent>
+      )}
+    </Empty>
+  )
+}
+
+export { EmptyState }

src/components/ui/glass-container.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+
+interface GlassContainerProps {
+  children: React.ReactNode
+  className?: string
+  innerClassName?: string
+}
+
+function GlassContainer({ children, className, innerClassName }: GlassContainerProps) {
+  return (
+    <div
+      data-slot="glass-container"
+      className={cn(
+        "rounded-2xl bg-gradient-to-b from-black/10 to-white/10 p-px backdrop-blur-lg dark:from-white/10 dark:to-white/5",
+        className,
+      )}
+    >
+      <div
+        className={cn("rounded-2xl bg-white/95 backdrop-blur-md dark:bg-black/80", innerClassName)}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export { GlassContainer }

src/components/ui/use-mobile.tsx

@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { AnimatedText } from "@/components/ui/animated-text"
+
+describe("AnimatedText", () => {
+  it("splits text into individual word spans", () => {
+    const { container } = render(<AnimatedText text="Hello World" />)
+    const spans = container.querySelectorAll("span")
+    expect(spans.length).toBe(2)
+    expect(spans[0]).toHaveTextContent("Hello")
+    expect(spans[1]).toHaveTextContent("World")
+  })
+
+  it("renders as h1 by default", () => {
+    const { container } = render(<AnimatedText text="Title" />)
+    const h1 = container.querySelector("h1")
+    expect(h1).toBeInTheDocument()
+    expect(h1).toHaveTextContent("Title")
+  })
+
+  it("renders as specified tag via as prop", () => {
+    const { container } = render(<AnimatedText text="Subtitle" as="h2" />)
+    const h2 = container.querySelector("h2")
+    expect(h2).toBeInTheDocument()
+    expect(h2).toHaveTextContent("Subtitle")
+  })
+
+  it("applies className to outer tag", () => {
+    const { container } = render(<AnimatedText text="Styled" className="text-lg font-bold" />)
+    const h1 = container.querySelector("h1")
+    expect(h1).toHaveClass("text-lg")
+    expect(h1).toHaveClass("font-bold")
+  })
+
+  it("filters empty words from multiple spaces", () => {
+    const { container } = render(<AnimatedText text="  A   B  " />)
+    const spans = container.querySelectorAll("span")
+    expect(spans.length).toBe(2)
+    expect(spans[0]).toHaveTextContent("A")
+    expect(spans[1]).toHaveTextContent("B")
+  })
+})