@stampui/blocks 1.0.0

package/src/components/blocks/stats-strip.tsx

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { Separator } from "@/components/core/separator"
+import { cx } from "@/lib/cx"
+
+export interface Stat {
+  value: number
+  suffix?: string
+  prefix?: string
+  label: string
+  description?: string
+}
+
+export interface StatsStripProps {
+  stats?: Stat[]
+  layout?: "strip" | "grid"
+  className?: string
+}
+
+const defaultStats: Stat[] = [
+  { value: 65, suffix: "+", label: "Components", description: "Accessible UI primitives" },
+  { value: 8, label: "Page Blocks", description: "Production-ready layouts" },
+  { value: 10, label: "Minute Setup", description: "From zero to shipped" },
+  { value: 0, label: "Runtime Deps", description: "Code you fully own" },
+]
+
+function AnimatedValue({ value, prefix, suffix }: { value: number; prefix?: string; suffix?: string }) {
+  const [displayed, setDisplayed] = React.useState(0)
+  const ref = React.useRef<HTMLSpanElement>(null)
+  const started = React.useRef(false)
+
+  React.useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !started.current) {
+        started.current = true
+        const duration = 1200
+        const start = performance.now()
+        const tick = (now: number) => {
+          const progress = Math.min((now - start) / duration, 1)
+          const eased = 1 - Math.pow(1 - progress, 3)
+          setDisplayed(Math.round(eased * value))
+          if (progress < 1) requestAnimationFrame(tick)
+        }
+        requestAnimationFrame(tick)
+      }
+    }, { threshold: 0.5 })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [value])
+
+  return (
+    <span ref={ref} className="tabular-nums">
+      {prefix}{displayed}{suffix}
+    </span>
+  )
+}
+
+export function StatsStrip({ stats = defaultStats, layout = "strip", className }: StatsStripProps) {
+  if (layout === "strip") {
+    return (
+      <section className={cx("w-full border-y border-border bg-surface-2/30 py-10 px-6", className)}>
+        <div className="mx-auto max-w-5xl">
+          <div className="flex flex-wrap justify-center gap-0 divide-x divide-border">
+            {stats.map((stat, i) => (
+              <div key={i} className="flex flex-col items-center px-10 py-2">
+                <span className="text-3xl font-bold tracking-tight text-foreground">
+                  <AnimatedValue value={stat.value} prefix={stat.prefix} suffix={stat.suffix} />
+                </span>
+                <span className="mt-1 text-sm font-medium text-foreground">{stat.label}</span>
+                {stat.description && (
+                  <span className="text-xs text-muted-foreground">{stat.description}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section className={cx("w-full py-16 px-6", className)}>
+      <div className="mx-auto max-w-5xl grid grid-cols-2 sm:grid-cols-4 gap-8">
+        {stats.map((stat, i) => (
+          <div key={i} className="flex flex-col">
+            <span className="text-4xl font-bold tracking-tight text-foreground">
+              <AnimatedValue value={stat.value} prefix={stat.prefix} suffix={stat.suffix} />
+            </span>
+            <Separator className="my-3 w-8" />
+            <span className="text-sm font-medium text-foreground">{stat.label}</span>
+            {stat.description && (
+              <span className="text-xs text-muted-foreground mt-0.5">{stat.description}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/token-stream.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface TokenStreamProps extends React.HTMLAttributes<HTMLDivElement> {
+  content: string
+  speed?: number
+  onComplete?: () => void
+}
+
+export function TokenStream({
+  content,
+  speed = 15,
+  onComplete,
+  className,
+  ...props
+}: TokenStreamProps) {
+  const [displayedContent, setDisplayedContent] = React.useState("")
+  const [currentIndex, setCurrentIndex] = React.useState(0)
+
+  React.useEffect(() => {
+    if (currentIndex < content.length) {
+      const timeout = setTimeout(() => {
+        setDisplayedContent((prev) => prev + content[currentIndex])
+        setCurrentIndex((prev) => prev + 1)
+      }, speed)
+      return () => clearTimeout(timeout)
+    } else if (onComplete) {
+      onComplete()
+    }
+  }, [content, currentIndex, speed, onComplete])
+
+  return (
+    <div className={cx("relative inline-block", className)} {...props}>
+      <span className="whitespace-pre-wrap">{displayedContent}</span>
+      {currentIndex < content.length && (
+        <span className="ml-1 inline-block h-4 w-1 animate-pulse bg-primary align-middle" />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+import { Zap, Database, Users, ArrowUpRight } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+interface UsageMetric {
+  label: string
+  used: number
+  limit: number
+  unit?: string
+  icon?: React.ReactNode
+}
+
+const DEFAULT_METRICS: UsageMetric[] = [
+  {
+    label: "API Requests",
+    used: 48200,
+    limit: 100000,
+    unit: "req",
+    icon: <Zap className="h-3.5 w-3.5" />,
+  },
+  {
+    label: "Storage",
+    used: 2.4,
+    limit: 10,
+    unit: "GB",
+    icon: <Database className="h-3.5 w-3.5" />,
+  },
+  {
+    label: "Seats",
+    used: 3,
+    limit: 5,
+    unit: "users",
+    icon: <Users className="h-3.5 w-3.5" />,
+  },
+]
+
+interface UsageCardProps {
+  plan?: string
+  renewsAt?: string
+  metrics?: UsageMetric[]
+  onUpgrade?: () => void
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return String(n)
+}
+
+function UsageBar({ pct }: { pct: number }) {
+  const clamped = Math.min(pct, 100)
+  return (
+    <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-3">
+      <div
+        className={cx(
+          "h-full rounded-full transition-all",
+          clamped >= 90 ? "bg-danger" : clamped >= 70 ? "bg-warning" : "bg-primary"
+        )}
+        style={{ width: `${clamped}%` }}
+      />
+    </div>
+  )
+}
+
+export function UsageCard({
+  plan = "Pro",
+  renewsAt,
+  metrics = DEFAULT_METRICS,
+  onUpgrade,
+}: UsageCardProps) {
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-border bg-card p-6">
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-1">Current Plan</p>
+          <p className="text-lg font-semibold">{plan}</p>
+          {renewsAt && (
+            <p className="text-xs text-muted-foreground mt-0.5">Renews {renewsAt}</p>
+          )}
+        </div>
+        {onUpgrade && (
+          <button
+            type="button"
+            onClick={onUpgrade}
+            className="inline-flex items-center gap-1 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium hover:bg-surface-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong"
+          >
+            Upgrade
+            <ArrowUpRight className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+
+      <div className="space-y-4">
+        {metrics.map((m) => {
+          const pct = (m.used / m.limit) * 100
+          return (
+            <div key={m.label}>
+              <div className="flex items-center justify-between mb-1.5">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  {m.icon}
+                  <span>{m.label}</span>
+                </div>
+                <span className="text-xs font-mono text-foreground">
+                  {formatNumber(m.used)}{m.unit && ` ${m.unit}`}
+                  <span className="text-muted-foreground"> / {formatNumber(m.limit)}{m.unit && ` ${m.unit}`}</span>
+                </span>
+              </div>
+              <UsageBar pct={pct} />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/core/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as RadixAccordion from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export const Accordion = RadixAccordion.Root
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof RadixAccordion.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixAccordion.Item>
+>(({ className, ...props }, ref) => (
+  <RadixAccordion.Item
+    ref={ref}
+    className={cx(
+      "overflow-hidden rounded-xl border border-border/50 bg-card mb-3 last:mb-0 transition-colors data-[state=open]:border-primary/30",
+      className
+    )}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof RadixAccordion.Trigger>,
+  React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <RadixAccordion.Header className="flex">
+    <RadixAccordion.Trigger
+      ref={ref}
+      className={cx(
+        "flex flex-1 items-center justify-between px-5 py-4 text-left font-medium text-foreground outline-none transition-all hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-1 focus-visible:ring-border-strong",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-300 ease-in-out" />
+    </RadixAccordion.Trigger>
+  </RadixAccordion.Header>
+))
+AccordionTrigger.displayName = "AccordionTrigger"
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof RadixAccordion.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixAccordion.Content>
+>(({ className, children, ...props }, ref) => (
+  <RadixAccordion.Content
+    ref={ref}
+    className="overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cx("px-5 pb-4 pt-1", className)}>{children}</div>
+  </RadixAccordion.Content>
+))
+AccordionContent.displayName = "AccordionContent"

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

@@ -0,0 +1,113 @@
+"use client"
+
+import * as React from "react"
+import * as RadixAlertDialog from "@radix-ui/react-alert-dialog"
+import { cx } from "@/lib/cx"
+
+export const AlertDialog = RadixAlertDialog.Root
+export const AlertDialogTrigger = RadixAlertDialog.Trigger
+export const AlertDialogPortal = RadixAlertDialog.Portal
+
+export const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof RadixAlertDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Overlay>
+>(({ className, ...props }, ref) => (
+  <RadixAlertDialog.Overlay
+    ref={ref}
+    className={cx(
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogOverlay.displayName = "AlertDialogOverlay"
+
+export const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof RadixAlertDialog.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Content>
+>(({ className, ...props }, ref) => (
+  <RadixAlertDialog.Portal>
+    <AlertDialogOverlay />
+    <RadixAlertDialog.Content
+      ref={ref}
+      className={cx(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2",
+        "rounded-2xl border border-border bg-card p-6 shadow-xl outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  </RadixAlertDialog.Portal>
+))
+AlertDialogContent.displayName = "AlertDialogContent"
+
+export const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex flex-col gap-1.5 mb-4", className)} {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+export const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex items-center justify-end gap-2 mt-6", className)} {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+export const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof RadixAlertDialog.Title>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Title>
+>(({ className, ...props }, ref) => (
+  <RadixAlertDialog.Title
+    ref={ref}
+    className={cx("text-base font-semibold leading-tight text-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = "AlertDialogTitle"
+
+export const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof RadixAlertDialog.Description>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Description>
+>(({ className, ...props }, ref) => (
+  <RadixAlertDialog.Description
+    ref={ref}
+    className={cx("text-sm text-muted-foreground leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = "AlertDialogDescription"
+
+export const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof RadixAlertDialog.Action>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Action>
+>(({ className, ...props }, ref) => (
+  <RadixAlertDialog.Action
+    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",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = "AlertDialogAction"
+
+export const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof RadixAlertDialog.Cancel>,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Cancel>
+>(({ className, ...props }, ref) => (
+  <RadixAlertDialog.Cancel
+    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",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = "AlertDialogCancel"

package/src/components/core/alert.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const alertVariants = cva(
+  "relative w-full rounded-xl border px-4 py-3.5 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3.5 [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-2 border-border text-foreground",
+        info: "bg-surface-2 border-border text-foreground",
+        warning: "bg-surface-2 border-border text-foreground",
+        success: "bg-surface-2 border-border text-foreground",
+        danger: "bg-surface-2 border-danger/30 text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} role="alert" className={cx(alertVariants({ variant }), className)} {...props} />
+  )
+)
+Alert.displayName = "Alert"
+
+export const AlertTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5 ref={ref} className={cx("font-medium leading-none tracking-tight mb-1", className)} {...props} />
+))
+AlertTitle.displayName = "AlertTitle"
+
+export const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cx("text-sm text-muted-foreground leading-relaxed", className)} {...props} />
+))
+AlertDescription.displayName = "AlertDescription"

package/src/components/core/animated-number.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+type Format = "default" | "compact" | "currency" | "percent"
+
+export interface AnimatedNumberProps {
+  value: number
+  duration?: number
+  format?: Format
+  currency?: string
+  decimals?: number
+  prefix?: string
+  suffix?: string
+  className?: string
+}
+
+function formatValue(n: number, format: Format, currency: string, decimals: number, prefix: string, suffix: string): string {
+  let out: string
+  if (format === "compact") {
+    if (n >= 1_000_000) out = (n / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M"
+    else if (n >= 1_000) out = (n / 1_000).toFixed(1).replace(/\.0$/, "") + "K"
+    else out = Math.round(n).toString()
+  } else if (format === "currency") {
+    out = new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: decimals }).format(n)
+  } else if (format === "percent") {
+    out = n.toFixed(decimals) + "%"
+  } else {
+    out = n.toFixed(decimals)
+  }
+  return prefix + out + suffix
+}
+
+export function AnimatedNumber({
+  value,
+  duration = 1400,
+  format = "default",
+  currency = "USD",
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  className,
+}: AnimatedNumberProps) {
+  const [current, setCurrent] = React.useState(0)
+  const ref = React.useRef<HTMLSpanElement>(null)
+  const triggered = React.useRef(false)
+
+  React.useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !triggered.current) {
+          triggered.current = true
+          const startTime = performance.now()
+          const tick = (now: number) => {
+            const t = Math.min((now - startTime) / duration, 1)
+            const eased = 1 - Math.pow(1 - t, 4)
+            setCurrent(eased * value)
+            if (t < 1) requestAnimationFrame(tick)
+          }
+          requestAnimationFrame(tick)
+        }
+      },
+      { threshold: 0.4 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [value, duration])
+
+  return (
+    <span ref={ref} className={cx("tabular-nums", className)}>
+      {formatValue(current, format, currency, decimals, prefix, suffix)}
+    </span>
+  )
+}

package/src/components/core/aspect-ratio.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+  ratio?: number
+}
+
+export const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
+  ({ ratio = 16 / 9, className, children, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      style={{ aspectRatio: String(ratio), ...style }}
+      className={cx("w-full overflow-hidden", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+AspectRatio.displayName = "AspectRatio"

package/src/components/core/avatar-stack.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface AvatarStackUser {
+  name: string
+  src?: string
+}
+
+export interface AvatarStackProps {
+  users: AvatarStackUser[]
+  max?: number
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+const sizes = {
+  sm: { ring: "h-6 w-6 text-[9px] border-[1.5px]", offset: "-ml-1.5" },
+  md: { ring: "h-8 w-8 text-[11px] border-2", offset: "-ml-2" },
+  lg: { ring: "h-10 w-10 text-xs border-2", offset: "-ml-2.5" },
+}
+
+export function AvatarStack({ users, max = 4, size = "md", className }: AvatarStackProps) {
+  const visible = users.slice(0, max)
+  const overflow = users.length - max
+  const { ring, offset } = sizes[size]
+
+  return (
+    <div className={cx("flex items-center", className)}>
+      {visible.map((user, i) => (
+        <div
+          key={i}
+          title={user.name}
+          className={cx(
+            "relative inline-flex shrink-0 items-center justify-center rounded-full border-background bg-surface-2 font-medium text-foreground overflow-hidden",
+            ring,
+            i > 0 && offset
+          )}
+          style={{ zIndex: visible.length - i }}
+        >
+          {user.src ? (
+            <img src={user.src} alt={user.name} className="h-full w-full object-cover" />
+          ) : (
+            <span className="select-none">{user.name.charAt(0).toUpperCase()}</span>
+          )}
+        </div>
+      ))}
+      {overflow > 0 && (
+        <div
+          className={cx(
+            "relative inline-flex shrink-0 items-center justify-center rounded-full border-background bg-surface-3 font-medium text-muted-foreground",
+            ring,
+            offset
+          )}
+          title={`${overflow} more`}
+        >
+          +{overflow}
+        </div>
+      )}
+    </div>
+  )
+}