@stampui/blocks 1.1.1 → 2.0.0

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@stampui/blocks",
-  "version": "1.1.1",
-  "description": "StampUI blocks, registry, and source files",
-  "files": ["dist", "src"],
+  "version": "2.0.0",
+  "description": "StampUI blocks, registry, and free block source files. Pro block sources are delivered by the licensed registry API, not this package.",
+  "files": [
+    "dist",
+    "src"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc -w",
-    "prepublishOnly": "tsc"
-  },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
     "lucide-react": "^0.475.0"
@@ -20,9 +19,15 @@
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/react": "^19.2.14",
+    "next": "16.2.5",
     "typescript": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "sync:pro": "node ../../scripts/sync-pro-sources.mjs"
   }
-}
+}

package/src/components/blocks/animated-counter.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface AnimatedCounterProps {
+  from?: number
+  to: number
+  duration?: number
+  decimals?: number
+  prefix?: string
+  suffix?: string
+  className?: string
+  onComplete?: () => void
+}
+
+export function AnimatedCounter({
+  from = 0,
+  to,
+  duration = 1500,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  className,
+  onComplete,
+}: AnimatedCounterProps) {
+  const [value, setValue] = React.useState(from)
+  const startTimeRef = React.useRef<number | null>(null)
+  const rafRef = React.useRef<number | null>(null)
+
+  React.useEffect(() => {
+    startTimeRef.current = null
+    const startValue = from
+
+    function easeOutExpo(t: number): number {
+      return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
+    }
+
+    function step(timestamp: number) {
+      if (startTimeRef.current === null) startTimeRef.current = timestamp
+      const elapsed = timestamp - startTimeRef.current
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = easeOutExpo(progress)
+      const current = startValue + (to - startValue) * eased
+      setValue(current)
+      if (progress < 1) {
+        rafRef.current = requestAnimationFrame(step)
+      } else {
+        setValue(to)
+        onComplete?.()
+      }
+    }
+
+    rafRef.current = requestAnimationFrame(step)
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+    }
+  }, [from, to, duration, decimals, onComplete])
+
+  const formatted = value.toLocaleString("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  })
+
+  return (
+    <span className={cx("tabular-nums", className)}>
+      {prefix}{formatted}{suffix}
+    </span>
+  )
+}

