Progress

package progress import (	"context"	"fmt" 	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "progressState" type ctxState struct {	value int	max   int} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{max: 100}} func percentage(value, max int) int {	if max <= 0 {		max = 100	}	if value < 0 {		value = 0	}	if value > max {		value = max	}	return (value * 100) / max} // statusAttr mirrors Base UI's ProgressStatus data attribute on every part:// data-complete once the value reaches max, data-progressing otherwise (a Go// int is never indeterminate).func statusAttr(value, max int) templ.Attributes {	if max <= 0 {		max = 100	}	if value >= max {		return templ.Attributes{"data-complete": ""}	}	return templ.Attributes{"data-progressing": ""}} type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Value      int	// Max defaults to 100.	Max int} type LabelProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ValueProps struct {	ID         string	Class      string	Attributes templ.Attributes} templ Progress(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Max == 0 {		{{ p.Max = 100 }}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{value: p.Value, max: p.Max}) }}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="progress"		data-tui-progress		role="progressbar"		aria-valuemin="0"		aria-valuemax={ fmt.Sprintf("%d", p.Max) }		aria-valuenow={ fmt.Sprintf("%d", p.Value) }		aria-valuetext={ fmt.Sprintf("%d%%", percentage(p.Value, p.Max)) }		class={ utils.CN("cn-progress-root flex flex-wrap gap-3", p.Class) }		{ statusAttr(p.Value, p.Max)... }		{ p.Attributes... }	>		{ children... }		@Track() {			@Indicator()		}		// Base UI's NVDA workaround span, part of the rendered output.		<span role="presentation" style="clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:fixed;top:0;left:0">x</span>	</div>} type TrackProps struct {	ID         string	Class      string	Attributes templ.Attributes} // Track is 1:1 base/ui/progress.tsx ProgressTrack; Progress renders it// after the children like the reference, and it stays composable alone.templ Track(props ...TrackProps) {	{{ var p TrackProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ s := state(ctx) }}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="progress-track"		data-tui-progress-part		class={ utils.CN("cn-progress-track relative flex w-full items-center overflow-x-hidden", p.Class) }		{ statusAttr(s.value, s.max)... }		{ p.Attributes... }	>		{ children... }	</div>} type IndicatorProps struct {	ID         string	Class      string	Attributes templ.Attributes} // Indicator is 1:1 base/ui/progress.tsx ProgressIndicator; the width comes// from the root's value via context.templ Indicator(props ...IndicatorProps) {	{{ var p IndicatorProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ s := state(ctx) }}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="progress-indicator"		data-tui-progress-indicator		data-tui-progress-part		class={ utils.CN("cn-progress-indicator h-full transition-all", p.Class) }		style={ fmt.Sprintf("inset-inline-start:0;height:inherit;width:%d%%", percentage(s.value, s.max)) }		{ statusAttr(s.value, s.max)... }		{ p.Attributes... }	></div>} templ Label(props ...LabelProps) {	{{ var p LabelProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	{{ s := state(ctx) }}	<span		id={ p.ID }		data-slot="progress-label"		data-tui-progress-part		role="presentation"		class={ utils.CN("cn-progress-label", p.Class) }		{ statusAttr(s.value, s.max)... }		{ p.Attributes... }	>		{ children... }	</span>} // Value renders the current value as a percentage (Base UI Progress.Value).templ Value(props ...ValueProps) {	{{ var p ValueProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ s := state(ctx) }}	<span		if p.ID != "" {			id={ p.ID }		}		data-slot="progress-value"		data-tui-progress-part		aria-hidden="true"		class={ utils.CN("cn-progress-value", p.Class) }		{ statusAttr(s.value, s.max)... }		{ p.Attributes... }	>		{ fmt.Sprintf("%d%%", percentage(s.value, s.max)) }	</span>}

(function () {  'use strict';   // Pendant of Base UI's status state: data-complete once value reaches max,  // data-progressing otherwise, mirrored onto the root and every part.  function setStatus(el, complete) {    el.removeAttribute(complete ? 'data-progressing' : 'data-complete');    el.setAttribute(complete ? 'data-complete' : 'data-progressing', '');  }   function updateProgress(progressBar) {    const indicator = progressBar.querySelector('[data-tui-progress-indicator]');    if (!indicator) return;     const value = parseFloat(progressBar.getAttribute('aria-valuenow') || '0');    const max = parseFloat(progressBar.getAttribute('aria-valuemax') || '100') || 100;    const percentage = Math.max(0, Math.min(100, (value / max) * 100));     indicator.style.width = percentage + '%';    progressBar.setAttribute('aria-valuetext', Math.round(percentage) + '%');     const complete = value >= max;    setStatus(progressBar, complete);    progressBar      .querySelectorAll('[data-tui-progress-part]')      .forEach((part) => setStatus(part, complete));     const valueEl = progressBar.querySelector('[data-slot="progress-value"]');    if (valueEl) valueEl.textContent = Math.round(percentage) + '%';  }   // One shared observer translates aria-valuenow/aria-valuemax changes into  // indicator width, value text, aria-valuetext and status attributes.  const attrObserver = new MutationObserver((mutations) => {    mutations.forEach((mutation) => updateProgress(mutation.target));  });   function observeBar(bar) {    if (bar.hasAttribute('data-tui-progress-observed')) return;    bar.setAttribute('data-tui-progress-observed', 'true');     // Pendant of Base UI's label registration: a Label child links itself to    // the root via aria-labelledby.    const label = bar.querySelector('[data-slot="progress-label"]');    if (label && label.id && !bar.hasAttribute('aria-labelledby')) {      bar.setAttribute('aria-labelledby', label.id);    }     updateProgress(bar);    attrObserver.observe(bar, {      attributes: true,      attributeFilter: ['aria-valuenow', 'aria-valuemax'],    });  }   // Bars present at load register immediately; bars swapped in later (e.g.  // htmx) register via the childList observer.  function initAll() {    document.querySelectorAll('[role="progressbar"]').forEach(observeBar);  }   if (document.readyState === 'loading') {    document.addEventListener('DOMContentLoaded', initAll);  } else {    initAll();  }  new MutationObserver(initAll).observe(document.documentElement, {    childList: true,    subtree: true,  });})();