0.55.0 - Add Countdown timer component

[jalexw]

Summary

Adds a new Countdown component—a live countdown timer that ticks down to a target date/time. Useful for trial expiry, scheduled maintenance windows, limited-time offers, and session timeouts.

Key Changes

• New Countdown component (src/components/ui/countdown/countdown.tsx)

  • Accepts target as Date, ISO string, or epoch-ms number
  • Three layout variants: boxed (default), plain, and compact
  • Four colour intents: default, brand, warning, destructive
  • Three sizes: sm, default, lg
  • Configurable display: show/hide days, seconds, and unit labels
  • Fires onComplete callback exactly once when target is reached
  • Supports custom completedContent to render when countdown finishes
  • Accessible with proper ARIA labels and semantic HTML (role="timer")
  • Uses suppressHydrationWarning on dynamic time values for SSR compatibility

• Comprehensive Storybook stories (src/components/ui/countdown/Countdown.stories.tsx)

  • Default story with interactive controls
  • Variant showcase (boxed, plain, compact)
  • Size showcase (sm, default, lg)
  • Colour showcase (all four intents)
  • Usage examples: without labels, hours/minutes only, imminent deadline, completed state

• Public exports (src/components/ui/countdown/index.ts)

  • Exports component, variant CVA utilities, and type definitions

• Library integration (src/components/ui/index.ts)

  • Added countdown exports to main UI library barrel export

• Version bump (package.json)

  • Updated from 0.54.3 to 0.55.0

Implementation Details

• Uses setInterval for 1-second tick updates with proper cleanup
• Calculates time parts (days, hours, minutes, seconds) with support for hiding days (hours absorb overflow)
• Pads numeric values to two digits for consistent display
• Generates accessible descriptions for screen readers
• Compact variant renders as HH:MM:SS or HH:MM format
• Boxed and plain variants render individual segments with optional labels
• Properly handles edge cases: invalid targets, completed countdowns, hydration mismatches

https://claude.ai/code/session_01FC7R7ebM1k2MPzBLGhUzgB

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	May 22, 2026 11:52am