package/src/components/blocks/gradient-text.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface GradientTextProps {
+  children: React.ReactNode
+  colors?: string[]
+  speed?: number
+  animate?: boolean
+  as?: keyof React.JSX.IntrinsicElements
+  className?: string
+}
+
+export function GradientText({
+  children,
+  colors = ["#FAFAFA", "#71717A", "#FAFAFA"],
+  speed = 4,
+  animate = true,
+  as: Tag = "span" as keyof React.JSX.IntrinsicElements,
+  className,
+}: GradientTextProps) {
+  const style: React.CSSProperties = {
+    backgroundImage: `linear-gradient(90deg, ${colors.join(", ")}, ${colors[0]})`,
+    backgroundSize: "300% 100%",
+    ...(animate ? { animation: `gradient-pan ${speed}s linear infinite` } : {}),
+  }
+
+  const Component = Tag as React.ElementType
+
+  return (
+    <Component
+      className={cx("bg-clip-text text-transparent", className)}
+      style={style}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/components/blocks/grid-wave.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface GridWaveProps {
+  size?: number
+  className?: string
+}
+
+export function GridWave({ size = 64, className }: GridWaveProps) {
+  const count = 4
+  const spacing = 14
+  const r = 3
+  const start = (64 - (count - 1) * spacing) / 2
+
+  return (
+    <div className={cx("inline-flex items-center justify-center", className)}>
+      <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+        {Array.from({ length: count }, (_, row) =>
+          Array.from({ length: count }, (_, col) => {
+            const delay = ((row + col) * 0.14).toFixed(2)
+            return (
+              <circle
+                key={`${row}-${col}`}
+                cx={start + col * spacing}
+                cy={start + row * spacing}
+                r={r}
+                fill="currentColor"
+              >
+                <animate attributeName="opacity" values="0.12;1;0.12" dur="1.3s" begin={`${delay}s`} repeatCount="indefinite" />
+                <animate attributeName="r" values={`${r * 0.6};${r};${r * 0.6}`} dur="1.3s" begin={`${delay}s`} repeatCount="indefinite" />
+              </circle>
+            )
+          })
+        )}
+      </svg>
+    </div>
+  )
+}

package/src/components/blocks/loading-card.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface LoadingCardProps {
+  showAvatar?: boolean
+  lines?: number
+  showAction?: boolean
+  className?: string
+}
+
+const shimmerStyle: React.CSSProperties = {
+  background: "linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%)",
+  backgroundSize: "200% 100%",
+  animation: "shimmer 1.8s ease-in-out infinite",
+}
+
+function Bone({ className }: { className?: string }) {
+  return <div className={cx("rounded-md", className)} style={shimmerStyle} />
+}
+
+export function LoadingCard({
+  showAvatar = true,
+  lines = 3,
+  showAction = false,
+  className,
+}: LoadingCardProps) {
+  return (
+    <div className={cx("rounded-xl border border-border bg-card p-5 space-y-4", className)}>
+      {showAvatar && (
+        <div className="flex items-center gap-3">
+          <Bone className="h-10 w-10 rounded-full shrink-0" />
+          <div className="flex-1 space-y-2">
+            <Bone className="h-3 w-2/5" />
+            <Bone className="h-2.5 w-1/3" />
+          </div>
+        </div>
+      )}
+      <div className="space-y-2">
+        {Array.from({ length: lines }).map((_, i) => (
+          <Bone key={i} className={cx("h-2.5", i === lines - 1 ? "w-3/4" : "w-full")} />
+        ))}
+      </div>
+      {showAction && <Bone className="h-8 w-20 rounded-lg" />}
+    </div>
+  )
+}

package/src/components/blocks/loading-dots.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface LoadingDotsProps {
+  variant?: "bounce" | "pulse" | "bars"
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+const dotSizes = {
+  sm: "h-1.5 w-1.5",
+  md: "h-2 w-2",
+  lg: "h-3 w-3",
+}
+
+const barHeights = {
+  sm: "h-4",
+  md: "h-5",
+  lg: "h-7",
+}
+
+export function LoadingDots({
+  variant = "bounce",
+  size = "md",
+  className,
+}: LoadingDotsProps) {
+  if (variant === "bounce") {
+    return (
+      <div className={cx("flex items-center gap-1", className)}>
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className={cx("rounded-full bg-foreground animate-bounce", dotSizes[size])}
+            style={{ animationDelay: `${i * 0.15}s`, animationDuration: "0.8s" }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (variant === "pulse") {
+    return (
+      <div className={cx("flex items-center gap-1", className)}>
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className={cx("rounded-full bg-foreground animate-pulse", dotSizes[size])}
+            style={{ animationDelay: `${i * 0.2}s`, animationDuration: "1.2s" }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cx("flex items-center gap-1", className)}>
+      {[0, 1, 2, 3].map((i) => (
+        <div
+          key={i}
+          className={cx("w-1 rounded-sm bg-foreground origin-bottom animate-[bars_1s_ease-in-out_infinite]", barHeights[size])}
+          style={{ animationDelay: `${i * 0.12}s` }}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/blocks/orbit-trail.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface OrbitTrailProps {
+  size?: number
+  className?: string
+}
+
+export function OrbitTrail({ size = 64, className }: OrbitTrailProps) {
+  return (
+    <div className={cx("inline-flex items-center justify-center", className)}>
+      <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+        {/* inner orbit — fast, radius 10 */}
+        <circle cx="42" cy="32" r="3.5" fill="currentColor">
+          <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="0.85s" repeatCount="indefinite" />
+        </circle>
+        {/* mid orbit — medium, radius 16 */}
+        <circle cx="48" cy="32" r="2.8" fill="currentColor" opacity="0.7">
+          <animateTransform attributeName="transform" type="rotate" from="120 32 32" to="480 32 32" dur="1.4s" repeatCount="indefinite" />
+        </circle>
+        {/* outer orbit — slow, radius 22 */}
+        <circle cx="54" cy="32" r="2" fill="currentColor" opacity="0.45">
+          <animateTransform attributeName="transform" type="rotate" from="240 32 32" to="600 32 32" dur="2.1s" repeatCount="indefinite" />
+        </circle>
+      </svg>
+    </div>
+  )
+}

package/src/components/blocks/progress-ring.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface ProgressRingProps {
+  value?: number
+  max?: number
+  size?: number
+  strokeWidth?: number
+  showValue?: boolean
+  label?: string
+  className?: string
+}
+
+export function ProgressRing({
+  value = 0,
+  max = 100,
+  size = 64,
+  strokeWidth = 6,
+  showValue = true,
+  label,
+  className,
+}: ProgressRingProps) {
+  const [current, setCurrent] = React.useState(0)
+  React.useEffect(() => {
+    const id = setTimeout(() => setCurrent(value), 60)
+    return () => clearTimeout(id)
+  }, [value])
+
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const pct = Math.min(Math.max(current / max, 0), 1)
+  const offset = circumference - pct * circumference
+  const center = size / 2
+
+  return (
+    <div className={cx("relative inline-flex items-center justify-center", className)}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke="var(--surface-2)"
+          strokeWidth={strokeWidth}
+        />
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke="var(--foreground)"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${center} ${center})`}
+          style={{ transition: "stroke-dashoffset 600ms ease-out" }}
+        />
+      </svg>
+      {showValue && (
+        <span className="absolute text-xs font-medium tabular-nums">
+          {Math.round(pct * 100)}%
+        </span>
+      )}
+      {label && !showValue && (
+        <span className="absolute text-xs font-medium">{label}</span>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/registry-card.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import Link from "next/link"
 import { Terminal, ArrowRight } from "lucide-react"
 import { Badge } from "@/components/core/badge"
 import { cx } from "@/lib/cx"
@@ -40,7 +39,7 @@ export function RegistryCard({
       )}
       {...props}
     >
-      <Link href={`/blocks/${slug}`} className="block relative aspect-video w-full overflow-hidden border-b border-border bg-surface-2 outline-none focus-visible:ring-2 focus-visible:ring-border-strong">
+      <a href={`/blocks/${slug}`} className="block relative aspect-video w-full overflow-hidden border-b border-border bg-surface-2 outline-none focus-visible:ring-2 focus-visible:ring-border-strong">
         {previewPath ? (
           <img
             src={previewPath}
@@ -68,14 +67,14 @@ export function RegistryCard({
             </Badge>
           )}
         </div>
-      </Link>
+        </a>
 
       <div className="flex flex-1 flex-col p-4">
-        <Link href={`/blocks/${slug}`} className="outline-none focus-visible:underline">
+        <a href={`/blocks/${slug}`} className="outline-none focus-visible:underline">
           <h3 className="font-semibold text-sm leading-tight tracking-tight text-foreground group-hover:text-primary transition-colors">
             {title}
           </h3>
-        </Link>
+        </a>
         <p className="text-xs text-muted-foreground line-clamp-1 mt-1">
           {description}
         </p>
@@ -94,9 +93,9 @@ export function RegistryCard({
             </code>
             <CopyButton value={`pnpm dlx stampui add ${slug}`} className="h-5 w-5 opacity-0 group-hover/cmd:opacity-100 transition-opacity flex-shrink-0" />
           </div>
-          <Link href={`/blocks/${slug}`} className="text-xs font-medium text-foreground flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 ease-out translate-x-1 group-hover:translate-x-0 flex-shrink-0">
+          <a href={`/blocks/${slug}`} className="text-xs font-medium text-foreground flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 ease-out translate-x-1 group-hover:translate-x-0 flex-shrink-0">
             View <ArrowRight className="h-3 w-3" />
-          </Link>
+          </a>
         </div>
       </div>
     </div>

package/src/components/blocks/signal-arc.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface SignalArcProps {
+  size?: number
+  className?: string
+}
+
+export function SignalArc({ size = 64, className }: SignalArcProps) {
+  const rings = [
+    { r: 6, dur: "1.6s", begin: "0s" },
+    { r: 6, dur: "1.6s", begin: "0.4s" },
+    { r: 6, dur: "1.6s", begin: "0.8s" },
+    { r: 6, dur: "1.6s", begin: "1.2s" },
+  ]
+
+  return (
+    <div className={cx("inline-flex items-center justify-center", className)}>
+      <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
+        <circle cx="32" cy="32" r="3" fill="currentColor" />
+        {rings.map((ring, i) => (
+          <circle key={i} cx="32" cy="32" r={ring.r} stroke="currentColor" strokeWidth="1.5" fill="none">
+            <animate attributeName="r" values={`${ring.r};28`} dur={ring.dur} begin={ring.begin} repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.8 1" />
+            <animate attributeName="opacity" values="0.8;0" dur={ring.dur} begin={ring.begin} repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.8 1" />
+          </circle>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/blocks/typewriter-text.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface TypewriterTextProps {
+  words: string[]
+  typingSpeed?: number
+  deletingSpeed?: number
+  pauseDuration?: number
+  className?: string
+}
+
+type Phase = "typing" | "pausing" | "deleting"
+
+export function TypewriterText({
+  words,
+  typingSpeed = 80,
+  deletingSpeed = 40,
+  pauseDuration = 1800,
+  className,
+}: TypewriterTextProps) {
+  const [wordIndex, setWordIndex] = React.useState(0)
+  const [displayed, setDisplayed] = React.useState("")
+  const [phase, setPhase] = React.useState<Phase>("typing")
+
+  React.useEffect(() => {
+    const word = words[wordIndex]
+
+    if (phase === "typing") {
+      if (displayed.length < word.length) {
+        const t = setTimeout(() => setDisplayed(word.slice(0, displayed.length + 1)), typingSpeed)
+        return () => clearTimeout(t)
+      } else {
+        const t = setTimeout(() => setPhase("pausing"), typingSpeed)
+        return () => clearTimeout(t)
+      }
+    }
+
+    if (phase === "pausing") {
+      const t = setTimeout(() => setPhase("deleting"), pauseDuration)
+      return () => clearTimeout(t)
+    }
+
+    if (phase === "deleting") {
+      if (displayed.length > 0) {
+        const t = setTimeout(() => setDisplayed(displayed.slice(0, -1)), deletingSpeed)
+        return () => clearTimeout(t)
+      } else {
+        setWordIndex((i) => (i + 1) % words.length)
+        setPhase("typing")
+      }
+    }
+  }, [phase, displayed, wordIndex, words, typingSpeed, deletingSpeed, pauseDuration])
+
+  return (
+    <span className={cx(className)}>
+      {displayed}
+      <span className="inline-block w-0.5 h-[1em] bg-current animate-[blink_1s_step-end_infinite] align-text-bottom ml-0.5 rounded-sm" />
+    </span>
+  )
+}

package/src/components/core/alert-dialog.tsx

@@ -88,7 +88,7 @@ export const AlertDialogAction = React.forwardRef<
     ref={ref}
     className={cx(
       "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors outline-none",
-      "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-1 focus-visible:ring-border-strong ",
       className
     )}
     {...props}
@@ -104,7 +104,7 @@ export const AlertDialogCancel = React.forwardRef<
     ref={ref}
     className={cx(
       "inline-flex items-center justify-center rounded-lg border border-border px-4 py-2 text-sm font-medium transition-colors outline-none",
-      "bg-transparent text-foreground hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "bg-transparent text-foreground hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-border-strong ",
       className
     )}
     {...props}

package/src/components/core/avatar.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cx } from "@/lib/cx"
 
 const avatarStyles = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full",
+  "relative flex shrink-0 overflow-hidden",
   {
     variants: {
       size: {
@@ -16,8 +16,12 @@ const avatarStyles = cva(
         lg: "h-12 w-12 text-base",
         xl: "h-16 w-16 text-lg",
       },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-md",
+      },
     },
-    defaultVariants: { size: "md" },
+    defaultVariants: { size: "md", shape: "circle" },
   }
 )
 
@@ -28,10 +32,10 @@ export interface AvatarProps
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarProps
->(({ className, size, ...props }, ref) => (
+>(({ className, size, shape, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cx(avatarStyles({ size }), className)}
+    className={cx(avatarStyles({ size, shape }), className)}
     {...props}
   />
 ))

package/src/components/core/button.tsx

@@ -32,7 +32,7 @@ const buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "rounded-lg text-sm font-medium",
     "transition-all duration-[150ms] ease-out",
-    "outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "outline-none focus-visible:ring-1 focus-visible:ring-border-strong ",
     "disabled:pointer-events-none disabled:opacity-40",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   ],

package/src/components/core/checkbox.tsx

@@ -8,7 +8,7 @@ import { cx } from "@/lib/cx"
 const checkboxStyles = cva(
   [
     "peer shrink-0 rounded border transition-all outline-none",
-    "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "focus-visible:ring-1 focus-visible:ring-border-strong ",
     "disabled:cursor-not-allowed disabled:opacity-40",
     "data-[state=checked]:border-foreground data-[state=checked]:bg-foreground",
     "data-[state=indeterminate]:border-foreground data-[state=indeterminate]:bg-foreground",

package/src/components/core/combobox.tsx

@@ -57,7 +57,7 @@ export function Combobox({
           className={cx(
             "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none",
             "hover:border-border-strong transition-colors text-left",
-            "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+            "focus-visible:ring-1 focus-visible:ring-border-strong ",
             "disabled:cursor-not-allowed disabled:opacity-50",
             !selected && "text-muted-foreground",
             className

package/src/components/core/command.tsx

@@ -11,12 +11,15 @@ export interface CommandProps {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
+  className?: string
 }
 
-export function Command({ open, onOpenChange, children }: CommandProps) {
+export function Command({ open, onOpenChange, children, className }: CommandProps) {
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
-      {children}
+      <div className={className}>
+        {children}
+      </div>
     </RadixDialog.Root>
   )
 }
@@ -88,9 +91,9 @@ export function CommandList({ children, className }: { children: React.ReactNode
 
 // ── Empty ─────────────────────────────────────────────────────────────────────
 
-export function CommandEmpty({ children }: { children?: React.ReactNode }) {
+export function CommandEmpty({ children, className }: { children?: React.ReactNode; className?: string }) {
   return (
-    <div className="px-4 py-8 text-center text-sm text-muted-foreground">
+    <div className={cx("px-4 py-8 text-center text-sm text-muted-foreground", className)}>
       {children ?? "No results found."}
     </div>
   )