@stampui/blocks 1.1.0 → 2.0.0

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

@@ -1,42 +0,0 @@
-"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/core/carousel.tsx

@@ -1,170 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { cx } from "@/lib/cx"
-
-// ── Context ───────────────────────────────────────────────────────────────────
-
-interface CarouselContextValue {
-  current: number
-  count: number
-  setCount: (n: number) => void
-  canPrev: boolean
-  canNext: boolean
-  prev: () => void
-  next: () => void
-  goTo: (index: number) => void
-  loop: boolean
-}
-
-const CarouselContext = React.createContext<CarouselContextValue | null>(null)
-
-function useCarousel() {
-  const ctx = React.useContext(CarouselContext)
-  if (!ctx) throw new Error("Must be inside Carousel")
-  return ctx
-}
-
-// ── Root ──────────────────────────────────────────────────────────────────────
-
-export interface CarouselProps {
-  children: React.ReactNode
-  loop?: boolean
-  autoPlay?: number
-  className?: string
-}
-
-export function Carousel({ children, loop = false, autoPlay, className }: CarouselProps) {
-  const [current, setCurrent] = React.useState(0)
-  const [count, setCount] = React.useState(0)
-
-  const canPrev = loop || current > 0
-  const canNext = loop || current < count - 1
-
-  function prev() {
-    setCurrent((c) => loop ? (c - 1 + count) % count : Math.max(0, c - 1))
-  }
-  function next() {
-    setCurrent((c) => loop ? (c + 1) % count : Math.min(count - 1, c + 1))
-  }
-  function goTo(index: number) {
-    setCurrent(Math.max(0, Math.min(count - 1, index)))
-  }
-
-  React.useEffect(() => {
-    if (!autoPlay || count === 0) return
-    const t = setInterval(next, autoPlay)
-    return () => clearInterval(t)
-  }, [autoPlay, count, current])
-
-  return (
-    <CarouselContext.Provider value={{ current, count, setCount, canPrev, canNext, prev, next, goTo, loop }}>
-      <div className={cx("relative", className)} data-carousel>
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
-
-// ── Content ───────────────────────────────────────────────────────────────────
-
-export function CarouselContent({ children, className }: { children: React.ReactNode; className?: string }) {
-  const { current, setCount } = useCarousel()
-  const items = React.Children.toArray(children)
-
-  React.useEffect(() => {
-    setCount(items.length)
-  }, [items.length])
-
-  return (
-    <div className={cx("overflow-hidden", className)}>
-      <div
-        data-carousel-content
-        className="flex transition-transform duration-300 ease-in-out"
-        style={{ transform: `translateX(-${current * 100}%)` }}
-      >
-        {items.map((child, i) => (
-          <div key={i} className="w-full shrink-0">
-            {child}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// ── Item ──────────────────────────────────────────────────────────────────────
-
-export function CarouselItem({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <div className={cx("w-full", className)}>{children}</div>
-}
-
-// ── Controls ──────────────────────────────────────────────────────────────────
-
-export function CarouselPrevious({ className }: { className?: string }) {
-  const { prev, canPrev } = useCarousel()
-  return (
-    <button
-      onClick={prev}
-      disabled={!canPrev}
-      className={cx(
-        "flex h-8 w-8 items-center justify-center rounded-full border border-border bg-card shadow-sm transition-colors",
-        "hover:bg-surface-2 disabled:opacity-40 disabled:pointer-events-none",
-        className
-      )}
-    >
-      <ChevronLeft className="h-4 w-4" />
-      <span className="sr-only">Previous</span>
-    </button>
-  )
-}
-
-export function CarouselNext({ className }: { className?: string }) {
-  const { next, canNext } = useCarousel()
-  return (
-    <button
-      onClick={next}
-      disabled={!canNext}
-      className={cx(
-        "flex h-8 w-8 items-center justify-center rounded-full border border-border bg-card shadow-sm transition-colors",
-        "hover:bg-surface-2 disabled:opacity-40 disabled:pointer-events-none",
-        className
-      )}
-    >
-      <ChevronRight className="h-4 w-4" />
-      <span className="sr-only">Next</span>
-    </button>
-  )
-}
-
-// ── Dots ──────────────────────────────────────────────────────────────────────
-
-export function CarouselDots({ className }: { className?: string }) {
-  const { current, count, goTo } = useCarousel()
-  return (
-    <div className={cx("flex items-center gap-1.5", className)}>
-      {Array.from({ length: count }).map((_, i) => (
-        <button
-          key={i}
-          onClick={() => goTo(i)}
-          className={cx(
-            "h-1.5 rounded-full transition-all duration-200",
-            i === current ? "w-4 bg-foreground" : "w-1.5 bg-border-strong hover:bg-muted-foreground"
-          )}
-        />
-      ))}
-    </div>
-  )
-}
-
-// ── Counter ───────────────────────────────────────────────────────────────────
-
-export function CarouselCounter({ className }: { className?: string }) {
-  const { current, count } = useCarousel()
-  return (
-    <span className={cx("text-xs text-muted-foreground", className)}>
-      {current + 1} / {count}
-    </span>
-  )
-}

package/src/components/core/chart.tsx

@@ -1,377 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  LineChart as ReLineChart,
-  Line,
-  BarChart as ReBarChart,
-  Bar,
-  AreaChart as ReAreaChart,
-  Area,
-  PieChart as RePieChart,
-  Pie,
-  Cell,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts"
-import { cx } from "@/lib/cx"
-
-// ── Design tokens ─────────────────────────────────────────────────────────────
-
-export const CHART_COLORS = [
-  "var(--color-foreground)",
-  "var(--color-muted-foreground)",
-  "var(--color-border-strong)",
-  "var(--color-border)",
-  "var(--color-surface-2)",
-] as const
-
-// Explicit palette for charts that need distinct hues
-export const PALETTE = [
-  "#18181b", // zinc-900
-  "#71717a", // zinc-500
-  "#a1a1aa", // zinc-400
-  "#d4d4d8", // zinc-300
-  "#e4e4e7", // zinc-200
-]
-
-// ── Tooltip ───────────────────────────────────────────────────────────────────
-
-interface CustomTooltipProps {
-  active?: boolean
-  payload?: Array<{ name: string; value: number; color: string }>
-  label?: string
-}
-
-function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
-  if (!active || !payload?.length) return null
-  return (
-    <div className="rounded-xl border border-border bg-card px-3 py-2.5 shadow-lg text-xs">
-      {label && <p className="mb-1.5 font-medium text-foreground">{label}</p>}
-      {payload.map((entry, i) => (
-        <div key={i} className="flex items-center gap-2 text-muted-foreground">
-          <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ backgroundColor: entry.color }} />
-          <span>{entry.name}:</span>
-          <span className="font-medium text-foreground">{entry.value}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// ── Shared axis props ─────────────────────────────────────────────────────────
-
-const AXIS_STYLE = {
-  tick: { fontSize: 11, fill: "var(--color-muted-foreground)" },
-  axisLine: false as const,
-  tickLine: false as const,
-}
-
-// ── LineChart ─────────────────────────────────────────────────────────────────
-
-export interface LineChartSeries {
-  key: string
-  label?: string
-  color?: string
-}
-
-export interface LineChartProps {
-  data: Record<string, unknown>[]
-  xKey: string
-  series: LineChartSeries[]
-  height?: number
-  curved?: boolean
-  showDots?: boolean
-  showGrid?: boolean
-  showLegend?: boolean
-  className?: string
-}
-
-export function LineChart({
-  data,
-  xKey,
-  series,
-  height = 280,
-  curved = true,
-  showDots = false,
-  showGrid = true,
-  showLegend = false,
-  className,
-}: LineChartProps) {
-  return (
-    <div className={cx("w-full", className)} style={{ height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ReLineChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-          {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" vertical={false} />}
-          <XAxis dataKey={xKey} {...AXIS_STYLE} />
-          <YAxis {...AXIS_STYLE} />
-          <Tooltip content={<CustomTooltip />} />
-          {showLegend && <Legend wrapperStyle={{ fontSize: 11, color: "var(--color-muted-foreground)" }} />}
-          {series.map((s, i) => (
-            <Line
-              key={s.key}
-              type={curved ? "monotone" : "linear"}
-              dataKey={s.key}
-              name={s.label ?? s.key}
-              stroke={s.color ?? PALETTE[i % PALETTE.length]}
-              strokeWidth={2}
-              dot={showDots ? { r: 3, fill: s.color ?? PALETTE[i % PALETTE.length], strokeWidth: 0 } : false}
-              activeDot={{ r: 4, strokeWidth: 0 }}
-            />
-          ))}
-        </ReLineChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}
-
-// ── BarChart ──────────────────────────────────────────────────────────────────
-
-export interface BarChartSeries {
-  key: string
-  label?: string
-  color?: string
-}
-
-export interface BarChartProps {
-  data: Record<string, unknown>[]
-  xKey: string
-  series: BarChartSeries[]
-  height?: number
-  horizontal?: boolean
-  stacked?: boolean
-  showGrid?: boolean
-  showLegend?: boolean
-  radius?: number
-  className?: string
-}
-
-export function BarChart({
-  data,
-  xKey,
-  series,
-  height = 280,
-  horizontal = false,
-  stacked = false,
-  showGrid = true,
-  showLegend = false,
-  radius = 4,
-  className,
-}: BarChartProps) {
-  return (
-    <div className={cx("w-full", className)} style={{ height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ReBarChart
-          data={data}
-          layout={horizontal ? "vertical" : "horizontal"}
-          margin={{ top: 4, right: 4, left: horizontal ? 8 : -20, bottom: 0 }}
-        >
-          {showGrid && (
-            <CartesianGrid
-              strokeDasharray="3 3"
-              stroke="var(--color-border)"
-              vertical={!horizontal}
-              horizontal={horizontal}
-            />
-          )}
-          {horizontal ? (
-            <>
-              <XAxis type="number" {...AXIS_STYLE} />
-              <YAxis type="category" dataKey={xKey} {...AXIS_STYLE} width={60} />
-            </>
-          ) : (
-            <>
-              <XAxis dataKey={xKey} {...AXIS_STYLE} />
-              <YAxis {...AXIS_STYLE} />
-            </>
-          )}
-          <Tooltip content={<CustomTooltip />} />
-          {showLegend && <Legend wrapperStyle={{ fontSize: 11, color: "var(--color-muted-foreground)" }} />}
-          {series.map((s, i) => (
-            <Bar
-              key={s.key}
-              dataKey={s.key}
-              name={s.label ?? s.key}
-              fill={s.color ?? PALETTE[i % PALETTE.length]}
-              stackId={stacked ? "stack" : undefined}
-              radius={i === series.length - 1 || !stacked ? radius : 0}
-            />
-          ))}
-        </ReBarChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}
-
-// ── AreaChart ─────────────────────────────────────────────────────────────────
-
-export interface AreaChartSeries {
-  key: string
-  label?: string
-  color?: string
-}
-
-export interface AreaChartProps {
-  data: Record<string, unknown>[]
-  xKey: string
-  series: AreaChartSeries[]
-  height?: number
-  curved?: boolean
-  stacked?: boolean
-  showGrid?: boolean
-  showLegend?: boolean
-  className?: string
-}
-
-export function AreaChart({
-  data,
-  xKey,
-  series,
-  height = 280,
-  curved = true,
-  stacked = false,
-  showGrid = true,
-  showLegend = false,
-  className,
-}: AreaChartProps) {
-  return (
-    <div className={cx("w-full", className)} style={{ height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ReAreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-          <defs>
-            {series.map((s, i) => {
-              const color = s.color ?? PALETTE[i % PALETTE.length]
-              return (
-                <linearGradient key={s.key} id={`grad-${s.key}`} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={color} stopOpacity={0.15} />
-                  <stop offset="95%" stopColor={color} stopOpacity={0} />
-                </linearGradient>
-              )
-            })}
-          </defs>
-          {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" vertical={false} />}
-          <XAxis dataKey={xKey} {...AXIS_STYLE} />
-          <YAxis {...AXIS_STYLE} />
-          <Tooltip content={<CustomTooltip />} />
-          {showLegend && <Legend wrapperStyle={{ fontSize: 11, color: "var(--color-muted-foreground)" }} />}
-          {series.map((s, i) => {
-            const color = s.color ?? PALETTE[i % PALETTE.length]
-            return (
-              <Area
-                key={s.key}
-                type={curved ? "monotone" : "linear"}
-                dataKey={s.key}
-                name={s.label ?? s.key}
-                stroke={color}
-                strokeWidth={2}
-                fill={`url(#grad-${s.key})`}
-                stackId={stacked ? "stack" : undefined}
-              />
-            )
-          })}
-        </ReAreaChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}
-
-// ── PieChart ──────────────────────────────────────────────────────────────────
-
-export interface PieSlice {
-  name: string
-  value: number
-  color?: string
-}
-
-export interface PieChartProps {
-  data: PieSlice[]
-  height?: number
-  donut?: boolean
-  showLabels?: boolean
-  showLegend?: boolean
-  className?: string
-}
-
-interface PieLabelProps {
-  cx?: number
-  cy?: number
-  midAngle?: number
-  innerRadius?: number
-  outerRadius?: number
-  name?: string
-  percent?: number
-}
-
-function PieLabel({ cx, cy, midAngle, innerRadius, outerRadius, name, percent }: PieLabelProps) {
-  if (
-    cx == null ||
-    cy == null ||
-    midAngle == null ||
-    innerRadius == null ||
-    outerRadius == null ||
-    percent == null ||
-    percent < 0.05
-  ) {
-    return null
-  }
-
-  const RADIAN = Math.PI / 180
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5
-  const x = cx + radius * Math.cos(-midAngle * RADIAN)
-  const y = cy + radius * Math.sin(-midAngle * RADIAN)
-  return (
-    <text x={x} y={y} fill="var(--color-background)" textAnchor="middle" dominantBaseline="central" fontSize={11} fontWeight={500}>
-      {name}
-    </text>
-  )
-}
-
-export function PieChart({
-  data,
-  height = 280,
-  donut = false,
-  showLabels = false,
-  showLegend = true,
-  className,
-}: PieChartProps) {
-  const outerRadius = 100
-  const innerRadius = donut ? 60 : 0
-
-  return (
-    <div className={cx("w-full", className)} style={{ height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <RePieChart>
-          <Pie
-            data={data}
-            dataKey="value"
-            nameKey="name"
-            cx="50%"
-            cy="50%"
-            outerRadius={outerRadius}
-            innerRadius={innerRadius}
-            strokeWidth={2}
-            stroke="var(--color-card)"
-            labelLine={false}
-            label={showLabels ? PieLabel : undefined}
-          >
-            {data.map((entry, i) => (
-              <Cell key={i} fill={entry.color ?? PALETTE[i % PALETTE.length]} />
-            ))}
-          </Pie>
-          <Tooltip content={<CustomTooltip />} />
-          {showLegend && (
-            <Legend
-              wrapperStyle={{ fontSize: 11, color: "var(--color-muted-foreground)" }}
-              iconType="circle"
-              iconSize={8}
-            />
-          )}
-        </RePieChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}