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

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

// Basic usage
<Progress value={50} />

// With label
<Progress value={75} showLabel />

// Success variant
<Progress value={100} variant="success" />

// Different sizes
<Progress value={30} size="sm" />
<Progress value={60} size="lg" />

// Label above the bar (left-right layout)
<Progress value={50} showLabel />

// Floating label that follows the progress
<Progress value={50} floatingLabel />

// Label inside the bar
<Progress value={50} innerLabel size="lg" />

// Label at the end (right side)
<Progress value={50} endLabel />

<Progress value={50} vertical />

// Thickness in Tailwind spacing units (1 = 0.25rem)
<Progress value={50} thickness={6} />
<Progress value={50} vertical thickness={4} />

// Static stripes
<Progress value={50} striped />

// Animated stripes
<Progress value={70} striped animated />

// With variant
<Progress value={80} striped animated variant="success" />

// Outlined wrapper around the bar
<Progress value={50} outlined />

// Outlined with variant
<Progress value={75} outlined variant="success" />

// Combine with striped and animated
<Progress value={80} outlined striped animated variant="success" />

:root {
    --progress-height-sm: 0.125rem; /* Thinner small size */
    --progress-height-default: 0.75rem; /* Thicker default */
    --progress-height-lg: 1.5rem; /* Larger large size */
}

:root {
    --progress-border-radius: 0; /* Square corners */
}

/* or */
:root {
    --progress-border-radius: 9999px; /* Fully rounded */
}

:root {
    --progress-background: hsl(240 5% 85%); /* Custom gray */
}

.dark {
    --progress-background: hsl(240 5% 20%); /* Darker for dark mode */
}

:root {
    --progress-outline-border-width: 3px; /* Thicker border */
    --progress-outline-padding: 0.5rem; /* More padding */
    --progress-outline-border-radius: 1rem; /* More rounded */
}

:root {
    --progress-stripe-size: 1.5rem; /* Larger stripes */
    --progress-animation-duration: 2s; /* Slower animation */
}

:root {
    /* Heights */
    --progress-height-sm: 0.25rem;
    --progress-height-default: 0.625rem;
    --progress-height-lg: 1.25rem;

    /* Appearance */
    --progress-border-radius: 0.5rem;
    --progress-background: hsl(210 40% 90%);

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

    /* Stripes */
    --progress-stripe-size: 0.75rem;
    --progress-animation-duration: 1.5s;
}

.dark {
    --progress-background: hsl(210 40% 15%);
}