import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
import { useState as n } from "react";
import { H as m, C as l, a as o, T as i, ae as a, P as h, A as u, c as v } from "../index-sdOMz8GW.js";
import { BarChart3 as p } from "lucide-react";
import "react-router-dom";
import "react-dom";
const x = () => {
  const [s, c] = n(45);
  return /* @__PURE__ */ r(t, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Progressbar",
        description: `A progress bar component for displaying completion status with
          customizable colors, sizes, and variants.`,
        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
      /* @__PURE__ */ r(l, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Basic Progressbar" }),
        /* @__PURE__ */ e(a, { value: s })
      ] }),
      /* @__PURE__ */ r(l, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Label" }),
        /* @__PURE__ */ e(
          a,
          {
            value: s,
            label: `${s}%`,
            size: "xl"
          }
        )
      ] }),
      /* @__PURE__ */ r(l, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Interactive Example" }),
        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(
            a,
            {
              value: s,
              label: `${s}%`,
              size: "xl"
            }
          ),
          /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
            /* @__PURE__ */ e(
              "button",
              {
                onClick: () => c(Math.max(0, s - 10)),
                className: "px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",
                children: "-10"
              }
            ),
            /* @__PURE__ */ e(
              "button",
              {
                onClick: () => c(Math.min(100, s + 10)),
                className: "px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",
                children: "+10"
              }
            )
          ] })
        ] })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Colors" }),
        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(a, { value: 60, color: "primary" }),
          /* @__PURE__ */ e(a, { value: 60, color: "success" }),
          /* @__PURE__ */ e(a, { value: 60, color: "danger" }),
          /* @__PURE__ */ e(a, { value: 60, color: "info" }),
          /* @__PURE__ */ e(a, { value: 60, color: "warning" })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Variants" }),
        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(a, { value: 60, variant: "solid" }),
          /* @__PURE__ */ e(a, { value: 60, variant: "flat" })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Sizes" }),
        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(a, { value: 60, size: "sm" }),
          /* @__PURE__ */ e(a, { value: 60, size: "DEFAULT" }),
          /* @__PURE__ */ e(a, { value: 60, size: "lg" }),
          /* @__PURE__ */ e(a, { value: 60, size: "xl" })
        ] })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      h,
      {
        componentName: "Progressbar",
        defaultValues: {
          value: 65,
          variant: "solid",
          size: "DEFAULT",
          color: "primary",
          rounded: "DEFAULT"
        },
        excludeProps: ["label", "barClassName", "labelClassName"],
        children: (d) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(a, { ...d }) })
      }
    ),
    /* @__PURE__ */ e(u, { componentName: "Progressbar" }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      v,
      {
        language: "tsx",
        code: `import { Progressbar } from '@e-burgos/tucu-ui';

// Basic usage
<Progressbar value={45} />

// With label
<Progressbar value={45} label="45%" size="xl" />

// Different colors
<Progressbar value={60} color="primary" />
<Progressbar value={60} color="success" />
<Progressbar value={60} color="danger" />

// Different variants
<Progressbar value={60} variant="solid" />
<Progressbar value={60} variant="flat" />

// Different sizes
<Progressbar value={60} size="sm" />
<Progressbar value={60} size="lg" />
<Progressbar value={60} size="xl" />`
      }
    ) }) }) })
  ] });
};
export {
  x as default
};
