Progress

---
import { Progress } from "@/components/starwind/progress";
---

<div class="w-full max-w-[400px]">
  <Progress id="demo-progress" value={50} />
</div>

import { Progress } from "@/components/starwind/progress";

export function Example() {
  return (
    <>
      <div className="w-full max-w-[400px]">
        <Progress id="demo-progress" value={50} />
      </div>
    </>
  );
}

---
import { Progress } from "@/components/starwind/progress";
---

<div class="flex flex-col gap-4 w-full max-w-[400px]" slot="preview">
  <Progress id="default" value={60} variant="default" />
  <Progress id="primary" value={60} variant="primary" />
  <Progress id="secondary" value={60} variant="secondary" />
  <Progress id="info" value={60} variant="info" />
  <Progress id="success" value={60} variant="success" />
  <Progress id="warning" value={60} variant="warning" />
  <Progress id="error" value={60} variant="error" />
</div>

import { Progress } from "@/components/starwind/progress";

export function Example() {
  return (
    <>
      <div className="flex flex-col gap-4 w-full max-w-[400px]">
        <Progress id="default" value={60} variant="default" />
        <Progress id="primary" value={60} variant="primary" />
        <Progress id="secondary" value={60} variant="secondary" />
        <Progress id="info" value={60} variant="info" />
        <Progress id="success" value={60} variant="success" />
        <Progress id="warning" value={60} variant="warning" />
        <Progress id="error" value={60} variant="error" />
      </div>
    </>
  );
}

---
import { Progress } from "@/components/starwind/progress";
---

<Progress id="indeterminate" />

import { Progress } from "@/components/starwind/progress";

export function Example() {
  return (
    <>
      <Progress id="indeterminate" />
    </>
  );
}

---
import { Progress } from "@/components/starwind/progress";
import { Button } from "@/components/starwind/button";
---

<div class="flex w-full max-w-[400px] flex-col gap-4">
  <h3 class="text-lg font-medium">Interactive Progress Example</h3>

  <div class="space-y-4">
    <Progress id="interactive-progress" value={25} class="w-full" />

    <Button id="toggle-progress" variant="outline">Toggle Progress (25% ⟷ 75%)</Button>
  </div>
</div>

<script>
  let isHighValue = false;

  function setupProgressExample() {
    const progressElement = document.getElementById("interactive-progress");
    const toggleButton = document.getElementById("toggle-progress");

    if (!progressElement || !toggleButton) return;

    toggleButton.addEventListener("click", () => {
      isHighValue = !isHighValue;
      const newValue = isHighValue ? 75 : 25;

      progressElement.setAttribute("data-value", String(newValue));
    });
  }

  setupProgressExample();
  document.addEventListener("astro:after-swap", setupProgressExample);
</script>

import { useState } from "react";
import { Button } from "@/components/starwind/button";
import { Progress } from "@/components/starwind/progress";

export function Example() {
  const [value, setValue] = useState(25);

  return (
    <div className="flex w-full max-w-[400px] flex-col gap-4">
      <h3 className="text-lg font-medium">Interactive Progress Example</h3>
      <div className="space-y-4">
        <Progress value={value} className="w-full" />
        <Button
          variant="outline"
          onClick={() => setValue((current) => (current === 25 ? 75 : 25))}
        >
          Toggle Progress (25% ↔ 75%)
        </Button>
      </div>
    </div>
  );
}