import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as o, normalizeClass as a, createElementVNode as c, createCommentVNode as u } from "vue";
import { useColors as g } from "../../composables/useColors.js";
import { useTheme as f } from "../../composables/useTheme.js";
const y = {
  ...g.props("primary"),
  percentage: {
    type: Number,
    default: 0,
    validator: (r) => r >= 0 && r <= 100
  },
  gradient: Boolean,
  animate: {
    type: Boolean,
    default: !0
  },
  thick: Boolean
}, h = { name: "XProgress" }, v = /* @__PURE__ */ m({
  ...h,
  props: y,
  setup(r) {
    const l = r, { styles: i, classes: d, className: p } = f("Progress", {}, l);
    return (e, b) => (s(), n("div", {
      style: t(o(i)),
      class: a([
        o(p),
        o(d).wrapper
      ])
    }, [
      c("div", {
        class: a(["h-full", [
          e.gradient ? "bg-gradient-to-r" : "bg-[color:var(--x-progress-bg)]",
          {
            "duration-150 transition-[width]": e.animate
          }
        ]]),
        style: t([e.gradient ? "" : { width: `${e.percentage}%` }])
      }, null, 6),
      e.gradient ? (s(), n("div", {
        key: 0,
        class: a(["absolute h-full bg-secondary-100 dark:bg-secondary-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
        style: t({
          width: `${100 - e.percentage}%`
        })
      }, null, 6)) : u("", !0)
    ], 6));
  }
});
export {
  v as default
};
