Progress

/** @jsxImportSource hono/jsx */
import { cn, type ClassValue } from "@/registry/lib/cn"

// Progress — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Source of truth (track visual):
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/progress.tsx
//
// Upstream uses Radix Progress.Root + Indicator. For SSR we render a real
// progressbar element: role="progressbar" + aria-valuemin/max/now/text.
// Pass value=undefined to render the indeterminate state (per ARIA spec).
//
// Refs:
//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/progressbar_role/
//   repos/mdn/files/en-us/web/html/reference/elements/progress/  (native; we don't use this — limited styling)

type ProgressProps = {
  // 0–max (or max prop). Pass undefined for indeterminate ("we don't
  // know how long this will take").
  value?: number
  max?: number
  min?: number
  // Accessible name — required when there's no visible label.
  ariaLabel?: string
  ariaLabelledby?: string
  // Optional human-readable label, e.g. "Uploading… 42 of 100 MB".
  ariaValuetext?: string
  class?: ClassValue
  id?: string
  // Forwarded to the root <div role="progressbar">. Progress is the textbook
  // htmx polling target — re-render the bar from the server on a recurring
  // trigger (hx-get + hx-trigger="every 2s", repos/htmx htmx-guidance.md Polling).
  [key: `hx-${string}`]: any
  [key: `data-${string}`]: any
}

export function Progress(props: ProgressProps) {
  const {
    value,
    max = 100,
    min = 0,
    ariaLabel,
    ariaLabelledby,
    ariaValuetext,
    class: className,
    id,
    ...rest
  } = props
  const determinate = value !== undefined
  const pct = determinate ? Math.min(100, Math.max(0, ((value! - min) / (max - min)) * 100)) : 0
  return (
    <div
      id={id}
      role="progressbar"
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      aria-valuemin={min}
      aria-valuemax={max}
      aria-valuenow={determinate ? value : undefined}
      aria-valuetext={ariaValuetext}
      data-slot="progress"
      data-state={determinate ? "determinate" : "indeterminate"}
      class={cn(
        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
        className,
      )}
      {...rest}
    >
      <div
        data-slot="progress-indicator"
        class={cn(
          "h-full bg-primary transition-all",
          // Indeterminate state animates a 30%-width bar across the track.
          !determinate && "absolute inset-y-0 -left-1/3 w-1/3 animate-[scn-progress-indeterminate_1.2s_ease-in-out_infinite]",
        )}
        style={determinate ? `width: ${pct}%` : undefined}
      />
    </div>
  )
}

