2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T1687,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { useEffect, useRef, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type Status = "idle" | "queued" | "running" | "waiting" | "done" | "failed"; const TONES: Record = { idle: { dot: "bg-neutral-400 dark:bg-neutral-500", halo: "bg-neutral-400/25", soft: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300", label: "Idle", }, queued: { dot: "bg-transparent ring-[1.5px] ring-inset ring-neutral-400 dark:ring-neutral-500", halo: "bg-neutral-400/25", soft: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300", label: "Queued", }, running: { dot: "bg-amber-500", halo: "bg-amber-500/30", soft: "bg-amber-500/10 text-amber-700 dark:bg-amber-400/15 dark:text-amber-300", label: "Running", }, waiting: { dot: "bg-sky-500", halo: "bg-sky-500/30", soft: "bg-sky-500/10 text-sky-700 dark:bg-sky-400/15 dark:text-sky-300", label: "Waiting", }, done: { dot: "bg-emerald-500", halo: "bg-emerald-500/30", soft: "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-400/15 dark:text-emerald-300", label: "Done", }, failed: { dot: "bg-red-500", halo: "bg-red-500/30", soft: "bg-red-500/10 text-red-700 dark:bg-red-400/15 dark:text-red-300", label: "Failed", }, }; const SIZES = { sm: "size-1.5", md: "size-2", lg: "size-2.5" } as const; export const statusLabel = (status: Status) => TONES[status].label; export interface StatusDotProps extends ComponentProps<"span"> { status?: Status; size?: keyof typeof SIZES; /** A soft ring around the dot. */ halo?: boolean; /** One ripple when the status changes. It never loops. */ pulse?: boolean; /** Read by screen readers; defaults to the status name. Pass "" when text beside the dot already says it. */ label?: string; } export function StatusDot({ status = "idle", size = "md", halo = true, pulse = true, label, className, ...props }: StatusDotProps) { const tone = TONES[status]; const first = useRef(true); useEffect(() => { first.current = false; }, []); const text = label ?? tone.label; return ( {halo && status !== "queued" && } {pulse && !first.current && ( )} ); } export interface StatusBadgeProps extends Omit, "children"> { status?: Status; /** outline: a raised white chip · soft: tinted with the status colour · plain: just the dot and text. */ variant?: "outline" | "soft" | "plain"; size?: "sm" | "md"; /** Text beside the dot; defaults to the status name. */ children?: ReactNode; } export function StatusBadge({ status = "idle", variant = "outline", size = "md", className, children, ...props }: StatusBadgeProps) { const tone = TONES[status]; const text = children ?? tone.label; return ( {text} ); } export default StatusDot; 2e:Tde47,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { useEffect, useRef, type ComponentProps, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type Status = "idle" | "queued" | "running" | "waiting" | "done" | "failed";

const TONES: Record<Status, { dot: string; halo: string; soft: string; label: string }> = {
  idle: {
    dot: "bg-neutral-400 dark:bg-neutral-500",
    halo: "bg-neutral-400/25",
    soft: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300",
    label: "Idle",
  },
  queued: {
    dot: "bg-transparent ring-[1.5px] ring-inset ring-neutral-400 dark:ring-neutral-500",
    halo: "bg-neutral-400/25",
    soft: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300",
    label: "Queued",
  },
  running: {
    dot: "bg-amber-500",
    halo: "bg-amber-500/30",
    soft: "bg-amber-500/10 text-amber-700 dark:bg-amber-400/15 dark:text-amber-300",
    label: "Running",
  },
  waiting: {
    dot: "bg-sky-500",
    halo: "bg-sky-500/30",
    soft: "bg-sky-500/10 text-sky-700 dark:bg-sky-400/15 dark:text-sky-300",
    label: "Waiting",
  },
  done: {
    dot: "bg-emerald-500",
    halo: "bg-emerald-500/30",
    soft: "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-400/15 dark:text-emerald-300",
    label: "Done",
  },
  failed: {
    dot: "bg-red-500",
    halo: "bg-red-500/30",
    soft: "bg-red-500/10 text-red-700 dark:bg-red-400/15 dark:text-red-300",
    label: "Failed",
  },
};

const SIZES = { sm: "size-1.5", md: "size-2", lg: "size-2.5" } as const;

export const statusLabel = (status: Status) => TONES[status].label;

export interface StatusDotProps extends ComponentProps<"span"> {
  status?: Status;
  size?: keyof typeof SIZES;
  /** A soft ring around the dot. */
  halo?: boolean;
  /** One ripple when the status changes. It never loops. */
  pulse?: boolean;
  /** Read by screen readers; defaults to the status name. Pass "" when text beside the dot already says it. */
  label?: string;
}

export function StatusDot({ status = "idle", size = "md", halo = true, pulse = true, label, className, ...props }: StatusDotProps) {
  const tone = TONES[status];
  const first = useRef(true);
  useEffect(() => {
    first.current = false;
  }, []);
  const text = label ?? tone.label;
  return (
    <MotionConfig reducedMotion="user">
      <span
        role={text ? "img" : undefined}
        aria-label={text || undefined}
        aria-hidden={text ? undefined : true}
        data-status={status}
        className={cn("relative inline-flex shrink-0 items-center justify-center", SIZES[size], className)}
        {...props}
      >
        {halo && status !== "queued" && <span className={cn("absolute -inset-[3px] rounded-full transition-colors duration-300", tone.halo)} />}
        <AnimatePresence initial={false}>
          {pulse && !first.current && (
            <motion.span
              key={status}
              className={cn("absolute inset-0 rounded-full", tone.dot)}
              initial={{ scale: 1, opacity: 0.55 }}
              animate={{ scale: 3.2, opacity: 0 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
            />
          )}
        </AnimatePresence>
        <motion.span
          key={`dot-${status}`}
          className={cn("relative size-full rounded-full transition-colors duration-300", tone.dot)}
          initial={first.current ? false : { scale: 0.4 }}
          animate={{ scale: 1 }}
          transition={{ type: "spring", bounce: 0.5, duration: 0.45 }}
        />
      </span>
    </MotionConfig>
  );
}

export interface StatusBadgeProps extends Omit<ComponentProps<typeof motion.span>, "children"> {
  status?: Status;
  /** outline: a raised white chip · soft: tinted with the status colour · plain: just the dot and text. */
  variant?: "outline" | "soft" | "plain";
  size?: "sm" | "md";
  /** Text beside the dot; defaults to the status name. */
  children?: ReactNode;
}

export function StatusBadge({ status = "idle", variant = "outline", size = "md", className, children, ...props }: StatusBadgeProps) {
  const tone = TONES[status];
  const text = children ?? tone.label;
  return (
    <MotionConfig reducedMotion="user">
      <motion.span
        layout
        transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
        className={cn(
          "inline-flex shrink-0 items-center overflow-hidden whitespace-nowrap font-medium",
          size === "sm" ? "h-5 gap-1.5 rounded-[6px] px-1.5 text-[11.5px]" : "h-6 gap-2 rounded-[8px] px-2 text-[12.5px]",
          variant === "outline" &&
            "bg-white text-neutral-700 shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.07] dark:bg-neutral-900 dark:text-neutral-200 dark:ring-white/[0.1]",
          variant === "soft" && tone.soft,
          variant === "plain" && "px-0 text-neutral-700 dark:text-neutral-300",
          className,
        )}
        style={{ borderRadius: size === "sm" ? 6 : 8 }}
        {...props}
      >
        <StatusDot status={status} size="sm" halo={variant !== "soft"} label="" />
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span
            key={typeof text === "string" ? text : status}
            layout="position"
            initial={{ opacity: 0, y: 6, filter: "blur(2px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -6, filter: "blur(2px)" }}
            transition={{ type: "spring", bounce: 0, duration: 0.3 }}
          >
            {text}
          </motion.span>
        </AnimatePresence>
      </motion.span>
    </MotionConfig>
  );
}

export default StatusDot;

2f:Tc77,"use client"; import { Play, RotateCcw } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { StatusBadge, StatusDot, type Status } from "@/components/scalar-ui/status-dot"; const steps = [ { name: "Fetch customer list", plan: ["running", "done"], ms: 900 }, { name: "Enrich with company data", plan: ["running", "done"], ms: 1500 }, { name: "Draft outreach emails", plan: ["running", "waiting"], ms: 2100 }, { name: "Send to Slack", plan: ["running", "failed"], ms: 2700 }, ] as const; export default function Demo() { const [states, setStates] = useState(["done", "running", "waiting", "failed"]); const timers = useRef([]); useEffect(() => () => timers.current.forEach(clearTimeout), []); const run = () => { timers.current.forEach(clearTimeout); setStates(steps.map(() => "queued")); steps.forEach((s, i) => { timers.current.push(window.setTimeout(() => setStates((p) => p.map((v, j) => (j === i ? s.plan[0] : v))), 300 + i * 450)); timers.current.push(window.setTimeout(() => setStates((p) => p.map((v, j) => (j === i ? s.plan[1] : v))), 300 + s.ms)); }); }; const started = states.some((s) => s !== "queued"); const overall: Status = states.includes("failed") ? "failed" : states.includes("running") ? "running" : states.includes("waiting") ? "waiting" : started ? "done" : "queued"; return (

Lead enrichment

Run #482 · 4 steps

{s.name}

); } 30:T7d64,

"use client";

import { Play, RotateCcw } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { StatusBadge, StatusDot, type Status } from "@/components/scalar-ui/status-dot";

const steps = [
  { name: "Fetch customer list", plan: ["running", "done"], ms: 900 },
  { name: "Enrich with company data", plan: ["running", "done"], ms: 1500 },
  { name: "Draft outreach emails", plan: ["running", "waiting"], ms: 2100 },
  { name: "Send to Slack", plan: ["running", "failed"], ms: 2700 },
] as const;

export default function Demo() {
  const [states, setStates] = useState<Status[]>(["done", "running", "waiting", "failed"]);
  const timers = useRef<number[]>([]);
  useEffect(() => () => timers.current.forEach(clearTimeout), []);
  const run = () => {
    timers.current.forEach(clearTimeout);
    setStates(steps.map(() => "queued"));
    steps.forEach((s, i) => {
      timers.current.push(window.setTimeout(() => setStates((p) => p.map((v, j) => (j === i ? s.plan[0] : v))), 300 + i * 450));
      timers.current.push(window.setTimeout(() => setStates((p) => p.map((v, j) => (j === i ? s.plan[1] : v))), 300 + s.ms));
    });
  };
  const started = states.some((s) => s !== "queued");
  const overall: Status = states.includes("failed") ? "failed" : states.includes("running") ? "running" : states.includes("waiting") ? "waiting" : started ? "done" : "queued";
  return (
    <div className="w-full max-w-[420px] rounded-[20px] bg-white p-1.5 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="flex items-center justify-between gap-3 px-3 pb-2.5 pt-2">
        <div className="min-w-0">
          <p className="text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Lead enrichment</p>
          <p className="text-[12px] text-neutral-500 dark:text-neutral-400">Run #482 · 4 steps</p>
        </div>
        <StatusBadge status={overall} variant="soft" />
      </div>
      <ul className="rounded-[14px] bg-neutral-50 p-1 ring-1 ring-black/[0.04] dark:bg-white/[0.03] dark:ring-white/[0.06]">
        {steps.map((s, i) => (
          <li key={s.name} className="flex h-10 items-center gap-3 rounded-[10px] px-3 text-[13px] text-neutral-700 dark:text-neutral-300">
            <StatusDot status={states[i]} label="" />
            <span className="min-w-0 flex-1 truncate">{s.name}</span>
            <StatusBadge status={states[i]} variant="plain" size="sm" className="text-neutral-500 dark:text-neutral-400" />
          </li>
        ))}
      </ul>
      <div className="flex justify-end px-1.5 pb-1 pt-2.5">
        <button
          onClick={run}
          className="flex h-8 items-center gap-1.5 rounded-[10px] bg-neutral-950 px-3 text-[13px] font-medium text-white outline-none transition-colors hover:bg-neutral-800 focus-visible:bg-neutral-700 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200"
        >
          {started ? <RotateCcw className="size-3.5" /> : <Play className="size-3.5" />}
          {started ? "Run again" : "Run"}
        </button>
      </div>
    </div>
  );
}

31:T494,import { StatusDot, statusLabel, type Status } from "@/components/scalar-ui/status-dot"; const all: Status[] = ["idle", "queued", "running", "waiting", "done", "failed"]; export default function Example() { return (

{all.map((s) => (

{statusLabel(s)}

))}

{(["sm", "md", "lg"] as const).map((size) => (

{size}

))}

no halo

); } 32:T3591,

import { StatusDot, statusLabel, type Status } from "@/components/scalar-ui/status-dot";

const all: Status[] = ["idle", "queued", "running", "waiting", "done", "failed"];

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="grid grid-cols-3 gap-x-10 gap-y-4 sm:grid-cols-6">
        {all.map((s) => (
          <div key={s} className="flex flex-col items-center gap-2.5">
            <StatusDot status={s} size="lg" />
            <span className="text-[12px] text-neutral-500 dark:text-neutral-400">{statusLabel(s)}</span>
          </div>
        ))}
      </div>
      <div className="flex items-center gap-5">
        {(["sm", "md", "lg"] as const).map((size) => (
          <div key={size} className="flex items-center gap-2 text-[12px] text-neutral-500 dark:text-neutral-400">
            <StatusDot status="done" size={size} />
            {size}
          </div>
        ))}
        <div className="flex items-center gap-2 text-[12px] text-neutral-500 dark:text-neutral-400">
          <StatusDot status="done" halo={false} />
          no halo
        </div>
      </div>
    </div>
  );
}

33:T2e5c,

import { StatusBadge, type Status } from "@/components/scalar-ui/status-dot";

const all: Status[] = ["queued", "running", "waiting", "done", "failed"];

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-4">
      {(["outline", "soft", "plain"] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center justify-center gap-2">
          {all.map((s) => (
            <StatusBadge key={s} status={s} variant={variant} />
          ))}
        </div>
      ))}
      <div className="flex flex-wrap items-center justify-center gap-2">
        <StatusBadge status="running" size="sm">Building</StatusBadge>
        <StatusBadge status="done" size="sm">Ready</StatusBadge>
        <StatusBadge status="failed" size="sm">Error</StatusBadge>
        <StatusBadge status="waiting" size="sm">Needs approval</StatusBadge>
      </div>
    </div>
  );
}

34:T4af,"use client"; import { useState } from "react"; import { StatusBadge, StatusDot, type Status } from "@/components/scalar-ui/status-dot"; const cycle: Status[] = ["queued", "running", "waiting", "running", "done", "failed"]; export default function Example() { const [i, setI] = useState(1); const status = cycle[i % cycle.length]; return (

Each change ripples once, and the badge resizes to fit the new label.

); } 35:T2c40,

"use client";

import { useState } from "react";
import { StatusBadge, StatusDot, type Status } from "@/components/scalar-ui/status-dot";

const cycle: Status[] = ["queued", "running", "waiting", "running", "done", "failed"];

export default function Example() {
  const [i, setI] = useState(1);
  const status = cycle[i % cycle.length];
  return (
    <div className="flex flex-col items-center gap-5">
      <div className="flex items-center gap-4">
        <StatusDot status={status} size="lg" />
        <StatusBadge status={status} />
        <StatusBadge status={status} variant="soft" />
      </div>
      <button
        onClick={() => setI((n) => n + 1)}
        className="h-8 rounded-[10px] bg-white px-3 text-[13px] font-medium text-neutral-800 shadow-[0_1px_2px_rgb(0_0_0/0.05)] outline-none ring-1 ring-black/[0.08] transition-colors hover:bg-neutral-50 focus-visible:bg-neutral-100 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-white/[0.1] dark:hover:bg-neutral-800"
      >
        Next status
      </button>
      <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Each change ripples once, and the badge resizes to fit the new label.</p>
    </div>
  );
}

36:T810,import { GitBranch } from "lucide-react"; import { StatusBadge, StatusDot, type Status } from "@/components/scalar-ui/status-dot"; const rows: { id: string; branch: string; message: string; status: Status; label: string; time: string }[] = [ { id: "8f2c1a", branch: "main", message: "Ship pricing page", status: "running", label: "Building", time: "Just now" }, { id: "d41e09", branch: "feat/onboarding", message: "Add welcome checklist", status: "done", label: "Ready", time: "12m ago" }, { id: "7a90bb", branch: "fix/auth-redirect", message: "Keep return URL after login", status: "failed", label: "Error", time: "1h ago" }, { id: "c3d2f8", branch: "main", message: "Bump dependencies", status: "done", label: "Ready", time: "3h ago" }, { id: "19ab44", branch: "chore/cleanup", message: "Remove old flags", status: "queued", label: "Queued", time: "3h ago" }, ]; export default function Example() { return (

{rows.map((r) => (

{r.message}

{r.branch} · {r.id}

{r.label} {r.time}

))}

); } 37:T4a7a,

import { GitBranch } from "lucide-react";
import { StatusBadge, StatusDot, type Status } from "@/components/scalar-ui/status-dot";

const rows: { id: string; branch: string; message: string; status: Status; label: string; time: string }[] = [
  { id: "8f2c1a", branch: "main", message: "Ship pricing page", status: "running", label: "Building", time: "Just now" },
  { id: "d41e09", branch: "feat/onboarding", message: "Add welcome checklist", status: "done", label: "Ready", time: "12m ago" },
  { id: "7a90bb", branch: "fix/auth-redirect", message: "Keep return URL after login", status: "failed", label: "Error", time: "1h ago" },
  { id: "c3d2f8", branch: "main", message: "Bump dependencies", status: "done", label: "Ready", time: "3h ago" },
  { id: "19ab44", branch: "chore/cleanup", message: "Remove old flags", status: "queued", label: "Queued", time: "3h ago" },
];

export default function Example() {
  return (
    <div className="w-full max-w-[560px] overflow-hidden rounded-[18px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      {rows.map((r) => (
        <div key={r.id} className="flex items-center gap-3 border-b border-black/[0.05] px-4 py-3 last:border-0 dark:border-white/[0.06]">
          <StatusDot status={r.status} label={r.label} />
          <div className="min-w-0 flex-1">
            <p className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">{r.message}</p>
            <p className="flex items-center gap-1 truncate text-[12px] text-neutral-500 dark:text-neutral-400">
              <GitBranch className="size-3" />
              {r.branch}
              <span className="font-mono text-[11px] text-neutral-400">· {r.id}</span>
            </p>
          </div>
          <StatusBadge status={r.status} size="sm" className="hidden sm:inline-flex">
            {r.label}
          </StatusBadge>
          <span className="w-16 shrink-0 text-right text-[12px] text-neutral-400">{r.time}</span>
        </div>
      ))}
    </div>
  );
}

29:["$","section","status-dot",{"id":"status-dot","aria-labelledby":"status-dot-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"status-dot-title","className":"sr-only","children":"Status Dot"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"status-dot","gated":{"unlocked":true,"files":[{"name":"status-dot.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"states":{"name":"states.tsx","code":"$31","html":"$32"},"badge":{"name":"badge.tsx","code":"import { StatusBadge, type Status } from \"@/components/scalar-ui/status-dot\";\n\nconst all: Status[] = [\"queued\", \"running\", \"waiting\", \"done\", \"failed\"];\n\nexport default function Example() {\n return (\n

\n {([\"outline\", \"soft\", \"plain\"] as const).map((variant) => (\n

\n {all.map((s) => (\n \n ))}\n

\n ))}\n

\n Building\n Ready\n Error\n Needs approval\n

\n );\n}\n","html":"$33"},"live":{"name":"live.tsx","code":"$34","html":"$35"},"deployments":{"name":"deployments.tsx","code":"$36","html":"$37"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add status-dot","shadcn":"npx shadcn@latest add https://scalarui.com/r/status-dot.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L38","toolbar":"$L39"}]}],["$L3a","$L3b","$L3c","$L3d"]]}]

Status Dots

Status Dots

States

Badge

Live

Deployments