@utopia-studio-design/design-system-cli 0.6.1 → 0.7.0

package/data/templates/quantum-verification-story/src/components/text-particle.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+
+type DrawFn = (ctx: CanvasRenderingContext2D, W: number, H: number) => void
+
+interface TextParticleProps {
+  text?: string
+  /** Custom draw function to define the shape (overrides text) */
+  drawShape?: DrawFn
+  className?: string
+  /** CSS color string for particles */
+  color?: string
+  /** Font size as fraction of canvas height (0–1) */
+  fontScale?: number
+  /** Pixel spacing between sampled points */
+  spacing?: number
+}
+
+// ── Preset icon draw functions ──────────────────────────────────────────────
+
+export function drawEye(ctx: CanvasRenderingContext2D, W: number, H: number) {
+  const lw = Math.min(W, H) * 0.09
+  ctx.strokeStyle = "white"
+  ctx.lineWidth = lw
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  // Outer eye lens shape
+  ctx.beginPath()
+  ctx.moveTo(W * 0.06, H * 0.5)
+  ctx.quadraticCurveTo(W * 0.5, H * 0.1, W * 0.94, H * 0.5)
+  ctx.quadraticCurveTo(W * 0.5, H * 0.9, W * 0.06, H * 0.5)
+  ctx.stroke()
+  // Iris/pupil circle
+  ctx.beginPath()
+  ctx.arc(W * 0.5, H * 0.5, Math.min(W, H) * 0.16, 0, Math.PI * 2)
+  ctx.stroke()
+}
+
+export function drawActivity(ctx: CanvasRenderingContext2D, W: number, H: number) {
+  const midY = H * 0.5
+  const lw = Math.min(W, H) * 0.09
+  ctx.strokeStyle = "white"
+  ctx.lineWidth = lw
+  ctx.lineJoin = "round"
+  ctx.lineCap = "round"
+  ctx.beginPath()
+  ctx.moveTo(W * 0.03, midY)
+  ctx.lineTo(W * 0.22, midY)
+  ctx.lineTo(W * 0.35, H * 0.14)
+  ctx.lineTo(W * 0.50, H * 0.83)
+  ctx.lineTo(W * 0.63, H * 0.24)
+  ctx.lineTo(W * 0.76, midY)
+  ctx.lineTo(W * 0.97, midY)
+  ctx.stroke()
+}
+
+export function drawBadgeCheck(ctx: CanvasRenderingContext2D, W: number, H: number) {
+  const cx = W * 0.5, cy = H * 0.5
+  const r = Math.min(W, H) * 0.37
+  const lw = r * 0.22
+  ctx.strokeStyle = "white"
+  ctx.lineWidth = lw
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  ctx.beginPath()
+  for (let i = 0; i < 8; i++) {
+    const angle = (i / 8) * Math.PI * 2 - Math.PI / 8
+    const x = cx + r * Math.cos(angle)
+    const y = cy + r * Math.sin(angle)
+    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y)
+  }
+  ctx.closePath()
+  ctx.stroke()
+  ctx.lineWidth = lw * 0.8
+  ctx.beginPath()
+  ctx.moveTo(cx - r * 0.30, cy + r * 0.05)
+  ctx.lineTo(cx - r * 0.03, cy + r * 0.30)
+  ctx.lineTo(cx + r * 0.36, cy - r * 0.22)
+  ctx.stroke()
+}
+
+export function TextParticle({
+  text = "PQC",
+  drawShape,
+  className = "",
+  color = "rgb(196,146,58)",
+  fontScale = 0.62,
+  spacing = 12,
+}: TextParticleProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+
+    const canvas = canvasRef.current!
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")!
+
+    let raf: number
+    let frame = 0
+    let particles: { x: number; y: number; char: string; alpha: number }[] = []
+
+    function buildParticles(W: number, H: number) {
+      const off = document.createElement("canvas")
+      off.width = W
+      off.height = H
+      const offCtx = off.getContext("2d")!
+      if (drawShape) {
+        drawShape(offCtx, W, H)
+      } else {
+        offCtx.fillStyle = "white"
+        offCtx.font = `bold ${Math.floor(H * fontScale)}px 'Courier New', monospace`
+        offCtx.textAlign = "center"
+        offCtx.textBaseline = "middle"
+        offCtx.fillText(text, W / 2, H / 2)
+      }
+
+      const { data } = offCtx.getImageData(0, 0, W, H)
+      particles = []
+      for (let y = spacing; y < H - spacing / 2; y += spacing) {
+        for (let x = spacing / 2; x < W - spacing / 2; x += spacing) {
+          if (data[(y * W + x) * 4 + 3] > 100) {
+            particles.push({
+              x,
+              y,
+              char: CHARS[Math.floor(Math.random() * CHARS.length)],
+              alpha: 0.4 + Math.random() * 0.55,
+            })
+          }
+        }
+      }
+    }
+
+    function resize() {
+      canvas.width = canvas.offsetWidth
+      canvas.height = canvas.offsetHeight
+      if (canvas.width > 0 && canvas.height > 0) {
+        buildParticles(canvas.width, canvas.height)
+      }
+    }
+
+    function draw() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      // Scramble ~10% of particles per frame
+      if (frame % 3 === 0) {
+        const n = Math.max(1, Math.floor(particles.length * 0.10))
+        for (let i = 0; i < n; i++) {
+          const idx = Math.floor(Math.random() * particles.length)
+          particles[idx].char = CHARS[Math.floor(Math.random() * CHARS.length)]
+          particles[idx].alpha = 0.35 + Math.random() * 0.6
+        }
+      }
+
+      const fontSize = Math.round(spacing * 1.8)
+      ctx.font = `bold ${fontSize}px 'Courier New', monospace`
+      ctx.fillStyle = color
+
+      for (const p of particles) {
+        ctx.globalAlpha = p.alpha
+        ctx.fillText(p.char, p.x, p.y)
+      }
+      ctx.globalAlpha = 1
+
+      frame++
+      raf = requestAnimationFrame(draw)
+    }
+
+    const ro = new ResizeObserver(resize)
+    ro.observe(canvas)
+    resize()
+
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) {
+          raf = requestAnimationFrame(draw)
+        } else {
+          cancelAnimationFrame(raf)
+        }
+      },
+      { threshold: 0.1 }
+    )
+    io.observe(canvas)
+    raf = requestAnimationFrame(draw)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      ro.disconnect()
+      io.disconnect()
+    }
+  }, [text, drawShape, color, fontScale, spacing])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{ display: "block", width: "100%", height: "100%" }}
+    />
+  )
+}

