Action Button

1'use client'
2 
3import * as React from 'react'
4import { useReducedMotion } from 'motion/react'
5import { cn } from '@/lib/utils'
6import { Button, type ButtonProps } from '@/components/ui/button'
7 
8export type ActionButtonState = 'idle' | 'pending' | 'success' | 'error'
9 
10export interface ActionButtonProps extends Omit<
11  ButtonProps,
12  'loading' | 'loadingLabel' | 'loadingIndicator' | 'onClick'
13> {
14  /**
15   * Controlled state. If provided, the component becomes fully controlled
16   * and ignores the result of `onAction`.
17   */
18  state?: ActionButtonState
19  /**
20   * Default state for uncontrolled mode.
21   */
22  defaultState?: ActionButtonState
23  /**
24   * A callback that returns a promise. The component tracks the promise lifecycle
25   * (idle → pending → success/error → idle). Receives an AbortSignal.
26   */
27  onAction?: (signal: AbortSignal) => Promise<void>
28  /**
29   * Callback fired whenever internal state changes (uncontrolled mode).
30   */
31  onStateChange?: (state: ActionButtonState) => void
32  /**
33   * Minimum time (ms) to show the pending state. Prevents flicker for fast operations.
34   * Defaults to 0 (no minimum). Opt-in only.
35   */
36  minPendingMs?: number
37  /**
38   * Time (ms) before resetting from success/error back to idle.
39   * Defaults to 2000ms. Set to 0 to disable auto-reset.
40   */
41  resetDelayMs?: number
42  /** Label content shown in idle state. */
43  idleLabel?: React.ReactNode
44  /** Label content shown in pending state. */
45  pendingLabel?: React.ReactNode
46  /** Label content shown in success state. */
47  successLabel?: React.ReactNode
48  /** Label content shown in error state. */
49  errorLabel?: React.ReactNode
50  /** Icon shown in idle state. */
51  idleIcon?: React.ReactNode
52  /** Icon shown in pending state. Defaults to a spinner. */
53  pendingIcon?: React.ReactNode
54  /** Icon shown in success state. Defaults to a checkmark. */
55  successIcon?: React.ReactNode
56  /** Icon shown in error state. Defaults to an × glyph. */
57  errorIcon?: React.ReactNode
58  /**
59   * Full control over rendering each state. Overrides individual label/icon props.
60   * The returned node is rendered inside the button.
61   */
62  renderState?: (state: ActionButtonState) => React.ReactNode
63  /**
64   * Accessible live-region announcement per state.
65   * Provide either a static string or a function.
66   */
67  announcements?: Partial<Record<ActionButtonState, string>>
68  /** onClick passthrough — fires only in idle state. Does not track async. */
69// … truncated