Progress

import { Progress } from '@/components/ui/progress'

// Basic continuous progress
<Progress value={66} />

// With label
<div>
 <div className="flex justify-between text-sm mb-2">
 <span>Progress</span>
 <span>66%</span>
 </div>
 <Progress value={66} />
</div>

// Color variants (continuous style)
<Progress value={45} variant="default" />
<Progress value={100} variant="success" />
<Progress value={75} variant="warning" />
<Progress value={25} variant="error" />

// Segmented style
<Progress progressStyle="segmented" value={65} />

// Segmented with options
<Progress
 progressStyle="segmented"
 value={70}
 color="teal"
 size="lg"
 segments={30}
/>

// Segmented with label
<Progress progressStyle="segmented" value={65} showLabel />

// Segmented with animation
<Progress progressStyle="segmented" value={progress} animate />

// Segmented with gradient
<Progress progressStyle="segmented" value={80} gradient />

// Custom threshold colors
<Progress
 progressStyle="segmented"
 value={85}
 segments={20}
 getSegmentColor={(index, filled, total) => {
 if (index >= filled) return undefined
 const position = index / total
 if (position < 0.5) return '#10b981'
 if (position < 0.75) return '#f59e0b'
 return '#f43f5e'
 }}
/>