{# Progress macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/progress.tsx. Pass value=none for indeterminate. #}

{# **attrs forwards arbitrary attributes (e.g. hx-* polling) onto the
   progressbar root — repos/htmx htmx-guidance.md Polling (hx-get + every 2s). #}
{% macro progress(value=none, min=0, max=100, aria_label=none, aria_labelledby=none, aria_valuetext=none, id=none, extra_class="", **attrs) %}
{%- set determinate = value is not none -%}
{%- set pct = ((value - min) / (max - min) * 100) if determinate else 0 -%}
<div {% if id %}id="{{ id }}"{% endif %}
     role="progressbar"
     {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
     {% if aria_labelledby %}aria-labelledby="{{ aria_labelledby }}"{% endif %}
     aria-valuemin="{{ min }}" aria-valuemax="{{ max }}"
     {% if determinate %}aria-valuenow="{{ value }}"{% endif %}
     {% if aria_valuetext %}aria-valuetext="{{ aria_valuetext }}"{% endif %}
     data-slot="progress" data-state="{{ 'determinate' if determinate else 'indeterminate' }}"
     class="relative h-2 w-full overflow-hidden rounded-full bg-primary/20 {{ extra_class }}"
     {%- for k, v in attrs.items() %} {{ k|replace('_','-') }}="{{ v }}"{% endfor %}>
  <div data-slot="progress-indicator"
       class="h-full bg-primary transition-all {% if not determinate %}absolute inset-y-0 -left-1/3 w-1/3 animate-[scn-progress-indeterminate_1.2s_ease-in-out_infinite]{% endif %}"
       {% if determinate %}style="width: {{ pct }}%"{% endif %}></div>
</div>
{% endmacro %}

{{/* Progress template — shadcn-htmx, htmx v4 + Tailwind v4.
     Pass Value as nil for indeterminate.
     .Attrs (map[string]string) forwards arbitrary attributes (e.g. hx-*
     polling) onto the progressbar root — repos/htmx htmx-guidance.md Polling. */}}

{{define "progress"}}
{{- $min := or .Min 0 -}}
{{- $max := or .Max 100 -}}
{{- $determinate := false -}}{{- if .Value -}}{{- $determinate = true -}}{{- end -}}
<div {{if .ID}}id="{{.ID}}"{{end}}
     role="progressbar"
     {{if .AriaLabel}}aria-label="{{.AriaLabel}}"{{end}}
     {{if .AriaLabelledby}}aria-labelledby="{{.AriaLabelledby}}"{{end}}
     aria-valuemin="{{$min}}" aria-valuemax="{{$max}}"
     {{if $determinate}}aria-valuenow="{{deref .Value}}"{{end}}
     {{if .AriaValuetext}}aria-valuetext="{{.AriaValuetext}}"{{end}}
     data-slot="progress" data-state="{{if $determinate}}determinate{{else}}indeterminate{{end}}"
     class="relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
     {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}>
  <div data-slot="progress-indicator"
       class="h-full bg-primary transition-all{{if not $determinate}} absolute inset-y-0 -left-1/3 w-1/3 animate-[scn-progress-indeterminate_1.2s_ease-in-out_infinite]{{end}}"
       {{if $determinate}}style="width: {{deref .Value}}%"{{end}}></div>
</div>
{{end}}

defmodule ShadcnHtmx.Components.Progress do
  @moduledoc """
  Progress — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.

  ARIA role="progressbar" with valuemin/max/now. Pass `value={nil}` for
  the indeterminate state (animated stripe).

  ## Examples

      <.progress value={42} aria-label="Upload progress" />
      <.progress aria-label="Loading" />     # indeterminate
  """

  use Phoenix.Component

  attr :value, :integer, default: nil
  attr :min, :integer, default: 0
  attr :max, :integer, default: 100
  attr :"aria-label", :string, default: nil
  attr :"aria-labelledby", :string, default: nil
  attr :"aria-valuetext", :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global

  def progress(assigns) do
    determinate = !is_nil(assigns.value)

    pct =
      if determinate,
        do: (assigns.value - assigns.min) / (assigns.max - assigns.min) * 100,
        else: 0

    assigns =
      assigns
      |> assign(:determinate, determinate)
      |> assign(:pct, pct)

    ~H"""
    <div
      role="progressbar"
      aria-label={assigns[:"aria-label"]}
      aria-labelledby={assigns[:"aria-labelledby"]}
      aria-valuemin={@min}
      aria-valuemax={@max}
      aria-valuenow={if @determinate, do: @value}
      aria-valuetext={assigns[:"aria-valuetext"]}
      data-slot="progress"
      data-state={if @determinate, do: "determinate", else: "indeterminate"}
      class={[
        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
        @class
      ]}
      {@rest}
    >
      <div
        data-slot="progress-indicator"
        class={[
          "h-full bg-primary transition-all",
          !@determinate &&
            "absolute inset-y-0 -left-1/3 w-1/3 animate-[scn-progress-indeterminate_1.2s_ease-in-out_infinite]"
        ]}
        style={if @determinate, do: "width: #{@pct}%"}
      />
    </div>
    """
  end
end

<!--
  shadcn-htmx — raw HTML progress snippets.

  role="progressbar" + aria-valuemin/max/now. Omit aria-valuenow for the
  indeterminate state and add the animated stripe via Tailwind keyframes
  in input.css.
-->

<!-- Determinate (42%) -->
<div role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"
     data-slot="progress" data-state="determinate"
     class="relative h-2 w-full overflow-hidden rounded-full bg-primary/20">
  <div data-slot="progress-indicator" class="h-full bg-primary transition-all" style="width: 42%"></div>
</div>

<!-- Indeterminate -->
<div role="progressbar" aria-label="Loading" aria-valuemin="0" aria-valuemax="100"
     data-slot="progress" data-state="indeterminate"
     class="relative h-2 w-full overflow-hidden rounded-full bg-primary/20">
  <div data-slot="progress-indicator"
       class="absolute inset-y-0 -left-1/3 h-full w-1/3 bg-primary animate-[scn-progress-indeterminate_1.2s_ease-in-out_infinite]"></div>
</div>