package/data/templates/quantum-verification-story/src/components/ticker.tsx

@@ -0,0 +1,27 @@
+const items = [
+  "NIST PQC STANDARDS FINALIZED — COMPLIANCE WINDOW NOW OPEN",
+  "HARVEST-NOW-DECRYPT-LATER ATTACKS DOCUMENTED BY NATION-STATE ACTORS",
+  "GOVERNMENT CONTRACTORS: PQC MANDATES EFFECTIVE 2025",
+  "RBI CYBERSECURITY FRAMEWORK UPDATE — Q4 2024",
+  "NIST PQC STANDARDS FINALIZED — COMPLIANCE WINDOW NOW OPEN",
+  "HARVEST-NOW-DECRYPT-LATER ATTACKS DOCUMENTED BY NATION-STATE ACTORS",
+  "GOVERNMENT CONTRACTORS: PQC MANDATES EFFECTIVE 2025",
+  "RBI CYBERSECURITY FRAMEWORK UPDATE — Q4 2024",
+]
+
+export function Ticker() {
+  return (
+    <div className="bg-[var(--deep-900)] overflow-hidden whitespace-nowrap py-2 border-b border-white/10">
+      <div className="inline-block" style={{ animation: "ticker 35s linear infinite" }}>
+        {items.map((item, i) => (
+          <span
+            key={i}
+            className="mx-10 font-mono text-[10.5px] tracking-[0.12em] uppercase text-[var(--primary-400)]"
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

package/data/templates/quantum-verification-story/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center border px-2.5 py-0.5 text-[10px] font-semibold tracking-[0.12em] uppercase transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-ink text-[var(--primary-foreground)]",
+        secondary: "border-transparent bg-[#ede9df] text-muted2",
+        outline: "border-rule text-ink",
+        primary: "border-transparent bg-[var(--primary)] text-[var(--primary-foreground)]",
+        deep: "border-transparent bg-[var(--deep-900)] text-[var(--primary-foreground)]",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/data/templates/quantum-verification-story/src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap text-[13px] font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "rounded-full bg-[var(--deep-900)] text-white hover:bg-[var(--deep-800)]",
+        outline:
+          "rounded-full border border-[var(--color-border)] bg-transparent text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] hover:bg-[var(--gray-50)]",
+        ghost:   "rounded-md hover:bg-[var(--gray-100)] text-[var(--color-text-primary)]",
+        link:    "text-[var(--primary-500)] underline-offset-4 hover:underline",
+        primary: "rounded-full bg-[var(--primary-500)] text-[var(--primary-foreground)] hover:bg-[var(--primary-400)]",
+        secondary: "rounded-full bg-[var(--gray-100)] text-[var(--color-text-primary)] hover:bg-[var(--gray-200)]",
+        destructive: "rounded-full bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      },
+      size: {
+        default: "h-10 px-6",
+        sm:      "h-8 px-4 text-[12px]",
+        lg:      "h-11 px-8 text-[15px]",
+        icon:    "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/data/templates/quantum-verification-story/src/components/ui/card.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("bg-paper border border-rule transition-colors duration-200", className)} {...props} />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col p-9 pb-0", className)} {...props} />
+  )
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("font-display text-2xl font-bold leading-tight", className)} {...props} />
+  )
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm leading-7 text-muted2 mt-3", className)} {...props} />
+  )
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-9 pt-6", className)} {...props} />
+  )
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-9 pt-0", className)} {...props} />
+  )
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/data/templates/quantum-verification-story/src/components/ui/cursor-driven-particle-typography.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, { useEffect, useRef } from "react";
+
+export interface CursorDrivenParticleTypographyProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** The text to render */
+    text: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family */
+    fontFamily?: string;
+    /** Size of each particle */
+    particleSize?: number;
+    /** Density of particles (lower number = more particles, minimum 1) */
+    particleDensity?: number;
+    /** How strongly the cursor pushes particles away */
+    dispersionStrength?: number;
+    /** Speed at which particles return to origin */
+    returnSpeed?: number;
+    /** Custom color for particles. Overrides inherited text color if set. */
+    color?: string;
+}
+
+class Particle {
+    x: number;
+    y: number;
+    originX: number;
+    originY: number;
+    vx: number;
+    vy: number;
+    size: number;
+    color: string;
+    dispersion: number;
+    returnSpd: number;
+
+    constructor(
+        x: number,
+        y: number,
+        size: number,
+        color: string,
+        dispersion: number,
+        returnSpd: number
+    ) {
+        this.x = x + (Math.random() - 0.5) * 10; // start with slight randomness
+        this.y = y + (Math.random() - 0.5) * 10;
+        this.originX = x;
+        this.originY = y;
+        this.vx = (Math.random() - 0.5) * 5;
+        this.vy = (Math.random() - 0.5) * 5;
+        this.size = size;
+        this.color = color;
+        this.dispersion = dispersion;
+        this.returnSpd = returnSpd;
+    }
+
+    update(mouseX: number, mouseY: number) {
+        const dx = mouseX - this.x;
+        const dy = mouseY - this.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        // Physics interaction with mouse
+        const interactionRadius = 120; // 120px interaction radius
+
+        if (distance < interactionRadius && mouseX !== -1000 && mouseY !== -1000) {
+            const forceDirectionX = dx / distance;
+            const forceDirectionY = dy / distance;
+
+            const force = (interactionRadius - distance) / interactionRadius;
+
+            // Calculate repulsion
+            const repulsionX = forceDirectionX * force * this.dispersion;
+            const repulsionY = forceDirectionY * force * this.dispersion;
+
+            this.vx -= repulsionX;
+            this.vy -= repulsionY;
+        }
+
+        // Return to origin (spring physics)
+        this.vx += (this.originX - this.x) * this.returnSpd;
+        this.vy += (this.originY - this.y) * this.returnSpd;
+
+        // Friction
+        this.vx *= 0.85;
+        this.vy *= 0.85;
+
+        // Add subtle noise/jitter when close to origin
+        const distToOrigin = Math.sqrt(
+            Math.pow(this.x - this.originX, 2) + Math.pow(this.y - this.originY, 2)
+        );
+        if (distToOrigin < 1 && Math.random() > 0.95) {
+            this.vx += (Math.random() - 0.5) * 0.2;
+            this.vy += (Math.random() - 0.5) * 0.2;
+        }
+
+        this.x += this.vx;
+        this.y += this.vy;
+    }
+
+    draw(ctx: CanvasRenderingContext2D) {
+        ctx.fillStyle = this.color;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+export function CursorDrivenParticleTypography({
+    className,
+    text,
+    fontSize = 120,
+    fontFamily = "Inter, sans-serif",
+    particleSize = 1.5,
+    particleDensity = 6,
+    dispersionStrength = 15,
+    returnSpeed = 0.08,
+    color,
+}: CursorDrivenParticleTypographyProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d", { willReadFrequently: true });
+        if (!ctx) return;
+
+        let animationFrameId: number;
+        let particles: Particle[] = [];
+
+        let mouseX = -1000;
+        let mouseY = -1000;
+
+        let containerWidth = 0;
+        let containerHeight = 0;
+
+        const init = () => {
+            const container = containerRef.current;
+            if (!container) return;
+
+            containerWidth = container.clientWidth;
+            containerHeight = container.clientHeight;
+
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = containerWidth * dpr;
+            canvas.height = containerHeight * dpr;
+            canvas.style.width = `${containerWidth}px`;
+            canvas.style.height = `${containerHeight}px`;
+
+            ctx.scale(dpr, dpr);
+
+            // Determine text color
+            const computedStyle = window.getComputedStyle(container);
+            const textColor = color || computedStyle.color || "#000000";
+
+            ctx.clearRect(0, 0, containerWidth, containerHeight);
+
+            // Draw text to generate pixel map
+            ctx.fillStyle = textColor;
+            // Fit text within container: start large, shrink until text width fits
+            let effectiveFontSize = Math.min(fontSize, containerHeight * 0.55);
+            ctx.font = `bold ${effectiveFontSize}px ${fontFamily}`;
+            while (ctx.measureText(text).width > containerWidth * 0.88 && effectiveFontSize > 8) {
+                effectiveFontSize -= 2;
+                ctx.font = `bold ${effectiveFontSize}px ${fontFamily}`;
+            }
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+
+            // Draw standard text first to measure it
+            ctx.fillText(text, containerWidth / 2, containerHeight / 2);
+
+            // Get pixel data
+            const textCoordinates = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            particles = [];
+
+            // Create particles from text pixels
+            // Step by density multiplied by dpr
+            const step = Math.max(1, Math.floor(particleDensity * dpr));
+            for (let y = 0; y < textCoordinates.height; y += step) {
+                for (let x = 0; x < textCoordinates.width; x += step) {
+                    const index = (y * textCoordinates.width + x) * 4;
+                    const alpha = textCoordinates.data[index + 3] || 0;
+
+                    if (alpha > 128) {
+                        particles.push(
+                            new Particle(
+                                x / dpr,
+                                y / dpr,
+                                particleSize,
+                                textColor,
+                                dispersionStrength,
+                                returnSpeed
+                            )
+                        );
+                    }
+                }
+            }
+        };
+
+        const animate = () => {
+            ctx.clearRect(0, 0, containerWidth, containerHeight);
+
+            particles.forEach((particle) => {
+                particle.update(mouseX, mouseY);
+                particle.draw(ctx);
+            });
+            animationFrameId = requestAnimationFrame(animate);
+        };
+
+        const handleMouseMove = (e: MouseEvent) => {
+            const rect = canvas.getBoundingClientRect();
+            mouseX = e.clientX - rect.left;
+            mouseY = e.clientY - rect.top;
+        };
+
+        const handleMouseLeave = () => {
+            mouseX = -1000;
+            mouseY = -1000;
+        };
+
+        const handleResize = () => {
+            init();
+        };
+
+        // Initialize with a short delay to ensure fonts/layout are ready
+        const timeoutId = setTimeout(() => {
+            init();
+            animate();
+        }, 100);
+
+        const resizeObserver = new ResizeObserver(() => {
+            handleResize();
+        });
+
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        // Re-initialize particles when the theme changes (detects class changes on html tag)
+        const themeObserver = new MutationObserver(() => {
+            init();
+        });
+        themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"]
+        });
+
+        canvas.addEventListener("mousemove", handleMouseMove);
+        canvas.addEventListener("mouseleave", handleMouseLeave);
+        canvas.addEventListener("touchstart", (e) => {
+            if (!e.touches[0]) return;
+            const rect = canvas.getBoundingClientRect();
+            mouseX = e.touches[0].clientX - rect.left;
+            mouseY = e.touches[0].clientY - rect.top;
+        });
+        canvas.addEventListener("touchmove", (e) => {
+            if (!e.touches[0]) return;
+            const rect = canvas.getBoundingClientRect();
+            mouseX = e.touches[0].clientX - rect.left;
+            mouseY = e.touches[0].clientY - rect.top;
+        });
+        canvas.addEventListener("touchend", handleMouseLeave);
+
+        return () => {
+            clearTimeout(timeoutId);
+            resizeObserver.disconnect();
+            themeObserver.disconnect();
+            canvas.removeEventListener("mousemove", handleMouseMove);
+            canvas.removeEventListener("mouseleave", handleMouseLeave);
+            cancelAnimationFrame(animationFrameId);
+        };
+    }, [text, fontSize, fontFamily, particleSize, particleDensity, dispersionStrength, returnSpeed, color]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={cn("w-full h-full min-h-[400px] flex items-center justify-center relative touch-none", className)}
+        >
+            <canvas
+                ref={canvasRef}
+                className="block w-full h-full"
+            />
+        </div>
+    );
+}

package/data/templates/quantum-verification-story/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-11 w-full bg-[var(--surface)] border border-[var(--border)] px-4 py-3 text-sm font-sans text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:border-[var(--primary)] transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Input.displayName = "Input"
+export { Input }

package/data/templates/quantum-verification-story/src/components/ui/label.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "block font-mono-brand text-[10px] tracking-[0.15em] uppercase text-[#6b6b5e] mb-2",
+      className
+    )}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+export { Label }