@monkey-mini-app/ui 0.1.0

package/dist/src/blocks/scrollspy.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+
+export function Scrollspy({
+  sections,
+}: {
+  sections: { id: string; label: string }[]
+}) {
+  const [active, setActive] = React.useState(sections[0]?.id)
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.find((entry) => entry.isIntersecting)
+        if (visible?.target.id) setActive(visible.target.id)
+      },
+      { rootMargin: "-40% 0px -50% 0px" }
+    )
+    sections.forEach((section) => {
+      const el = document.getElementById(section.id)
+      if (el) observer.observe(el)
+    })
+    return () => observer.disconnect()
+  }, [sections])
+  return (
+    <nav className="flex flex-col gap-1 text-sm" data-testid="scrollspy">
+      {sections.map((section) => (
+        <a
+          key={section.id}
+          href={`#${section.id}`}
+          className={
+            active === section.id
+              ? "text-foreground font-medium"
+              : "text-muted-foreground"
+          }
+        >
+          {section.label}
+        </a>
+      ))}
+    </nav>
+  )
+}

package/dist/src/blocks/severity-chip.tsx

@@ -0,0 +1,27 @@
+import { Badge } from "@monkey-mini-app/ui/components/badge"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+const tone = {
+  P0: "bg-destructive/15 text-destructive",
+  P1: "bg-orange-500/15 text-orange-700 dark:text-orange-400",
+  P2: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  P3: "bg-muted text-muted-foreground",
+  critical: "bg-destructive/15 text-destructive",
+  high: "bg-orange-500/15 text-orange-700 dark:text-orange-400",
+  medium: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  low: "bg-muted text-muted-foreground",
+} as const
+
+export type Severity = keyof typeof tone
+
+export function SeverityChip({ severity }: { severity: Severity | string }) {
+  return (
+    <Badge
+      variant="outline"
+      data-testid="severity-chip"
+      className={cn("border-transparent uppercase", tone[severity as Severity] ?? tone.low)}
+    >
+      {severity}
+    </Badge>
+  )
+}

package/dist/src/blocks/sparkline.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { Line, LineChart } from "recharts"
+
+import { ChartContainer, type ChartConfig } from "@monkey-mini-app/ui/components/chart"
+
+const config = {
+  value: { label: "Value", color: "var(--chart-1)" },
+} satisfies ChartConfig
+
+export function Sparkline({ data }: { data: { value: number }[] }) {
+  return (
+    <ChartContainer config={config} className="h-10 w-24" data-testid="sparkline">
+      <LineChart data={data}>
+        <Line dataKey="value" type="monotone" stroke="var(--color-value)" strokeWidth={1.5} dot={false} />
+      </LineChart>
+    </ChartContainer>
+  )
+}

package/dist/src/blocks/stat-card.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@monkey-mini-app/ui/components/card"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export type StatCardProps = {
+  title: string
+  value: ReactNode
+  delta?: string
+  trend?: "up" | "down" | "flat"
+  children?: ReactNode
+}
+
+/**
+ * KPI card: title, value, optional delta/trend.
+ * @when Dashboard metric strip
+ * @example
+ * <StatCard title="Pass rate" value="98%" delta="+1.2%" trend="up" />
+ */
+export function StatCard({ title, value, delta, trend = "flat", children }: StatCardProps) {
+  return (
+    <Card data-testid="stat-card">
+      <CardHeader>
+        <CardTitle className="text-muted-foreground text-sm font-normal">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        <div className="text-2xl font-medium" data-testid="stat-card-value">
+          {value}
+        </div>
+        {delta ? (
+          <div
+            data-testid="stat-card-delta"
+            className={cn(
+              "text-xs",
+              trend === "up" && "text-emerald-600",
+              trend === "down" && "text-destructive",
+              trend === "flat" && "text-muted-foreground"
+            )}
+          >
+            {delta}
+          </div>
+        ) : null}
+        {children}
+      </CardContent>
+    </Card>
+  )
+}

