@stampui/blocks 1.0.0

package/src/components/core/switch.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const switchStyles = cva(
+  [
+    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+    "transition-all duration-200 ease-out outline-none",
+    "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-40",
+    "data-[state=unchecked]:bg-surface-3",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-7",
+        md: "h-5 w-9",
+        lg: "h-6 w-11",
+      },
+      color: {
+        default: "data-[state=checked]:bg-foreground",
+        success: "data-[state=checked]:bg-green-600",
+        danger:  "data-[state=checked]:bg-red-600",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      color: "default",
+    },
+  }
+)
+
+const thumbStyles = cva(
+  [
+    "pointer-events-none block rounded-full bg-background shadow-sm ring-0",
+    "transition-transform duration-200 ease-out",
+    "data-[state=unchecked]:translate-x-0",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3 data-[state=checked]:translate-x-3",
+        md: "h-4 w-4 data-[state=checked]:translate-x-4",
+        lg: "h-5 w-5 data-[state=checked]:translate-x-5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+export interface SwitchProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "color">,
+    VariantProps<typeof switchStyles> {}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size, color, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cx(switchStyles({ size, color }), className)}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb className={thumbStyles({ size })} />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = "Switch"
+
+export { Switch }

package/src/components/core/table.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export function Table({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"table">) {
+  return (
+    <div className="w-full overflow-x-auto rounded-xl border border-border">
+      <table
+        className={cx("w-full text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"thead">) {
+  return (
+    <thead
+      className={cx("bg-surface-2 border-b border-border", className)}
+      {...props}
+    />
+  )
+}
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"tbody">) {
+  return <tbody className={cx("divide-y divide-border", className)} {...props} />
+}
+
+export function TableFooter({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"tfoot">) {
+  return (
+    <tfoot
+      className={cx(
+        "border-t border-border bg-surface-2 font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TableRow({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"tr">) {
+  return (
+    <tr
+      className={cx("transition-colors hover:bg-surface-2/60", className)}
+      {...props}
+    />
+  )
+}
+
+export function TableHead({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"th">) {
+  return (
+    <th
+      className={cx(
+        "px-4 py-3 text-left text-xs font-medium text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TableCell({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"td">) {
+  return (
+    <td
+      className={cx("px-4 py-3 text-sm text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export function TableCaption({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"caption">) {
+  return (
+    <caption
+      className={cx(
+        "mt-3 text-xs text-muted-foreground text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/core/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as RadixTabs from "@radix-ui/react-tabs"
+import { cx } from "@/lib/cx"
+
+export const Tabs = RadixTabs.Root
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof RadixTabs.List>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.List>
+>(({ className, ...props }, ref) => (
+  <RadixTabs.List
+    ref={ref}
+    className={cx(
+      "flex flex-wrap items-center gap-2 bg-transparent",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = "TabsList"
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof RadixTabs.Trigger>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>
+>(({ className, ...props }, ref) => (
+  <RadixTabs.Trigger
+    ref={ref}
+    className={cx(
+      "relative flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-all outline-none border border-transparent",
+      "text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+      "data-[state=active]:bg-surface-raised data-[state=active]:text-foreground data-[state=active]:border-border-strong data-[state=active]:font-medium",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = "TabsTrigger"
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof RadixTabs.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
+>(({ className, ...props }, ref) => (
+  <RadixTabs.Content
+    ref={ref}
+    className={cx(
+      "mt-4 outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = "TabsContent"

package/src/components/core/tag-input.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface TagInputProps {
+  value?: string[]
+  onChange?: (tags: string[]) => void
+  placeholder?: string
+  max?: number
+  disabled?: boolean
+  className?: string
+}
+
+export function TagInput({
+  value,
+  onChange,
+  placeholder = "Add tag…",
+  max,
+  disabled = false,
+  className,
+}: TagInputProps) {
+  const [tags, setTags] = React.useState<string[]>(value ?? [])
+  const [input, setInput] = React.useState("")
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const update = (next: string[]) => {
+    setTags(next)
+    onChange?.(next)
+  }
+
+  const add = () => {
+    const trimmed = input.trim()
+    if (!trimmed || tags.includes(trimmed) || (max !== undefined && tags.length >= max)) return
+    update([...tags, trimmed])
+    setInput("")
+  }
+
+  const remove = (index: number) => {
+    update(tags.filter((_, i) => i !== index))
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault()
+      add()
+    } else if (e.key === "Backspace" && !input && tags.length > 0) {
+      remove(tags.length - 1)
+    }
+  }
+
+  return (
+    <div
+      className={cx(
+        "flex flex-wrap gap-1.5 min-h-10 w-full rounded-lg border border-border bg-input px-3 py-2 text-sm transition-colors",
+        "focus-within:border-border-strong",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+      onClick={() => inputRef.current?.focus()}
+    >
+      {tags.map((tag, i) => (
+        <span
+          key={i}
+          className="inline-flex items-center gap-1 rounded-md bg-surface-2 border border-border px-2 py-0.5 text-xs font-medium text-foreground"
+        >
+          {tag}
+          {!disabled && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); remove(i) }}
+              className="text-muted-foreground hover:text-foreground transition-colors"
+              aria-label={`Remove ${tag}`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </span>
+      ))}
+      <input
+        ref={inputRef}
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={onKeyDown}
+        onBlur={add}
+        placeholder={tags.length === 0 ? placeholder : ""}
+        disabled={disabled || (max !== undefined && tags.length >= max)}
+        className="flex-1 min-w-20 bg-transparent outline-none placeholder:text-muted-foreground/50 text-foreground disabled:cursor-not-allowed"
+      />
+    </div>
+  )
+}

package/src/components/core/textarea.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const textareaStyles = cva(
+  "flex w-full rounded-lg text-sm transition-all outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+  {
+    variants: {
+      variant: {
+        surface:
+          "bg-input border border-border px-3 py-2.5 text-foreground placeholder:text-muted-foreground focus:border-border-strong focus:bg-surface-3",
+        minimal:
+          "bg-transparent border-b border-border px-0 py-2 text-foreground placeholder:text-muted-foreground/50 rounded-none focus:outline-none focus:border-border-strong",
+      },
+      resize: {
+        none:     "resize-none",
+        vertical: "resize-y",
+        both:     "resize",
+      },
+    },
+    defaultVariants: {
+      variant: "surface",
+      resize: "none",
+    },
+  }
+)
+
+export interface TextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "resize">,
+    VariantProps<typeof textareaStyles> {}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant, resize, rows = 4, ...props }, ref) => {
+    return (
+      <textarea
+        rows={rows}
+        className={cx(textareaStyles({ variant, resize }), className)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"

package/src/components/core/timeline.tsx

@@ -0,0 +1,81 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface TimelineItem {
+  title: string
+  description?: string
+  date?: string
+  icon?: React.ReactNode
+  dot?: "default" | "filled" | "outline" | "ring"
+  children?: React.ReactNode
+}
+
+export interface TimelineProps {
+  items: TimelineItem[]
+  className?: string
+}
+
+// ── Timeline ──────────────────────────────────────────────────────────────────
+
+export function Timeline({ items, className }: TimelineProps) {
+  return (
+    <div className={cx("relative", className)}>
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1
+        return (
+          <div key={i} className="flex gap-4">
+            {/* Left column: dot + connector */}
+            <div className="flex flex-col items-center">
+              <TimelineDot dot={item.dot} icon={item.icon} />
+              {!isLast && <div className="w-px flex-1 bg-border my-1" />}
+            </div>
+            {/* Content */}
+            <div className={cx("pb-7 min-w-0 flex-1", isLast && "pb-0")}>
+              <div className="flex items-baseline justify-between gap-3 mb-0.5">
+                <p className="text-sm font-medium text-foreground leading-snug">{item.title}</p>
+                {item.date && <span className="shrink-0 text-xs text-muted-foreground">{item.date}</span>}
+              </div>
+              {item.description && (
+                <p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
+              )}
+              {item.children && <div className="mt-2">{item.children}</div>}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ── Dot ───────────────────────────────────────────────────────────────────────
+
+function TimelineDot({ dot = "default", icon }: { dot?: TimelineItem["dot"]; icon?: React.ReactNode }) {
+  if (icon) {
+    return (
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border bg-surface-2 text-muted-foreground">
+        {icon}
+      </div>
+    )
+  }
+  return (
+    <div className={cx(
+      "mt-1.5 h-3 w-3 shrink-0 rounded-full transition-colors",
+      dot === "default" && "bg-border-strong",
+      dot === "filled" && "bg-foreground",
+      dot === "outline" && "border-2 border-foreground bg-transparent",
+      dot === "ring" && "border-2 border-foreground bg-card ring-4 ring-surface-2",
+    )} />
+  )
+}
+
+// ── Sub-exports for composing custom content ──────────────────────────────────
+
+export function TimelineCard({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cx("rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm", className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/core/toggle-group.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+import { toggleVariants } from "@/components/core/toggle"
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  variant: "outline",
+  size: "md",
+})
+
+type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>
+
+function ToggleGroup({ className, variant, size, children, ...props }: ToggleGroupProps) {
+  return (
+    <ToggleGroupPrimitive.Root
+      className={cx("flex items-center", className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  ToggleGroupItemProps
+>(({ className, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cx(
+        toggleVariants({ variant: variant ?? context.variant, size: size ?? context.size }),
+        // connected group: collapse borders between siblings
+        "rounded-none first:rounded-l-lg last:rounded-r-lg",
+        "border-r-0 last:border-r",
+        "[&[data-size=sm]]:first:rounded-l-md [&[data-size=sm]]:last:rounded-r-md",
+        className,
+      )}
+      {...props}
+    />
+  )
+})
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/core/toggle.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const toggleVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 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",
+    "disabled:pointer-events-none disabled:opacity-40",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      variant: {
+        outline: [
+          "border border-border bg-transparent text-muted-foreground",
+          "hover:bg-surface-2 hover:text-foreground hover:border-border-strong",
+          "data-[state=on]:bg-surface-2 data-[state=on]:text-foreground data-[state=on]:border-border-strong",
+        ],
+        ghost: [
+          "bg-transparent text-muted-foreground",
+          "hover:bg-surface-2 hover:text-foreground",
+          "data-[state=on]:bg-surface-2 data-[state=on]:text-foreground",
+        ],
+        solid: [
+          "border border-border bg-transparent text-muted-foreground",
+          "hover:bg-surface-2 hover:text-foreground",
+          "data-[state=on]:bg-foreground data-[state=on]:text-background data-[state=on]:border-foreground",
+        ],
+      },
+      size: {
+        sm:   "h-8 px-3 text-xs rounded-md",
+        md:   "h-9 px-4",
+        lg:   "h-10 px-5 text-base",
+        icon: "h-9 w-9",
+        "icon-sm": "h-8 w-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "md",
+    },
+  }
+)
+
+export interface ToggleProps
+  extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,
+    VariantProps<typeof toggleVariants> {}
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cx(toggleVariants({ variant, size }), className)}
+    {...props}
+  />
+))
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/src/components/core/tooltip.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as RadixTooltip from "@radix-ui/react-tooltip"
+import { cx } from "@/lib/cx"
+
+export const TooltipProvider = RadixTooltip.Provider
+export const Tooltip = RadixTooltip.Root
+export const TooltipTrigger = RadixTooltip.Trigger
+
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof RadixTooltip.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <RadixTooltip.Portal>
+    <RadixTooltip.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cx(
+        "z-50 max-w-xs overflow-hidden rounded-xl border border-border bg-card px-3 py-1.5 text-xs text-foreground shadow-md",
+        "animate-in fade-in-0 zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </RadixTooltip.Portal>
+))
+TooltipContent.displayName = "TooltipContent"

package/src/components/core/typing-indicator.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const wrapperStyles = cva(
+  "inline-flex items-center gap-1",
+  {
+    variants: {
+      variant: {
+        bubble: "rounded-xl bg-surface-2 border border-border px-3 py-2",
+        bare: "",
+      },
+    },
+    defaultVariants: { variant: "bubble" },
+  }
+)
+
+const dotClass = "rounded-full bg-muted-foreground animate-bounce"
+
+const dotSizes = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" }
+
+export interface TypingIndicatorProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof wrapperStyles> {
+  size?: "sm" | "md" | "lg"
+  label?: string
+}
+
+export function TypingIndicator({ variant, size = "md", label = "Typing…", className, ...props }: TypingIndicatorProps) {
+  return (
+    <div
+      role="status"
+      aria-label={label}
+      className={cx(wrapperStyles({ variant }), className)}
+      {...props}
+    >
+      <span
+        className={cx(dotClass, dotSizes[size])}
+        style={{ animationDelay: "0ms", animationDuration: "900ms" }}
+      />
+      <span
+        className={cx(dotClass, dotSizes[size])}
+        style={{ animationDelay: "160ms", animationDuration: "900ms" }}
+      />
+      <span
+        className={cx(dotClass, dotSizes[size])}
+        style={{ animationDelay: "320ms", animationDuration: "900ms" }}
+      />
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Data and type exports — compiled by tsc into dist/
+export * from "./types"
+export * from "./manifests"
+
+// UI component exports — consumed directly by Next.js via transpilePackages.
+// These are NOT compiled by tsc (they import from web app internals).
+// Import paths for UI: "@stampui/blocks/src/components/registry-card"
+// or via the web app's tsconfig path alias "@stampui/blocks" -> src/index.ts