Chevron Steps

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5 
6export type ChevronStep = {
7  id?: string | number;
8  label: string;
9  /** Optional accessible description (shown via title attr). */
10  description?: string;
11  /** Optional custom classes per step. */
12  className?: string;
13  /** Disable click for this step. */
14  disabled?: boolean;
15};
16 
17export type ChevronStepsProps = {
18  /** Steps in order. */
19  steps: ChevronStep[];
20 
21  /** Zero-based current step index. */
22  current?: number;
23 
24  /** Called when a (non-disabled) step is clicked. */
25  onStepClick?: (index: number, step: ChevronStep) => void;
26 
27  /** Sizes & look */
28  size?: 'sm' | 'md' | 'lg';
29  variant?: 'brand' | 'neutral';
30 
31  /** Tail (arrow) width in px (CSS variable) */
32  tailWidth?: number;
33 
34  /** Roundness on the bar */
35  radius?: 'md' | 'lg' | 'xl' | '2xl';
36 
37  /** Allow horizontal scroll on small screens */
38  scrollable?: boolean;
39 
40  /** Root class */
41  className?: string;
42 
43  /** Slot overrides */
44  stepClassName?: string;
45  stepActiveClassName?: string;
46  stepCompletedClassName?: string;
47  stepUpcomingClassName?: string;
48};
49 
50/**
51 * ChevronSteps: horizontally joined chevron items with a configurable arrow tail,
52 * a11y-friendly (list+buttons), and simple API.
53 */
54export default function ChevronSteps({
55  steps,
56  current = 0,
57  onStepClick,
58  size = 'md',
59  variant = 'brand',
60  tailWidth = 18,
61  radius = '2xl',
62  scrollable = true,
63  className,
64  stepClassName,
65  stepActiveClassName,
66  stepCompletedClassName,
67  stepUpcomingClassName,
68}: ChevronStepsProps) {
69  const h =
70    size === 'sm'
71      ? 'h-8 text-xs'
72      : size === 'lg'
73        ? 'h-14 text-base'
74        : 'h-11 text-sm';
75  const pad = size === 'sm' ? 'px-4' : size === 'lg' ? 'px-7' : 'px-6';
76  const r =
77    radius === 'md'
78      ? 'rounded-md'
79      : radius === 'lg'
80        ? 'rounded-lg'
81        : radius === 'xl'
82          ? 'rounded-xl'
83          : 'rounded-2xl';
84 
85  // The chevron shape uses a clip-path polygon with --twc-tail custom property
86  // to create the arrow head. We mask the first/last to give rounded ends.
87  const baseStep =
88    'relative isolate flex grow select-none items-center justify-center whitespace-nowrap font-medium transition-colors';
89 
90  const theme =
91    variant === 'brand'
92      ? {
93          active: 'bg-blue-700 text-white',
94          completed:
95            'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200',
96          upcoming:
97// … truncated