Progress

Built on the Radix Progress primitive, which provides `role="progressbar"`, `aria-valuenow`/`aria-valuemax` and `data-state`. The value is clamped with the same validity rules Radix uses, so the bar width and the ARIA value agree. Determinate: the indicator's `width` is the percentage, with a width transition on the motion tokens. Indeterminate: a 40%-wide segment animated with Motion from `x: -100%` to `250%` (relative to its own width, so it fully enters and leaves the track), 1.4 s on an ease-in-out curve (`[0.65, 0, 0.35, 1]`), repeating. `useReducedMotion` swaps that for a still segment at the start, dimmed to 60% so it reads as "working" rather than a value.

**Pebble (2026-11-03).** The track is a recessed well (`bg-muted`, hairline ring, `inset-shadow-xs`) and the fill is a raised object in it. The new `variant` prop picks the fill: `default` is the lit key in miniature (key gradient, key-edge ring, key shine), `accent` is ember for the live task, and `success` / `danger` report results; all carry a top highlight and `data-variant` is exposed. A new `lg` size (12 px) suits step-style progress. Determinate width now transitions over `--motion-slow` with `ease-enter`, and any value above 0 gets `min-w-2` so "started" never reads as empty. The indeterminate segment uses an ease-in-out-cubic curve (`[0.65, 0, 0.35, 1]`) and keeps its reduced-motion still, dimmed state.

<!-- PEBBLE-LICENSE -->

registry/feedback/progress/progress.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: progress.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { motion, useReducedMotion } from "motion/react";
import { Progress as ProgressPrimitive } from "radix-ui";

import { cn } from "@/lib/utils";

const sizes = {
  sm: "h-1",
  md: "h-2",
  lg: "h-3",
} as const;

// Pebble: the track is a recessed well; the fill is a raised object sitting in
// it. `default` is the lit key in miniature (ink in light, paper in dark);
// `accent` is ember for the live or current task; status tones for results.
const fills = {
  default:
    "bg-linear-to-b from-key-top to-key-bottom shadow-[var(--key-shine)] ring-1 ring-key-edge",
  accent: "bg-accent inset-shadow-highlight",
  success: "bg-success inset-shadow-highlight",
  danger: "bg-danger inset-shadow-highlight",
} as const;

export type ProgressProps = Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "value"> & {
  value?: number | null;
  size?: keyof typeof sizes;
  variant?: keyof typeof fills;
};

export function Progress({
  value = null,
  max = 100,
  size = "md",
  variant = "default",
  className,
  ...props
}: ProgressProps) {
  const reduceMotion = useReducedMotion();
  // Same validity rules as Radix, so the bar and its ARIA state agree.
  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
  const clamped =
    value == null || !Number.isFinite(value) ? null : Math.min(Math.max(value, 0), safeMax);
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      data-variant={variant}
      value={clamped}
      max={safeMax}
      className={cn(
        "relative w-full overflow-hidden rounded-full bg-muted ring-1 inset-shadow-xs ring-hairline",
        sizes[size],
        className,
      )}
      {...props}
    >
      {clamped == null ? (
        <ProgressPrimitive.Indicator asChild>
          <motion.div
            data-slot="progress-indicator"
            className={cn(
              "absolute inset-y-0 left-0 w-2/5 rounded-full motion-reduce:opacity-60",
              fills[variant],
            )}
            initial={{ x: "0%" }}
            animate={reduceMotion ? { x: "0%" } : { x: ["-100%", "250%"] }}
            transition={
              reduceMotion
                ? { duration: 0 }
                : { duration: 1.4, ease: [0.65, 0, 0.35, 1], repeat: Infinity }
            }
          />
        </ProgressPrimitive.Indicator>
      ) : (
        <ProgressPrimitive.Indicator
          data-slot="progress-indicator"
          className={cn(
            // A sliver is still visible at small values so "started" never
            // reads as "empty"; 0 stays truly empty.
            "h-full rounded-full transition-[width] duration-(--motion-slow) ease-enter motion-reduce:transition-none",
            clamped > 0 && "min-w-2",
            fills[variant],
          )}
          style={{ width: `${(clamped / safeMax) * 100}%` }}
        />
      )}
    </ProgressPrimitive.Root>
  );
}