// Progress Bar (segmented, determinate) — Vendoo Design System  (ProgressBar)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   progress/progress-bar/ProgressBar.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like LinearProgress.jsx / Steps.jsx / Navigation.jsx — this file
// registers it on window.VendooDesignSystem_a81b7b instead of using a top-level
// ESM `export` (the in-browser Babel transform rejects `export`). The playground
// renders this straight from the namespace; nothing is reimplemented.
// Requires tokens.css. React is global. Honors prefers-reduced-motion (fill
// transition disabled). role="progressbar" with aria-valuenow (determinate).
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_PBAR_CSS = `
.vds-pbar{ display:flex; flex-direction:row; align-items:center;
  gap:var(--sys-space-inline-gap-tight); padding:var(--sys-space-inline-gap-tight);
  height:12px; width:100%; box-sizing:border-box; overflow:hidden; }
.vds-pbar__seg{ position:relative; flex:1 1 0; height:4px; min-width:0;
  border-radius:var(--sys-radius-full); background:var(--sys-secondary-container);
  overflow:hidden; }
.vds-pbar__fill{ position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--sys-primary); border-radius:inherit;
  transition:width .35s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce){ .vds-pbar__fill{ transition:none; } }
`;
  function vdsInjectCss(id, css) {
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style");
    s.id = id;
    s.textContent = css;
    document.head.appendChild(s);
  }

  // value is expressed in segments (0 → segments). Fractional values partially
  // fill the current segment, e.g. value=1.6 → segment 1 full, segment 2 at 60%.
  function ProgressBar({ segments = 5, value = 0, width, label = "Progress", className, style }) {
    vdsInjectCss("vds-pbar-css", VDS_PBAR_CSS);
    const merged = Object.assign({}, width != null ? { width } : null, style);
    const v = Math.max(0, Math.min(segments, value));
    const pct = segments > 0 ? Math.round((v / segments) * 100) : 0;
    return (
      <div
        className={"vds-pbar" + (className ? " " + className : "")}
        style={merged}
        role="progressbar"
        aria-label={label}
        aria-valuenow={pct}
        aria-valuemin={0}
        aria-valuemax={100}
      >
        {Array.from({ length: segments }, (_, i) => {
          const fill = Math.max(0, Math.min(1, v - i));
          return (
            <span key={i} className="vds-pbar__seg">
              <span className="vds-pbar__fill" style={{ width: (fill * 100) + "%" }}></span>
            </span>
          );
        })}
      </div>
    );
  }

  ns.ProgressBar = ProgressBar;
})();