{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "action-confirmation-provider",
  "dependencies": [
    "@inertiajs/react"
  ],
  "registryDependencies": [
    "@craft/confirm-action",
    "button",
    "dialog",
    "input",
    "input-otp",
    "label"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/action-confirmation-provider.tsx",
      "content": "import { REGEXP_ONLY_DIGITS } from \"input-otp\";\nimport {\n  createContext,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from \"react\";\nimport InputError from \"@/components/input-error\";\nimport PasswordInput from \"@/components/password-input\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@/components/ui/input-otp\";\nimport { Label } from \"@/components/ui/label\";\nimport { Spinner } from \"@/components/ui/spinner\";\nimport { OTP_MAX_LENGTH } from \"@/hooks/use-two-factor-auth\";\nimport { type ConfirmationType, runConfirmAction } from \"@/lib/confirm-action\";\n\ntype ConfirmSensitiveAction = <T>(action: () => Promise<T>) => Promise<T>;\n\ntype ActionConfirmationContextValue = {\n  confirmSensitiveAction: ConfirmSensitiveAction;\n};\n\nclass ActionConfirmationCancelledError extends Error {\n  constructor() {\n    super(\"Action confirmation was cancelled.\");\n    this.name = \"ActionConfirmationCancelledError\";\n  }\n}\n\nconst ActionConfirmationContext = createContext<ActionConfirmationContextValue | null>(null);\n\ntype PendingConfirmation = {\n  resolve: () => void;\n  reject: (error: Error) => void;\n};\n\nconst getCsrfHeader = (): Record<string, string> => {\n  const token = document.querySelector<HTMLMetaElement>('meta[name=\"csrf-token\"]')?.content;\n\n  if (token) {\n    return { \"X-CSRF-TOKEN\": token };\n  }\n\n  const cookie = document.cookie\n    .split(\"; \")\n    .find((value) => value.startsWith(\"XSRF-TOKEN=\"))\n    ?.slice(\"XSRF-TOKEN=\".length);\n\n  return cookie ? { \"X-XSRF-TOKEN\": decodeURIComponent(cookie) } : {};\n};\n\nconst getError = async (response: Response, field: \"password\" | \"code\"): Promise<string> => {\n  try {\n    const payload = await response.json();\n    const fieldErrors = payload?.errors?.[field];\n\n    if (Array.isArray(fieldErrors) && typeof fieldErrors[0] === \"string\") {\n      return fieldErrors[0];\n    }\n\n    if (typeof payload?.message === \"string\") {\n      return payload.message;\n    }\n  } catch {\n    // Fall through to the generic message below.\n  }\n\n  return field === \"password\"\n    ? \"Unable to confirm your password.\"\n    : \"Unable to confirm your authentication code.\";\n};\n\nconst normalizeAuthenticationCode = (value: string): string => value.replace(/\\D/g, \"\");\n\nexport function ActionConfirmationProvider({ children }: { children: ReactNode }) {\n  const pendingConfirmation = useRef<PendingConfirmation | null>(null);\n  const [confirmationType, setConfirmationType] = useState<ConfirmationType | null>(null);\n  const [password, setPassword] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n  const [processing, setProcessing] = useState(false);\n\n  const open = confirmationType !== null;\n  const isTwoFactorConfirmation = confirmationType === \"two-factor\";\n\n  const resetDialog = () => {\n    setPassword(\"\");\n    setCode(\"\");\n    setError(null);\n    setProcessing(false);\n  };\n\n  const requestConfirmation = useCallback((type: ConfirmationType): Promise<void> => {\n    resetDialog();\n    setConfirmationType(type);\n\n    return new Promise((resolve, reject) => {\n      pendingConfirmation.current = { resolve, reject };\n    });\n  }, []);\n\n  const confirmSensitiveAction = useCallback<ConfirmSensitiveAction>(\n    (action) => runConfirmAction(action, requestConfirmation),\n    [requestConfirmation],\n  );\n\n  const closeDialog = () => {\n    pendingConfirmation.current?.reject(new ActionConfirmationCancelledError());\n    pendingConfirmation.current = null;\n    setConfirmationType(null);\n    resetDialog();\n  };\n\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    if (!confirmationType) {\n      return;\n    }\n\n    setProcessing(true);\n    setError(null);\n\n    const field = isTwoFactorConfirmation ? \"code\" : \"password\";\n    const response = await fetch(\n      isTwoFactorConfirmation ? \"/auth/two-factor-authentication/confirm\" : \"/confirm-password\",\n      {\n        method: \"POST\",\n        headers: {\n          Accept: \"application/json\",\n          \"Content-Type\": \"application/json\",\n          ...getCsrfHeader(),\n        },\n        credentials: \"same-origin\",\n        body: JSON.stringify(isTwoFactorConfirmation ? { code } : { password }),\n      },\n    );\n\n    if (!response.ok) {\n      setError(await getError(response, field));\n      setProcessing(false);\n\n      return;\n    }\n\n    pendingConfirmation.current?.resolve();\n    pendingConfirmation.current = null;\n    setConfirmationType(null);\n    resetDialog();\n  };\n\n  return (\n    <ActionConfirmationContext.Provider value={{ confirmSensitiveAction }}>\n      {children}\n\n      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && closeDialog()}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>\n              {isTwoFactorConfirmation ? \"Confirm authentication code\" : \"Confirm password\"}\n            </DialogTitle>\n            <DialogDescription>\n              {isTwoFactorConfirmation\n                ? \"Enter the authentication code from your authenticator app to continue this action.\"\n                : \"Confirm your password to continue this action.\"}\n            </DialogDescription>\n          </DialogHeader>\n\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\n            {isTwoFactorConfirmation ? (\n              <div className=\"flex flex-col items-center justify-center gap-3 text-center\">\n                <Label htmlFor=\"confirm-action-code\" className=\"sr-only\">\n                  Authentication code\n                </Label>\n                <InputOTP\n                  id=\"confirm-action-code\"\n                  maxLength={OTP_MAX_LENGTH}\n                  value={code}\n                  onChange={(value) => setCode(normalizeAuthenticationCode(value))}\n                  disabled={processing}\n                  pattern={REGEXP_ONLY_DIGITS}\n                  autoFocus\n                >\n                  <InputOTPGroup>\n                    {Array.from({ length: OTP_MAX_LENGTH }).map((_, index) => (\n                      <InputOTPSlot key={index} index={index} />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n                <InputError message={error ?? undefined} />\n              </div>\n            ) : (\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"confirm-action-password\">Password</Label>\n                <PasswordInput\n                  id=\"confirm-action-password\"\n                  value={password}\n                  onChange={(event) => setPassword(event.target.value)}\n                  autoComplete=\"current-password\"\n                  autoFocus\n                  required\n                />\n                <InputError message={error ?? undefined} />\n              </div>\n            )}\n\n            <DialogFooter>\n              <Button type=\"button\" variant=\"outline\" onClick={closeDialog}>\n                Cancel\n              </Button>\n              <Button\n                type=\"submit\"\n                disabled={\n                  processing ||\n                  (isTwoFactorConfirmation ? code.length !== OTP_MAX_LENGTH : password.length === 0)\n                }\n              >\n                {processing && <Spinner />}\n                {isTwoFactorConfirmation ? \"Confirm code\" : \"Confirm password\"}\n              </Button>\n            </DialogFooter>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </ActionConfirmationContext.Provider>\n  );\n}\n\nexport function useActionConfirmation() {\n  const context = useContext(ActionConfirmationContext);\n\n  if (!context) {\n    throw new Error(\"useActionConfirmation must be used within ActionConfirmationProvider.\");\n  }\n\n  return context;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}