Progress

package progress

props {
  // Value is the current value. The bar clamps it to the range 0 to Max.
  Value int = 0
  // Max is the maximum value. A zero value is 100.
  Max   int = 100
  // Label is the accessible name of the progress bar.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<div role="progressbar" aria-valuemin={0} aria-valuemax={p.max()} aria-valuenow={p.Value} aria-label={p.Label} class={gx.Cx("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", p.Class)} {...p.Attrs}>
  <div class="h-full w-full flex-1 bg-primary transition-all motion-reduce:transition-none" style={gx.Style("transform: translateX(-" + p.offset() + "%)")}></div>
</div>

package progress

import "github.com/alternayte/gx"

var ProgressFixtures = gx.Fixtures[ProgressProps]{
	"Half":  {Value: 50, Label: "Upload"},
	"Full":  {Value: 100, Label: "Upload"},
	"Empty": {Value: 0, Label: "Upload"},
}

package progress

import "strconv"

// max returns the maximum value; a zero value is 100.
func (p ProgressProps) max() int {
	if p.Max == 0 {
		return 100
	}
	return p.Max
}

// offset returns the translated percentage of the unfilled part.
func (p ProgressProps) offset() string {
	v := p.Value
	max := p.max()
	if max <= 0 {
		max = 100
	}
	if v < 0 {
		v = 0
	}
	if v > max {
		v = max
	}
	return strconv.Itoa(100 - (v * 100 / max))
}