deno run -A jsr:@lockness/ui add steppedprogress

import { SteppedProgress } from '@lockness/ui/components'

// Basic usage (2 of 4 steps completed)
<SteppedProgress value={2} steps={4} />

// With end label (percentage at the end)
<SteppedProgress value={2} steps={4} endLabel />

// With inner label (step X of Y inside the bar)
<SteppedProgress value={2} steps={4} innerLabel thickness={6} />

// With checkmark when complete
<SteppedProgress value={4} steps={4} variant="success" showCheck />

<SteppedProgress value={2} steps={4} />
<SteppedProgress value={2} steps={4} variant="success" />
<SteppedProgress value={2} steps={4} variant="warning" />
<SteppedProgress value={2} steps={4} variant="destructive" />

// Thickness in Tailwind spacing units (1 = 0.25rem)
<SteppedProgress value={2} steps={4} thickness={1} />
<SteppedProgress value={2} steps={4} thickness={4} />

// Static stripes
<SteppedProgress value={3} steps={5} striped />

// Animated stripes
<SteppedProgress value={3} steps={5} striped animated />

// With variant
<SteppedProgress value={3} steps={5} striped animated variant="success" />

// Outlined wrapper around the bar
<SteppedProgress value={3} steps={5} outlined />

// Outlined with variant
<SteppedProgress value={4} steps={5} outlined variant="success" />

// Combine with striped and animated
<SteppedProgress value={8} steps={10} outlined striped animated variant="success" thickness={4} />

:root {
    --stepped-progress-step-size: 2.5rem;
    --stepped-progress-step-font-size: 1rem;
    --stepped-progress-step-font-weight: 700;
}

:root {
    --stepped-progress-connector-height: 3px;
    --stepped-progress-connector-color: hsl(240 5% 80%);
}

.dark {
    --stepped-progress-connector-color: hsl(240 5% 30%);
}

:root {
    --stepped-progress-active-color: hsl(220 90% 56%);
    --stepped-progress-inactive-color: hsl(240 5% 65%);
    --stepped-progress-completed-color: hsl(142 76% 36%);
}

.dark {
    --stepped-progress-active-color: hsl(220 90% 66%);
    --stepped-progress-inactive-color: hsl(240 5% 45%);
    --stepped-progress-completed-color: hsl(142 76% 46%);
}

:root {
    --stepped-progress-label-font-size: 1rem;
    --stepped-progress-label-margin-top: 0.75rem;
}

:root {
    /* Segment styling */
    --progress-border-radius: 0.5rem;

    /* Outline styling */
    --progress-outline-border-width: 1px;
    --progress-outline-padding: 0.375rem;
    --progress-outline-border-radius: 0.75rem;

    /* Stripe styling */
    --progress-stripe-size: 0.75rem;
    --progress-animation-duration: 1.5s;

    /* Step indicators */
    --stepped-progress-step-size: 3rem;
    --stepped-progress-step-font-size: 1rem;
    --stepped-progress-step-font-weight: 700;

    /* Connector */
    --stepped-progress-connector-height: 3px;
    --stepped-progress-connector-color: hsl(210 40% 85%);

    /* Colors */
    --stepped-progress-active-color: hsl(262 83% 58%);
    --stepped-progress-inactive-color: hsl(240 5% 70%);
    --stepped-progress-completed-color: hsl(160 60% 45%);

    /* Labels */
    --stepped-progress-label-font-size: 1rem;
    --stepped-progress-label-margin-top: 1rem;
}

.dark {
    --stepped-progress-connector-color: hsl(210 40% 25%);
    --stepped-progress-active-color: hsl(262 83% 68%);
    --stepped-progress-inactive-color: hsl(240 5% 40%);
    --stepped-progress-completed-color: hsl(160 60% 55%);
}