package/dist/src/blocks/status-badge.tsx

@@ -0,0 +1,39 @@
+import { Badge } from "@monkey-mini-app/ui/components/badge"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export const statusTone = {
+  pass: "border-transparent bg-emerald-600/15 text-emerald-700 dark:text-emerald-400",
+  fail: "border-transparent bg-destructive/15 text-destructive",
+  blocked: "border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  flaky: "border-transparent bg-orange-500/15 text-orange-700 dark:text-orange-400",
+  running: "border-transparent bg-sky-500/15 text-sky-700 dark:text-sky-400",
+  pending: "border-transparent bg-muted text-muted-foreground",
+} as const
+
+export type StatusKey = keyof typeof statusTone
+
+/**
+ * Toned badge for run/test status.
+ * @when pass | fail | blocked | flaky | running | pending cells and chips
+ * @example
+ * <StatusBadge status="pass" />
+ */
+export function StatusBadge({
+  status,
+  className,
+}: {
+  status: StatusKey | string
+  className?: string
+}) {
+  const tone = statusTone[status as StatusKey] ?? statusTone.pending
+  return (
+    <Badge
+      variant="outline"
+      data-testid="status-badge"
+      data-status={status}
+      className={cn("capitalize", tone, className)}
+    >
+      {status}
+    </Badge>
+  )
+}

package/dist/src/blocks/terminal.tsx

@@ -0,0 +1,10 @@
+export function Terminal({ lines }: { lines: string[] }) {
+  return (
+    <pre
+      data-testid="terminal"
+      className="overflow-auto rounded-xl bg-zinc-950 p-3 font-mono text-xs leading-6 text-zinc-100"
+    >
+      {lines.join("\n")}
+    </pre>
+  )
+}

package/dist/src/blocks/test-step-list.tsx

@@ -0,0 +1,19 @@
+import { StatusBadge, type StatusKey } from "@monkey-mini-app/ui/blocks/status-badge"
+
+export type TestStep = { id: string; title: string; status: StatusKey | string }
+
+export function TestStepList({ steps }: { steps: TestStep[] }) {
+  return (
+    <ol className="flex flex-col gap-2" data-testid="test-step-list">
+      {steps.map((step, index) => (
+        <li key={step.id} className="flex items-center justify-between gap-3 text-sm">
+          <span>
+            <span className="text-muted-foreground mr-2">{index + 1}.</span>
+            {step.title}
+          </span>
+          <StatusBadge status={step.status} />
+        </li>
+      ))}
+    </ol>
+  )
+}

package/dist/src/blocks/trend-card.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@monkey-mini-app/ui/components/chart"
+import { StatCard } from "@monkey-mini-app/ui/blocks/stat-card"
+
+export type TrendPoint = { label: string; value: number }
+
+const chartConfig = {
+  value: { label: "Value", color: "var(--chart-1)" },
+} satisfies ChartConfig
+
+export function TrendCard({
+  title,
+  value,
+  delta,
+  trend,
+  data,
+}: {
+  title: string
+  value: ReactNode
+  delta?: string
+  trend?: "up" | "down" | "flat"
+  data: TrendPoint[]
+}) {
+  return (
+    <StatCard title={title} value={value} delta={delta} trend={trend}>
+      <ChartContainer config={chartConfig} className="h-[120px] w-full">
+        <LineChart data={data} accessibilityLayer>
+          <CartesianGrid vertical={false} />
+          <XAxis dataKey="label" tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Line
+            dataKey="value"
+            type="monotone"
+            stroke="var(--color-value)"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      </ChartContainer>
+    </StatCard>
+  )
+}

package/dist/src/components/accordion.tsx

@@ -0,0 +1,72 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { Button } from "@monkey-mini-app/ui/components/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/dist/src/components/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

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

@@ -0,0 +1,22 @@
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }