@vibe-labs/design-components-progress

Progress bar (linear and radial) component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-progress";

import { ProgressSizes, ProgressVariants, ProgressRadialSizes } from "@vibe-labs/design-components-progress/types";
import type { ProgressStyleProps, ProgressRadialStyleProps } from "@vibe-labs/design-components-progress/types";

Contents

Tokens (progress.css)

CSS custom properties defined in @layer vibe.tokens:

Track

Token	Default
--progress-height-sm	0.25rem
--progress-height-md	0.5rem
--progress-height-lg	0.75rem
--progress-radius	--radius-full
--progress-bg	--surface-overlay

Fill

Token	Default
--progress-fill	--color-accent
--progress-fill-success	--color-success
--progress-fill-warning	--color-warning
--progress-fill-danger	--color-danger

Indeterminate

Token	Default
--progress-indeterminate-speed	1.5s

Radial

Token	Default
--progress-radial-size-sm	2rem
--progress-radial-size-md	3rem
--progress-radial-size-lg	5rem
--progress-radial-stroke-width	3px

Generated Styles (progress.g.css)

Component classes generated into @layer vibe.components.

Linear Progress

• progress — full-width track with overflow hidden
• progress-fill — width driven by --progress-value CSS variable, animated transitions
• Sizes: sm · md · lg (default: md)

Color Variants

Variant	Fill color
accent	--progress-fill (accent)
success	--progress-fill-success
warning	--progress-fill-warning
danger	--progress-fill-danger
auto	--progress-auto-color (set via JS for dynamic color based on value)

Modifiers

• indeterminate — 40% width fill with sliding animation
• striped — diagonal stripe overlay on fill
• animated — animates stripes (combine with striped)

Label

• progress-field — flex column wrapper (label + bar)
• progress-label — space-between row for label text and value
• progress-label-value — semibold value display

Radial (Circular) Progress

• progress-radial — inline-flex SVG container, rotated -90° for top-start
• progress-radial-track — background circle stroke
• progress-radial-fill — foreground arc with round linecap, animated via stroke-dashoffset
• progress-radial-label — centered absolute text overlay
• Sizes: sm · md · lg (default: md)

Keyframes

• vibe-progress-indeterminate — translateX sweep
• vibe-progress-stripes — stripe background scroll

TypeScript Types (types/)

ProgressSizes; // ["sm", "md", "lg"]
ProgressVariants; // ["accent", "success", "warning", "danger", "auto"]
ProgressRadialSizes; // ["sm", "md", "lg"]

interface ProgressStyleProps {
  size?: ProgressSize;
  variant?: ProgressVariant;
  indeterminate?: boolean;
  striped?: boolean;
  animated?: boolean;
}

interface ProgressRadialStyleProps {
  size?: ProgressRadialSize;
}
// + fill, field, label, label-value, radial track/fill/label interfaces

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
progress.css	Token definitions
progress.g.css	Generated component styles + keyframes
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, spacing, typography, transitions, borders).

Build

npm run build