@playbooks/ui/dist/progress-bars.es.js

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { useUI } from "./context.es.js";
import { Div } from "./html.es.js";
const ProgressBar = ({
  name = "ProgressBar",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.progressBar();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const Progress = ({ name = "Progress", value = 0, tailwind, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.progress();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, style: { width: `${value}%` } });
};
const RadialProgressBar = ({
  name = "RadialProgressBar",
  tailwind,
  className,
  children,
  ...props
}) => {
  useUI();
  const base = {};
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { width: "w-40", ...computed, children: [
    /* @__PURE__ */ jsxs("svg", { className: "w-full -rotate-90", viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", ...tailwind?.svg, children: [
      /* @__PURE__ */ jsx(
        "circle",
        {
          cx: "18",
          cy: "18",
          r: "16",
          fill: "none",
          className: "stroke-current text-gray-200 dark:text-neutral-700",
          strokeWidth: "2",
          ...tailwind?.baseCircle
        }
      ),
      /* @__PURE__ */ jsx(
        "circle",
        {
          cx: "18",
          cy: "18",
          r: "16",
          fill: "none",
          className: "stroke-current text-blue-600 dark:text-blue-500",
          strokeWidth: "2",
          strokeDasharray: "100",
          strokeDashoffset: "75",
          strokeLinecap: "round",
          ...tailwind?.fillCircle
        }
      )
    ] }),
    children
  ] });
};
export {
  Progress,
  ProgressBar,
  RadialProgressBar
};